WIP: createAllPaths

src/components/Discover/Map/SidebarState.vue

@@ -241,16 +241,10 @@ import PageAdmin from '@/stores/pageAdmin';
 import { getTimeLabel } from '@/module/timeLabel.js';
 import getMoment from 'moment';
 import i18next from '@/i18n/i18n';
+import { INSIGHTS_FIELDS_AND_LABELS } from '@/constants/constants';
 
-const fieldNamesAndLabelNames = [
-  ['self_loops', 'Self-Loop'],
-  ['short_loops', 'Short-Loop'],
-  ['shortest_traces', 'Shortest Trace'],
-  ['longest_traces', 'Longest Trace'],
-  ['most_freq_traces', 'Most Frequent Trace'],
-];
 // 刪除第一個和第二個元素
-fieldNamesAndLabelNames.splice(0, 2);
+const fieldNamesAndLabelNames = [...INSIGHTS_FIELDS_AND_LABELS].splice(0, 2);
 export default {
   props:{
     sidebarState: {
@@ -269,6 +263,7 @@ export default {
   setup(){
     const pageAdmin = PageAdmin();
 
+    const active1 = ref(0);
     const currentMapFile = computed(() => pageAdmin.currentMapFile);
     const selectedPath = ref(0);
 
@@ -282,6 +277,7 @@ export default {
       fieldNamesAndLabelNames,
       selectedPath,
       onPathOptionClick,
+      active1,
     };
   },
   data() {
@@ -291,7 +287,6 @@ export default {
       valueTraces: 0,
       valueTaskInstances: 0,
       valueTasks: 0,
-      active1: 0,
     }
   },
   methods: {

src/constants/constants.js

@@ -13,6 +13,14 @@ export const SAVE_KEY_NAME = 'CYTOSCAPE_NODE_POSTITION';
 
 export const JUST_CREATE_ACCOUNT_HOT_DURATION_MINS = 2;
 
+export const INSIGHTS_FIELDS_AND_LABELS = [
+    ['self_loops', 'Self-Loop'],
+    ['short_loops', 'Short-Loop'],
+    ['shortest_traces', 'Shortest Trace'],
+    ['longest_traces', 'Longest Trace'],
+    ['most_freq_traces', 'Most Frequent Trace'],
+  ];
+
 export const knownLayoutChartOption = {
     padding: {
       top: 16,

src/stores/mapPathStore.ts

@@ -0,0 +1,34 @@
+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(),
+        cytoscape: null,
+      }),
+    actions: {
+        setCytoscape(cytoscape) {
+          this.cytoscape = cytoscape;
+        },
+        createAllPaths() {
+          const { insights } = this.allMapData;
+          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++){
+                if(nodeIndex === 0) {
+                  const startNodes = this.cytoscape.nodes().filter(function(elem)  {
+                    return elem.data('label').toLocaleLowerCase() === 'start';
+                    // highlight between start node and first node
+                  });
+                }
+                
+              }
+            }
+          }
+        },
+    },
+});

src/views/Discover/Map/Map.vue

@@ -53,7 +53,7 @@
 </template>
 
 <script>
-import { onBeforeMount, computed } from 'vue';
+import { onBeforeMount, computed, onMounted } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useRoute } from 'vue-router';
 import axios from 'axios';
@@ -63,6 +63,7 @@ import AllMapDataStore from '@/stores/allMapData.js';
 import ConformanceStore from '@/stores/conformance.js';
 import cytoscapeMap from '@/module/cytoscapeMap.js';
 import CytoscapeStore from '@/stores/cytoscapeStore.ts';
+import MapPathStore from '@/stores/mapPathStore.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';
@@ -111,6 +112,7 @@ export default {
       setCurrentGraphId(numberBeforeMapInRoute);
     });
 
+
     return { isLoading, processMap, bpmn, stats, insights, traceId, traces, baseTraces,
       baseTraceId, filterTasks, filterStartToEnd, filterEndToStart, filterTimeframe,
       filterTrace, logId, baseLogId, createFilterId, temporaryData, isRuleData,
@@ -439,6 +441,7 @@ export default {
     },
   },
   async created() {
+    const mapPathStore = MapPathStore();
     const routeParams = this.$route.params;
     const file = this.$route.meta.file;
     const isCheckPage = this.$route.name.includes('Check');
@@ -471,10 +474,13 @@ export default {
     // 取得 logId 後才 call api
     await this.allMapDataStore.getAllMapData();
     await this.allMapDataStore.getAllTrace();
+    
     // log、filter 檔切換過程中， trace id 不同，將初始 trace id 設定為該檔案的 trace 幣一筆資料的 id。
     this.traceId = await this.traces[0]?.id;
     this.baseTraceId = await this.baseTraces[0]?.id;
     this.createCy(this.mapType);
+    await mapPathStore.setCytoscape(this.cytoscapeGraph);
+    await mapPathStore.createAllPaths();
     await this.allMapDataStore.getFilterParams();
     await this.allMapDataStore.getTraceDetail();