highlight path

src/components/Discover/Map/SidebarState.vue

@@ -158,14 +158,14 @@
       </div>
       <div>
         <ul class="text-neutral-500 grid grid-cols-2 gap-2 text-center text-sm font-medium mb-2">
-          <li class="border border-neutral-500 rounded p-2 cursor-pointer hover:text-primary hover:border-primary hover:duration-500" @click="active1 = 0" :class="active1 === 0? 'text-primary border-primary':''">Self-Loop</li>
+          <li class="border border-neutral-500 rounded p-2 cursor-pointer hover:text-primary hover:border-primary hover:duration-500" @click="onActiveTraceClick(0)" :class="activeTrace === 0? 'text-primary border-primary':''">Self-Loop</li>
-          <li class="border border-neutral-500 rounded p-2 cursor-pointer hover:text-primary hover:border-primary hover:duration-500" @click="active1 = 1" :class="active1 === 1? 'text-primary border-primary':''">Short-Loop</li>
+          <li class="border border-neutral-500 rounded p-2 cursor-pointer hover:text-primary hover:border-primary hover:duration-500" @click="onActiveTraceClick(1)" :class="activeTrace === 1? 'text-primary border-primary':''">Short-Loop</li>
-          <li class="border border-neutral-500 rounded p-2 cursor-pointer hover:text-primary hover:border-primary hover:duration-500" @click="active1 = 2" :class="active1 === 2? 'text-primary border-primary':''">Shortest Trace</li>
+          <li class="border border-neutral-500 rounded p-2 cursor-pointer hover:text-primary hover:border-primary hover:duration-500" @click="onActiveTraceClick(2)" :class="activeTrace === 2? 'text-primary border-primary':''">Shortest Trace</li>
-          <li class="border border-neutral-500 rounded p-2 cursor-pointer hover:text-primary hover:border-primary hover:duration-500" @click="active1 = 3" :class="active1 === 3? 'text-primary border-primary':''">Longest Trace</li>
+          <li class="border border-neutral-500 rounded p-2 cursor-pointer hover:text-primary hover:border-primary hover:duration-500" @click="onActiveTraceClick(3)" :class="activeTrace === 3? 'text-primary border-primary':''">Longest Trace</li>
-          <li class="border border-neutral-500 rounded p-2 cursor-pointer hover:text-primary hover:border-primary hover:duration-500" @click="active1 = 4" :class="active1 === 4? 'text-primary border-primary':''">Most Frequent Trace</li>
+          <li class="border border-neutral-500 rounded p-2 cursor-pointer hover:text-primary hover:border-primary hover:duration-500" @click="onActiveTraceClick(4)" :class="activeTrace === 4? 'text-primary border-primary':''">Most Frequent Trace</li>
         </ul>
         <div>
-          <TabView ref="tabview2" v-model:activeIndex="active1">
+          <TabView ref="tabview2" v-model:activeIndex="activeTrace">
               <TabPanel header="Self-loop" contentClass="text-sm">
                 <p v-if="insights.self_loops.length === 0">No data</p>
                 <ul v-else class="ml-6 space-y-1">
@@ -194,13 +194,13 @@
                   <li v-for="(item, key2) in insights[field]" :key="key2"
                     class="mb-2 flex bg-neutral-100 p-2 rounded">
                     <div class="flex left-col mr-1">
-                      <input type="radio" name="customRadio" :value="key2" v-model="selectedPath"
+                      <input type="radio" name="customRadio" :value="key2" v-model="clickedPathListIndex"
                         class="hidden peer" @click="onPathOptionClick(key2)"
                       />
                       <span @click="onPathOptionClick(key2)"
                       :class="[
                         'w-[18px] h-[18px] rounded-full border-2 inline-flex items-center justify-center cursor-pointer bg-[#FFFFFF]',
-                        selectedPath === key2
+                        clickedPathListIndex === key2
                           ? 'border-[#0099FF]'
                           : 'border-[#CBD5E1]'
                         ]"
@@ -208,7 +208,7 @@
                         <div
                           :class="[
                             'w-[9px] h-[9px] rounded-full transition-opacity cursor-pointer',
-                            selectedPath === key2
+                            clickedPathListIndex === key2
                               ? 'bg-[#0099FF]'
                               : 'opacity-0'
                           ]"
@@ -238,6 +238,7 @@
 <script>
 import { computed, ref, } from 'vue';
 import PageAdmin from '@/stores/pageAdmin';
+import MapPathStore from '@/stores/mapPathStore';
 import { getTimeLabel } from '@/module/timeLabel.js';
 import getMoment from 'moment';
 import i18next from '@/i18n/i18n';
@@ -262,22 +263,30 @@ export default {
   },
   setup(){
     const pageAdmin = PageAdmin();
+    const mapPathStore = MapPathStore();
 
-    const active1 = ref(0);
+    const activeTrace = ref(0);
     const currentMapFile = computed(() => pageAdmin.currentMapFile);
-    const selectedPath = ref(0);
+    const clickedPathListIndex = ref(0);
 
+    const onActiveTraceClick = (clickedActiveTraceIndex) => {
+      mapPathStore.clearAllHighlight();
+      activeTrace.value = clickedActiveTraceIndex;
+      mapPathStore.highlightClickedPath(clickedActiveTraceIndex, clickedPathListIndex.value);
+    }
     const onPathOptionClick = (clickedPath) => {
-      selectedPath.value = clickedPath;
+      clickedPathListIndex.value = clickedPath;
+      mapPathStore.highlightClickedPath(activeTrace.value, clickedPathListIndex.value);
     };
 
     return {
       currentMapFile,
       i18next,
       fieldNamesAndLabelNames,
-      selectedPath,
+      clickedPathListIndex,
       onPathOptionClick,
-      active1,
+      onActiveTraceClick,
+      activeTrace,
     };
   },
   data() {

src/module/cytoscapeMap.js

@@ -240,7 +240,7 @@ export default function cytoscapeMap(mapData, dataLayerType, dataLayerOption, cu
           'overlay-color': '#0099FF',
           'overlay-opacity': 0.2,
           'overlay-padding': '5px',
-        }
+        },
       }
     ],
   });

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]);
+        this.depthFirstSearchCreatePath(this.startNode, [this.startNode], []);
-        const { insights } = this.allMapData;
+        const { insights } = AllMapData();
-        this.insights = insights;
+        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()] = {
+                    this.mapGraphPathToInsight[whichPath] = {
-                      [INSIGHTS_FIELDS_AND_LABELS[i][0]]: listIndex,
+                      [listIndex] : {
-                      path: [...curPath],
+                        pathByNode: [...curPath],
-                    };
+                        pathByEdge: [...curPathByEdge]
                       }
                     }
+                  } // end if
                 }                
-            }
+              } // end fourth for
-          }
+            } // end third for
-        }
+          } // end second for
-        console.log('this.mapGraphPathToInsight', this.mapGraphPathToInsight['1']);    
+        } // 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');
+        },
       },
 });