refine default highlight for all six views

src/components/Button.vue

@@ -0,0 +1,17 @@
+<template>
+    <div class="button-component flex">
+        {{ buttonText }}
+    </div>
+</template>
+
+<script>
+export default {
+    setup(props) {
+        const buttonText = props.buttonText;
+
+        return {
+            buttonText
+        };
+    },
+}
+</script>

src/stores/cytoscapeStore.ts

@@ -50,7 +50,6 @@ export default defineStore('useCytoscapeStore', {
         this.nodePositions[this.currentGraphId].push({id: nodeId, position: position});
         localStorage.setItem(SAVE_KEY_NAME, JSON.stringify(this.nodePositions));
       }
-      console.log('', );
       this.savePositionsToStorage();
     },
     /**

src/stores/mapPathStore.ts

@@ -18,7 +18,32 @@ export default defineStore('useMapPathStore', {
         clickedPath: [],
         insights: {},
         insightWithPath: {},
-        cytoscape: null,
+        cytoscape: {
+          process:
+          {
+            curved:{
+              horizontal:null,
+              vertical:null,
+            },
+            elbow:{
+              horizontal:null,
+              vertical:null,
+            }
+          },
+          bpmn: {
+            curved:{
+              horizontal:null,
+              vertical:null,
+            },
+            elbow:{
+              horizontal:null,
+              vertical:null,
+            }
+          }
+        },
+        processOrBPMN: 'process',
+        curveType: 'curved',
+        directionType: 'horizontal',
         allPaths: [],
         allPathsByEdge: [],
         startNode: null,
@@ -29,13 +54,21 @@ export default defineStore('useMapPathStore', {
         isBPMNOn: false,
       }),
     actions: {
-      setCytoscape(cytoscape) {
-        this.cytoscape = cytoscape;
+      async setCytoscape(cytoscape, processOrBPMN = 'process', curveType = 'curved', directionType = 'horizontal') {
+        this.processOrBPMN = processOrBPMN;
+        this.curveType = curveType;
+        this.directionType = directionType;
+        this.cytoscape[processOrBPMN][curveType][directionType] = cytoscape;
+        await this.createInsightWithPath();
+        if(processOrBPMN === 'process') {
+          await this.highlightMostFrequentPath();
+        } 
       },
       async createInsightWithPath() {
         const { insights } = AllMapData();
         this.insights = {...insights};
-        this.startNode = this.cytoscape?.nodes().filter(function(elem)  {
+        this.startNode = this.cytoscape[this.processOrBPMN][this.curveType][this.directionType]?.nodes()
+          .filter(function(elem)  {
           return elem.data('label').toLocaleLowerCase() === 'start';
         });
         for(let i = 0; i < INSIGHTS_FIELDS_AND_LABELS.length; i++) {
@@ -79,7 +112,8 @@ export default defineStore('useMapPathStore', {
         }
       },
       async createPaths() {
-        this.startNode = this.cytoscape?.nodes().filter(function(elem)  {
+        this.startNode = this.cytoscape[this.processOrBPMN][this.curveType][this.directionType]?.nodes()
+          .filter(function(elem)  {
           return elem.data('label').toLocaleLowerCase() === 'start';
         });
           // Depth First Search from the starting node
@@ -202,9 +236,9 @@ export default defineStore('useMapPathStore', {
             })
         },
         clearAllHighlight() {
-          this.cytoscape?.edges().removeClass('highlight-edge');
-          this.cytoscape?.nodes().removeClass('highlight-node');
-          this.cytoscape?.nodes().forEach(nodeToReset => {
+          this.cytoscape[this.processOrBPMN][this.curveType][this.directionType]?.edges().removeClass('highlight-edge');
+          this.cytoscape[this.processOrBPMN][this.curveType][this.directionType]?.nodes().removeClass('highlight-node');
+          this.cytoscape[this.processOrBPMN][this.curveType][this.directionType]?.nodes().forEach(nodeToReset => {
             nodeToReset.data('nodeImageUrl', ImgCapsules[nodeToReset.data('level')])
           });
         },
@@ -231,6 +265,7 @@ export default defineStore('useMapPathStore', {
           clickedEdge.addClass('highlight-edge');      
       },
       async highlightMostFrequentPath() {
+        console.log('highlightMostFrequentPath', this.insightWithPath['most_freq_traces'][0]);
         const LIST_INDEX = 0;
         this.insightWithPath['most_freq_traces'][LIST_INDEX].nodes.map(nodeToHighlight => {
           nodeToHighlight.data('nodeImageUrl', ImgCapsulesGlow[nodeToHighlight.data('level')]);

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();