reset map trace button

src/components/Discover/Map/SidebarState.vue

@@ -157,13 +157,17 @@
         </ul>
       </div>
       <div>
-        <ul class="text-neutral-500 grid grid-cols-2 gap-2 text-center text-sm font-medium mb-2">
+        <ul class="trace-buttons text-neutral-500 grid grid-cols-2 gap-2 text-center text-sm font-medium mb-2">
           <li class="border border-neutral-500 rounded p-2 cursor-pointer hover:text-primary hover:border-primary hover:duration-500" @click="onActiveTraceClick(0)" :class="activeTrace === 0? 'text-primary border-primary':''">Self-Loop</li>
           <li class="border border-neutral-500 rounded p-2 cursor-pointer hover:text-primary hover:border-primary hover:duration-500" @click="onActiveTraceClick(1)" :class="activeTrace === 1? 'text-primary border-primary':''">Short-Loop</li>
           <li class="border border-neutral-500 rounded p-2 cursor-pointer hover:text-primary hover:border-primary hover:duration-500" @click="onActiveTraceClick(2)" :class="activeTrace === 2? 'text-primary border-primary':''">Shortest Trace</li>
           <li class="border border-neutral-500 rounded p-2 cursor-pointer hover:text-primary hover:border-primary hover:duration-500" @click="onActiveTraceClick(3)" :class="activeTrace === 3? 'text-primary border-primary':''">Longest Trace</li>
           <li class="border border-neutral-500 rounded p-2 cursor-pointer hover:text-primary hover:border-primary hover:duration-500" @click="onActiveTraceClick(4)" :class="activeTrace === 4? 'text-primary border-primary':''">Most Frequent Trace</li>
         </ul>
+        <div class="reset-trace-button underline text-[#4E5969] text-[14px] flex justify-end cursor-pointer
+          font-semibold" @click="onResetTraceBtnClick">
+          {{ i18next.t("Map.Reset") }}
+        </div>
         <div>
           <TabView ref="tabview2" v-model:activeIndex="activeTrace">
               <TabPanel header="Self-loop" contentClass="text-sm">
@@ -267,18 +271,23 @@ export default {
 
     const activeTrace = ref(0);
     const currentMapFile = computed(() => pageAdmin.currentMapFile);
-    const clickedPathListIndex = ref(0);
+    const clickedPathListIndex = ref(undefined);
 
     const onActiveTraceClick = (clickedActiveTraceIndex) => {
       mapPathStore.clearAllHighlight();
       activeTrace.value = clickedActiveTraceIndex;
       mapPathStore.highlightClickedPath(clickedActiveTraceIndex, clickedPathListIndex.value);
     }
+
     const onPathOptionClick = (clickedPath) => {
       clickedPathListIndex.value = clickedPath;
       mapPathStore.highlightClickedPath(activeTrace.value, clickedPathListIndex.value);
     };
 
+    const onResetTraceBtnClick = () => {
+      clickedPathListIndex.value = undefined;
+    }
+
     return {
       currentMapFile,
       i18next,
@@ -286,7 +295,9 @@ export default {
       clickedPathListIndex,
       onPathOptionClick,
       onActiveTraceClick,
+      onResetTraceBtnClick,
       activeTrace,
+      i18next,
     };
   },
   data() {

src/i18n/en.json

@@ -12,7 +12,8 @@
         "Confirm": "Confirm"
     },
     "Map":{
-        "FileName": "File Name"
+        "FileName": "File Name",
+        "Reset": "Reset"
     },
     "AcctMgmt":{
         "hi": "Hi, ",
@@ -85,6 +86,5 @@
         "PleaseCheckTimeRange": "Please check time range setting.",
         "PleaseSetNewRule": "Please set the new rule.",
         "RuleApplied": "Rule applied."
-
     }
 }

src/module/cytoscapeMap.js

@@ -183,7 +183,7 @@ export default function cytoscapeMap(mapData, dataLayerType, dataLayerOption, cu
           'height': 'data(height)',
           'width': 'data(width)',
           'color': 'data(textColor)',
-          'line-height': '1',
+          'line-height': '0.8rem',
           'font-size':
           function(node) {
             return node.data('type') === 'activity' ? 16 : 14;
@@ -234,7 +234,7 @@ export default function cytoscapeMap(mapData, dataLayerType, dataLayerOption, cu
           //'control-point-step-size':100, // 從點到點的垂直線，指定貝茲取線邊緣間的距離
           'width':'data(lineWidth)',
           'line-style':'data(style)',
-          "text-margin-y": "0.9rem",
+          "text-margin-y": "0.7rem",
           //"text-rotation": "autorotate",
         }
       },{