sometimes highlightMostFrequentPath works

src/stores/mapPathStore.ts

@@ -31,16 +31,15 @@ export default defineStore('useMapPathStore', {
       setCytoscape(cytoscape) {
         this.cytoscape = cytoscape;
       },
-      createAllPaths() {
+      async createPaths() {
         this.startNode = this.cytoscape.nodes().filter(function(elem)  {
           return elem.data('label').toLocaleLowerCase() === 'start';
         });
           // Depth First Search from the starting node
-        this.depthFirstSearchCreatePath(this.startNode, [this.startNode], []);
+        await this.depthFirstSearchCreatePath(this.startNode, [this.startNode], []);
         const { insights } = AllMapData();
         this.insights = {...insights};
-        this.matchGraphPathWithInsightsPath();
-        this.highlightMostFrequentPath();
+        await this.matchGraphPathWithInsightsPath();
       },
       /** 從start節點開始建立所有的path
        * 於第二個參數逐漸推入節點，於第三個參數逐漸推入線段
@@ -102,10 +101,10 @@ export default defineStore('useMapPathStore', {
       },
       depthFirstSearchMatchTwoPaths(curPath, curPathIndex, curButton, listIndex, nodeIndex){
         if(listIndex >= curButton.length) { // 邊界條件檢查，防止超出範圍
-          return;
+          return; // nodeIndex表示是當選訂了五顆按鈕之一之後，清單上的第幾個path
         }
         if(nodeIndex >= curButton[listIndex]) { // 邊界條件檢查，防止超出範圍
-          return;
+          return; // 表示清單上這個path上的第幾個節點
         }
         // 如果 `curPath` 和 `curButton[listIndex]` 完全匹配
         if (curPathIndex === curPath.length || nodeIndex === curButton[listIndex].length) {
@@ -152,7 +151,7 @@ export default defineStore('useMapPathStore', {
           this.cytoscape?.nodes().removeClass('highlight-node');
           this.cytoscape?.nodes().forEach(nodeToReset => {
             nodeToReset.data('nodeImageUrl', ImgCapsules[nodeToReset.data('level')])
-          })
+          });
         },
         onNodeClickHighlightEdges(clickedNode) {
           this.clearAllHighlight();
@@ -183,11 +182,14 @@ export default defineStore('useMapPathStore', {
             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 => {
+                console.log('found', );
+                this.mapGraphPathToInsight[whichPath][i].pathByNode.map(nodeToHighlight => {
                   nodeToHighlight.data('nodeImageUrl', ImgCapsulesGlow[nodeToHighlight.data('level')]);
                 });
-                this.mapGraphPathToInsight[whichPath][i].pathByEdge.forEach(
-                  edgeToHighlight => edgeToHighlight.addClass('highlight-edge'));
+                this.mapGraphPathToInsight[whichPath][i].pathByEdge.map(
+                  edgeToHighlight => {
+                    edgeToHighlight.addClass('highlight-edge');
+                  });
                 return; // 之所以要此時就立刻return是因為要避免第二個以上的most freq path也被點亮
               }
               break;

src/views/Discover/Map/Map.vue

@@ -486,7 +486,8 @@ export default {
     this.baseTraceId = await this.baseTraces[0]?.id;
     this.createCy(this.mapType);
     await mapPathStore.setCytoscape(this.cytoscapeGraph);
-    await mapPathStore.createAllPaths();
+    await mapPathStore.createPaths();
+    await mapPathStore.highlightMostFrequentPath();
     await this.allMapDataStore.getFilterParams();
     await this.allMapDataStore.getTraceDetail();