Discover: sidebar insight done

src/assets/main.css

@@ -1,3 +1,4 @@
+@import './google.css';
 @import './components.css';
 @import './tailwind.css';
-@import './google.css';
+@import './primevue.css';

src/assets/primevue.css

@@ -0,0 +1,21 @@
+.p-sidebar-left {
+  @apply ml-14
+}
+.p-sidebar-mask {
+  height: calc(100vh - 104px) !important;
+  top: 104px !important;
+}
+.p-sidebar {
+  @apply !shadow-[1px_0px_4px_rgba(0,0,0,0.25)]
+}
+.p-sidebar-header {
+  @apply bg-neutral-200 border-b border-neutral-300 !py-2 !justify-between
+};
+
+.p-sidebar-right .p-sidebar-header {
+  @apply flex-row-reverse !justify-end text-neutral-500
+}
+
+.p-sidebar-right .p-sidebar {
+  @apply !shadow-[-1px_0px_4px_rgba(0,0,0,0.25)]
+}

src/components/Discover/sidebarView.vue

@@ -0,0 +1,169 @@
+<template>
+  <Sidebar :visible="sidebarView" :closeIcon="'pi pi-chevron-left'" :modal="false" position="left" :dismissable="true" >
+    <template #header>
+      <p class="h1">Visualization Setting</p>
+    </template>
+    <div>
+      <!-- View -->
+      <div class="my-4 border-b border-neutral-200">
+        <p class="h2">View</p>
+        <ul class="space-y-3 mb-4">
+          <!-- 選擇 bpmn / processmap button -->
+          <li class="btn-toggle-content">
+            <span class="btn-toggle-item" :class="mapType === 'processMap'?'btn-toggle-show  ':''" @click="switchMapType('processMap')">
+              Process map
+            </span>
+            <span class="btn-toggle-item" :class="mapType === 'bpmn'?'btn-toggle-show':''" @click="switchMapType('bpmn')">
+              BPMN Model
+            </span>
+          </li>
+          <!-- 選擇繪畫樣式 bezier / unbundled-bezier button-->
+          <li class="btn-toggle-content">
+            <span class="btn-toggle-item" :class="curveStyle === 'unbundled-bezier'?'btn-toggle-show  ':''" @click="switchCurveStyles('unbundled-bezier')">
+              Curved
+            </span>
+            <span class="btn-toggle-item" :class="curveStyle === 'taxi'?'btn-toggle-show':''" @click="switchCurveStyles('taxi')">
+              Elbow
+            </span>
+          </li>
+          <!-- 直向 TB | 橫向 LR -->
+          <li class="btn-toggle-content">
+            <span class="btn-toggle-item" :class="rank === 'LR'?'btn-toggle-show  ':''" @click="switchRank('LR')">
+              Horizontal
+            </span>
+            <span class="btn-toggle-item" :class="rank === 'TB'?'btn-toggle-show':''" @click="switchRank('TB')">
+              Vertical
+            </span>
+          </li>
+        </ul>
+      </div>
+      <!-- Data Layer -->
+      <div>
+        <p class="h2">Data Layer</p>
+        <ul class="space-y-2">
+          <li class="flex justify-between mb-3" @change="switchDataLayerType($event, 'freq')">
+            <div class="flex items-center w-1/2">
+              <input type="radio" id="freq" value="freq" name="dataLayer" class="peer hidden" checked/>
+              <label for="freq" class="inline-block h-4 w-4 m-2 cursor-pointer rounded-full ring-2 ring-neutral-300 shadow-sm peer-checked:ring-2 peer-checked:ring-primary peer-checked:ring-offset-2 peer-checked:bg-primary">
+              </label>
+              <span class="inline-block ml-2">Frequency</span>
+            </div>
+            <div class="w-1/2">
+              <select class="border border-neutral-500 rounded p-1 w-full focus-visible:outline-primary" :disabled="dataLayerType === 'duration'">
+                <option v-for="(freq, index) in selectFrequency" :key="index" :value="freq.value" :disabled="freq.disabled" :selected="freq.value === selectedFreq">{{ freq.label }}</option>
+              </select>
+            </div>
+          </li>
+          <li class="flex justify-between mb-3" @change="switchDataLayerType($event, 'duration')">
+            <div class="flex items-center w-1/2">
+              <input type="radio" id="duration" value="duration" name="dataLayer" class="peer hidden" />
+              <label for="duration" class="inline-block h-4 w-4 m-2 cursor-pointer rounded-full ring-2 ring-neutral-300 shadow-sm peer-checked:ring-2 peer-checked:ring-primary peer-checked:ring-offset-2 peer-checked:bg-primary"></label>
+              <span class="inline-block ml-2">Duration</span>
+            </div>
+            <div class="w-1/2">
+              <select class="border border-neutral-500 rounded p-1 w-full focus-visible:outline-primary" :disabled="dataLayerType === 'freq'">
+                <option v-for="(duration, index) in selectDuration" :key="index" :value="duration.value" :disabled="duration.disabled" :selected="duration.value === selectedDuration">{{ duration.label }}</option>
+              </select>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <!-- 測試用 -->
+      <li class="mt-20">curve style: {{ curveStyle }}</li>
+      <li >map type:  {{ mapType }}</li>
+      <li >rank: {{ rank }}</li>
+      <li >Data Layer Type: {{ dataLayerType }}</li>
+      <li >Data Layer Option: {{ dataLayerOption }}</li>
+  </Sidebar>
+</template>
+
+<script>
+export default {
+  props: {
+    sidebarView: {
+      type: Boolean,
+      require: true,
+    },
+  },
+  data() {
+    return {
+      selectFrequency: [
+        { value:"total", label:"Total", disabled:false, },
+        { value:"rel_freq", label:"Relative", disabled:false, },
+        { value:"average", label:"Average", disabled:false, },
+        { value:"median", label:"Median", disabled:false, },
+        { value:"max", label:"Max", disabled:false, },
+        { value:"min", label:"Min", disabled:false, },
+        { value:"cases", label:"Number of cases", disabled:false, },
+      ],
+      selectDuration:[
+        { value:"total", label:"Total", disabled:false, },
+        { value:"rel_duration", label:"Relative", disabled:false, },
+        { value:"average", label:"Average", disabled:false, },
+        { value:"median", label:"Median", disabled:false, },
+        { value:"max", label:"Max", disabled:false, },
+        { value:"min", label:"Min", disabled:false, },
+      ],
+      curveStyle:'unbundled-bezier', // unbundled-bezier | taxi
+      mapType: 'processMap', // processMap | bpmn
+      dataLayerType: 'freq', // freq | duration
+      dataLayerOption: 'total',
+      selectedFreq: '',
+      selectedDuration: '',
+      rank: 'LR', // 直向 TB | 橫向 LR
+    }
+  },
+  methods: {
+    /**
+     * switch map type
+     * @param {string} type processMap | bpmn
+     */
+     switchMapType(type) {
+       this.mapType = type;
+       this.$emit('switch-map-type', this.mapType);
+    },
+    /**
+     * switch curve style
+     * @param {string} style 直角 unbundled-bezier | taxi
+     */
+    switchCurveStyles(style) {
+      this.curveStyle = style;
+      this.$emit('switch-curve-styles', this.curveStyle);
+    },
+    /**
+     * switch rank
+     * @param {string} rank 直向 TB | 橫向 LR
+     */
+    switchRank(rank) {
+      this.rank = rank;
+      this.$emit('switch-rank', this.rank);
+    },
+    /**
+     * switch Data Layoer Type or Option.
+     * @param {string} e
+     * @param {string} type freq | duration
+     */
+    switchDataLayerType(e, type){
+      let value = e.target.type === 'select-one'? e.target.value: 'total';
+
+      switch (type) {
+        case 'freq':
+          this.dataLayerType = type;
+          this.dataLayerOption = value;
+          this.selectedFreq = value;
+          break;
+
+        case 'duration':
+          this.dataLayerType = type;
+          this.dataLayerOption = value;
+          this.selectedDuration = value;
+          break;
+      };
+
+      this.$emit('switch-data-layer-type', this.dataLayerType, this.dataLayerOption);
+    },
+  }
+
+}
+</script>

src/main.js

@@ -23,6 +23,10 @@ import 'primeicons/primeicons.css'; //icons
 import Sidebar from 'primevue/sidebar';
 import Button from 'primevue/button';
 import Dropdown from 'primevue/dropdown';
+import Tag from 'primevue/tag';
+import ProgressBar from 'primevue/progressbar';
+import TabView from 'primevue/tabview';
+import TabPanel from 'primevue/tabpanel';
 
 const emitter = mitt();
 const app = createApp(App);
@@ -53,5 +57,9 @@ app.use(PrimeVue);
 app.component('Sidebar', Sidebar);
 app.component('Button', Button);
 app.component('Dropdown', Dropdown);
+app.component('Tag', Tag);
+app.component('ProgressBar', ProgressBar);
+app.component('TabView', TabView);
+app.component('TabPanel', TabPanel);
 
 app.mount("#app");

src/module/numberLabel.js

@@ -0,0 +1,10 @@
+/**
+ * 將數字轉換成帶有逗號格式(ex: 1000 -> 1,000)
+ * @param {number} num
+ * @returns
+ */
+export default function numberLabel(num) {
+  var parts = num.toString().split('.');
+  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+  return parts.join('.');
+}

src/stores/allMapData.js

@@ -14,6 +14,8 @@ export default defineStore('allMapDataStore', {
     logId: null,
     allProcessMap: {},
     allBpmn: {},
+    allStats: {},
+    allInsights: {},
     httpStatus: 200,
   }),
   getters: {
@@ -22,6 +24,12 @@ export default defineStore('allMapDataStore', {
     },
     bpmn: state => {
       return state.allBpmn;
+    },
+    stats: state => {
+      return state.allStats;
+    },
+    insights: state => {
+      return state.allInsights;
     }
   },
   actions: {
@@ -36,6 +44,8 @@ export default defineStore('allMapDataStore', {
         const response = await this.$axios.get(api);
         this.allProcessMap = response.data.process_map;
         this.allBpmn = response.data.bpmn;
+        this.allStats = response.data.stats;
+        this.allInsights = response.data.insights;
 
         if(this.httpStatus < 300) loading.isLoading = false;
       } catch(error) {

src/views/Discover/index.vue

@@ -1,86 +1,8 @@
 <template>
-  <Sidebar v-model:visible="visibleLeft" :dismissable="true" :closeIcon="'pi pi-chevron-left'" :modal="false" position="left">
-    <template #header>
-      <p class="h1">Visualization Setting</p>
-    </template>
-    <div>
-      <!-- View -->
-      <div class="my-4 border-b border-neutral-200">
-        <p class="h2">View</p>
-        <ul class="space-y-3 mb-4">
-          <!-- 選擇 bpmn / processmap button -->
-          <li class="btn-toggle-content">
-            <span class="btn-toggle-item" :class="mapType === 'processMap'?'btn-toggle-show  ':''" @click="switchMapType('processMap')">
-              Process map
-            </span>
-            <span class="btn-toggle-item" :class="mapType === 'bpmn'?'btn-toggle-show':''" @click="switchMapType('bpmn')">
-              BPMN Model
-            </span>
-          </li>
-          <!-- 選擇繪畫樣式 bezier / unbundled-bezier button-->
-          <li class="btn-toggle-content">
-            <span class="btn-toggle-item" :class="curveStyle === 'unbundled-bezier'?'btn-toggle-show  ':''" @click="switchCurveStyles('unbundled-bezier')">
-              Curved
-            </span>
-            <span class="btn-toggle-item" :class="curveStyle === 'taxi'?'btn-toggle-show':''" @click="switchCurveStyles('taxi')">
-              Elbow
-            </span>
-          </li>
-          <!-- 直向 TB | 橫向 LR -->
-          <li class="btn-toggle-content">
-            <span class="btn-toggle-item" :class="rank === 'LR'?'btn-toggle-show  ':''" @click="switchRank('LR')">
-              Horizontal
-            </span>
-            <span class="btn-toggle-item" :class="rank === 'TB'?'btn-toggle-show':''" @click="switchRank('TB')">
-              Vertical
-            </span>
-          </li>
-        </ul>
-      </div>
-      <!-- Data Layer -->
-      <div>
-        <p class="h2">Data Layer</p>
-        <ul class="space-y-2">
-          <li class="flex justify-between mb-3" @change="switchDataLayerType($event, 'freq')">
-            <div class="flex items-center w-1/2">
-              <input type="radio" id="freq" value="freq" name="dataLayer" class="peer hidden" checked/>
-              <label for="freq" class="inline-block h-4 w-4 m-2 cursor-pointer rounded-full ring-2 ring-neutral-300 shadow-sm peer-checked:ring-2 peer-checked:ring-primary peer-checked:ring-offset-2 peer-checked:bg-primary">
-              </label>
-              <span class="inline-block ml-2">Frequency</span>
-            </div>
-            <div class="w-1/2">
-              <select class="border border-neutral-500 rounded p-1 w-full focus-visible:outline-primary" :disabled="dataLayerType === 'duration'">
-                <option v-for="(freq, index) in selectFrequency" :key="index" :value="freq.value" :disabled="freq.disabled" :selected="freq.value === selectedFreq">{{ freq.label }}</option>
-              </select>
-            </div>
-          </li>
-          <li class="flex justify-between mb-3" @change="switchDataLayerType($event, 'duration')">
-            <div class="flex items-center w-1/2">
-              <input type="radio" id="duration" value="duration" name="dataLayer" class="peer hidden" />
-              <label for="duration" class="inline-block h-4 w-4 m-2 cursor-pointer rounded-full ring-2 ring-neutral-300 shadow-sm peer-checked:ring-2 peer-checked:ring-primary peer-checked:ring-offset-2 peer-checked:bg-primary"></label>
-              <span class="inline-block ml-2">Duration</span>
-            </div>
-            <div class="w-1/2">
-              <select class="border border-neutral-500 rounded p-1 w-full focus-visible:outline-primary" :disabled="dataLayerType === 'freq'">
-                <option v-for="(duration, index) in selectDuration" :key="index" :value="duration.value" :disabled="duration.disabled" :selected="duration.value === selectedDuration">{{ duration.label }}</option>
-              </select>
-            </div>
-          </li>
-        </ul>
-      </div>
-    </div>
-    <!-- 測試用 -->
-      <li class="mt-20">curve style: {{ curveStyle }}</li>
-      <li >map type:  {{ mapType }}</li>
-      <li >rank: {{ rank }}</li>
-      <li >Data Layer Type: {{ dataLayerType }}</li>
-      <li >Data Layer Option: {{ dataLayerOption }}</li>
-</Sidebar>
-
-  <!-- Switch data type Sidebar -->
-  <div class="flex flex-col justify-between py-4 w-14 h-screen-main absolute bottom-0 left-0 z-10" :class="visibleLeft === true? 'bg-neutral-100':''">
+  <!-- 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':''">
     <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="visibleLeft = true">
+      <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">
         <span class="material-symbols-outlined text-2xl text-neutral-500">
           track_changes
         </span>
@@ -106,14 +28,15 @@
     </ul>
   </div>
 
-  <!-- cytoscapeMap -->
+  <!-- Cytoscape Map -->
   <div class="min-w-full h-screen-main bg-neutral-100 -z-40">
     <div id="cy" class="min-w-full h-screen-main "></div>
   </div>
 
+  <!-- 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">
+      <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">
         <span class="material-symbols-outlined text-2xl text-neutral-500">
           info
         </span>
@@ -121,6 +44,192 @@
     </ul>
   </div>
 
+  <!-- Sidebar Model -->
+  <sidebarView v-model:visible="sidebarView" @switch-map-type="switchMapType" @switch-curve-styles="switchCurveStyles" @switch-rank="switchRank" @switch-data-layer-type="switchDataLayerType" ></sidebarView>
+
+  <Sidebar v-model:visible="sidebarState" :closeIcon="'pi pi-angle-right'" :modal="false" position="right" :dismissable="true" class="!w-[360px]" @hide="hide" @show="show">
+    <template #header>
+      <ul class="flex space-x-4 pl-4">
+        <li class="h1 border-r-2 border-neutral-300 pr-4 cursor-pointer hover:text-neutral-900 hover:duration-700" @click="switchTab('summary')" :class="tab === 'summary'? 'text-neutral-900': ''">Summary</li>
+        <li class="h1 border-r-2 border-neutral-300 pr-4 cursor-pointer hover:text-neutral-900 hover:duration-700" @click="switchTab('insight')" :class="tab === 'insight'? 'text-neutral-900': ''">Insight</li>
+      </ul>
+    </template>
+    <div v-if="tab === 'summary'">
+      <!-- Stats -->
+      <ul class="pb-4 border-b border-neutral-300">
+        <li>
+          <p class="h2">Cases</p>
+          <div class="flex justify-between items-center">
+            <div class="w-full mr-8">
+              <span class="block text-sm">{{ numberLabel(stats.cases.count) }} / {{ numberLabel(stats.cases.total) }}</span>
+              <ProgressBar :value="valueCases" :showValue="false" class="!h-2 !rounded-full my-2"></ProgressBar>
+            </div>
+            <span class="block text-primary text-2xl font-medium">{{ getPercentLabel(stats.cases.ratio) }}</span>
+          </div>
+        </li>
+        <li>
+          <p class="h2">Traces</p>
+          <div class="flex justify-between items-center">
+            <div class="w-full mr-8">
+              <span class="block text-sm">{{ numberLabel(stats.traces.count) }} / {{ numberLabel(stats.traces.total) }}</span>
+              <ProgressBar :value="valueTraces" :showValue="false" class="!h-2 !rounded-full my-2"></ProgressBar>
+            </div>
+            <span class="block text-primary text-2xl font-medium">{{ getPercentLabel(stats.traces.ratio) }}</span>
+          </div>
+        </li>
+        <li>
+          <p class="h2">Activity Instances</p>
+          <div class="flex justify-between items-center">
+            <div class="w-full mr-8">
+              <span class="block text-sm">{{ numberLabel(stats.task_instances.count) }} / {{ numberLabel(stats.task_instances.total) }}</span>
+              <ProgressBar :value="valueTaskInstances" :showValue="false" class="!h-2 !rounded-full my-2"></ProgressBar>
+            </div>
+            <span class="block text-primary text-2xl font-medium">{{ getPercentLabel(stats.task_instances.ratio) }}</span>
+          </div>
+        </li>
+        <li>
+          <p class="h2">Activities</p>
+          <div class="flex justify-between items-center">
+            <div class="w-full mr-8">
+              <span class="block text-sm">{{ numberLabel(stats.tasks.count) }} / {{ numberLabel(stats.tasks.total) }}</span>
+              <ProgressBar :value="valueTasks" :showValue="false" class="!h-2 !rounded-full my-2"></ProgressBar>
+            </div>
+            <span class="block text-primary text-2xl font-medium">{{ getPercentLabel(stats.tasks.ratio) }}</span>
+          </div>
+        </li>
+      </ul>
+      <!-- Log Timeframe -->
+      <div class="pt-1 pb-4 border-b border-neutral-300">
+        <p class="h2">Log Timeframe</p>
+        <p><span class="px-4">{{ moment(stats.started_at
+  ) }}</span>~<span class="px-4">{{ moment(stats.completed_at
+  ) }}</span></p>
+      </div>
+      <!-- Case Duration -->
+      <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>
+          <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>
+        </ul>
+
+      </div>
+    </div>
+    <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">
+          <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">,&nbsp;</span>
+            </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">,&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">,&nbsp;</span>
+            </span>
+          </li>
+        </ul>
+        <p class="h2">Most time-consuming</p>
+        <ul class="list-disc ml-6 mb-4">
+          <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">,&nbsp;</span>
+            </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>
+              </span>
+              <span v-if="key !== insights.most_time_edges.length - 1">,&nbsp;</span>
+            </span>
+          </li>
+        </ul>
+      </div>
+      <div>
+        <ul class="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="active1 = 0" :class="active1 === 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="active1 = 1" :class="active1 === 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="active1 = 2" :class="active1 === 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="active1 = 3" :class="active1 === 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="active1 = 4" :class="active1 === 4? 'text-primary border-primary':''">Most Frequent Trace</li>
+        </ul>
+        <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>
+                  <span v-for="(value, key) in insights.self_loops" :key="key">
+                    {{ value }}
+                    <span v-if="key !== insights.self_loops.length -1">🡲&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>
+                <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>
+                  </span>
+                </li>
+              </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>
+                <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>
+                  </span>
+                </li>
+              </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>
+                <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>
+                  </span>
+                </li>
+              </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 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>
+                  </span>
+                </li>
+              </ul>
+            </TabPanel>
+        </TabView>
+      </div>
+    </div>
+  </Sidebar>
+
+
 
 </template>
 
@@ -128,22 +237,31 @@
 import { storeToRefs } from 'pinia';
 import LoadingStore from '@/stores/loading.js';
 import AllMapDataStore from '@/stores/allMapData.js';
-import cytoscapeMap from '@/module/cytoscapeMap.js' //
+import cytoscapeMap from '@/module/cytoscapeMap.js';
+import sidebarView from '@/components/Discover/sidebarView.vue';
+import getNumberLabel from '@/module/numberLabel.js';
+import getTimeLabel from '@/module/timeLabel.js';
+import getMoment from 'moment';
 
 export default {
   setup() {
     const loadingStore = LoadingStore();
     const allMapDataStore = AllMapDataStore();
     const { isLoading } = storeToRefs(loadingStore);
-    const { processMap, bpmn } = storeToRefs(allMapDataStore);
+    const { processMap, bpmn, stats, insights } = storeToRefs(allMapDataStore);
 
     return {
       isLoading,
       processMap,
       bpmn,
+      stats,
+      insights,
       allMapDataStore,
     }
   },
+  components: {
+    sidebarView,
+  },
   data() {
     return {
       processMapData: {
@@ -158,39 +276,56 @@ export default {
         nodes: [],
         edges: [],
       },
-      selectFrequency: [
-        { value:"total", label:"Total", disabled:false, },
-        { value:"rel_freq", label:"Relative", disabled:false, },
-        { value:"average", label:"Average", disabled:false, },
-        { value:"median", label:"Median", disabled:false, },
-        { value:"max", label:"Max", disabled:false, },
-        { value:"min", label:"Min", disabled:false, },
-        { value:"cases", label:"Number of cases", disabled:false, },
-      ],
-      selectDuration:[
-        { value:"total", label:"Total", disabled:false, },
-        { value:"rel_duration", label:"Relative", disabled:false, },
-        { value:"average", label:"Average", disabled:false, },
-        { value:"median", label:"Median", disabled:false, },
-        { value:"max", label:"Max", disabled:false, },
-        { value:"min", label:"Min", disabled:false, },
-      ],
       curveStyle:'unbundled-bezier', // unbundled-bezier | taxi
       mapType: 'processMap', // processMap | bpmn
       dataLayerType: 'freq', // freq | duration
       dataLayerOption: 'total',
-      selectedFreq: '',
-      selectedDuration: '',
       rank: 'LR', // 直向 TB | 橫向 LR
-      visibleLeft: false, // SideBar
+      sidebarView: false, // SideBar: Visualization Setting
+      sidebarState: false, // SideBar: Summary & Insight
+      tab: 'summary',
+      valueCases: 0,
+      valueTraces: 0,
+      valueTaskInstances: 0,
+      valueTasks: 0,
+      active1: 0
     }
   },
   methods: {
+    switchTab(tab) {
+      this.tab = tab;
+    },
+    timeLabel(time){
+      return getTimeLabel(time);
+    },
+    moment(time){
+      return getMoment(time).format('YYYY-MM-DD HH:mm');
+    },
+    numberLabel(num){
+      return getNumberLabel(num);
+    },
+    getPercentLabel(val){
+      if(val * 100 === 100) return `${val * 100}%`;
+      return `${(val * 100).toFixed(1)}%`;
+    },
+    show(){
+      this.valueCases = this.stats.cases.ratio * 100;
+      this.valueTraces=  this.stats.traces.ratio * 100;
+      this.valueTaskInstances = this.stats.task_instances.ratio * 100;
+      this.valueTasks = this.stats.tasks.ratio * 100;
+    },
+    hide(){
+      this.valueCases = 0;
+      this.valueTraces=  0;
+      this.valueTaskInstances = 0;
+      this.valueTasks = 0;
+    },
     /**
      * switch map type
      * @param {string} type processMap | bpmn
      */
     switchMapType(type) {
+      // console.log(type);
       this.mapType = type;
       this.createCy(type);
     },
@@ -215,23 +350,9 @@ export default {
      * @param {string} e
      * @param {string} type freq | duration
      */
-    switchDataLayerType(e, type){
-      let value = e.target.type === 'select-one'? e.target.value: 'total';
-
-      switch (type) {
-        case 'freq':
+    switchDataLayerType(type, option){
       this.dataLayerType = type;
-          this.dataLayerOption = value;
-          this.selectedFreq = value;
-          break;
-
-        case 'duration':
-          this.dataLayerType = type;
-          this.dataLayerOption = value;
-          this.selectedDuration = value;
-          break;
-      };
-
+      this.dataLayerOption = option;
       this.createCy(this.mapType);
     },
     /**
@@ -390,17 +511,14 @@ export default {
 </script>
 
 <style>
-.p-sidebar-left {
-  @apply ml-14
+.p-progressbar .p-progressbar-value {
+  @apply bg-primary
 }
-.p-sidebar-mask {
-  height: calc(100vh - 104px) !important;
-  top: 104px !important;
+.p-tabview-nav-container {
+  @apply hidden
 }
-.p-sidebar {
-  @apply !shadow-[1px_0px_4px_rgba(0,0,0,0.25)]
+.p-tabview-panels {
+  @apply !bg-neutral-100 p-2 rounded
 }
-.p-sidebar-header {
-  @apply bg-neutral-200 border-b border-neutral-300 !py-2 !justify-between
-};
+
 </style>