diff --git a/src/components/Discover/sidebarState.vue b/src/components/Discover/sidebarState.vue
new file mode 100644
index 0000000..56f31da
--- /dev/null
+++ b/src/components/Discover/sidebarState.vue
@@ -0,0 +1,264 @@
+<template>
+  <Sidebar :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'">
+    <!-- <div> -->
+      <!-- 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> -->
+      <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" class="text-neutral-900">,&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" 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>
+            </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" class="text-neutral-900">,&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 class="material-symbols-outlined text-lg align-sub text-neutral-900">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>
+      </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>
+        <div>
+          <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 class="material-symbols-outlined text-lg align-sub">arrow_forward</span>&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 class="material-symbols-outlined text-lg align-sub">arrow_forward</span>&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 class="material-symbols-outlined text-lg align-sub">arrow_forward</span>&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 class="material-symbols-outlined text-lg align-sub">arrow_forward</span>&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 class="material-symbols-outlined text-lg align-sub">arrow_forward</span>&nbsp;</span>
+                    </span>
+                  </li>
+                </ul>
+              </TabPanel>
+          </TabView>
+        </div>
+      </div>
+    </div>
+  </Sidebar>
+</template>
+<!-- @hide="hide" @show="show" -->
+
+<script>
+import getNumberLabel from '@/module/numberLabel.js';
+import getTimeLabel from '@/module/timeLabel.js';
+import getMoment from 'moment';
+
+export default {
+  props:{
+    sidebarState: {
+      type: Boolean,
+      require: false,
+    },
+    stats: {
+      type: Object,
+      required: false,
+    },
+    insights: {
+      type: Object,
+      required: false,
+    }
+  },
+  data() {
+    return {
+      tab: 'summary',
+      valueCases: 0,
+      valueTraces: 0,
+      valueTaskInstances: 0,
+      valueTasks: 0,
+      active1: 0,
+      nnnstats:this.stats
+    }
+  },
+  methods: {
+    /**
+     * switch Summary or Insight
+     */
+    switchTab(tab) {
+      this.tab = tab;
+    },
+    /**
+     * use timeLabel.js
+     */
+    timeLabel(time){
+      return getTimeLabel(time);
+    },
+    /**
+     * use moment
+     */
+    moment(time){
+      return getMoment(time).format('YYYY-MM-DD HH:mm');
+    },
+    /**
+     * use numberLabel.js
+     */
+    numberLabel(num){
+      return getNumberLabel(num);
+    },
+    /**
+     * Number to percentage
+     */
+    getPercentLabel(val){
+      if(val * 100 === 100) return `${val * 100}%`;
+      return `${(val * 100).toFixed(1)}%`;
+    },
+    /**
+     * Behavior when show
+     */
+    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;
+    },
+    /**
+     * Behavior when hidden
+     */
+    hide(){
+      this.valueCases = 0;
+      this.valueTraces=  0;
+      this.valueTaskInstances = 0;
+      this.valueTasks = 0;
+    },
+  },
+}
+</script>
+
+<style scoped>
+:deep .p-tabview-nav-container {
+  @apply hidden
+}
+:deep .p-tabview-panels {
+  @apply !bg-neutral-100 p-2 rounded
+}
+:deep .p-tabview-panel {
+  @apply animate-fadein
+}
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index 57ada47..9a144b0 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,4 +1,4 @@
-import { createRouter, createWebHistory, createWebHashHistory, useRoute, useRouter } from "vue-router";
+import { createRouter, createWebHistory, createWebHashHistory } from "vue-router";
 import AuthContainer from '@/views/AuthContainer.vue';
 import MainContainer from '@/views/MainContainer.vue';
 import Login from '@/views/Login/index.vue';
diff --git a/src/views/Discover/index.vue b/src/views/Discover/index.vue
index 07e3832..0e9948d 100644
--- a/src/views/Discover/index.vue
+++ b/src/views/Discover/index.vue
@@ -45,189 +45,10 @@
   </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>
+  <SidebarView v-model:visible="sidebarView" @switch-map-type="switchMapType" @switch-curve-styles="switchCurveStyles" @switch-rank="switchRank" @switch-data-layer-type="switchDataLayerType" ></SidebarView>
+  <SidebarState v-model:visible="sidebarState" :insights="insights" :stats="stats"></SidebarState>
 
-  <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>
 
 
 
@@ -238,10 +59,8 @@ import { storeToRefs } from 'pinia';
 import LoadingStore from '@/stores/loading.js';
 import AllMapDataStore from '@/stores/allMapData.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';
+import SidebarView from '@/components/Discover/sidebarView.vue';
+import SidebarState from '@/components/Discover/sidebarState.vue';
 
 export default {
   setup() {
@@ -260,7 +79,8 @@ export default {
     }
   },
   components: {
-    sidebarView,
+    SidebarView,
+    SidebarState,
   },
   data() {
     return {
@@ -283,43 +103,9 @@ export default {
       rank: 'LR', // 直向 TB | 橫向 LR
       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
@@ -509,16 +295,3 @@ export default {
   },
 }
 </script>
-
-<style>
-.p-progressbar .p-progressbar-value {
-  @apply bg-primary
-}
-.p-tabview-nav-container {
-  @apply hidden
-}
-.p-tabview-panels {
-  @apply !bg-neutral-100 p-2 rounded
-}
-
-</style>
diff --git a/tailwind.config.js b/tailwind.config.js
index 1a9ea65..991ca4f 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -46,6 +46,18 @@ module.exports = {
       // 'lg': '1024px',
       // 'xl': '1280px',
       '2xl': '1536px',
-    }
+    },
+    extend: {
+      keyframes: {
+        'fadein': {
+          '0%': { opacity: '0' },
+          '50%': { opacity: '0.5' },
+          '100%': { opacity: '1' },
+        },
+      },
+      animation: {
+        'fadein': 'fadein 1s ease-in-out',
+      },
+    },
   },
 };