From 1191d87f9357a6e5ccba3861c441627a8d224e3d Mon Sep 17 00:00:00 2001
From: Cindy Chang <cindy.chang@dsp.im>
Date: Mon, 19 Aug 2024 13:32:50 +0800
Subject: [PATCH] WIP: insight path tabs

---
 src/components/Discover/Map/SidebarState.vue | 96 +++++++++++---------
 1 file changed, 53 insertions(+), 43 deletions(-)

diff --git a/src/components/Discover/Map/SidebarState.vue b/src/components/Discover/Map/SidebarState.vue
index 12e1210..b4ae4cf 100644
--- a/src/components/Discover/Map/SidebarState.vue
+++ b/src/components/Discover/Map/SidebarState.vue
@@ -119,30 +119,39 @@
     <div v-if="tab === 'insight'">
       <div class="border-b-2 border-neutral-300 mb-4">
         <p class="h2">Most Frequent</p>
-        <ul class="list-disc ml-6 mb-2 text-sm space-y-1">
-          <li>Activity:&nbsp;
-            <span class="text-primary break-words" v-for="(value, key) in insights.most_freq_tasks" :key="key">{{ value }}<span v-if="key !== insights.most_freq_tasks.length - 1" class="text-neutral-900">,&nbsp;</span>
+        <ul class="list-disc ml-6 mb-2 text-sm">
+          <li class="leading-5">Activity:&nbsp;
+            <span class="text-[#0099FF] break-words bg-[#F1F5F9] px-2 rounded mx-1" v-for="(value, key) in 
+            insights.most_freq_tasks" :key="key">{{ value }}</span>
+          </li>
+          <li class="leading-5">Inbound connections:&nbsp;
+            <span class="text-[#0099FF] break-words bg-[#F1F5F9] px-2 rounded mx-1" v-for="(value, key) in 
+              insights.most_freq_in" :key="key">{{ value }}
             </span>
           </li>
-          <li>Inbound connections:&nbsp;
-            <span class="text-primary break-words" v-for="(value, key) in insights.most_freq_in" :key="key">{{ value }}<span v-if="key !== insights.most_freq_in.length - 1" class="text-neutral-900">,&nbsp;</span>
-            </span>
-          </li>
-          <li>Outbound connections:&nbsp;
-            <span class="text-primary break-words" v-for="(value, key) in insights.most_freq_out" :key="key">{{ value }}<span v-if="key !== insights.most_freq_out.length - 1" class="text-neutral-900">,&nbsp;</span>
+          <li class="leading-5">Outbound connections:&nbsp;
+            <span class="text-[#0099FF] break-words bg-[#F1F5F9] px-2 rounded mx-1" v-for="(value, key) in 
+              insights.most_freq_out" :key="key">{{ value }}
             </span>
           </li>
         </ul>
         <p class="h2">Most Time-Consuming</p>
-        <ul class="list-disc ml-6 mb-4 text-sm space-y-1">
-          <li class="w-full">Activity:&nbsp;
-            <span class="text-primary break-words" v-for="(value, key) in insights.most_time_tasks" :key="key">{{ value }}<span v-if="key !== insights.most_time_tasks.length - 1" class="text-neutral-900">,&nbsp;</span>
+        <ul class="list-disc ml-6 mb-4 text-sm">
+          <li class="w-full leading-5">Activity:&nbsp;
+            <span class="text-primary break-words bg-[#F1F5F9] px-2 rounded mx-1" v-for="(value, key) 
+              in insights.most_time_tasks" :key="key">{{ value }}
             </span>
           </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 ">arrow_forward</span>&nbsp;</span>
-              </span><span v-if="key !== insights.most_time_edges.length - 1" class="text-neutral-900">,&nbsp;</span>
+          <li class="w-full leading-5 mt-2">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">
+                <span class="connection-text bg-[#F1F5F9] px-2 rounded">{{ value }}</span>
+                <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>
         </ul>
@@ -159,7 +168,7 @@
           <TabView ref="tabview2" v-model:activeIndex="active1">
               <TabPanel header="Self-loop" contentClass="text-sm">
                 <p v-if="insights.self_loops.length === 0">No data</p>
-                <ul v-else class="list-disc ml-6 space-y-1">
+                <ul v-else class="ml-6 space-y-1">
                   <li v-for="(value, key) in insights.self_loops" :key="key">
                     <span>{{ value }}</span>
                   </li>
@@ -167,38 +176,29 @@
               </TabPanel>
               <TabPanel header="Short-loop" contentClass="text-sm">
                 <p v-if="insights.short_loops.length === 0">No data</p>
-                <ul v-else class="list-disc ml-6 space-y-1">
+                <ul v-else class="ml-6 space-y-1">
                   <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">sync_alt</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">sync_alt</span>
+                        &nbsp;</span>
                     </span>
                   </li>
                 </ul>
               </TabPanel>
-              <TabPanel header="Shortest Trace" contentClass="text-sm">
-                <p v-if="insights.shortest_traces.length === 0">No data</p>
-                <ul v-else class="list-disc ml-6 space-y-1">
-                  <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>
+              <TabPanel v-for="([field, label], i) in fieldNamesAndLabelNames" :key="i" :header="label" contentClass="text-sm">
+                <p v-if="insights[field].length === 0">No data</p>
+                <ul v-else class="ml-6 space-y-1">
+                  <li v-for="(item, key2) in insights[field]" :key="key2"
+                    class="mb-2">
+                    <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>
-                  </li>
-                </ul>
-              </TabPanel>
-              <TabPanel header="Longest Trace" contentClass="text-sm">
-                <p v-if="insights.longest_traces.length === 0">No data</p>
-                <ul v-else class="list-disc ml-6 space-y-1">
-                  <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>
-                  </li>
-                </ul>
-              </TabPanel>
-              <TabPanel header="Most Frequent Trace" contentClass="text-sm">
-                <ul v-if="insights.most_freq_traces.length === 0">
-                  <li >No data</li>
-                </ul>                
-                <ul v-else class="list-disc ml-6 space-y-1">
-                  <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>
                   </li>
                 </ul>
@@ -217,6 +217,15 @@ import { getTimeLabel } from '@/module/timeLabel.js';
 import getMoment from 'moment';
 import i18next from '@/i18n/i18n';
 
+const fieldNamesAndLabelNames = [
+['self_loops', 'Self-Loop'],
+['short_loops', 'Short-Loop'],
+['shortest_traces', 'Shortest Trace'],
+['longest_traces', 'Longest Trace'],
+['most_freq_traces', 'Most Frequent Trace'],
+];
+// 刪除第一個和第二個元素
+fieldNamesAndLabelNames.splice(0, 2);
 export default {
   props:{
     sidebarState: {
@@ -240,6 +249,7 @@ export default {
     return {
       currentMapFile,
       i18next,
+      fieldNamesAndLabelNames,
     };
   },
   data() {