From 3f993741c82bf80e73d4a97e8dea203467514aca Mon Sep 17 00:00:00 2001
From: Cindy Chang <cindy.chang@dsp.im>
Date: Tue, 27 Aug 2024 14:51:26 +0800
Subject: [PATCH] default highlight most freq trace

---
 src/stores/mapPathStore.ts | 33 +++++++++++++++++++++++----------
 1 file changed, 23 insertions(+), 10 deletions(-)

diff --git a/src/stores/mapPathStore.ts b/src/stores/mapPathStore.ts
index bf2069f..59957b2 100644
--- a/src/stores/mapPathStore.ts
+++ b/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++) {
-          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]           
-            }
-          }
-        }
+        this.highlightMostFrequentPath();
       },
       /** 從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');      
       },
+      highlightMostFrequentPath() {
+        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;
-      }
+      },
     },
 });
\ No newline at end of file