fix: #310 keep loading animation bug is related to cytoscape undefined bug. And cytoscape node position remembering feature is not actually finished correctly yet before. Now remembering feature is done.

src/module/cytoscapeMap.js

@@ -227,25 +227,27 @@ export default function cytoscapeMap(mapData, dataLayerType, dataLayerOption, cu
   });
 
   const cytoscapeStore = CytoscapeStore();
-
   cy.ready(() => {
     cytoscapeStore.loadPositionsFromStorage();
+    localStorage.getItem(SAVE_KEY_NAME) && console.log(JSON.parse(localStorage.getItem(SAVE_KEY_NAME)));
     // 判斷localStorage是否儲存過拜訪資訊
     // 若曾經儲存過拜訪後的座標位置，則restore位置來渲染出來
     if(localStorage.getItem(SAVE_KEY_NAME) && JSON.parse(localStorage.getItem(SAVE_KEY_NAME))) {
       const allGraphsRemembered =  JSON.parse(localStorage.getItem(SAVE_KEY_NAME));
-      const currentGraphNodesRemembered =  allGraphsRemembered[cytoscapeStore.currentGraphId];
-      currentGraphNodesRemembered.forEach(nodeRemembered => {
-        const nodeToDecide = cy.getElementById(nodeRemembered.id);
-        if (nodeToDecide) {
-          nodeToDecide.position(nodeRemembered.position);
-        }
-      });
+      const currentGraphNodesRemembered =  allGraphsRemembered[cytoscapeStore.currentGraphId]; // 可能是undefined
+      if(currentGraphNodesRemembered) {
+        currentGraphNodesRemembered.forEach(nodeRemembered => {
+          const nodeToDecide = cy.getElementById(nodeRemembered.id);
+          if (nodeToDecide) {
+            nodeToDecide.position(nodeRemembered.position);
+          }
+        });
+      }
     } 
     //存下此刻剛進入畫面時當前所有節點的座標位置
     const allNodes = cy.nodes();
     allNodes.map(nodeFirstlySave => {
-      cytoscapeStore.saveNodePosition(nodeFirstlySave.id(), nodeFirstlySave.position);
+      cytoscapeStore.saveNodePosition(nodeFirstlySave.id(), nodeFirstlySave.position());
     });
 
     // 在改變節點位置後，盡可能地記錄節點線條的位置情報

src/stores/cytoscapeStore.ts

@@ -1,11 +1,33 @@
-import { el } from 'date-fns/locale';
 import { defineStore } from 'pinia';
 
 import { SAVE_KEY_NAME } from '@/constants/constants.js';
 
+// nodePositions 結構 {
+//  graphId: [{
+//               id,
+//               position: {
+//                             x,
+//                             y,
+//                          }
+//           }]
+// }
+interface Position {
+  x: number;
+  y: number;
+}
+
+interface Node {
+  id: string;
+  position: Position;
+}
+
+interface NodePositions {
+  [graphId: string]: Node[];
+}
+
 export default defineStore('useCytoscapeStore', {
   state: () => ({
-    nodePositions: {},
+    nodePositions: {} as NodePositions,
     currentGraphId: "",
   }),
   actions: {
@@ -14,16 +36,23 @@ export default defineStore('useCytoscapeStore', {
      * @param {string} id 
      * @param {object} position {x, y} position有兩個值，x與y
      */
-    saveNodePosition(nodeId, position) {
+    saveNodePosition(nodeId: string, position: NodePosition) {
       // 若是資訊曾經存在這張圖於localStorage中
       if (localStorage.getItem(SAVE_KEY_NAME) && JSON.parse(localStorage.getItem(SAVE_KEY_NAME))[this.currentGraphId]) {
+        console.log('saveNodePosition ---- this.nodePositions[this.currentGraphId]',this.nodePositions[this.currentGraphId] );
         const nodeToSave = this.nodePositions[this.currentGraphId].find(node => node.id === nodeId);
         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 {
+        this.nodePositions[this.currentGraphId] = [];
+        this.nodePositions[this.currentGraphId].push({id: nodeId, position: position});
+        localStorage.setItem(SAVE_KEY_NAME, JSON.stringify(this.nodePositions));
       }
+      console.log('', );
       this.savePositionsToStorage();
     },
     /**
@@ -40,9 +69,9 @@ export default defineStore('useCytoscapeStore', {
     savePositionsToStorage() {
       localStorage.setItem(SAVE_KEY_NAME, JSON.stringify(this.nodePositions));
     },
-    setCurrentGraphId(currentGraphId) {
+    setCurrentGraphId(currentGraphId: string) {
       this.currentGraphId = currentGraphId;
-      this.nodePositions[currentGraphId] = [];
+      this.nodePositions = {[this.currentGraphId]: []};
     },
   },
 });

src/views/Discover/Map/Map.vue

@@ -53,14 +53,15 @@
 </template>
 
 <script>
-import { onBeforeMount, } from 'vue';
+import { onBeforeMount, computed } from 'vue';
 import { storeToRefs } from 'pinia';
+import { useRouter, useRoute } from 'vue-router';
 import axios from 'axios';
 import LoadingStore from '@/stores/loading.js';
 import AllMapDataStore from '@/stores/allMapData.js';
 import ConformanceStore from '@/stores/conformance.js';
 import cytoscapeMap from '@/module/cytoscapeMap.js';
-import CytoscapeStore from '@/stores/cytoscapeStore.js';
+import CytoscapeStore from '@/stores/cytoscapeStore.ts';
 import SidebarView from '@/components/Discover/Map/SidebarView.vue';
 import SidebarState from '@/components/Discover/Map/SidebarState.vue';
 import SidebarTraces from '@/components/Discover/Map/SidebarTraces.vue';
@@ -71,6 +72,7 @@ export default {
     const loadingStore = LoadingStore();
     const allMapDataStore = AllMapDataStore();
     const { isLoading } = storeToRefs(loadingStore);
+    const route = useRoute();
     const { processMap, bpmn, stats, insights, traceId, traces, baseTraces, baseTraceId,
       filterTasks, filterStartToEnd, filterEndToStart, filterTimeframe, filterTrace,
       temporaryData, isRuleData, ruleData, logId, baseLogId, createFilterId, cases,
@@ -81,8 +83,25 @@ export default {
 
     const { setCurrentGraphId } = cytoscapeStore;
 
+    const numberBeforeMapInRoute = computed(() => {
+      // 取得當前路由的路徑
+      const path = route.path;
+      // 使用斜線分割路徑
+      const segments = path.split('/');
+      // 查找包含 'map' 的片段索引
+      const mapIndex = segments.findIndex(segment => segment.includes('map'));
+      if (mapIndex > 0) {
+        // 定位到 'map' 片段的左邊片段
+        const previousSegment = segments[mapIndex - 1];
+        // 萃取左邊片段中的數字
+        const match = previousSegment.match(/\d+/);
+        return match ? match[0] : 'No number found';
+      }
+      return 'No map segment found';
+    });
+
     onBeforeMount(() => {
-      setCurrentGraphId(logId);
+      setCurrentGraphId(numberBeforeMapInRoute);
     });
 
     return { isLoading, processMap, bpmn, stats, insights, traceId, traces, baseTraces,