From fbed897d52a33c84a6c057cd0336a8373d86fddf Mon Sep 17 00:00:00 2001
From: Cindy Chang <cindy.chang@dsp.im>
Date: Wed, 21 Aug 2024 10:00:05 +0800
Subject: [PATCH] WIP: matchGraphPathWithInsightsPath

---
 src/stores/mapPathStore.ts | 89 ++++++++++++++++++++++++--------------
 1 file changed, 57 insertions(+), 32 deletions(-)

diff --git a/src/stores/mapPathStore.ts b/src/stores/mapPathStore.ts
index dafdbd4..446ad18 100644
--- a/src/stores/mapPathStore.ts
+++ b/src/stores/mapPathStore.ts
@@ -1,54 +1,79 @@
 import { defineStore } from 'pinia';
 import AllMapData from '@/stores/allMapData.js';
 import { INSIGHTS_FIELDS_AND_LABELS } from '@/constants/constants';
-import { elements } from 'chart.js';
 
 export default defineStore('useMapPathStore', {
     state: () => ({
         clickedPath: [],
         allMapData: AllMapData(),
+        insights: [],
         cytoscape: null,
         allPaths: [],
         startNode: null,
       }),
     actions: {
-        setCytoscape(cytoscape) {
-          this.cytoscape = cytoscape;
-        },
-        createAllPaths() {
-          this.startNode = this.cytoscape.nodes().filter(function(elem)  {
-            return elem.data('label').toLocaleLowerCase() === 'start';
+      setCytoscape(cytoscape) {
+        this.cytoscape = cytoscape;
+      },
+      createAllPaths() {
+        this.startNode = this.cytoscape.nodes().filter(function(elem)  {
+          return elem.data('label').toLocaleLowerCase() === 'start';
+        });
+          // Depth First Search from the starting node
+        this.depthFirstSearchCreatePath(this.startNode, [this.startNode.id()]);
+        const { insights } = this.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]];
+          for(let listIndex = 0; listIndex < curButton.length; listIndex++) {
+            for(let nodeIndex = 0; nodeIndex < curButton[listIndex].length; nodeIndex++){
+              //curButton[listIndex][nodeIndex]', curButton[listIndex][nodeIndex]           
+            }
+          }
+        }
+      },
+      /** 從start節點開始建立所有的path
+       */
+      depthFirstSearchCreatePath(node, currentPath){
+        const outgoingEdges = node.outgoers('edge');
+        if (outgoingEdges.length === 0) {
+          this.allPaths.push([...currentPath]);
+        } else {
+          outgoingEdges.targets().forEach((targetNode) => {
+            if (!currentPath.includes(targetNode)) {
+              // 避免loop，只有當目標節點不在當前路徑中之時才繼續
+              this.depthFirstSearchCreatePath(targetNode, [...currentPath, targetNode]);
+            }
           });
-           // Depth First Search from the starting node
-          this.depthFirstSearchCreatePath(this.startNode, [this.startNode.id()]);
-                this.allPaths.forEach(path => {
-                  console.log('path',path );
-                });
-          const { insights } = this.allMapData;
+        }
+      },
+      /**
+       * 在每條path沿路據節點上的label之
+       * 字串來匹配這個path是屬於insights物件的哪一條path，
+       * 其中用curButton去接住insights[INSIGHTS_FIELDS_AND_LABELS[i][0]]
+       * 而curButton[listIndex][nodeIndex]是用來確認是否跟depthFirstSearchCreatePath內的
+       * node.data('label')字串完全相等
+       */
+      matchGraphPathWithInsightsPath(){
+        for(let pathIndex = 0; pathIndex < this.allPaths.length; pathIndex++) {
+          const curPath = this.allPaths[pathIndex];
           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++){
-                if(nodeIndex === 0) {
-                  
-                }               
-                
+                // 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;
+                // }  
               }
             }
           }
-        },
-        depthFirstSearchCreatePath(node, currentPath){
-          const outgoingEdges = node.outgoers('edge');
-          if (outgoingEdges.length === 0) {
-            this.allPaths.push([...currentPath]);
-          } else {
-            outgoingEdges.targets().forEach((targetNode) => {
-              if (!currentPath.includes(targetNode.id())) {
-                // 避免loop，只有當目標節點不在當前路徑中之時才繼續
-                this.depthFirstSearchCreatePath(targetNode, [...currentPath, targetNode.id()]);
-              }
-            });
-          }
-        },
+        }        
+      },
+      depthFirstSearchMatchTwoPaths(){
+         
+      },
     },
 });
\ No newline at end of file