From 4f107a80dd0ce90335c540bdc6d142bc8ab3ca1a Mon Sep 17 00:00:00 2001
From: chiayin <chiayin.kuo@dsp.im>
Date: Thu, 16 Mar 2023 11:19:38 +0800
Subject: [PATCH] Discover: fix sidebarState content

---
 src/components/Discover/sidebarState.vue | 30 ++++++++++----------
 src/views/Discover/index.vue             | 35 ++++++++++++++++++++----
 2 files changed, 44 insertions(+), 21 deletions(-)

diff --git a/src/components/Discover/sidebarState.vue b/src/components/Discover/sidebarState.vue
index 56f31da..31fd7a3 100644
--- a/src/components/Discover/sidebarState.vue
+++ b/src/components/Discover/sidebarState.vue
@@ -62,11 +62,11 @@
       <div class="pt-1 pb-4">
         <p class="h2">Case Duration</p>
         <ul class="space-y-1">
-          <li><Tag value="MIN" class="!text-neutral-900 !bg-neutral-200 mr-2"></Tag>{{ timeLabel(stats.case_duration.min) }}</li>
-          <li><Tag value="AVG" class="!text-neutral-900 !bg-neutral-200 mr-2"></Tag>{{ timeLabel(stats.case_duration.average
+          <li><Tag value="MIN" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ timeLabel(stats.case_duration.min) }}</li>
+          <li><Tag value="AVG" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ timeLabel(stats.case_duration.average
   ) }}</li>
-          <li><Tag value="MED" class="!text-neutral-900 !bg-neutral-200 mr-2"></Tag>{{ timeLabel(stats.case_duration.median) }}</li>
-          <li><Tag value="MAX" class="!text-neutral-900 !bg-neutral-200 mr-2"></Tag>{{ timeLabel(stats.case_duration.max) }}</li>
+          <li><Tag value="MED" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ timeLabel(stats.case_duration.median) }}</li>
+          <li><Tag value="MAX" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ timeLabel(stats.case_duration.max) }}</li>
         </ul>
 
       </div>
@@ -114,17 +114,17 @@
         <div>
           <TabView ref="tabview2" v-model:activeIndex="active1">
               <TabPanel header="Self-loop">
-                <ul class="list-disc ml-6 mb-4 ">
-                  <li v-if="insights.self_loops.length === 0">No data</li>
-                  <li v-else>
+                <p v-if="insights.self_loops.length === 0">No data</p>
+                <ul v-else class="list-disc ml-6">
+                  <li>
                     <span v-for="(value, key) in insights.self_loops" :key="key">{{ value }}<span v-if="key !== insights.self_loops.length -1">&nbsp;<span class="material-symbols-outlined text-lg align-sub">arrow_forward</span>&nbsp;</span>
                     </span>
                   </li>
                 </ul>
               </TabPanel>
               <TabPanel header="Short-loop">
-                <ul class="list-disc ml-6 mb-4 ">
-                  <li v-if="insights.short_loops.length === 0">No data</li>
+                <p v-if="insights.short_loops.length === 0">No data</p>
+                <ul v-else class="list-disc ml-6">
                   <li class="break-words" v-for="(item, key) in insights.short_loops" :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">arrow_forward</span>&nbsp;</span>
                     </span>
@@ -132,8 +132,8 @@
                 </ul>
               </TabPanel>
               <TabPanel header="Shortest Trace">
-                <ul class="list-disc ml-6 mb-4 ">
-                  <li v-if="insights.shortest_traces.length === 0">No data</li>
+                <p v-if="insights.shortest_traces.length === 0">No data</p>
+                <ul v-else class="list-disc ml-6">
                   <li class="break-words" v-for="(item, key) in insights.shortest_traces" :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">arrow_forward</span>&nbsp;</span>
                     </span>
@@ -141,8 +141,8 @@
                 </ul>
               </TabPanel>
               <TabPanel header="Longest Trace">
-                <ul class="list-disc ml-6 mb-4 ">
-                  <li v-if="insights.longest_traces.length === 0">No data</li>
+                <p v-if="insights.longest_traces.length === 0">No data</p>
+                <ul v-else class="list-disc ml-6">
                   <li class="break-words" v-for="(item, key) in insights.longest_traces" :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">arrow_forward</span>&nbsp;</span>
                     </span>
@@ -150,8 +150,8 @@
                 </ul>
               </TabPanel>
               <TabPanel header="Most Frequent Trace">
-                <ul class="list-disc ml-6 mb-4 ">
-                  <li v-if="insights.most_freq_traces.length === 0">No data</li>
+                <li v-if="insights.most_freq_traces.length === 0">No data</li>
+                <ul v-else class="list-disc ml-6">
                   <li class="break-words" v-for="(item, key) in insights.most_freq_traces" :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">arrow_forward</span>&nbsp;</span>
                     </span>
diff --git a/src/views/Discover/index.vue b/src/views/Discover/index.vue
index 0e9948d..fb6087e 100644
--- a/src/views/Discover/index.vue
+++ b/src/views/Discover/index.vue
@@ -1,18 +1,18 @@
 <template>
   <!-- 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="sidebarView === true? 'bg-neutral-100':''">
+  <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" @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" @click="sidebarView = true">
         <span class="material-symbols-outlined text-2xl 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">
+      <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">
         <span class="material-symbols-outlined text-2xl text-neutral-500">
           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">
+      <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">
         <span class="material-symbols-outlined text-2xl text-neutral-500">
           rebase
         </span>
@@ -20,7 +20,7 @@
     </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">
+      <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">
         <span class="material-symbols-outlined text-2xl text-neutral-500">
           highlight
         </span>
@@ -36,7 +36,7 @@
   <!-- 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" @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" @click="sidebarState = true">
         <span class="material-symbols-outlined text-2xl text-neutral-500">
           info
         </span>
@@ -48,6 +48,22 @@
   <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>
 
+  <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>
+
+
 
 
 
@@ -103,6 +119,13 @@ export default {
       rank: 'LR', // 直向 TB | 橫向 LR
       sidebarView: false, // SideBar: Visualization Setting
       sidebarState: false, // SideBar: Summary & Insight
+      sidebarTraces: false, // SideBar: Traces
+    }
+  },
+  computed:{
+    sidebarLeftValue: function() {
+      let result = this.sidebarView === true || this.sidebarTraces === true;
+      return result;
     }
   },
   methods: {