fix first index of mapGraphPathToInsight nested object

src/components/Discover/Map/SidebarState.vue

@@ -273,7 +273,7 @@ export default {
 
     const activeTrace = ref(0);
     const currentMapFile = computed(() => pageAdmin.currentMapFile);
-    const clickedPathListIndex = ref(undefined);
+    const clickedPathListIndex = ref(0);
     const isBPMNOn = computed(() => mapPathStore.isBPMNOn);
 
     const onActiveTraceClick = (clickedActiveTraceIndex) => {
@@ -284,7 +284,7 @@ export default {
 
     const onPathOptionClick = (clickedPath) => {
       clickedPathListIndex.value = clickedPath;
-      mapPathStore.highlightClickedPath(activeTrace.value, clickedPathListIndex.value);
+      mapPathStore.highlightClickedPath(activeTrace.value, clickedPath);
     };
 
     const onResetTraceBtnClick = () => {

src/stores/mapPathStore.ts

@@ -32,7 +32,7 @@ export default defineStore('useMapPathStore', {
         this.cytoscape = cytoscape;
       },
       async createPaths() {
-        this.startNode = this.cytoscape.nodes().filter(function(elem)  {
+        this.startNode = this.cytoscape?.nodes().filter(function(elem)  {
           return elem.data('label').toLocaleLowerCase() === 'start';
         });
           // Depth First Search from the starting node
@@ -85,7 +85,7 @@ export default defineStore('useMapPathStore', {
                   // 從 1 開始而不是從 0 開始是因為 0 的label是start字串
                   const matchResult = this.depthFirstSearchMatchTwoPaths(curPath, 1, curButton, listIndex, nodeIndex)
                   if(matchResult){
-                    this.mapGraphPathToInsight[whichPath] = {
+                    this.mapGraphPathToInsight[i] = {
                       [listIndex] : {
                         pathByNode: [...curPath],
                         pathByEdge: [...curPathByEdge],
@@ -175,20 +175,19 @@ export default defineStore('useMapPathStore', {
       
           clickedEdge.addClass('highlight-edge');      
       },
-      highlightMostFrequentPath() {
-        for(let whichPath = 0; whichPath < this.allPaths.length; whichPath++) {
+      async highlightMostFrequentPath() {
+        for(let buttonIter = 0; buttonIter < INSIGHTS_FIELDS_AND_LABELS.length; buttonIter++) {
           // 有可能遇到兩個以上的most frequent paths，然而我們只取一個path點亮
-          if (this.mapGraphPathToInsight[whichPath]) {
-            const keyLength = Object.keys(this.mapGraphPathToInsight[whichPath]).length;
+          if (this.mapGraphPathToInsight[buttonIter]) {
+            const keyLength = Object.keys(this.mapGraphPathToInsight[buttonIter]).length;
             for(let i = 0; i < keyLength; i++) {
-              if(this.mapGraphPathToInsight[whichPath][i]?.pathType === 'most_freq_traces'){
-                console.log('found', );
-                this.mapGraphPathToInsight[whichPath][i].pathByNode.map(nodeToHighlight => {
-                  nodeToHighlight.data('nodeImageUrl', ImgCapsulesGlow[nodeToHighlight.data('level')]);
+              if(this.mapGraphPathToInsight[buttonIter][i]?.pathType === 'most_freq_traces'){
+                await this.mapGraphPathToInsight[buttonIter][i].pathByNode.map(async(nodeToHighlight) => {
+                  await nodeToHighlight.data('nodeImageUrl', ImgCapsulesGlow[nodeToHighlight.data('level')]);
                 });
-                this.mapGraphPathToInsight[whichPath][i].pathByEdge.map(
-                  edgeToHighlight => {
-                    edgeToHighlight.addClass('highlight-edge');
+                await this.mapGraphPathToInsight[buttonIter][i].pathByEdge.map(
+                  async(edgeToHighlight) => {
+                    await edgeToHighlight.addClass('highlight-edge');
                   });
                 return; // 之所以要此時就立刻return是因為要避免第二個以上的most freq path也被點亮
               }

src/views/Discover/Map/Map.vue

@@ -402,7 +402,7 @@ export default {
      * create cytoscape's map
      * @param {string} type this.mapType 'processMap' | 'bpmn'，可傳入以上任一。
      */
-    createCy(type) {
+    async createCy(type) {
       let graphId = document.getElementById('cy');
       let mapData = type === 'processMap'? this.processMapData: this.bpmnData;
 
@@ -410,7 +410,7 @@ export default {
         this.setNodesData(mapData);
         this.setEdgesData(mapData);
         this.setActivityBgImage(mapData);       
-        this.cytoscapeGraph = cytoscapeMap(mapData, this.dataLayerType, this.dataLayerOption, this.curveStyle, this.rank, graphId);
+        this.cytoscapeGraph = await cytoscapeMap(mapData, this.dataLayerType, this.dataLayerOption, this.curveStyle, this.rank, graphId);
       };
     },
     setActivityBgImage(mapData) {
@@ -484,7 +484,7 @@ export default {
     // log、filter 檔切換過程中， trace id 不同，將初始 trace id 設定為該檔案的 trace 幣一筆資料的 id。
     this.traceId = await this.traces[0]?.id;
     this.baseTraceId = await this.baseTraces[0]?.id;
-    this.createCy(this.mapType);
+    await this.createCy(this.mapType);
     await mapPathStore.setCytoscape(this.cytoscapeGraph);
     await mapPathStore.createPaths();
     await mapPathStore.highlightMostFrequentPath();