fix: dotted solid edge style bug

src/module/cytoscapeMap.js

@@ -192,7 +192,7 @@ export default function cytoscapeMap(mapData, dataLayerType, dataLayerOption, cu
           'color': 'gray', //#0066cc
           //'control-point-step-size':100, // 從點到點的垂直線，指定貝茲取線邊緣間的距離
           'width': 'data(lineWidth)',
-          'line-style': 'data(style)',
+          'line-style': 'data(edgeStyle)',
           "text-margin-y": "0.7rem",
           //"text-rotation": "autorotate",
         }

src/stores/mapPathStore.ts

@@ -265,7 +265,6 @@ export default defineStore('useMapPathStore', {
       clickedEdge.addClass('highlight-edge');
     },
     async highlightMostFrequentPath() {
-        console.log('highlightMostFrequentPath', this.insightWithPath['most_freq_traces'][0]);
       const LIST_INDEX = 0;
       this.insightWithPath['most_freq_traces'][LIST_INDEX].nodes.map(nodeToHighlight => {
         nodeToHighlight.data('nodeImageUrl', ImgCapsulesGlow[nodeToHighlight.data('level')]);

src/views/Discover/Map/Map.vue

@@ -1,22 +1,29 @@
 <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="sidebarLeftValue? 'bg-neutral-50':''">
+  <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-50' : ''">
     <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-50 drop-shadow
-        hover:border-primary" @click="sidebarView = !sidebarView" :class="{'border-primary': sidebarView}" v-tooltip="tooltip.sidebarView">
+        hover:border-primary" @click="sidebarView = !sidebarView" :class="{ 'border-primary': sidebarView }"
-        <span class="material-symbols-outlined !text-2xl hover:text-primary p-1.5" :class="[sidebarView ? 'text-primary' : 'text-neutral-500']">
+        v-tooltip="tooltip.sidebarView">
+        <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-50 drop-shadow
-        hover:border-primary" @click="sidebarFilter = !sidebarFilter" :class="{'border-primary': sidebarFilter}" v-tooltip="tooltip.sidebarFilter">
+        hover:border-primary" @click="sidebarFilter = !sidebarFilter" :class="{ 'border-primary': sidebarFilter }"
-        <span class="material-symbols-outlined !text-2xl hover:text-primary p-1.5" :class="[sidebarFilter ? 'text-primary' : 'text-neutral-500']" id="iconFilter">
+        v-tooltip="tooltip.sidebarFilter">
+        <span class="material-symbols-outlined !text-2xl hover:text-primary p-1.5"
+          :class="[sidebarFilter ? 'text-primary' : 'text-neutral-500']" id="iconFilter">
           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-50
-        drop-shadow hover:border-primary"  @click="sidebarTraces = !sidebarTraces" :class="{'border-primary': sidebarTraces}" v-tooltip="tooltip.sidebarTraces">
+        drop-shadow hover:border-primary" @click="sidebarTraces = !sidebarTraces"
-        <span class="material-symbols-outlined !text-2xl hover:text-primary p-1.5" :class="[sidebarTraces ? 'text-primary' : 'text-neutral-500']">
+        :class="{ 'border-primary': sidebarTraces }" v-tooltip="tooltip.sidebarTraces">
+        <span class="material-symbols-outlined !text-2xl hover:text-primary p-1.5"
+          :class="[sidebarTraces ? 'text-primary' : 'text-neutral-500']">
           rebase
         </span>
       </li>
@@ -43,10 +50,11 @@
   </div>
 
   <!-- Sidebar Model -->
-  <SidebarView v-model:visible="sidebarView" @switch-map-type="switchMapType" @switch-curve-styles="switchCurveStyles" @switch-rank="switchRank"
+  <SidebarView v-model:visible="sidebarView" @switch-map-type="switchMapType" @switch-curve-styles="switchCurveStyles"
-    @switch-data-layer-type="switchDataLayerType" ></SidebarView>
+    @switch-rank="switchRank" @switch-data-layer-type="switchDataLayerType"></SidebarView>
   <SidebarState v-model:visible="sidebarState" :insights="insights" :stats="stats"></SidebarState>
-  <SidebarTraces v-model:visible="sidebarTraces" :cases="cases" @switch-Trace-Id="switchTraceId" ref="tracesView"></SidebarTraces>
+  <SidebarTraces v-model:visible="sidebarTraces" :cases="cases" @switch-Trace-Id="switchTraceId" ref="tracesView">
+  </SidebarTraces>
   <SidebarFilter v-model:visible="sidebarFilter" :filterTasks="filterTasks" :filterStartToEnd="filterStartToEnd"
     :filterEndToStart="filterEndToStart" :filterTimeframe="filterTimeframe" :filterTrace="filterTrace"
     @submit-all="createCy(mapType)" @switch-Trace-Id="switchTraceId" ref="sidevarFilterRef"></SidebarFilter>
@@ -113,7 +121,8 @@ export default {
     });
 
 
-    return { isLoading, processMap, bpmn, stats, insights, traceId, traces, baseTraces,
+    return {
+      isLoading, processMap, bpmn, stats, insights, traceId, traces, baseTraces,
       baseTraceId, filterTasks, filterStartToEnd, filterEndToStart, filterTimeframe,
       filterTrace, logId, baseLogId, createFilterId, temporaryData, isRuleData,
       ruleData, allMapDataStore, cases, postRuleData,
@@ -154,6 +163,8 @@ export default {
       sidebarTraces: false, // SideBar: Traces
       sidebarFilter: false, // SideBar: Filter
       infiniteFirstCases: null,
+      startNodeId: -1,
+      endNodeId: -1,
       tooltip: {
         sidebarView: {
           value: 'Visualization Setting',
@@ -324,8 +335,14 @@ export default {
             break;
           // add type of 'event' node
           case 'event':
-            if(node.event_type === 'start') mapData.startId = node.id;
+            if (node.event_type === 'start') {
-            else if(node.event_type === 'end') mapData.endId = node.id;
+              mapData.startId = node.id;
+              this.startNodeId = node.id;
+            }
+            else if (node.event_type === 'end') {
+              mapData.endId = node.id;
+              this.endNodeId = node.id;
+            }
 
             mapData.nodes.push({
               data: {
@@ -391,7 +408,8 @@ export default {
             target: edge.head,
             freq: edge.freq,
             duration: edge.duration === null ? logDuration : edge.duration,
-            style:'dotted',
+            // Don't know why but tail is related to start and head is related to end
+            edgeStyle: edge.tail === this.startNodeId || edge.head === this.endNodeId ? 'dotted' : 'solid',
             lineWidth: 1,
           },
         });