From 4da05b900241200576ab62a0d9e6220b6a1a98b4 Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Wed, 29 Apr 2026 17:34:08 +0200
Subject: [PATCH 1/9] feat(SaveCamera): Save State of the camera

---
 app/components/CameraManager.vue             | 209 +++++++++++++++++++
 app/components/VeaseViewToolbar.vue          |  27 ++-
 app/components/ViewToolbar.vue               |  19 +-
 app/stores/camera_manager.js                 |  62 ++++++
 app/stores/hybrid_viewer.js                  |   9 +
 internal/database/base_database.js           |   2 +
 internal/database/database.js                |   2 +-
 internal/database/tables/camera_positions.js |   4 +
 8 files changed, 330 insertions(+), 4 deletions(-)
 create mode 100644 app/components/CameraManager.vue
 create mode 100644 app/stores/camera_manager.js
 create mode 100644 internal/database/tables/camera_positions.js

diff --git a/app/components/CameraManager.vue b/app/components/CameraManager.vue
new file mode 100644
index 00000000..f1b643d3
--- /dev/null
+++ b/app/components/CameraManager.vue
@@ -0,0 +1,209 @@
+<script setup>
+import GlassCard from "@ogw_front/components/GlassCard";
+import { useCameraManagerStore } from "@ogw_front/stores/camera_manager";
+import { useDataStore } from "@ogw_front/stores/data";
+import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
+
+const emit = defineEmits(["close"]);
+
+const { show_dialog, width } = defineProps({
+  show_dialog: { type: Boolean, required: true },
+  width: { type: Number, required: false, default: 450 },
+});
+
+const cameraManagerStore = useCameraManagerStore();
+const dataStore = useDataStore();
+const hybridViewerStore = useHybridViewerStore();
+
+const savedPositions = cameraManagerStore.refAllCameraPositions();
+const allObjects = dataStore.refAllItems();
+
+const newPositionName = ref("");
+const selectedObjectId = ref(undefined);
+
+const editingId = ref(undefined);
+const editingName = ref("");
+
+async function saveCurrentPosition() {
+  if (!newPositionName.value) {
+    return;
+  }
+  await cameraManagerStore.saveCameraPosition(
+    newPositionName.value,
+    selectedObjectId.value,
+  );
+  newPositionName.value = "";
+  selectedObjectId.value = undefined;
+}
+
+async function restorePosition(id) {
+  const position = await cameraManagerStore.getCameraPosition(id);
+  if (position) {
+    if (hybridViewerStore.status === "CREATED") {
+      hybridViewerStore.setCamera(position.camera_options);
+    } else {
+      await cameraManagerStore.restoreCameraPosition(id);
+    }
+  }
+}
+
+async function deletePosition(id) {
+  await cameraManagerStore.deleteCameraPosition(id);
+}
+
+function startEditing(position) {
+  editingId.value = position.id;
+  editingName.value = position.name;
+}
+
+async function saveRename() {
+  if (editingName.value) {
+    await cameraManagerStore.renameCameraPosition(
+      editingId.value,
+      editingName.value,
+    );
+  }
+  editingId.value = undefined;
+}
+
+function getObjectName(objectId) {
+  if (!objectId) {
+    return "None";
+  }
+  const obj = allObjects.value.find((o) => o.id === objectId);
+  return obj ? obj.name : "Unknown";
+}
+</script>
+
+<template>
+  <GlassCard
+    v-if="show_dialog"
+    @click.stop
+    title="Camera Positions"
+    :width="width"
+    :ripple="false"
+    variant="panel"
+    padding="pa-0"
+    class="position-absolute elevation-24"
+    style="z-index: 2; top: 90px; right: 55px"
+  >
+    <v-card-text class="pa-5">
+      <v-container class="pa-0">
+        <!-- Save Current Position Section -->
+        <v-row dense align="center">
+          <v-col cols="5">
+            <v-text-field
+              v-model="newPositionName"
+              label="Name"
+              density="compact"
+              hide-details
+            ></v-text-field>
+          </v-col>
+          <v-col cols="4">
+            <v-select
+              v-model="selectedObjectId"
+              :items="allObjects"
+              item-title="name"
+              item-value="id"
+              label="Attach to (optional)"
+              density="compact"
+              hide-details
+              clearable
+            ></v-select>
+          </v-col>
+          <v-col cols="3" class="text-right">
+            <v-btn
+              color="primary"
+              variant="elevated"
+              size="small"
+              :disabled="!newPositionName"
+              @click="saveCurrentPosition"
+            >
+              Save
+            </v-btn>
+          </v-col>
+        </v-row>
+
+        <v-divider class="my-4"></v-divider>
+
+        <!-- Saved Positions List -->
+        <v-list v-if="savedPositions.length > 0" class="bg-transparent pa-0">
+          <v-list-item
+            v-for="position in savedPositions"
+            :key="position.id"
+            class="px-0"
+            :ripple="false"
+          >
+            <template #prepend>
+              <v-btn
+                icon="mdi-play"
+                variant="text"
+                color="success"
+                size="small"
+                @click="restorePosition(position.id)"
+              >
+                <v-tooltip activator="parent" location="top">Restore</v-tooltip>
+              </v-btn>
+            </template>
+
+            <v-list-item-title>
+              <template v-if="editingId === position.id">
+                <v-text-field
+                  v-model="editingName"
+                  density="compact"
+                  hide-details
+                  autofocus
+                  @keyup.enter="saveRename"
+                  @blur="saveRename"
+                ></v-text-field>
+              </template>
+              <template v-else>
+                <span class="font-weight-bold">{{ position.name }}</span>
+                <div class="text-caption text-grey">
+                  Attached to: {{ getObjectName(position.object_id) }}
+                </div>
+              </template>
+            </v-list-item-title>
+
+            <template #append>
+              <v-btn
+                icon="mdi-pencil"
+                variant="text"
+                size="small"
+                @click="startEditing(position)"
+              >
+                <v-tooltip activator="parent" location="top">Rename</v-tooltip>
+              </v-btn>
+              <v-btn
+                icon="mdi-delete"
+                variant="text"
+                color="error"
+                size="small"
+                @click="deletePosition(position.id)"
+              >
+                <v-tooltip activator="parent" location="top">Delete</v-tooltip>
+              </v-btn>
+            </template>
+          </v-list-item>
+        </v-list>
+        <div v-else class="text-center text-grey py-4">
+          No saved positions yet.
+        </div>
+      </v-container>
+    </v-card-text>
+
+    <template #actions>
+      <v-card-actions class="justify-end pb-4 px-5">
+        <v-btn variant="text" color="primary" @click="emit('close')"
+          >Close</v-btn
+        >
+      </v-card-actions>
+    </template>
+  </GlassCard>
+</template>
+
+<style scoped>
+:deep(.v-list-item__prepend) {
+  margin-inline-end: 12px !important;
+}
+</style>
diff --git a/app/components/VeaseViewToolbar.vue b/app/components/VeaseViewToolbar.vue
index 195094e2..d2340270 100644
--- a/app/components/VeaseViewToolbar.vue
+++ b/app/components/VeaseViewToolbar.vue
@@ -2,6 +2,7 @@
 import schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
 import ActionButton from "@ogw_front/components/ActionButton.vue";
+import CameraManager from "@ogw_front/components/CameraManager";
 import Screenshot from "@ogw_front/components/Screenshot";
 import ZScaling from "@ogw_front/components/ZScaling";
 
@@ -11,6 +12,7 @@ import { useViewerStore } from "@ogw_front/stores/viewer";
 const hybridViewerStore = useHybridViewerStore();
 const viewerStore = useViewerStore();
 const take_screenshot = ref(false);
+const show_camera_manager = ref(false);
 const showZScaling = ref(false);
 const grid_scale = ref(false);
 const zScale = ref(hybridViewerStore.zScale);
@@ -35,6 +37,13 @@ const camera_options = [
       hybridViewerStore.resetCamera();
     },
   },
+  {
+    tooltip: "Manage camera positions",
+    icon: "mdi-camera-retake",
+    action: () => {
+      show_camera_manager.value = !show_camera_manager.value;
+    },
+  },
   {
     tooltip: "Take a screenshot",
     icon: "mdi-camera",
@@ -70,18 +79,32 @@ const camera_options = [
 
 <template>
   <v-container :class="[$style.floatToolbar, 'pa-0']" width="auto">
-    <v-row v-for="camera_option in camera_options" :key="camera_option.icon" dense>
+    <v-row
+      v-for="camera_option in camera_options"
+      :key="camera_option.icon"
+      dense
+    >
       <v-col>
         <ActionButton
           :icon="camera_option.icon"
           :tooltip="camera_option.tooltip"
+          tooltip-location="left"
           @click.stop="camera_option.action"
         />
       </v-col>
     </v-row>
   </v-container>
   <Screenshot :show_dialog="take_screenshot" @close="take_screenshot = false" />
-  <ZScaling v-if="showZScaling" v-model="zScale" :width="400" @close="handleZScalingClose" />
+  <CameraManager
+    :show_dialog="show_camera_manager"
+    @close="show_camera_manager = false"
+  />
+  <ZScaling
+    v-if="showZScaling"
+    v-model="zScale"
+    :width="400"
+    @close="handleZScalingClose"
+  />
 </template>
 
 <style module>
diff --git a/app/components/ViewToolbar.vue b/app/components/ViewToolbar.vue
index ed5811f7..c1173ac6 100644
--- a/app/components/ViewToolbar.vue
+++ b/app/components/ViewToolbar.vue
@@ -2,11 +2,13 @@
 import schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
 import ActionButton from "@ogw_front/components/ActionButton.vue";
+import CameraManager from "@ogw_front/components/CameraManager";
 import Screenshot from "@ogw_front/components/Screenshot";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 
 const viewerStore = useViewerStore();
 const take_screenshot = ref(false);
+const show_camera_manager = ref(false);
 const grid_scale = ref(false);
 
 const camera_options = [
@@ -17,6 +19,13 @@ const camera_options = [
       viewerStore.request(schemas.opengeodeweb_viewer.viewer.reset_camera);
     },
   },
+  {
+    tooltip: "Manage camera positions",
+    icon: "mdi-camera-retake",
+    action: () => {
+      show_camera_manager.value = !show_camera_manager.value;
+    },
+  },
   {
     tooltip: "Take a screenshot",
     icon: "mdi-camera",
@@ -44,7 +53,11 @@ const camera_options = [
 
 <template>
   <v-container :class="[$style.floatToolbar, 'pa-0']" width="auto">
-    <v-row v-for="camera_option in camera_options" :key="camera_option.icon" dense>
+    <v-row
+      v-for="camera_option in camera_options"
+      :key="camera_option.icon"
+      dense
+    >
       <v-col>
         <ActionButton
           :tooltip="camera_option.tooltip"
@@ -56,6 +69,10 @@ const camera_options = [
     </v-row>
   </v-container>
   <Screenshot :show_dialog="take_screenshot" @close="take_screenshot = false" />
+  <CameraManager
+    :show_dialog="show_camera_manager"
+    @close="show_camera_manager = false"
+  />
 </template>
 
 <style module>
diff --git a/app/stores/camera_manager.js b/app/stores/camera_manager.js
new file mode 100644
index 00000000..9768c450
--- /dev/null
+++ b/app/stores/camera_manager.js
@@ -0,0 +1,62 @@
+// Third party imports
+import { liveQuery } from "dexie";
+import { useObservable } from "@vueuse/rxjs";
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
+
+// Local imports
+import { database } from "@ogw_internal/database/database.js";
+import { useViewerStore } from "@ogw_front/stores/viewer";
+
+export const useCameraManagerStore = defineStore("camera_manager", () => {
+  const viewerStore = useViewerStore();
+
+  function refAllCameraPositions() {
+    return useObservable(
+      liveQuery(() => database.camera_positions.toArray()),
+      { initialValue: [] },
+    );
+  }
+ 
+  async function getCameraPosition(id) {
+    return await database.camera_positions.get(id);
+  }
+
+  async function saveCameraPosition(name, object_id = undefined) {
+    const response = await viewerStore.request(
+      viewer_schemas.opengeodeweb_viewer.viewer.get_camera,
+    );
+    const { camera_options } = response;
+
+    await database.camera_positions.put({
+      name,
+      object_id,
+      camera_options,
+    });
+  }
+
+  async function restoreCameraPosition(id) {
+    const position = await database.camera_positions.get(id);
+    if (position) {
+      await viewerStore.request(viewer_schemas.opengeodeweb_viewer.viewer.update_camera, {
+        camera_options: position.camera_options,
+      });
+    }
+  }
+
+  async function deleteCameraPosition(id) {
+    await database.camera_positions.delete(id);
+  }
+
+  async function renameCameraPosition(id, newName) {
+    await database.camera_positions.update(id, { name: newName });
+  }
+
+  return {
+    refAllCameraPositions,
+    getCameraPosition,
+    saveCameraPosition,
+    restoreCameraPosition,
+    deleteCameraPosition,
+    renameCameraPosition,
+  };
+});
diff --git a/app/stores/hybrid_viewer.js b/app/stores/hybrid_viewer.js
index 22abc430..d77deb86 100644
--- a/app/stores/hybrid_viewer.js
+++ b/app/stores/hybrid_viewer.js
@@ -146,6 +146,14 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
     genericRenderWindow.value.getRenderWindow().render();
     syncRemoteCamera();
   }
+ 
+  function setCamera(new_camera_options) {
+    const renderer = genericRenderWindow.value.getRenderer();
+    const camera = renderer.getActiveCamera();
+    applyCameraOptions(camera, new_camera_options);
+    genericRenderWindow.value.getRenderWindow().render();
+    syncRemoteCamera();
+  }
 
   function syncRemoteCamera() {
     const renderer = genericRenderWindow.value.getRenderer();
@@ -300,6 +308,7 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
     setVisibility,
     setZScaling,
     syncRemoteCamera,
+    setCamera,
     initHybridViewer,
     remoteRender,
     resize,
diff --git a/internal/database/base_database.js b/internal/database/base_database.js
index a61c9f29..ffd92190 100644
--- a/internal/database/base_database.js
+++ b/internal/database/base_database.js
@@ -5,6 +5,7 @@ import { modelComponentDataStyleTable } from "./tables/model_component_datastyle
 import { modelComponentTypeDataStyleTable } from "./tables/model_component_type_datastyle";
 import { modelComponentsRelationTable } from "./tables/model_components_relation";
 import { modelComponentsTable } from "./tables/model_components";
+import { cameraPositionsTable } from "./tables/camera_positions";
 
 export class BaseDatabase extends Dexie {
   static get initialStores() {
@@ -15,6 +16,7 @@ export class BaseDatabase extends Dexie {
       [modelComponentDataStyleTable.name]: modelComponentDataStyleTable.schema,
       [modelComponentTypeDataStyleTable.name]: modelComponentTypeDataStyleTable.schema,
       [modelComponentsRelationTable.name]: modelComponentsRelationTable.schema,
+      [cameraPositionsTable.name]: cameraPositionsTable.schema,
       treeview_config: "id",
     };
   }
diff --git a/internal/database/database.js b/internal/database/database.js
index 760ac001..96f10829 100644
--- a/internal/database/database.js
+++ b/internal/database/database.js
@@ -6,7 +6,7 @@ class Database extends BaseDatabase {
   constructor() {
     super("Database");
 
-    this.version(1).stores(BaseDatabase.initialStores);
+    this.version(2).stores(BaseDatabase.initialStores);
   }
 
   static async addTable(tableName, schemaDefinition) {
diff --git a/internal/database/tables/camera_positions.js b/internal/database/tables/camera_positions.js
new file mode 100644
index 00000000..799a8ce0
--- /dev/null
+++ b/internal/database/tables/camera_positions.js
@@ -0,0 +1,4 @@
+export const cameraPositionsTable = {
+  name: "camera_positions",
+  schema: "++id, name, object_id",
+};

From 86a509009ad8c17a55aedf829c6476e8f2cc2603 Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Wed, 29 Apr 2026 17:40:54 +0200
Subject: [PATCH 2/9] change ui

---
 app/components/CameraManager.vue | 162 ++++++++++++++++++-------------
 internal/database/database.js    |   2 +-
 2 files changed, 93 insertions(+), 71 deletions(-)

diff --git a/app/components/CameraManager.vue b/app/components/CameraManager.vue
index f1b643d3..b39ee84a 100644
--- a/app/components/CameraManager.vue
+++ b/app/components/CameraManager.vue
@@ -39,7 +39,7 @@ async function saveCurrentPosition() {
 async function restorePosition(id) {
   const position = await cameraManagerStore.getCameraPosition(id);
   if (position) {
-    if (hybridViewerStore.status === "CREATED") {
+    if (hybridViewerStore.genericRenderWindow) {
       hybridViewerStore.setCamera(position.camera_options);
     } else {
       await cameraManagerStore.restoreCameraPosition(id);
@@ -87,118 +87,140 @@ function getObjectName(objectId) {
     class="position-absolute elevation-24"
     style="z-index: 2; top: 90px; right: 55px"
   >
-    <v-card-text class="pa-5">
-      <v-container class="pa-0">
-        <!-- Save Current Position Section -->
-        <v-row dense align="center">
-          <v-col cols="5">
+    <v-card-text class="pa-0">
+      <!-- Save Current Position Section -->
+      <v-container class="pa-5 pb-2 bg-surface-variant-lighten-5">
+        <v-row dense>
+          <v-col cols="12">
             <v-text-field
               v-model="newPositionName"
-              label="Name"
+              label="Position Name"
+              placeholder="e.g. Front View"
               density="compact"
+              variant="outlined"
               hide-details
+              class="mb-3"
             ></v-text-field>
           </v-col>
-          <v-col cols="4">
+          <v-col cols="8">
             <v-select
               v-model="selectedObjectId"
               :items="allObjects"
               item-title="name"
               item-value="id"
-              label="Attach to (optional)"
+              label="Attach to Object"
+              placeholder="Optional"
               density="compact"
+              variant="outlined"
               hide-details
               clearable
             ></v-select>
           </v-col>
-          <v-col cols="3" class="text-right">
+          <v-col cols="4" class="d-flex align-center">
             <v-btn
               color="primary"
               variant="elevated"
-              size="small"
+              block
               :disabled="!newPositionName"
               @click="saveCurrentPosition"
+              height="40"
             >
               Save
             </v-btn>
           </v-col>
         </v-row>
+      </v-container>
 
-        <v-divider class="my-4"></v-divider>
-
-        <!-- Saved Positions List -->
-        <v-list v-if="savedPositions.length > 0" class="bg-transparent pa-0">
-          <v-list-item
-            v-for="position in savedPositions"
-            :key="position.id"
-            class="px-0"
-            :ripple="false"
-          >
-            <template #prepend>
-              <v-btn
-                icon="mdi-play"
-                variant="text"
-                color="success"
-                size="small"
-                @click="restorePosition(position.id)"
-              >
-                <v-tooltip activator="parent" location="top">Restore</v-tooltip>
-              </v-btn>
-            </template>
-
-            <v-list-item-title>
-              <template v-if="editingId === position.id">
-                <v-text-field
-                  v-model="editingName"
-                  density="compact"
-                  hide-details
-                  autofocus
-                  @keyup.enter="saveRename"
-                  @blur="saveRename"
-                ></v-text-field>
-              </template>
-              <template v-else>
-                <span class="font-weight-bold">{{ position.name }}</span>
-                <div class="text-caption text-grey">
-                  Attached to: {{ getObjectName(position.object_id) }}
-                </div>
-              </template>
-            </v-list-item-title>
-
-            <template #append>
+      <v-divider></v-divider>
+
+      <!-- Saved Positions List -->
+      <v-list
+        v-if="savedPositions.length > 0"
+        class="bg-transparent pa-2"
+        lines="two"
+      >
+        <v-list-item
+          v-for="position in savedPositions"
+          :key="position.id"
+          class="rounded-lg mb-1"
+          :active="editingId === position.id"
+          active-color="primary"
+        >
+          <template #prepend>
+            <v-btn
+              icon
+              variant="tonal"
+              color="success"
+              size="small"
+              class="mr-2"
+              @click="restorePosition(position.id)"
+            >
+              <v-icon size="20">mdi-play</v-icon>
+              <v-tooltip activator="parent" location="top">Restore</v-tooltip>
+            </v-btn>
+          </template>
+
+          <v-list-item-title class="font-weight-bold">
+            <v-text-field
+              v-if="editingId === position.id"
+              v-model="editingName"
+              density="compact"
+              variant="underlined"
+              hide-details
+              autofocus
+              @keyup.enter="saveRename"
+              @blur="saveRename"
+            ></v-text-field>
+            <span v-else>{{ position.name }}</span>
+          </v-list-item-title>
+
+          <v-list-item-subtitle v-if="editingId !== position.id">
+            <v-icon size="14" class="mr-1">mdi-paperclip</v-icon>
+            {{ getObjectName(position.object_id) }}
+          </v-list-item-subtitle>
+
+          <template #append>
+            <div class="d-flex g-1">
               <v-btn
-                icon="mdi-pencil"
+                icon
                 variant="text"
                 size="small"
+                color="grey-darken-1"
                 @click="startEditing(position)"
               >
+                <v-icon size="18">mdi-pencil</v-icon>
                 <v-tooltip activator="parent" location="top">Rename</v-tooltip>
               </v-btn>
               <v-btn
-                icon="mdi-delete"
+                icon
                 variant="text"
-                color="error"
                 size="small"
+                color="error"
                 @click="deletePosition(position.id)"
               >
+                <v-icon size="18">mdi-delete</v-icon>
                 <v-tooltip activator="parent" location="top">Delete</v-tooltip>
               </v-btn>
-            </template>
-          </v-list-item>
-        </v-list>
-        <div v-else class="text-center text-grey py-4">
-          No saved positions yet.
-        </div>
-      </v-container>
+            </div>
+          </template>
+        </v-list-item>
+      </v-list>
+      <div v-else class="text-center text-grey-lighten-1 py-8 italic">
+        <v-icon size="48" class="mb-2 d-block mx-auto opacity-20"
+          >mdi-camera-off</v-icon
+        >
+        No saved positions yet.
+      </div>
     </v-card-text>
 
-    <template #actions>
-      <v-card-actions class="justify-end pb-4 px-5">
-        <v-btn variant="text" color="primary" @click="emit('close')"
-          >Close</v-btn
-        >
-      </v-card-actions>
-    </template>
+    <v-divider></v-divider>
+
+    <v-card-actions class="pa-4">
+      <v-spacer></v-spacer>
+      <v-btn variant="text" color="grey-darken-1" @click="emit('close')"
+        >Close</v-btn
+      >
+    </v-card-actions>
   </GlassCard>
 </template>
 
diff --git a/internal/database/database.js b/internal/database/database.js
index 96f10829..0d0735c8 100644
--- a/internal/database/database.js
+++ b/internal/database/database.js
@@ -6,7 +6,7 @@ class Database extends BaseDatabase {
   constructor() {
     super("Database");
 
-    this.version(2).stores(BaseDatabase.initialStores);
+    this.version(3).stores(BaseDatabase.initialStores);
   }
 
   static async addTable(tableName, schemaDefinition) {

From 0f0bbee8737e3d2773ecdd723445f47781af6a25 Mon Sep 17 00:00:00 2001
From: SpliiT <106495600+SpliiT@users.noreply.github.com>
Date: Thu, 30 Apr 2026 11:34:56 +0000
Subject: [PATCH 3/9] Apply prepare changes

---
 app/components/ActionButton.vue  |  8 +++-----
 app/components/CameraManager.vue | 24 +++++-------------------
 app/components/ViewToolbar.vue   | 11 ++---------
 app/stores/camera_manager.js     |  2 +-
 app/stores/hybrid_viewer.js      |  2 +-
 5 files changed, 12 insertions(+), 35 deletions(-)

diff --git a/app/components/ActionButton.vue b/app/components/ActionButton.vue
index 9ea77661..807fccc1 100644
--- a/app/components/ActionButton.vue
+++ b/app/components/ActionButton.vue
@@ -25,11 +25,9 @@ const emit = defineEmits(["click"]);
     icon
     @click="emit('click', $event)"
   >
-    <v-icon
-      v-if="typeof icon === 'string' && icon.startsWith('mdi-')"
-      :size="iconSize"
-      >{{ icon }}</v-icon
-    >
+    <v-icon v-if="typeof icon === 'string' && icon.startsWith('mdi-')" :size="iconSize">{{
+      icon
+    }}</v-icon>
     <v-img
       v-else
       :src="icon"
diff --git a/app/components/CameraManager.vue b/app/components/CameraManager.vue
index b39ee84a..7170fd7a 100644
--- a/app/components/CameraManager.vue
+++ b/app/components/CameraManager.vue
@@ -28,10 +28,7 @@ async function saveCurrentPosition() {
   if (!newPositionName.value) {
     return;
   }
-  await cameraManagerStore.saveCameraPosition(
-    newPositionName.value,
-    selectedObjectId.value,
-  );
+  await cameraManagerStore.saveCameraPosition(newPositionName.value, selectedObjectId.value);
   newPositionName.value = "";
   selectedObjectId.value = undefined;
 }
@@ -58,10 +55,7 @@ function startEditing(position) {
 
 async function saveRename() {
   if (editingName.value) {
-    await cameraManagerStore.renameCameraPosition(
-      editingId.value,
-      editingName.value,
-    );
+    await cameraManagerStore.renameCameraPosition(editingId.value, editingName.value);
   }
   editingId.value = undefined;
 }
@@ -134,11 +128,7 @@ function getObjectName(objectId) {
       <v-divider></v-divider>
 
       <!-- Saved Positions List -->
-      <v-list
-        v-if="savedPositions.length > 0"
-        class="bg-transparent pa-2"
-        lines="two"
-      >
+      <v-list v-if="savedPositions.length > 0" class="bg-transparent pa-2" lines="two">
         <v-list-item
           v-for="position in savedPositions"
           :key="position.id"
@@ -206,9 +196,7 @@ function getObjectName(objectId) {
         </v-list-item>
       </v-list>
       <div v-else class="text-center text-grey-lighten-1 py-8 italic">
-        <v-icon size="48" class="mb-2 d-block mx-auto opacity-20"
-          >mdi-camera-off</v-icon
-        >
+        <v-icon size="48" class="mb-2 d-block mx-auto opacity-20">mdi-camera-off</v-icon>
         No saved positions yet.
       </div>
     </v-card-text>
@@ -217,9 +205,7 @@ function getObjectName(objectId) {
 
     <v-card-actions class="pa-4">
       <v-spacer></v-spacer>
-      <v-btn variant="text" color="grey-darken-1" @click="emit('close')"
-        >Close</v-btn
-      >
+      <v-btn variant="text" color="grey-darken-1" @click="emit('close')">Close</v-btn>
     </v-card-actions>
   </GlassCard>
 </template>
diff --git a/app/components/ViewToolbar.vue b/app/components/ViewToolbar.vue
index 95cd242d..cf5a13fb 100644
--- a/app/components/ViewToolbar.vue
+++ b/app/components/ViewToolbar.vue
@@ -90,11 +90,7 @@ const camera_options = [
 
 <template>
   <v-container :class="[$style.floatToolbar, 'pa-0']" width="auto">
-    <v-row
-      v-for="camera_option in camera_options"
-      :key="camera_option.icon"
-      dense
-    >
+    <v-row v-for="camera_option in camera_options" :key="camera_option.icon" dense>
       <v-col>
         <ActionButton
           :icon="camera_option.icon"
@@ -112,10 +108,7 @@ const camera_options = [
     @select="hybridViewerStore.setCameraOrientation"
   />
   <Screenshot v-model="take_screenshot" />
-  <CameraManager
-    :show_dialog="show_camera_manager"
-    @close="show_camera_manager = false"
-  />
+  <CameraManager :show_dialog="show_camera_manager" @close="show_camera_manager = false" />
   <ZScaling
     v-model:show="showZScaling"
     v-model="zScale"
diff --git a/app/stores/camera_manager.js b/app/stores/camera_manager.js
index 9768c450..f0f1a6e7 100644
--- a/app/stores/camera_manager.js
+++ b/app/stores/camera_manager.js
@@ -16,7 +16,7 @@ export const useCameraManagerStore = defineStore("camera_manager", () => {
       { initialValue: [] },
     );
   }
- 
+
   async function getCameraPosition(id) {
     return await database.camera_positions.get(id);
   }
diff --git a/app/stores/hybrid_viewer.js b/app/stores/hybrid_viewer.js
index 6253189c..1839fd1b 100644
--- a/app/stores/hybrid_viewer.js
+++ b/app/stores/hybrid_viewer.js
@@ -151,7 +151,7 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
     genericRenderWindow.value.getRenderWindow().render();
     syncRemoteCamera();
   }
- 
+
   function setCamera(new_camera_options) {
     const renderer = genericRenderWindow.value.getRenderer();
     const camera = renderer.getActiveCamera();

From a5771400912d49a50dab7f4ecc4b7ef5a44e2f6c Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Thu, 30 Apr 2026 15:10:18 +0200
Subject: [PATCH 4/9] passage par le front

---
 app/components/CameraManager.vue   |  13 +-
 app/components/ViewToolbar.vue     |   8 +-
 app/stores/camera_manager.js       |   7 +-
 app/stores/hybrid_viewer.js        | 287 ++++++-----------------------
 internal/database/base_database.js |   8 +-
 5 files changed, 75 insertions(+), 248 deletions(-)

diff --git a/app/components/CameraManager.vue b/app/components/CameraManager.vue
index b39ee84a..414966ca 100644
--- a/app/components/CameraManager.vue
+++ b/app/components/CameraManager.vue
@@ -30,25 +30,26 @@ async function saveCurrentPosition() {
   }
   await cameraManagerStore.saveCameraPosition(
     newPositionName.value,
+    toRaw(hybridViewerStore.camera_options),
     selectedObjectId.value,
   );
   newPositionName.value = "";
   selectedObjectId.value = undefined;
 }
 
-async function restorePosition(id) {
-  const position = await cameraManagerStore.getCameraPosition(id);
+async function restorePosition(positionId) {
+  const position = await cameraManagerStore.getCameraPosition(positionId);
   if (position) {
     if (hybridViewerStore.genericRenderWindow) {
       hybridViewerStore.setCamera(position.camera_options);
     } else {
-      await cameraManagerStore.restoreCameraPosition(id);
+      await cameraManagerStore.restoreCameraPosition(positionId);
     }
   }
 }
 
-async function deletePosition(id) {
-  await cameraManagerStore.deleteCameraPosition(id);
+async function deletePosition(positionId) {
+  await cameraManagerStore.deleteCameraPosition(positionId);
 }
 
 function startEditing(position) {
@@ -70,7 +71,7 @@ function getObjectName(objectId) {
   if (!objectId) {
     return "None";
   }
-  const obj = allObjects.value.find((o) => o.id === objectId);
+  const obj = allObjects.value.find((object) => object.id === objectId);
   return obj ? obj.name : "Unknown";
 }
 </script>
diff --git a/app/components/ViewToolbar.vue b/app/components/ViewToolbar.vue
index 95cd242d..4689b5fd 100644
--- a/app/components/ViewToolbar.vue
+++ b/app/components/ViewToolbar.vue
@@ -1,15 +1,13 @@
 <script setup>
-import schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
-
 import ActionButton from "@ogw_front/components/ActionButton.vue";
+import CameraBookmarkIcon from "@ogw_front/assets/viewer_svgs/camera-bookmark.svg";
 import CameraManager from "@ogw_front/components/CameraManager";
 import CameraOrientation from "@ogw_front/components/CameraOrientation.vue";
+import schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 import Screenshot from "@ogw_front/components/Screenshot";
-import ZScaling from "@ogw_front/components/ZScaling";
-import CameraBookmarkIcon from "@ogw_front/assets/viewer_svgs/camera-bookmark.svg";
-
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 import { useViewerStore } from "@ogw_front/stores/viewer";
+import ZScaling from "@ogw_front/components/ZScaling";
 
 const hybridViewerStore = useHybridViewerStore();
 const viewerStore = useViewerStore();
diff --git a/app/stores/camera_manager.js b/app/stores/camera_manager.js
index 9768c450..c992492f 100644
--- a/app/stores/camera_manager.js
+++ b/app/stores/camera_manager.js
@@ -21,12 +21,7 @@ export const useCameraManagerStore = defineStore("camera_manager", () => {
     return await database.camera_positions.get(id);
   }
 
-  async function saveCameraPosition(name, object_id = undefined) {
-    const response = await viewerStore.request(
-      viewer_schemas.opengeodeweb_viewer.viewer.get_camera,
-    );
-    const { camera_options } = response;
-
+  async function saveCameraPosition(name, camera_options, object_id = undefined) {
     await database.camera_positions.put({
       name,
       object_id,
diff --git a/app/stores/hybrid_viewer.js b/app/stores/hybrid_viewer.js
index 6253189c..b10d59e3 100644
--- a/app/stores/hybrid_viewer.js
+++ b/app/stores/hybrid_viewer.js
@@ -1,175 +1,104 @@
-import {
-  ORIENTATIONS,
-  animateCamera,
-  applyCameraOptions,
-  computeAverageBrightness,
-  getCameraOptions,
-} from "@ogw_front/utils/hybrid_viewer";
+import { ORIENTATIONS, animateCamera, applyCameraOptions, computeAverageBrightness, getCameraOptions } from "@ogw_front/utils/hybrid_viewer";
 import { dot } from "@kitware/vtk.js/Common/Core/Math";
 import { newInstance as vtkActor } from "@kitware/vtk.js/Rendering/Core/Actor";
 import { newInstance as vtkGenericRenderWindow } from "@kitware/vtk.js/Rendering/Misc/GenericRenderWindow";
 import { newInstance as vtkMapper } from "@kitware/vtk.js/Rendering/Core/Mapper";
 import { newInstance as vtkXMLPolyDataReader } from "@kitware/vtk.js/IO/XML/XMLPolyDataReader";
-
-import {
-  ACTOR_COLOR,
-  ALIGNMENT_THRESHOLD,
-  BACKGROUND_COLOR,
-  BUMP_MULTIPLIER,
-  EASE_EXPONENT,
-  LONG_ANIMATION_DURATION,
-  SHORT_ANIMATION_DURATION,
-  WHEEL_TIME_OUT_MS,
-} from "@ogw_front/utils/vtk/constants";
+import { ACTOR_COLOR, ALIGNMENT_THRESHOLD, BACKGROUND_COLOR, BUMP_MULTIPLIER, EASE_EXPONENT, LONG_ANIMATION_DURATION, SHORT_ANIMATION_DURATION, WHEEL_TIME_OUT_MS } from "@ogw_front/utils/vtk/constants";
 import { Status } from "@ogw_front/utils/status";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useViewerStore } from "@ogw_front/stores/viewer";
-
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
 export const useHybridViewerStore = defineStore("hybridViewer", () => {
-  const dataStore = useDataStore();
-  const viewerStore = useViewerStore();
-  const hybridDb = reactive({});
-  const status = ref(Status.NOT_CREATED);
-  const camera_options = reactive({});
-  const genericRenderWindow = reactive({});
-  const is_moving = ref(false);
-  const zScale = ref(1);
-  let viewStream = undefined;
-  let imageStyle = undefined;
+  const dataStore = useDataStore(), viewerStore = useViewerStore(), hybridDb = reactive({});
+  const status = ref(Status.NOT_CREATED), camera_options = reactive({}), genericRenderWindow = reactive({});
+  const is_moving = ref(false), zScale = ref(1), latestImage = ref(undefined);
+  let viewStream, imageStyle, wheelEventEndTimeout;
   const gridActor = undefined;
-
-  const latestImage = ref(undefined);
-  const offscreenCanvas =
-    typeof document === "undefined" ? undefined : document.createElement("canvas");
-  const offscreenCtx = offscreenCanvas
-    ? offscreenCanvas.getContext("2d", { willReadFrequently: true })
-    : undefined;
+  const offscreenCanvas = typeof document === "undefined" ? undefined : document.createElement("canvas");
+  const offscreenCtx = offscreenCanvas ? offscreenCanvas.getContext("2d", { willReadFrequently: true }) : undefined;
 
   async function initHybridViewer() {
-    if (status.value !== Status.NOT_CREATED) {
-      return;
-    }
+    if (status.value !== Status.NOT_CREATED) return;
     status.value = Status.CREATING;
-    genericRenderWindow.value = vtkGenericRenderWindow({
-      background: BACKGROUND_COLOR,
-      listenWindowResize: false,
-    });
-
+    genericRenderWindow.value = vtkGenericRenderWindow({ background: BACKGROUND_COLOR, listenWindowResize: false });
     const webGLRenderWindow = genericRenderWindow.value.getApiSpecificRenderWindow();
     imageStyle = webGLRenderWindow.getReferenceByName("bgImage").style;
-    imageStyle.transition = "opacity 0.1s ease-in";
-    imageStyle.zIndex = 1;
-
+    Object.assign(imageStyle, { transition: "opacity 0.1s ease-in", zIndex: 1 });
     await viewerStore.ws_connect();
     viewStream = viewerStore.client.getImageStream().createViewStream("-1");
     viewStream.onImageReady((event) => {
-      if (is_moving.value) {
-        return;
-      }
+      if (is_moving.value) return;
       latestImage.value = event.image;
       webGLRenderWindow.setBackgroundImage(event.image);
       imageStyle.opacity = 1;
     });
-
-    const renderer = genericRenderWindow.value.getRenderer();
-    const camera = renderer.getActiveCamera();
+    const camera = genericRenderWindow.value.getRenderer().getActiveCamera();
+    Object.assign(camera_options, getCameraOptions(camera));
     camera.onModified(() => {
       Object.assign(camera_options, getCameraOptions(camera));
     });
-
     status.value = Status.CREATED;
   }
 
   async function addItem(id) {
-    if (!genericRenderWindow.value) {
-      return;
-    }
-    const value = await dataStore.item(id);
-    const reader = vtkXMLPolyDataReader();
-    const textEncoder = new TextEncoder();
+    if (!genericRenderWindow.value) return;
+    const value = await dataStore.item(id), reader = vtkXMLPolyDataReader(), textEncoder = new TextEncoder();
     await reader.parseAsArrayBuffer(textEncoder.encode(value.binary_light_viewable));
-    const polydata = reader.getOutputData(0);
-    const mapper = vtkMapper();
+    const polydata = reader.getOutputData(0), mapper = vtkMapper(), actor = vtkActor();
     mapper.setInputData(polydata);
-    const actor = vtkActor();
     actor.getProperty().setColor(ACTOR_COLOR);
     actor.setMapper(mapper);
     const renderer = genericRenderWindow.value.getRenderer();
     const isFirst = renderer.getActors().length === 0;
     renderer.addActor(actor);
-    if (isFirst) {
-      renderer.resetCamera();
-    }
+    if (isFirst) renderer.resetCamera();
     hybridDb[id] = { actor, polydata, mapper };
   }
 
   function removeItem(id) {
-    if (!hybridDb[id]) {
-      return;
-    }
-    const renderer = genericRenderWindow.value.getRenderer();
-    renderer.removeActor(hybridDb[id].actor);
+    if (!hybridDb[id]) return;
+    genericRenderWindow.value.getRenderer().removeActor(hybridDb[id].actor);
     genericRenderWindow.value.getRenderWindow().render();
     delete hybridDb[id];
   }
 
   function setVisibility(id, visibility) {
-    if (!hybridDb[id]) {
-      return;
-    }
+    if (!hybridDb[id]) return;
     hybridDb[id].actor.setVisibility(visibility);
-    const renderWindow = genericRenderWindow.value.getRenderWindow();
-    renderWindow.render();
+    genericRenderWindow.value.getRenderWindow().render();
   }
+
   async function setZScaling(z_scale) {
     zScale.value = z_scale;
     const renderer = genericRenderWindow.value.getRenderer();
-    const actors = renderer.getActors();
-    for (const actor of actors) {
+    renderer.getActors().forEach((actor) => {
       if (actor !== gridActor) {
         const scale = actor.getScale();
         actor.setScale(scale[0], scale[1], z_scale);
       }
-    }
+    });
     renderer.resetCamera();
     genericRenderWindow.value.getRenderWindow().render();
     const schema = viewer_schemas?.opengeodeweb_viewer?.viewer?.set_z_scaling;
-    if (!schema) {
-      return;
-    }
-    await viewerStore.request(schema, {
-      z_scale,
-    });
+    if (schema) await viewerStore.request(schema, { z_scale });
     remoteRender();
   }
 
   function resetCamera() {
-    const renderer = genericRenderWindow.value.getRenderer();
-    renderer.resetCamera();
+    genericRenderWindow.value.getRenderer().resetCamera();
     genericRenderWindow.value.getRenderWindow().render();
     syncRemoteCamera();
   }
- 
-  function setCamera(new_camera_options) {
-    const renderer = genericRenderWindow.value.getRenderer();
-    const camera = renderer.getActiveCamera();
-    const startState = getCameraOptions(camera);
-    const targetState = new_camera_options;
 
+  function setCamera(new_camera_options) {
+    const renderer = genericRenderWindow.value.getRenderer(), camera = renderer.getActiveCamera();
+    const startState = getCameraOptions(camera), targetState = new_camera_options;
     is_moving.value = true;
-    if (imageStyle) {
-      imageStyle.opacity = 0;
-    }
-
+    if (imageStyle) imageStyle.opacity = 0;
     animateCamera({
-      camera,
-      startState,
-      targetState,
-      duration: SHORT_ANIMATION_DURATION,
-      bumpMultiplier: 0,
-      easeExponent: EASE_EXPONENT,
+      camera, startState, targetState, duration: SHORT_ANIMATION_DURATION, bumpMultiplier: 0, easeExponent: EASE_EXPONENT,
       onUpdate: () => genericRenderWindow.value.getRenderWindow().render(),
       onEnd: () => {
         applyCameraOptions(camera, targetState);
@@ -181,144 +110,75 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
   }
 
   function setCameraOrientation(orientation) {
-    const config = ORIENTATIONS[orientation.toLowerCase()];
-    const renderer = genericRenderWindow.value.getRenderer();
-    const camera = renderer.getActiveCamera();
-    const startState = getCameraOptions(camera);
-
-    applyCameraOptions(camera, {
-      ...config,
-      focal_point: [0, 0, 0],
-    });
+    const config = ORIENTATIONS[orientation.toLowerCase()], renderer = genericRenderWindow.value.getRenderer(), camera = renderer.getActiveCamera(), startState = getCameraOptions(camera);
+    applyCameraOptions(camera, { ...config, focal_point: [0, 0, 0] });
     renderer.resetCamera();
     const targetState = getCameraOptions(camera);
-
     applyCameraOptions(camera, startState);
-
-    const alignment = dot(camera.getDirectionOfProjection(), config.position);
-    const duration =
-      alignment > ALIGNMENT_THRESHOLD ? LONG_ANIMATION_DURATION : SHORT_ANIMATION_DURATION;
+    const duration = dot(camera.getDirectionOfProjection(), config.position) > ALIGNMENT_THRESHOLD ? LONG_ANIMATION_DURATION : SHORT_ANIMATION_DURATION;
     is_moving.value = true;
     imageStyle.opacity = 0;
-
     animateCamera({
-      camera,
-      startState,
-      targetState,
-      duration,
-      bumpMultiplier: BUMP_MULTIPLIER,
-      easeExponent: EASE_EXPONENT,
+      camera, startState, targetState, duration, bumpMultiplier: BUMP_MULTIPLIER, easeExponent: EASE_EXPONENT,
       onUpdate: () => genericRenderWindow.value.getRenderWindow().render(),
-      onEnd: () => {
-        is_moving.value = false;
-        syncRemoteCamera();
-      },
+      onEnd: () => { is_moving.value = false; syncRemoteCamera(); },
     });
   }
 
   function syncRemoteCamera() {
-    const renderer = genericRenderWindow.value.getRenderer();
-    const camera = renderer.getActiveCamera();
-    const params = { camera_options: getCameraOptions(camera) };
+    const camera = genericRenderWindow.value.getRenderer().getActiveCamera(), params = { camera_options: getCameraOptions(camera) };
     viewerStore.request(viewer_schemas.opengeodeweb_viewer.viewer.update_camera, params, {
-      response_function: () => {
-        remoteRender();
-        Object.assign(camera_options, params.camera_options);
-      },
+      response_function: () => { remoteRender(); Object.assign(camera_options, params.camera_options); },
     });
   }
 
-  function remoteRender() {
-    return viewerStore.request(viewer_schemas.opengeodeweb_viewer.viewer.render);
-  }
+  function remoteRender() { return viewerStore.request(viewer_schemas.opengeodeweb_viewer.viewer.render); }
 
   function setContainer(container) {
-    if (!container.value) {
-      return;
-    }
+    if (!container.value) return;
     genericRenderWindow.value.setContainer(container.value.$el);
     const webGLRenderWindow = genericRenderWindow.value.getApiSpecificRenderWindow();
     webGLRenderWindow.setUseBackgroundImage(true);
     imageStyle = webGLRenderWindow.getReferenceByName("bgImage").style;
-    imageStyle.transition = "opacity 0.1s ease-in";
-    imageStyle.zIndex = 1;
+    Object.assign(imageStyle, { transition: "opacity 0.1s ease-in", zIndex: 1 });
     resize(container.value.$el.offsetWidth, container.value.$el.offsetHeight);
-
     useMousePressed({
       target: container,
-      onPressed: (event) => {
-        if (event.button === 0) {
-          is_moving.value = true;
-          event.stopPropagation();
-          imageStyle.opacity = 0;
-        }
-      },
-      onReleased: () => {
-        if (!is_moving.value) {
-          return;
-        }
-        is_moving.value = false;
-        syncRemoteCamera();
-      },
+      onPressed: (event) => { if (event.button === 0) { is_moving.value = true; event.stopPropagation(); imageStyle.opacity = 0; } },
+      onReleased: () => { if (is_moving.value) { is_moving.value = false; syncRemoteCamera(); } },
     });
-
-    let wheelEventEndTimeout = undefined;
     useEventListener(container, "wheel", () => {
-      is_moving.value = true;
-      imageStyle.opacity = 0;
+      is_moving.value = true; imageStyle.opacity = 0;
       clearTimeout(wheelEventEndTimeout);
-      wheelEventEndTimeout = setTimeout(() => {
-        is_moving.value = false;
-        syncRemoteCamera();
-      }, WHEEL_TIME_OUT_MS);
+      wheelEventEndTimeout = setTimeout(() => { is_moving.value = false; syncRemoteCamera(); }, WHEEL_TIME_OUT_MS);
     });
   }
 
   async function resize(width, height) {
-    if (viewerStore.status !== Status.CONNECTED || status.value !== Status.CREATED) {
-      return;
-    }
-    const webGLRenderWindow = genericRenderWindow.value.getApiSpecificRenderWindow();
-    const canvas = webGLRenderWindow.getCanvas();
-    canvas.width = width;
-    canvas.height = height;
+    if (viewerStore.status !== Status.CONNECTED || status.value !== Status.CREATED) return;
+    const webGLRenderWindow = genericRenderWindow.value.getApiSpecificRenderWindow(), canvas = webGLRenderWindow.getCanvas();
+    canvas.width = width; canvas.height = height;
     await nextTick();
     webGLRenderWindow.setSize(width, height);
     viewStream.setSize(width, height);
-    const renderWindow = genericRenderWindow.value.getRenderWindow();
-    renderWindow.render();
+    genericRenderWindow.value.getRenderWindow().render();
     remoteRender();
   }
 
   function getAverageBrightness(rect) {
-    return computeAverageBrightness(rect, {
-      latestImage: latestImage.value,
-      offscreenCtx,
-      offscreenCanvas,
-      genericRenderWindow: genericRenderWindow.value,
-    });
+    return computeAverageBrightness(rect, { latestImage: latestImage.value, offscreenCtx, offscreenCanvas, genericRenderWindow: genericRenderWindow.value });
   }
 
   function exportStores() {
-    const renderer = genericRenderWindow.value.getRenderer();
-    const camera = renderer.getActiveCamera();
-    const cameraSnapshot = getCameraOptions(camera) || camera_options;
-    return { zScale: zScale.value, camera_options: cameraSnapshot };
+    const camera = genericRenderWindow.value.getRenderer().getActiveCamera();
+    return { zScale: zScale.value, camera_options: getCameraOptions(camera) || camera_options };
   }
 
   async function importStores(snapshot) {
-    if (!snapshot) {
-      return;
-    }
-    const z_scale = snapshot.zScale;
-    if (typeof z_scale === "number") {
-      await setZScaling(z_scale);
-    }
-
-    const { camera_options: snapshot_camera_options } = snapshot;
-    if (snapshot_camera_options) {
-      const renderer = genericRenderWindow.value.getRenderer();
-      applyCameraOptions(renderer.getActiveCamera(), snapshot_camera_options);
+    if (!snapshot) return;
+    if (typeof snapshot.zScale === "number") await setZScaling(snapshot.zScale);
+    if (snapshot.camera_options) {
+      applyCameraOptions(genericRenderWindow.value.getRenderer().getActiveCamera(), snapshot.camera_options);
       genericRenderWindow.value.getRenderWindow().render();
       syncRemoteCamera();
     }
@@ -326,37 +186,10 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
 
   function clear() {
     const renderer = genericRenderWindow.value.getRenderer();
-    const actors = renderer.getActors();
-    for (const actor of actors) {
-      renderer.removeActor(actor);
-    }
+    renderer.getActors().forEach((actor) => renderer.removeActor(actor));
     genericRenderWindow.value.getRenderWindow().render();
-    for (const id of Object.keys(hybridDb)) {
-      delete hybridDb[id];
-    }
+    Object.keys(hybridDb).forEach((id) => delete hybridDb[id]);
   }
 
-  return {
-    hybridDb,
-    genericRenderWindow,
-    addItem,
-    removeItem,
-    setVisibility,
-    setZScaling,
-    syncRemoteCamera,
-    setCamera,
-    initHybridViewer,
-    remoteRender,
-    resize,
-    resetCamera,
-    setCameraOrientation,
-    setContainer,
-    zScale,
-    clear,
-    exportStores,
-    importStores,
-    camera_options,
-    latestImage,
-    getAverageBrightness,
-  };
+  return { hybridDb, genericRenderWindow, addItem, removeItem, setVisibility, setZScaling, syncRemoteCamera, setCamera, initHybridViewer, remoteRender, resize, resetCamera, setCameraOrientation, setContainer, zScale, clear, exportStores, importStores, camera_options, latestImage, getAverageBrightness };
 });
diff --git a/internal/database/base_database.js b/internal/database/base_database.js
index ffd92190..87d3b7c5 100644
--- a/internal/database/base_database.js
+++ b/internal/database/base_database.js
@@ -1,11 +1,11 @@
-import { Dexie } from "dexie";
+import { cameraPositionsTable } from "./tables/camera_positions";
 import { dataStyleTable } from "./tables/data_style";
 import { dataTable } from "./tables/data";
-import { modelComponentDataStyleTable } from "./tables/model_component_datastyle";
-import { modelComponentTypeDataStyleTable } from "./tables/model_component_type_datastyle";
+import { Dexie } from "dexie";
 import { modelComponentsRelationTable } from "./tables/model_components_relation";
 import { modelComponentsTable } from "./tables/model_components";
-import { cameraPositionsTable } from "./tables/camera_positions";
+import { modelComponentDataStyleTable } from "./tables/model_component_datastyle";
+import { modelComponentTypeDataStyleTable } from "./tables/model_component_type_datastyle";
 
 export class BaseDatabase extends Dexie {
   static get initialStores() {

From 76865b8d279f67e2323ac6ce10a612b86fb1de39 Mon Sep 17 00:00:00 2001
From: SpliiT <106495600+SpliiT@users.noreply.github.com>
Date: Thu, 30 Apr 2026 13:11:35 +0000
Subject: [PATCH 5/9] Apply prepare changes

---
 app/components/CameraManager.vue |  19 +---
 app/stores/hybrid_viewer.js      | 163 +++++++++++++++++++++++++------
 2 files changed, 138 insertions(+), 44 deletions(-)

diff --git a/app/components/CameraManager.vue b/app/components/CameraManager.vue
index 414966ca..7cfa49a9 100644
--- a/app/components/CameraManager.vue
+++ b/app/components/CameraManager.vue
@@ -59,10 +59,7 @@ function startEditing(position) {
 
 async function saveRename() {
   if (editingName.value) {
-    await cameraManagerStore.renameCameraPosition(
-      editingId.value,
-      editingName.value,
-    );
+    await cameraManagerStore.renameCameraPosition(editingId.value, editingName.value);
   }
   editingId.value = undefined;
 }
@@ -135,11 +132,7 @@ function getObjectName(objectId) {
       <v-divider></v-divider>
 
       <!-- Saved Positions List -->
-      <v-list
-        v-if="savedPositions.length > 0"
-        class="bg-transparent pa-2"
-        lines="two"
-      >
+      <v-list v-if="savedPositions.length > 0" class="bg-transparent pa-2" lines="two">
         <v-list-item
           v-for="position in savedPositions"
           :key="position.id"
@@ -207,9 +200,7 @@ function getObjectName(objectId) {
         </v-list-item>
       </v-list>
       <div v-else class="text-center text-grey-lighten-1 py-8 italic">
-        <v-icon size="48" class="mb-2 d-block mx-auto opacity-20"
-          >mdi-camera-off</v-icon
-        >
+        <v-icon size="48" class="mb-2 d-block mx-auto opacity-20">mdi-camera-off</v-icon>
         No saved positions yet.
       </div>
     </v-card-text>
@@ -218,9 +209,7 @@ function getObjectName(objectId) {
 
     <v-card-actions class="pa-4">
       <v-spacer></v-spacer>
-      <v-btn variant="text" color="grey-darken-1" @click="emit('close')"
-        >Close</v-btn
-      >
+      <v-btn variant="text" color="grey-darken-1" @click="emit('close')">Close</v-btn>
     </v-card-actions>
   </GlassCard>
 </template>
diff --git a/app/stores/hybrid_viewer.js b/app/stores/hybrid_viewer.js
index b10d59e3..90628dac 100644
--- a/app/stores/hybrid_viewer.js
+++ b/app/stores/hybrid_viewer.js
@@ -1,28 +1,55 @@
-import { ORIENTATIONS, animateCamera, applyCameraOptions, computeAverageBrightness, getCameraOptions } from "@ogw_front/utils/hybrid_viewer";
+import {
+  ORIENTATIONS,
+  animateCamera,
+  applyCameraOptions,
+  computeAverageBrightness,
+  getCameraOptions,
+} from "@ogw_front/utils/hybrid_viewer";
 import { dot } from "@kitware/vtk.js/Common/Core/Math";
 import { newInstance as vtkActor } from "@kitware/vtk.js/Rendering/Core/Actor";
 import { newInstance as vtkGenericRenderWindow } from "@kitware/vtk.js/Rendering/Misc/GenericRenderWindow";
 import { newInstance as vtkMapper } from "@kitware/vtk.js/Rendering/Core/Mapper";
 import { newInstance as vtkXMLPolyDataReader } from "@kitware/vtk.js/IO/XML/XMLPolyDataReader";
-import { ACTOR_COLOR, ALIGNMENT_THRESHOLD, BACKGROUND_COLOR, BUMP_MULTIPLIER, EASE_EXPONENT, LONG_ANIMATION_DURATION, SHORT_ANIMATION_DURATION, WHEEL_TIME_OUT_MS } from "@ogw_front/utils/vtk/constants";
+import {
+  ACTOR_COLOR,
+  ALIGNMENT_THRESHOLD,
+  BACKGROUND_COLOR,
+  BUMP_MULTIPLIER,
+  EASE_EXPONENT,
+  LONG_ANIMATION_DURATION,
+  SHORT_ANIMATION_DURATION,
+  WHEEL_TIME_OUT_MS,
+} from "@ogw_front/utils/vtk/constants";
 import { Status } from "@ogw_front/utils/status";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
 export const useHybridViewerStore = defineStore("hybridViewer", () => {
-  const dataStore = useDataStore(), viewerStore = useViewerStore(), hybridDb = reactive({});
-  const status = ref(Status.NOT_CREATED), camera_options = reactive({}), genericRenderWindow = reactive({});
-  const is_moving = ref(false), zScale = ref(1), latestImage = ref(undefined);
+  const dataStore = useDataStore(),
+    viewerStore = useViewerStore(),
+    hybridDb = reactive({});
+  const status = ref(Status.NOT_CREATED),
+    camera_options = reactive({}),
+    genericRenderWindow = reactive({});
+  const is_moving = ref(false),
+    zScale = ref(1),
+    latestImage = ref(undefined);
   let viewStream, imageStyle, wheelEventEndTimeout;
   const gridActor = undefined;
-  const offscreenCanvas = typeof document === "undefined" ? undefined : document.createElement("canvas");
-  const offscreenCtx = offscreenCanvas ? offscreenCanvas.getContext("2d", { willReadFrequently: true }) : undefined;
+  const offscreenCanvas =
+    typeof document === "undefined" ? undefined : document.createElement("canvas");
+  const offscreenCtx = offscreenCanvas
+    ? offscreenCanvas.getContext("2d", { willReadFrequently: true })
+    : undefined;
 
   async function initHybridViewer() {
     if (status.value !== Status.NOT_CREATED) return;
     status.value = Status.CREATING;
-    genericRenderWindow.value = vtkGenericRenderWindow({ background: BACKGROUND_COLOR, listenWindowResize: false });
+    genericRenderWindow.value = vtkGenericRenderWindow({
+      background: BACKGROUND_COLOR,
+      listenWindowResize: false,
+    });
     const webGLRenderWindow = genericRenderWindow.value.getApiSpecificRenderWindow();
     imageStyle = webGLRenderWindow.getReferenceByName("bgImage").style;
     Object.assign(imageStyle, { transition: "opacity 0.1s ease-in", zIndex: 1 });
@@ -44,9 +71,13 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
 
   async function addItem(id) {
     if (!genericRenderWindow.value) return;
-    const value = await dataStore.item(id), reader = vtkXMLPolyDataReader(), textEncoder = new TextEncoder();
+    const value = await dataStore.item(id),
+      reader = vtkXMLPolyDataReader(),
+      textEncoder = new TextEncoder();
     await reader.parseAsArrayBuffer(textEncoder.encode(value.binary_light_viewable));
-    const polydata = reader.getOutputData(0), mapper = vtkMapper(), actor = vtkActor();
+    const polydata = reader.getOutputData(0),
+      mapper = vtkMapper(),
+      actor = vtkActor();
     mapper.setInputData(polydata);
     actor.getProperty().setColor(ACTOR_COLOR);
     actor.setMapper(mapper);
@@ -93,12 +124,19 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
   }
 
   function setCamera(new_camera_options) {
-    const renderer = genericRenderWindow.value.getRenderer(), camera = renderer.getActiveCamera();
-    const startState = getCameraOptions(camera), targetState = new_camera_options;
+    const renderer = genericRenderWindow.value.getRenderer(),
+      camera = renderer.getActiveCamera();
+    const startState = getCameraOptions(camera),
+      targetState = new_camera_options;
     is_moving.value = true;
     if (imageStyle) imageStyle.opacity = 0;
     animateCamera({
-      camera, startState, targetState, duration: SHORT_ANIMATION_DURATION, bumpMultiplier: 0, easeExponent: EASE_EXPONENT,
+      camera,
+      startState,
+      targetState,
+      duration: SHORT_ANIMATION_DURATION,
+      bumpMultiplier: 0,
+      easeExponent: EASE_EXPONENT,
       onUpdate: () => genericRenderWindow.value.getRenderWindow().render(),
       onEnd: () => {
         applyCameraOptions(camera, targetState);
@@ -110,29 +148,49 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
   }
 
   function setCameraOrientation(orientation) {
-    const config = ORIENTATIONS[orientation.toLowerCase()], renderer = genericRenderWindow.value.getRenderer(), camera = renderer.getActiveCamera(), startState = getCameraOptions(camera);
+    const config = ORIENTATIONS[orientation.toLowerCase()],
+      renderer = genericRenderWindow.value.getRenderer(),
+      camera = renderer.getActiveCamera(),
+      startState = getCameraOptions(camera);
     applyCameraOptions(camera, { ...config, focal_point: [0, 0, 0] });
     renderer.resetCamera();
     const targetState = getCameraOptions(camera);
     applyCameraOptions(camera, startState);
-    const duration = dot(camera.getDirectionOfProjection(), config.position) > ALIGNMENT_THRESHOLD ? LONG_ANIMATION_DURATION : SHORT_ANIMATION_DURATION;
+    const duration =
+      dot(camera.getDirectionOfProjection(), config.position) > ALIGNMENT_THRESHOLD
+        ? LONG_ANIMATION_DURATION
+        : SHORT_ANIMATION_DURATION;
     is_moving.value = true;
     imageStyle.opacity = 0;
     animateCamera({
-      camera, startState, targetState, duration, bumpMultiplier: BUMP_MULTIPLIER, easeExponent: EASE_EXPONENT,
+      camera,
+      startState,
+      targetState,
+      duration,
+      bumpMultiplier: BUMP_MULTIPLIER,
+      easeExponent: EASE_EXPONENT,
       onUpdate: () => genericRenderWindow.value.getRenderWindow().render(),
-      onEnd: () => { is_moving.value = false; syncRemoteCamera(); },
+      onEnd: () => {
+        is_moving.value = false;
+        syncRemoteCamera();
+      },
     });
   }
 
   function syncRemoteCamera() {
-    const camera = genericRenderWindow.value.getRenderer().getActiveCamera(), params = { camera_options: getCameraOptions(camera) };
+    const camera = genericRenderWindow.value.getRenderer().getActiveCamera(),
+      params = { camera_options: getCameraOptions(camera) };
     viewerStore.request(viewer_schemas.opengeodeweb_viewer.viewer.update_camera, params, {
-      response_function: () => { remoteRender(); Object.assign(camera_options, params.camera_options); },
+      response_function: () => {
+        remoteRender();
+        Object.assign(camera_options, params.camera_options);
+      },
     });
   }
 
-  function remoteRender() { return viewerStore.request(viewer_schemas.opengeodeweb_viewer.viewer.render); }
+  function remoteRender() {
+    return viewerStore.request(viewer_schemas.opengeodeweb_viewer.viewer.render);
+  }
 
   function setContainer(container) {
     if (!container.value) return;
@@ -144,20 +202,37 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
     resize(container.value.$el.offsetWidth, container.value.$el.offsetHeight);
     useMousePressed({
       target: container,
-      onPressed: (event) => { if (event.button === 0) { is_moving.value = true; event.stopPropagation(); imageStyle.opacity = 0; } },
-      onReleased: () => { if (is_moving.value) { is_moving.value = false; syncRemoteCamera(); } },
+      onPressed: (event) => {
+        if (event.button === 0) {
+          is_moving.value = true;
+          event.stopPropagation();
+          imageStyle.opacity = 0;
+        }
+      },
+      onReleased: () => {
+        if (is_moving.value) {
+          is_moving.value = false;
+          syncRemoteCamera();
+        }
+      },
     });
     useEventListener(container, "wheel", () => {
-      is_moving.value = true; imageStyle.opacity = 0;
+      is_moving.value = true;
+      imageStyle.opacity = 0;
       clearTimeout(wheelEventEndTimeout);
-      wheelEventEndTimeout = setTimeout(() => { is_moving.value = false; syncRemoteCamera(); }, WHEEL_TIME_OUT_MS);
+      wheelEventEndTimeout = setTimeout(() => {
+        is_moving.value = false;
+        syncRemoteCamera();
+      }, WHEEL_TIME_OUT_MS);
     });
   }
 
   async function resize(width, height) {
     if (viewerStore.status !== Status.CONNECTED || status.value !== Status.CREATED) return;
-    const webGLRenderWindow = genericRenderWindow.value.getApiSpecificRenderWindow(), canvas = webGLRenderWindow.getCanvas();
-    canvas.width = width; canvas.height = height;
+    const webGLRenderWindow = genericRenderWindow.value.getApiSpecificRenderWindow(),
+      canvas = webGLRenderWindow.getCanvas();
+    canvas.width = width;
+    canvas.height = height;
     await nextTick();
     webGLRenderWindow.setSize(width, height);
     viewStream.setSize(width, height);
@@ -166,7 +241,12 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
   }
 
   function getAverageBrightness(rect) {
-    return computeAverageBrightness(rect, { latestImage: latestImage.value, offscreenCtx, offscreenCanvas, genericRenderWindow: genericRenderWindow.value });
+    return computeAverageBrightness(rect, {
+      latestImage: latestImage.value,
+      offscreenCtx,
+      offscreenCanvas,
+      genericRenderWindow: genericRenderWindow.value,
+    });
   }
 
   function exportStores() {
@@ -178,7 +258,10 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
     if (!snapshot) return;
     if (typeof snapshot.zScale === "number") await setZScaling(snapshot.zScale);
     if (snapshot.camera_options) {
-      applyCameraOptions(genericRenderWindow.value.getRenderer().getActiveCamera(), snapshot.camera_options);
+      applyCameraOptions(
+        genericRenderWindow.value.getRenderer().getActiveCamera(),
+        snapshot.camera_options,
+      );
       genericRenderWindow.value.getRenderWindow().render();
       syncRemoteCamera();
     }
@@ -191,5 +274,27 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
     Object.keys(hybridDb).forEach((id) => delete hybridDb[id]);
   }
 
-  return { hybridDb, genericRenderWindow, addItem, removeItem, setVisibility, setZScaling, syncRemoteCamera, setCamera, initHybridViewer, remoteRender, resize, resetCamera, setCameraOrientation, setContainer, zScale, clear, exportStores, importStores, camera_options, latestImage, getAverageBrightness };
+  return {
+    hybridDb,
+    genericRenderWindow,
+    addItem,
+    removeItem,
+    setVisibility,
+    setZScaling,
+    syncRemoteCamera,
+    setCamera,
+    initHybridViewer,
+    remoteRender,
+    resize,
+    resetCamera,
+    setCameraOrientation,
+    setContainer,
+    zScale,
+    clear,
+    exportStores,
+    importStores,
+    camera_options,
+    latestImage,
+    getAverageBrightness,
+  };
 });

From de890f9484d0a9498e2cd5d692d8d723c5460d07 Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Thu, 30 Apr 2026 15:22:48 +0200
Subject: [PATCH 6/9] oxlint

---
 app/stores/hybrid_viewer.js        | 26 +++++++++++++-------------
 internal/database/base_database.js |  6 +++---
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/app/stores/hybrid_viewer.js b/app/stores/hybrid_viewer.js
index b10d59e3..04d25ec6 100644
--- a/app/stores/hybrid_viewer.js
+++ b/app/stores/hybrid_viewer.js
@@ -20,7 +20,7 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
   const offscreenCtx = offscreenCanvas ? offscreenCanvas.getContext("2d", { willReadFrequently: true }) : undefined;
 
   async function initHybridViewer() {
-    if (status.value !== Status.NOT_CREATED) return;
+    if (status.value !== Status.NOT_CREATED) { return; }
     status.value = Status.CREATING;
     genericRenderWindow.value = vtkGenericRenderWindow({ background: BACKGROUND_COLOR, listenWindowResize: false });
     const webGLRenderWindow = genericRenderWindow.value.getApiSpecificRenderWindow();
@@ -29,7 +29,7 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
     await viewerStore.ws_connect();
     viewStream = viewerStore.client.getImageStream().createViewStream("-1");
     viewStream.onImageReady((event) => {
-      if (is_moving.value) return;
+      if (is_moving.value) { return; }
       latestImage.value = event.image;
       webGLRenderWindow.setBackgroundImage(event.image);
       imageStyle.opacity = 1;
@@ -43,7 +43,7 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
   }
 
   async function addItem(id) {
-    if (!genericRenderWindow.value) return;
+    if (!genericRenderWindow.value) { return; }
     const value = await dataStore.item(id), reader = vtkXMLPolyDataReader(), textEncoder = new TextEncoder();
     await reader.parseAsArrayBuffer(textEncoder.encode(value.binary_light_viewable));
     const polydata = reader.getOutputData(0), mapper = vtkMapper(), actor = vtkActor();
@@ -53,19 +53,19 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
     const renderer = genericRenderWindow.value.getRenderer();
     const isFirst = renderer.getActors().length === 0;
     renderer.addActor(actor);
-    if (isFirst) renderer.resetCamera();
+    if (isFirst) { renderer.resetCamera(); }
     hybridDb[id] = { actor, polydata, mapper };
   }
 
   function removeItem(id) {
-    if (!hybridDb[id]) return;
+    if (!hybridDb[id]) { return; }
     genericRenderWindow.value.getRenderer().removeActor(hybridDb[id].actor);
     genericRenderWindow.value.getRenderWindow().render();
     delete hybridDb[id];
   }
 
   function setVisibility(id, visibility) {
-    if (!hybridDb[id]) return;
+    if (!hybridDb[id]) { return; }
     hybridDb[id].actor.setVisibility(visibility);
     genericRenderWindow.value.getRenderWindow().render();
   }
@@ -82,7 +82,7 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
     renderer.resetCamera();
     genericRenderWindow.value.getRenderWindow().render();
     const schema = viewer_schemas?.opengeodeweb_viewer?.viewer?.set_z_scaling;
-    if (schema) await viewerStore.request(schema, { z_scale });
+    if (schema) { await viewerStore.request(schema, { z_scale }); }
     remoteRender();
   }
 
@@ -96,7 +96,7 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
     const renderer = genericRenderWindow.value.getRenderer(), camera = renderer.getActiveCamera();
     const startState = getCameraOptions(camera), targetState = new_camera_options;
     is_moving.value = true;
-    if (imageStyle) imageStyle.opacity = 0;
+    if (imageStyle) { imageStyle.opacity = 0; }
     animateCamera({
       camera, startState, targetState, duration: SHORT_ANIMATION_DURATION, bumpMultiplier: 0, easeExponent: EASE_EXPONENT,
       onUpdate: () => genericRenderWindow.value.getRenderWindow().render(),
@@ -117,7 +117,7 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
     applyCameraOptions(camera, startState);
     const duration = dot(camera.getDirectionOfProjection(), config.position) > ALIGNMENT_THRESHOLD ? LONG_ANIMATION_DURATION : SHORT_ANIMATION_DURATION;
     is_moving.value = true;
-    imageStyle.opacity = 0;
+    if (imageStyle) { imageStyle.opacity = 0; }
     animateCamera({
       camera, startState, targetState, duration, bumpMultiplier: BUMP_MULTIPLIER, easeExponent: EASE_EXPONENT,
       onUpdate: () => genericRenderWindow.value.getRenderWindow().render(),
@@ -135,7 +135,7 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
   function remoteRender() { return viewerStore.request(viewer_schemas.opengeodeweb_viewer.viewer.render); }
 
   function setContainer(container) {
-    if (!container.value) return;
+    if (!container.value) { return; }
     genericRenderWindow.value.setContainer(container.value.$el);
     const webGLRenderWindow = genericRenderWindow.value.getApiSpecificRenderWindow();
     webGLRenderWindow.setUseBackgroundImage(true);
@@ -155,7 +155,7 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
   }
 
   async function resize(width, height) {
-    if (viewerStore.status !== Status.CONNECTED || status.value !== Status.CREATED) return;
+    if (viewerStore.status !== Status.CONNECTED || status.value !== Status.CREATED) { return; }
     const webGLRenderWindow = genericRenderWindow.value.getApiSpecificRenderWindow(), canvas = webGLRenderWindow.getCanvas();
     canvas.width = width; canvas.height = height;
     await nextTick();
@@ -175,8 +175,8 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
   }
 
   async function importStores(snapshot) {
-    if (!snapshot) return;
-    if (typeof snapshot.zScale === "number") await setZScaling(snapshot.zScale);
+    if (!snapshot) { return; }
+    if (typeof snapshot.zScale === "number") { await setZScaling(snapshot.zScale); }
     if (snapshot.camera_options) {
       applyCameraOptions(genericRenderWindow.value.getRenderer().getActiveCamera(), snapshot.camera_options);
       genericRenderWindow.value.getRenderWindow().render();
diff --git a/internal/database/base_database.js b/internal/database/base_database.js
index 87d3b7c5..4b537bda 100644
--- a/internal/database/base_database.js
+++ b/internal/database/base_database.js
@@ -1,11 +1,11 @@
+import { Dexie } from "dexie";
 import { cameraPositionsTable } from "./tables/camera_positions";
 import { dataStyleTable } from "./tables/data_style";
 import { dataTable } from "./tables/data";
-import { Dexie } from "dexie";
-import { modelComponentsRelationTable } from "./tables/model_components_relation";
-import { modelComponentsTable } from "./tables/model_components";
 import { modelComponentDataStyleTable } from "./tables/model_component_datastyle";
 import { modelComponentTypeDataStyleTable } from "./tables/model_component_type_datastyle";
+import { modelComponentsRelationTable } from "./tables/model_components_relation";
+import { modelComponentsTable } from "./tables/model_components";
 
 export class BaseDatabase extends Dexie {
   static get initialStores() {

From 08db1a10b8cc7abf89c9117fe8b35219a39fab4f Mon Sep 17 00:00:00 2001
From: SpliiT <106495600+SpliiT@users.noreply.github.com>
Date: Thu, 30 Apr 2026 13:24:41 +0000
Subject: [PATCH 7/9] Apply prepare changes

---
 app/stores/hybrid_viewer.js | 215 +++++++++++++++++++++++++++++-------
 1 file changed, 173 insertions(+), 42 deletions(-)

diff --git a/app/stores/hybrid_viewer.js b/app/stores/hybrid_viewer.js
index 04d25ec6..a2434ddf 100644
--- a/app/stores/hybrid_viewer.js
+++ b/app/stores/hybrid_viewer.js
@@ -1,35 +1,66 @@
-import { ORIENTATIONS, animateCamera, applyCameraOptions, computeAverageBrightness, getCameraOptions } from "@ogw_front/utils/hybrid_viewer";
+import {
+  ORIENTATIONS,
+  animateCamera,
+  applyCameraOptions,
+  computeAverageBrightness,
+  getCameraOptions,
+} from "@ogw_front/utils/hybrid_viewer";
 import { dot } from "@kitware/vtk.js/Common/Core/Math";
 import { newInstance as vtkActor } from "@kitware/vtk.js/Rendering/Core/Actor";
 import { newInstance as vtkGenericRenderWindow } from "@kitware/vtk.js/Rendering/Misc/GenericRenderWindow";
 import { newInstance as vtkMapper } from "@kitware/vtk.js/Rendering/Core/Mapper";
 import { newInstance as vtkXMLPolyDataReader } from "@kitware/vtk.js/IO/XML/XMLPolyDataReader";
-import { ACTOR_COLOR, ALIGNMENT_THRESHOLD, BACKGROUND_COLOR, BUMP_MULTIPLIER, EASE_EXPONENT, LONG_ANIMATION_DURATION, SHORT_ANIMATION_DURATION, WHEEL_TIME_OUT_MS } from "@ogw_front/utils/vtk/constants";
+import {
+  ACTOR_COLOR,
+  ALIGNMENT_THRESHOLD,
+  BACKGROUND_COLOR,
+  BUMP_MULTIPLIER,
+  EASE_EXPONENT,
+  LONG_ANIMATION_DURATION,
+  SHORT_ANIMATION_DURATION,
+  WHEEL_TIME_OUT_MS,
+} from "@ogw_front/utils/vtk/constants";
 import { Status } from "@ogw_front/utils/status";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
 export const useHybridViewerStore = defineStore("hybridViewer", () => {
-  const dataStore = useDataStore(), viewerStore = useViewerStore(), hybridDb = reactive({});
-  const status = ref(Status.NOT_CREATED), camera_options = reactive({}), genericRenderWindow = reactive({});
-  const is_moving = ref(false), zScale = ref(1), latestImage = ref(undefined);
+  const dataStore = useDataStore(),
+    viewerStore = useViewerStore(),
+    hybridDb = reactive({});
+  const status = ref(Status.NOT_CREATED),
+    camera_options = reactive({}),
+    genericRenderWindow = reactive({});
+  const is_moving = ref(false),
+    zScale = ref(1),
+    latestImage = ref(undefined);
   let viewStream, imageStyle, wheelEventEndTimeout;
   const gridActor = undefined;
-  const offscreenCanvas = typeof document === "undefined" ? undefined : document.createElement("canvas");
-  const offscreenCtx = offscreenCanvas ? offscreenCanvas.getContext("2d", { willReadFrequently: true }) : undefined;
+  const offscreenCanvas =
+    typeof document === "undefined" ? undefined : document.createElement("canvas");
+  const offscreenCtx = offscreenCanvas
+    ? offscreenCanvas.getContext("2d", { willReadFrequently: true })
+    : undefined;
 
   async function initHybridViewer() {
-    if (status.value !== Status.NOT_CREATED) { return; }
+    if (status.value !== Status.NOT_CREATED) {
+      return;
+    }
     status.value = Status.CREATING;
-    genericRenderWindow.value = vtkGenericRenderWindow({ background: BACKGROUND_COLOR, listenWindowResize: false });
+    genericRenderWindow.value = vtkGenericRenderWindow({
+      background: BACKGROUND_COLOR,
+      listenWindowResize: false,
+    });
     const webGLRenderWindow = genericRenderWindow.value.getApiSpecificRenderWindow();
     imageStyle = webGLRenderWindow.getReferenceByName("bgImage").style;
     Object.assign(imageStyle, { transition: "opacity 0.1s ease-in", zIndex: 1 });
     await viewerStore.ws_connect();
     viewStream = viewerStore.client.getImageStream().createViewStream("-1");
     viewStream.onImageReady((event) => {
-      if (is_moving.value) { return; }
+      if (is_moving.value) {
+        return;
+      }
       latestImage.value = event.image;
       webGLRenderWindow.setBackgroundImage(event.image);
       imageStyle.opacity = 1;
@@ -43,29 +74,41 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
   }
 
   async function addItem(id) {
-    if (!genericRenderWindow.value) { return; }
-    const value = await dataStore.item(id), reader = vtkXMLPolyDataReader(), textEncoder = new TextEncoder();
+    if (!genericRenderWindow.value) {
+      return;
+    }
+    const value = await dataStore.item(id),
+      reader = vtkXMLPolyDataReader(),
+      textEncoder = new TextEncoder();
     await reader.parseAsArrayBuffer(textEncoder.encode(value.binary_light_viewable));
-    const polydata = reader.getOutputData(0), mapper = vtkMapper(), actor = vtkActor();
+    const polydata = reader.getOutputData(0),
+      mapper = vtkMapper(),
+      actor = vtkActor();
     mapper.setInputData(polydata);
     actor.getProperty().setColor(ACTOR_COLOR);
     actor.setMapper(mapper);
     const renderer = genericRenderWindow.value.getRenderer();
     const isFirst = renderer.getActors().length === 0;
     renderer.addActor(actor);
-    if (isFirst) { renderer.resetCamera(); }
+    if (isFirst) {
+      renderer.resetCamera();
+    }
     hybridDb[id] = { actor, polydata, mapper };
   }
 
   function removeItem(id) {
-    if (!hybridDb[id]) { return; }
+    if (!hybridDb[id]) {
+      return;
+    }
     genericRenderWindow.value.getRenderer().removeActor(hybridDb[id].actor);
     genericRenderWindow.value.getRenderWindow().render();
     delete hybridDb[id];
   }
 
   function setVisibility(id, visibility) {
-    if (!hybridDb[id]) { return; }
+    if (!hybridDb[id]) {
+      return;
+    }
     hybridDb[id].actor.setVisibility(visibility);
     genericRenderWindow.value.getRenderWindow().render();
   }
@@ -82,7 +125,9 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
     renderer.resetCamera();
     genericRenderWindow.value.getRenderWindow().render();
     const schema = viewer_schemas?.opengeodeweb_viewer?.viewer?.set_z_scaling;
-    if (schema) { await viewerStore.request(schema, { z_scale }); }
+    if (schema) {
+      await viewerStore.request(schema, { z_scale });
+    }
     remoteRender();
   }
 
@@ -93,12 +138,21 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
   }
 
   function setCamera(new_camera_options) {
-    const renderer = genericRenderWindow.value.getRenderer(), camera = renderer.getActiveCamera();
-    const startState = getCameraOptions(camera), targetState = new_camera_options;
+    const renderer = genericRenderWindow.value.getRenderer(),
+      camera = renderer.getActiveCamera();
+    const startState = getCameraOptions(camera),
+      targetState = new_camera_options;
     is_moving.value = true;
-    if (imageStyle) { imageStyle.opacity = 0; }
+    if (imageStyle) {
+      imageStyle.opacity = 0;
+    }
     animateCamera({
-      camera, startState, targetState, duration: SHORT_ANIMATION_DURATION, bumpMultiplier: 0, easeExponent: EASE_EXPONENT,
+      camera,
+      startState,
+      targetState,
+      duration: SHORT_ANIMATION_DURATION,
+      bumpMultiplier: 0,
+      easeExponent: EASE_EXPONENT,
       onUpdate: () => genericRenderWindow.value.getRenderWindow().render(),
       onEnd: () => {
         applyCameraOptions(camera, targetState);
@@ -110,32 +164,56 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
   }
 
   function setCameraOrientation(orientation) {
-    const config = ORIENTATIONS[orientation.toLowerCase()], renderer = genericRenderWindow.value.getRenderer(), camera = renderer.getActiveCamera(), startState = getCameraOptions(camera);
+    const config = ORIENTATIONS[orientation.toLowerCase()],
+      renderer = genericRenderWindow.value.getRenderer(),
+      camera = renderer.getActiveCamera(),
+      startState = getCameraOptions(camera);
     applyCameraOptions(camera, { ...config, focal_point: [0, 0, 0] });
     renderer.resetCamera();
     const targetState = getCameraOptions(camera);
     applyCameraOptions(camera, startState);
-    const duration = dot(camera.getDirectionOfProjection(), config.position) > ALIGNMENT_THRESHOLD ? LONG_ANIMATION_DURATION : SHORT_ANIMATION_DURATION;
+    const duration =
+      dot(camera.getDirectionOfProjection(), config.position) > ALIGNMENT_THRESHOLD
+        ? LONG_ANIMATION_DURATION
+        : SHORT_ANIMATION_DURATION;
     is_moving.value = true;
-    if (imageStyle) { imageStyle.opacity = 0; }
+    if (imageStyle) {
+      imageStyle.opacity = 0;
+    }
     animateCamera({
-      camera, startState, targetState, duration, bumpMultiplier: BUMP_MULTIPLIER, easeExponent: EASE_EXPONENT,
+      camera,
+      startState,
+      targetState,
+      duration,
+      bumpMultiplier: BUMP_MULTIPLIER,
+      easeExponent: EASE_EXPONENT,
       onUpdate: () => genericRenderWindow.value.getRenderWindow().render(),
-      onEnd: () => { is_moving.value = false; syncRemoteCamera(); },
+      onEnd: () => {
+        is_moving.value = false;
+        syncRemoteCamera();
+      },
     });
   }
 
   function syncRemoteCamera() {
-    const camera = genericRenderWindow.value.getRenderer().getActiveCamera(), params = { camera_options: getCameraOptions(camera) };
+    const camera = genericRenderWindow.value.getRenderer().getActiveCamera(),
+      params = { camera_options: getCameraOptions(camera) };
     viewerStore.request(viewer_schemas.opengeodeweb_viewer.viewer.update_camera, params, {
-      response_function: () => { remoteRender(); Object.assign(camera_options, params.camera_options); },
+      response_function: () => {
+        remoteRender();
+        Object.assign(camera_options, params.camera_options);
+      },
     });
   }
 
-  function remoteRender() { return viewerStore.request(viewer_schemas.opengeodeweb_viewer.viewer.render); }
+  function remoteRender() {
+    return viewerStore.request(viewer_schemas.opengeodeweb_viewer.viewer.render);
+  }
 
   function setContainer(container) {
-    if (!container.value) { return; }
+    if (!container.value) {
+      return;
+    }
     genericRenderWindow.value.setContainer(container.value.$el);
     const webGLRenderWindow = genericRenderWindow.value.getApiSpecificRenderWindow();
     webGLRenderWindow.setUseBackgroundImage(true);
@@ -144,20 +222,39 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
     resize(container.value.$el.offsetWidth, container.value.$el.offsetHeight);
     useMousePressed({
       target: container,
-      onPressed: (event) => { if (event.button === 0) { is_moving.value = true; event.stopPropagation(); imageStyle.opacity = 0; } },
-      onReleased: () => { if (is_moving.value) { is_moving.value = false; syncRemoteCamera(); } },
+      onPressed: (event) => {
+        if (event.button === 0) {
+          is_moving.value = true;
+          event.stopPropagation();
+          imageStyle.opacity = 0;
+        }
+      },
+      onReleased: () => {
+        if (is_moving.value) {
+          is_moving.value = false;
+          syncRemoteCamera();
+        }
+      },
     });
     useEventListener(container, "wheel", () => {
-      is_moving.value = true; imageStyle.opacity = 0;
+      is_moving.value = true;
+      imageStyle.opacity = 0;
       clearTimeout(wheelEventEndTimeout);
-      wheelEventEndTimeout = setTimeout(() => { is_moving.value = false; syncRemoteCamera(); }, WHEEL_TIME_OUT_MS);
+      wheelEventEndTimeout = setTimeout(() => {
+        is_moving.value = false;
+        syncRemoteCamera();
+      }, WHEEL_TIME_OUT_MS);
     });
   }
 
   async function resize(width, height) {
-    if (viewerStore.status !== Status.CONNECTED || status.value !== Status.CREATED) { return; }
-    const webGLRenderWindow = genericRenderWindow.value.getApiSpecificRenderWindow(), canvas = webGLRenderWindow.getCanvas();
-    canvas.width = width; canvas.height = height;
+    if (viewerStore.status !== Status.CONNECTED || status.value !== Status.CREATED) {
+      return;
+    }
+    const webGLRenderWindow = genericRenderWindow.value.getApiSpecificRenderWindow(),
+      canvas = webGLRenderWindow.getCanvas();
+    canvas.width = width;
+    canvas.height = height;
     await nextTick();
     webGLRenderWindow.setSize(width, height);
     viewStream.setSize(width, height);
@@ -166,7 +263,12 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
   }
 
   function getAverageBrightness(rect) {
-    return computeAverageBrightness(rect, { latestImage: latestImage.value, offscreenCtx, offscreenCanvas, genericRenderWindow: genericRenderWindow.value });
+    return computeAverageBrightness(rect, {
+      latestImage: latestImage.value,
+      offscreenCtx,
+      offscreenCanvas,
+      genericRenderWindow: genericRenderWindow.value,
+    });
   }
 
   function exportStores() {
@@ -175,10 +277,17 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
   }
 
   async function importStores(snapshot) {
-    if (!snapshot) { return; }
-    if (typeof snapshot.zScale === "number") { await setZScaling(snapshot.zScale); }
+    if (!snapshot) {
+      return;
+    }
+    if (typeof snapshot.zScale === "number") {
+      await setZScaling(snapshot.zScale);
+    }
     if (snapshot.camera_options) {
-      applyCameraOptions(genericRenderWindow.value.getRenderer().getActiveCamera(), snapshot.camera_options);
+      applyCameraOptions(
+        genericRenderWindow.value.getRenderer().getActiveCamera(),
+        snapshot.camera_options,
+      );
       genericRenderWindow.value.getRenderWindow().render();
       syncRemoteCamera();
     }
@@ -191,5 +300,27 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
     Object.keys(hybridDb).forEach((id) => delete hybridDb[id]);
   }
 
-  return { hybridDb, genericRenderWindow, addItem, removeItem, setVisibility, setZScaling, syncRemoteCamera, setCamera, initHybridViewer, remoteRender, resize, resetCamera, setCameraOrientation, setContainer, zScale, clear, exportStores, importStores, camera_options, latestImage, getAverageBrightness };
+  return {
+    hybridDb,
+    genericRenderWindow,
+    addItem,
+    removeItem,
+    setVisibility,
+    setZScaling,
+    syncRemoteCamera,
+    setCamera,
+    initHybridViewer,
+    remoteRender,
+    resize,
+    resetCamera,
+    setCameraOrientation,
+    setContainer,
+    zScale,
+    clear,
+    exportStores,
+    importStores,
+    camera_options,
+    latestImage,
+    getAverageBrightness,
+  };
 });

From d360a1bdac1e7f8a44cef1931fd47da12e58e15b Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Thu, 30 Apr 2026 16:00:57 +0200
Subject: [PATCH 8/9] oxlint

---
 app/components/ViewToolbar.vue |   4 +-
 app/stores/hybrid_viewer.js    | 311 ++++++++-------------------------
 app/utils/hybrid_viewer.js     |  92 +++-------
 3 files changed, 108 insertions(+), 299 deletions(-)

diff --git a/app/components/ViewToolbar.vue b/app/components/ViewToolbar.vue
index 00e30e35..e8c8b57f 100644
--- a/app/components/ViewToolbar.vue
+++ b/app/components/ViewToolbar.vue
@@ -3,11 +3,11 @@ import ActionButton from "@ogw_front/components/ActionButton.vue";
 import CameraBookmarkIcon from "@ogw_front/assets/viewer_svgs/camera-bookmark.svg";
 import CameraManager from "@ogw_front/components/CameraManager";
 import CameraOrientation from "@ogw_front/components/CameraOrientation.vue";
-import schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 import Screenshot from "@ogw_front/components/Screenshot";
+import ZScaling from "@ogw_front/components/ZScaling";
+import schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 import { useViewerStore } from "@ogw_front/stores/viewer";
-import ZScaling from "@ogw_front/components/ZScaling";
 
 const hybridViewerStore = useHybridViewerStore();
 const viewerStore = useViewerStore();
diff --git a/app/stores/hybrid_viewer.js b/app/stores/hybrid_viewer.js
index a2434ddf..46b45407 100644
--- a/app/stores/hybrid_viewer.js
+++ b/app/stores/hybrid_viewer.js
@@ -1,275 +1,149 @@
-import {
-  ORIENTATIONS,
-  animateCamera,
-  applyCameraOptions,
-  computeAverageBrightness,
-  getCameraOptions,
-} from "@ogw_front/utils/hybrid_viewer";
-import { dot } from "@kitware/vtk.js/Common/Core/Math";
+import { ACTOR_COLOR, BACKGROUND_COLOR, EASE_EXPONENT, SHORT_ANIMATION_DURATION, WHEEL_TIME_OUT_MS } from "@ogw_front/utils/vtk/constants";
+import { animateCamera, applyCameraOptions, computeAverageBrightness, getCameraOptions, performCameraOrientation } from "@ogw_front/utils/hybrid_viewer";
+import { Status } from "@ogw_front/utils/status";
+import { useDataStore } from "@ogw_front/stores/data";
+import { useViewerStore } from "@ogw_front/stores/viewer";
 import { newInstance as vtkActor } from "@kitware/vtk.js/Rendering/Core/Actor";
 import { newInstance as vtkGenericRenderWindow } from "@kitware/vtk.js/Rendering/Misc/GenericRenderWindow";
 import { newInstance as vtkMapper } from "@kitware/vtk.js/Rendering/Core/Mapper";
 import { newInstance as vtkXMLPolyDataReader } from "@kitware/vtk.js/IO/XML/XMLPolyDataReader";
-import {
-  ACTOR_COLOR,
-  ALIGNMENT_THRESHOLD,
-  BACKGROUND_COLOR,
-  BUMP_MULTIPLIER,
-  EASE_EXPONENT,
-  LONG_ANIMATION_DURATION,
-  SHORT_ANIMATION_DURATION,
-  WHEEL_TIME_OUT_MS,
-} from "@ogw_front/utils/vtk/constants";
-import { Status } from "@ogw_front/utils/status";
-import { useDataStore } from "@ogw_front/stores/data";
-import { useViewerStore } from "@ogw_front/stores/viewer";
+
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
 export const useHybridViewerStore = defineStore("hybridViewer", () => {
-  const dataStore = useDataStore(),
-    viewerStore = useViewerStore(),
-    hybridDb = reactive({});
-  const status = ref(Status.NOT_CREATED),
-    camera_options = reactive({}),
-    genericRenderWindow = reactive({});
-  const is_moving = ref(false),
-    zScale = ref(1),
-    latestImage = ref(undefined);
-  let viewStream, imageStyle, wheelEventEndTimeout;
+  const dataStore = useDataStore();
+  const hybridDb = reactive({});
+  const viewerStore = useViewerStore();
+  const camera_options = reactive({});
+  const genericRenderWindow = reactive({});
+  const status = ref(Status.NOT_CREATED);
+  const is_moving = ref(false);
+  const latestImage = ref(undefined);
+  const zScale = ref(1);
+  let imageStyle = undefined;
+  let viewStream = undefined;
+  let wheelEventEndTimeout = undefined;
   const gridActor = undefined;
-  const offscreenCanvas =
-    typeof document === "undefined" ? undefined : document.createElement("canvas");
-  const offscreenCtx = offscreenCanvas
-    ? offscreenCanvas.getContext("2d", { willReadFrequently: true })
-    : undefined;
+  const offscreenCanvas = typeof document === "undefined" ? undefined : document.createElement("canvas");
+  const offscreenCtx = offscreenCanvas ? offscreenCanvas.getContext("2d", { willReadFrequently: true }) : undefined;
 
   async function initHybridViewer() {
-    if (status.value !== Status.NOT_CREATED) {
-      return;
-    }
+    if (status.value !== Status.NOT_CREATED) { return; }
     status.value = Status.CREATING;
-    genericRenderWindow.value = vtkGenericRenderWindow({
-      background: BACKGROUND_COLOR,
-      listenWindowResize: false,
-    });
+    genericRenderWindow.value = vtkGenericRenderWindow({ background: BACKGROUND_COLOR, listenWindowResize: false });
     const webGLRenderWindow = genericRenderWindow.value.getApiSpecificRenderWindow();
     imageStyle = webGLRenderWindow.getReferenceByName("bgImage").style;
     Object.assign(imageStyle, { transition: "opacity 0.1s ease-in", zIndex: 1 });
     await viewerStore.ws_connect();
     viewStream = viewerStore.client.getImageStream().createViewStream("-1");
     viewStream.onImageReady((event) => {
-      if (is_moving.value) {
-        return;
-      }
+      if (is_moving.value) { return; }
       latestImage.value = event.image;
       webGLRenderWindow.setBackgroundImage(event.image);
       imageStyle.opacity = 1;
     });
     const camera = genericRenderWindow.value.getRenderer().getActiveCamera();
     Object.assign(camera_options, getCameraOptions(camera));
-    camera.onModified(() => {
-      Object.assign(camera_options, getCameraOptions(camera));
-    });
+    camera.onModified(() => { Object.assign(camera_options, getCameraOptions(camera)); });
     status.value = Status.CREATED;
   }
 
   async function addItem(id) {
-    if (!genericRenderWindow.value) {
-      return;
-    }
-    const value = await dataStore.item(id),
-      reader = vtkXMLPolyDataReader(),
-      textEncoder = new TextEncoder();
-    await reader.parseAsArrayBuffer(textEncoder.encode(value.binary_light_viewable));
-    const polydata = reader.getOutputData(0),
-      mapper = vtkMapper(),
-      actor = vtkActor();
-    mapper.setInputData(polydata);
-    actor.getProperty().setColor(ACTOR_COLOR);
-    actor.setMapper(mapper);
+    if (!genericRenderWindow.value) { return; }
+    const reader = vtkXMLPolyDataReader();
+    const value = await dataStore.item(id);
+    await reader.parseAsArrayBuffer(new TextEncoder().encode(value.binary_light_viewable));
+    const actor = vtkActor();
+    const mapper = vtkMapper();
+    const polydata = reader.getOutputData(0);
+    mapper.setInputData(polydata); actor.getProperty().setColor(ACTOR_COLOR); actor.setMapper(mapper);
     const renderer = genericRenderWindow.value.getRenderer();
     const isFirst = renderer.getActors().length === 0;
-    renderer.addActor(actor);
-    if (isFirst) {
-      renderer.resetCamera();
-    }
+    renderer.addActor(actor); if (isFirst) { renderer.resetCamera(); }
     hybridDb[id] = { actor, polydata, mapper };
   }
 
   function removeItem(id) {
-    if (!hybridDb[id]) {
-      return;
-    }
+    if (!hybridDb[id]) { return; }
     genericRenderWindow.value.getRenderer().removeActor(hybridDb[id].actor);
-    genericRenderWindow.value.getRenderWindow().render();
-    delete hybridDb[id];
+    genericRenderWindow.value.getRenderWindow().render(); delete hybridDb[id];
   }
 
   function setVisibility(id, visibility) {
-    if (!hybridDb[id]) {
-      return;
-    }
-    hybridDb[id].actor.setVisibility(visibility);
-    genericRenderWindow.value.getRenderWindow().render();
+    if (!hybridDb[id]) { return; }
+    hybridDb[id].actor.setVisibility(visibility); genericRenderWindow.value.getRenderWindow().render();
   }
 
   async function setZScaling(z_scale) {
-    zScale.value = z_scale;
-    const renderer = genericRenderWindow.value.getRenderer();
-    renderer.getActors().forEach((actor) => {
-      if (actor !== gridActor) {
-        const scale = actor.getScale();
-        actor.setScale(scale[0], scale[1], z_scale);
-      }
-    });
-    renderer.resetCamera();
-    genericRenderWindow.value.getRenderWindow().render();
+    zScale.value = z_scale; const renderer = genericRenderWindow.value.getRenderer();
+    for (const actor of renderer.getActors()) { if (actor !== gridActor) { const scale = actor.getScale(); actor.setScale(scale[0], scale[1], z_scale); } }
+    renderer.resetCamera(); genericRenderWindow.value.getRenderWindow().render();
     const schema = viewer_schemas?.opengeodeweb_viewer?.viewer?.set_z_scaling;
-    if (schema) {
-      await viewerStore.request(schema, { z_scale });
-    }
+    if (schema) { await viewerStore.request(schema, { z_scale }); }
     remoteRender();
   }
 
-  function resetCamera() {
-    genericRenderWindow.value.getRenderer().resetCamera();
-    genericRenderWindow.value.getRenderWindow().render();
-    syncRemoteCamera();
-  }
+  function resetCamera() { genericRenderWindow.value.getRenderer().resetCamera(); genericRenderWindow.value.getRenderWindow().render(); syncRemoteCamera(); }
 
   function setCamera(new_camera_options) {
-    const renderer = genericRenderWindow.value.getRenderer(),
-      camera = renderer.getActiveCamera();
-    const startState = getCameraOptions(camera),
-      targetState = new_camera_options;
-    is_moving.value = true;
-    if (imageStyle) {
-      imageStyle.opacity = 0;
-    }
+    const camera = genericRenderWindow.value.getRenderer().getActiveCamera();
+    const startState = getCameraOptions(camera);
+    is_moving.value = true; if (imageStyle) { imageStyle.opacity = 0; }
     animateCamera({
-      camera,
-      startState,
-      targetState,
-      duration: SHORT_ANIMATION_DURATION,
-      bumpMultiplier: 0,
-      easeExponent: EASE_EXPONENT,
+      camera, startState, targetState: new_camera_options, duration: SHORT_ANIMATION_DURATION, bumpMultiplier: 0, easeExponent: EASE_EXPONENT,
       onUpdate: () => genericRenderWindow.value.getRenderWindow().render(),
-      onEnd: () => {
-        applyCameraOptions(camera, targetState);
-        genericRenderWindow.value.getRenderWindow().render();
-        is_moving.value = false;
-        syncRemoteCamera();
-      },
+      onEnd: () => { applyCameraOptions(camera, new_camera_options); genericRenderWindow.value.getRenderWindow().render(); is_moving.value = false; syncRemoteCamera(); },
     });
   }
 
   function setCameraOrientation(orientation) {
-    const config = ORIENTATIONS[orientation.toLowerCase()],
-      renderer = genericRenderWindow.value.getRenderer(),
-      camera = renderer.getActiveCamera(),
-      startState = getCameraOptions(camera);
-    applyCameraOptions(camera, { ...config, focal_point: [0, 0, 0] });
-    renderer.resetCamera();
-    const targetState = getCameraOptions(camera);
-    applyCameraOptions(camera, startState);
-    const duration =
-      dot(camera.getDirectionOfProjection(), config.position) > ALIGNMENT_THRESHOLD
-        ? LONG_ANIMATION_DURATION
-        : SHORT_ANIMATION_DURATION;
-    is_moving.value = true;
-    if (imageStyle) {
-      imageStyle.opacity = 0;
-    }
-    animateCamera({
-      camera,
-      startState,
-      targetState,
-      duration,
-      bumpMultiplier: BUMP_MULTIPLIER,
-      easeExponent: EASE_EXPONENT,
-      onUpdate: () => genericRenderWindow.value.getRenderWindow().render(),
-      onEnd: () => {
-        is_moving.value = false;
-        syncRemoteCamera();
-      },
+    performCameraOrientation({
+      orientation, camera: genericRenderWindow.value.getRenderer().getActiveCamera(), renderer: genericRenderWindow.value.getRenderer(),
+      renderWindow: genericRenderWindow.value.getRenderWindow(),
+      onStart: () => { is_moving.value = true; if (imageStyle) { imageStyle.opacity = 0; } },
+      onEnd: () => { is_moving.value = false; syncRemoteCamera(); },
     });
   }
 
   function syncRemoteCamera() {
-    const camera = genericRenderWindow.value.getRenderer().getActiveCamera(),
-      params = { camera_options: getCameraOptions(camera) };
-    viewerStore.request(viewer_schemas.opengeodeweb_viewer.viewer.update_camera, params, {
-      response_function: () => {
-        remoteRender();
-        Object.assign(camera_options, params.camera_options);
-      },
+    const camera = genericRenderWindow.value.getRenderer().getActiveCamera();
+    const options = getCameraOptions(camera);
+    viewerStore.request(viewer_schemas.opengeodeweb_viewer.viewer.update_camera, { camera_options: options }, {
+      response_function: () => { remoteRender(); Object.assign(camera_options, options); },
     });
   }
 
-  function remoteRender() {
-    return viewerStore.request(viewer_schemas.opengeodeweb_viewer.viewer.render);
-  }
+  function remoteRender() { return viewerStore.request(viewer_schemas.opengeodeweb_viewer.viewer.render); }
 
   function setContainer(container) {
-    if (!container.value) {
-      return;
-    }
+    if (!container.value) { return; }
     genericRenderWindow.value.setContainer(container.value.$el);
     const webGLRenderWindow = genericRenderWindow.value.getApiSpecificRenderWindow();
-    webGLRenderWindow.setUseBackgroundImage(true);
-    imageStyle = webGLRenderWindow.getReferenceByName("bgImage").style;
+    webGLRenderWindow.setUseBackgroundImage(true); imageStyle = webGLRenderWindow.getReferenceByName("bgImage").style;
     Object.assign(imageStyle, { transition: "opacity 0.1s ease-in", zIndex: 1 });
     resize(container.value.$el.offsetWidth, container.value.$el.offsetHeight);
     useMousePressed({
       target: container,
-      onPressed: (event) => {
-        if (event.button === 0) {
-          is_moving.value = true;
-          event.stopPropagation();
-          imageStyle.opacity = 0;
-        }
-      },
-      onReleased: () => {
-        if (is_moving.value) {
-          is_moving.value = false;
-          syncRemoteCamera();
-        }
-      },
+      onPressed: (event) => { if (event.button === 0) { is_moving.value = true; event.stopPropagation(); if (imageStyle) { imageStyle.opacity = 0; } } },
+      onReleased: () => { if (is_moving.value) { is_moving.value = false; syncRemoteCamera(); } },
     });
     useEventListener(container, "wheel", () => {
-      is_moving.value = true;
-      imageStyle.opacity = 0;
+      is_moving.value = true; if (imageStyle) { imageStyle.opacity = 0; }
       clearTimeout(wheelEventEndTimeout);
-      wheelEventEndTimeout = setTimeout(() => {
-        is_moving.value = false;
-        syncRemoteCamera();
-      }, WHEEL_TIME_OUT_MS);
+      wheelEventEndTimeout = setTimeout(() => { is_moving.value = false; syncRemoteCamera(); }, WHEEL_TIME_OUT_MS);
     });
   }
 
   async function resize(width, height) {
-    if (viewerStore.status !== Status.CONNECTED || status.value !== Status.CREATED) {
-      return;
-    }
-    const webGLRenderWindow = genericRenderWindow.value.getApiSpecificRenderWindow(),
-      canvas = webGLRenderWindow.getCanvas();
-    canvas.width = width;
-    canvas.height = height;
-    await nextTick();
-    webGLRenderWindow.setSize(width, height);
-    viewStream.setSize(width, height);
-    genericRenderWindow.value.getRenderWindow().render();
-    remoteRender();
+    if (viewerStore.status !== Status.CONNECTED || status.value !== Status.CREATED) { return; }
+    const webGLRenderWindow = genericRenderWindow.value.getApiSpecificRenderWindow();
+    const canvas = webGLRenderWindow.getCanvas();
+    canvas.width = width; canvas.height = height; await nextTick();
+    webGLRenderWindow.setSize(width, height); viewStream.setSize(width, height);
+    genericRenderWindow.value.getRenderWindow().render(); remoteRender();
   }
 
-  function getAverageBrightness(rect) {
-    return computeAverageBrightness(rect, {
-      latestImage: latestImage.value,
-      offscreenCtx,
-      offscreenCanvas,
-      genericRenderWindow: genericRenderWindow.value,
-    });
-  }
+  function getAverageBrightness(rect) { return computeAverageBrightness(rect, { latestImage: latestImage.value, offscreenCtx, offscreenCanvas, genericRenderWindow: genericRenderWindow.value }); }
 
   function exportStores() {
     const camera = genericRenderWindow.value.getRenderer().getActiveCamera();
@@ -277,50 +151,19 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
   }
 
   async function importStores(snapshot) {
-    if (!snapshot) {
-      return;
-    }
-    if (typeof snapshot.zScale === "number") {
-      await setZScaling(snapshot.zScale);
-    }
+    if (!snapshot) { return; }
+    if (typeof snapshot.zScale === "number") { await setZScaling(snapshot.zScale); }
     if (snapshot.camera_options) {
-      applyCameraOptions(
-        genericRenderWindow.value.getRenderer().getActiveCamera(),
-        snapshot.camera_options,
-      );
-      genericRenderWindow.value.getRenderWindow().render();
-      syncRemoteCamera();
+      applyCameraOptions(genericRenderWindow.value.getRenderer().getActiveCamera(), snapshot.camera_options);
+      genericRenderWindow.value.getRenderWindow().render(); syncRemoteCamera();
     }
   }
 
   function clear() {
     const renderer = genericRenderWindow.value.getRenderer();
-    renderer.getActors().forEach((actor) => renderer.removeActor(actor));
-    genericRenderWindow.value.getRenderWindow().render();
-    Object.keys(hybridDb).forEach((id) => delete hybridDb[id]);
+    for (const actor of renderer.getActors()) { renderer.removeActor(actor); }
+    genericRenderWindow.value.getRenderWindow().render(); for (const id of Object.keys(hybridDb)) { delete hybridDb[id]; }
   }
 
-  return {
-    hybridDb,
-    genericRenderWindow,
-    addItem,
-    removeItem,
-    setVisibility,
-    setZScaling,
-    syncRemoteCamera,
-    setCamera,
-    initHybridViewer,
-    remoteRender,
-    resize,
-    resetCamera,
-    setCameraOrientation,
-    setContainer,
-    zScale,
-    clear,
-    exportStores,
-    importStores,
-    camera_options,
-    latestImage,
-    getAverageBrightness,
-  };
+  return { hybridDb, genericRenderWindow, addItem, removeItem, setVisibility, setZScaling, syncRemoteCamera, setCamera, initHybridViewer, remoteRender, resize, resetCamera, setCameraOrientation, setContainer, zScale, clear, exportStores, importStores, camera_options, latestImage, getAverageBrightness };
 });
diff --git a/app/utils/hybrid_viewer.js b/app/utils/hybrid_viewer.js
index dbd00d8b..fe6fc028 100644
--- a/app/utils/hybrid_viewer.js
+++ b/app/utils/hybrid_viewer.js
@@ -1,4 +1,6 @@
-import { SHORT_ANIMATION_DURATION } from "@ogw_front/utils/vtk/constants";
+import { ALIGNMENT_THRESHOLD, BUMP_MULTIPLIER, EASE_EXPONENT, LONG_ANIMATION_DURATION, SHORT_ANIMATION_DURATION } from "@ogw_front/utils/vtk/constants";
+import { dot } from "@kitware/vtk.js/Common/Core/Math";
+
 const RGB_MAX = 255;
 const BACKGROUND_GREY_VALUE = 180;
 const SAMPLE_SIZE = 10;
@@ -15,9 +17,7 @@ const ORIENTATIONS = {
 };
 
 function getCameraOptions(camera) {
-  if (!camera?.getFocalPoint) {
-    return camera;
-  }
+  if (!camera?.getFocalPoint) { return camera; }
   return {
     focal_point: [...(camera.getFocalPoint() ?? [])],
     view_up: [...(camera.getViewUp() ?? [])],
@@ -56,94 +56,60 @@ function computeAverageBrightness(rect, options) {
   if (!latestImage || !offscreenCtx || !offscreenCanvas || !genericRenderWindow) {
     return BACKGROUND_GREY_VALUE / RGB_MAX;
   }
-
   const canvas = genericRenderWindow.getApiSpecificRenderWindow().getCanvas();
-  if (!canvas) {
-    return BACKGROUND_GREY_VALUE / RGB_MAX;
-  }
-
+  if (!canvas) { return BACKGROUND_GREY_VALUE / RGB_MAX; }
   const { relX, relY, relW, relH } = mapRect(rect, latestImage, canvas.getBoundingClientRect());
-
   offscreenCanvas.width = SAMPLE_SIZE;
   offscreenCanvas.height = SAMPLE_SIZE;
-
   try {
-    offscreenCtx.drawImage(
-      latestImage,
-      Math.max(0, relX),
-      Math.max(0, relY),
-      Math.min(latestImage.width, relW),
-      Math.min(latestImage.height, relH),
-      0,
-      0,
-      SAMPLE_SIZE,
-      SAMPLE_SIZE,
-    );
+    offscreenCtx.drawImage(latestImage, Math.max(0, relX), Math.max(0, relY), Math.min(latestImage.width, relW), Math.min(latestImage.height, relH), 0, 0, SAMPLE_SIZE, SAMPLE_SIZE);
     const { data } = offscreenCtx.getImageData(0, 0, SAMPLE_SIZE, SAMPLE_SIZE);
-
     let minBrightness = 1;
     for (let i = 0; i < TOTAL_CHANNELS; i += RGBA_CHANNELS) {
       const brightness = (data[i] + data[i + 1] + data[i + 2]) / (3 * RGB_MAX);
-      if (brightness < minBrightness) {
-        minBrightness = brightness;
-      }
+      if (brightness < minBrightness) { minBrightness = brightness; }
     }
-
     return minBrightness;
-  } catch {
-    return BACKGROUND_GREY_VALUE / RGB_MAX;
-  }
+  } catch { return BACKGROUND_GREY_VALUE / RGB_MAX; }
 }
 
 function animateCamera(options) {
-  const {
-    camera,
-    startState,
-    targetState,
-    duration,
-    bumpMultiplier,
-    easeExponent,
-    onUpdate,
-    onEnd,
-  } = options;
+  const { camera, startState, targetState, duration, bumpMultiplier, easeExponent, onUpdate, onEnd } = options;
   const startTime = performance.now();
-
   function animate(currentTime) {
     const progress = Math.min((currentTime - startTime) / duration, 1);
-    const ease =
-      duration > SHORT_ANIMATION_DURATION
-        ? 1 - (1 - progress) ** easeExponent
-        : progress * (2 - progress);
+    const ease = duration > SHORT_ANIMATION_DURATION ? 1 - (1 - progress) ** easeExponent : progress * (2 - progress);
     const bump = bumpMultiplier * Math.sin(Math.PI * progress);
-
     camera.set({
-      position: startState.position.map(
-        (startValue, index) =>
-          startValue + (targetState.position[index] - startValue) * ease + bump,
-      ),
-      viewUp: startState.view_up.map(
-        (startValue, index) => startValue + (targetState.view_up[index] - startValue) * ease,
-      ),
-      focalPoint: startState.focal_point.map(
-        (startValue, index) => startValue + (targetState.focal_point[index] - startValue) * ease,
-      ),
+      position: startState.position.map((startValue, index) => startValue + (targetState.position[index] - startValue) * ease + bump),
+      viewUp: startState.view_up.map((startValue, index) => startValue + (targetState.view_up[index] - startValue) * ease),
+      focalPoint: startState.focal_point.map((startValue, index) => startValue + (targetState.focal_point[index] - startValue) * ease),
     });
-
     onUpdate();
-
-    if (progress < 1) {
-      requestAnimationFrame(animate);
-    } else {
-      onEnd();
-    }
+    if (progress < 1) { requestAnimationFrame(animate); } else { onEnd(); }
   }
   requestAnimationFrame(animate);
 }
 
+function performCameraOrientation(options) {
+  const { orientation, camera, renderer, renderWindow, onStart, onEnd } = options;
+  const config = ORIENTATIONS[orientation.toLowerCase()];
+  const startState = getCameraOptions(camera);
+  applyCameraOptions(camera, { ...config, focal_point: [0, 0, 0] });
+  renderer.resetCamera();
+  const targetState = getCameraOptions(camera);
+  applyCameraOptions(camera, startState);
+  const alignment = dot(camera.getDirectionOfProjection(), config.position);
+  const duration = alignment > ALIGNMENT_THRESHOLD ? LONG_ANIMATION_DURATION : SHORT_ANIMATION_DURATION;
+  onStart();
+  animateCamera({ camera, startState, targetState, duration, bumpMultiplier: BUMP_MULTIPLIER, easeExponent: EASE_EXPONENT, onUpdate: () => renderWindow.render(), onEnd });
+}
+
 export {
   ORIENTATIONS,
   animateCamera,
   applyCameraOptions,
   computeAverageBrightness,
   getCameraOptions,
+  performCameraOrientation,
 };

From 76336f9693a30b0ec449505402b6253c27271709 Mon Sep 17 00:00:00 2001
From: SpliiT <106495600+SpliiT@users.noreply.github.com>
Date: Thu, 30 Apr 2026 14:02:04 +0000
Subject: [PATCH 9/9] Apply prepare changes

---
 app/stores/hybrid_viewer.js | 248 +++++++++++++++++++++++++++++-------
 app/utils/hybrid_viewer.js  |  85 ++++++++++--
 2 files changed, 271 insertions(+), 62 deletions(-)

diff --git a/app/stores/hybrid_viewer.js b/app/stores/hybrid_viewer.js
index 46b45407..e6f68432 100644
--- a/app/stores/hybrid_viewer.js
+++ b/app/stores/hybrid_viewer.js
@@ -1,5 +1,17 @@
-import { ACTOR_COLOR, BACKGROUND_COLOR, EASE_EXPONENT, SHORT_ANIMATION_DURATION, WHEEL_TIME_OUT_MS } from "@ogw_front/utils/vtk/constants";
-import { animateCamera, applyCameraOptions, computeAverageBrightness, getCameraOptions, performCameraOrientation } from "@ogw_front/utils/hybrid_viewer";
+import {
+  ACTOR_COLOR,
+  BACKGROUND_COLOR,
+  EASE_EXPONENT,
+  SHORT_ANIMATION_DURATION,
+  WHEEL_TIME_OUT_MS,
+} from "@ogw_front/utils/vtk/constants";
+import {
+  animateCamera,
+  applyCameraOptions,
+  computeAverageBrightness,
+  getCameraOptions,
+  performCameraOrientation,
+} from "@ogw_front/utils/hybrid_viewer";
 import { Status } from "@ogw_front/utils/status";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useViewerStore } from "@ogw_front/stores/viewer";
@@ -24,126 +36,231 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
   let viewStream = undefined;
   let wheelEventEndTimeout = undefined;
   const gridActor = undefined;
-  const offscreenCanvas = typeof document === "undefined" ? undefined : document.createElement("canvas");
-  const offscreenCtx = offscreenCanvas ? offscreenCanvas.getContext("2d", { willReadFrequently: true }) : undefined;
+  const offscreenCanvas =
+    typeof document === "undefined" ? undefined : document.createElement("canvas");
+  const offscreenCtx = offscreenCanvas
+    ? offscreenCanvas.getContext("2d", { willReadFrequently: true })
+    : undefined;
 
   async function initHybridViewer() {
-    if (status.value !== Status.NOT_CREATED) { return; }
+    if (status.value !== Status.NOT_CREATED) {
+      return;
+    }
     status.value = Status.CREATING;
-    genericRenderWindow.value = vtkGenericRenderWindow({ background: BACKGROUND_COLOR, listenWindowResize: false });
+    genericRenderWindow.value = vtkGenericRenderWindow({
+      background: BACKGROUND_COLOR,
+      listenWindowResize: false,
+    });
     const webGLRenderWindow = genericRenderWindow.value.getApiSpecificRenderWindow();
     imageStyle = webGLRenderWindow.getReferenceByName("bgImage").style;
     Object.assign(imageStyle, { transition: "opacity 0.1s ease-in", zIndex: 1 });
     await viewerStore.ws_connect();
     viewStream = viewerStore.client.getImageStream().createViewStream("-1");
     viewStream.onImageReady((event) => {
-      if (is_moving.value) { return; }
+      if (is_moving.value) {
+        return;
+      }
       latestImage.value = event.image;
       webGLRenderWindow.setBackgroundImage(event.image);
       imageStyle.opacity = 1;
     });
     const camera = genericRenderWindow.value.getRenderer().getActiveCamera();
     Object.assign(camera_options, getCameraOptions(camera));
-    camera.onModified(() => { Object.assign(camera_options, getCameraOptions(camera)); });
+    camera.onModified(() => {
+      Object.assign(camera_options, getCameraOptions(camera));
+    });
     status.value = Status.CREATED;
   }
 
   async function addItem(id) {
-    if (!genericRenderWindow.value) { return; }
+    if (!genericRenderWindow.value) {
+      return;
+    }
     const reader = vtkXMLPolyDataReader();
     const value = await dataStore.item(id);
     await reader.parseAsArrayBuffer(new TextEncoder().encode(value.binary_light_viewable));
     const actor = vtkActor();
     const mapper = vtkMapper();
     const polydata = reader.getOutputData(0);
-    mapper.setInputData(polydata); actor.getProperty().setColor(ACTOR_COLOR); actor.setMapper(mapper);
+    mapper.setInputData(polydata);
+    actor.getProperty().setColor(ACTOR_COLOR);
+    actor.setMapper(mapper);
     const renderer = genericRenderWindow.value.getRenderer();
     const isFirst = renderer.getActors().length === 0;
-    renderer.addActor(actor); if (isFirst) { renderer.resetCamera(); }
+    renderer.addActor(actor);
+    if (isFirst) {
+      renderer.resetCamera();
+    }
     hybridDb[id] = { actor, polydata, mapper };
   }
 
   function removeItem(id) {
-    if (!hybridDb[id]) { return; }
+    if (!hybridDb[id]) {
+      return;
+    }
     genericRenderWindow.value.getRenderer().removeActor(hybridDb[id].actor);
-    genericRenderWindow.value.getRenderWindow().render(); delete hybridDb[id];
+    genericRenderWindow.value.getRenderWindow().render();
+    delete hybridDb[id];
   }
 
   function setVisibility(id, visibility) {
-    if (!hybridDb[id]) { return; }
-    hybridDb[id].actor.setVisibility(visibility); genericRenderWindow.value.getRenderWindow().render();
+    if (!hybridDb[id]) {
+      return;
+    }
+    hybridDb[id].actor.setVisibility(visibility);
+    genericRenderWindow.value.getRenderWindow().render();
   }
 
   async function setZScaling(z_scale) {
-    zScale.value = z_scale; const renderer = genericRenderWindow.value.getRenderer();
-    for (const actor of renderer.getActors()) { if (actor !== gridActor) { const scale = actor.getScale(); actor.setScale(scale[0], scale[1], z_scale); } }
-    renderer.resetCamera(); genericRenderWindow.value.getRenderWindow().render();
+    zScale.value = z_scale;
+    const renderer = genericRenderWindow.value.getRenderer();
+    for (const actor of renderer.getActors()) {
+      if (actor !== gridActor) {
+        const scale = actor.getScale();
+        actor.setScale(scale[0], scale[1], z_scale);
+      }
+    }
+    renderer.resetCamera();
+    genericRenderWindow.value.getRenderWindow().render();
     const schema = viewer_schemas?.opengeodeweb_viewer?.viewer?.set_z_scaling;
-    if (schema) { await viewerStore.request(schema, { z_scale }); }
+    if (schema) {
+      await viewerStore.request(schema, { z_scale });
+    }
     remoteRender();
   }
 
-  function resetCamera() { genericRenderWindow.value.getRenderer().resetCamera(); genericRenderWindow.value.getRenderWindow().render(); syncRemoteCamera(); }
+  function resetCamera() {
+    genericRenderWindow.value.getRenderer().resetCamera();
+    genericRenderWindow.value.getRenderWindow().render();
+    syncRemoteCamera();
+  }
 
   function setCamera(new_camera_options) {
     const camera = genericRenderWindow.value.getRenderer().getActiveCamera();
     const startState = getCameraOptions(camera);
-    is_moving.value = true; if (imageStyle) { imageStyle.opacity = 0; }
+    is_moving.value = true;
+    if (imageStyle) {
+      imageStyle.opacity = 0;
+    }
     animateCamera({
-      camera, startState, targetState: new_camera_options, duration: SHORT_ANIMATION_DURATION, bumpMultiplier: 0, easeExponent: EASE_EXPONENT,
+      camera,
+      startState,
+      targetState: new_camera_options,
+      duration: SHORT_ANIMATION_DURATION,
+      bumpMultiplier: 0,
+      easeExponent: EASE_EXPONENT,
       onUpdate: () => genericRenderWindow.value.getRenderWindow().render(),
-      onEnd: () => { applyCameraOptions(camera, new_camera_options); genericRenderWindow.value.getRenderWindow().render(); is_moving.value = false; syncRemoteCamera(); },
+      onEnd: () => {
+        applyCameraOptions(camera, new_camera_options);
+        genericRenderWindow.value.getRenderWindow().render();
+        is_moving.value = false;
+        syncRemoteCamera();
+      },
     });
   }
 
   function setCameraOrientation(orientation) {
     performCameraOrientation({
-      orientation, camera: genericRenderWindow.value.getRenderer().getActiveCamera(), renderer: genericRenderWindow.value.getRenderer(),
+      orientation,
+      camera: genericRenderWindow.value.getRenderer().getActiveCamera(),
+      renderer: genericRenderWindow.value.getRenderer(),
       renderWindow: genericRenderWindow.value.getRenderWindow(),
-      onStart: () => { is_moving.value = true; if (imageStyle) { imageStyle.opacity = 0; } },
-      onEnd: () => { is_moving.value = false; syncRemoteCamera(); },
+      onStart: () => {
+        is_moving.value = true;
+        if (imageStyle) {
+          imageStyle.opacity = 0;
+        }
+      },
+      onEnd: () => {
+        is_moving.value = false;
+        syncRemoteCamera();
+      },
     });
   }
 
   function syncRemoteCamera() {
     const camera = genericRenderWindow.value.getRenderer().getActiveCamera();
     const options = getCameraOptions(camera);
-    viewerStore.request(viewer_schemas.opengeodeweb_viewer.viewer.update_camera, { camera_options: options }, {
-      response_function: () => { remoteRender(); Object.assign(camera_options, options); },
-    });
+    viewerStore.request(
+      viewer_schemas.opengeodeweb_viewer.viewer.update_camera,
+      { camera_options: options },
+      {
+        response_function: () => {
+          remoteRender();
+          Object.assign(camera_options, options);
+        },
+      },
+    );
   }
 
-  function remoteRender() { return viewerStore.request(viewer_schemas.opengeodeweb_viewer.viewer.render); }
+  function remoteRender() {
+    return viewerStore.request(viewer_schemas.opengeodeweb_viewer.viewer.render);
+  }
 
   function setContainer(container) {
-    if (!container.value) { return; }
+    if (!container.value) {
+      return;
+    }
     genericRenderWindow.value.setContainer(container.value.$el);
     const webGLRenderWindow = genericRenderWindow.value.getApiSpecificRenderWindow();
-    webGLRenderWindow.setUseBackgroundImage(true); imageStyle = webGLRenderWindow.getReferenceByName("bgImage").style;
+    webGLRenderWindow.setUseBackgroundImage(true);
+    imageStyle = webGLRenderWindow.getReferenceByName("bgImage").style;
     Object.assign(imageStyle, { transition: "opacity 0.1s ease-in", zIndex: 1 });
     resize(container.value.$el.offsetWidth, container.value.$el.offsetHeight);
     useMousePressed({
       target: container,
-      onPressed: (event) => { if (event.button === 0) { is_moving.value = true; event.stopPropagation(); if (imageStyle) { imageStyle.opacity = 0; } } },
-      onReleased: () => { if (is_moving.value) { is_moving.value = false; syncRemoteCamera(); } },
+      onPressed: (event) => {
+        if (event.button === 0) {
+          is_moving.value = true;
+          event.stopPropagation();
+          if (imageStyle) {
+            imageStyle.opacity = 0;
+          }
+        }
+      },
+      onReleased: () => {
+        if (is_moving.value) {
+          is_moving.value = false;
+          syncRemoteCamera();
+        }
+      },
     });
     useEventListener(container, "wheel", () => {
-      is_moving.value = true; if (imageStyle) { imageStyle.opacity = 0; }
+      is_moving.value = true;
+      if (imageStyle) {
+        imageStyle.opacity = 0;
+      }
       clearTimeout(wheelEventEndTimeout);
-      wheelEventEndTimeout = setTimeout(() => { is_moving.value = false; syncRemoteCamera(); }, WHEEL_TIME_OUT_MS);
+      wheelEventEndTimeout = setTimeout(() => {
+        is_moving.value = false;
+        syncRemoteCamera();
+      }, WHEEL_TIME_OUT_MS);
     });
   }
 
   async function resize(width, height) {
-    if (viewerStore.status !== Status.CONNECTED || status.value !== Status.CREATED) { return; }
+    if (viewerStore.status !== Status.CONNECTED || status.value !== Status.CREATED) {
+      return;
+    }
     const webGLRenderWindow = genericRenderWindow.value.getApiSpecificRenderWindow();
     const canvas = webGLRenderWindow.getCanvas();
-    canvas.width = width; canvas.height = height; await nextTick();
-    webGLRenderWindow.setSize(width, height); viewStream.setSize(width, height);
-    genericRenderWindow.value.getRenderWindow().render(); remoteRender();
+    canvas.width = width;
+    canvas.height = height;
+    await nextTick();
+    webGLRenderWindow.setSize(width, height);
+    viewStream.setSize(width, height);
+    genericRenderWindow.value.getRenderWindow().render();
+    remoteRender();
   }
 
-  function getAverageBrightness(rect) { return computeAverageBrightness(rect, { latestImage: latestImage.value, offscreenCtx, offscreenCanvas, genericRenderWindow: genericRenderWindow.value }); }
+  function getAverageBrightness(rect) {
+    return computeAverageBrightness(rect, {
+      latestImage: latestImage.value,
+      offscreenCtx,
+      offscreenCanvas,
+      genericRenderWindow: genericRenderWindow.value,
+    });
+  }
 
   function exportStores() {
     const camera = genericRenderWindow.value.getRenderer().getActiveCamera();
@@ -151,19 +268,54 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
   }
 
   async function importStores(snapshot) {
-    if (!snapshot) { return; }
-    if (typeof snapshot.zScale === "number") { await setZScaling(snapshot.zScale); }
+    if (!snapshot) {
+      return;
+    }
+    if (typeof snapshot.zScale === "number") {
+      await setZScaling(snapshot.zScale);
+    }
     if (snapshot.camera_options) {
-      applyCameraOptions(genericRenderWindow.value.getRenderer().getActiveCamera(), snapshot.camera_options);
-      genericRenderWindow.value.getRenderWindow().render(); syncRemoteCamera();
+      applyCameraOptions(
+        genericRenderWindow.value.getRenderer().getActiveCamera(),
+        snapshot.camera_options,
+      );
+      genericRenderWindow.value.getRenderWindow().render();
+      syncRemoteCamera();
     }
   }
 
   function clear() {
     const renderer = genericRenderWindow.value.getRenderer();
-    for (const actor of renderer.getActors()) { renderer.removeActor(actor); }
-    genericRenderWindow.value.getRenderWindow().render(); for (const id of Object.keys(hybridDb)) { delete hybridDb[id]; }
+    for (const actor of renderer.getActors()) {
+      renderer.removeActor(actor);
+    }
+    genericRenderWindow.value.getRenderWindow().render();
+    for (const id of Object.keys(hybridDb)) {
+      delete hybridDb[id];
+    }
   }
 
-  return { hybridDb, genericRenderWindow, addItem, removeItem, setVisibility, setZScaling, syncRemoteCamera, setCamera, initHybridViewer, remoteRender, resize, resetCamera, setCameraOrientation, setContainer, zScale, clear, exportStores, importStores, camera_options, latestImage, getAverageBrightness };
+  return {
+    hybridDb,
+    genericRenderWindow,
+    addItem,
+    removeItem,
+    setVisibility,
+    setZScaling,
+    syncRemoteCamera,
+    setCamera,
+    initHybridViewer,
+    remoteRender,
+    resize,
+    resetCamera,
+    setCameraOrientation,
+    setContainer,
+    zScale,
+    clear,
+    exportStores,
+    importStores,
+    camera_options,
+    latestImage,
+    getAverageBrightness,
+  };
 });
diff --git a/app/utils/hybrid_viewer.js b/app/utils/hybrid_viewer.js
index fe6fc028..a01546a4 100644
--- a/app/utils/hybrid_viewer.js
+++ b/app/utils/hybrid_viewer.js
@@ -1,4 +1,10 @@
-import { ALIGNMENT_THRESHOLD, BUMP_MULTIPLIER, EASE_EXPONENT, LONG_ANIMATION_DURATION, SHORT_ANIMATION_DURATION } from "@ogw_front/utils/vtk/constants";
+import {
+  ALIGNMENT_THRESHOLD,
+  BUMP_MULTIPLIER,
+  EASE_EXPONENT,
+  LONG_ANIMATION_DURATION,
+  SHORT_ANIMATION_DURATION,
+} from "@ogw_front/utils/vtk/constants";
 import { dot } from "@kitware/vtk.js/Common/Core/Math";
 
 const RGB_MAX = 255;
@@ -17,7 +23,9 @@ const ORIENTATIONS = {
 };
 
 function getCameraOptions(camera) {
-  if (!camera?.getFocalPoint) { return camera; }
+  if (!camera?.getFocalPoint) {
+    return camera;
+  }
   return {
     focal_point: [...(camera.getFocalPoint() ?? [])],
     view_up: [...(camera.getViewUp() ?? [])],
@@ -57,36 +65,75 @@ function computeAverageBrightness(rect, options) {
     return BACKGROUND_GREY_VALUE / RGB_MAX;
   }
   const canvas = genericRenderWindow.getApiSpecificRenderWindow().getCanvas();
-  if (!canvas) { return BACKGROUND_GREY_VALUE / RGB_MAX; }
+  if (!canvas) {
+    return BACKGROUND_GREY_VALUE / RGB_MAX;
+  }
   const { relX, relY, relW, relH } = mapRect(rect, latestImage, canvas.getBoundingClientRect());
   offscreenCanvas.width = SAMPLE_SIZE;
   offscreenCanvas.height = SAMPLE_SIZE;
   try {
-    offscreenCtx.drawImage(latestImage, Math.max(0, relX), Math.max(0, relY), Math.min(latestImage.width, relW), Math.min(latestImage.height, relH), 0, 0, SAMPLE_SIZE, SAMPLE_SIZE);
+    offscreenCtx.drawImage(
+      latestImage,
+      Math.max(0, relX),
+      Math.max(0, relY),
+      Math.min(latestImage.width, relW),
+      Math.min(latestImage.height, relH),
+      0,
+      0,
+      SAMPLE_SIZE,
+      SAMPLE_SIZE,
+    );
     const { data } = offscreenCtx.getImageData(0, 0, SAMPLE_SIZE, SAMPLE_SIZE);
     let minBrightness = 1;
     for (let i = 0; i < TOTAL_CHANNELS; i += RGBA_CHANNELS) {
       const brightness = (data[i] + data[i + 1] + data[i + 2]) / (3 * RGB_MAX);
-      if (brightness < minBrightness) { minBrightness = brightness; }
+      if (brightness < minBrightness) {
+        minBrightness = brightness;
+      }
     }
     return minBrightness;
-  } catch { return BACKGROUND_GREY_VALUE / RGB_MAX; }
+  } catch {
+    return BACKGROUND_GREY_VALUE / RGB_MAX;
+  }
 }
 
 function animateCamera(options) {
-  const { camera, startState, targetState, duration, bumpMultiplier, easeExponent, onUpdate, onEnd } = options;
+  const {
+    camera,
+    startState,
+    targetState,
+    duration,
+    bumpMultiplier,
+    easeExponent,
+    onUpdate,
+    onEnd,
+  } = options;
   const startTime = performance.now();
   function animate(currentTime) {
     const progress = Math.min((currentTime - startTime) / duration, 1);
-    const ease = duration > SHORT_ANIMATION_DURATION ? 1 - (1 - progress) ** easeExponent : progress * (2 - progress);
+    const ease =
+      duration > SHORT_ANIMATION_DURATION
+        ? 1 - (1 - progress) ** easeExponent
+        : progress * (2 - progress);
     const bump = bumpMultiplier * Math.sin(Math.PI * progress);
     camera.set({
-      position: startState.position.map((startValue, index) => startValue + (targetState.position[index] - startValue) * ease + bump),
-      viewUp: startState.view_up.map((startValue, index) => startValue + (targetState.view_up[index] - startValue) * ease),
-      focalPoint: startState.focal_point.map((startValue, index) => startValue + (targetState.focal_point[index] - startValue) * ease),
+      position: startState.position.map(
+        (startValue, index) =>
+          startValue + (targetState.position[index] - startValue) * ease + bump,
+      ),
+      viewUp: startState.view_up.map(
+        (startValue, index) => startValue + (targetState.view_up[index] - startValue) * ease,
+      ),
+      focalPoint: startState.focal_point.map(
+        (startValue, index) => startValue + (targetState.focal_point[index] - startValue) * ease,
+      ),
     });
     onUpdate();
-    if (progress < 1) { requestAnimationFrame(animate); } else { onEnd(); }
+    if (progress < 1) {
+      requestAnimationFrame(animate);
+    } else {
+      onEnd();
+    }
   }
   requestAnimationFrame(animate);
 }
@@ -100,9 +147,19 @@ function performCameraOrientation(options) {
   const targetState = getCameraOptions(camera);
   applyCameraOptions(camera, startState);
   const alignment = dot(camera.getDirectionOfProjection(), config.position);
-  const duration = alignment > ALIGNMENT_THRESHOLD ? LONG_ANIMATION_DURATION : SHORT_ANIMATION_DURATION;
+  const duration =
+    alignment > ALIGNMENT_THRESHOLD ? LONG_ANIMATION_DURATION : SHORT_ANIMATION_DURATION;
   onStart();
-  animateCamera({ camera, startState, targetState, duration, bumpMultiplier: BUMP_MULTIPLIER, easeExponent: EASE_EXPONENT, onUpdate: () => renderWindow.render(), onEnd });
+  animateCamera({
+    camera,
+    startState,
+    targetState,
+    duration,
+    bumpMultiplier: BUMP_MULTIPLIER,
+    easeExponent: EASE_EXPONENT,
+    onUpdate: () => renderWindow.render(),
+    onEnd,
+  });
 }
 
 export {