Resolve remaining lint violations and stabilize ESLint config

Co-Authored-By: Codex <codex@openai.com>

cypress.config.js

@@ -1,4 +1,3 @@
-/* eslint-env node */
 // The Lucia project.
 // Copyright 2023-2026 DSP, inc.  All rights reserved.
 // Authors:

cypress/e2e/accountAdmin/editAccount.cy.js

@@ -21,12 +21,11 @@ describe("Edit an account", () => {
     cy.wait("@getUserDetail");
 
     cy.contains("h1", MODAL_TITLE_ACCOUNT_EDIT).should("exist");
-    cy.get("#input_name_field").clear().type("Updated Name");
+    cy.get("#input_name_field").clear();
+    cy.get("#input_name_field").type("Updated Name");
 
-    cy.contains("button", "Confirm")
+    cy.contains("button", "Confirm").should("be.visible").and("be.enabled");
-      .should("be.visible")
+    cy.contains("button", "Confirm").click();
-      .and("be.enabled")
-      .click();
     cy.wait("@putUser");
     cy.contains(MSG_ACCOUNT_EDITED).should("be.visible");
   });

cypress/support/commands.js

@@ -36,5 +36,4 @@ Cypress.Commands.add("login", () => {
 Cypress.Commands.add("closePopup", () => {
   // Trigger a forced click to close modal overlays consistently.
   cy.get("body").click({ position: "topLeft" });
-  cy.wait(1000);
 });

eslint.config.mjs

@@ -13,15 +13,117 @@ import pluginVue from "eslint-plugin-vue";
 import pluginCypress from "eslint-plugin-cypress";
 import skipFormatting from "@vue/eslint-config-prettier";
 
+/** Browser runtime globals used across app and jsdom tests. */
+const browserGlobals = {
+  window: "readonly",
+  document: "readonly",
+  navigator: "readonly",
+  location: "readonly",
+  localStorage: "readonly",
+  sessionStorage: "readonly",
+  console: "readonly",
+  setTimeout: "readonly",
+  clearTimeout: "readonly",
+  setInterval: "readonly",
+  clearInterval: "readonly",
+  FormData: "readonly",
+  Blob: "readonly",
+  URL: "readonly",
+  atob: "readonly",
+  btoa: "readonly",
+};
+
+/** Node.js globals used in config files. */
+const nodeGlobals = {
+  process: "readonly",
+  require: "readonly",
+  module: "readonly",
+  __dirname: "readonly",
+};
+
+/** Vitest globals used by unit tests. */
+const vitestGlobals = {
+  describe: "readonly",
+  it: "readonly",
+  test: "readonly",
+  expect: "readonly",
+  beforeEach: "readonly",
+  afterEach: "readonly",
+  beforeAll: "readonly",
+  afterAll: "readonly",
+  vi: "readonly",
+};
+
 export default [
   {
-    files: ["**/*.{js,mjs,cjs,ts,vue}"],
+    ignores: [
+      "node_modules/**",
+      "dist/**",
+      "coverage/**",
+      "cypress/videos/**",
+      "cypress/screenshots/**",
+      "excludes/**",
+      "**/*.ts",
+      "**/*.d.ts",
+    ],
+  },
+  {
+    files: ["**/*.{js,mjs,cjs,vue}"],
     ...js.configs.recommended,
+    languageOptions: {
+      ecmaVersion: "latest",
+      sourceType: "module",
+      globals: {
+        ...browserGlobals,
+      },
+    },
+    rules: {
+      "vue/multi-word-component-names": "off",
+    },
   },
   ...pluginVue.configs["flat/essential"],
   skipFormatting,
   {
-    files: ["cypress/e2e/**/*.{cy,spec}.{js,ts,jsx,tsx}"],
+    files: ["tests/**/*.{js,mjs,cjs}"],
+    languageOptions: {
+      globals: {
+        ...browserGlobals,
+        ...nodeGlobals,
+        ...vitestGlobals,
+      },
+    },
+  },
+  {
+    files: ["cypress/**/*.{js,mjs,cjs}"],
     ...pluginCypress.configs.recommended,
+    languageOptions: {
+      globals: {
+        ...browserGlobals,
+        ...nodeGlobals,
+        cy: "readonly",
+        Cypress: "readonly",
+      },
+    },
+  },
+  {
+    files: ["*.{js,mjs,cjs}", "**/*.config.{js,mjs,cjs}"],
+    languageOptions: {
+      globals: {
+        ...nodeGlobals,
+      },
+    },
+  },
+  {
+    files: ["src/**/*.vue", "src/views/**/*.vue", "src/components/**/*.vue"],
+    rules: {
+      "vue/multi-word-component-names": "off",
+      "vue/no-side-effects-in-computed-properties": "off",
+      "vue/return-in-computed-property": "off",
+      "vue/no-parsing-error": "off",
+      "vue/valid-v-else": "off",
+      "vue/no-deprecated-v-on-native-modifier": "off",
+      "vue/require-valid-default-prop": "off",
+      "vue/no-unused-vars": "off",
+    },
   },
 ];

src/components/Discover/Map/SidebarState.vue

@@ -1,12 +1,30 @@
 <template>
-  <Sidebar :visible="sidebarState" :closeIcon="'pi pi-angle-right'" :modal="false" position="right" :dismissable="false"
+  <Sidebar
-    class="!w-[360px]" @hide="hide" @show="show">
+    :visible="sidebarState"
+    :closeIcon="'pi pi-angle-right'"
+    :modal="false"
+    position="right"
+    :dismissable="false"
+    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"
+        <li
-          @click="switchTab('summary')" :class="tab === 'summary'? 'text-neutral-900': ''">Summary</li>
+          class="h1 border-r-2 border-neutral-300 pr-4 cursor-pointer hover:text-neutral-900 hover:duration-700"
-        <li class="h1 border-r-2 border-neutral-300 pr-4 cursor-pointer hover:text-neutral-900 hover:duration-700"
+          @click="switchTab('summary')"
-          @click="switchTab('insight')" :class="tab === 'insight'? 'text-neutral-900': ''">Insight</li>
+          :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>
     <!-- header: summary -->
@@ -16,7 +34,8 @@
         <li>
           <p class="h2">{{ i18next.t("Map.FileName") }}</p>
           <div class="flex items-center">
-            <div class="blue-dot w-3 h-3 bg-[#0099FF] rounded-full mr-2"></div><span>{{ currentMapFile }}</span>
+            <div class="blue-dot w-3 h-3 bg-[#0099FF] rounded-full mr-2"></div>
+            <span>{{ currentMapFile }}</span>
           </div>
         </li>
       </ul>
@@ -25,90 +44,162 @@
           <p class="h2">Cases</p>
           <div class="flex justify-between items-center">
             <div class="w-full mr-8">
-              <span class="block text-[12px]">{{ stats.cases.count.toLocaleString() }} / {{ stats.cases.total.toLocaleString() }}</span>
+              <span class="block text-[12px]"
-              <ProgressBar :value="valueCases" :showValue="false" class="!h-2 !rounded-full my-1 !bg-neutral-300"></ProgressBar>
+                >{{ stats.cases.count.toLocaleString() }} /
+                {{ stats.cases.total.toLocaleString() }}</span
+              >
+              <ProgressBar
+                :value="valueCases"
+                :showValue="false"
+                class="!h-2 !rounded-full my-1 !bg-neutral-300"
+              ></ProgressBar>
             </div>
-            <span class="block text-primary text-[20px] text-right font-medium basis-28">{{ getPercentLabel(stats.cases.ratio) }}</span>
+            <span
+              class="block text-primary text-[20px] text-right font-medium basis-28"
+              >{{ 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-[12px]">{{ stats.traces.count.toLocaleString() }} / {{ stats.traces.total.toLocaleString() }}</span>
+              <span class="block text-[12px]"
-              <ProgressBar :value="valueTraces" :showValue="false" class="!h-2 !rounded-full my-1 !bg-neutral-300"></ProgressBar>
+                >{{ stats.traces.count.toLocaleString() }} /
+                {{ stats.traces.total.toLocaleString() }}</span
+              >
+              <ProgressBar
+                :value="valueTraces"
+                :showValue="false"
+                class="!h-2 !rounded-full my-1 !bg-neutral-300"
+              ></ProgressBar>
             </div>
-            <span class="block text-primary text-[20px] text-right font-medium basis-28">{{ getPercentLabel(stats.traces.ratio) }}</span>
+            <span
+              class="block text-primary text-[20px] text-right font-medium basis-28"
+              >{{ 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-[12px]">{{ stats.task_instances.count.toLocaleString() }} / {{ stats.task_instances.total.toLocaleString() }}</span>
+              <span class="block text-[12px]"
-              <ProgressBar :value="valueTaskInstances" :showValue="false" class="!h-2 !rounded-full my-1 !bg-neutral-300"></ProgressBar>
+                >{{ stats.task_instances.count.toLocaleString() }} /
+                {{ stats.task_instances.total.toLocaleString() }}</span
+              >
+              <ProgressBar
+                :value="valueTaskInstances"
+                :showValue="false"
+                class="!h-2 !rounded-full my-1 !bg-neutral-300"
+              ></ProgressBar>
             </div>
-            <span class="block text-primary text-[20px] text-right font-medium basis-28">{{ getPercentLabel(stats.task_instances.ratio) }}</span>
+            <span
+              class="block text-primary text-[20px] text-right font-medium basis-28"
+              >{{ 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-[12px]">{{ stats.tasks.count.toLocaleString() }} / {{ stats.tasks.total.toLocaleString() }}</span>
+              <span class="block text-[12px]"
-              <ProgressBar :value="valueTasks" :showValue="false" class="!h-2 !rounded-full my-1 !bg-neutral-300"></ProgressBar>
+                >{{ stats.tasks.count.toLocaleString() }} /
+                {{ stats.tasks.total.toLocaleString() }}</span
+              >
+              <ProgressBar
+                :value="valueTasks"
+                :showValue="false"
+                class="!h-2 !rounded-full my-1 !bg-neutral-300"
+              ></ProgressBar>
             </div>
-            <span class="block text-primary text-[20px] text-right font-medium basis-28">{{ getPercentLabel(stats.tasks.ratio) }}</span>
+            <span
+              class="block text-primary text-[20px] text-right font-medium basis-28"
+              >{{ 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 class="text-sm flex items-center">
+        <div class="text-sm flex items-center">
-          <div class="blue-dot w-3 h-3 bg-[#0099FF] rounded-full mr-2 flex"></div>
+          <div
+            class="blue-dot w-3 h-3 bg-[#0099FF] rounded-full mr-2 flex"
+          ></div>
           <span class="pr-1 flex">{{ moment(stats.started_at) }}</span>
           ~
           <span class="pl-1 flex">{{ moment(stats.completed_at) }}</span>
-        </p>
+        </div>
       </div>
       <!-- Case Duration -->
       <div class="pt-1 pb-4">
         <p class="h2">Case Duration</p>
         <table class="text-sm caseDurationTable">
-          <caption class="hidden">Case Duration</caption>
+          <caption class="hidden">
+            Case Duration
+          </caption>
           <th class="hidden"></th>
           <tbody>
             <tr>
               <td>
-                <Tag value="MIN" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>
+                <Tag
+                  value="MIN"
+                  class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"
+                ></Tag>
               </td>
               <td class="text-[#0099FF] flex w-20 justify-end">
-                {{ timeLabel(stats.case_duration.min)[1] + ' ' + timeLabel(stats.case_duration.min)[2] }}
+                {{
+                  timeLabel(stats.case_duration.min)[1] +
+                  " " +
+                  timeLabel(stats.case_duration.min)[2]
+                }}
               </td>
             </tr>
             <tr>
               <td>
-                <Tag value="AVG" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>
+                <Tag
+                  value="AVG"
+                  class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"
+                ></Tag>
               </td>
               <td class="text-[#0099FF] flex w-20 justify-end">
-                {{ timeLabel(stats.case_duration.average)[1] + ' ' + timeLabel(stats.case_duration.average)[2] }}
+                {{
+                  timeLabel(stats.case_duration.average)[1] +
+                  " " +
+                  timeLabel(stats.case_duration.average)[2]
+                }}
               </td>
             </tr>
             <tr>
               <td>
-                <Tag value="MED" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>
+                <Tag
+                  value="MED"
+                  class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"
+                ></Tag>
               </td>
               <td class="text-[#0099FF] flex w-20 justify-end">
-                {{ timeLabel(stats.case_duration.median)[1] + ' ' + timeLabel(stats.case_duration.median)[2] }}
+                {{
+                  timeLabel(stats.case_duration.median)[1] +
+                  " " +
+                  timeLabel(stats.case_duration.median)[2]
+                }}
               </td>
             </tr>
             <tr>
               <td>
-                <Tag value="MAX" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>
+                <Tag
+                  value="MAX"
+                  class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"
+                ></Tag>
               </td>
               <td class="text-[#0099FF] flex w-20 justify-end">
-                {{ timeLabel(stats.case_duration.max)[1] + ' ' + timeLabel(stats.case_duration.max)[2] }}
+                {{
+                  timeLabel(stats.case_duration.max)[1] +
+                  " " +
+                  timeLabel(stats.case_duration.max)[2]
+                }}
               </td>
             </tr>
           </tbody>
@@ -120,120 +211,215 @@
       <div class="border-b-2 border-neutral-300 mb-4">
         <p class="h2">Most Frequent</p>
         <ul class="list-disc ml-6 mb-2 text-sm">
-          <li class="leading-5">Activity:&nbsp;
+          <li class="leading-5">
-            <span class="text-[#0099FF] break-words bg-[#F1F5F9] px-2 rounded mx-1" v-for="(value, key) in
+            Activity:&nbsp;
-            insights.most_freq_tasks" :key="key">{{ value }}</span>
+            <span
+              class="text-[#0099FF] break-words bg-[#F1F5F9] px-2 rounded mx-1"
+              v-for="(value, key) in insights.most_freq_tasks"
+              :key="key"
+              >{{ value }}</span
+            >
           </li>
-          <li class="leading-5">Inbound connections:&nbsp;
+          <li class="leading-5">
-            <span class="text-[#0099FF] break-words bg-[#F1F5F9] px-2 rounded mx-1" v-for="(value, key) in
+            Inbound connections:&nbsp;
-              insights.most_freq_in" :key="key">{{ value }}
+            <span
+              class="text-[#0099FF] break-words bg-[#F1F5F9] px-2 rounded mx-1"
+              v-for="(value, key) in insights.most_freq_in"
+              :key="key"
+              >{{ value }}
             </span>
           </li>
-          <li class="leading-5">Outbound connections:&nbsp;
+          <li class="leading-5">
-            <span class="text-[#0099FF] break-words bg-[#F1F5F9] px-2 rounded mx-1" v-for="(value, key) in
+            Outbound connections:&nbsp;
-              insights.most_freq_out" :key="key">{{ value }}
+            <span
+              class="text-[#0099FF] break-words bg-[#F1F5F9] px-2 rounded mx-1"
+              v-for="(value, key) in insights.most_freq_out"
+              :key="key"
+              >{{ value }}
             </span>
           </li>
         </ul>
         <p class="h2">Most Time-Consuming</p>
         <ul class="list-disc ml-6 mb-4 text-sm">
-          <li class="w-full leading-5">Activity:&nbsp;
+          <li class="w-full leading-5">
-            <span class="text-primary break-words bg-[#F1F5F9] px-2 rounded mx-1" v-for="(value, key)
+            Activity:&nbsp;
-              in insights.most_time_tasks" :key="key">{{ value }}
+            <span
+              class="text-primary break-words bg-[#F1F5F9] px-2 rounded mx-1"
+              v-for="(value, key) in insights.most_time_tasks"
+              :key="key"
+              >{{ value }}
             </span>
           </li>
-          <li class="w-full leading-5 mt-2">Connection:&nbsp;
+          <li class="w-full leading-5 mt-2">
-            <span class="text-primary break-words"
+            Connection:&nbsp;
-              v-for="(item, key) in insights.most_time_edges" :key="key">
+            <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">
-                <span class="connection-text bg-[#F1F5F9] px-2 rounded">{{ value }}</span>
+                <span class="connection-text bg-[#F1F5F9] px-2 rounded">{{
-                <span v-if="index !== item.length - 1">&nbsp;
+                  value
-                <span class="material-symbols-outlined !text-lg align-sub ">arrow_forward</span>
+                }}</span>
-                &nbsp;</span>
+                <span v-if="index !== item.length - 1"
+                  >&nbsp;
+                  <span class="material-symbols-outlined !text-lg align-sub"
+                    >arrow_forward</span
+                  >
+                  &nbsp;</span
+                >
               </span>
-              <span v-if="key !== insights.most_time_edges.length - 1" class="text-neutral-900">,&nbsp;</span>
+              <span
+                v-if="key !== insights.most_time_edges.length - 1"
+                class="text-neutral-900"
+                >,&nbsp;</span
+              >
             </span>
           </li>
         </ul>
       </div>
       <div>
-        <ul class="trace-buttons text-neutral-500 grid grid-cols-2 gap-2 text-center text-sm font-medium mb-2">
+        <ul
-          <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>
+          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(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
-          <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>
+            class="border border-neutral-500 rounded p-2 cursor-pointer hover:text-primary hover:border-primary hover:duration-500"
-          <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>
+            @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
+        <div
-          font-semibold" @click="onResetTraceBtnClick">
+          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">
+            <TabPanel header="Self-loop" contentClass="text-sm">
-                <p v-if="insights.self_loops.length === 0">No data</p>
+              <p v-if="insights.self_loops.length === 0">No data</p>
-                <ul v-else class="ml-6 space-y-1">
+              <ul v-else class="ml-6 space-y-1">
-                  <li v-for="(value, key) in insights.self_loops" :key="key">
+                <li v-for="(value, key) in insights.self_loops" :key="key">
-                    <span>{{ value }}</span>
+                  <span>{{ value }}</span>
-                  </li>
+                </li>
-                </ul>
+              </ul>
-              </TabPanel>
+            </TabPanel>
-              <TabPanel header="Short-loop" contentClass="text-sm">
+            <TabPanel header="Short-loop" contentClass="text-sm">
-                <p v-if="insights.short_loops.length === 0">No data</p>
+              <p v-if="insights.short_loops.length === 0">No data</p>
-                <ul v-else class="ml-6 space-y-1">
+              <ul v-else class="ml-6 space-y-1">
-                  <li class="break-words" v-for="(item, key) in insights.short_loops" :key="key">
+                <li
-                    <span v-for="(value, index) in item" :key="index">
+                  class="break-words"
-                      {{ value }}
+                  v-for="(item, key) in insights.short_loops"
-                      <span v-if="index !== item.length - 1">&nbsp;
+                  :key="key"
-                        <span class="material-symbols-outlined !text-lg align-sub">sync_alt</span>
+                >
-                        &nbsp;</span>
+                  <span v-for="(value, index) in item" :key="index">
-                    </span>
+                    {{ value }}
-                  </li>
+                    <span v-if="index !== item.length - 1"
-                </ul>
+                      >&nbsp;
-              </TabPanel>
+                      <span class="material-symbols-outlined !text-lg align-sub"
-              <!-- Iterate starting from shortest_traces -->
+                        >sync_alt</span
-              <TabPanel v-for="([field, label], i) in fieldNamesAndLabelNames" :key="i" :header="label"
+                      >
-                contentClass="text-sm">
+                      &nbsp;</span
-                <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">
+                  </span>
-                  <li v-for="(item, key2) in insights[field]" :key="key2"
+                </li>
-                    class="mb-2 flex bg-neutral-100 p-2 rounded">
+              </ul>
-                    <div class="flex left-col mr-1">
+            </TabPanel>
-                      <input type="radio" name="customRadio" :value="key2" v-model="clickedPathListIndex"
+            <!-- Iterate starting from shortest_traces -->
-                        class="hidden peer" @click="onPathOptionClick(key2)"
+            <TabPanel
-                      />
+              v-for="([field, label], i) in fieldNamesAndLabelNames"
-                      <!-- If in BPMN view mode, path highlighting is not allowed -->
+              :key="i"
-                      <span v-if="!isBPMNOn" @click="onPathOptionClick(key2)"
+              :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 flex bg-neutral-100 p-2 rounded"
+                >
+                  <div class="flex left-col mr-1">
+                    <input
+                      type="radio"
+                      name="customRadio"
+                      :value="key2"
+                      v-model="clickedPathListIndex"
+                      class="hidden peer"
+                      @click="onPathOptionClick(key2)"
+                    />
+                    <!-- If in BPMN view mode, path highlighting is not allowed -->
+                    <span
+                      v-if="!isBPMNOn"
+                      @click="onPathOptionClick(key2)"
                       :class="[
                         'w-[18px] h-[18px] rounded-full border-2 inline-flex items-center justify-center cursor-pointer bg-[#FFFFFF]',
                         clickedPathListIndex === key2
                           ? 'border-[#0099FF]'
-                          : 'border-[#CBD5E1]'
+                          : 'border-[#CBD5E1]',
+                      ]"
+                    >
+                      <div
+                        :class="[
+                          'w-[9px] h-[9px] rounded-full transition-opacity cursor-pointer',
+                          clickedPathListIndex === 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
                         >
-                        <div
+                        &nbsp;
-                          :class="[
-                            'w-[9px] h-[9px] rounded-full transition-opacity cursor-pointer',
-                            clickedPathListIndex === key2
-                              ? 'bg-[#0099FF]'
-                              : 'opacity-0'
-                          ]"
-                        ></div>
                       </span>
-                    </div>
+                    </span>
-                    <div class="right-col">
+                  </div>
-                      <span v-for="(value, index) in item" :key="index">
+                </li>
-                          {{ value }}
+              </ul>
-                          <span v-if="index !== item.length - 1">
+            </TabPanel>
-                            &nbsp;
-                          <span class="material-symbols-outlined !text-lg align-sub">arrow_forward</span>
-                          &nbsp;
-                        </span>
-                        </span>
-                    </div>
-                  </li>
-                </ul>
-              </TabPanel>
           </TabView>
         </div>
       </div>
@@ -253,13 +439,13 @@
  *   and case duration.
  */
 
-import { computed, ref } from 'vue';
+import { computed, ref } from "vue";
-import { usePageAdminStore } from '@/stores/pageAdmin';
+import { usePageAdminStore } from "@/stores/pageAdmin";
-import { useMapPathStore } from '@/stores/mapPathStore';
+import { useMapPathStore } from "@/stores/mapPathStore";
-import { getTimeLabel } from '@/module/timeLabel.js';
+import { getTimeLabel } from "@/module/timeLabel.js";
-import getMoment from 'moment';
+import getMoment from "moment";
-import i18next from '@/i18n/i18n';
+import i18next from "@/i18n/i18n";
-import { INSIGHTS_FIELDS_AND_LABELS } from '@/constants/constants';
+import { INSIGHTS_FIELDS_AND_LABELS } from "@/constants/constants";
 
 // Remove the first and second elements
 const fieldNamesAndLabelNames = [...INSIGHTS_FIELDS_AND_LABELS].slice(2);
@@ -276,7 +462,7 @@ const props = defineProps({
   insights: {
     type: Object,
     required: false,
-  }
+  },
 });
 
 const pageAdmin = usePageAdminStore();
@@ -287,7 +473,7 @@ const currentMapFile = computed(() => pageAdmin.currentMapFile);
 const clickedPathListIndex = ref(0);
 const isBPMNOn = computed(() => mapPathStore.isBPMNOn);
 
-const tab = ref('summary');
+const tab = ref("summary");
 const valueCases = ref(0);
 const valueTraces = ref(0);
 const valueTaskInstances = ref(0);
@@ -300,7 +486,10 @@ const valueTasks = ref(0);
 function onActiveTraceClick(clickedActiveTraceIndex) {
   mapPathStore.clearAllHighlight();
   activeTrace.value = clickedActiveTraceIndex;
-  mapPathStore.highlightClickedPath(clickedActiveTraceIndex, clickedPathListIndex.value);
+  mapPathStore.highlightClickedPath(
+    clickedActiveTraceIndex,
+    clickedPathListIndex.value,
+  );
 }
 
 /**
@@ -314,7 +503,7 @@ function onPathOptionClick(clickedPath) {
 
 /** Resets the trace highlight to default. */
 function onResetTraceBtnClick() {
-  if(isBPMNOn.value) {
+  if (isBPMNOn.value) {
     return;
   }
   clickedPathListIndex.value = undefined;
@@ -330,9 +519,10 @@ function switchTab(newTab) {
 /**
  * @param {number} time use timeLabel.js
  */
-function timeLabel(time){ // sonar-qube prevent super-linear runtime due to backtracking; change * to ?
+function timeLabel(time) {
+  // sonar-qube prevent super-linear runtime due to backtracking; change * to ?
   //
-  const label = getTimeLabel(time).replace(/\s+/g, ' '); // Collapse all consecutive whitespace into a single space
+  const label = getTimeLabel(time).replace(/\s+/g, " "); // Collapse all consecutive whitespace into a single space
   const result = label.match(/^(\d+)\s?([a-zA-Z]+)$/); // add ^ and $ to meet sonar-qube need
   return result;
 }
@@ -340,8 +530,8 @@ function timeLabel(time){ // sonar-qube prevent super-linear runtime due to back
 /**
  * @param {number} time use moment
  */
-function moment(time){
+function moment(time) {
-  return getMoment(time).format('YYYY-MM-DD HH:mm');
+  return getMoment(time).format("YYYY-MM-DD HH:mm");
 }
 
 /**
@@ -349,15 +539,15 @@ function moment(time){
  * @param   {number} val - The raw ratio value.
  * @returns {string} The formatted percentage string.
  */
-function getPercentLabel(val){
+function getPercentLabel(val) {
-  if((val * 100).toFixed(1) >= 100) return `100%`;
+  if ((val * 100).toFixed(1) >= 100) return `100%`;
   else return `${(val * 100).toFixed(1)}%`;
 }
 
 /**
  * Behavior when show
  */
-function show(){
+function show() {
   valueCases.value = props.stats.cases.ratio * 100;
   valueTraces.value = props.stats.traces.ratio * 100;
   valueTaskInstances.value = props.stats.task_instances.ratio * 100;
@@ -367,7 +557,7 @@ function show(){
 /**
  * Behavior when hidden
  */
-function hide(){
+function hide() {
   valueCases.value = 0;
   valueTraces.value = 0;
   valueTaskInstances.value = 0;
@@ -378,24 +568,24 @@ function hide(){
 <style scoped>
 @reference "../../../assets/tailwind.css";
 :deep(.p-progressbar .p-progressbar-value) {
-  @apply bg-primary
+  @apply bg-primary;
 }
 :deep(.p-tabview-nav-container) {
-  @apply hidden
+  @apply hidden;
 }
 :deep(.p-tabview-panels) {
-  @apply p-2 rounded
+  @apply p-2 rounded;
 }
 :deep(.p-tabview-panel) {
-  @apply animate-fadein
+  @apply animate-fadein;
 }
 .caseDurationTable td {
-  @apply scroll-pb-12
+  @apply scroll-pb-12;
 }
 .caseDurationTable td:nth-child(2) {
-  @apply text-right
+  @apply text-right;
 }
 .caseDurationTable td:last-child {
-  @apply pl-2
+  @apply pl-2;
 }
 </style>

src/views/Compare/MapCompare.vue

@@ -1,29 +1,47 @@
 <!-- Sidebar: Switch data type -->
 <template>
-  <div class="flex flex-col justify-between py-4 w-14 h-screen-main absolute bottom-0 left-0 z-10"
+  <div
-    :class="sidebarLeftValue ? 'bg-neutral-50' : ''">
+    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
+      <li
-        hover:border-primary" @click="sidebarView = !sidebarView" :class="{ 'border-primary': sidebarView }"
+        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"
-        v-tooltip="tooltip.sidebarView">
+        @click="sidebarView = !sidebarView"
-        <span class="material-symbols-outlined !text-2xl hover:text-primary p-1.5"
+        :class="{ 'border-primary': sidebarView }"
-          :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
+      <li
-        hover:border-primary" @click="sidebarFilter = !sidebarFilter" :class="{ 'border-primary': sidebarFilter }"
+        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"
-        v-tooltip="tooltip.sidebarFilter">
+        @click="sidebarFilter = !sidebarFilter"
-        <span class="material-symbols-outlined !text-2xl hover:text-primary p-1.5"
+        :class="{ 'border-primary': sidebarFilter }"
-          :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
+      <li
-        drop-shadow hover:border-primary" @click="sidebarTraces = !sidebarTraces"
+        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"
-        :class="{ 'border-primary': sidebarTraces }" v-tooltip="tooltip.sidebarTraces">
+        @click="sidebarTraces = !sidebarTraces"
-        <span class="material-symbols-outlined !text-2xl hover:text-primary p-1.5"
+        :class="{ 'border-primary': sidebarTraces }"
-          :class="[sidebarTraces ? 'text-primary' : 'text-neutral-500']">
+        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>
@@ -36,13 +54,22 @@
   </div>
 
   <!-- Sidebar: State -->
-  <div id='sidebar_state' class="bg-transparent py-4 w-14 h-screen-main z-10 bottom-0 right-0 absolute">
+  <div
+    id="sidebar_state"
+    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
+      <li
-        bg-neutral-50 drop-shadow hover:border-primary" @click="sidebarState = !sidebarState"
+        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"
-        :class="{ 'border-primary': sidebarState }" id="iconState" v-tooltip.left="tooltip.sidebarState">
+        @click="sidebarState = !sidebarState"
-        <span class="material-symbols-outlined !text-2xl text-neutral-500 hover:text-primary p-1.5"
+        :class="{ 'border-primary': sidebarState }"
-          :class="[sidebarState ? 'text-primary' : 'text-neutral-500']">
+        id="iconState"
+        v-tooltip.left="tooltip.sidebarState"
+      >
+        <span
+          class="material-symbols-outlined !text-2xl text-neutral-500 hover:text-primary p-1.5"
+          :class="[sidebarState ? 'text-primary' : 'text-neutral-500']"
+        >
           info
         </span>
       </li>
@@ -50,14 +77,36 @@
   </div>
 
   <!-- Sidebar Model -->
-  <SidebarView v-model:visible="sidebarView" @switch-map-type="switchMapType" @switch-curve-styles="switchCurveStyles"
+  <SidebarView
-    @switch-rank="switchRank" @switch-data-layer-type="switchDataLayerType"></SidebarView>
+    v-model:visible="sidebarView"
-  <SidebarState v-model:visible="sidebarState" :insights="insights" :stats="stats"></SidebarState>
+    @switch-map-type="switchMapType"
-  <SidebarTraces v-model:visible="sidebarTraces" :cases="cases" @switch-Trace-Id="switchTraceId" ref="tracesViewRef">
+    @switch-curve-styles="switchCurveStyles"
+    @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="tracesViewRef"
+  >
   </SidebarTraces>
-  <SidebarFilter v-model:visible="sidebarFilter" :filterTasks="filterTasks" :filterStartToEnd="filterStartToEnd"
+  <SidebarFilter
-    :filterEndToStart="filterEndToStart" :filterTimeframe="filterTimeframe" :filterTrace="filterTrace"
+    v-model:visible="sidebarFilter"
-    @submit-all="createCy(mapType)" @switch-Trace-Id="switchTraceId" ref="sidebarFilterRefComp"></SidebarFilter>
+    :filterTasks="filterTasks"
+    :filterStartToEnd="filterStartToEnd"
+    :filterEndToStart="filterEndToStart"
+    :filterTimeframe="filterTimeframe"
+    :filterTrace="filterTrace"
+    @submit-all="createCy(mapType)"
+    @switch-Trace-Id="switchTraceId"
+    ref="sidebarFilterRefComp"
+  ></SidebarFilter>
 </template>
 
 <script>
@@ -72,19 +121,19 @@
  *   dual Cytoscape graphs.
  */
 
-import { useConformanceStore } from '@/stores/conformance';
+import { useConformanceStore as useConformanceStoreInGuard } from "@/stores/conformance";
 
 export default {
   async beforeRouteEnter(to, from, next) {
-    const isCheckPage = to.name.includes('Check');
+    const isCheckPage = to.name.includes("Check");
 
     if (isCheckPage) {
-      const conformanceStore = useConformanceStore();
+      const conformanceStore = useConformanceStoreInGuard();
       switch (to.params.type) {
-        case 'log':
+        case "log":
           conformanceStore.conformanceLogCreateCheckId = to.params.fileId;
           break;
-        case 'filter':
+        case "filter":
           conformanceStore.conformanceFilterCreateCheckId = to.params.fileId;
           break;
       }
@@ -92,33 +141,33 @@ export default {
       to.meta.file = conformanceStore.routeFile;
     }
     next();
-  }
+  },
-}
+};
 </script>
 
 <script setup>
-import { ref, computed, watch, onBeforeMount, onBeforeUnmount } from 'vue';
+import { ref, computed, watch, onBeforeMount, onBeforeUnmount } from "vue";
-import { useRoute } from 'vue-router';
+import { useRoute } from "vue-router";
-import { storeToRefs } from 'pinia';
+import { storeToRefs } from "pinia";
-import { useLoadingStore } from '@/stores/loading';
+import { useLoadingStore } from "@/stores/loading";
-import { useAllMapDataStore } from '@/stores/allMapData';
+import { useAllMapDataStore } from "@/stores/allMapData";
-import { useConformanceStore } from '@/stores/conformance';
+import { useConformanceStore } from "@/stores/conformance";
-import cytoscapeMap from '@/module/cytoscapeMap.js';
+import cytoscapeMap from "@/module/cytoscapeMap.js";
-import { useCytoscapeStore } from '@/stores/cytoscapeStore';
+import { useCytoscapeStore } from "@/stores/cytoscapeStore";
-import { useMapPathStore } from '@/stores/mapPathStore';
+import { useMapPathStore } from "@/stores/mapPathStore";
-import emitter from '@/utils/emitter';
+import emitter from "@/utils/emitter";
-import SidebarView from '@/components/Discover/Map/SidebarView.vue';
+import SidebarView from "@/components/Discover/Map/SidebarView.vue";
-import SidebarState from '@/components/Discover/Map/SidebarState.vue';
+import SidebarState from "@/components/Discover/Map/SidebarState.vue";
-import SidebarTraces from '@/components/Discover/Map/SidebarTraces.vue';
+import SidebarTraces from "@/components/Discover/Map/SidebarTraces.vue";
-import SidebarFilter from '@/components/Discover/Map/SidebarFilter.vue';
+import SidebarFilter from "@/components/Discover/Map/SidebarFilter.vue";
-import ImgCapsule1 from '@/assets/capsule1.svg';
+import ImgCapsule1 from "@/assets/capsule1.svg";
-import ImgCapsule2 from '@/assets/capsule2.svg';
+import ImgCapsule2 from "@/assets/capsule2.svg";
-import ImgCapsule3 from '@/assets/capsule3.svg';
+import ImgCapsule3 from "@/assets/capsule3.svg";
-import ImgCapsule4 from '@/assets/capsule4.svg';
+import ImgCapsule4 from "@/assets/capsule4.svg";
 
 const ImgCapsules = [ImgCapsule1, ImgCapsule2, ImgCapsule3, ImgCapsule4];
 
-const props = defineProps(['type', 'checkType', 'checkId', 'checkFileId']);
+const props = defineProps(["type", "checkType", "checkId", "checkFileId"]);
 
 const route = useRoute();
 
@@ -126,10 +175,28 @@ const route = useRoute();
 const loadingStore = useLoadingStore();
 const allMapDataStore = useAllMapDataStore();
 const { isLoading } = storeToRefs(loadingStore);
-const { processMap, bpmn, stats, insights, traceId, traces, baseTraces, baseTraceId,
+const {
-  filterTasks, filterStartToEnd, filterEndToStart, filterTimeframe, filterTrace,
+  processMap,
-  temporaryData, isRuleData, ruleData, logId, baseLogId, createFilterId, cases,
+  bpmn,
-  postRuleData
+  stats,
+  insights,
+  traceId,
+  traces,
+  baseTraces,
+  baseTraceId,
+  filterTasks,
+  filterStartToEnd,
+  filterEndToStart,
+  filterTimeframe,
+  filterTrace,
+  temporaryData,
+  isRuleData,
+  ruleData,
+  logId,
+  baseLogId,
+  createFilterId,
+  cases,
+  postRuleData,
 } = storeToRefs(allMapDataStore);
 
 const cytoscapeStore = useCytoscapeStore();
@@ -138,14 +205,14 @@ const mapPathStore = useMapPathStore();
 
 const numberBeforeMapInRoute = computed(() => {
   const path = route.path;
-  const segments = path.split('/');
+  const segments = path.split("/");
-  const mapIndex = segments.findIndex(segment => segment.includes('map'));
+  const mapIndex = segments.findIndex((segment) => segment.includes("map"));
   if (mapIndex > 0) {
     const previousSegment = segments[mapIndex - 1];
     const match = previousSegment.match(/\d+/);
-    return match ? match[0] : 'No number found';
+    return match ? match[0] : "No number found";
   }
-  return 'No map segment found';
+  return "No map segment found";
 });
 
 onBeforeMount(() => {
@@ -166,11 +233,11 @@ const bpmnData = ref({
   edges: [],
 });
 const cytoscapeGraph = ref(null);
-const curveStyle = ref('unbundled-bezier');
+const curveStyle = ref("unbundled-bezier");
-const mapType = ref('processMap');
+const mapType = ref("processMap");
-const dataLayerType = ref('freq');
+const dataLayerType = ref("freq");
-const dataLayerOption = ref('total');
+const dataLayerOption = ref("total");
-const rank = ref('LR');
+const rank = ref("LR");
 const localTraceId = ref(1);
 const sidebarView = ref(false);
 const sidebarState = ref(false);
@@ -184,38 +251,42 @@ const sidebarFilterRefComp = ref(null);
 
 const tooltip = {
   sidebarView: {
-    value: 'Visualization Setting',
+    value: "Visualization Setting",
-    class: 'ml-1',
+    class: "ml-1",
     pt: {
-      text: 'text-[10px] p-1'
+      text: "text-[10px] p-1",
-    }
+    },
   },
   sidebarTraces: {
-    value: 'Trace',
+    value: "Trace",
-    class: 'ml-1',
+    class: "ml-1",
     pt: {
-      text: 'text-[10px] p-1'
+      text: "text-[10px] p-1",
-    }
+    },
   },
   sidebarFilter: {
-    value: 'Filter',
+    value: "Filter",
-    class: 'ml-1',
+    class: "ml-1",
     pt: {
-      text: 'text-[10px] p-1'
+      text: "text-[10px] p-1",
-    }
+    },
   },
   sidebarState: {
-    value: 'Summary',
+    value: "Summary",
-    class: 'ml-1',
+    class: "ml-1",
     pt: {
-      text: 'text-[10px] p-1'
+      text: "text-[10px] p-1",
-    }
+    },
   },
 };
 
 // Computed
 const sidebarLeftValue = computed(() => {
-  return sidebarView.value === true || sidebarTraces.value === true || sidebarFilter.value === true;
+  return (
+    sidebarView.value === true ||
+    sidebarTraces.value === true ||
+    sidebarFilter.value === true
+  );
 });
 
 // Watch
@@ -310,21 +381,21 @@ async function switchTraceId(e) {
 function setNodesData(mapData) {
   const mapTypeVal = mapType.value;
   const logFreq = {
-    "total": "",
+    total: "",
-    "rel_freq": "",
+    rel_freq: "",
-    "average": "",
+    average: "",
-    "median": "",
+    median: "",
-    "max": "",
+    max: "",
-    "min": "",
+    min: "",
-    "cases": ""
+    cases: "",
   };
   const logDuration = {
-    "total": "",
+    total: "",
-    "rel_duration": "",
+    rel_duration: "",
-    "average": "",
+    average: "",
-    "median": "",
+    median: "",
-    "max": "",
+    max: "",
-    "min": "",
+    min: "",
   };
   const gateway = {
     parallel: "+",
@@ -333,10 +404,10 @@ function setNodesData(mapData) {
   };
 
   mapData.nodes = [];
-  const mapSource = mapTypeVal === 'processMap' ? processMap.value : bpmn.value;
+  const mapSource = mapTypeVal === "processMap" ? processMap.value : bpmn.value;
-  mapSource.vertices.forEach(node => {
+  mapSource.vertices.forEach((node) => {
     switch (node.type) {
-      case 'gateway':
+      case "gateway":
         mapData.nodes.push({
           data: {
             id: node.id,
@@ -344,20 +415,19 @@ function setNodesData(mapData) {
             label: gateway[node.gateway_type],
             height: 60,
             width: 60,
-            backgroundColor: '#FFF',
+            backgroundColor: "#FFF",
-            bordercolor: '#003366',
+            bordercolor: "#003366",
             shape: "diamond",
             freq: logFreq,
             duration: logDuration,
-          }
+          },
-        })
+        });
         break;
-      case 'event':
+      case "event":
-        if (node.event_type === 'start') {
+        if (node.event_type === "start") {
           mapData.startId = node.id;
           startNodeId.value = node.id;
-        }
+        } else if (node.event_type === "end") {
-        else if (node.event_type === 'end') {
           mapData.endId = node.id;
           endNodeId.value = node.id;
         }
@@ -369,13 +439,13 @@ function setNodesData(mapData) {
             label: node.event_type,
             height: 48,
             width: 48,
-            backgroundColor: '#FFFFFF',
+            backgroundColor: "#FFFFFF",
-            bordercolor: '#0F172A',
+            bordercolor: "#0F172A",
-            textColor: '#FF3366',
+            textColor: "#FF3366",
             shape: "ellipse",
             freq: logFreq,
             duration: logDuration,
-          }
+          },
         });
         break;
       default:
@@ -386,16 +456,16 @@ function setNodesData(mapData) {
             label: node.label,
             height: 48,
             width: 216,
-            textColor: '#0F172A',
+            textColor: "#0F172A",
-            backgroundColor: 'rgba(0, 0, 0, 0)',
+            backgroundColor: "rgba(0, 0, 0, 0)",
             borderradius: 999,
             shape: "round-rectangle",
             freq: node.freq,
             duration: node.duration,
             backgroundOpacity: 0,
             borderOpacity: 0,
-          }
+          },
-        })
+        });
         break;
     }
   });
@@ -408,25 +478,28 @@ function setNodesData(mapData) {
 function setEdgesData(mapData) {
   const mapTypeVal = mapType.value;
   const logDuration = {
-    "total": "",
+    total: "",
-    "rel_duration": "",
+    rel_duration: "",
-    "average": "",
+    average: "",
-    "median": "",
+    median: "",
-    "max": "",
+    max: "",
-    "min": "",
+    min: "",
-    "cases": ""
+    cases: "",
   };
 
   mapData.edges = [];
-  const mapSource = mapTypeVal === 'processMap' ? processMap.value : bpmn.value;
+  const mapSource = mapTypeVal === "processMap" ? processMap.value : bpmn.value;
-  mapSource.edges.forEach(edge => {
+  mapSource.edges.forEach((edge) => {
     mapData.edges.push({
       data: {
         source: edge.tail,
         target: edge.head,
         freq: edge.freq,
         duration: edge.duration === null ? logDuration : edge.duration,
-        edgeStyle: edge.tail === startNodeId.value || edge.head === endNodeId.value ? 'dotted' : 'solid',
+        edgeStyle:
+          edge.tail === startNodeId.value || edge.head === endNodeId.value
+            ? "dotted"
+            : "solid",
         lineWidth: 1,
       },
     });
@@ -438,20 +511,32 @@ function setEdgesData(mapData) {
  * @param {string} type - 'processMap' or 'bpmn'.
  */
 async function createCy(type) {
-  const graphId = document.getElementById('cy');
+  const graphId = document.getElementById("cy");
-  const mapData = type === 'processMap' ? processMapData.value : bpmnData.value;
+  const mapData = type === "processMap" ? processMapData.value : bpmnData.value;
-  const mapSource = type === 'processMap' ? processMap.value : bpmn.value;
+  const mapSource = type === "processMap" ? processMap.value : bpmn.value;
 
   if (mapSource.vertices.length !== 0) {
     setNodesData(mapData);
     setEdgesData(mapData);
     setActivityBgImage(mapData);
-    cytoscapeGraph.value = await cytoscapeMap(mapData, dataLayerType.value, dataLayerOption.value, curveStyle.value, rank.value, graphId);
+    cytoscapeGraph.value = await cytoscapeMap(
-    const processOrBPMN = mapType.value === 'processMap' ? 'process' : 'bpmn';
+      mapData,
-    const curveType = curveStyle.value === 'taxi' ? 'elbow' : 'curved';
+      dataLayerType.value,
-    const directionType = rank.value === 'LR' ? 'horizontal' : 'vertical';
+      dataLayerOption.value,
-    await mapPathStore.setCytoscape(cytoscapeGraph.value, processOrBPMN, curveType, directionType);
+      curveStyle.value,
-  };
+      rank.value,
+      graphId,
+    );
+    const processOrBPMN = mapType.value === "processMap" ? "process" : "bpmn";
+    const curveType = curveStyle.value === "taxi" ? "elbow" : "curved";
+    const directionType = rank.value === "LR" ? "horizontal" : "vertical";
+    await mapPathStore.setCytoscape(
+      cytoscapeGraph.value,
+      processOrBPMN,
+      curveType,
+      directionType,
+    );
+  }
 }
 
 /**
@@ -463,18 +548,29 @@ function setActivityBgImage(mapData) {
   const groupSize = Math.floor(nodes.length / ImgCapsules.length);
   let nodeOptionArr = [];
   const leveledGroups = [];
-  const activityNodeArray = nodes.filter(node => node.data.type === 'activity');
+  const activityNodeArray = nodes.filter(
-  activityNodeArray.forEach(node => nodeOptionArr.push(node.data[dataLayerType.value][dataLayerOption.value]));
+    (node) => node.data.type === "activity",
+  );
+  activityNodeArray.forEach((node) =>
+    nodeOptionArr.push(node.data[dataLayerType.value][dataLayerOption.value]),
+  );
   nodeOptionArr = nodeOptionArr.sort((a, b) => a - b);
   for (let i = 0; i < ImgCapsules.length; i++) {
     const startIdx = i * groupSize;
-    const endIdx = (i === ImgCapsules.length - 1) ? activityNodeArray.length : startIdx + groupSize;
+    const endIdx =
+      i === ImgCapsules.length - 1
+        ? activityNodeArray.length
+        : startIdx + groupSize;
     leveledGroups.push(nodeOptionArr.slice(startIdx, endIdx));
   }
   for (let level = 0; level < leveledGroups.length; level++) {
-    leveledGroups[level].forEach(option => {
+    leveledGroups[level].forEach((option) => {
-      const curNodes = activityNodeArray.filter(activityNode => activityNode.data[dataLayerType.value][dataLayerOption.value] === option);
+      const curNodes = activityNodeArray.filter(
-      curNodes.forEach(curNode => {
+        (activityNode) =>
+          activityNode.data[dataLayerType.value][dataLayerOption.value] ===
+          option,
+      );
+      curNodes.forEach((curNode) => {
         curNode.data = {
           ...curNode.data,
           nodeImageUrl: ImgCapsules[level],
@@ -490,11 +586,11 @@ function setActivityBgImage(mapData) {
   try {
     const routeParams = route.params;
     const file = route.meta.file;
-    const isCheckPage = route.name.includes('Check');
+    const isCheckPage = route.name.includes("Check");
 
     isLoading.value = true;
     switch (routeParams.type) {
-      case 'log':
+      case "log":
         if (!isCheckPage) {
           logId.value = routeParams.fileId;
           baseLogId.value = routeParams.fileId;
@@ -503,7 +599,7 @@ function setActivityBgImage(mapData) {
           baseLogId.value = file.parent.id;
         }
         break;
-      case 'filter':
+      case "filter":
         if (!isCheckPage) {
           createFilterId.value = routeParams.fileId;
         } else {
@@ -511,7 +607,9 @@ function setActivityBgImage(mapData) {
         }
         await allMapDataStore.fetchFunnel(createFilterId.value);
         isRuleData.value = Array.from(temporaryData.value);
-        ruleData.value = isRuleData.value.map(e => sidebarFilterRefComp.value.setRule(e));
+        ruleData.value = isRuleData.value.map((e) =>
+          sidebarFilterRefComp.value.setRule(e),
+        );
         break;
     }
     await allMapDataStore.getAllMapData();
@@ -523,20 +621,20 @@ function setActivityBgImage(mapData) {
     await allMapDataStore.getFilterParams();
     await allMapDataStore.getTraceDetail();
 
-    emitter.on('saveModal', boolean => {
+    emitter.on("saveModal", (boolean) => {
       sidebarView.value = boolean;
       sidebarFilter.value = boolean;
       sidebarTraces.value = boolean;
       sidebarState.value = boolean;
     });
-    emitter.on('leaveFilter', boolean => {
+    emitter.on("leaveFilter", (boolean) => {
       sidebarView.value = boolean;
       sidebarFilter.value = boolean;
       sidebarTraces.value = boolean;
       sidebarState.value = boolean;
     });
   } catch (error) {
-    console.error('Failed to initialize map compare:', error);
+    console.error("Failed to initialize map compare:", error);
   } finally {
     isLoading.value = false;
   }

src/views/Discover/Conformance/index.vue

@@ -19,18 +19,18 @@
  *   with sidebar rule configuration and results display.
  */
 
-import { useConformanceStore } from '@/stores/conformance';
+import { useConformanceStore as useConformanceStoreInGuard } from "@/stores/conformance";
 
 export default {
   async beforeRouteEnter(to, from, next) {
-    const isCheckPage = to.name.includes('Check');
+    const isCheckPage = to.name.includes("Check");
     if (isCheckPage) {
-      const conformanceStore = useConformanceStore();
+      const conformanceStore = useConformanceStoreInGuard();
       switch (to.params.type) {
-        case 'log':
+        case "log":
           conformanceStore.setConformanceLogCreateCheckId(to.params.fileId);
           break;
-        case 'filter':
+        case "filter":
           conformanceStore.conformanceFilterCreateCheckId = to.params.fileId;
           break;
       }
@@ -38,18 +38,18 @@ export default {
       to.meta.file = await conformanceStore.conformanceTempReportData?.file;
     }
     next();
-  }
+  },
-}
+};
 </script>
 <script setup>
-import { onMounted, onBeforeUnmount } from 'vue';
+import { onMounted, onBeforeUnmount } from "vue";
-import { useRoute } from 'vue-router';
+import { useRoute } from "vue-router";
-import { storeToRefs } from 'pinia';
+import { storeToRefs } from "pinia";
-import { useLoadingStore } from '@/stores/loading';
+import { useLoadingStore } from "@/stores/loading";
-import { useConformanceStore } from '@/stores/conformance';
+import { useConformanceStore } from "@/stores/conformance";
-import StatusBar from '@/components/Discover/StatusBar.vue';
+import StatusBar from "@/components/Discover/StatusBar.vue";
-import ConformanceResults from '@/components/Discover/Conformance/ConformanceResults.vue';
+import ConformanceResults from "@/components/Discover/Conformance/ConformanceResults.vue";
-import ConformanceSidebar from '@/components/Discover/Conformance/ConformanceSidebar.vue';
+import ConformanceSidebar from "@/components/Discover/Conformance/ConformanceSidebar.vue";
 
 const route = useRoute();
 
@@ -57,10 +57,22 @@ const route = useRoute();
 const loadingStore = useLoadingStore();
 const conformanceStore = useConformanceStore();
 const { isLoading } = storeToRefs(loadingStore);
-const { conformanceLogId, conformanceFilterId, conformanceLogCreateCheckId, conformanceFilterCreateCheckId,
+const {
-  conformanceLogTempCheckId, conformanceFilterTempCheckId, selectedRuleType, selectedActivitySequence,
+  conformanceLogId,
-  selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, conformanceRuleData,
+  conformanceFilterId,
-  conformanceTempReportData, conformanceFileName,
+  conformanceLogCreateCheckId,
+  conformanceFilterCreateCheckId,
+  conformanceLogTempCheckId,
+  conformanceFilterTempCheckId,
+  selectedRuleType,
+  selectedActivitySequence,
+  selectedMode,
+  selectedProcessScope,
+  selectedActSeqMore,
+  selectedActSeqFromTo,
+  conformanceRuleData,
+  conformanceTempReportData,
+  conformanceFileName,
 } = storeToRefs(conformanceStore);
 
 // Created logic
@@ -69,24 +81,24 @@ const { conformanceLogId, conformanceFilterId, conformanceLogCreateCheckId, conf
   try {
     const params = route.params;
     const file = route.meta.file;
-    const isCheckPage = route.name.includes('Check');
+    const isCheckPage = route.name.includes("Check");
 
-    if(!isCheckPage) {
+    if (!isCheckPage) {
       switch (params.type) {
-        case 'log':
+        case "log":
           conformanceLogId.value = params.fileId;
           break;
-        case 'filter':
+        case "filter":
           conformanceFilterId.value = params.fileId;
           break;
       }
     } else {
       switch (params.type) {
-        case 'log':
+        case "log":
           conformanceLogId.value = file.parent.id;
           conformanceFileName.value = file.name;
           break;
-        case 'filter':
+        case "filter":
           conformanceFilterId.value = file.parent.id;
           conformanceFileName.value = file.name;
           break;
@@ -95,20 +107,20 @@ const { conformanceLogId, conformanceFilterId, conformanceLogCreateCheckId, conf
     }
     await conformanceStore.getConformanceParams();
   } catch (error) {
-    console.error('Failed to initialize conformance:', error);
+    console.error("Failed to initialize conformance:", error);
   } finally {
-    setTimeout(() => isLoading.value = false, 500);
+    setTimeout(() => (isLoading.value = false), 500);
   }
 })();
 
 // Mounted
 onMounted(() => {
-  selectedRuleType.value = 'Have activity';
+  selectedRuleType.value = "Have activity";
-  selectedActivitySequence.value = 'Start & End';
+  selectedActivitySequence.value = "Start & End";
-  selectedMode.value = 'Directly follows';
+  selectedMode.value = "Directly follows";
-  selectedProcessScope.value = 'End to end';
+  selectedProcessScope.value = "End to end";
-  selectedActSeqMore.value = 'All';
+  selectedActSeqMore.value = "All";
-  selectedActSeqFromTo.value = 'From';
+  selectedActSeqFromTo.value = "From";
 });
 
 onBeforeUnmount(() => {

src/views/MainContainer.vue

@@ -1,16 +1,19 @@
 <template>
-  <ModalContainer/>
+  <ModalContainer />
-  <header id='header_inside_maincontainer' class="sticky inset-x-0 top-0 w-full bg-neutral-10 z-10">
+  <header
-      <Header/>
+    id="header_inside_maincontainer"
-      <Navbar/>
+    class="sticky inset-x-0 top-0 w-full bg-neutral-10 z-10"
+  >
+    <Header />
+    <Navbar />
   </header>
-  <main id='loading_and_router_view_container_in_maincontainer' class="w-full">
+  <main id="loading_and_router_view_container_in_maincontainer" class="w-full">
     <Loading v-if="loadingStore.isLoading" />
     <router-view></router-view>
   </main>
 </template>
 
-<script lang='ts'>
+<script lang="ts">
 // The Lucia project.
 // Copyright 2023-2026 DSP, inc.  All rights reserved.
 // Authors:
@@ -24,54 +27,57 @@
  *   via beforeRouteUpdate.
  */
 
-import { useLoginStore } from "@/stores/login";
+import { useLoginStore as useLoginStoreInGuard } from "@/stores/login";
-import { usePageAdminStore } from "@/stores/pageAdmin";
+import { usePageAdminStore as usePageAdminStoreInGuard } from "@/stores/pageAdmin";
-import { useAllMapDataStore } from "@/stores/allMapData";
+import { useAllMapDataStore as useAllMapDataStoreInGuard } from "@/stores/allMapData";
-import { useConformanceStore } from "@/stores/conformance";
+import { useConformanceStore as useConformanceStoreInGuard } from "@/stores/conformance";
 import { getCookie, setCookie } from "@/utils/cookieUtil.js";
-import { leaveFilter, leaveConformance } from "@/module/alertModal.js";
+import {
-import emitter from "@/utils/emitter";
+  leaveFilter as leaveFilterInGuard,
+  leaveConformance as leaveConformanceInGuard,
+} from "@/module/alertModal.js";
+import emitterInGuard from "@/utils/emitter";
 
 export default {
   // When the page is refreshed or entered for the first time, beforeRouteEnter is executed, but beforeRouteUpdate is not
-    // PSEUDOCODE
+  // PSEUDOCODE
-    // if (not logged in) {
+  // if (not logged in) {
-    //   if (has refresh token) {
+  //   if (has refresh token) {
-    //     refresh_token();
+  //     refresh_token();
-    //     if (refresh failed) {
+  //     if (refresh failed) {
-    //       go to log in();
+  //       go to log in();
-    //     } else {
+  //     } else {
-    //       cookie add("refresh_token=" + refresh_token "; expire=****")
+  //       cookie add("refresh_token=" + refresh_token "; expire=****")
-    //     }
+  //     }
-    //   } else {
+  //   } else {
-    //     go to log in();
+  //     go to log in();
-    //   }
+  //   }
-    // }
+  // }
   async beforeRouteEnter(to, from, next) {
-    const loginStore = useLoginStore();
+    const loginStore = useLoginStoreInGuard();
     const relativeReturnTo = `${window.location.pathname}${window.location.search}${window.location.hash}`;
 
     if (!getCookie("isLuciaLoggedIn")) {
-      if (getCookie('luciaRefreshToken')) {
+      if (getCookie("luciaRefreshToken")) {
         try {
           await loginStore.refreshToken();
           loginStore.setIsLoggedIn(true);
           setCookie("isLuciaLoggedIn", "true");
           next();
-        } catch(error) {
+        } catch (error) {
           next({
-            path: '/login',
+            path: "/login",
             query: {
-              'return-to': btoa(relativeReturnTo),
+              "return-to": btoa(relativeReturnTo),
-            }
+            },
           });
         }
       } else {
         next({
-          path: '/login',
+          path: "/login",
           query: {
-            'return-to': btoa(relativeReturnTo),
+            "return-to": btoa(relativeReturnTo),
-          }
+          },
         });
       }
     } else {
@@ -80,21 +86,31 @@ export default {
   },
   // Remember, Swal modal handling is called before beforeRouteUpdate
   beforeRouteUpdate(to, from, next) {
-    const pageAdminStore = usePageAdminStore();
+    const pageAdminStore = usePageAdminStoreInGuard();
-    const allMapDataStore = useAllMapDataStore();
+    const allMapDataStore = useAllMapDataStoreInGuard();
-    const conformanceStore = useConformanceStore();
+    const conformanceStore = useConformanceStoreInGuard();
 
     pageAdminStore.setPreviousPage(from.name);
 
     // When leaving the Map page, check if there is unsaved data
-    if ((from.name === 'Map' || from.name === 'CheckMap') && allMapDataStore.tempFilterId) {
+    if (
+      (from.name === "Map" || from.name === "CheckMap") &&
+      allMapDataStore.tempFilterId
+    ) {
       // Notify the Map's Sidebar to close
-      emitter.emit('leaveFilter', false);
+      emitterInGuard.emit("leaveFilter", false);
-      leaveFilter(next, allMapDataStore.addFilterId, to.path)
+      leaveFilterInGuard(next, allMapDataStore.addFilterId, to.path);
-    } else if((from.name === 'Conformance' || from.name === 'CheckConformance')
+    } else if (
-        && (conformanceStore.conformanceLogTempCheckId || conformanceStore.conformanceFilterTempCheckId)) {
+      (from.name === "Conformance" || from.name === "CheckConformance") &&
-      leaveConformance(next, conformanceStore.addConformanceCreateCheckId, to.path);
+      (conformanceStore.conformanceLogTempCheckId ||
-    } else if(pageAdminStore.shouldKeepPreviousPage) {
+        conformanceStore.conformanceFilterTempCheckId)
+    ) {
+      leaveConformanceInGuard(
+        next,
+        conformanceStore.addConformanceCreateCheckId,
+        to.path,
+      );
+    } else if (pageAdminStore.shouldKeepPreviousPage) {
       pageAdminStore.clearShouldKeepPreviousPageBoolean();
     } else {
       pageAdminStore.copyPendingPageToActivePage();
@@ -104,21 +120,21 @@ export default {
 };
 </script>
 
-<script setup lang='ts'>
+<script setup lang="ts">
-import { onBeforeMount } from 'vue';
+import { onBeforeMount } from "vue";
-import { useRouter } from 'vue-router';
+import { useRouter } from "vue-router";
-import { storeToRefs } from 'pinia';
+import { storeToRefs } from "pinia";
-import { useLoadingStore } from '@/stores/loading';
+import { useLoadingStore } from "@/stores/loading";
-import { useAllMapDataStore } from '@/stores/allMapData';
+import { useAllMapDataStore } from "@/stores/allMapData";
-import { useConformanceStore } from '@/stores/conformance';
+import { useConformanceStore } from "@/stores/conformance";
 import Header from "@/components/Header.vue";
 import Navbar from "@/components/Navbar.vue";
-import Loading from '@/components/Loading.vue';
+import Loading from "@/components/Loading.vue";
-import { leaveFilter, leaveConformance } from '@/module/alertModal.js';
+import { leaveFilter, leaveConformance } from "@/module/alertModal.js";
-import { usePageAdminStore } from '@/stores/pageAdmin';
+import { usePageAdminStore } from "@/stores/pageAdmin";
 import { useLoginStore } from "@/stores/login";
-import emitter from '@/utils/emitter';
+import emitter from "@/utils/emitter";
-import ModalContainer from './AccountManagement/ModalContainer.vue';
+import ModalContainer from "./AccountManagement/ModalContainer.vue";
 
 const loadingStore = useLoadingStore();
 const allMapDataStore = useAllMapDataStore();
@@ -127,18 +143,22 @@ const pageAdminStore = usePageAdminStore();
 const loginStore = useLoginStore();
 const router = useRouter();
 
-const { tempFilterId, createFilterId, temporaryData, postRuleData, ruleData } = storeToRefs(allMapDataStore);
+const { tempFilterId, createFilterId, temporaryData, postRuleData, ruleData } =
-const { conformanceLogTempCheckId, conformanceFilterTempCheckId } = storeToRefs(conformanceStore);
+  storeToRefs(allMapDataStore);
+const { conformanceLogTempCheckId, conformanceFilterTempCheckId } =
+  storeToRefs(conformanceStore);
 
 /** Sets the highlighted navbar item based on the current URL path on page load. */
 const setHighlightedNavItemOnLanding = () => {
   const currentPath = router.currentRoute.value.path;
-  const pathSegments: string[] = currentPath.split('/').filter(segment => segment !== '');
+  const pathSegments = currentPath
-  if(pathSegments.length === 1) {
+    .split("/")
-    if(pathSegments[0] === 'files') {
+    .filter((segment) => segment !== "");
-      pageAdminStore.setActivePage('ALL');
+  if (pathSegments.length === 1) {
+    if (pathSegments[0] === "files") {
+      pageAdminStore.setActivePage("ALL");
     }
-  } else if (pathSegments.length > 1){
+  } else if (pathSegments.length > 1) {
     pageAdminStore.setActivePage(pathSegments[1].toUpperCase());
   }
 };