Issue #165: Done.

src/components/Discover/Map/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()" @hide="hide()">
+  <Sidebar :visible="sidebarTraces" :closeIcon="'pi pi-chevron-left'" :modal="false" position="left" :dismissable="true" class="!w-11/12" @show="show()">
     <template #header>
       <p class="h1">Traces</p>
     </template>
@@ -41,8 +41,8 @@
             <div id="cyTrace" ref="cyTrace" class="h-full min-w-full relative"></div>
           </div>
         </div>
-        <div class="overflow-y-auto overflow-x-auto scrollbar h-[calc(100%_-_264px)]">
-          <DataTable :value="cases" showGridlines tableClass="text-sm" breakpoint="0">
+        <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>
@@ -52,21 +52,17 @@
     </div>
   </Sidebar>
 </template>
-
 <script>
-import cytoscapeMapTrace from '@/module/cytoscapeMapTrace.js';
+import { storeToRefs } from 'pinia';
 import AllMapDataStore from '@/stores/allMapData.js';
+import cytoscapeMapTrace from '@/module/cytoscapeMapTrace.js';
 
 export default {
-  props: {
-    sidebarTraces: Boolean,
-    traces: Array,
-    traceTaskSeq: Array,
-    cases: Array,
-  },
+  props: ['sidebarTraces'],
   setup() {
     const allMapDataStore = AllMapDataStore();
-    return {allMapDataStore}
+    const { infinit404, infiniteStart, traceId, traces, traceTaskSeq, cases, infiniteFirstCases } = storeToRefs(allMapDataStore);
+    return {allMapDataStore, infinit404, infiniteStart, traceId, traces, traceTaskSeq, cases, infiniteFirstCases}
   },
   data() {
     return {
@@ -74,7 +70,9 @@ export default {
         nodes:[],
         edges:[],
       },
-      showTraceId: 1,
+      showTraceId: null,
+      infinitMaxItems: false,
+      infiniteData: [],
     }
   },
   computed: {
@@ -93,7 +91,25 @@ export default {
           ratio: this.getPercentLabel(trace.count / sum),
         };
       }).sort((x, y) => x.id - y.id);
+    }
+  },
+  watch: {
+    infinite404: function(newValue) {
+      if(newValue === 404) this.infinitMaxItems = true;
     },
+    traceId: {
+      handler(newValue) {
+        this.showTraceId = newValue;
+      },
+      immediate: true
+    },
+    showTraceId: function(newValue, oldValue) {
+      let isScrollTop = document.querySelector('.infiniteTable');
+      if(isScrollTop && typeof isScrollTop.scrollTop !== 'undefined') if(newValue !== oldValue) isScrollTop.scrollTop = 0;
+    },
+    infiniteFirstCases: function(newValue){
+      if(this.infiniteFirstCases) this.infiniteData = JSON.parse(JSON.stringify(newValue));
+    }
   },
   methods: {
     /**
@@ -117,7 +133,11 @@ export default {
      * @param {number} id
      */
     async switchCaseData(id, count) {
+      if(count >= 1000) this.isLoading = true;
+      this.infinit404 = null;
+      this.infinitMaxItems = false;
       this.showTraceId = id;
+      this.infiniteStart = 0;
       this.$emit('switch-Trace-Id', {id: this.showTraceId, count: count});
     },
     /**
@@ -172,20 +192,43 @@ export default {
     /**
      * create map
      */
-     show() {
+     async show() {
+      // 因 trace api 連動，所以關閉側邊欄時讓數值歸 traces 第一筆 id
+      this.showTraceId = await this.traces[0]?.id;
+      this.infiniteStart = await 0;
+      await this.allMapDataStore.getTraceDetail();
       this.setNodesData();
       this.setEdgesData();
       this.createCy();
     },
     /**
-     * hide map
+     * 無限滾動: 監聽 scroll 有沒有滾到底部
+     * @param {element} event
      */
-    hide() {
-      // 因 trace api 連動，所以關閉側邊欄時讓數值歸 1
-      this.showTraceId = 1;
-      this.allMapDataStore.getTraceDetail();
+    handleScroll(event) {
+      if(this.infinitMaxItems || this.cases.length < 20) return;
+
+      const container = event.target;
+      const overScrollHeight = container.scrollTop + container.clientHeight >= container.scrollHeight;
+
+      if(overScrollHeight) this.fetchData();
+    },
+    /**
+     * 無限滾動: 滾到底後，要載入數據
+     */
+    async fetchData() {
+      try {
+        this.infiniteStart += 20;
+        await this.allMapDataStore.getTraceDetail();
+        this.infiniteData = [...this.infiniteData, ...this.cases];
+      } catch(error) {
+        console.error('Failed to load data:', error);
+      }
     }
   },
+  async created() {
+    this.allMapDataStore.getTraceDetail();
+  }
 }
 </script>