Issue #31: Done.

src/components/Discover/Map/Filter/Trace.vue

@@ -28,7 +28,7 @@
             </tr>
           </thead>
           <tbody>
-            <tr v-for="(trace, key) in traceList" :key="key" class=" cursor-pointer hover:text-primary" @click="switchCaseData(trace.id)">
+            <tr v-for="(trace, key) in traceList" :key="key" class=" cursor-pointer hover:text-primary" @click="switchCaseData(trace.id, trace.base_count)">
               <td class="p-2 text-center">#{{ trace.id }}</td>
               <td class="p-2 min-w-[96px]">
                 <div class="h-4 w-full bg-neutral-300 rounded-sm overflow-hidden">
@@ -64,15 +64,19 @@
 <script>
 import { storeToRefs } from 'pinia';
 import AllMapDataStore from '@/stores/allMapData.js';
+import LoadingStore from '@/stores/loading.js';
 import cytoscapeMapTrace from '@/module/cytoscapeMapTrace.js';
+import numberLabel from '@/module/numberLabel.js';
 
 export default {
   expose: ['selectArea', 'showTraceId', 'traceTotal'],
   setup() {
     const allMapDataStore = AllMapDataStore();
+    const loadingStore = LoadingStore();
     const { traces, traceTaskSeq, cases } = storeToRefs(allMapDataStore);
+    const { isLoading } = storeToRefs(loadingStore);
 
-    return {allMapDataStore, traces, traceTaskSeq, cases}
+    return {allMapDataStore, traces, traceTaskSeq, cases, isLoading}
   },
   data() {
     return {
@@ -97,7 +101,8 @@ export default {
         return {
           id: trace.id,
           value: this.progressWidth(Number(((trace.count / this.traceCountTotal) * 100).toFixed(1))),
-          count: trace.count,
+          count: numberLabel(trace.count),
+          base_count: trace.count,
           ratio: this.getPercentLabel(trace.count / this.traceCountTotal),
         };
       }).sort((x, y) => x.id - y.id)
@@ -198,11 +203,13 @@ export default {
      * switch case data
      * @param {number} id
      */
-     async switchCaseData(id) {
+     async switchCaseData(id, count) {
+      if(count >= 1000) this.isLoading = true;
       this.showTraceId = id;
       this.allMapDataStore.traceId = id;
       await this.allMapDataStore.getTraceDetail();
       this.createCy();
+      this.isLoading = false;
     },
     /**
      * 將 trace element nodes 資料彙整

src/components/Discover/Map/SidebarTraces.vue

@@ -19,7 +19,7 @@
               </tr>
             </thead>
             <tbody>
-              <tr v-for="(trace, key) in traceList" :key="key" class=" cursor-pointer hover:text-primary" @click="switchCaseData(trace.id)">
+              <tr v-for="(trace, key) in traceList" :key="key" class=" cursor-pointer hover:text-primary" @click="switchCaseData(trace.id, trace.base_count)">
                 <td class="p-2">#{{ trace.id }}</td>
                 <td class="p-2 w-24">
                   <div class="h-4 w-full bg-neutral-300 rounded-sm overflow-hidden">
@@ -55,8 +55,8 @@
 
 <script>
 import cytoscapeMapTrace from '@/module/cytoscapeMapTrace.js';
-import { storeToRefs } from 'pinia';
 import AllMapDataStore from '@/stores/allMapData.js';
+import numberLabel from '@/module/numberLabel.js';
 
 export default {
   props: {
@@ -89,7 +89,8 @@ export default {
         return {
           id: trace.id,
           value: this.progressWidth(Number(((trace.count / sum) * 100).toFixed(1))),
-          count: trace.count,
+          count: numberLabel(trace.count),
+          base_count: trace.count,
           ratio: this.getPercentLabel(trace.count / sum),
         };
       }).sort((x, y) => x.id - y.id);
@@ -116,9 +117,9 @@ export default {
      * switch case data
      * @param {number} id
      */
-    async switchCaseData(id) {
+    async switchCaseData(id, count) {
       this.showTraceId = id;
-      this.$emit('switch-Trace-Id', this.showTraceId);
+      this.$emit('switch-Trace-Id', {id: this.showTraceId, count: count});
     },
     /**
      * 將 trace element nodes 資料彙整

src/views/Discover/Map/index.vue

@@ -149,10 +149,12 @@ export default {
      * switch trace id and data
      * @param {string} id
      */
-    async switchTraceId(id) {
-      this.traceId = id;
+    async switchTraceId(e) {
+      if(e.count >= 1000) this.isLoading = true;
+      this.traceId = e.id;
       await this.allMapDataStore.getTraceDetail();
       this.$refs.tracesView.createCy();
+      this.isLoading = false;
     },
     /**
      * 將 element nodes 資料彙整