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

package/app/components/CameraManager.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import List from "@ogw_front/components/CameraManager/List";
-import Saver from "@ogw_front/components/CameraManager/Saver";
-import ToolPanel from "@ogw_front/components/ToolPanel";
+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";
 
 const DEFAULT_PANEL_WIDTH = 260;
 
@@ -40,12 +40,7 @@ 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";
+import ToolPanel from "@ogw_front/components/ToolPanel.vue";
 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,9 +166,7 @@ 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)",
@@ -195,17 +193,10 @@ 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"
@@ -213,9 +204,7 @@ 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)"
@@ -226,10 +215,7 @@ 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
@@ -245,34 +231,21 @@ 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">
@@ -288,12 +261,8 @@ 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,10 +1,7 @@
 <script setup lang="ts">
-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 { 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 { useClippingPlanesWidget } from "@ogw_front/composables/clipping_planes_widget";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useDebounceFn } from "@vueuse/core";
@@ -78,9 +75,7 @@ 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 });
 }
@@ -152,10 +147,7 @@ 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 });
@@ -212,9 +204,7 @@ 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";
+import GlassCard from "./GlassCard.vue";
 
 interface DeleteItem {
   name: string;
@@ -11,11 +11,7 @@ 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];
@@ -24,20 +20,10 @@ 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>
 
@@ -80,14 +66,8 @@ 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";
-import DragAndDropOverlay from "./DragAndDropInternal/DragAndDropOverlay";
+import DragAndDropInline from "./DragAndDropInternal/DragAndDropInline.vue";
+import DragAndDropOverlay from "./DragAndDropInternal/DragAndDropOverlay.vue";
 
 interface DragAndDropTexts {
   idle: string;
@@ -48,10 +48,7 @@ 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");
@@ -204,14 +201,7 @@ 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";
+import GlassCard from "@ogw_front/components/GlassCard.vue";
 
 interface DragAndDropTexts {
   idle: string;
@@ -57,9 +57,7 @@ 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,14 +1,12 @@
 <script setup lang="ts">
 import schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json";
 
-import FetchingData from "@ogw_front/components/FetchingData";
+import FetchingData from "@ogw_front/components/FetchingData.vue";
 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: [];
 }>();
@@ -21,9 +19,7 @@ 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);
@@ -33,25 +29,18 @@ 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] = {};
@@ -89,9 +78,7 @@ 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"
     >
@@ -118,9 +105,7 @@ 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";
-import FileUploader from "@ogw_front/components/FileUploader";
+import FetchingData from "@ogw_front/components/FetchingData.vue";
+import FileUploader from "@ogw_front/components/FileUploader.vue";
 import { useBackStore } from "@ogw_front/stores/back";
 
 const schema = schemas.opengeodeweb_back.allowed_files;
@@ -20,12 +20,7 @@ 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);
@@ -61,9 +56,7 @@ 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";
-import DragAndDrop from "@ogw_front/components/DragAndDrop";
+import CsvPreviewer from "@ogw_front/components/csv-preview/CsvPreviewer.vue";
+import DragAndDrop from "@ogw_front/components/DragAndDrop.vue";
 
 // Files carry extra app-specific bookkeeping fields once picked up here.
 type UploadFile = File & { isConfigured?: boolean; displayName?: string };
@@ -58,10 +58,7 @@ 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" });
@@ -96,9 +93,7 @@ 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();
@@ -111,21 +106,14 @@ 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();
@@ -183,15 +171,8 @@ 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 />
@@ -219,11 +200,7 @@ 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
@@ -253,9 +230,7 @@ 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";
-import HybridViewerTooltip from "@ogw_front/components/HybridViewerTooltip";
-import ViewToolbar from "@ogw_front/components/ViewToolbar";
+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 { useDataStore } from "@ogw_front/stores/data";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
@@ -21,14 +21,10 @@ 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() {
@@ -97,11 +93,7 @@ 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"
@@ -110,10 +102,7 @@ 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";
+import GlassCard from "@ogw_front/components/GlassCard.vue";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 
 const TOOLTIP_SCREEN_MARGIN = 10;
@@ -14,8 +14,7 @@ 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) {
@@ -93,9 +92,7 @@ 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>(() => {
@@ -150,10 +147,7 @@ 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">
@@ -175,8 +169,7 @@ 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";
-import Recaptcha from "@ogw_front/components/Recaptcha";
+import Loading from "@ogw_front/components/Loading.vue";
+import Recaptcha from "@ogw_front/components/Recaptcha.vue";
 import { Status } from "@ogw_front/utils/status";
 import { appMode } from "@ogw_shared/app_mode";
 import { useInfraStore } from "@ogw_front/stores/infra";
@@ -12,12 +12,7 @@ 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) {