default highlight most freq trace

src/stores/mapPathStore.ts

@@ -40,14 +40,7 @@ export default defineStore('useMapPathStore', {
         const { insights } = AllMapData();
         this.insights = {...insights};
         this.matchGraphPathWithInsightsPath();
-        for(let i = 0; i < INSIGHTS_FIELDS_AND_LABELS.length; i++) {
+        this.highlightMostFrequentPath();
-          const curButton = this.insights[INSIGHTS_FIELDS_AND_LABELS[i][0]];
-          for(let listIndex = 0; listIndex < curButton.length; listIndex++) {
-            for(let nodeIndex = 0; nodeIndex < curButton[listIndex].length; nodeIndex++){
-              //curButton[listIndex][nodeIndex]', curButton[listIndex][nodeIndex]           
-            }
-          }
-        }
       },
       /** 從start節點開始建立所有的path
        * 於第二個參數逐漸推入節點，於第三個參數逐漸推入線段
@@ -96,7 +89,8 @@ export default defineStore('useMapPathStore', {
                     this.mapGraphPathToInsight[whichPath] = {
                       [listIndex] : {
                         pathByNode: [...curPath],
-                        pathByEdge: [...curPathByEdge]
+                        pathByEdge: [...curPathByEdge],
+                        pathType: INSIGHTS_FIELDS_AND_LABELS[i][0],
                       }
                     }
                   } // end if
@@ -182,8 +176,27 @@ export default defineStore('useMapPathStore', {
       
           clickedEdge.addClass('highlight-edge');      
       },
-      setIsBPMNOn(isOn: boolean) {
+      highlightMostFrequentPath() {
-        this.isBPMNOn = isOn;
+        for(let whichPath = 0; whichPath < this.allPaths.length; whichPath++) {
+          // 有可能遇到兩個以上的most frequent paths，然而我們只取一個path點亮
+          if (this.mapGraphPathToInsight[whichPath]) {
+            const keyLength = Object.keys(this.mapGraphPathToInsight[whichPath]).length;
+            for(let i = 0; i < keyLength; i++) {
+              if(this.mapGraphPathToInsight[whichPath][i]?.pathType === 'most_freq_traces'){
+                this.mapGraphPathToInsight[whichPath][i].pathByNode.forEach(nodeToHighlight => {
+                  nodeToHighlight.data('nodeImageUrl', ImgCapsulesGlow[nodeToHighlight.data('level')]);
+                });
+                this.mapGraphPathToInsight[whichPath][i].pathByEdge.forEach(
+                  edgeToHighlight => edgeToHighlight.addClass('highlight-edge'));
+                return; // 之所以要此時就立刻return是因為要避免第二個以上的most freq path也被點亮
+              }
+              break;
+            }
+          }
         }
       },
+      setIsBPMNOn(isOn: boolean) {
+        this.isBPMNOn = isOn;
+      },
+    },
 });