From 27d11997bd4db3d7672df0033470ae8c2cf130e4 Mon Sep 17 00:00:00 2001
From: Cindy Chang <cindy.chang@dsp.im>
Date: Mon, 19 Aug 2024 14:29:43 +0800
Subject: [PATCH] insight path blue radio button

---
 src/components/Discover/Map/SidebarState.vue | 70 ++++++++++++++------
 1 file changed, 51 insertions(+), 19 deletions(-)

diff --git a/src/components/Discover/Map/SidebarState.vue b/src/components/Discover/Map/SidebarState.vue
index b4ae4cf..d17ac56 100644
--- a/src/components/Discover/Map/SidebarState.vue
+++ b/src/components/Discover/Map/SidebarState.vue
@@ -187,19 +187,44 @@
                   </li>
                 </ul>
               </TabPanel>
-              <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">
+              <TabPanel v-for="([field, label], i) in fieldNamesAndLabelNames" :key="i" :header="label"
+                contentClass="text-sm">
+                <p v-if="insights[field].length === 0" class="bg-neutral-100 p-2 rounded">No data</p>
+                <ul v-else class="ml-1 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>
-                    </span>
+                    class="mb-2 flex bg-neutral-100 p-2 rounded">
+                    <div class="flex left-col mr-1">
+                      <input type="radio" name="customRadio" :value="key2" v-model="selectedPath"
+                        class="hidden peer" @click="onPathOptionClick(key2)"
+                      />
+                      <span @click="onPathOptionClick(key2)"
+                      :class="[
+                        'w-[18px] h-[18px] rounded-full border-2 inline-flex items-center justify-center cursor-pointer bg-[#FFFFFF]',
+                        selectedPath === key2
+                          ? 'border-[#0099FF]'
+                          : 'border-[#CBD5E1]'
+                        ]"
+                        >
+                        <div
+                          :class="[
+                            'w-[9px] h-[9px] rounded-full transition-opacity cursor-pointer',
+                            selectedPath === key2
+                              ? 'bg-[#0099FF]'
+                              : 'opacity-0'
+                          ]"
+                        ></div>
+                      </span>
+                    </div>
+                    <div class="right-col">
+                      <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>
+                    </div>
                   </li>
                 </ul>
               </TabPanel>
@@ -211,18 +236,18 @@
 </template>
 
 <script>
-import { computed, } from 'vue';
+import { computed, ref, } from 'vue';
 import PageAdmin from '@/stores/pageAdmin';
 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'],
+  ['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);
@@ -245,11 +270,18 @@ export default {
     const pageAdmin = PageAdmin();
 
     const currentMapFile = computed(() => pageAdmin.currentMapFile);
+    const selectedPath = ref(0);
+
+    const onPathOptionClick = (clickedPath) => {
+      selectedPath.value = clickedPath;
+    };
 
     return {
       currentMapFile,
       i18next,
       fieldNamesAndLabelNames,
+      selectedPath,
+      onPathOptionClick,
     };
   },
   data() {
@@ -323,7 +355,7 @@ export default {
   @apply hidden
 }
 :deep(.p-tabview-panels) {
-  @apply !bg-neutral-100 p-2 rounded
+  @apply p-2 rounded
 }
 :deep(.p-tabview-panel) {
   @apply animate-fadein