Discover: sideBar trace done.

src/views/Discover/index.vue

@@ -7,8 +7,8 @@
           track_changes
         </span>
       </li>
-      <li class="inline-flex items-center justify-center border border-neutral-500  rounded-full w-9 h-9 cursor-pointer bg-neutral-100 drop-shadow hover:border-primary">
-        <span class="material-symbols-outlined text-2xl text-neutral-500 hover:text-primary p-1.5">
+      <li class="inline-flex items-center justify-center border border-neutral-500  rounded-full w-9 h-9 cursor-pointer bg-neutral-100 drop-shadow hover:border-primary" @click="sidebarFilter = true" :class="{'border-primary': sidebarFilter}">
+        <span class="material-symbols-outlined text-2xl text-neutral-500 hover:text-primary p-1.5" :class="[sidebarFilter ? 'text-primary' : 'text-neutral-500']">
           tornado
         </span>
       </li>
@@ -30,7 +30,7 @@
 
   <!-- Cytoscape Map -->
   <div class="min-w-full h-screen-main bg-neutral-100 -z-40">
-    <div id="cy" class="min-w-full h-screen-main "></div>
+    <div id="cy" class="min-w-full h-screen-main"></div>
   </div>
 
   <!-- Sidebar: State -->
@@ -47,7 +47,15 @@
   <!-- Sidebar Model -->
   <SidebarView v-model:visible="sidebarView" @switch-map-type="switchMapType" @switch-curve-styles="switchCurveStyles" @switch-rank="switchRank" @switch-data-layer-type="switchDataLayerType" ></SidebarView>
   <SidebarState v-model:visible="sidebarState" :insights="insights" :stats="stats"></SidebarState>
-  <SidebarTraces v-model:visible="sidebarTraces"></SidebarTraces>
+  <SidebarTraces v-model:visible="sidebarTraces" :traces="traces" :cases="cases" :traceTaskSeq="traceTaskSeq" @switch-Trace-Id="switchTraceId" ref="tracesView"></SidebarTraces>
+
+
+
+  <Sidebar v-model:visible="sidebarFilter" :closeIcon="'pi pi-chevron-left'" :modal="false" position="left" :dismissable="true" class="!w-11/12">
+    <template #header>
+
+    </template>
+  </Sidebar>
 </template>
 
 <script>
@@ -64,21 +72,15 @@ export default {
     const loadingStore = LoadingStore();
     const allMapDataStore = AllMapDataStore();
     const { isLoading } = storeToRefs(loadingStore);
-    const { processMap, bpmn, stats, insights } = storeToRefs(allMapDataStore);
+    const { processMap, bpmn, stats, insights, traces, traceTaskSeq,cases } = storeToRefs(allMapDataStore);
 
-    return {
-      isLoading,
-      processMap,
-      bpmn,
-      stats,
-      insights,
-      allMapDataStore,
-    }
+    return { isLoading, processMap, bpmn, stats, insights, traces, traceTaskSeq,cases, allMapDataStore,}
   },
   components: {
     SidebarView,
     SidebarState,
     SidebarTraces,
+    // SidebarFilter,
   },
   data() {
     return {
@@ -99,9 +101,12 @@ export default {
       dataLayerType: 'freq', // freq | duration
       dataLayerOption: 'total',
       rank: 'LR', // 直向 TB | 橫向 LR
+      traceId: 1,
       sidebarView: false, // SideBar: Visualization Setting
       sidebarState: false, // SideBar: Summary & Insight
       sidebarTraces: false, // SideBar: Traces
+      sidebarFilter: false, // SideBar: Filter
+      iii:null,
     }
   },
   computed:{
@@ -146,6 +151,15 @@ export default {
       this.dataLayerOption = option;
       this.createCy(this.mapType);
     },
+    /**
+     * switch trace id and data
+     * @param {string} id
+     */
+    async switchTraceId(id) {
+      this.allMapDataStore.traceId = id;
+      await this.allMapDataStore.getTraceDetail();
+      this.$refs.tracesView.createCy();
+    },
     /**
      * 將 element nodes 資料彙整
      * @param {object} type processMapData | bpmnData
@@ -269,13 +283,6 @@ export default {
         });
       });
      },
-    /**
-     * get api data
-     */
-    async executeApi() {
-      await this.allMapDataStore.getAllMapData();
-      this.createCy(this.mapType);
-    },
     /**
      * create cytoscape's map
      * @param {string} type this.mapType processMap | bpmn
@@ -291,12 +298,17 @@ export default {
       };
     },
   },
-  created() {
+  async created() {
     this.allMapDataStore.logId = this.$route.params.logId;
+
+    await this.allMapDataStore.getAllMapData();
+    await this.allMapDataStore.getAllTrace();
+    await this.allMapDataStore.getTraceDetail();
+
+    this.createCy(this.mapType);
   },
   mounted() {
-    this.isLoading = false;
-    this.executeApi();
+    // this.isLoading = false;
   },
 }
 </script>