From ddd8df9daa3bedb3a09cf293f3a185274a6365f9 Mon Sep 17 00:00:00 2001
From: chiayin <chiayin.kuo@dsp.im>
Date: Wed, 4 Oct 2023 13:46:51 +0800
Subject: [PATCH] Issue #31: Done.

---
 src/components/Discover/Map/Filter/Trace.vue  | 15 +++++++++++----
 src/components/Discover/Map/SidebarTraces.vue | 11 ++++++-----
 src/views/Discover/Map/index.vue              |  6 ++++--
 3 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/src/components/Discover/Map/Filter/Trace.vue b/src/components/Discover/Map/Filter/Trace.vue
index be147ea..ee4a70a 100644
--- a/src/components/Discover/Map/Filter/Trace.vue
+++ b/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 資料彙整
diff --git a/src/components/Discover/Map/SidebarTraces.vue b/src/components/Discover/Map/SidebarTraces.vue
index 4d2377d..3a055b1 100644
--- a/src/components/Discover/Map/SidebarTraces.vue
+++ b/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 資料彙整
diff --git a/src/views/Discover/Map/index.vue b/src/views/Discover/Map/index.vue
index 002edc5..c5a8450 100644
--- a/src/views/Discover/Map/index.vue
+++ b/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 資料彙整