From 672d93b8211bb34f85e23bc814f5270553aac94b Mon Sep 17 00:00:00 2001
From: chiayin <chiayin.kuo@dsp.im>
Date: Fri, 3 Nov 2023 17:12:57 +0800
Subject: [PATCH] Issues #179: done.

---
 .../Discover/Conformance/MoreModal.vue        |  2 +-
 src/components/Discover/Map/Filter/Trace.vue  | 42 +++++++++++---
 src/components/Discover/Map/SidebarTraces.vue | 56 +++++++++++++++----
 src/stores/allMapData.js                      |  4 +-
 src/views/Discover/Map/index.vue              |  6 +-
 5 files changed, 86 insertions(+), 24 deletions(-)

diff --git a/src/components/Discover/Conformance/MoreModal.vue b/src/components/Discover/Conformance/MoreModal.vue
index c6bc60d..28e4bf5 100644
--- a/src/components/Discover/Conformance/MoreModal.vue
+++ b/src/components/Discover/Conformance/MoreModal.vue
@@ -104,7 +104,7 @@ export default {
           item.facets.forEach((facet, index) => {
             item[`fac_${index}`] = facet.value; // 建立新的 key-value pair
           });
-          delete item.facets; // 刪除原本的 attributes 屬性
+          delete item.facets; // 刪除原本的 facets 屬性
 
           item.attributes.forEach((attribute, index) => {
             item[`att_${index}`] = attribute.value; // 建立新的 key-value pair
diff --git a/src/components/Discover/Map/Filter/Trace.vue b/src/components/Discover/Map/Filter/Trace.vue
index 00cbc16..db6d237 100644
--- a/src/components/Discover/Map/Filter/Trace.vue
+++ b/src/components/Discover/Map/Filter/Trace.vue
@@ -51,10 +51,10 @@
         </div>
       </div>
       <div class="overflow-y-auto overflow-x-auto scrollbar h-[calc(100%_-_264px)] infiniteTable" @scroll="handleScroll">
-        <DataTable :value="infiniteData" showGridlines tableClass="text-sm" breakpoint="0">
-          <Column field="id" header="Case ID" ></Column>
-          <Column field="started_at" header="Start time" ></Column>
-          <Column field="completed_at" header="End time" ></Column>
+        <DataTable :value="caseData" showGridlines tableClass="text-sm" breakpoint="0">
+          <div v-for="(col, index) in columnData" :key="index">
+            <Column :field="col.field" :header="col.header"></Column>
+          </div>
         </DataTable>
       </div>
     </section>
@@ -106,8 +106,7 @@ export default {
           base_count: trace.count,
           ratio: this.getPercentLabel(trace.count / this.traceCountTotal),
         };
-      }).sort((x, y) => x.id - y.id)
-        .slice(this.selectArea[0], this.selectArea[1]);
+      }).slice(this.selectArea[0], this.selectArea[1]);
     },
     caseTotalPercent: function() {
       let ratioSum = this.traceList.map(trace => trace.base_count).reduce((acc, cur) => acc + cur, 0) / this.traceCountTotal;
@@ -132,7 +131,34 @@ export default {
           },
         ]
       };
-    }
+    },
+    caseData: function() {
+      const data = JSON.parse(JSON.stringify(this.infiniteData)); // 深拷貝原始 cases 的內容
+      data.forEach(item => {
+        item.attributes.forEach((attribute, index) => {
+          item[`att_${index}`] = attribute.value; // 建立新的 key-value pair
+        });
+        delete item.attributes; // 刪除原本的 attributes 屬性
+      })
+      return data;
+    },
+    columnData: function() {
+      const data = JSON.parse(JSON.stringify(this.baseCases)); // 深拷貝原始 cases 的內容
+      let result = [
+          { field: 'id', header: 'Case Id' },
+          { field: 'started_at', header: 'Start time' },
+          { field: 'completed_at', header: 'End time' },
+        ];
+      if(data.length !== 0){
+        result = [
+          { field: 'id', header: 'Case Id' },
+          { field: 'started_at', header: 'Start time' },
+          { field: 'completed_at', header: 'End time' },
+          ...data[0]?.attributes.map((att, index) => ({ field: `att_${index}`, header: att.key })),
+        ];
+      }
+      return result
+    },
   },
   watch: {
     selectArea: function(newValue) {
@@ -304,11 +330,13 @@ export default {
     }
   },
   mounted() {
+    this.isLoading = true; // createCy 執行完關閉
     this.setNodesData();
     this.setEdgesData();
     this.createCy();
     this.chartOptions = this.barOptions();
     this.selectArea = [0, this.traceTotal]
+    this.isLoading = false;
   },
 }
 </script>
diff --git a/src/components/Discover/Map/SidebarTraces.vue b/src/components/Discover/Map/SidebarTraces.vue
index 0d4ec57..8e0a751 100644
--- a/src/components/Discover/Map/SidebarTraces.vue
+++ b/src/components/Discover/Map/SidebarTraces.vue
@@ -42,10 +42,10 @@
           </div>
         </div>
         <div class="overflow-y-auto overflow-x-auto scrollbar h-[calc(100%_-_264px)] infiniteTable" @scroll="handleScroll">
-          <DataTable :value="infiniteData" showGridlines tableClass="text-sm" breakpoint="0">
-            <Column field="id" header="Case ID" ></Column>
-            <Column field="started_at" header="Start time" ></Column>
-            <Column field="completed_at" header="End time" ></Column>
+          <DataTable :value="caseData" showGridlines tableClass="text-sm" breakpoint="0">
+            <div v-for="(col, index) in columnData" :key="index">
+              <Column :field="col.field" :header="col.header"></Column>
+            </div>
           </DataTable>
         </div>
       </section>
@@ -54,15 +54,19 @@
 </template>
 <script>
 import { storeToRefs } from 'pinia';
+import LoadingStore from '@/stores/loading.js';
 import AllMapDataStore from '@/stores/allMapData.js';
 import cytoscapeMapTrace from '@/module/cytoscapeMapTrace.js';
 
 export default {
-  props: ['sidebarTraces'],
+  props: ['sidebarTraces', 'cases'],
   setup() {
+    const loadingStore = LoadingStore();
     const allMapDataStore = AllMapDataStore();
-    const { infinit404, infiniteStart, traceId, traces, traceTaskSeq, cases, infiniteFirstCases } = storeToRefs(allMapDataStore);
-    return {allMapDataStore, infinit404, infiniteStart, traceId, traces, traceTaskSeq, cases, infiniteFirstCases}
+    const { isLoading } = storeToRefs(loadingStore);
+    const { infinit404, infiniteStart, traceId, traces, traceTaskSeq, infiniteFirstCases } = storeToRefs(allMapDataStore);
+
+    return {allMapDataStore, infinit404, infiniteStart, traceId, traces, traceTaskSeq, infiniteFirstCases, isLoading }
   },
   data() {
     return {
@@ -81,8 +85,7 @@ export default {
     },
     traceList: function() {
       let sum = this.traces.map(trace => trace.count).reduce((acc, cur) => acc + cur, 0);
-
-      return this.traces.map(trace => {
+      let result = this.traces.map(trace => {
         return {
           id: trace.id,
           value: this.progressWidth(Number(((trace.count / sum) * 100).toFixed(1))),
@@ -90,8 +93,37 @@ export default {
           base_count: trace.count,
           ratio: this.getPercentLabel(trace.count / sum),
         };
-      }).sort((x, y) => x.id - y.id);
-    }
+      })
+
+      return result;
+    },
+    caseData: function() {
+      const data = JSON.parse(JSON.stringify(this.infiniteData)); // 深拷貝原始 cases 的內容
+      data.forEach(item => {
+        item.attributes.forEach((attribute, index) => {
+          item[`att_${index}`] = attribute.value; // 建立新的 key-value pair
+        });
+        delete item.attributes; // 刪除原本的 attributes 屬性
+      })
+      return data;
+    },
+    columnData: function() {
+      const data = JSON.parse(JSON.stringify(this.cases)); // 深拷貝原始 cases 的內容
+      let result = [
+          { field: 'id', header: 'Case Id' },
+          { field: 'started_at', header: 'Start time' },
+          { field: 'completed_at', header: 'End time' },
+        ];
+      if(data.length !== 0){
+        result = [
+          { field: 'id', header: 'Case Id' },
+          { field: 'started_at', header: 'Start time' },
+          { field: 'completed_at', header: 'End time' },
+          ...data[0]?.attributes.map((att, index) => ({ field: `att_${index}`, header: att.key })),
+        ];
+      }
+      return result
+    },
   },
   watch: {
     infinite404: function(newValue) {
@@ -194,6 +226,7 @@ export default {
      * create map
      */
      async show() {
+      this.isLoading = await true; // createCy 執行完關閉
       // 因 trace api 連動，所以關閉側邊欄時讓數值歸 traces 第一筆 id
       this.showTraceId = await this.traces[0]?.id;
       this.infiniteStart = await 0;
@@ -201,6 +234,7 @@ export default {
       this.setNodesData();
       this.setEdgesData();
       this.createCy();
+      this.isLoading = false;
     },
     /**
      * 無限滾動: 監聽 scroll 有沒有滾到底部
diff --git a/src/stores/allMapData.js b/src/stores/allMapData.js
index 8e967fd..2bd4928 100644
--- a/src/stores/allMapData.js
+++ b/src/stores/allMapData.js
@@ -54,10 +54,10 @@ export default defineStore('allMapDataStore', {
       return state.allInsights;
     },
     traces: state => {
-      return state.allTrace;
+      return state.allTrace.sort((x, y) => x.id - y.id);
     },
     baseTraces: state => {
-      return state.allBaseTrace;
+      return state.allBaseTrace.sort((x, y) => x.id - y.id);
     },
     cases: state => {
       return state.allCase;
diff --git a/src/views/Discover/Map/index.vue b/src/views/Discover/Map/index.vue
index a1a2047..fe4ef34 100644
--- a/src/views/Discover/Map/index.vue
+++ b/src/views/Discover/Map/index.vue
@@ -47,7 +47,7 @@
   <!-- 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" @switch-Trace-Id="switchTraceId" ref="tracesView"></SidebarTraces>
+  <SidebarTraces v-model:visible="sidebarTraces" :cases="cases" @switch-Trace-Id="switchTraceId" ref="tracesView"></SidebarTraces>
   <SidebarFilter v-model:visible="sidebarFilter" :filterTasks="filterTasks" :filterStartToEnd="filterStartToEnd" :filterEndToStart="filterEndToStart" :filterTimeframe="filterTimeframe" :filterTrace="filterTrace"
   @submit-all="createCy(mapType)" @switch-Trace-Id="switchTraceId" ref="sidevarFilterRef"></SidebarFilter>
 
@@ -68,9 +68,9 @@ export default {
     const loadingStore = LoadingStore();
     const allMapDataStore = AllMapDataStore();
     const { isLoading } = storeToRefs(loadingStore);
-    const { processMap, bpmn, stats, insights, traceId, traces, baseTraces, baseTraceId, filterTasks, filterStartToEnd, filterEndToStart, filterTimeframe, filterTrace, temporaryData, isRuleData, ruleData, logId, baseLogId, createFilterId } = storeToRefs(allMapDataStore);
+    const { processMap, bpmn, stats, insights, traceId, traces, baseTraces, baseTraceId, filterTasks, filterStartToEnd, filterEndToStart, filterTimeframe, filterTrace, temporaryData, isRuleData, ruleData, logId, baseLogId, createFilterId, cases } = storeToRefs(allMapDataStore);
 
-    return { isLoading, processMap, bpmn, stats, insights, traceId, traces, baseTraces, baseTraceId, filterTasks, filterStartToEnd, filterEndToStart, filterTimeframe, filterTrace, logId, baseLogId, createFilterId, temporaryData, isRuleData, ruleData, allMapDataStore}
+    return { isLoading, processMap, bpmn, stats, insights, traceId, traces, baseTraces, baseTraceId, filterTasks, filterStartToEnd, filterEndToStart, filterTimeframe, filterTrace, logId, baseLogId, createFilterId, temporaryData, isRuleData, ruleData, allMapDataStore, cases }
   },
   components: {
     SidebarView,