@geode/opengeodeweb-front 10.34.0-rc.4 → 10.34.0-rc.6

package/app/components/CameraManager.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import List from "@ogw_front/components/CameraManager/List.vue";
-import Saver from "@ogw_front/components/CameraManager/Saver.vue";
-import ToolPanel from "@ogw_front/components/ToolPanel.vue";
+import List from "@ogw_front/components/CameraManager/List";
+import Saver from "@ogw_front/components/CameraManager/Saver";
+import ToolPanel from "@ogw_front/components/ToolPanel";
 
 const DEFAULT_PANEL_WIDTH = 260;
 
@@ -40,7 +40,12 @@ const show = computed({
 </script>
 
 <template>
-  <ToolPanel v-model="show" title="Camera Positions" :width="width" :escapeFunction="handleClose">
+  <ToolPanel
+    v-model="show"
+    title="Camera Positions"
+    :width="width"
+    :escapeFunction="handleClose"
+  >
     <v-card-text class="pa-0">
       <Saver />
       <v-divider />

package/app/components/CameraOrientation.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 // Not auto-fixable (eslint's sort-imports core rule has no autofixer) and this file's import order doesn't match its syntax-kind-then-alphabetical requirement - left as-is rather than manually reordered across the codebase for a purely cosmetic rule.
 // oxlint-disable eslint/sort-imports
-import ToolPanel from "@ogw_front/components/ToolPanel.vue";
+import ToolPanel from "@ogw_front/components/ToolPanel";
 import { applyCameraOptions } from "@ogw_internal/stores/hybrid_viewer/camera";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 import type { CameraOptions } from "@ogw_internal/stores/hybrid_viewer/vtk_types.js";
@@ -166,7 +166,9 @@ watch(hoveredFace, (newFace, oldFace) => {
     return;
   }
   function updateFace(face: string | undefined, active: boolean) {
-    const config = orientations.find((orientation) => orientation.face === face);
+    const config = orientations.find(
+      (orientation) => orientation.face === face,
+    );
     if (config) {
       cubeActor[`set${config.vtkKey}FaceProperty`]({
         faceColor: active ? "rgba(255, 255, 255, 0.95)" : "rgba(60, 60, 60, 1)",
@@ -193,10 +195,17 @@ watch(hoveredFace, (newFace, oldFace) => {
       class="pa-0 overflow-hidden position-relative"
       style="
         height: 220px;
-        background: radial-gradient(circle at center, rgba(255, 255, 255, 0.05), transparent 70%);
+        background: radial-gradient(
+          circle at center,
+          rgba(255, 255, 255, 0.05),
+          transparent 70%
+        );
       "
     >
-      <svg class="position-absolute fill-height w-100" style="pointer-events: none">
+      <svg
+        class="position-absolute fill-height w-100"
+        style="pointer-events: none"
+      >
         <line
           v-for="orientation in orientations"
           :key="orientation.value"
@@ -204,7 +213,9 @@ watch(hoveredFace, (newFace, oldFace) => {
           y1="50%"
           :x2="orientation.position.left"
           :y2="orientation.position.top"
-          :stroke="hoveredFace === orientation.face ? 'white' : 'rgba(255,255,255,0.1)'"
+          :stroke="
+            hoveredFace === orientation.face ? 'white' : 'rgba(255,255,255,0.1)'
+          "
           :stroke-width="hoveredFace === orientation.face ? 2 : 1"
           class="transition-all"
           style="filter: drop-shadow(0 0 3px white)"
@@ -215,7 +226,10 @@ watch(hoveredFace, (newFace, oldFace) => {
         class="position-absolute d-flex align-center justify-center"
         style="top: 50%; left: 50%; transform: translate(-50%, -50%)"
       >
-        <div ref="cubeContainer" style="width: 70px; height: 70px; pointer-events: none" />
+        <div
+          ref="cubeContainer"
+          style="width: 70px; height: 70px; pointer-events: none"
+        />
       </div>
 
       <v-btn
@@ -231,21 +245,34 @@ watch(hoveredFace, (newFace, oldFace) => {
         @mouseleave="hoveredFace = undefined"
         @click.stop="emit('select', orientation.value)"
       >
-        <v-tooltip activator="parent" location="top">{{ orientation.value }} View</v-tooltip>
-        <span class="text-caption font-weight-black" style="font-size: 0.7rem !important">{{
-          orientation.label
-        }}</span>
+        <v-tooltip activator="parent" location="top"
+          >{{ orientation.value }} View</v-tooltip
+        >
+        <span
+          class="text-caption font-weight-black"
+          style="font-size: 0.7rem !important"
+          >{{ orientation.label }}</span
+        >
       </v-btn>
     </div>
   </ToolPanel>
 
-  <v-list v-else density="compact" class="pa-4 orientation-menu rounded-lg" elevation="8">
+  <v-list
+    v-else
+    density="compact"
+    class="pa-4 orientation-menu rounded-lg"
+    elevation="8"
+  >
     <div class="d-flex flex-column align-center" style="gap: 16px">
       <div
         class="d-flex align-center justify-center"
         style="width: 60px; height: 60px; border-radius: 8px; overflow: hidden"
       >
-        <div ref="cubeContainer" class="w-100 h-100" style="pointer-events: none" />
+        <div
+          ref="cubeContainer"
+          class="w-100 h-100"
+          style="pointer-events: none"
+        />
       </div>
       <v-divider class="w-100" />
       <div class="d-flex flex-wrap justify-center" style="max-width: 140px">
@@ -261,8 +288,12 @@ watch(hoveredFace, (newFace, oldFace) => {
           @mouseleave="hoveredFace = undefined"
           @click.stop="emit('select', orientation.value)"
         >
-          <v-tooltip activator="parent" location="top">{{ orientation.label }}</v-tooltip>
-          <span class="text-caption font-weight-black">{{ orientation.label }}</span>
+          <v-tooltip activator="parent" location="top">{{
+            orientation.label
+          }}</v-tooltip>
+          <span class="text-caption font-weight-black">{{
+            orientation.label
+          }}</span>
         </v-btn>
       </div>
     </div>

package/app/components/ClippingPlanes.vue

@@ -1,7 +1,10 @@
 <script setup lang="ts">
-import { DEBOUNCE_DELAY, DEFAULT_NORMALS } from "@ogw_front/utils/clipping_planes";
-import ClippingPlaneCard from "@ogw_front/components/ClippingPlaneCard.vue";
-import ToolPanel from "@ogw_front/components/ToolPanel.vue";
+import {
+  DEBOUNCE_DELAY,
+  DEFAULT_NORMALS,
+} from "@ogw_front/utils/clipping_planes";
+import ClippingPlaneCard from "@ogw_front/components/ClippingPlaneCard";
+import ToolPanel from "@ogw_front/components/ToolPanel";
 import { useClippingPlanesWidget } from "@ogw_front/composables/clipping_planes_widget";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useDebounceFn } from "@vueuse/core";
@@ -75,7 +78,9 @@ debouncedApply = useDebounceFn(() => applyClippingPlanes(), DEBOUNCE_DELAY);
 function addPlane() {
   // Index is always in-bounds (modulo the fixed-size list); the fallbacks only
   // Satisfy noUncheckedIndexedAccess and are never hit at runtime.
-  const normal = DEFAULT_NORMALS[planes.value.length % DEFAULT_NORMALS.length] ??
+  const normal = DEFAULT_NORMALS[
+    planes.value.length % DEFAULT_NORMALS.length
+  ] ??
     DEFAULT_NORMALS[0] ?? [1, 0, 0];
   planes.value.push({ origin: getSceneCenter(), normal });
 }
@@ -147,7 +152,10 @@ watch(allItems, () => {
 });
 
 watch(
-  () => Object.values(hybridViewerStore.hybridDb).filter((entry) => entry && entry.actor).length,
+  () =>
+    Object.values(hybridViewerStore.hybridDb).filter(
+      (entry) => entry && entry.actor,
+    ).length,
   (actorCount) => {
     if (show.value && actorCount > 0) {
       updateWidgetPlacement({ isReset: true });
@@ -204,7 +212,9 @@ onBeforeUnmount(cleanupLocalWidget);
       <v-divider class="my-2" />
 
       <v-row align="center" justify="space-between" no-gutters class="mb-2">
-        <v-col class="text-caption font-weight-bold">Planes ({{ planes.length }})</v-col>
+        <v-col class="text-caption font-weight-bold"
+          >Planes ({{ planes.length }})</v-col
+        >
         <v-col cols="auto">
           <v-btn
             data-testid="addPlaneButton"

package/app/components/DeleteDialog.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import GlassCard from "./GlassCard.vue";
+import GlassCard from "./GlassCard";
 
 interface DeleteItem {
   name: string;
@@ -11,7 +11,11 @@ interface Props {
   selectedCount?: number;
 }
 
-const { show = false, item = undefined, selectedCount = 0 } = defineProps<Props>();
+const {
+  show = false,
+  item = undefined,
+  selectedCount = 0,
+} = defineProps<Props>();
 
 const emit = defineEmits<{
   "update:show": [value: boolean];
@@ -20,10 +24,20 @@ const emit = defineEmits<{
 </script>
 
 <template>
-  <v-dialog :model-value="show" @update:model-value="emit('update:show', $event)" max-width="400">
+  <v-dialog
+    :model-value="show"
+    @update:model-value="emit('update:show', $event)"
+    max-width="400"
+  >
     <GlassCard v-if="item" variant="panel" padding="pa-8">
-      <v-card-title class="pb-2 text-h5 font-weight-bold d-flex align-center text-white">
-        <v-icon icon="mdi-trash-can-outline" class="mr-3 text-h4" color="error"></v-icon>
+      <v-card-title
+        class="pb-2 text-h5 font-weight-bold d-flex align-center text-white"
+      >
+        <v-icon
+          icon="mdi-trash-can-outline"
+          class="mr-3 text-h4"
+          color="error"
+        ></v-icon>
         Delete Item
       </v-card-title>
 
@@ -66,8 +80,14 @@ const emit = defineEmits<{
     </GlassCard>
 
     <GlassCard v-else variant="panel" padding="pa-8">
-      <v-card-title class="pb-2 text-h5 font-weight-bold d-flex align-center text-white">
-        <v-icon icon="mdi-alert-circle-outline" class="mr-3 text-h4" color="error"></v-icon>
+      <v-card-title
+        class="pb-2 text-h5 font-weight-bold d-flex align-center text-white"
+      >
+        <v-icon
+          icon="mdi-alert-circle-outline"
+          class="mr-3 text-h4"
+          color="error"
+        ></v-icon>
         Delete Items
       </v-card-title>
 

package/app/components/DragAndDrop.vue

@@ -2,8 +2,8 @@
 // Not auto-fixable (eslint's sort-imports core rule has no autofixer) and this file's import order doesn't match its syntax-kind-then-alphabetical requirement - left as-is rather than manually reordered across the codebase for a purely cosmetic rule.
 // oxlint-disable eslint/sort-imports
 import { onMounted, onUnmounted, ref } from "vue";
-import DragAndDropInline from "./DragAndDropInternal/DragAndDropInline.vue";
-import DragAndDropOverlay from "./DragAndDropInternal/DragAndDropOverlay.vue";
+import DragAndDropInline from "./DragAndDropInternal/DragAndDropInline";
+import DragAndDropOverlay from "./DragAndDropInternal/DragAndDropOverlay";
 
 interface DragAndDropTexts {
   idle: string;
@@ -48,7 +48,10 @@ const fileInput = ref<HTMLInputElement | undefined>(undefined);
 
 const WILDCARD_SUFFIX_LENGTH = 2;
 
-function isFileAccepted(file: File, acceptValue: string | string[] | undefined) {
+function isFileAccepted(
+  file: File,
+  acceptValue: string | string[] | undefined,
+) {
   const fileName = (file.name || "").toLowerCase();
   const fileType = (file.type || "").toLowerCase();
   const isVext = fileName.endsWith(".vext");
@@ -201,7 +204,14 @@ defineExpose({ triggerFileDialog });
     :show-extensions
   />
 
-  <input ref="fileInput" type="file" class="d-none" :multiple :accept @change="handleFileSelect" />
+  <input
+    ref="fileInput"
+    type="file"
+    class="d-none"
+    :multiple
+    :accept
+    @change="handleFileSelect"
+  />
 </template>
 
 <style>

package/app/components/DragAndDropInternal/DragAndDropInline.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import GlassCard from "@ogw_front/components/GlassCard.vue";
+import GlassCard from "@ogw_front/components/GlassCard";
 
 interface DragAndDropTexts {
   idle: string;
@@ -57,7 +57,9 @@ const emit = defineEmits<{
       </v-sheet>
 
       <v-card-text class="pa-0">
-        <v-sheet class="text-h6 font-weight-bold text-white d-block mb-1 bg-transparent">
+        <v-sheet
+          class="text-h6 font-weight-bold text-white d-block mb-1 bg-transparent"
+        >
           {{ loading ? texts.loading : isDragging ? texts.drop : texts.idle }}
         </v-sheet>
         <v-sheet

package/app/components/ExtensionSelector.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json";
 
-import FetchingData from "@ogw_front/components/FetchingData.vue";
+import FetchingData from "@ogw_front/components/FetchingData";
 import { useBackStore } from "@ogw_front/stores/back";
 
 const schema = schemas.opengeodeweb_back.geode_objects_and_output_extensions;
 const emit = defineEmits<{
-  update_values: [values: { output_geode_object: string; output_extension: string }];
+  update_values: [
+    values: { output_geode_object: string; output_extension: string },
+  ];
   increment_step: [];
   decrement_step: [];
 }>();
@@ -19,7 +21,9 @@ interface Props {
 const { geodeObjectType, filenames } = defineProps<Props>();
 type OutputExtensions = Record<string, { is_saveable: boolean }>;
 
-const geode_objects_and_output_extensions = ref<Record<string, OutputExtensions>>({});
+const geode_objects_and_output_extensions = ref<
+  Record<string, OutputExtensions>
+>({});
 const loading = ref(false);
 
 const toggle_loading = useToggle(loading);
@@ -29,18 +33,25 @@ async function get_output_file_extensions() {
   geode_objects_and_output_extensions.value = {};
   const backStore = useBackStore();
   const values: Record<string, OutputExtensions>[] = await Promise.all(
-    filenames.map(async (filename): Promise<Record<string, OutputExtensions>> => {
-      const params = { geode_object_type: geodeObjectType, filename };
-      const response = await backStore.request({ schema, params });
-      return (
-        response as {
-          geode_objects_and_output_extensions: Record<string, OutputExtensions>;
-        }
-      ).geode_objects_and_output_extensions;
-    }),
+    filenames.map(
+      async (filename): Promise<Record<string, OutputExtensions>> => {
+        const params = { geode_object_type: geodeObjectType, filename };
+        const response = await backStore.request({ schema, params });
+        return (
+          response as {
+            geode_objects_and_output_extensions: Record<
+              string,
+              OutputExtensions
+            >;
+          }
+        ).geode_objects_and_output_extensions;
+      },
+    ),
   );
   const all_keys = [...new Set(values.flatMap((value) => Object.keys(value)))];
-  const common_keys = all_keys.filter((i) => !values.some((j) => !Object.keys(j).includes(i)));
+  const common_keys = all_keys.filter(
+    (i) => !values.some((j) => !Object.keys(j).includes(i)),
+  );
   const final_object: Record<string, OutputExtensions> = {};
   for (const key of common_keys) {
     final_object[key] = {};
@@ -78,7 +89,9 @@ await get_output_file_extensions();
   <FetchingData v-if="loading" />
   <v-row v-else class="justify-left">
     <v-col
-      v-for="(output_extensions, output_geode_object) in geode_objects_and_output_extensions"
+      v-for="(
+        output_extensions, output_geode_object
+      ) in geode_objects_and_output_extensions"
       :key="output_geode_object"
       class="justify-left"
     >
@@ -105,7 +118,9 @@ await get_output_file_extensions();
                       class="card ma-2"
                       :color="extension.is_saveable ? 'primary' : 'grey'"
                       hover
-                      @click="update_values(output_geode_object, output_extension)"
+                      @click="
+                        update_values(output_geode_object, output_extension)
+                      "
                       :disabled="!extension.is_saveable"
                     >
                       <v-card-title align="center">

package/app/components/FileSelector.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json";
 
-import FetchingData from "@ogw_front/components/FetchingData.vue";
-import FileUploader from "@ogw_front/components/FileUploader.vue";
+import FetchingData from "@ogw_front/components/FetchingData";
+import FileUploader from "@ogw_front/components/FileUploader";
 import { useBackStore } from "@ogw_front/stores/back";
 
 const schema = schemas.opengeodeweb_back.allowed_files;
@@ -20,7 +20,12 @@ interface Props {
   showOverlay?: boolean;
 }
 
-const { multiple, files = [], autoUpload = true, showOverlay = true } = defineProps<Props>();
+const {
+  multiple,
+  files = [],
+  autoUpload = true,
+  showOverlay = true,
+} = defineProps<Props>();
 
 const internal_files = ref(files);
 const internal_auto_upload = ref(autoUpload);
@@ -56,7 +61,9 @@ async function get_allowed_files() {
   const response = (await backStore.request({ schema })) as {
     extensions: string[];
   };
-  accept.value = response.extensions.map((extension) => `.${extension}`).join(",");
+  accept.value = response.extensions
+    .map((extension) => `.${extension}`)
+    .join(",");
   toggle_loading();
 }
 

package/app/components/FileUploader.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { useBackStore } from "@ogw_front/stores/back";
 
-import CsvPreviewer from "@ogw_front/components/csv-preview/CsvPreviewer.vue";
-import DragAndDrop from "@ogw_front/components/DragAndDrop.vue";
+import CsvPreviewer from "@ogw_front/components/csv-preview/CsvPreviewer";
+import DragAndDrop from "@ogw_front/components/DragAndDrop";
 
 // Files carry extra app-specific bookkeeping fields once picked up here.
 type UploadFile = File & { isConfigured?: boolean; displayName?: string };
@@ -58,7 +58,10 @@ async function onCsvConfirm(result: unknown) {
     return;
   }
   const json_content = JSON.stringify(result, undefined, 2);
-  const base_name = currentFile.name.slice(0, currentFile.name.lastIndexOf("."));
+  const base_name = currentFile.name.slice(
+    0,
+    currentFile.name.lastIndexOf("."),
+  );
   const json_filename = `${base_name}.json`;
 
   const blob = new Blob([json_content], { type: "application/json" });
@@ -93,7 +96,9 @@ function removeFile(index: number) {
 
 async function upload_files() {
   toggle_loading();
-  const promise_array = internal_files.value.map((file) => backStore.upload(file));
+  const promise_array = internal_files.value.map((file) =>
+    backStore.upload(file),
+  );
   await Promise.all(promise_array);
   files_uploaded.value = true;
   toggle_loading();
@@ -106,14 +111,21 @@ watch(
     if (newFiles.length === 0) {
       return;
     }
-    const unconfiguredCsv = newFiles.find((file) => isCsv(file) && !file.isConfigured);
+    const unconfiguredCsv = newFiles.find(
+      (file) => isCsv(file) && !file.isConfigured,
+    );
 
     if (unconfiguredCsv) {
-      openCsvPreviewer(unconfiguredCsv, internal_files.value.indexOf(unconfiguredCsv));
+      openCsvPreviewer(
+        unconfiguredCsv,
+        internal_files.value.indexOf(unconfiguredCsv),
+      );
       return;
     }
 
-    const allConfigured = newFiles.every((file) => !isCsv(file) || file.isConfigured);
+    const allConfigured = newFiles.every(
+      (file) => !isCsv(file) || file.isConfigured,
+    );
 
     if (autoUpload && allConfigured) {
       await upload_files();
@@ -171,8 +183,15 @@ watch(
   <v-card-text v-if="internal_files.length" class="mt-6 pa-0">
     <v-sheet class="d-flex align-center mb-4" color="transparent">
       <v-icon icon="mdi-file-check" class="mr-3" color="primary" size="24" />
-      <span class="text-subtitle-1 font-weight-bold text-white"> Selected files </span>
-      <v-chip size="small" class="ml-3 bg-white-opacity-10" color="white" variant="flat">
+      <span class="text-subtitle-1 font-weight-bold text-white">
+        Selected files
+      </span>
+      <v-chip
+        size="small"
+        class="ml-3 bg-white-opacity-10"
+        color="white"
+        variant="flat"
+      >
         {{ internal_files.length }}
       </v-chip>
       <v-spacer />
@@ -200,7 +219,11 @@ watch(
           style="background: rgba(255, 255, 255, 0.05) !important"
           @click:close="removeFile(index)"
         >
-          <v-icon start size="18" :color="isCsv(file) && file.isConfigured ? 'success' : 'primary'">
+          <v-icon
+            start
+            size="18"
+            :color="isCsv(file) && file.isConfigured ? 'success' : 'primary'"
+          >
             {{
               isCsv(file)
                 ? file.isConfigured
@@ -230,7 +253,9 @@ watch(
           </v-tooltip>
 
           <template #close>
-            <v-icon size="16" class="ml-2 opacity-60 hover-opacity-100">mdi-close-circle</v-icon>
+            <v-icon size="16" class="ml-2 opacity-60 hover-opacity-100"
+              >mdi-close-circle</v-icon
+            >
           </template>
         </v-chip>
       </template>

package/app/components/HybridRenderingView.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import ColormapQuickPicker from "@ogw_front/components/Viewer/Options/ColormapQuickPicker.vue";
-import HybridViewerTooltip from "@ogw_front/components/HybridViewerTooltip.vue";
-import ViewToolbar from "@ogw_front/components/ViewToolbar.vue";
+import ColormapQuickPicker from "@ogw_front/components/Viewer/Options/ColormapQuickPicker";
+import HybridViewerTooltip from "@ogw_front/components/HybridViewerTooltip";
+import ViewToolbar from "@ogw_front/components/ViewToolbar";
 
 import { useDataStore } from "@ogw_front/stores/data";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
@@ -21,10 +21,14 @@ const viewerStore = useViewerStore();
 const menuStore = useMenuStore();
 const dataStore = useDataStore();
 
-const { width: elementWidth, height: elementHeight } = useElementSize(container);
+const { width: elementWidth, height: elementHeight } =
+  useElementSize(container);
 const { width: windowWidth, height: windowHeight } = useWindowSize();
 
-function debounce<Callback extends (...args: unknown[]) => void>(func: Callback, wait: number) {
+function debounce<Callback extends (...args: unknown[]) => void>(
+  func: Callback,
+  wait: number,
+) {
   let timeout: ReturnType<typeof setTimeout> | undefined = undefined;
   return function executedFunction(...args: Parameters<Callback>) {
     function later() {
@@ -93,7 +97,11 @@ async function handleClick(event: PointerEvent) {
 
 <template>
   <ClientOnly>
-    <div data-testid="hybridViewer" class="fill-height" style="position: relative; height: 100%">
+    <div
+      data-testid="hybridViewer"
+      class="fill-height"
+      style="position: relative; height: 100%"
+    >
       <ColormapQuickPicker
         v-model:show="quickColormap.show"
         :x="quickColormap.x"
@@ -102,7 +110,10 @@ async function handleClick(event: PointerEvent) {
       />
       <ViewToolbar />
       <slot name="ui"></slot>
-      <HybridViewerTooltip :container-width="elementWidth" :container-height="elementHeight" />
+      <HybridViewerTooltip
+        :container-width="elementWidth"
+        :container-height="elementHeight"
+      />
       <v-col
         class="pa-0"
         ref="viewer"

package/app/components/HybridViewerTooltip.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import GlassCard from "@ogw_front/components/GlassCard.vue";
+import GlassCard from "@ogw_front/components/GlassCard";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 
 const TOOLTIP_SCREEN_MARGIN = 10;
@@ -14,7 +14,8 @@ const { containerWidth, containerHeight } = defineProps<Props>();
 const hybridViewerStore = useHybridViewerStore();
 
 const tooltipRef = useTemplateRef("tooltip");
-const { width: tooltipWidth, height: tooltipHeight } = useElementSize(tooltipRef);
+const { width: tooltipWidth, height: tooltipHeight } =
+  useElementSize(tooltipRef);
 
 const tooltipStyle = computed(() => {
   if (!hybridViewerStore.hoverData) {
@@ -92,7 +93,9 @@ function capitalize(val: string) {
 
 const fieldTypeLabel = computed(() => {
   const fieldType = hybridViewerStore.hoverData?.fieldType;
-  return typeof fieldType === "string" ? capitalize(fieldType.toLowerCase()) : "";
+  return typeof fieldType === "string"
+    ? capitalize(fieldType.toLowerCase())
+    : "";
 });
 
 const coordinates = computed<number[] | undefined>(() => {
@@ -147,7 +150,10 @@ function formatAttributeValue(val: unknown) {
         <v-col>
           <span class="tooltip-label">Id:</span>
           <span class="tooltip-value-dim font-mono">
-            {{ hybridViewerStore.hoverData.component?.id || hybridViewerStore.hoverData.modelId }}
+            {{
+              hybridViewerStore.hoverData.component?.id ||
+              hybridViewerStore.hoverData.modelId
+            }}
           </span>
         </v-col>
         <v-col v-if="originalIndex !== undefined">
@@ -169,7 +175,8 @@ function formatAttributeValue(val: unknown) {
           <v-col v-if="coordinates" class="d-flex justify-space-between ga-3">
             <span class="tooltip-label">Position:</span>
             <span class="tooltip-value font-mono">
-              [ {{ Number(coordinates[0]).toFixed(3) }}, {{ Number(coordinates[1]).toFixed(3) }},
+              [ {{ Number(coordinates[0]).toFixed(3) }},
+              {{ Number(coordinates[1]).toFixed(3) }},
               {{ Number(coordinates[2]).toFixed(3) }} ]
             </span>
           </v-col>

package/app/components/Launcher.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import Loading from "@ogw_front/components/Loading.vue";
-import Recaptcha from "@ogw_front/components/Recaptcha.vue";
+import Loading from "@ogw_front/components/Loading";
+import Recaptcha from "@ogw_front/components/Recaptcha";
 import { Status } from "@ogw_front/utils/status";
 import { appMode } from "@ogw_shared/app_mode";
 import { useInfraStore } from "@ogw_front/stores/infra";
@@ -12,7 +12,12 @@ interface Props {
   logo?: string;
 }
 
-const { appName, email = undefined, isUserAuthenticated = false, logo = "" } = defineProps<Props>();
+const {
+  appName,
+  email = undefined,
+  isUserAuthenticated = false,
+  logo = "",
+} = defineProps<Props>();
 
 const infraStore = useInfraStore();
 if (infraStore.app_mode !== appMode.CLOUD) {