From 63743280f698d77cf28e69526cd8848d4f492a53 Mon Sep 17 00:00:00 2001
From: Cindy Chang <cindy.chang@dsp.im>
Date: Tue, 27 Aug 2024 16:32:52 +0800
Subject: [PATCH] fix first index of mapGraphPathToInsight nested object

---
 src/components/Discover/Map/SidebarState.vue |  4 ++--
 src/stores/mapPathStore.ts                   | 25 ++++++++++----------
 src/views/Discover/Map/Map.vue               |  6 ++---
 3 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/src/components/Discover/Map/SidebarState.vue b/src/components/Discover/Map/SidebarState.vue
index 386bba6..a57bc34 100644
--- a/src/components/Discover/Map/SidebarState.vue
+++ b/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 = () => {
diff --git a/src/stores/mapPathStore.ts b/src/stores/mapPathStore.ts
index 48aa84d..45dbe45 100644
--- a/src/stores/mapPathStore.ts
+++ b/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也被點亮
               }
diff --git a/src/views/Discover/Map/Map.vue b/src/views/Discover/Map/Map.vue
index 755fbc4..33d3e02 100644
--- a/src/views/Discover/Map/Map.vue
+++ b/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();