highlight path

src/stores/cytoscapeStore.ts

@@ -43,7 +43,6 @@ export default defineStore('useCytoscapeStore', {
         if(nodeToSave) {
           nodeToSave.position = position;
         } else {
-          console.log('aaaa this.nodePositions[this.currentGraphId]',this.nodePositions[this.currentGraphId] );
           this.nodePositions[this.currentGraphId].push({id: nodeId, position: position});
         }       
       } else {

src/stores/mapPathStore.ts

@@ -1,16 +1,31 @@
 import { defineStore } from 'pinia';
 import AllMapData from '@/stores/allMapData.js';
 import { INSIGHTS_FIELDS_AND_LABELS } from '@/constants/constants';
+import cytoscape, { EdgeSingular, NodeSingular } from 'cytoscape';
+
+interface MapPathStoreState {
+  clickedPath: string[];
+  insights: Record<string, any[]>; // Replace `any` with the correct type if available
+  cytoscape: cytoscape.Core | null;
+  allPaths: NodeSingular[][];
+  allPathsByEdge: EdgeSingular[][];
+  startNode: NodeSingular | null;
+  mapGraphPathToInsight: Record<string, { [key: string]: number; pathByNode: NodeSingular[]; pathByEdge: EdgeSingular[] }>;
+  activeTrace: number;
+  activeListIndex: number;
+}
 
 export default defineStore('useMapPathStore', {
-    state: () => ({
+    state: (): MapPathStoreState => ({
         clickedPath: [],
-        allMapData: AllMapData(),
-        insights: [],
+        insights: {},
         cytoscape: null,
         allPaths: [],
+        allPathsByEdge: [],
         startNode: null,
         mapGraphPathToInsight: {},
+        activeTrace: 0,
+        activeListIndex: 0,
       }),
     actions: {
       setCytoscape(cytoscape) {
@@ -21,12 +36,12 @@ export default defineStore('useMapPathStore', {
           return elem.data('label').toLocaleLowerCase() === 'start';
         });
           // Depth First Search from the starting node
-        this.depthFirstSearchCreatePath(this.startNode, [this.startNode]);
-        const { insights } = this.allMapData;
-        this.insights = insights;
+        this.depthFirstSearchCreatePath(this.startNode, [this.startNode], []);
+        const { insights } = AllMapData();
+        this.insights = {...insights};
         this.matchGraphPathWithInsightsPath();
         for(let i = 0; i < INSIGHTS_FIELDS_AND_LABELS.length; i++) {
-          const curButton = insights[INSIGHTS_FIELDS_AND_LABELS[i][0]];
+          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]           
@@ -35,57 +50,68 @@ export default defineStore('useMapPathStore', {
         }
       },
       /** 從start節點開始建立所有的path
+       * 於第二個參數逐漸推入節點，於第三個參數逐漸推入線段
        */
-      depthFirstSearchCreatePath(node, currentPath){
+      depthFirstSearchCreatePath(node, currentPathByNode, curPathByEdge){
         const outgoingEdges = node.outgoers('edge');
         if (outgoingEdges.length === 0) {
           // 表示已經遇到尾聲
-          this.allPaths.push([...currentPath]);
+          this.allPaths.push([...currentPathByNode]);
+          this.allPathsByEdge.push([...curPathByEdge])
         } else {
           outgoingEdges.targets().forEach((targetNode) => {
-            if (!currentPath.includes(targetNode)) {
+            if (!currentPathByNode.includes(targetNode)) {
+              const connectingEdge = targetNode.edgesWith(currentPathByNode[currentPathByNode.length - 1]);
               // 避免loop，只有當目標節點不在當前路徑中之時才繼續
-              this.depthFirstSearchCreatePath(targetNode, [...currentPath, targetNode]);
+              this.depthFirstSearchCreatePath(targetNode, [...currentPathByNode, targetNode],
+                [...curPathByEdge, connectingEdge]
+              );
             }
           });
         }
       },
       /**
+       * 比對兩條Paths是否相等。
+       * 第一條path是透過depthFirstSearchCreatePath所建立，
+       * 而第二條path是從後端給的insights物件而來，其資料結構是簡單的array而已。
        * 在每條path沿路據節點上的label之
        * 字串來匹配這個path是屬於insights物件的哪一條path，
-       * 其中用curButton去接住insights[INSIGHTS_FIELDS_AND_LABELS[i][0]]
+       * 其中用curButton去記憶住insights[INSIGHTS_FIELDS_AND_LABELS[i][0]]內文
        * 而curButton[listIndex][nodeIndex]是用來確認是否跟depthFirstSearchCreatePath內的
-       * node.data('label')字串完全相等
+       * node.data('label')字串完全相等，也就是 activity 節點的文字
        */
       matchGraphPathWithInsightsPath(){
         for(let whichPath = 0; whichPath < this.allPaths.length; whichPath++) {
           const curPath = this.allPaths[whichPath];
+          const curPathByEdge = this.allPathsByEdge[whichPath];
           // 針對這個path的第一個節點，找到它在insights中是對應到哪一個起點
           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++){
                 if(curPath[1].data('label') === curButton[listIndex][nodeIndex]){
+                  // 從 1 開始而不是從 0 開始是因為 0 的label是start字串
                   const matchResult = this.depthFirstSearchMatchTwoPaths(curPath, 1, curButton, listIndex, nodeIndex)
                   if(matchResult){
-                    this.mapGraphPathToInsight[whichPath.toString()] = {
-                      [INSIGHTS_FIELDS_AND_LABELS[i][0]]: listIndex,
-                      path: [...curPath],
-                    };
-                  }
+                    this.mapGraphPathToInsight[whichPath] = {
+                      [listIndex] : {
+                        pathByNode: [...curPath],
+                        pathByEdge: [...curPathByEdge]
+                      }
+                    }
+                  } // end if
                 }                
-              }
-            }
-          }
-        }
-        console.log('this.mapGraphPathToInsight', this.mapGraphPathToInsight['1']);    
+              } // end fourth for
+            } // end third for
+          } // end second for
+        } // end first for
+        console.log('this.mapGraphPathToInsight[0][0]', this.mapGraphPathToInsight[0][0]);
       },
       depthFirstSearchMatchTwoPaths(curPath, curPathIndex, curButton, listIndex, nodeIndex){
-        // console.log('listIndex', listIndex, 'nodeIndex', nodeIndex);
-        if(listIndex >= curButton.length) {
+        if(listIndex >= curButton.length) { // 邊界條件檢查，防止超出範圍
           return;
         }
-        if(nodeIndex >= curButton[listIndex]) {
+        if(nodeIndex >= curButton[listIndex]) { // 邊界條件檢查，防止超出範圍
           return;
         }
         // 如果 `curPath` 和 `curButton[listIndex]` 完全匹配
@@ -104,14 +130,28 @@ export default defineStore('useMapPathStore', {
           if(nodeIndex === curButton[listIndex].length - 1) {
             return true; // Reach
           }
+          //從以下兩個選項選出答案可能是true的。但也可能答案都是false
+          // 選項一是遞增insights的第一層的指標。這裡必須遞增path的指標
           if(this.depthFirstSearchMatchTwoPaths(curPath, curPathIndex + 1, curButton, listIndex + 1, nodeIndex)) {
             return true;
           }
+          // 選項二是遞增insights的第一層的指標。這裡必須遞增path的指標
           if(this.depthFirstSearchMatchTwoPaths(curPath, curPathIndex + 1, curButton, listIndex, nodeIndex + 1)) {
             return true;
           }
         }
         return false; // 當前節點不匹配時返回 false
         },
+        highlightClickedPath(clickedActiveTraceIndex: number, clickedPathListIndex: number) {
+          this.activeTrace = clickedActiveTraceIndex;
+          this.activeListIndex = clickedPathListIndex;
+          this.mapGraphPathToInsight[clickedActiveTraceIndex][clickedPathListIndex].pathByEdge
+            .forEach(pathToHighlight => {
+              pathToHighlight.addClass('highlight-edge');
+          });
+        },
+        clearAllHighlight() {
+          this.cytoscape.edges().removeClass('highlight-edge');
+        },
       },
 });