refactor create paths method and highlight path method

src/i18n/en.json

@@ -34,6 +34,7 @@
         "AccountInformation": "Account Information",
         "Password": "Password",
         "ConfirmPassword": "Confirm Password",
+        "UserInfo": "User Information",
         "PwdNotMatch": "Confirm Password does not match.",
         "SetAsAdmin": "Set as admin.",
         "ActivateNow": "Activate now.",

src/module/cytoscapeMap.js

@@ -174,7 +174,7 @@ export default function cytoscapeMap(mapData, dataLayerType, dataLayerOption, cu
             return node.data('type') === 'activity' ? -5 : 0;
           },
           'text-margin-y': function(node) {
-            return node.data('type') === 'activity' ? 0 : 0;
+            return node.data('type') === 'activity' ? 2 : 0;
           },
           'padding':  function(node) {
             return node.data('type') === 'activity' ? 0 : 0;
@@ -185,10 +185,10 @@ export default function cytoscapeMap(mapData, dataLayerType, dataLayerOption, cu
           'height': 'data(height)',
           'width': 'data(width)',
           'color': 'data(textColor)',
-          'line-height': '0.8rem',
+          'line-height': '0.7rem',
           'font-size':
           function(node) {
-            return node.data('type') === 'activity' ? 16 : 14;
+            return node.data('type') === 'activity' ? 14 : 14;
           },
         },
       },

src/stores/mapPathStore.ts

@@ -17,6 +17,7 @@ export default defineStore('useMapPathStore', {
     state: () => ({
         clickedPath: [],
         insights: {},
+        insightWithPath: {},
         cytoscape: null,
         allPaths: [],
         allPathsByEdge: [],
@@ -31,6 +32,48 @@ export default defineStore('useMapPathStore', {
       setCytoscape(cytoscape) {
         this.cytoscape = cytoscape;
       },
+      async createInsightWithPath() {
+        const { insights } = AllMapData();
+        this.insights = {...insights};
+        this.startNode = this.cytoscape?.nodes().filter(function(elem)  {
+          return elem.data('label').toLocaleLowerCase() === 'start';
+        });
+        for(let i = 0; i < INSIGHTS_FIELDS_AND_LABELS.length; i++) {
+          const curButton = this.insights[INSIGHTS_FIELDS_AND_LABELS[i][0]];
+          this.insightWithPath[INSIGHTS_FIELDS_AND_LABELS[i][0]] = {}; // first layer index
+
+          for(let listIndex = 0; listIndex < curButton.length; listIndex++) {
+            this.insightWithPath[INSIGHTS_FIELDS_AND_LABELS[i][0]][listIndex] = {
+              edges: [],
+              nodes: [],
+            }; // second layer index
+
+            let curGraphNode, prevGraphNode, curEdge; // 配對 curGraphNode 與 nodeIndex 指向的 node
+            for(let nodeIndex = 0; nodeIndex < curButton[listIndex].length; nodeIndex++){
+              if(nodeIndex === 0) { // special case, initialize curGraphNode
+                curGraphNode = this.startNode.outgoers('node').filter(neighborOfStart => 
+                  neighborOfStart.data('label') === curButton[listIndex][nodeIndex]
+                );
+                curEdge = this.startNode.edgesTo(curGraphNode);
+              } else {
+                if(prevGraphNode){
+                  curGraphNode = prevGraphNode.outgoers('node').filter(neighbor => 
+                    neighbor.data('label') === curButton[listIndex][nodeIndex]
+                  );
+                  if(!curGraphNode) {
+                    // curGraphNode = prevGraphNode.outgoers('node').filter(node =>
+                    //   node.data('label').toLocaleLowerCase() === 'end');
+                  }
+                  curEdge = prevGraphNode.edgesWith(curGraphNode);
+                }                
+              }
+              this.insightWithPath[INSIGHTS_FIELDS_AND_LABELS[i][0]][listIndex].nodes.push(curGraphNode);
+              this.insightWithPath[INSIGHTS_FIELDS_AND_LABELS[i][0]][listIndex].edges.push(curEdge);
+              prevGraphNode = curGraphNode;
+            }
+          }
+        }
+      },
       async createPaths() {
         this.startNode = this.cytoscape?.nodes().filter(function(elem)  {
           return elem.data('label').toLocaleLowerCase() === 'start';
@@ -135,6 +178,14 @@ export default defineStore('useMapPathStore', {
         return false; // 當前節點不匹配時返回 false
         },
         highlightClickedPath(clickedActiveTraceIndex: number, clickedPathListIndex: number){
+          this.insightWithPath[INSIGHTS_FIELDS_AND_LABELS[clickedActiveTraceIndex][0]][clickedPathListIndex].edges.forEach(edgeToHighlight => {
+              edgeToHighlight.addClass('highlight-edge');
+          });
+          this.insightWithPath[INSIGHTS_FIELDS_AND_LABELS[clickedActiveTraceIndex][0]][clickedPathListIndex].nodes.forEach(nodeToHighlight => {
+            nodeToHighlight.data('nodeImageUrl', ImgCapsulesGlow[nodeToHighlight.data('level')]);
+          });
+        },
+        highlightClickedPathUnused(clickedActiveTraceIndex: number, clickedPathListIndex: number) {
           this.activeTrace = clickedActiveTraceIndex;
           this.activeListIndex = clickedPathListIndex;
           this.mapGraphPathToInsight[clickedActiveTraceIndex][clickedPathListIndex].pathByEdge
@@ -176,6 +227,14 @@ export default defineStore('useMapPathStore', {
           clickedEdge.addClass('highlight-edge');      
       },
       async highlightMostFrequentPath() {
+        const LIST_INDEX = 0;
+        this.insightWithPath['most_freq_traces'][LIST_INDEX].nodes.map(nodeToHighlight => {
+          nodeToHighlight.data('nodeImageUrl', ImgCapsulesGlow[nodeToHighlight.data('level')]);
+        });
+        this.insightWithPath['most_freq_traces'][LIST_INDEX].edges.map(edgeToHighlight =>
+          edgeToHighlight.addClass('highlight-edge'));
+      },
+      async highlightMostFrequentPathUnused() {
         for(let buttonIter = 0; buttonIter < INSIGHTS_FIELDS_AND_LABELS.length; buttonIter++) {
           // 有可能遇到兩個以上的most frequent paths，然而我們只取一個path點亮
           if (this.mapGraphPathToInsight[buttonIter]) {

src/views/Discover/Map/Map.vue

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