Apply repository-wide ESLint auto-fix formatting pass

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

src/components/Discover/Map/SidebarView.vue

@@ -1,5 +1,11 @@
 <template>
-  <Sidebar :visible="sidebarView" :closeIcon="'pi pi-chevron-left'" :modal="false" position="left" :dismissable="false" >
+  <Sidebar
+    :visible="sidebarView"
+    :closeIcon="'pi pi-chevron-left'"
+    :modal="false"
+    position="left"
+    :dismissable="false"
+  >
     <template #header>
       <p class="h1">Visualization Setting</p>
     </template>
@@ -10,28 +16,54 @@
         <ul class="space-y-3 mb-4">
           <!-- Select bpmn / processmap button -->
           <li class="btn-toggle-content">
-            <span class="btn-toggle-item" :class="mapType === 'processMap'?'btn-toggle-show  ':''" @click="onProcessMapClick()">
+            <span
+              class="btn-toggle-item"
+              :class="mapType === 'processMap' ? 'btn-toggle-show  ' : ''"
+              @click="onProcessMapClick()"
+            >
               Process Map
             </span>
-            <span class="btn-toggle-item" :class="mapType === 'bpmn'?'btn-toggle-show':''" @click="onBPMNClick()">
+            <span
+              class="btn-toggle-item"
+              :class="mapType === 'bpmn' ? 'btn-toggle-show' : ''"
+              @click="onBPMNClick()"
+            >
               BPMN Model
             </span>
           </li>
           <!-- Select drawing style: bezier / unbundled-bezier button -->
           <li class="btn-toggle-content">
-            <span class="btn-toggle-item" :class="curveStyle === 'unbundled-bezier'?'btn-toggle-show  ':''" @click="switchCurveStyles('unbundled-bezier')">
+            <span
+              class="btn-toggle-item"
+              :class="
+                curveStyle === 'unbundled-bezier' ? 'btn-toggle-show  ' : ''
+              "
+              @click="switchCurveStyles('unbundled-bezier')"
+            >
               Curved
             </span>
-            <span class="btn-toggle-item" :class="curveStyle === 'taxi'?'btn-toggle-show':''" @click="switchCurveStyles('taxi')">
+            <span
+              class="btn-toggle-item"
+              :class="curveStyle === 'taxi' ? 'btn-toggle-show' : ''"
+              @click="switchCurveStyles('taxi')"
+            >
               Elbow
             </span>
           </li>
           <!-- Vertical TB | Horizontal LR -->
           <li class="btn-toggle-content">
-            <span class="btn-toggle-item" :class="rank === 'LR'?'btn-toggle-show  ':''" @click="switchRank('LR')">
+            <span
+              class="btn-toggle-item"
+              :class="rank === 'LR' ? 'btn-toggle-show  ' : ''"
+              @click="switchRank('LR')"
+            >
               Horizontal
             </span>
-            <span class="btn-toggle-item" :class="rank === 'TB'?'btn-toggle-show':''" @click="switchRank('TB')">
+            <span
+              class="btn-toggle-item"
+              :class="rank === 'TB' ? 'btn-toggle-show' : ''"
+              @click="switchRank('TB')"
+            >
               Vertical
             </span>
           </li>
@@ -41,25 +73,67 @@
       <div>
         <p class="h2">Data Layer</p>
         <ul class="space-y-2">
-          <li class="flex justify-between mb-3" @change="switchDataLayerType($event, 'freq')">
+          <li
+            class="flex justify-between mb-3"
+            @change="switchDataLayerType($event, 'freq')"
+          >
             <div class="flex items-center w-1/2">
-              <RadioButton v-model="dataLayerType" inputId="freq" name="dataLayer" value="freq" class="mr-2" @click.prevent="switchDataLayerType($event, 'freq')"/>
+              <RadioButton
+                v-model="dataLayerType"
+                inputId="freq"
+                name="dataLayer"
+                value="freq"
+                class="mr-2"
+                @click.prevent="switchDataLayerType($event, 'freq')"
+              />
               <label for="freq">Frequency</label>
             </div>
             <div class="w-1/2">
-              <select class="border border-neutral-500 rounded p-1 w-full focus-visible:outline-primary" :disabled="dataLayerType === 'duration'">
-                <option v-for="(freq, index) in selectFrequency" :key="index" :value="freq.value" :disabled="freq.disabled" :selected="freq.value === selectedFreq">{{ freq.label }}</option>
+              <select
+                class="border border-neutral-500 rounded p-1 w-full focus-visible:outline-primary"
+                :disabled="dataLayerType === 'duration'"
+              >
+                <option
+                  v-for="(freq, index) in selectFrequency"
+                  :key="index"
+                  :value="freq.value"
+                  :disabled="freq.disabled"
+                  :selected="freq.value === selectedFreq"
+                >
+                  {{ freq.label }}
+                </option>
               </select>
             </div>
           </li>
-          <li class="flex justify-between mb-3" @change="switchDataLayerType($event, 'duration')">
+          <li
+            class="flex justify-between mb-3"
+            @change="switchDataLayerType($event, 'duration')"
+          >
             <div class="flex items-center w-1/2">
-              <RadioButton v-model="dataLayerType" inputId="duration" name="dataLayer" value="duration" class="mr-2" @click.prevent="switchDataLayerType($event, 'duration')"/>
+              <RadioButton
+                v-model="dataLayerType"
+                inputId="duration"
+                name="dataLayer"
+                value="duration"
+                class="mr-2"
+                @click.prevent="switchDataLayerType($event, 'duration')"
+              />
               <label for="duration">Duration</label>
             </div>
             <div class="w-1/2">
-              <select class="border border-neutral-500 rounded p-1 w-full focus-visible:outline-primary" :disabled="dataLayerType === 'freq'">
-                <option v-for="(duration, index) in selectDuration" :key="index" :value="duration.value" :disabled="duration.disabled" :selected="duration.value === selectedDuration">{{ duration.label }}</option>
+              <select
+                class="border border-neutral-500 rounded p-1 w-full focus-visible:outline-primary"
+                :disabled="dataLayerType === 'freq'"
+              >
+                <option
+                  v-for="(duration, index) in selectDuration"
+                  :key="index"
+                  :value="duration.value"
+                  :disabled="duration.disabled"
+                  :selected="duration.value === selectedDuration"
+                >
+                  {{ duration.label }}
+                </option>
               </select>
             </div>
           </li>
@@ -80,9 +154,9 @@
  *   style, direction, and data layer selection.
  */
 
-import { ref, onMounted } from 'vue';
-import { storeToRefs } from 'pinia';
-import { useMapPathStore } from '@/stores/mapPathStore';
+import { ref, onMounted } from "vue";
+import { storeToRefs } from "pinia";
+import { useMapPathStore } from "@/stores/mapPathStore";
 
 defineProps({
   sidebarView: {
@@ -92,39 +166,39 @@ defineProps({
 });
 
 const emit = defineEmits([
-  'switch-map-type',
-  'switch-curve-styles',
-  'switch-rank',
-  'switch-data-layer-type',
+  "switch-map-type",
+  "switch-curve-styles",
+  "switch-rank",
+  "switch-data-layer-type",
 ]);
 
 const mapPathStore = useMapPathStore();
 const { isBPMNOn } = storeToRefs(mapPathStore);
 
 const selectFrequency = ref([
-  { value:"total", label:"Total", disabled:false, },
-  { value:"rel_freq", label:"Relative", disabled:false, },
-  { value:"average", label:"Average", disabled:false, },
-  { value:"median", label:"Median", disabled:false, },
-  { value:"max", label:"Max", disabled:false, },
-  { value:"min", label:"Min", disabled:false, },
-  { value:"cases", label:"Number of cases", disabled:false, },
+  { value: "total", label: "Total", disabled: false },
+  { value: "rel_freq", label: "Relative", disabled: false },
+  { value: "average", label: "Average", disabled: false },
+  { value: "median", label: "Median", disabled: false },
+  { value: "max", label: "Max", disabled: false },
+  { value: "min", label: "Min", disabled: false },
+  { value: "cases", label: "Number of cases", disabled: false },
 ]);
 const selectDuration = ref([
-  { value:"total", label:"Total", disabled:false, },
-  { value:"rel_duration", label:"Relative", disabled:false, },
-  { value:"average", label:"Average", disabled:false, },
-  { value:"median", label:"Median", disabled:false, },
-  { value:"max", label:"Max", disabled:false, },
-  { value:"min", label:"Min", disabled:false, },
+  { value: "total", label: "Total", disabled: false },
+  { value: "rel_duration", label: "Relative", disabled: false },
+  { value: "average", label: "Average", disabled: false },
+  { value: "median", label: "Median", disabled: false },
+  { value: "max", label: "Max", disabled: false },
+  { value: "min", label: "Min", disabled: false },
 ]);
-const curveStyle = ref('unbundled-bezier'); // unbundled-bezier | taxi
-const mapType = ref('processMap'); // processMap | bpmn
+const curveStyle = ref("unbundled-bezier"); // unbundled-bezier | taxi
+const mapType = ref("processMap"); // processMap | bpmn
 const dataLayerType = ref(null); // freq | duration
 const dataLayerOption = ref(null);
-const selectedFreq = ref('');
-const selectedDuration = ref('');
-const rank = ref('LR'); // Vertical TB | Horizontal LR
+const selectedFreq = ref("");
+const selectedDuration = ref("");
+const rank = ref("LR"); // Vertical TB | Horizontal LR
 
 /**
  * Switches the map type and emits the change event.
@@ -132,7 +206,7 @@ const rank = ref('LR'); // Vertical TB | Horizontal LR
  */
 function switchMapType(type) {
   mapType.value = type;
-  emit('switch-map-type', mapType.value);
+  emit("switch-map-type", mapType.value);
 }
 
 /**
@@ -141,7 +215,7 @@ function switchMapType(type) {
  */
 function switchCurveStyles(style) {
   curveStyle.value = style;
-  emit('switch-curve-styles', curveStyle.value);
+  emit("switch-curve-styles", curveStyle.value);
 }
 
 /**
@@ -150,7 +224,7 @@ function switchCurveStyles(style) {
  */
 function switchRank(rankValue) {
   rank.value = rankValue;
-  emit('switch-rank', rank.value);
+  emit("switch-rank", rank.value);
 }
 
 /**
@@ -159,40 +233,41 @@ function switchRank(rankValue) {
  * @param {string} type - 'freq' or 'duration'.
  */
 function switchDataLayerType(e, type) {
-  let value = '';
+  let value = "";
 
-  if(e.target.value !== 'freq' && e.target.value !== 'duration') value = e.target.value;
+  if (e.target.value !== "freq" && e.target.value !== "duration")
+    value = e.target.value;
   switch (type) {
-    case 'freq':
-      value = value || selectedFreq.value || 'total';
+    case "freq":
+      value = value || selectedFreq.value || "total";
       dataLayerType.value = type;
       dataLayerOption.value = value;
       selectedFreq.value = value;
       break;
-    case 'duration':
-      value = value || selectedDuration.value || 'total';
+    case "duration":
+      value = value || selectedDuration.value || "total";
       dataLayerType.value = type;
       dataLayerOption.value = value;
       selectedDuration.value = value;
       break;
   }
-  emit('switch-data-layer-type', dataLayerType.value, dataLayerOption.value);
+  emit("switch-data-layer-type", dataLayerType.value, dataLayerOption.value);
 }
 
 /** Switches to Process Map view. */
 function onProcessMapClick() {
   mapPathStore.setIsBPMNOn(false);
-  switchMapType('processMap');
+  switchMapType("processMap");
 }
 
 /** Switches to BPMN Model view. */
 function onBPMNClick() {
   mapPathStore.setIsBPMNOn(true);
-  switchMapType('bpmn');
+  switchMapType("bpmn");
 }
 
 onMounted(() => {
-  dataLayerType.value = 'freq';
-  dataLayerOption.value = 'total';
+  dataLayerType.value = "freq";
+  dataLayerOption.value = "total";
 });
 </script>