Discover: sidebarTraces layout done.

src/assets/tailwind.css

@@ -23,7 +23,7 @@
   }
 
   .scrollbar::-webkit-scrollbar-track {
-    @apply bg-neutral-300 rounded-full
+    @apply bg-transparent rounded-full
   }
 
   .scrollbar::-webkit-scrollbar-thumb {

src/components/Discover/sidebarState.vue

@@ -97,7 +97,7 @@
           </li>
           <li>Connection:&nbsp;
             <span class="text-primary break-words" v-for="(item, key) in insights.most_time_edges" :key="key">
-              <span v-for="(value, index) in item" :key="index">{{ value }}<span v-if="index !== item.length - 1">&nbsp;<span class="material-symbols-outlined text-lg align-sub text-neutral-900">arrow_forward</span>&nbsp;</span>
+              <span v-for="(value, index) in item" :key="index">{{ value }}<span v-if="index !== item.length - 1">&nbsp;<span class="material-symbols-outlined text-lg align-sub ">arrow_forward</span>&nbsp;</span>
               </span><span v-if="key !== insights.most_time_edges.length - 1" class="text-neutral-900">,&nbsp;</span>
             </span>
           </li>
@@ -252,6 +252,9 @@ export default {
 </script>
 
 <style scoped>
+:deep .p-progressbar .p-progressbar-value {
+  @apply bg-primary
+}
 :deep .p-tabview-nav-container {
   @apply hidden
 }

src/components/Discover/sidebarTraces.vue

@@ -0,0 +1,277 @@
+<template>
+  <Sidebar :visible="sidebarTraces" :closeIcon="'pi pi-chevron-left'" :modal="false" position="left" :dismissable="true" class="!w-11/12">
+    <template #header>
+      <p class="h1">Traces</p>
+    </template>
+    <div class="pt-4 h-full flex items-center justify-start">
+      <!-- Trace List -->
+      <section class="w-80 h-full pr-4 border-r border-neutral-300">
+        <p class="h2 px-2 mb-2">Trace List (25)</p>
+        <p class="text-primary h2 px-2 mb-2">
+          <span class="material-symbols-outlined text-base align-[-10%] mr-2">info</span>Click trace number to see more.
+        </p>
+        <div class="overflow-y-scroll overflow-x-hidden scrollbar mx-[-8px] max-h-[calc(100%_-_96px)]" >
+          <table class="border-separate border-spacing-x-2">
+            <thead class="sticky top-0 z-10 bg-neutral-10">
+              <tr>
+                <th class="h2 px-2 border-b border-neutral-500">Trace</th>
+                <th class="h2 px-2 border-b border-neutral-500 text-start" colspan="3">Occurrences</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td class="text-xs p-2">#365</td>
+                <td class="text-xs p-2 w-24">
+                  <ProgressBar :value="80" :showValue="false" class="!h-4"></ProgressBar>
+                </td>
+                <td class="text-xs py-2">1,234,567,890</td>
+                <td class="text-xs p-2">100%</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+      <!-- Trace item Table -->
+      <section class="pl-4 h-full w-[calc(100%_-_320px)]">
+        <p class="h2 mb-2">Trace #501</p>
+        <div class="h-52 px-2 mb-2 border border-neutral-300 rounded">
+          <div class="h-full scrollbar overflow-x-auto">
+          </div>
+        </div>
+          <div class="overflow-y-auto overflow-x-auto scrollbar h-[calc(100%_-_264px)]">
+          <DataTable :value="products" showGridlines>
+            <Column field="code" header="Code" sortable></Column>
+            <Column field="name" header="Name" sortable></Column>
+            <Column field="category" header="Category" sortable></Column>
+          </DataTable>
+        </div>
+      </section>
+    </div>
+  </Sidebar>
+</template>
+
+<script>
+export default {
+  props: {
+    sidebarTraces: {
+      type: Boolean,
+      require: true,
+    },
+  },
+  data() {
+    return {
+      products: [
+      {
+          id: '1000',
+          code: 'f230fh0g3',
+          name: 'Bamboo Watch',
+          description: 'Product Description',
+          image: 'bamboo-watch.jpg',
+          price: 65,
+          category: 'Accessories',
+          quantity: 24,
+          inventoryStatus: 'INSTOCK',
+          rating: 5
+      },
+      {
+          id: '1001',
+          code: 'nvklal433',
+          name: 'Black Watch',
+          description: 'Product Description',
+          image: 'black-watch.jpg',
+          price: 72,
+          category: 'Accessories',
+          quantity: 61,
+          inventoryStatus: 'INSTOCK',
+          rating: 4
+      },
+      {
+          id: '1002',
+          code: 'zz21cz3c1',
+          name: 'Blue Band',
+          description: 'Product Description',
+          image: 'blue-band.jpg',
+          price: 79,
+          category: 'Fitness',
+          quantity: 2,
+          inventoryStatus: 'LOWSTOCK',
+          rating: 3
+      },
+      {
+          id: '1003',
+          code: '244wgerg2',
+          name: 'Blue T-Shirt',
+          description: 'Product Description',
+          image: 'blue-t-shirt.jpg',
+          price: 29,
+          category: 'Clothing',
+          quantity: 25,
+          inventoryStatus: 'INSTOCK',
+          rating: 5
+      },
+      {
+          id: '1000',
+          code: 'f230fh0g3',
+          name: 'Bamboo Watch',
+          description: 'Product Description',
+          image: 'bamboo-watch.jpg',
+          price: 65,
+          category: 'Accessories',
+          quantity: 24,
+          inventoryStatus: 'INSTOCK',
+          rating: 5
+      },
+      {
+          id: '1001',
+          code: 'nvklal433',
+          name: 'Black Watch',
+          description: 'Product Description',
+          image: 'black-watch.jpg',
+          price: 72,
+          category: 'Accessories',
+          quantity: 61,
+          inventoryStatus: 'INSTOCK',
+          rating: 4
+      },
+      {
+          id: '1002',
+          code: 'zz21cz3c1',
+          name: 'Blue Band',
+          description: 'Product Description',
+          image: 'blue-band.jpg',
+          price: 79,
+          category: 'Fitness',
+          quantity: 2,
+          inventoryStatus: 'LOWSTOCK',
+          rating: 3
+      },
+      {
+          id: '1003',
+          code: '244wgerg2',
+          name: 'Blue T-Shirt',
+          description: 'Product Description',
+          image: 'blue-t-shirt.jpg',
+          price: 29,
+          category: 'Clothing',
+          quantity: 25,
+          inventoryStatus: 'INSTOCK',
+          rating: 5
+      },
+      {
+          id: '1000',
+          code: 'f230fh0g3',
+          name: 'Bamboo Watch',
+          description: 'Product Description',
+          image: 'bamboo-watch.jpg',
+          price: 65,
+          category: 'Accessories',
+          quantity: 24,
+          inventoryStatus: 'INSTOCK',
+          rating: 5
+      },
+      {
+          id: '1001',
+          code: 'nvklal433',
+          name: 'Black Watch',
+          description: 'Product Description',
+          image: 'black-watch.jpg',
+          price: 72,
+          category: 'Accessories',
+          quantity: 61,
+          inventoryStatus: 'INSTOCK',
+          rating: 4
+      },
+      {
+          id: '1002',
+          code: 'zz21cz3c1',
+          name: 'Blue Band',
+          description: 'Product Description',
+          image: 'blue-band.jpg',
+          price: 79,
+          category: 'Fitness',
+          quantity: 2,
+          inventoryStatus: 'LOWSTOCK',
+          rating: 3
+      },
+      {
+          id: '1003',
+          code: '244wgerg2',
+          name: 'Blue T-Shirt',
+          description: 'Product Description',
+          image: 'blue-t-shirt.jpg',
+          price: 29,
+          category: 'Clothing',
+          quantity: 25,
+          inventoryStatus: 'INSTOCK',
+          rating: 5
+      },
+      {
+          id: '1000',
+          code: 'f230fh0g3',
+          name: 'Bamboo Watch',
+          description: 'Product Description',
+          image: 'bamboo-watch.jpg',
+          price: 65,
+          category: 'Accessories',
+          quantity: 24,
+          inventoryStatus: 'INSTOCK',
+          rating: 5
+      },
+      {
+          id: '1001',
+          code: 'nvklal433',
+          name: 'Black Watch',
+          description: 'Product Description',
+          image: 'black-watch.jpg',
+          price: 72,
+          category: 'Accessories',
+          quantity: 61,
+          inventoryStatus: 'INSTOCK',
+          rating: 4
+      },
+      {
+          id: '1002',
+          code: 'zz21cz3c1',
+          name: 'Blue Band',
+          description: 'Product Description',
+          image: 'blue-band.jpg',
+          price: 79,
+          category: 'Fitness',
+          quantity: 2,
+          inventoryStatus: 'LOWSTOCK',
+          rating: 3
+      },
+      {
+          id: '1003',
+          code: '244wgerg2',
+          name: 'Blue T-Shirt',
+          description: 'Product Description',
+          image: 'blue-t-shirt.jpg',
+          price: 29,
+          category: 'Clothing',
+          quantity: 25,
+          inventoryStatus: 'INSTOCK',
+          rating: 5
+      },
+      ],
+    }
+  },
+}
+</script>
+
+<style scoped>
+/* 進度條顏色 */
+:deep .p-progressbar .p-progressbar-value {
+  @apply bg-primary
+}
+/* Table set */
+:deep .p-datatable-thead th {
+  @apply sticky top-0 left-0 z-10 bg-neutral-10
+}
+:deep .p-datatable .p-datatable-thead > tr > th {
+  @apply !border-y-0 border-neutral-500 bg-neutral-100 after:absolute after:left-0 after:w-full after:h-full after:block after:top-0 after:border-b after:border-t after:border-neutral-500
+}
+:deep .p-datatable .p-datatable-tbody > tr > td {
+  @apply border-neutral-500 !border-t-0
+}
+</style>

src/main.js

@@ -27,6 +27,10 @@ import Tag from 'primevue/tag';
 import ProgressBar from 'primevue/progressbar';
 import TabView from 'primevue/tabview';
 import TabPanel from 'primevue/tabpanel';
+import DataTable from 'primevue/datatable';
+import Column from 'primevue/column';
+import ColumnGroup from 'primevue/columngroup';   // optional
+import Row from 'primevue/row';
 
 const emitter = mitt();
 const app = createApp(App);
@@ -61,5 +65,9 @@ app.component('Tag', Tag);
 app.component('ProgressBar', ProgressBar);
 app.component('TabView', TabView);
 app.component('TabPanel', TabPanel);
+app.component('DataTable', DataTable);
+app.component('Column', Column);
+app.component('ColumnGroup', ColumnGroup);
+app.component('Row', Row);
 
 app.mount("#app");

src/views/Discover/index.vue

@@ -2,26 +2,26 @@
   <!-- Sidebar: Switch data type -->
   <div class="flex flex-col justify-between py-4 w-14 h-screen-main absolute bottom-0 left-0 z-10" :class="sidebarLeftValue? 'bg-neutral-100':''">
     <ul class="space-y-4 flex flex-col justify-center items-center">
-      <li class="inline-flex items-center justify-center border border-neutral-500  rounded-full w-9 h-9 cursor-pointer bg-neutral-100 drop-shadow" @click="sidebarView = true">
+      <li class="inline-flex items-center justify-center border border-neutral-500  rounded-full w-9 h-9 cursor-pointer bg-neutral-100 drop-shadow hover:border-primary" @click="sidebarView = true" :class="{'border-primary': sidebarView}">
-        <span class="material-symbols-outlined text-2xl text-neutral-500">
+        <span class="material-symbols-outlined text-2xl hover:text-primary p-1.5" :class="[sidebarView ? 'text-primary' : 'text-neutral-500']">
           track_changes
         </span>
       </li>
-      <li class="inline-flex items-center justify-center border border-neutral-500  rounded-full w-9 h-9 cursor-pointer bg-neutral-100 drop-shadow">
+      <li class="inline-flex items-center justify-center border border-neutral-500  rounded-full w-9 h-9 cursor-pointer bg-neutral-100 drop-shadow hover:border-primary">
-        <span class="material-symbols-outlined text-2xl text-neutral-500">
+        <span class="material-symbols-outlined text-2xl text-neutral-500 hover:text-primary p-1.5">
           tornado
         </span>
       </li>
-      <li class="inline-flex items-center justify-center border border-neutral-500  rounded-full w-9 h-9 cursor-pointer bg-neutral-100 drop-shadow"  @click="sidebarTraces = true">
+      <li class="inline-flex items-center justify-center border border-neutral-500  rounded-full w-9 h-9 cursor-pointer bg-neutral-100 drop-shadow hover:border-primary"  @click="sidebarTraces = true" :class="{'border-primary': sidebarTraces}">
-        <span class="material-symbols-outlined text-2xl text-neutral-500">
+        <span class="material-symbols-outlined text-2xl hover:text-primary p-1.5" :class="[sidebarTraces ? 'text-primary' : 'text-neutral-500']">
           rebase
         </span>
       </li>
     </ul>
 
     <ul class="flex flex-col justify-center items-center">
-      <li class="inline-flex items-center justify-center border border-neutral-500  rounded-full w-9 h-9 cursor-pointer bg-neutral-100 drop-shadow">
+      <li class="inline-flex items-center justify-center border border-neutral-500  rounded-full w-9 h-9 cursor-pointer bg-neutral-100 drop-shadow hover:border-primary">
-        <span class="material-symbols-outlined text-2xl text-neutral-500">
+        <span class="material-symbols-outlined text-2xl text-neutral-500 hover:text-primary p-1.5">
           highlight
         </span>
       </li>
@@ -36,8 +36,8 @@
   <!-- Sidebar: State -->
   <div class="bg-transparent py-4 w-14 h-screen-main z-10 bottom-0 right-0 absolute">
     <ul class="flex flex-col justify-center items-center">
-      <li class="inline-flex items-center justify-center border border-neutral-500  rounded-full w-9 h-9 cursor-pointer bg-neutral-100 drop-shadow" @click="sidebarState = true">
+      <li class="inline-flex items-center justify-center border border-neutral-500  rounded-full w-9 h-9 cursor-pointer bg-neutral-100 drop-shadow hover:border-primary" @click="sidebarState = true" :class="{'border-primary': sidebarState}">
-        <span class="material-symbols-outlined text-2xl text-neutral-500">
+        <span class="material-symbols-outlined text-2xl text-neutral-500 hover:text-primary p-1.5" :class="[sidebarState ? 'text-primary' : 'text-neutral-500']">
           info
         </span>
       </li>
@@ -47,27 +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"></SidebarTraces>
-  <Sidebar v-model:visible="sidebarTraces" :closeIcon="'pi pi-chevron-left'" :modal="false" position="left" :dismissable="true" class="!w-11/12">
-    <template #header>
-      <p class="h1">Traces</p>
-    </template>
-    <div class="p-4">
-      <!-- Trace List -->
-      <section>
-        <p class="h2">Trace List (25)</p>
-        <p class="text-primary"><span class="material-symbols-outlined">info</span>Click trace number to see more.</p>
-      </section>
-      <!-- Trace item Table -->
-      <section></section>
-    </div>
-  </Sidebar>
-
-
-
-
-
-
 </template>
 
 <script>
@@ -77,6 +57,7 @@ import AllMapDataStore from '@/stores/allMapData.js';
 import cytoscapeMap from '@/module/cytoscapeMap.js';
 import SidebarView from '@/components/Discover/sidebarView.vue';
 import SidebarState from '@/components/Discover/sidebarState.vue';
+import SidebarTraces from '@/components/Discover/sidebarTraces.vue';
 
 export default {
   setup() {
@@ -97,6 +78,7 @@ export default {
   components: {
     SidebarView,
     SidebarState,
+    SidebarTraces,
   },
   data() {
     return {

src/views/Files/index.vue

@@ -38,7 +38,7 @@
         </ul>
       </div>
       <!-- All Files type of List -->
-      <div style="margin-left: -16px; margin-right: -16px;" class="overflow-y-scroll overflow-x-hidden max-h-[calc(100vh_-_480px)]  scrollbar" v-if="!switchListOrGrid">
+      <div class="overflow-y-scroll overflow-x-hidden max-h-[calc(100vh_-_480px)] mx-[-8px] scrollbar" v-if="!switchListOrGrid">
         <table class="w-full border-separate border-spacing-x-4 text-sm table-fixed">
           <thead class="sticky top-0 bg-neutral-10">
             <tr>