WIP: depthFirstSearchMatchTwoPaths can have one true

src/module/cytoscapeMap.js

@@ -165,14 +165,14 @@ export default function cytoscapeMap(mapData, dataLayerType, dataLayerOption, cu
           'text-max-width': 'data(width)', // 在 div 內換行
           'text-overflow-wrap': 'anywhere', // 在 div 內換行
           'text-margin-x': function(node) {
-            return node.data('type') === 'activity' ? -10 : 0;
+            return node.data('type') === 'activity' ? -5 : 0;
           },
           'text-halign': 'center',
           'text-valign': 'center',
           'height': 'data(height)',
           'width': 'data(width)',
           'color': '#001933',
-          'line-height': '0.8rem',
+          'line-height': '0.7rem',
           'font-size':
           function(node) {
             return node.data('type') === 'activity' ? 14 : 22;

src/stores/mapPathStore.ts

@@ -10,6 +10,7 @@ export default defineStore('useMapPathStore', {
         cytoscape: null,
         allPaths: [],
         startNode: null,
+        mapGraphPathToInsight: {},
       }),
     actions: {
       setCytoscape(cytoscape) {
@@ -20,10 +21,10 @@ export default defineStore('useMapPathStore', {
           return elem.data('label').toLocaleLowerCase() === 'start';
         });
           // Depth First Search from the starting node
-        this.depthFirstSearchCreatePath(this.startNode, [this.startNode.id()]);
+        this.depthFirstSearchCreatePath(this.startNode, [this.startNode]);
         const { insights } = this.allMapData;
         this.insights = insights;
-        // this.matchGraphPathWithInsightsPath();
+        this.matchGraphPathWithInsightsPath();
         for(let i = 0; i < INSIGHTS_FIELDS_AND_LABELS.length; i++) {
           const curButton = insights[INSIGHTS_FIELDS_AND_LABELS[i][0]];
           for(let listIndex = 0; listIndex < curButton.length; listIndex++) {
@@ -38,6 +39,7 @@ export default defineStore('useMapPathStore', {
       depthFirstSearchCreatePath(node, currentPath){
         const outgoingEdges = node.outgoers('edge');
         if (outgoingEdges.length === 0) {
+          // 表示已經遇到尾聲
           this.allPaths.push([...currentPath]);
         } else {
           outgoingEdges.targets().forEach((targetNode) => {
@@ -56,24 +58,60 @@ export default defineStore('useMapPathStore', {
        * node.data('label')字串完全相等
        */
       matchGraphPathWithInsightsPath(){
-        for(let pathIndex = 0; pathIndex < this.allPaths.length; pathIndex++) {
-          const curPath = this.allPaths[pathIndex];
+        for(let whichPath = 0; whichPath < this.allPaths.length; whichPath++) {
+          const curPath = this.allPaths[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++){
-                // console.log(curPath[0].data('label'));
-                // if(curPath[0].data('label') === curButton[listIndex][nodeIndex]){
-                //   console.log('MATCH curPath[0].data(label)', curPath[0].data('label'));
-                //   break;
-                // }  
+                if(curPath[1].data('label') === curButton[listIndex][nodeIndex]){
+                  const matchResult = this.depthFirstSearchMatchTwoPaths(curPath, 1, curButton, listIndex, nodeIndex)
+                  if(matchResult){
+                    this.mapGraphPathToInsight[whichPath.toString()] = {
+                      [INSIGHTS_FIELDS_AND_LABELS[i][0]]: listIndex,
+                      path: [...curPath],
+                    };
+                  }
+                }                
               }
             }
           }
-        }        
+        }
+        console.log('this.mapGraphPathToInsight', this.mapGraphPathToInsight['1']);    
       },
-      depthFirstSearchMatchTwoPaths(){
-         
+      depthFirstSearchMatchTwoPaths(curPath, curPathIndex, curButton, listIndex, nodeIndex){
+        // console.log('listIndex', listIndex, 'nodeIndex', nodeIndex);
+        if(listIndex >= curButton.length) {
+          return;
+        }
+        if(nodeIndex >= curButton[listIndex]) {
+          return;
+        }
+        // 如果 `curPath` 和 `curButton[listIndex]` 完全匹配
+        if (curPathIndex === curPath.length || nodeIndex === curButton[listIndex].length) {
+          return true;
+        }
+
+        // 邊界條件檢查，防止超出範圍
+        if (curPathIndex >= curPath.length || nodeIndex >= curButton[listIndex].length) {
+          return;
+        }
+
+        const nodeLabel = curPath[curPathIndex].data('label');
+        // 如果當前節點匹配
+        if (nodeLabel === curButton[listIndex][nodeIndex]) {
+          if(nodeIndex === curButton[listIndex].length - 1) {
+            return true; // Reach
+          }
+          if(this.depthFirstSearchMatchTwoPaths(curPath, curPathIndex + 1, curButton, listIndex + 1, nodeIndex)) {
+            return true;
+          }
+          if(this.depthFirstSearchMatchTwoPaths(curPath, curPathIndex + 1, curButton, listIndex, nodeIndex + 1)) {
+            return true;
+          }
+        }
+        return false; // 當前節點不匹配時返回 false
+        },
       },
-    },
 });