highlight path

2024-08-21 14:25:34 +08:00
parent 4ab0d4765b
commit d56ea98780
4 changed files with 90 additions and 42 deletions
--- a/src/components/Discover/Map/SidebarState.vue
+++ b/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="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="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="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="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(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="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="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="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="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() {
--- a/src/module/cytoscapeMap.js
+++ b/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',
-        }
+        },
      }
    ],
  });
--- a/src/stores/cytoscapeStore.ts
+++ b/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 {
--- a/src/stores/mapPathStore.ts
+++ b/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');
+        },
      },
 });