Apply repository-wide ESLint auto-fix formatting pass

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

src/components/Compare/SidebarStates.vue

@@ -1,5 +1,14 @@
 <template>
-  <Sidebar :visible="sidebarState" :closeIcon="'pi pi-angle-right'" :modal="false" position="right" :dismissable="false" class="!w-[440px]" @hide="hide" @show="show">
+  <Sidebar
+    :visible="sidebarState"
+    :closeIcon="'pi pi-angle-right'"
+    :modal="false"
+    position="right"
+    :dismissable="false"
+    class="!w-[440px]"
+    @hide="hide"
+    @show="show"
+  >
     <template #header>
       <p class="pl-2 text-base font-bold text-neutral-900">Summary</p>
     </template>
@@ -9,7 +18,12 @@
       <section class="w-[204px] box-border pr-4">
         <div class="mb-4">
           <p class="h2">File Name</p>
-          <p class="text-sm leading-normal whitespace-nowrap break-keep overflow-hidden text-ellipsis" :title="primaryStatData.name">{{ primaryStatData.name }}</p>
+          <p
+            class="text-sm leading-normal whitespace-nowrap break-keep overflow-hidden text-ellipsis"
+            :title="primaryStatData.name"
+          >
+            {{ primaryStatData.name }}
+          </p>
         </div>
         <!-- Stats -->
         <ul class="pb-4 border-b border-neutral-300">
@@ -17,40 +31,80 @@
             <p class="h2">Cases</p>
             <div class="flex justify-between items-center">
               <div class="w-full mr-4">
-                <span class="block text-sm">{{ primaryStatData.cases.count }} / {{ primaryStatData.cases.total }}</span>
-                <ProgressBar :value="primaryValueCases" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300 progressbar-primary"></ProgressBar>
+                <span class="block text-sm"
+                  >{{ primaryStatData.cases.count }} /
+                  {{ primaryStatData.cases.total }}</span
+                >
+                <ProgressBar
+                  :value="primaryValueCases"
+                  :showValue="false"
+                  class="!h-2 !rounded-full my-2 !bg-neutral-300 progressbar-primary"
+                ></ProgressBar>
               </div>
-              <span class="block text-primary text-2xl text-right font-medium basis-28">{{ primaryStatData.cases.ratio }}%</span>
+              <span
+                class="block text-primary text-2xl text-right font-medium basis-28"
+                >{{ primaryStatData.cases.ratio }}%</span
+              >
             </div>
           </li>
           <li>
             <p class="h2">Traces</p>
             <div class="flex justify-between items-center">
               <div class="w-full mr-4">
-                <span class="block text-sm">{{ primaryStatData.traces.count }} / {{ primaryStatData.traces.total }}</span>
-                <ProgressBar :value="primaryValueTraces" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300 progressbar-primary"></ProgressBar>
+                <span class="block text-sm"
+                  >{{ primaryStatData.traces.count }} /
+                  {{ primaryStatData.traces.total }}</span
+                >
+                <ProgressBar
+                  :value="primaryValueTraces"
+                  :showValue="false"
+                  class="!h-2 !rounded-full my-2 !bg-neutral-300 progressbar-primary"
+                ></ProgressBar>
               </div>
-              <span class="block text-primary text-2xl text-right font-medium basis-28">{{ primaryStatData.traces.ratio }}%</span>
+              <span
+                class="block text-primary text-2xl text-right font-medium basis-28"
+                >{{ primaryStatData.traces.ratio }}%</span
+              >
             </div>
           </li>
           <li>
             <p class="h2">Activity Instances</p>
             <div class="flex justify-between items-center">
               <div class="w-full mr-4">
-                <span class="block text-sm">{{ primaryStatData.task_instances.count }} / {{ primaryStatData.task_instances.total }}</span>
-                <ProgressBar :value="primaryValueTaskInstances" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300 progressbar-primary"></ProgressBar>
+                <span class="block text-sm"
+                  >{{ primaryStatData.task_instances.count }} /
+                  {{ primaryStatData.task_instances.total }}</span
+                >
+                <ProgressBar
+                  :value="primaryValueTaskInstances"
+                  :showValue="false"
+                  class="!h-2 !rounded-full my-2 !bg-neutral-300 progressbar-primary"
+                ></ProgressBar>
               </div>
-              <span class="block text-primary text-2xl text-right font-medium basis-28">{{ primaryStatData.task_instances.ratio }}%</span>
+              <span
+                class="block text-primary text-2xl text-right font-medium basis-28"
+                >{{ primaryStatData.task_instances.ratio }}%</span
+              >
             </div>
           </li>
           <li>
             <p class="h2">Activities</p>
             <div class="flex justify-between items-center">
               <div class="w-full mr-4">
-                <span class="block text-sm">{{ primaryStatData.tasks.count }} / {{ primaryStatData.tasks.total }}</span>
-                <ProgressBar :value="primaryValueTasks" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300 progressbar-primary"></ProgressBar>
+                <span class="block text-sm"
+                  >{{ primaryStatData.tasks.count }} /
+                  {{ primaryStatData.tasks.total }}</span
+                >
+                <ProgressBar
+                  :value="primaryValueTasks"
+                  :showValue="false"
+                  class="!h-2 !rounded-full my-2 !bg-neutral-300 progressbar-primary"
+                ></ProgressBar>
               </div>
-              <span class="block text-primary text-2xl text-right font-medium basis-28">{{ primaryStatData.tasks.ratio }}%</span>
+              <span
+                class="block text-primary text-2xl text-right font-medium basis-28"
+                >{{ primaryStatData.tasks.ratio }}%</span
+              >
             </div>
           </li>
         </ul>
@@ -67,10 +121,34 @@
         <div class="pt-1 pb-4">
           <p class="h2">Case Duration</p>
           <ul class="space-y-1 text-sm">
-            <li><Tag value="MIN" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ primaryStatData.case_duration.min }}</li>
-            <li><Tag value="AVG" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ primaryStatData.case_duration.average }}</li>
-            <li><Tag value="MED" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ primaryStatData.case_duration.median }}</li>
-            <li><Tag value="MAX" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ primaryStatData.case_duration.max }}</li>
+            <li>
+              <Tag
+                value="MIN"
+                class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"
+              ></Tag
+              >{{ primaryStatData.case_duration.min }}
+            </li>
+            <li>
+              <Tag
+                value="AVG"
+                class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"
+              ></Tag
+              >{{ primaryStatData.case_duration.average }}
+            </li>
+            <li>
+              <Tag
+                value="MED"
+                class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"
+              ></Tag
+              >{{ primaryStatData.case_duration.median }}
+            </li>
+            <li>
+              <Tag
+                value="MAX"
+                class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"
+              ></Tag
+              >{{ primaryStatData.case_duration.max }}
+            </li>
           </ul>
         </div>
       </section>
@@ -78,7 +156,12 @@
       <section class="w-[204px] box-border pl-4">
         <div class="mb-4">
           <p class="h2">File Name</p>
-          <p class="text-sm leading-normal whitespace-nowrap break-keep overflow-hidden text-ellipsis" :title="secondaryStatData.name">{{ secondaryStatData.name }}</p>
+          <p
+            class="text-sm leading-normal whitespace-nowrap break-keep overflow-hidden text-ellipsis"
+            :title="secondaryStatData.name"
+          >
+            {{ secondaryStatData.name }}
+          </p>
         </div>
         <!-- Stats -->
         <ul class="pb-4 border-b border-neutral-300">
@@ -86,40 +169,80 @@
             <p class="h2">Cases</p>
             <div class="flex justify-between items-center">
               <div class="w-full mr-4">
-                <span class="block text-sm">{{ secondaryStatData.cases.count }} / {{ secondaryStatData.cases.total }}</span>
-                <ProgressBar :value="secondaryValueTraces" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300 progressbar-secondary"></ProgressBar>
+                <span class="block text-sm"
+                  >{{ secondaryStatData.cases.count }} /
+                  {{ secondaryStatData.cases.total }}</span
+                >
+                <ProgressBar
+                  :value="secondaryValueTraces"
+                  :showValue="false"
+                  class="!h-2 !rounded-full my-2 !bg-neutral-300 progressbar-secondary"
+                ></ProgressBar>
               </div>
-              <span class="block text-secondary text-2xl text-right font-medium basis-28">{{ secondaryStatData.cases.ratio }}%</span>
+              <span
+                class="block text-secondary text-2xl text-right font-medium basis-28"
+                >{{ secondaryStatData.cases.ratio }}%</span
+              >
             </div>
           </li>
           <li>
             <p class="h2">Traces</p>
             <div class="flex justify-between items-center">
               <div class="w-full mr-4">
-                <span class="block text-sm">{{ secondaryStatData.traces.count }} / {{ secondaryStatData.traces.total }}</span>
-                <ProgressBar :value="secondaryValueTraces" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300 progressbar-secondary"></ProgressBar>
+                <span class="block text-sm"
+                  >{{ secondaryStatData.traces.count }} /
+                  {{ secondaryStatData.traces.total }}</span
+                >
+                <ProgressBar
+                  :value="secondaryValueTraces"
+                  :showValue="false"
+                  class="!h-2 !rounded-full my-2 !bg-neutral-300 progressbar-secondary"
+                ></ProgressBar>
               </div>
-              <span class="block text-secondary text-2xl text-right font-medium basis-28">{{ secondaryStatData.traces.ratio }}%</span>
+              <span
+                class="block text-secondary text-2xl text-right font-medium basis-28"
+                >{{ secondaryStatData.traces.ratio }}%</span
+              >
             </div>
           </li>
           <li>
             <p class="h2">Activity Instances</p>
             <div class="flex justify-between items-center">
               <div class="w-full mr-4">
-                <span class="block text-sm">{{ secondaryStatData.task_instances.count }} / {{ secondaryStatData.task_instances.total }}</span>
-                <ProgressBar :value="secondaryValueTaskInstances" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300 progressbar-secondary"></ProgressBar>
+                <span class="block text-sm"
+                  >{{ secondaryStatData.task_instances.count }} /
+                  {{ secondaryStatData.task_instances.total }}</span
+                >
+                <ProgressBar
+                  :value="secondaryValueTaskInstances"
+                  :showValue="false"
+                  class="!h-2 !rounded-full my-2 !bg-neutral-300 progressbar-secondary"
+                ></ProgressBar>
               </div>
-              <span class="block text-secondary text-2xl text-right font-medium basis-28">{{ secondaryStatData.task_instances.ratio }}%</span>
+              <span
+                class="block text-secondary text-2xl text-right font-medium basis-28"
+                >{{ secondaryStatData.task_instances.ratio }}%</span
+              >
             </div>
           </li>
           <li>
             <p class="h2">Activities</p>
             <div class="flex justify-between items-center">
               <div class="w-full mr-4">
-                <span class="block text-sm">{{ secondaryStatData.tasks.count }} / {{ secondaryStatData.tasks.total }}</span>
-                <ProgressBar :value="secondaryValueTasks" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300 progressbar-secondary"></ProgressBar>
+                <span class="block text-sm"
+                  >{{ secondaryStatData.tasks.count }} /
+                  {{ secondaryStatData.tasks.total }}</span
+                >
+                <ProgressBar
+                  :value="secondaryValueTasks"
+                  :showValue="false"
+                  class="!h-2 !rounded-full my-2 !bg-neutral-300 progressbar-secondary"
+                ></ProgressBar>
               </div>
-              <span class="block text-secondary text-2xl text-right font-medium basis-28">{{ secondaryStatData.tasks.ratio }}%</span>
+              <span
+                class="block text-secondary text-2xl text-right font-medium basis-28"
+                >{{ secondaryStatData.tasks.ratio }}%</span
+              >
             </div>
           </li>
         </ul>
@@ -136,10 +259,34 @@
         <div class="pt-1 pb-4">
           <p class="h2">Case Duration</p>
           <ul class="space-y-1 text-sm">
-            <li><Tag value="MIN" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ secondaryStatData.case_duration.min }}</li>
-            <li><Tag value="AVG" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ secondaryStatData.case_duration.average }}</li>
-            <li><Tag value="MED" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ secondaryStatData.case_duration.median }}</li>
-            <li><Tag value="MAX" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ secondaryStatData.case_duration.max }}</li>
+            <li>
+              <Tag
+                value="MIN"
+                class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"
+              ></Tag
+              >{{ secondaryStatData.case_duration.min }}
+            </li>
+            <li>
+              <Tag
+                value="AVG"
+                class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"
+              ></Tag
+              >{{ secondaryStatData.case_duration.average }}
+            </li>
+            <li>
+              <Tag
+                value="MED"
+                class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"
+              ></Tag
+              >{{ secondaryStatData.case_duration.median }}
+            </li>
+            <li>
+              <Tag
+                value="MAX"
+                class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"
+              ></Tag
+              >{{ secondaryStatData.case_duration.max }}
+            </li>
           </ul>
         </div>
       </section>
@@ -158,11 +305,11 @@
  *   traces, activities, timeframes, durations) of two files.
  */
 
-import { ref, onMounted } from 'vue';
-import { useRoute } from 'vue-router';
-import { useCompareStore } from '@/stores/compare';
-import { getTimeLabel } from '@/module/timeLabel.js';
-import getMoment from 'moment';
+import { ref, onMounted } from "vue";
+import { useRoute } from "vue-router";
+import { useCompareStore } from "@/stores/compare";
+import { getTimeLabel } from "@/module/timeLabel.js";
+import getMoment from "moment";
 
 const props = defineProps({
   sidebarState: {
@@ -191,7 +338,7 @@ const secondaryStatData = ref(null);
  * @returns {number} The percentage value.
  */
 const getPercentLabel = (val) => {
-  if((val * 100).toFixed(1) >= 100) return 100;
+  if ((val * 100).toFixed(1) >= 100) return 100;
   else return parseFloat((val * 100).toFixed(1));
 };
 
@@ -205,34 +352,34 @@ const getStatData = (data, fileName) => {
   return {
     name: fileName,
     cases: {
-      count: data.cases.count.toLocaleString('en-US'),
-      total: data.cases.total.toLocaleString('en-US'),
-      ratio: getPercentLabel(data.cases.ratio)
+      count: data.cases.count.toLocaleString("en-US"),
+      total: data.cases.total.toLocaleString("en-US"),
+      ratio: getPercentLabel(data.cases.ratio),
     },
     traces: {
-      count: data.traces.count.toLocaleString('en-US'),
-      total: data.traces.total.toLocaleString('en-US'),
-      ratio: getPercentLabel(data.traces.ratio)
+      count: data.traces.count.toLocaleString("en-US"),
+      total: data.traces.total.toLocaleString("en-US"),
+      ratio: getPercentLabel(data.traces.ratio),
     },
     task_instances: {
-      count: data.task_instances.count.toLocaleString('en-US'),
-      total: data.task_instances.total.toLocaleString('en-US'),
-      ratio: getPercentLabel(data.task_instances.ratio)
+      count: data.task_instances.count.toLocaleString("en-US"),
+      total: data.task_instances.total.toLocaleString("en-US"),
+      ratio: getPercentLabel(data.task_instances.ratio),
     },
     tasks: {
-      count: data.tasks.count.toLocaleString('en-US'),
-      total: data.tasks.total.toLocaleString('en-US'),
-      ratio: getPercentLabel(data.tasks.ratio)
+      count: data.tasks.count.toLocaleString("en-US"),
+      total: data.tasks.total.toLocaleString("en-US"),
+      ratio: getPercentLabel(data.tasks.ratio),
     },
-    started_at: getMoment(data.started_at).format('YYYY.MM.DD HH:mm'),
-    completed_at: getMoment(data.completed_at).format('YYYY.MM.DD HH:mm'),
+    started_at: getMoment(data.started_at).format("YYYY.MM.DD HH:mm"),
+    completed_at: getMoment(data.completed_at).format("YYYY.MM.DD HH:mm"),
     case_duration: {
       min: getTimeLabel(data.case_duration.min, 2),
       max: getTimeLabel(data.case_duration.max, 2),
       average: getTimeLabel(data.case_duration.average, 2),
       median: getTimeLabel(data.case_duration.median, 2),
-    }
-  }
+    },
+  };
 };
 
 /** Populates progress bar values when the sidebar is shown. */
@@ -243,7 +390,8 @@ const show = () => {
   primaryValueTasks.value = primaryStatData.value.tasks.ratio;
   secondaryValueCases.value = secondaryStatData.value.cases.ratio;
   secondaryValueTraces.value = secondaryStatData.value.traces.ratio;
-  secondaryValueTaskInstances.value = secondaryStatData.value.task_instances.ratio;
+  secondaryValueTaskInstances.value =
+    secondaryStatData.value.task_instances.ratio;
   secondaryValueTasks.value = secondaryStatData.value.tasks.ratio;
 };
 
@@ -266,10 +414,13 @@ onMounted(async () => {
   const primaryId = routeParams.primaryId;
   const secondaryId = routeParams.secondaryId;
   const primaryData = await compareStore.getStateData(primaryType, primaryId);
-  const secondaryData = await compareStore.getStateData(secondaryType, secondaryId);
+  const secondaryData = await compareStore.getStateData(
+    secondaryType,
+    secondaryId,
+  );
 
-  const primaryFileName = await compareStore.getFileName(primaryId)
-  const secondaryFileName = await compareStore.getFileName(secondaryId)
+  const primaryFileName = await compareStore.getFileName(primaryId);
+  const secondaryFileName = await compareStore.getFileName(secondaryId);
   primaryStatData.value = await getStatData(primaryData, primaryFileName);
   secondaryStatData.value = await getStatData(secondaryData, secondaryFileName);
 });
@@ -279,9 +430,9 @@ onMounted(async () => {
   background-color: var(--bg-color);
 }
 .progressbar-primary {
-  --bg-color: #0099FF;
+  --bg-color: #0099ff;
 }
 .progressbar-secondary {
-  --bg-color: #FFAA44;
+  --bg-color: #ffaa44;
 }
 </style>