Discover: sideFilter Trace Slider done.

src/components/Discover/SidebarTraces.vue

@@ -1,5 +1,5 @@
 <template>
-  <Sidebar :visible="sidebarTraces" :closeIcon="'pi pi-chevron-left'" :modal="false" position="left" :dismissable="true" class="!w-11/12" @show="show()">
+  <Sidebar :visible="sidebarTraces" :closeIcon="'pi pi-chevron-left'" :modal="false" position="left" :dismissable="true" class="!w-11/12" @show="show()" @hide="hide()">
     <template #header>
       <p class="h1">Traces</p>
     </template>
@@ -55,13 +55,21 @@
 
 <script>
 import cytoscapeMapTrace from '@/module/cytoscapeMapTrace.js';
+import { storeToRefs } from 'pinia';
+import AllMapDataStore from '@/stores/allMapData.js';
 
 export default {
   props: {
     sidebarTraces: Boolean,
     traces: Array,
     traceTaskSeq: Array,
-    cases: Array
+    cases: Array,
+  },
+  setup() {
+    const allMapDataStore = AllMapDataStore();
+    // const { traces, traceTaskSeq, cases } = storeToRefs(allMapDataStore);
+
+    return {allMapDataStore}
   },
   data() {
     return {
@@ -77,20 +85,6 @@ export default {
       return this.traces.length;
     },
     traceList: function() {
-      // let list = [];
-
-      // this.traces.forEach((trace, index) => {
-      //   let data = {
-      //     id: trace.id,
-      //     value: Number((trace.ratio * 100).toFixed(1)),
-      //     count: trace.count,
-      //     ratio: this.getPercentLabel(trace.ratio),
-      //   };
-
-      //   list.push(data);
-      // });
-
-      // return list;
       return this.traces.map(trace => {
         return {
           id: trace.id,
@@ -175,17 +169,23 @@ export default {
       this.setEdgesData();
       cytoscapeMapTrace(this.processMap.nodes, this.processMap.edges, graphId);
     },
+    /**
+     * create map
+     */
      show() {
       this.setNodesData();
       this.setEdgesData();
       this.createCy();
+    },
+    /**
+     * hide map
+     */
+    hide() {
+      // 因 trace api 連動，所以關閉側邊欄時讓數值歸 1
+      this.showTraceId = 1;
+      this.allMapDataStore.getTraceDetail();
     }
   },
-  created(){
-  },
-  mounted() {
-  }
-
 }
 </script>