refine default highlight for all six views

src/views/Discover/Map/Map.vue

@@ -53,7 +53,7 @@
 </template>
 
 <script>
-import { onBeforeMount, computed, onMounted } from 'vue';
+import { onBeforeMount, computed, } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useRoute } from 'vue-router';
 import axios from 'axios';
@@ -144,6 +144,7 @@ export default {
       cytoscapeGraph: null,
       curveStyle:'unbundled-bezier', // unbundled-bezier | taxi
       mapType: 'processMap', // processMap | bpmn
+      mapPathStore: MapPathStore(),
       dataLayerType: 'freq', // freq | duration
       dataLayerOption: 'total',
       rank: 'LR', // 直向 TB | 橫向 LR
@@ -227,16 +228,14 @@ export default {
      * @param {string} type 'processMap' | 'bpmn'，可傳入以上任一。
      */
     async switchMapType(type) {
-      const mapPathStore = MapPathStore();
       this.mapType = type;
       this.createCy(type);
-      await mapPathStore.setCytoscape(this.cytoscapeGraph);
     },
     /**
      * switch curve style
      * @param {string} style 直角 'unbundled-bezier' | 'taxi'，可傳入以上任一。
      */
-    switchCurveStyles(style) {
+    async switchCurveStyles(style) {
       this.curveStyle = style;
       this.createCy(this.mapType);
     },
@@ -244,7 +243,7 @@ export default {
      * switch rank
      * @param {string} rank 直向 'TB' | 橫向 'LR'，可傳入以上任一。
      */
-    switchRank(rank) {
+    async switchRank(rank) {
       this.rank = rank;
       this.createCy(this.mapType);
     },
@@ -253,7 +252,7 @@ export default {
      * @param {string} type freq | duration
      * @param {string} option 下拉選單中的選項
      */
-    switchDataLayerType(type, option){
+    async switchDataLayerType(type, option){
       this.dataLayerType = type;
       this.dataLayerOption = option;
       this.createCy(this.mapType);
@@ -411,6 +410,10 @@ export default {
         this.setEdgesData(mapData);
         this.setActivityBgImage(mapData);       
         this.cytoscapeGraph = await cytoscapeMap(mapData, this.dataLayerType, this.dataLayerOption, this.curveStyle, this.rank, graphId);
+        const processOrBPMN = this.mapType === 'processMap' ? 'process' : 'bpmn';
+        const curveType = this.curveStyle === 'taxi' ? 'elbow' : 'curved';
+        const directionType = this.rank === 'LR' ? 'horizontal' : 'vertical';
+        await this.mapPathStore.setCytoscape(this.cytoscapeGraph, processOrBPMN, curveType, directionType);
       };
     },
     setActivityBgImage(mapData) {
@@ -485,9 +488,6 @@ export default {
     this.traceId = await this.traces[0]?.id;
     this.baseTraceId = await this.baseTraces[0]?.id;
     await this.createCy(this.mapType);
-    await mapPathStore.setCytoscape(this.cytoscapeGraph);
-    await mapPathStore.createInsightWithPath();
-    await mapPathStore.highlightMostFrequentPath();
     await this.allMapDataStore.getFilterParams();
     await this.allMapDataStore.getTraceDetail();