From 68084e7f29b135686a4d4536b3012d1de4039ee7 Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Fri, 14 Aug 2026 09:14:13 +0200
Subject: [PATCH 01/11] fix(hybrid_viewer): Refacto internal stores

---
 app/components/CameraOrientation.vue          |   2 +-
 app/stores/hybrid_viewer.js                   | 276 ++++------------
 internal/stores/hybrid_viewer.js              | 300 ------------------
 .../brightness.js}                            |   2 +-
 .../camera.js}                                |  75 ++++-
 .../camera_animation.js}                      |   0
 .../constants.js}                             |   0
 internal/stores/hybrid_viewer/filters.js      |  34 ++
 .../highlight.js}                             | 105 +++++-
 internal/stores/hybrid_viewer/scene.js        | 166 ++++++++++
 internal/stores/hybrid_viewer/viewport.js     | 194 +++++++++++
 11 files changed, 631 insertions(+), 523 deletions(-)
 delete mode 100644 internal/stores/hybrid_viewer.js
 rename internal/stores/{hybrid_viewer_brightness.js => hybrid_viewer/brightness.js} (96%)
 rename internal/stores/{hybrid_viewer_camera.js => hybrid_viewer/camera.js} (79%)
 rename internal/stores/{hybrid_viewer_camera_animation.js => hybrid_viewer/camera_animation.js} (100%)
 rename internal/stores/{hybrid_viewer_constants.js => hybrid_viewer/constants.js} (100%)
 create mode 100644 internal/stores/hybrid_viewer/filters.js
 rename internal/stores/{hybrid_viewer_highlight.js => hybrid_viewer/highlight.js} (56%)
 create mode 100644 internal/stores/hybrid_viewer/scene.js
 create mode 100644 internal/stores/hybrid_viewer/viewport.js

diff --git a/app/components/CameraOrientation.vue b/app/components/CameraOrientation.vue
index 222e08cb3..c2b15698e 100644
--- a/app/components/CameraOrientation.vue
+++ b/app/components/CameraOrientation.vue
@@ -1,6 +1,6 @@
 <script setup>
 import ToolPanel from "@ogw_front/components/ToolPanel";
-import { applyCameraOptions } from "@ogw_internal/stores/hybrid_viewer_camera";
+import { applyCameraOptions } from "@ogw_internal/stores/hybrid_viewer/camera";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 import { newInstance as vtkAnnotatedCubeActor } from "@kitware/vtk.js/Rendering/Core/AnnotatedCubeActor";
 import { newInstance as vtkGenericRenderWindow } from "@kitware/vtk.js/Rendering/Misc/GenericRenderWindow";
diff --git a/app/stores/hybrid_viewer.js b/app/stores/hybrid_viewer.js
index d03147a92..71f5cc7dd 100644
--- a/app/stores/hybrid_viewer.js
+++ b/app/stores/hybrid_viewer.js
@@ -1,38 +1,15 @@
-import {
-  ACTOR_COLOR,
-  BACKGROUND_COLOR,
-  WHEEL_TIME_OUT_MS,
-} from "@ogw_internal/stores/hybrid_viewer_constants";
 import {
   applySnapshot,
   getCameraOptions,
-  performCameraOrientation,
-  performFocusCameraOnObject,
-  performSetCamera,
-  performSyncRemoteCamera,
-} from "@ogw_internal/stores/hybrid_viewer_camera";
-import {
-  createClearHoverData,
-  createHoverHighlight,
-} from "@ogw_internal/stores/hybrid_viewer_highlight";
-import {
-  performAddItem,
-  performClear,
-  performClearHoverHighlight,
-  performClickPicking,
-  performRemoveItem,
-  performResize,
-  performSetClippingPlanes,
-  performSetContainer,
-  performSetShrink,
-  performSetVisibility,
-  performSetZScaling,
-} from "@ogw_internal/stores/hybrid_viewer";
-import { computeAverageBrightness } from "@ogw_internal/stores/hybrid_viewer_brightness";
-import { newInstance as vtkActor } from "@kitware/vtk.js/Rendering/Core/Actor";
+  useHybridViewerCamera,
+} from "@ogw_internal/stores/hybrid_viewer/camera";
+import { BACKGROUND_COLOR } from "@ogw_internal/stores/hybrid_viewer/constants";
+import { computeAverageBrightness } from "@ogw_internal/stores/hybrid_viewer/brightness";
+import { useHybridViewerFilters } from "@ogw_internal/stores/hybrid_viewer/filters";
+import { useHybridViewerHighlight } from "@ogw_internal/stores/hybrid_viewer/highlight";
+import { useHybridViewerScene } from "@ogw_internal/stores/hybrid_viewer/scene";
+import { useHybridViewerViewport } from "@ogw_internal/stores/hybrid_viewer/viewport";
 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 { Status } from "@ogw_front/utils/status";
 import { useDataStore } from "@ogw_front/stores/data";
@@ -43,22 +20,12 @@ import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schem
 // oxlint-disable max-lines-per-function, max-statements
 export const useHybridViewerStore = defineStore("hybridViewer", () => {
   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 is_picking = ref(false);
-  const is_hover_highlight = ref(false);
-  const hover_highlight_field_type = ref("CELL");
-  const hoverData = ref(undefined);
-  const hoverPosition = ref({ x: 0, y: 0 });
-  const zScale = ref(1);
   let imageStyle = undefined;
-  let viewStream = undefined;
-  let wheelEventEndTimeout = undefined;
-  const gridActor = undefined;
 
   watch(is_picking, (value) => {
     const element = genericRenderWindow.value
@@ -89,8 +56,8 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
     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) => {
+    viewportStore.viewStream.value = viewerStore.client.getImageStream().createViewStream("-1");
+    viewportStore.viewStream.value.onImageReady((event) => {
       if (is_moving.value) {
         return;
       }
@@ -99,102 +66,13 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
       imageStyle.opacity = 1;
     });
     const camera = genericRenderWindow.value.getRenderer().getActiveCamera();
-    Object.assign(camera_options, getCameraOptions(camera));
+    Object.assign(cameraStore.camera_options, getCameraOptions(camera));
     camera.onModified(() => {
-      Object.assign(camera_options, getCameraOptions(camera));
+      Object.assign(cameraStore.camera_options, getCameraOptions(camera));
     });
     status.value = Status.CREATED;
   }
 
-  async function addItem(id) {
-    await performAddItem(id, {
-      genericRenderWindow: genericRenderWindow.value,
-      dataStore,
-      vtkXMLPolyDataReader,
-      vtkActor,
-      vtkMapper,
-      actorColor: ACTOR_COLOR,
-      hybridDb,
-    });
-  }
-
-  function removeItem(id) {
-    performRemoveItem(id, { genericRenderWindow: genericRenderWindow.value, hybridDb });
-  }
-
-  function setVisibility(id, visibility) {
-    performSetVisibility(id, visibility, {
-      genericRenderWindow: genericRenderWindow.value,
-      hybridDb,
-    });
-  }
-
-  async function setZScaling(z_scale) {
-    await performSetZScaling(z_scale, {
-      zScale,
-      genericRenderWindow: genericRenderWindow.value,
-      gridActor,
-      viewerStore,
-      viewer_schemas,
-      remoteRender,
-    });
-  }
-
-  async function setClippingPlanes(ids, planes) {
-    await performSetClippingPlanes(ids, planes, { viewerStore, viewer_schemas, remoteRender });
-  }
-
-  async function setShrink(ids, shrink_factor) {
-    await performSetShrink(ids, shrink_factor, { viewerStore, viewer_schemas, remoteRender });
-  }
-
-  function resetCamera() {
-    genericRenderWindow.value.getRenderer().resetCamera();
-    genericRenderWindow.value.getRenderWindow().render();
-    syncRemoteCamera();
-  }
-
-  async function focusCameraOnObject(id, block_ids = []) {
-    await performFocusCameraOnObject(id, {
-      hybridDb,
-      viewerStore,
-      viewer_schemas,
-      genericRenderWindow: genericRenderWindow.value,
-      block_ids,
-      is_moving,
-      imageStyle,
-      syncRemoteCamera,
-    });
-  }
-
-  function setCameraOrientation(orientation) {
-    performCameraOrientation(orientation, {
-      genericRenderWindow: genericRenderWindow.value,
-      is_moving,
-      imageStyle,
-      syncRemoteCamera,
-    });
-  }
-
-  function setCamera(targetCameraOptions) {
-    performSetCamera(targetCameraOptions, {
-      genericRenderWindow: genericRenderWindow.value,
-      is_moving,
-      imageStyle,
-      syncRemoteCamera,
-    });
-  }
-
-  function syncRemoteCamera() {
-    performSyncRemoteCamera({
-      genericRenderWindow: genericRenderWindow.value,
-      viewerStore,
-      viewer_schemas,
-      remoteRender,
-      camera_options,
-    });
-  }
-
   let renderPromise = undefined;
   let renderPending = false;
 
@@ -219,66 +97,50 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
     return renderPromise;
   }
 
-  const hoverTimeoutRef = ref(undefined);
-  const currentHoverId = ref(undefined);
+  const sceneStore = useHybridViewerScene({
+    genericRenderWindow,
+    viewerStore,
+    viewer_schemas,
+    remoteRender,
+    dataStore,
+  });
 
-  const clearHoverData = createClearHoverData(hoverTimeoutRef, hoverData, currentHoverId);
+  const filtersStore = useHybridViewerFilters({
+    viewerStore,
+    viewer_schemas,
+    remoteRender,
+  });
 
-  const hoverHighlight = createHoverHighlight({
+  const highlightStore = useHybridViewerHighlight({
     genericRenderWindow,
-    is_hover_highlight,
     viewerStore,
     viewer_schemas,
-    hover_highlight_field_type,
-    hybridDb,
-    hoverData,
-    hoverPosition,
-    currentHoverId,
-    hoverTimeoutRef,
-    clearHoverData,
+    hybridDb: sceneStore.hybridDb,
   });
 
-  function clearHoverHighlight() {
-    clearHoverData();
-    performClearHoverHighlight({
-      viewerStore,
-      viewer_schemas,
-      hover_highlight_field_type,
-      hybridDb,
-    });
-  }
-
-  function setContainer(container) {
-    performSetContainer({
-      container,
-      genericRenderWindow: genericRenderWindow.value,
-      imageStyleSetter: (style) => (imageStyle = style),
-      resize,
-      useMousePressed,
-      useEventListener,
-      is_picking,
-      is_moving,
-      clickPickingCallback: performClickPicking,
-      viewerStore,
-      viewer_schemas,
-      syncRemoteCamera,
-      hoverHighlight,
-      wheelTimeoutMs: WHEEL_TIME_OUT_MS,
-      wheelEventEndTimeout,
-      wheelTimeoutSetter: (timeout) => (wheelEventEndTimeout = timeout),
-    });
-  }
+  const cameraStore = useHybridViewerCamera({
+    genericRenderWindow,
+    viewerStore,
+    viewer_schemas,
+    remoteRender,
+    hybridDb: sceneStore.hybridDb,
+    is_moving,
+    getImageStyle: () => imageStyle,
+  });
 
-  async function resize(width, height) {
-    await performResize(width, height, {
-      viewerStore,
-      status,
-      Status,
-      genericRenderWindow: genericRenderWindow.value,
-      viewStream,
-      remoteRender,
-    });
-  }
+  const viewportStore = useHybridViewerViewport({
+    genericRenderWindow,
+    viewerStore,
+    viewer_schemas,
+    remoteRender,
+    status,
+    Status,
+    is_picking,
+    is_moving,
+    syncRemoteCamera: cameraStore.syncRemoteCamera,
+    hoverHighlight: highlightStore.hoverHighlight,
+    setImageStyle: (style) => (imageStyle = style),
+  });
 
   function getAverageBrightness(rect) {
     return computeAverageBrightness(rect, {
@@ -291,52 +153,34 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
 
   function exportStores() {
     const camera = genericRenderWindow.value.getRenderer().getActiveCamera();
-    return { zScale: zScale.value, camera_options: getCameraOptions(camera) || camera_options };
+    return {
+      zScale: sceneStore.zScale.value,
+      camera_options: getCameraOptions(camera) || cameraStore.camera_options,
+    };
   }
 
   async function importStores(snapshot) {
     await applySnapshot(snapshot, {
       genericRenderWindow: genericRenderWindow.value,
-      setZScaling,
-      syncRemoteCamera,
-      setCamera,
+      setZScaling: sceneStore.setZScaling,
+      syncRemoteCamera: cameraStore.syncRemoteCamera,
+      setCamera: cameraStore.setCamera,
     });
   }
 
-  function clear() {
-    performClear({ genericRenderWindow: genericRenderWindow.value, hybridDb });
-  }
-
   return {
-    hybridDb,
     genericRenderWindow,
-    addItem,
-    removeItem,
-    setVisibility,
-    setZScaling,
-    setClippingPlanes,
-    setShrink,
-    syncRemoteCamera,
-    setCamera,
     initHybridViewer,
     remoteRender,
-    resize,
-    resetCamera,
-    focusCameraOnObject,
-    setCameraOrientation,
-    setContainer,
-    zScale,
     is_picking,
-    is_hover_highlight,
-    hover_highlight_field_type,
-    clearHoverHighlight,
-    hoverData,
-    hoverPosition,
-    clear,
     exportStores,
     importStores,
-    camera_options,
     latestImage,
     getAverageBrightness,
+    ...sceneStore,
+    ...viewportStore,
+    ...filtersStore,
+    ...highlightStore,
+    ...cameraStore,
   };
 });
diff --git a/internal/stores/hybrid_viewer.js b/internal/stores/hybrid_viewer.js
deleted file mode 100644
index 182866ab9..000000000
--- a/internal/stores/hybrid_viewer.js
+++ /dev/null
@@ -1,300 +0,0 @@
-import { centerCameraOnPosition } from "./hybrid_viewer_camera";
-
-function performClickPicking(event, options) {
-  const { container, viewerStore, viewer_schemas, genericRenderWindow, syncRemoteCamera } = options;
-  const rect = container.getBoundingClientRect();
-  const schema = viewer_schemas.opengeodeweb_viewer.viewer.get_point_position;
-  const params = {
-    x: Math.round(event.clientX - rect.left),
-    y: Math.round(rect.height - (event.clientY - rect.top)),
-  };
-  viewerStore.request(
-    {
-      schema,
-      params,
-    },
-    {
-      response_function: ({ x, y, z }) => {
-        const pickedPos = [x, y, z];
-        if (pickedPos.some((val) => val !== 0)) {
-          const camera = genericRenderWindow.getRenderer().getActiveCamera();
-          centerCameraOnPosition(camera, pickedPos);
-          genericRenderWindow.getRenderWindow().render();
-          syncRemoteCamera();
-        }
-      },
-    },
-  );
-}
-
-function performHoverHighlight(event, options) {
-  const {
-    is_hover_highlight,
-    genericRenderWindow,
-    viewerStore,
-    viewer_schemas,
-    hover_highlight_field_type,
-    hybridDb,
-    onResponse,
-  } = options;
-  if (!is_hover_highlight.value) {
-    return;
-  }
-  const container = genericRenderWindow.getContainer();
-  if (!container) {
-    return;
-  }
-  const rect = container.getBoundingClientRect();
-  const schema = viewer_schemas.opengeodeweb_viewer.viewer.highlight;
-  const params = {
-    x: Math.round(event.clientX - rect.left),
-    y: Math.round(rect.height - (event.clientY - rect.top)),
-    field_type: hover_highlight_field_type.value,
-    ids: Object.keys(hybridDb),
-  };
-  viewerStore.request(
-    {
-      schema,
-      params,
-    },
-    {
-      response_function: onResponse,
-    },
-  );
-}
-
-function performClearHoverHighlight(options) {
-  const { viewerStore, viewer_schemas, hover_highlight_field_type, hybridDb } = options;
-  const schema = viewer_schemas.opengeodeweb_viewer.viewer.highlight;
-  const params = {
-    x: -1,
-    y: -1,
-    field_type: hover_highlight_field_type.value,
-    ids: Object.keys(hybridDb),
-  };
-  viewerStore.request({ schema, params });
-}
-
-async function performAddItem(id, options) {
-  const {
-    genericRenderWindow,
-    dataStore,
-    vtkXMLPolyDataReader,
-    vtkActor,
-    vtkMapper,
-    actorColor,
-    hybridDb,
-  } = options;
-  if (!genericRenderWindow) {
-    return;
-  }
-  const value = await dataStore.item(id);
-  if (value && !dataStore.isItemViewable(value)) {
-    return;
-  }
-  const reader = vtkXMLPolyDataReader();
-  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(actorColor);
-  actor.setMapper(mapper);
-  const renderer = genericRenderWindow.getRenderer();
-  if (hybridDb[id] && hybridDb[id].actor) {
-    renderer.removeActor(hybridDb[id].actor);
-  }
-  const isFirst = renderer.getActors().length === 0;
-  renderer.addActor(actor);
-  if (isFirst) {
-    renderer.resetCamera();
-  }
-  hybridDb[id] = { actor, polydata, mapper };
-}
-
-async function performSetZScaling(z_scale, options) {
-  const { zScale, genericRenderWindow, gridActor, viewerStore, viewer_schemas, remoteRender } =
-    options;
-  zScale.value = z_scale;
-  const renderer = genericRenderWindow.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.getRenderWindow().render();
-  const schema = viewer_schemas.opengeodeweb_viewer.viewer.set_z_scaling;
-  const params = { z_scale };
-  await viewerStore.request({ schema, params });
-  remoteRender();
-}
-
-function performSetContainer(options) {
-  const {
-    container,
-    genericRenderWindow,
-    imageStyleSetter,
-    resize,
-    useMousePressed,
-    useEventListener,
-    is_picking,
-    is_moving,
-    clickPickingCallback,
-    viewerStore,
-    viewer_schemas,
-    syncRemoteCamera,
-    hoverHighlight,
-    wheelTimeoutMs,
-    wheelEventEndTimeout,
-    wheelTimeoutSetter,
-  } = options;
-
-  if (!container.value) {
-    return;
-  }
-
-  genericRenderWindow.setContainer(container.value.$el);
-  const webGLRenderWindow = genericRenderWindow.getApiSpecificRenderWindow();
-  webGLRenderWindow.setUseBackgroundImage(true);
-  const imageStyle = webGLRenderWindow.getReferenceByName("bgImage").style;
-  Object.assign(imageStyle, { transition: "opacity 0.1s ease-in", zIndex: 1 });
-  imageStyleSetter(imageStyle);
-
-  resize(container.value.$el.offsetWidth, container.value.$el.offsetHeight);
-
-  let has_dragged = false;
-  useMousePressed({
-    target: container,
-    onPressed: (event) => {
-      if (event.button !== 0 && event.button !== 1) {
-        return;
-      }
-      if (event.button === 0 && is_picking.value) {
-        clickPickingCallback(event, {
-          container: container.value.$el,
-          viewerStore,
-          viewer_schemas,
-          genericRenderWindow,
-          syncRemoteCamera,
-        });
-        is_picking.value = false;
-        return;
-      }
-      is_moving.value = true;
-      has_dragged = false;
-      event.stopPropagation();
-    },
-    onReleased: () => {
-      is_moving.value = false;
-      if (has_dragged) {
-        genericRenderWindow.getRenderer().resetCameraClippingRange();
-        syncRemoteCamera();
-      }
-      has_dragged = false;
-    },
-  });
-
-  useEventListener(container, "mousemove", (event) => {
-    if (is_moving.value) {
-      has_dragged = true;
-      if (imageStyle) {
-        imageStyle.opacity = 0;
-      }
-    }
-    hoverHighlight(event);
-  });
-  useEventListener(container, "wheel", () => {
-    is_moving.value = true;
-    if (imageStyle) {
-      imageStyle.opacity = 0;
-    }
-    clearTimeout(wheelEventEndTimeout);
-    wheelTimeoutSetter(
-      setTimeout(() => {
-        is_moving.value = false;
-        genericRenderWindow.getRenderer().resetCameraClippingRange();
-        syncRemoteCamera();
-      }, wheelTimeoutMs),
-    );
-  });
-}
-
-function performRemoveItem(id, options) {
-  const { genericRenderWindow, hybridDb } = options;
-  if (!hybridDb[id]) {
-    return;
-  }
-  genericRenderWindow.getRenderer().removeActor(hybridDb[id].actor);
-  genericRenderWindow.getRenderWindow().render();
-  delete hybridDb[id];
-}
-
-function performSetVisibility(id, visibility, options) {
-  const { genericRenderWindow, hybridDb } = options;
-  if (!hybridDb[id]) {
-    return;
-  }
-  hybridDb[id].actor.setVisibility(visibility);
-  genericRenderWindow.getRenderWindow().render();
-}
-
-function performClear(options) {
-  const { genericRenderWindow, hybridDb } = options;
-  const renderer = genericRenderWindow.getRenderer();
-  for (const actor of renderer.getActors()) {
-    renderer.removeActor(actor);
-  }
-  genericRenderWindow.getRenderWindow().render();
-  for (const id of Object.keys(hybridDb)) {
-    delete hybridDb[id];
-  }
-}
-
-async function performSetClippingPlanes(ids, planes, options) {
-  const { viewerStore, viewer_schemas, remoteRender } = options;
-  const schema = viewer_schemas.opengeodeweb_viewer.viewer.clipping_planes;
-  const params = { ids, planes };
-  await viewerStore.request({ schema, params });
-  await remoteRender();
-}
-
-async function performSetShrink(ids, shrink_factor, options) {
-  const { viewerStore, viewer_schemas, remoteRender } = options;
-  const schema = viewer_schemas.opengeodeweb_viewer.viewer.shrink;
-  const params = { ids, shrink_factor };
-  await viewerStore.request({ schema, params });
-  await remoteRender();
-}
-
-async function performResize(width, height, options) {
-  const { viewerStore, status, Status, genericRenderWindow, viewStream, remoteRender } = options;
-  if (viewerStore.status !== Status.CONNECTED || status.value !== Status.CREATED) {
-    return;
-  }
-  const webGLRenderWindow = genericRenderWindow.getApiSpecificRenderWindow();
-  const canvas = webGLRenderWindow.getCanvas();
-  canvas.width = width;
-  canvas.height = height;
-  await nextTick();
-  webGLRenderWindow.setSize(width, height);
-  viewStream.setSize(width, height);
-  genericRenderWindow.getRenderWindow().render();
-  remoteRender();
-}
-
-export {
-  performAddItem,
-  performClear,
-  performClearHoverHighlight,
-  performClickPicking,
-  performHoverHighlight,
-  performRemoveItem,
-  performResize,
-  performSetClippingPlanes,
-  performSetContainer,
-  performSetShrink,
-  performSetVisibility,
-  performSetZScaling,
-};
diff --git a/internal/stores/hybrid_viewer_brightness.js b/internal/stores/hybrid_viewer/brightness.js
similarity index 96%
rename from internal/stores/hybrid_viewer_brightness.js
rename to internal/stores/hybrid_viewer/brightness.js
index b4da1328b..585dd3909 100644
--- a/internal/stores/hybrid_viewer_brightness.js
+++ b/internal/stores/hybrid_viewer/brightness.js
@@ -1,4 +1,4 @@
-import { BACKGROUND_GREY_VALUE, RGB_MAX } from "./hybrid_viewer_constants";
+import { BACKGROUND_GREY_VALUE, RGB_MAX } from "./constants";
 
 const RGBA_CHANNELS = 4;
 const SAMPLE_SIZE = 10;
diff --git a/internal/stores/hybrid_viewer_camera.js b/internal/stores/hybrid_viewer/camera.js
similarity index 79%
rename from internal/stores/hybrid_viewer_camera.js
rename to internal/stores/hybrid_viewer/camera.js
index eb137883e..f72c69aeb 100644
--- a/internal/stores/hybrid_viewer_camera.js
+++ b/internal/stores/hybrid_viewer/camera.js
@@ -3,7 +3,7 @@ import {
   SHORT_ANIMATION_DURATION,
   animateCamera,
   computeAnimationDuration,
-} from "@ogw_internal/stores/hybrid_viewer_camera_animation";
+} from "./camera_animation";
 import { dot } from "@kitware/vtk.js/Common/Core/Math";
 
 const BUMP_MULTIPLIER = 0.2;
@@ -19,6 +19,76 @@ const ORIENTATIONS = {
   xminus: { position: [-1, 0, 0], view_up: [0, 0, 1] },
 };
 
+function useHybridViewerCamera(options) {
+  const {
+    genericRenderWindow,
+    viewerStore,
+    viewer_schemas,
+    remoteRender,
+    hybridDb,
+    is_moving,
+    getImageStyle,
+  } = options;
+
+  const camera_options = reactive({});
+
+  function syncRemoteCamera() {
+    performSyncRemoteCamera({
+      genericRenderWindow: genericRenderWindow.value,
+      viewerStore,
+      viewer_schemas,
+      remoteRender,
+      camera_options,
+    });
+  }
+
+  function setCamera(targetCameraOptions) {
+    performSetCamera(targetCameraOptions, {
+      genericRenderWindow: genericRenderWindow.value,
+      is_moving,
+      imageStyle: getImageStyle(),
+      syncRemoteCamera,
+    });
+  }
+
+  function resetCamera() {
+    genericRenderWindow.value.getRenderer().resetCamera();
+    genericRenderWindow.value.getRenderWindow().render();
+    syncRemoteCamera();
+  }
+
+  async function focusCameraOnObject(id, block_ids = []) {
+    await performFocusCameraOnObject(id, {
+      hybridDb,
+      viewerStore,
+      viewer_schemas,
+      genericRenderWindow: genericRenderWindow.value,
+      block_ids,
+      is_moving,
+      imageStyle: getImageStyle(),
+      syncRemoteCamera,
+    });
+  }
+
+  function setCameraOrientation(orientation) {
+    performCameraOrientation(orientation, {
+      genericRenderWindow: genericRenderWindow.value,
+      is_moving,
+      imageStyle: getImageStyle(),
+      syncRemoteCamera,
+    });
+  }
+
+  return {
+    camera_options,
+    syncRemoteCamera,
+    setCamera,
+    resetCamera,
+    focusCameraOnObject,
+    setCameraOrientation,
+  };
+}
+
 function getCameraOptions(camera) {
   if (!camera?.getFocalPoint) {
     return camera;
@@ -208,8 +278,8 @@ async function applySnapshot(snapshot, options) {
 }
 
 export {
-  BUMP_MULTIPLIER,
   ALIGNMENT_THRESHOLD,
+  BUMP_MULTIPLIER,
   EASE_EXPONENT,
   ORIENTATIONS,
   applyCameraOptions,
@@ -220,4 +290,5 @@ export {
   performFocusCameraOnObject,
   performSetCamera,
   performSyncRemoteCamera,
+  useHybridViewerCamera,
 };
diff --git a/internal/stores/hybrid_viewer_camera_animation.js b/internal/stores/hybrid_viewer/camera_animation.js
similarity index 100%
rename from internal/stores/hybrid_viewer_camera_animation.js
rename to internal/stores/hybrid_viewer/camera_animation.js
diff --git a/internal/stores/hybrid_viewer_constants.js b/internal/stores/hybrid_viewer/constants.js
similarity index 100%
rename from internal/stores/hybrid_viewer_constants.js
rename to internal/stores/hybrid_viewer/constants.js
diff --git a/internal/stores/hybrid_viewer/filters.js b/internal/stores/hybrid_viewer/filters.js
new file mode 100644
index 000000000..58dbffe40
--- /dev/null
+++ b/internal/stores/hybrid_viewer/filters.js
@@ -0,0 +1,34 @@
+function useHybridViewerFilters(options) {
+  const { viewerStore, viewer_schemas, remoteRender } = options;
+
+  async function setClippingPlanes(ids, planes) {
+    await performSetClippingPlanes(ids, planes, { viewerStore, viewer_schemas, remoteRender });
+  }
+
+  async function setShrink(ids, shrink_factor) {
+    await performSetShrink(ids, shrink_factor, { viewerStore, viewer_schemas, remoteRender });
+  }
+
+  return {
+    setClippingPlanes,
+    setShrink,
+  };
+}
+
+async function performSetClippingPlanes(ids, planes, options) {
+  const { viewerStore, viewer_schemas, remoteRender } = options;
+  const schema = viewer_schemas.opengeodeweb_viewer.viewer.clipping_planes;
+  const params = { ids, planes };
+  await viewerStore.request({ schema, params });
+  await remoteRender();
+}
+
+async function performSetShrink(ids, shrink_factor, options) {
+  const { viewerStore, viewer_schemas, remoteRender } = options;
+  const schema = viewer_schemas.opengeodeweb_viewer.viewer.shrink;
+  const params = { ids, shrink_factor };
+  await viewerStore.request({ schema, params });
+  await remoteRender();
+}
+
+export { performSetClippingPlanes, performSetShrink, useHybridViewerFilters };
diff --git a/internal/stores/hybrid_viewer_highlight.js b/internal/stores/hybrid_viewer/highlight.js
similarity index 56%
rename from internal/stores/hybrid_viewer_highlight.js
rename to internal/stores/hybrid_viewer/highlight.js
index 2ca311a1e..ed58c7c7e 100644
--- a/internal/stores/hybrid_viewer_highlight.js
+++ b/internal/stores/hybrid_viewer/highlight.js
@@ -1,6 +1,99 @@
-import { HOVER_DEBOUNCE_MS, HOVER_TIMEOUT_MS } from "./hybrid_viewer_constants";
+import { HOVER_DEBOUNCE_MS, HOVER_TIMEOUT_MS } from "./constants";
 import { database } from "@ogw_internal/database/database.js";
-import { performHoverHighlight } from "./hybrid_viewer";
+
+function useHybridViewerHighlight(options) {
+  const { genericRenderWindow, viewerStore, viewer_schemas, hybridDb } = options;
+
+  const is_hover_highlight = ref(false);
+  const hover_highlight_field_type = ref("CELL");
+  const hoverData = ref(undefined);
+  const hoverPosition = ref({ x: 0, y: 0 });
+  const hoverTimeoutRef = ref(undefined);
+  const currentHoverId = ref(undefined);
+
+  const clearHoverData = createClearHoverData(hoverTimeoutRef, hoverData, currentHoverId);
+
+  const hoverHighlight = createHoverHighlight({
+    genericRenderWindow,
+    is_hover_highlight,
+    viewerStore,
+    viewer_schemas,
+    hover_highlight_field_type,
+    hybridDb,
+    hoverData,
+    hoverPosition,
+    currentHoverId,
+    hoverTimeoutRef,
+    clearHoverData,
+  });
+
+  function clearHoverHighlight() {
+    clearHoverData();
+    performClearHoverHighlight({
+      viewerStore,
+      viewer_schemas,
+      hover_highlight_field_type,
+      hybridDb,
+    });
+  }
+
+  return {
+    is_hover_highlight,
+    hover_highlight_field_type,
+    hoverData,
+    hoverPosition,
+    clearHoverHighlight,
+    hoverHighlight,
+  };
+}
+
+function performHoverHighlight(event, options) {
+  const {
+    is_hover_highlight,
+    genericRenderWindow,
+    viewerStore,
+    viewer_schemas,
+    hover_highlight_field_type,
+    hybridDb,
+    onResponse,
+  } = options;
+  if (!is_hover_highlight.value) {
+    return;
+  }
+  const container = genericRenderWindow.getContainer();
+  if (!container) {
+    return;
+  }
+  const rect = container.getBoundingClientRect();
+  const schema = viewer_schemas.opengeodeweb_viewer.viewer.highlight;
+  const params = {
+    x: Math.round(event.clientX - rect.left),
+    y: Math.round(rect.height - (event.clientY - rect.top)),
+    field_type: hover_highlight_field_type.value,
+    ids: Object.keys(hybridDb),
+  };
+  viewerStore.request(
+    {
+      schema,
+      params,
+    },
+    {
+      response_function: onResponse,
+    },
+  );
+}
+
+function performClearHoverHighlight(options) {
+  const { viewerStore, viewer_schemas, hover_highlight_field_type, hybridDb } = options;
+  const schema = viewer_schemas.opengeodeweb_viewer.viewer.highlight;
+  const params = {
+    x: -1,
+    y: -1,
+    field_type: hover_highlight_field_type.value,
+    ids: Object.keys(hybridDb),
+  };
+  viewerStore.request({ schema, params });
+}
 
 function createClearHoverData(hoverTimeoutRef, hoverData, currentHoverId) {
   return function clearHoverData() {
@@ -111,4 +204,10 @@ function createHoverHighlight(options) {
   }, HOVER_DEBOUNCE_MS);
 }
 
-export { createClearHoverData, createHoverHighlight };
+export {
+  createClearHoverData,
+  createHoverHighlight,
+  performClearHoverHighlight,
+  performHoverHighlight,
+  useHybridViewerHighlight,
+};
diff --git a/internal/stores/hybrid_viewer/scene.js b/internal/stores/hybrid_viewer/scene.js
new file mode 100644
index 000000000..4f417c8da
--- /dev/null
+++ b/internal/stores/hybrid_viewer/scene.js
@@ -0,0 +1,166 @@
+import { ACTOR_COLOR } from "./constants";
+import { newInstance as vtkActor } from "@kitware/vtk.js/Rendering/Core/Actor";
+import { newInstance as vtkMapper } from "@kitware/vtk.js/Rendering/Core/Mapper";
+import { newInstance as vtkXMLPolyDataReader } from "@kitware/vtk.js/IO/XML/XMLPolyDataReader";
+
+function useHybridViewerScene(options) {
+  const {
+    genericRenderWindow,
+    viewerStore,
+    viewer_schemas,
+    remoteRender,
+    dataStore,
+    gridActor,
+  } = options;
+
+  const hybridDb = reactive({});
+  const zScale = ref(1);
+
+  async function addItem(id) {
+    await performAddItem(id, {
+      genericRenderWindow: genericRenderWindow.value,
+      dataStore,
+      vtkXMLPolyDataReader,
+      vtkActor,
+      vtkMapper,
+      actorColor: ACTOR_COLOR,
+      hybridDb,
+    });
+  }
+
+  function removeItem(id) {
+    performRemoveItem(id, { genericRenderWindow: genericRenderWindow.value, hybridDb });
+  }
+
+  function setVisibility(id, visibility) {
+    performSetVisibility(id, visibility, {
+      genericRenderWindow: genericRenderWindow.value,
+      hybridDb,
+    });
+  }
+
+  async function setZScaling(z_scale) {
+    await performSetZScaling(z_scale, {
+      zScale,
+      genericRenderWindow: genericRenderWindow.value,
+      gridActor,
+      viewerStore,
+      viewer_schemas,
+      remoteRender,
+    });
+  }
+
+  function clear() {
+    performClear({ genericRenderWindow: genericRenderWindow.value, hybridDb });
+  }
+
+  return {
+    hybridDb,
+    zScale,
+    addItem,
+    removeItem,
+    setVisibility,
+    setZScaling,
+    clear,
+  };
+}
+
+async function performAddItem(id, options) {
+  const {
+    genericRenderWindow,
+    dataStore,
+    vtkXMLPolyDataReader: vtkXMLPolyDataReaderOverride,
+    vtkActor: vtkActorOverride,
+    vtkMapper: vtkMapperOverride,
+    actorColor,
+    hybridDb,
+  } = options;
+  if (!genericRenderWindow) {
+    return;
+  }
+  const value = await dataStore.item(id);
+  if (value && !dataStore.isItemViewable(value)) {
+    return;
+  }
+  const createReader = vtkXMLPolyDataReaderOverride || vtkXMLPolyDataReader;
+  const createActor = vtkActorOverride || vtkActor;
+  const createMapper = vtkMapperOverride || vtkMapper;
+
+  const reader = createReader();
+  await reader.parseAsArrayBuffer(new TextEncoder().encode(value.binary_light_viewable));
+  const actor = createActor();
+  const mapper = createMapper();
+  const polydata = reader.getOutputData(0);
+  mapper.setInputData(polydata);
+  actor.getProperty().setColor(actorColor || ACTOR_COLOR);
+  actor.setMapper(mapper);
+  const renderer = genericRenderWindow.getRenderer();
+  if (hybridDb[id] && hybridDb[id].actor) {
+    renderer.removeActor(hybridDb[id].actor);
+  }
+  const isFirst = renderer.getActors().length === 0;
+  renderer.addActor(actor);
+  if (isFirst) {
+    renderer.resetCamera();
+  }
+  hybridDb[id] = { actor, polydata, mapper };
+}
+
+function performRemoveItem(id, options) {
+  const { genericRenderWindow, hybridDb } = options;
+  if (!hybridDb[id]) {
+    return;
+  }
+  genericRenderWindow.getRenderer().removeActor(hybridDb[id].actor);
+  genericRenderWindow.getRenderWindow().render();
+  delete hybridDb[id];
+}
+
+function performSetVisibility(id, visibility, options) {
+  const { genericRenderWindow, hybridDb } = options;
+  if (!hybridDb[id]) {
+    return;
+  }
+  hybridDb[id].actor.setVisibility(visibility);
+  genericRenderWindow.getRenderWindow().render();
+}
+
+async function performSetZScaling(z_scale, options) {
+  const { zScale, genericRenderWindow, gridActor, viewerStore, viewer_schemas, remoteRender } =
+    options;
+  zScale.value = z_scale;
+  const renderer = genericRenderWindow.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.getRenderWindow().render();
+  const schema = viewer_schemas.opengeodeweb_viewer.viewer.set_z_scaling;
+  const params = { z_scale };
+  await viewerStore.request({ schema, params });
+  remoteRender();
+}
+
+function performClear(options) {
+  const { genericRenderWindow, hybridDb } = options;
+  const renderer = genericRenderWindow.getRenderer();
+  for (const actor of renderer.getActors()) {
+    renderer.removeActor(actor);
+  }
+  genericRenderWindow.getRenderWindow().render();
+  for (const id of Object.keys(hybridDb)) {
+    delete hybridDb[id];
+  }
+}
+
+export {
+  performAddItem,
+  performClear,
+  performRemoveItem,
+  performSetVisibility,
+  performSetZScaling,
+  useHybridViewerScene,
+};
diff --git a/internal/stores/hybrid_viewer/viewport.js b/internal/stores/hybrid_viewer/viewport.js
new file mode 100644
index 000000000..2c68f7432
--- /dev/null
+++ b/internal/stores/hybrid_viewer/viewport.js
@@ -0,0 +1,194 @@
+import { WHEEL_TIME_OUT_MS } from "./constants";
+import { centerCameraOnPosition } from "./camera";
+
+function useHybridViewerViewport(options) {
+  const {
+    genericRenderWindow,
+    viewerStore,
+    viewer_schemas,
+    remoteRender,
+    status,
+    Status,
+    is_picking,
+    is_moving,
+    syncRemoteCamera,
+    hoverHighlight,
+    setImageStyle,
+  } = options;
+
+  const viewStream = ref(undefined);
+  let wheelEventEndTimeout = undefined;
+
+  function setContainer(container) {
+    performSetContainer({
+      container,
+      genericRenderWindow: genericRenderWindow.value,
+      imageStyleSetter: (style) => setImageStyle(style),
+      resize,
+      useMousePressed,
+      useEventListener,
+      is_picking,
+      is_moving,
+      clickPickingCallback: performClickPicking,
+      viewerStore,
+      viewer_schemas,
+      syncRemoteCamera,
+      hoverHighlight,
+      wheelTimeoutMs: WHEEL_TIME_OUT_MS,
+      wheelEventEndTimeout,
+      wheelTimeoutSetter: (timeout) => (wheelEventEndTimeout = timeout),
+    });
+  }
+
+  async function resize(width, height) {
+    await performResize(width, height, {
+      viewerStore,
+      status,
+      Status,
+      genericRenderWindow: genericRenderWindow.value,
+      viewStream: viewStream.value,
+      remoteRender,
+    });
+  }
+
+  return {
+    setContainer,
+    resize,
+    viewStream,
+  };
+}
+
+function performClickPicking(event, options) {
+  const { container, viewerStore, viewer_schemas, genericRenderWindow, syncRemoteCamera } = options;
+  const rect = container.getBoundingClientRect();
+  const schema = viewer_schemas.opengeodeweb_viewer.viewer.get_point_position;
+  const params = {
+    x: Math.round(event.clientX - rect.left),
+    y: Math.round(rect.height - (event.clientY - rect.top)),
+  };
+  viewerStore.request(
+    {
+      schema,
+      params,
+    },
+    {
+      response_function: ({ x, y, z }) => {
+        const pickedPos = [x, y, z];
+        if (pickedPos.some((val) => val !== 0)) {
+          const camera = genericRenderWindow.getRenderer().getActiveCamera();
+          centerCameraOnPosition(camera, pickedPos);
+          genericRenderWindow.getRenderWindow().render();
+          syncRemoteCamera();
+        }
+      },
+    },
+  );
+}
+
+function performSetContainer(options) {
+  const {
+    container,
+    genericRenderWindow,
+    imageStyleSetter,
+    resize,
+    useMousePressed,
+    useEventListener,
+    is_picking,
+    is_moving,
+    clickPickingCallback,
+    viewerStore,
+    viewer_schemas,
+    syncRemoteCamera,
+    hoverHighlight,
+    wheelTimeoutMs,
+    wheelEventEndTimeout,
+    wheelTimeoutSetter,
+  } = options;
+
+  if (!container.value) {
+    return;
+  }
+
+  genericRenderWindow.setContainer(container.value.$el);
+  const webGLRenderWindow = genericRenderWindow.getApiSpecificRenderWindow();
+  webGLRenderWindow.setUseBackgroundImage(true);
+  const imageStyle = webGLRenderWindow.getReferenceByName("bgImage").style;
+  Object.assign(imageStyle, { transition: "opacity 0.1s ease-in", zIndex: 1 });
+  imageStyleSetter(imageStyle);
+
+  resize(container.value.$el.offsetWidth, container.value.$el.offsetHeight);
+
+  let has_dragged = false;
+  useMousePressed({
+    target: container,
+    onPressed: (event) => {
+      if (event.button !== 0 && event.button !== 1) {
+        return;
+      }
+      if (event.button === 0 && is_picking.value) {
+        clickPickingCallback(event, {
+          container: container.value.$el,
+          viewerStore,
+          viewer_schemas,
+          genericRenderWindow,
+          syncRemoteCamera,
+        });
+        is_picking.value = false;
+        return;
+      }
+      is_moving.value = true;
+      has_dragged = false;
+      event.stopPropagation();
+    },
+    onReleased: () => {
+      is_moving.value = false;
+      if (has_dragged) {
+        genericRenderWindow.getRenderer().resetCameraClippingRange();
+        syncRemoteCamera();
+      }
+      has_dragged = false;
+    },
+  });
+
+  useEventListener(container, "mousemove", (event) => {
+    if (is_moving.value) {
+      has_dragged = true;
+      if (imageStyle) {
+        imageStyle.opacity = 0;
+      }
+    }
+    hoverHighlight(event);
+  });
+  useEventListener(container, "wheel", () => {
+    is_moving.value = true;
+    if (imageStyle) {
+      imageStyle.opacity = 0;
+    }
+    clearTimeout(wheelEventEndTimeout);
+    wheelTimeoutSetter(
+      setTimeout(() => {
+        is_moving.value = false;
+        genericRenderWindow.getRenderer().resetCameraClippingRange();
+        syncRemoteCamera();
+      }, wheelTimeoutMs),
+    );
+  });
+}
+
+async function performResize(width, height, options) {
+  const { viewerStore, status, Status, genericRenderWindow, viewStream, remoteRender } = options;
+  if (viewerStore.status !== Status.CONNECTED || status.value !== Status.CREATED) {
+    return;
+  }
+  const webGLRenderWindow = genericRenderWindow.getApiSpecificRenderWindow();
+  const canvas = webGLRenderWindow.getCanvas();
+  canvas.width = width;
+  canvas.height = height;
+  await nextTick();
+  webGLRenderWindow.setSize(width, height);
+  viewStream.setSize(width, height);
+  genericRenderWindow.getRenderWindow().render();
+  remoteRender();
+}
+
+export { performClickPicking, performResize, performSetContainer, useHybridViewerViewport };

From ed8ff382de20ffd520c1428b097a44916ebe6f74 Mon Sep 17 00:00:00 2001
From: MaxNumerique <144453705+MaxNumerique@users.noreply.github.com>
Date: Fri, 14 Aug 2026 07:45:47 +0000
Subject: [PATCH 02/11] Apply prepare changes

---
 internal/stores/hybrid_viewer/scene.js | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/internal/stores/hybrid_viewer/scene.js b/internal/stores/hybrid_viewer/scene.js
index 4f417c8da..998ea5513 100644
--- a/internal/stores/hybrid_viewer/scene.js
+++ b/internal/stores/hybrid_viewer/scene.js
@@ -4,14 +4,8 @@ import { newInstance as vtkMapper } from "@kitware/vtk.js/Rendering/Core/Mapper"
 import { newInstance as vtkXMLPolyDataReader } from "@kitware/vtk.js/IO/XML/XMLPolyDataReader";
 
 function useHybridViewerScene(options) {
-  const {
-    genericRenderWindow,
-    viewerStore,
-    viewer_schemas,
-    remoteRender,
-    dataStore,
-    gridActor,
-  } = options;
+  const { genericRenderWindow, viewerStore, viewer_schemas, remoteRender, dataStore, gridActor } =
+    options;
 
   const hybridDb = reactive({});
   const zScale = ref(1);

From c25d5f538a07e93eedc0cbb06dfec8c28b0a1f00 Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Fri, 14 Aug 2026 09:56:35 +0200
Subject: [PATCH 03/11] more refacto

---
 app/stores/hybrid_viewer.js                 | 36 +++------------------
 internal/stores/hybrid_viewer/brightness.js | 27 +++++++++++++++-
 internal/stores/hybrid_viewer/camera.js     | 10 +++---
 internal/stores/hybrid_viewer/filters.js    | 14 +++++---
 internal/stores/hybrid_viewer/highlight.js  | 12 +++----
 internal/stores/hybrid_viewer/scene.js      | 11 ++++---
 internal/stores/hybrid_viewer/viewport.js   | 10 +++---
 7 files changed, 58 insertions(+), 62 deletions(-)

diff --git a/app/stores/hybrid_viewer.js b/app/stores/hybrid_viewer.js
index 71f5cc7dd..693d1b5ce 100644
--- a/app/stores/hybrid_viewer.js
+++ b/app/stores/hybrid_viewer.js
@@ -4,7 +4,7 @@ import {
   useHybridViewerCamera,
 } from "@ogw_internal/stores/hybrid_viewer/camera";
 import { BACKGROUND_COLOR } from "@ogw_internal/stores/hybrid_viewer/constants";
-import { computeAverageBrightness } from "@ogw_internal/stores/hybrid_viewer/brightness";
+import { useHybridViewerBrightness } from "@ogw_internal/stores/hybrid_viewer/brightness";
 import { useHybridViewerFilters } from "@ogw_internal/stores/hybrid_viewer/filters";
 import { useHybridViewerHighlight } from "@ogw_internal/stores/hybrid_viewer/highlight";
 import { useHybridViewerScene } from "@ogw_internal/stores/hybrid_viewer/scene";
@@ -12,14 +12,12 @@ import { useHybridViewerViewport } from "@ogw_internal/stores/hybrid_viewer/view
 import { newInstance as vtkGenericRenderWindow } from "@kitware/vtk.js/Rendering/Misc/GenericRenderWindow";
 
 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";
 
 // oxlint-disable max-lines-per-function, max-statements
 export const useHybridViewerStore = defineStore("hybridViewer", () => {
-  const dataStore = useDataStore();
   const viewerStore = useViewerStore();
   const genericRenderWindow = reactive({});
   const status = ref(Status.NOT_CREATED);
@@ -36,12 +34,7 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
     }
   });
 
-  const latestImage = ref(undefined);
-  const offscreenCanvas =
-    typeof document === "undefined" ? undefined : document.createElement("canvas");
-  const offscreenCtx = offscreenCanvas
-    ? offscreenCanvas.getContext("2d", { willReadFrequently: true })
-    : undefined;
+  const brightnessStore = useHybridViewerBrightness({ genericRenderWindow });
 
   async function initHybridViewer() {
     if (status.value !== Status.NOT_CREATED) {
@@ -61,7 +54,7 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
       if (is_moving.value) {
         return;
       }
-      latestImage.value = event.image;
+      brightnessStore.latestImage.value = event.image;
       webGLRenderWindow.setBackgroundImage(event.image);
       imageStyle.opacity = 1;
     });
@@ -99,29 +92,20 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
 
   const sceneStore = useHybridViewerScene({
     genericRenderWindow,
-    viewerStore,
-    viewer_schemas,
     remoteRender,
-    dataStore,
   });
 
   const filtersStore = useHybridViewerFilters({
-    viewerStore,
-    viewer_schemas,
     remoteRender,
   });
 
   const highlightStore = useHybridViewerHighlight({
     genericRenderWindow,
-    viewerStore,
-    viewer_schemas,
     hybridDb: sceneStore.hybridDb,
   });
 
   const cameraStore = useHybridViewerCamera({
     genericRenderWindow,
-    viewerStore,
-    viewer_schemas,
     remoteRender,
     hybridDb: sceneStore.hybridDb,
     is_moving,
@@ -130,8 +114,6 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
 
   const viewportStore = useHybridViewerViewport({
     genericRenderWindow,
-    viewerStore,
-    viewer_schemas,
     remoteRender,
     status,
     Status,
@@ -142,15 +124,6 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
     setImageStyle: (style) => (imageStyle = style),
   });
 
-  function getAverageBrightness(rect) {
-    return computeAverageBrightness(rect, {
-      latestImage: latestImage.value,
-      offscreenCtx,
-      offscreenCanvas,
-      genericRenderWindow: genericRenderWindow.value,
-    });
-  }
-
   function exportStores() {
     const camera = genericRenderWindow.value.getRenderer().getActiveCamera();
     return {
@@ -175,8 +148,7 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
     is_picking,
     exportStores,
     importStores,
-    latestImage,
-    getAverageBrightness,
+    ...brightnessStore,
     ...sceneStore,
     ...viewportStore,
     ...filtersStore,
diff --git a/internal/stores/hybrid_viewer/brightness.js b/internal/stores/hybrid_viewer/brightness.js
index 585dd3909..3fc782785 100644
--- a/internal/stores/hybrid_viewer/brightness.js
+++ b/internal/stores/hybrid_viewer/brightness.js
@@ -4,6 +4,31 @@ const RGBA_CHANNELS = 4;
 const SAMPLE_SIZE = 10;
 const TOTAL_CHANNELS = 400;
 
+function useHybridViewerBrightness(options) {
+  const { genericRenderWindow } = options;
+
+  const latestImage = ref(undefined);
+  const offscreenCanvas =
+    typeof document === "undefined" ? undefined : document.createElement("canvas");
+  const offscreenCtx = offscreenCanvas
+    ? offscreenCanvas.getContext("2d", { willReadFrequently: true })
+    : undefined;
+
+  function getAverageBrightness(rect) {
+    return computeAverageBrightness(rect, {
+      latestImage: latestImage.value,
+      offscreenCtx,
+      offscreenCanvas,
+      genericRenderWindow: genericRenderWindow.value,
+    });
+  }
+
+  return {
+    latestImage,
+    getAverageBrightness,
+  };
+}
+
 function mapRect(rect, latestImage, canvasRect) {
   const scaleX = latestImage.width / canvasRect.width;
   const scaleY = latestImage.height / canvasRect.height;
@@ -59,4 +84,4 @@ function computeAverageBrightness(rect, options) {
   }
 }
 
-export { computeAverageBrightness };
+export { computeAverageBrightness, useHybridViewerBrightness };
diff --git a/internal/stores/hybrid_viewer/camera.js b/internal/stores/hybrid_viewer/camera.js
index f72c69aeb..43867fade 100644
--- a/internal/stores/hybrid_viewer/camera.js
+++ b/internal/stores/hybrid_viewer/camera.js
@@ -5,6 +5,8 @@ import {
   computeAnimationDuration,
 } from "./camera_animation";
 import { dot } from "@kitware/vtk.js/Common/Core/Math";
+import { useViewerStore } from "@ogw_front/stores/viewer";
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
 const BUMP_MULTIPLIER = 0.2;
 const ALIGNMENT_THRESHOLD = 0.9;
@@ -22,21 +24,19 @@ const ORIENTATIONS = {
 function useHybridViewerCamera(options) {
   const {
     genericRenderWindow,
-    viewerStore,
-    viewer_schemas,
     remoteRender,
     hybridDb,
     is_moving,
     getImageStyle,
   } = options;
 
+  const viewerStore = useViewerStore();
   const camera_options = reactive({});
 
   function syncRemoteCamera() {
     performSyncRemoteCamera({
       genericRenderWindow: genericRenderWindow.value,
       viewerStore,
-      viewer_schemas,
       remoteRender,
       camera_options,
     });
@@ -61,7 +61,6 @@ function useHybridViewerCamera(options) {
     await performFocusCameraOnObject(id, {
       hybridDb,
       viewerStore,
-      viewer_schemas,
       genericRenderWindow: genericRenderWindow.value,
       block_ids,
       is_moving,
@@ -196,7 +195,6 @@ async function performFocusCameraOnObject(id, options) {
   const {
     hybridDb,
     viewerStore,
-    viewer_schemas,
     genericRenderWindow,
     block_ids = [],
     is_moving,
@@ -233,7 +231,7 @@ async function performFocusCameraOnObject(id, options) {
 }
 
 function performSyncRemoteCamera(options) {
-  const { genericRenderWindow, viewerStore, viewer_schemas, remoteRender, camera_options } =
+  const { genericRenderWindow, viewerStore, remoteRender, camera_options } =
     options;
   const camera = genericRenderWindow.getRenderer().getActiveCamera();
   const options_camera = getCameraOptions(camera);
diff --git a/internal/stores/hybrid_viewer/filters.js b/internal/stores/hybrid_viewer/filters.js
index 58dbffe40..e303b4733 100644
--- a/internal/stores/hybrid_viewer/filters.js
+++ b/internal/stores/hybrid_viewer/filters.js
@@ -1,12 +1,16 @@
+import { useViewerStore } from "@ogw_front/stores/viewer";
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
+
 function useHybridViewerFilters(options) {
-  const { viewerStore, viewer_schemas, remoteRender } = options;
+  const { remoteRender } = options;
+  const viewerStore = useViewerStore();
 
   async function setClippingPlanes(ids, planes) {
-    await performSetClippingPlanes(ids, planes, { viewerStore, viewer_schemas, remoteRender });
+    await performSetClippingPlanes(ids, planes, { viewerStore, remoteRender });
   }
 
   async function setShrink(ids, shrink_factor) {
-    await performSetShrink(ids, shrink_factor, { viewerStore, viewer_schemas, remoteRender });
+    await performSetShrink(ids, shrink_factor, { viewerStore, remoteRender });
   }
 
   return {
@@ -16,7 +20,7 @@ function useHybridViewerFilters(options) {
 }
 
 async function performSetClippingPlanes(ids, planes, options) {
-  const { viewerStore, viewer_schemas, remoteRender } = options;
+  const { viewerStore, remoteRender } = options;
   const schema = viewer_schemas.opengeodeweb_viewer.viewer.clipping_planes;
   const params = { ids, planes };
   await viewerStore.request({ schema, params });
@@ -24,7 +28,7 @@ async function performSetClippingPlanes(ids, planes, options) {
 }
 
 async function performSetShrink(ids, shrink_factor, options) {
-  const { viewerStore, viewer_schemas, remoteRender } = options;
+  const { viewerStore, remoteRender } = options;
   const schema = viewer_schemas.opengeodeweb_viewer.viewer.shrink;
   const params = { ids, shrink_factor };
   await viewerStore.request({ schema, params });
diff --git a/internal/stores/hybrid_viewer/highlight.js b/internal/stores/hybrid_viewer/highlight.js
index ed58c7c7e..a97ed6a0b 100644
--- a/internal/stores/hybrid_viewer/highlight.js
+++ b/internal/stores/hybrid_viewer/highlight.js
@@ -1,8 +1,11 @@
 import { HOVER_DEBOUNCE_MS, HOVER_TIMEOUT_MS } from "./constants";
 import { database } from "@ogw_internal/database/database.js";
+import { useViewerStore } from "@ogw_front/stores/viewer";
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
 function useHybridViewerHighlight(options) {
-  const { genericRenderWindow, viewerStore, viewer_schemas, hybridDb } = options;
+  const { genericRenderWindow, hybridDb } = options;
+  const viewerStore = useViewerStore();
 
   const is_hover_highlight = ref(false);
   const hover_highlight_field_type = ref("CELL");
@@ -17,7 +20,6 @@ function useHybridViewerHighlight(options) {
     genericRenderWindow,
     is_hover_highlight,
     viewerStore,
-    viewer_schemas,
     hover_highlight_field_type,
     hybridDb,
     hoverData,
@@ -31,7 +33,6 @@ function useHybridViewerHighlight(options) {
     clearHoverData();
     performClearHoverHighlight({
       viewerStore,
-      viewer_schemas,
       hover_highlight_field_type,
       hybridDb,
     });
@@ -52,7 +53,6 @@ function performHoverHighlight(event, options) {
     is_hover_highlight,
     genericRenderWindow,
     viewerStore,
-    viewer_schemas,
     hover_highlight_field_type,
     hybridDb,
     onResponse,
@@ -84,7 +84,7 @@ function performHoverHighlight(event, options) {
 }
 
 function performClearHoverHighlight(options) {
-  const { viewerStore, viewer_schemas, hover_highlight_field_type, hybridDb } = options;
+  const { viewerStore, hover_highlight_field_type, hybridDb } = options;
   const schema = viewer_schemas.opengeodeweb_viewer.viewer.highlight;
   const params = {
     x: -1,
@@ -111,7 +111,6 @@ function createHoverHighlight(options) {
     genericRenderWindow,
     is_hover_highlight,
     viewerStore,
-    viewer_schemas,
     hover_highlight_field_type,
     hybridDb,
     hoverData,
@@ -138,7 +137,6 @@ function createHoverHighlight(options) {
       is_hover_highlight,
       genericRenderWindow: genericRenderWindow.value,
       viewerStore,
-      viewer_schemas,
       hover_highlight_field_type,
       hybridDb,
       onResponse: async (response) => {
diff --git a/internal/stores/hybrid_viewer/scene.js b/internal/stores/hybrid_viewer/scene.js
index 4f417c8da..cf095bd83 100644
--- a/internal/stores/hybrid_viewer/scene.js
+++ b/internal/stores/hybrid_viewer/scene.js
@@ -1,4 +1,7 @@
 import { ACTOR_COLOR } from "./constants";
+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";
 import { newInstance as vtkActor } from "@kitware/vtk.js/Rendering/Core/Actor";
 import { newInstance as vtkMapper } from "@kitware/vtk.js/Rendering/Core/Mapper";
 import { newInstance as vtkXMLPolyDataReader } from "@kitware/vtk.js/IO/XML/XMLPolyDataReader";
@@ -6,13 +9,12 @@ import { newInstance as vtkXMLPolyDataReader } from "@kitware/vtk.js/IO/XML/XMLP
 function useHybridViewerScene(options) {
   const {
     genericRenderWindow,
-    viewerStore,
-    viewer_schemas,
     remoteRender,
-    dataStore,
     gridActor,
   } = options;
 
+  const dataStore = useDataStore();
+  const viewerStore = useViewerStore();
   const hybridDb = reactive({});
   const zScale = ref(1);
 
@@ -45,7 +47,6 @@ function useHybridViewerScene(options) {
       genericRenderWindow: genericRenderWindow.value,
       gridActor,
       viewerStore,
-      viewer_schemas,
       remoteRender,
     });
   }
@@ -126,7 +127,7 @@ function performSetVisibility(id, visibility, options) {
 }
 
 async function performSetZScaling(z_scale, options) {
-  const { zScale, genericRenderWindow, gridActor, viewerStore, viewer_schemas, remoteRender } =
+  const { zScale, genericRenderWindow, gridActor, viewerStore, remoteRender } =
     options;
   zScale.value = z_scale;
   const renderer = genericRenderWindow.getRenderer();
diff --git a/internal/stores/hybrid_viewer/viewport.js b/internal/stores/hybrid_viewer/viewport.js
index 2c68f7432..e8d5106bd 100644
--- a/internal/stores/hybrid_viewer/viewport.js
+++ b/internal/stores/hybrid_viewer/viewport.js
@@ -1,11 +1,11 @@
 import { WHEEL_TIME_OUT_MS } from "./constants";
 import { centerCameraOnPosition } from "./camera";
+import { useViewerStore } from "@ogw_front/stores/viewer";
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
 function useHybridViewerViewport(options) {
   const {
     genericRenderWindow,
-    viewerStore,
-    viewer_schemas,
     remoteRender,
     status,
     Status,
@@ -16,6 +16,7 @@ function useHybridViewerViewport(options) {
     setImageStyle,
   } = options;
 
+  const viewerStore = useViewerStore();
   const viewStream = ref(undefined);
   let wheelEventEndTimeout = undefined;
 
@@ -31,7 +32,6 @@ function useHybridViewerViewport(options) {
       is_moving,
       clickPickingCallback: performClickPicking,
       viewerStore,
-      viewer_schemas,
       syncRemoteCamera,
       hoverHighlight,
       wheelTimeoutMs: WHEEL_TIME_OUT_MS,
@@ -59,7 +59,7 @@ function useHybridViewerViewport(options) {
 }
 
 function performClickPicking(event, options) {
-  const { container, viewerStore, viewer_schemas, genericRenderWindow, syncRemoteCamera } = options;
+  const { container, viewerStore, genericRenderWindow, syncRemoteCamera } = options;
   const rect = container.getBoundingClientRect();
   const schema = viewer_schemas.opengeodeweb_viewer.viewer.get_point_position;
   const params = {
@@ -97,7 +97,6 @@ function performSetContainer(options) {
     is_moving,
     clickPickingCallback,
     viewerStore,
-    viewer_schemas,
     syncRemoteCamera,
     hoverHighlight,
     wheelTimeoutMs,
@@ -129,7 +128,6 @@ function performSetContainer(options) {
         clickPickingCallback(event, {
           container: container.value.$el,
           viewerStore,
-          viewer_schemas,
           genericRenderWindow,
           syncRemoteCamera,
         });

From 52260e029e14ac7fbbe00b87efd82807096bade5 Mon Sep 17 00:00:00 2001
From: MaxNumerique <144453705+MaxNumerique@users.noreply.github.com>
Date: Fri, 14 Aug 2026 07:58:00 +0000
Subject: [PATCH 04/11] Apply prepare changes

---
 internal/stores/hybrid_viewer/camera.js | 11 ++---------
 1 file changed, 2 insertions(+), 9 deletions(-)

diff --git a/internal/stores/hybrid_viewer/camera.js b/internal/stores/hybrid_viewer/camera.js
index 43867fade..90756fe0f 100644
--- a/internal/stores/hybrid_viewer/camera.js
+++ b/internal/stores/hybrid_viewer/camera.js
@@ -22,13 +22,7 @@ const ORIENTATIONS = {
 };
 
 function useHybridViewerCamera(options) {
-  const {
-    genericRenderWindow,
-    remoteRender,
-    hybridDb,
-    is_moving,
-    getImageStyle,
-  } = options;
+  const { genericRenderWindow, remoteRender, hybridDb, is_moving, getImageStyle } = options;
 
   const viewerStore = useViewerStore();
   const camera_options = reactive({});
@@ -231,8 +225,7 @@ async function performFocusCameraOnObject(id, options) {
 }
 
 function performSyncRemoteCamera(options) {
-  const { genericRenderWindow, viewerStore, remoteRender, camera_options } =
-    options;
+  const { genericRenderWindow, viewerStore, remoteRender, camera_options } = options;
   const camera = genericRenderWindow.getRenderer().getActiveCamera();
   const options_camera = getCameraOptions(camera);
   const schema = viewer_schemas.opengeodeweb_viewer.viewer.update_camera;

From 9ea56e2d34318ca2884e8ac8d5db72d8047375f6 Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Fri, 14 Aug 2026 11:29:02 +0200
Subject: [PATCH 05/11] refacto options and more

---
 app/stores/hybrid_viewer.js                 |  72 +++------
 internal/stores/hybrid_viewer/brightness.js |   8 +-
 internal/stores/hybrid_viewer/camera.js     | 164 ++++++++++----------
 internal/stores/hybrid_viewer/filters.js    |  22 ++-
 internal/stores/hybrid_viewer/highlight.js  |  59 ++++---
 internal/stores/hybrid_viewer/scene.js      | 131 +++++++---------
 internal/stores/hybrid_viewer/viewport.js   | 134 ++++++----------
 7 files changed, 243 insertions(+), 347 deletions(-)

diff --git a/app/stores/hybrid_viewer.js b/app/stores/hybrid_viewer.js
index 693d1b5ce..2b0aa2065 100644
--- a/app/stores/hybrid_viewer.js
+++ b/app/stores/hybrid_viewer.js
@@ -26,15 +26,17 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
   let imageStyle = undefined;
 
   watch(is_picking, (value) => {
-    const element = genericRenderWindow.value
-      ?.getApiSpecificRenderWindow()
-      ?.getCanvas()?.parentElement;
-    if (element) {
-      element.style.cursor = value ? "crosshair" : "default";
+    if (!genericRenderWindow.value) {
+      return;
+    }
+    const webGLRenderWindow = genericRenderWindow.value.getApiSpecificRenderWindow();
+    const canvas = webGLRenderWindow.getCanvas();
+    if (canvas && canvas.parentElement) {
+      canvas.parentElement.style.cursor = value ? "crosshair" : "default";
     }
   });
 
-  const brightnessStore = useHybridViewerBrightness({ genericRenderWindow });
+  const brightnessStore = useHybridViewerBrightness();
 
   async function initHybridViewer() {
     if (status.value !== Status.NOT_CREATED) {
@@ -49,7 +51,8 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
     imageStyle = webGLRenderWindow.getReferenceByName("bgImage").style;
     Object.assign(imageStyle, { transition: "opacity 0.1s ease-in", zIndex: 1 });
     await viewerStore.ws_connect();
-    viewportStore.viewStream.value = viewerStore.client.getImageStream().createViewStream("-1");
+    const imageStream = viewerStore.client.getImageStream();
+    viewportStore.viewStream.value = imageStream.createViewStream("-1");
     viewportStore.viewStream.value.onImageReady((event) => {
       if (is_moving.value) {
         return;
@@ -58,7 +61,8 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
       webGLRenderWindow.setBackgroundImage(event.image);
       imageStyle.opacity = 1;
     });
-    const camera = genericRenderWindow.value.getRenderer().getActiveCamera();
+    const renderer = genericRenderWindow.value.getRenderer();
+    const camera = renderer.getActiveCamera();
     Object.assign(cameraStore.camera_options, getCameraOptions(camera));
     camera.onModified(() => {
       Object.assign(cameraStore.camera_options, getCameraOptions(camera));
@@ -90,64 +94,28 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
     return renderPromise;
   }
 
-  const sceneStore = useHybridViewerScene({
-    genericRenderWindow,
-    remoteRender,
-  });
-
-  const filtersStore = useHybridViewerFilters({
-    remoteRender,
-  });
-
-  const highlightStore = useHybridViewerHighlight({
-    genericRenderWindow,
-    hybridDb: sceneStore.hybridDb,
-  });
-
-  const cameraStore = useHybridViewerCamera({
-    genericRenderWindow,
-    remoteRender,
-    hybridDb: sceneStore.hybridDb,
-    is_moving,
-    getImageStyle: () => imageStyle,
-  });
-
-  const viewportStore = useHybridViewerViewport({
-    genericRenderWindow,
-    remoteRender,
-    status,
-    Status,
-    is_picking,
-    is_moving,
-    syncRemoteCamera: cameraStore.syncRemoteCamera,
-    hoverHighlight: highlightStore.hoverHighlight,
-    setImageStyle: (style) => (imageStyle = style),
-  });
+  const sceneStore = useHybridViewerScene();
+  const filtersStore = useHybridViewerFilters();
+  const highlightStore = useHybridViewerHighlight();
+  const cameraStore = useHybridViewerCamera();
+  const viewportStore = useHybridViewerViewport();
 
   function exportStores() {
-    const camera = genericRenderWindow.value.getRenderer().getActiveCamera();
+    const renderer = genericRenderWindow.value.getRenderer();
+    const camera = renderer.getActiveCamera();
     return {
       zScale: sceneStore.zScale.value,
       camera_options: getCameraOptions(camera) || cameraStore.camera_options,
     };
   }
 
-  async function importStores(snapshot) {
-    await applySnapshot(snapshot, {
-      genericRenderWindow: genericRenderWindow.value,
-      setZScaling: sceneStore.setZScaling,
-      syncRemoteCamera: cameraStore.syncRemoteCamera,
-      setCamera: cameraStore.setCamera,
-    });
-  }
-
   return {
     genericRenderWindow,
     initHybridViewer,
     remoteRender,
     is_picking,
     exportStores,
-    importStores,
+    importStores: applySnapshot,
     ...brightnessStore,
     ...sceneStore,
     ...viewportStore,
diff --git a/internal/stores/hybrid_viewer/brightness.js b/internal/stores/hybrid_viewer/brightness.js
index 3fc782785..3f06c5fbd 100644
--- a/internal/stores/hybrid_viewer/brightness.js
+++ b/internal/stores/hybrid_viewer/brightness.js
@@ -1,12 +1,11 @@
 import { BACKGROUND_GREY_VALUE, RGB_MAX } from "./constants";
+import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 
 const RGBA_CHANNELS = 4;
 const SAMPLE_SIZE = 10;
 const TOTAL_CHANNELS = 400;
 
-function useHybridViewerBrightness(options) {
-  const { genericRenderWindow } = options;
-
+function useHybridViewerBrightness() {
   const latestImage = ref(undefined);
   const offscreenCanvas =
     typeof document === "undefined" ? undefined : document.createElement("canvas");
@@ -15,11 +14,12 @@ function useHybridViewerBrightness(options) {
     : undefined;
 
   function getAverageBrightness(rect) {
+    const hybridViewerStore = useHybridViewerStore();
     return computeAverageBrightness(rect, {
       latestImage: latestImage.value,
       offscreenCtx,
       offscreenCanvas,
-      genericRenderWindow: genericRenderWindow.value,
+      genericRenderWindow: hybridViewerStore.genericRenderWindow.value,
     });
   }
 
diff --git a/internal/stores/hybrid_viewer/camera.js b/internal/stores/hybrid_viewer/camera.js
index 43867fade..dcb708061 100644
--- a/internal/stores/hybrid_viewer/camera.js
+++ b/internal/stores/hybrid_viewer/camera.js
@@ -5,6 +5,7 @@ import {
   computeAnimationDuration,
 } from "./camera_animation";
 import { dot } from "@kitware/vtk.js/Common/Core/Math";
+import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
@@ -21,61 +22,45 @@ const ORIENTATIONS = {
   xminus: { position: [-1, 0, 0], view_up: [0, 0, 1] },
 };
 
-function useHybridViewerCamera(options) {
-  const {
-    genericRenderWindow,
-    remoteRender,
-    hybridDb,
-    is_moving,
-    getImageStyle,
-  } = options;
+function getImageStyle(genericRenderWindow) {
+  if (!genericRenderWindow) {
+    return undefined;
+  }
+  const webGLRenderWindow = genericRenderWindow.getApiSpecificRenderWindow();
+  if (!webGLRenderWindow) {
+    return undefined;
+  }
+  const bgImage = webGLRenderWindow.getReferenceByName("bgImage");
+  return bgImage ? bgImage.style : undefined;
+}
 
-  const viewerStore = useViewerStore();
+function useHybridViewerCamera() {
+  const hybridViewerStore = useHybridViewerStore();
   const camera_options = reactive({});
 
   function syncRemoteCamera() {
-    performSyncRemoteCamera({
-      genericRenderWindow: genericRenderWindow.value,
-      viewerStore,
-      remoteRender,
-      camera_options,
-    });
+    performSyncRemoteCamera();
   }
 
   function setCamera(targetCameraOptions) {
-    performSetCamera(targetCameraOptions, {
-      genericRenderWindow: genericRenderWindow.value,
-      is_moving,
-      imageStyle: getImageStyle(),
-      syncRemoteCamera,
-    });
+    performSetCamera(targetCameraOptions);
   }
 
   function resetCamera() {
-    genericRenderWindow.value.getRenderer().resetCamera();
-    genericRenderWindow.value.getRenderWindow().render();
+    const genericRenderWindow = hybridViewerStore.genericRenderWindow.value;
+    const renderer = genericRenderWindow.getRenderer();
+    renderer.resetCamera();
+    const renderWindow = genericRenderWindow.getRenderWindow();
+    renderWindow.render();
     syncRemoteCamera();
   }
 
   async function focusCameraOnObject(id, block_ids = []) {
-    await performFocusCameraOnObject(id, {
-      hybridDb,
-      viewerStore,
-      genericRenderWindow: genericRenderWindow.value,
-      block_ids,
-      is_moving,
-      imageStyle: getImageStyle(),
-      syncRemoteCamera,
-    });
+    await performFocusCameraOnObject(id, block_ids);
   }
 
   function setCameraOrientation(orientation) {
-    performCameraOrientation(orientation, {
-      genericRenderWindow: genericRenderWindow.value,
-      is_moving,
-      imageStyle: getImageStyle(),
-      syncRemoteCamera,
-    });
+    performCameraOrientation(orientation);
   }
 
   return {
@@ -89,7 +74,7 @@ function useHybridViewerCamera(options) {
 }
 
 function getCameraOptions(camera) {
-  if (!camera?.getFocalPoint) {
+  if (!camera || !camera.getFocalPoint) {
     return camera;
   }
   return {
@@ -103,7 +88,7 @@ function getCameraOptions(camera) {
 }
 
 function applyCameraOptions(camera, options) {
-  if (camera?.set && options) {
+  if (camera && camera.set && options) {
     camera.set({
       focalPoint: options.focal_point,
       viewUp: options.view_up,
@@ -128,9 +113,13 @@ function centerCameraOnPosition(camera, pickedPosition) {
   );
 }
 
-function performSetCamera(targetCameraOptions, options) {
-  const { genericRenderWindow, is_moving, imageStyle, syncRemoteCamera } = options;
-  const camera = genericRenderWindow.getRenderer().getActiveCamera();
+function performSetCamera(targetCameraOptions) {
+  const hybridViewerStore = useHybridViewerStore();
+  const genericRenderWindow = hybridViewerStore.genericRenderWindow.value;
+  const { is_moving } = hybridViewerStore;
+  const imageStyle = getImageStyle(genericRenderWindow);
+  const renderer = genericRenderWindow.getRenderer();
+  const camera = renderer.getActiveCamera();
   const startState = getCameraOptions(camera);
   const duration = computeAnimationDuration(startState, targetCameraOptions);
   is_moving.value = true;
@@ -144,18 +133,25 @@ function performSetCamera(targetCameraOptions, options) {
     duration,
     bumpMultiplier: 0,
     easeExponent: EASE_EXPONENT,
-    onUpdate: () => genericRenderWindow.getRenderWindow().render(),
+    onUpdate: () => {
+      const renderWindow = genericRenderWindow.getRenderWindow();
+      renderWindow.render();
+    },
     onEnd: () => {
       applyCameraOptions(camera, targetCameraOptions);
-      genericRenderWindow.getRenderWindow().render();
+      const renderWindow = genericRenderWindow.getRenderWindow();
+      renderWindow.render();
       is_moving.value = false;
-      syncRemoteCamera();
+      hybridViewerStore.syncRemoteCamera();
     },
   });
 }
 
-function performCameraOrientation(orientation, options) {
-  const { genericRenderWindow, is_moving, imageStyle, syncRemoteCamera } = options;
+function performCameraOrientation(orientation) {
+  const hybridViewerStore = useHybridViewerStore();
+  const genericRenderWindow = hybridViewerStore.genericRenderWindow.value;
+  const { is_moving } = hybridViewerStore;
+  const imageStyle = getImageStyle(genericRenderWindow);
   const config = ORIENTATIONS[orientation.toLowerCase()];
   const renderer = genericRenderWindow.getRenderer();
   const camera = renderer.getActiveCamera();
@@ -174,7 +170,9 @@ function performCameraOrientation(orientation, options) {
   const duration =
     alignment > ALIGNMENT_THRESHOLD ? LONG_ANIMATION_DURATION : SHORT_ANIMATION_DURATION;
   is_moving.value = true;
-  imageStyle.opacity = 0;
+  if (imageStyle) {
+    imageStyle.opacity = 0;
+  }
 
   animateCamera({
     camera,
@@ -183,29 +181,27 @@ function performCameraOrientation(orientation, options) {
     duration,
     bumpMultiplier: BUMP_MULTIPLIER,
     easeExponent: EASE_EXPONENT,
-    onUpdate: () => genericRenderWindow.getRenderWindow().render(),
+    onUpdate: () => {
+      const renderWindow = genericRenderWindow.getRenderWindow();
+      renderWindow.render();
+    },
     onEnd: () => {
       is_moving.value = false;
-      syncRemoteCamera();
+      hybridViewerStore.syncRemoteCamera();
     },
   });
 }
 
-async function performFocusCameraOnObject(id, options) {
-  const {
-    hybridDb,
-    viewerStore,
-    genericRenderWindow,
-    block_ids = [],
-    is_moving,
-    imageStyle,
-    syncRemoteCamera,
-  } = options;
+async function performFocusCameraOnObject(id, block_ids = []) {
+  const hybridViewerStore = useHybridViewerStore();
+  const genericRenderWindow = hybridViewerStore.genericRenderWindow.value;
+  const { hybridDb } = hybridViewerStore;
 
   if (!hybridDb[id]) {
     return;
   }
 
+  const viewerStore = useViewerStore();
   let bounds = [];
   if (block_ids.length > 0) {
     const schema = viewer_schemas.opengeodeweb_viewer.model.get_blocks_bounds;
@@ -222,18 +218,15 @@ async function performFocusCameraOnObject(id, options) {
   const targetOptions = getCameraOptions(camera);
   applyCameraOptions(camera, startOptions);
 
-  performSetCamera(targetOptions, {
-    genericRenderWindow,
-    is_moving,
-    imageStyle,
-    syncRemoteCamera,
-  });
+  performSetCamera(targetOptions);
 }
 
-function performSyncRemoteCamera(options) {
-  const { genericRenderWindow, viewerStore, remoteRender, camera_options } =
-    options;
-  const camera = genericRenderWindow.getRenderer().getActiveCamera();
+function performSyncRemoteCamera() {
+  const hybridViewerStore = useHybridViewerStore();
+  const genericRenderWindow = hybridViewerStore.genericRenderWindow.value;
+  const viewerStore = useViewerStore();
+  const renderer = genericRenderWindow.getRenderer();
+  const camera = renderer.getActiveCamera();
   const options_camera = getCameraOptions(camera);
   const schema = viewer_schemas.opengeodeweb_viewer.viewer.update_camera;
   const params = { camera_options: options_camera };
@@ -244,33 +237,36 @@ function performSyncRemoteCamera(options) {
     },
     {
       response_function: () => {
-        remoteRender();
-        Object.assign(camera_options, options_camera);
+        hybridViewerStore.remoteRender();
+        if (hybridViewerStore.camera_options) {
+          Object.assign(hybridViewerStore.camera_options, options_camera);
+        }
       },
     },
   );
 }
 
-async function applySnapshot(snapshot, options) {
-  const { genericRenderWindow, setZScaling, syncRemoteCamera, setCamera } = options;
+async function applySnapshot(snapshot) {
   if (!snapshot) {
     return;
   }
+  const hybridViewerStore = useHybridViewerStore();
   const z_scale = snapshot.zScale;
   if (typeof z_scale === "number") {
-    await setZScaling(z_scale);
+    await hybridViewerStore.setZScaling(z_scale);
   }
   const { camera_options: snapshot_camera_options } = snapshot;
   if (snapshot_camera_options) {
-    if (setCamera) {
-      setCamera(snapshot_camera_options);
+    if (hybridViewerStore.setCamera) {
+      hybridViewerStore.setCamera(snapshot_camera_options);
     } else {
-      applyCameraOptions(
-        genericRenderWindow.getRenderer().getActiveCamera(),
-        snapshot_camera_options,
-      );
-      genericRenderWindow.getRenderWindow().render();
-      syncRemoteCamera();
+      const genericRenderWindow = hybridViewerStore.genericRenderWindow.value;
+      const renderer = genericRenderWindow.getRenderer();
+      const camera = renderer.getActiveCamera();
+      applyCameraOptions(camera, snapshot_camera_options);
+      const renderWindow = genericRenderWindow.getRenderWindow();
+      renderWindow.render();
+      hybridViewerStore.syncRemoteCamera();
     }
   }
 }
diff --git a/internal/stores/hybrid_viewer/filters.js b/internal/stores/hybrid_viewer/filters.js
index e303b4733..ee3bfc08f 100644
--- a/internal/stores/hybrid_viewer/filters.js
+++ b/internal/stores/hybrid_viewer/filters.js
@@ -1,16 +1,14 @@
+import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
-function useHybridViewerFilters(options) {
-  const { remoteRender } = options;
-  const viewerStore = useViewerStore();
-
+function useHybridViewerFilters() {
   async function setClippingPlanes(ids, planes) {
-    await performSetClippingPlanes(ids, planes, { viewerStore, remoteRender });
+    await performSetClippingPlanes(ids, planes);
   }
 
   async function setShrink(ids, shrink_factor) {
-    await performSetShrink(ids, shrink_factor, { viewerStore, remoteRender });
+    await performSetShrink(ids, shrink_factor);
   }
 
   return {
@@ -19,20 +17,20 @@ function useHybridViewerFilters(options) {
   };
 }
 
-async function performSetClippingPlanes(ids, planes, options) {
-  const { viewerStore, remoteRender } = options;
+async function performSetClippingPlanes(ids, planes) {
+  const viewerStore = useViewerStore();
   const schema = viewer_schemas.opengeodeweb_viewer.viewer.clipping_planes;
   const params = { ids, planes };
   await viewerStore.request({ schema, params });
-  await remoteRender();
+  await useHybridViewerStore().remoteRender();
 }
 
-async function performSetShrink(ids, shrink_factor, options) {
-  const { viewerStore, remoteRender } = options;
+async function performSetShrink(ids, shrink_factor) {
+  const viewerStore = useViewerStore();
   const schema = viewer_schemas.opengeodeweb_viewer.viewer.shrink;
   const params = { ids, shrink_factor };
   await viewerStore.request({ schema, params });
-  await remoteRender();
+  await useHybridViewerStore().remoteRender();
 }
 
 export { performSetClippingPlanes, performSetShrink, useHybridViewerFilters };
diff --git a/internal/stores/hybrid_viewer/highlight.js b/internal/stores/hybrid_viewer/highlight.js
index a97ed6a0b..15746cc27 100644
--- a/internal/stores/hybrid_viewer/highlight.js
+++ b/internal/stores/hybrid_viewer/highlight.js
@@ -1,12 +1,10 @@
 import { HOVER_DEBOUNCE_MS, HOVER_TIMEOUT_MS } from "./constants";
 import { database } from "@ogw_internal/database/database.js";
+import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
-function useHybridViewerHighlight(options) {
-  const { genericRenderWindow, hybridDb } = options;
-  const viewerStore = useViewerStore();
-
+function useHybridViewerHighlight() {
   const is_hover_highlight = ref(false);
   const hover_highlight_field_type = ref("CELL");
   const hoverData = ref(undefined);
@@ -17,11 +15,8 @@ function useHybridViewerHighlight(options) {
   const clearHoverData = createClearHoverData(hoverTimeoutRef, hoverData, currentHoverId);
 
   const hoverHighlight = createHoverHighlight({
-    genericRenderWindow,
     is_hover_highlight,
-    viewerStore,
     hover_highlight_field_type,
-    hybridDb,
     hoverData,
     hoverPosition,
     currentHoverId,
@@ -31,11 +26,7 @@ function useHybridViewerHighlight(options) {
 
   function clearHoverHighlight() {
     clearHoverData();
-    performClearHoverHighlight({
-      viewerStore,
-      hover_highlight_field_type,
-      hybridDb,
-    });
+    performClearHoverHighlight();
   }
 
   return {
@@ -48,29 +39,32 @@ function useHybridViewerHighlight(options) {
   };
 }
 
-function performHoverHighlight(event, options) {
+function performHoverHighlight(event, options = {}) {
   const {
     is_hover_highlight,
-    genericRenderWindow,
-    viewerStore,
     hover_highlight_field_type,
-    hybridDb,
     onResponse,
   } = options;
   if (!is_hover_highlight.value) {
     return;
   }
+  const hybridViewerStore = useHybridViewerStore();
+  const genericRenderWindow = hybridViewerStore.genericRenderWindow.value;
+  if (!genericRenderWindow) {
+    return;
+  }
   const container = genericRenderWindow.getContainer();
   if (!container) {
     return;
   }
+  const viewerStore = useViewerStore();
   const rect = container.getBoundingClientRect();
   const schema = viewer_schemas.opengeodeweb_viewer.viewer.highlight;
   const params = {
     x: Math.round(event.clientX - rect.left),
     y: Math.round(rect.height - (event.clientY - rect.top)),
     field_type: hover_highlight_field_type.value,
-    ids: Object.keys(hybridDb),
+    ids: Object.keys(hybridViewerStore.hybridDb),
   };
   viewerStore.request(
     {
@@ -83,14 +77,18 @@ function performHoverHighlight(event, options) {
   );
 }
 
-function performClearHoverHighlight(options) {
-  const { viewerStore, hover_highlight_field_type, hybridDb } = options;
+function performClearHoverHighlight() {
+  const hybridViewerStore = useHybridViewerStore();
+  const fieldType = hybridViewerStore.hover_highlight_field_type
+    ? hybridViewerStore.hover_highlight_field_type.value
+    : "CELL";
+  const viewerStore = useViewerStore();
   const schema = viewer_schemas.opengeodeweb_viewer.viewer.highlight;
   const params = {
     x: -1,
     y: -1,
-    field_type: hover_highlight_field_type.value,
-    ids: Object.keys(hybridDb),
+    field_type: fieldType,
+    ids: Object.keys(hybridViewerStore.hybridDb || {}),
   };
   viewerStore.request({ schema, params });
 }
@@ -106,13 +104,10 @@ function createClearHoverData(hoverTimeoutRef, hoverData, currentHoverId) {
   };
 }
 
-function createHoverHighlight(options) {
+function createHoverHighlight(options = {}) {
   const {
-    genericRenderWindow,
     is_hover_highlight,
-    viewerStore,
     hover_highlight_field_type,
-    hybridDb,
     hoverData,
     hoverPosition,
     currentHoverId,
@@ -121,7 +116,9 @@ function createHoverHighlight(options) {
   } = options;
 
   return useDebounceFn((event) => {
-    const containerElement = genericRenderWindow.value?.getContainer();
+    const hybridViewerStore = useHybridViewerStore();
+    const genericRenderWindow = hybridViewerStore.genericRenderWindow.value;
+    const containerElement = genericRenderWindow ? genericRenderWindow.getContainer() : undefined;
     let relativeMousePosition = { x: 0, y: 0 };
     if (containerElement) {
       const containerRect = containerElement.getBoundingClientRect();
@@ -135,10 +132,7 @@ function createHoverHighlight(options) {
 
     performHoverHighlight(event, {
       is_hover_highlight,
-      genericRenderWindow: genericRenderWindow.value,
-      viewerStore,
       hover_highlight_field_type,
-      hybridDb,
       onResponse: async (response) => {
         const isResponseValid =
           response && response.id && response.picked_id !== undefined && response.picked_id !== -1;
@@ -169,10 +163,9 @@ function createHoverHighlight(options) {
         }
 
         if (response.geode_id) {
-          const component = await database.model_components
-            .where("[id+geode_id]")
-            .equals([response.id, response.geode_id])
-            .first();
+          const components = database.model_components.where("[id+geode_id]");
+          const query = components.equals([response.id, response.geode_id]);
+          const component = await query.first();
           if (component) {
             componentInfo = {
               name: component.name,
diff --git a/internal/stores/hybrid_viewer/scene.js b/internal/stores/hybrid_viewer/scene.js
index bbd179020..fb3120155 100644
--- a/internal/stores/hybrid_viewer/scene.js
+++ b/internal/stores/hybrid_viewer/scene.js
@@ -1,54 +1,34 @@
 import { ACTOR_COLOR } from "./constants";
 import { useDataStore } from "@ogw_front/stores/data";
+import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 import { newInstance as vtkActor } from "@kitware/vtk.js/Rendering/Core/Actor";
 import { newInstance as vtkMapper } from "@kitware/vtk.js/Rendering/Core/Mapper";
 import { newInstance as vtkXMLPolyDataReader } from "@kitware/vtk.js/IO/XML/XMLPolyDataReader";
 
-function useHybridViewerScene(options) {
-  const { genericRenderWindow, remoteRender, gridActor } = options;
-
-  const dataStore = useDataStore();
-  const viewerStore = useViewerStore();
+function useHybridViewerScene() {
   const hybridDb = reactive({});
   const zScale = ref(1);
 
   async function addItem(id) {
-    await performAddItem(id, {
-      genericRenderWindow: genericRenderWindow.value,
-      dataStore,
-      vtkXMLPolyDataReader,
-      vtkActor,
-      vtkMapper,
-      actorColor: ACTOR_COLOR,
-      hybridDb,
-    });
+    await performAddItem(id);
   }
 
   function removeItem(id) {
-    performRemoveItem(id, { genericRenderWindow: genericRenderWindow.value, hybridDb });
+    performRemoveItem(id);
   }
 
   function setVisibility(id, visibility) {
-    performSetVisibility(id, visibility, {
-      genericRenderWindow: genericRenderWindow.value,
-      hybridDb,
-    });
+    performSetVisibility(id, visibility);
   }
 
   async function setZScaling(z_scale) {
-    await performSetZScaling(z_scale, {
-      zScale,
-      genericRenderWindow: genericRenderWindow.value,
-      gridActor,
-      viewerStore,
-      remoteRender,
-    });
+    await performSetZScaling(z_scale);
   }
 
   function clear() {
-    performClear({ genericRenderWindow: genericRenderWindow.value, hybridDb });
+    performClear();
   }
 
   return {
@@ -62,93 +42,98 @@ function useHybridViewerScene(options) {
   };
 }
 
-async function performAddItem(id, options) {
-  const {
-    genericRenderWindow,
-    dataStore,
-    vtkXMLPolyDataReader: vtkXMLPolyDataReaderOverride,
-    vtkActor: vtkActorOverride,
-    vtkMapper: vtkMapperOverride,
-    actorColor,
-    hybridDb,
-  } = options;
+async function performAddItem(id) {
+  const hybridViewerStore = useHybridViewerStore();
+  const genericRenderWindow = hybridViewerStore.genericRenderWindow.value;
   if (!genericRenderWindow) {
     return;
   }
+  const dataStore = useDataStore();
   const value = await dataStore.item(id);
   if (value && !dataStore.isItemViewable(value)) {
     return;
   }
-  const createReader = vtkXMLPolyDataReaderOverride || vtkXMLPolyDataReader;
-  const createActor = vtkActorOverride || vtkActor;
-  const createMapper = vtkMapperOverride || vtkMapper;
 
-  const reader = createReader();
+  const reader = vtkXMLPolyDataReader();
   await reader.parseAsArrayBuffer(new TextEncoder().encode(value.binary_light_viewable));
-  const actor = createActor();
-  const mapper = createMapper();
+  const actor = vtkActor();
+  const mapper = vtkMapper();
   const polydata = reader.getOutputData(0);
   mapper.setInputData(polydata);
-  actor.getProperty().setColor(actorColor || ACTOR_COLOR);
+  const property = actor.getProperty();
+  property.setColor(ACTOR_COLOR);
   actor.setMapper(mapper);
   const renderer = genericRenderWindow.getRenderer();
-  if (hybridDb[id] && hybridDb[id].actor) {
-    renderer.removeActor(hybridDb[id].actor);
+  if (hybridViewerStore.hybridDb[id] && hybridViewerStore.hybridDb[id].actor) {
+    renderer.removeActor(hybridViewerStore.hybridDb[id].actor);
   }
-  const isFirst = renderer.getActors().length === 0;
+  const actors = renderer.getActors();
+  const isFirst = actors.length === 0;
   renderer.addActor(actor);
   if (isFirst) {
     renderer.resetCamera();
   }
-  hybridDb[id] = { actor, polydata, mapper };
+  hybridViewerStore.hybridDb[id] = { actor, polydata, mapper };
 }
 
-function performRemoveItem(id, options) {
-  const { genericRenderWindow, hybridDb } = options;
-  if (!hybridDb[id]) {
+function performRemoveItem(id) {
+  const hybridViewerStore = useHybridViewerStore();
+  if (!hybridViewerStore.hybridDb[id]) {
     return;
   }
-  genericRenderWindow.getRenderer().removeActor(hybridDb[id].actor);
-  genericRenderWindow.getRenderWindow().render();
-  delete hybridDb[id];
+  const genericRenderWindow = hybridViewerStore.genericRenderWindow.value;
+  const renderer = genericRenderWindow.getRenderer();
+  renderer.removeActor(hybridViewerStore.hybridDb[id].actor);
+  const renderWindow = genericRenderWindow.getRenderWindow();
+  renderWindow.render();
+  delete hybridViewerStore.hybridDb[id];
 }
 
-function performSetVisibility(id, visibility, options) {
-  const { genericRenderWindow, hybridDb } = options;
-  if (!hybridDb[id]) {
+function performSetVisibility(id, visibility) {
+  const hybridViewerStore = useHybridViewerStore();
+  if (!hybridViewerStore.hybridDb[id]) {
     return;
   }
-  hybridDb[id].actor.setVisibility(visibility);
-  genericRenderWindow.getRenderWindow().render();
+  const genericRenderWindow = hybridViewerStore.genericRenderWindow.value;
+  hybridViewerStore.hybridDb[id].actor.setVisibility(visibility);
+  const renderWindow = genericRenderWindow.getRenderWindow();
+  renderWindow.render();
 }
 
-async function performSetZScaling(z_scale, options) {
-  const { zScale, genericRenderWindow, gridActor, viewerStore, remoteRender } = options;
-  zScale.value = z_scale;
+async function performSetZScaling(z_scale) {
+  const hybridViewerStore = useHybridViewerStore();
+  if (hybridViewerStore.zScale) {
+    hybridViewerStore.zScale.value = z_scale;
+  }
+  const genericRenderWindow = hybridViewerStore.genericRenderWindow.value;
   const renderer = genericRenderWindow.getRenderer();
   for (const actor of renderer.getActors()) {
-    if (actor !== gridActor) {
-      const scale = actor.getScale();
-      actor.setScale(scale[0], scale[1], z_scale);
-    }
+    const scale = actor.getScale();
+    actor.setScale(scale[0], scale[1], z_scale);
   }
   renderer.resetCamera();
-  genericRenderWindow.getRenderWindow().render();
+  const renderWindow = genericRenderWindow.getRenderWindow();
+  renderWindow.render();
+  const viewerStore = useViewerStore();
   const schema = viewer_schemas.opengeodeweb_viewer.viewer.set_z_scaling;
   const params = { z_scale };
   await viewerStore.request({ schema, params });
-  remoteRender();
+  await hybridViewerStore.remoteRender();
 }
 
-function performClear(options) {
-  const { genericRenderWindow, hybridDb } = options;
+function performClear() {
+  const hybridViewerStore = useHybridViewerStore();
+  const genericRenderWindow = hybridViewerStore.genericRenderWindow.value;
   const renderer = genericRenderWindow.getRenderer();
   for (const actor of renderer.getActors()) {
     renderer.removeActor(actor);
   }
-  genericRenderWindow.getRenderWindow().render();
-  for (const id of Object.keys(hybridDb)) {
-    delete hybridDb[id];
+  const renderWindow = genericRenderWindow.getRenderWindow();
+  renderWindow.render();
+  if (hybridViewerStore.hybridDb) {
+    for (const id of Object.keys(hybridViewerStore.hybridDb)) {
+      delete hybridViewerStore.hybridDb[id];
+    }
   }
 }
 
diff --git a/internal/stores/hybrid_viewer/viewport.js b/internal/stores/hybrid_viewer/viewport.js
index e8d5106bd..25efc3cf2 100644
--- a/internal/stores/hybrid_viewer/viewport.js
+++ b/internal/stores/hybrid_viewer/viewport.js
@@ -1,54 +1,19 @@
+import { Status } from "@ogw_front/utils/status";
 import { WHEEL_TIME_OUT_MS } from "./constants";
 import { centerCameraOnPosition } from "./camera";
+import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
-function useHybridViewerViewport(options) {
-  const {
-    genericRenderWindow,
-    remoteRender,
-    status,
-    Status,
-    is_picking,
-    is_moving,
-    syncRemoteCamera,
-    hoverHighlight,
-    setImageStyle,
-  } = options;
-
-  const viewerStore = useViewerStore();
+function useHybridViewerViewport() {
   const viewStream = ref(undefined);
-  let wheelEventEndTimeout = undefined;
 
   function setContainer(container) {
-    performSetContainer({
-      container,
-      genericRenderWindow: genericRenderWindow.value,
-      imageStyleSetter: (style) => setImageStyle(style),
-      resize,
-      useMousePressed,
-      useEventListener,
-      is_picking,
-      is_moving,
-      clickPickingCallback: performClickPicking,
-      viewerStore,
-      syncRemoteCamera,
-      hoverHighlight,
-      wheelTimeoutMs: WHEEL_TIME_OUT_MS,
-      wheelEventEndTimeout,
-      wheelTimeoutSetter: (timeout) => (wheelEventEndTimeout = timeout),
-    });
+    performSetContainer(container);
   }
 
   async function resize(width, height) {
-    await performResize(width, height, {
-      viewerStore,
-      status,
-      Status,
-      genericRenderWindow: genericRenderWindow.value,
-      viewStream: viewStream.value,
-      remoteRender,
-    });
+    await performResize(width, height);
   }
 
   return {
@@ -58,9 +23,11 @@ function useHybridViewerViewport(options) {
   };
 }
 
-function performClickPicking(event, options) {
-  const { container, viewerStore, genericRenderWindow, syncRemoteCamera } = options;
-  const rect = container.getBoundingClientRect();
+function performClickPicking(event, containerElement) {
+  const hybridViewerStore = useHybridViewerStore();
+  const genericRenderWindow = hybridViewerStore.genericRenderWindow.value;
+  const viewerStore = useViewerStore();
+  const rect = containerElement.getBoundingClientRect();
   const schema = viewer_schemas.opengeodeweb_viewer.viewer.get_point_position;
   const params = {
     x: Math.round(event.clientX - rect.left),
@@ -75,47 +42,34 @@ function performClickPicking(event, options) {
       response_function: ({ x, y, z }) => {
         const pickedPos = [x, y, z];
         if (pickedPos.some((val) => val !== 0)) {
-          const camera = genericRenderWindow.getRenderer().getActiveCamera();
+          const renderer = genericRenderWindow.getRenderer();
+          const camera = renderer.getActiveCamera();
           centerCameraOnPosition(camera, pickedPos);
-          genericRenderWindow.getRenderWindow().render();
-          syncRemoteCamera();
+          const renderWindow = genericRenderWindow.getRenderWindow();
+          renderWindow.render();
+          hybridViewerStore.syncRemoteCamera();
         }
       },
     },
   );
 }
 
-function performSetContainer(options) {
-  const {
-    container,
-    genericRenderWindow,
-    imageStyleSetter,
-    resize,
-    useMousePressed,
-    useEventListener,
-    is_picking,
-    is_moving,
-    clickPickingCallback,
-    viewerStore,
-    syncRemoteCamera,
-    hoverHighlight,
-    wheelTimeoutMs,
-    wheelEventEndTimeout,
-    wheelTimeoutSetter,
-  } = options;
-
-  if (!container.value) {
+function performSetContainer(container) {
+  if (!container || !container.value) {
     return;
   }
 
+  const hybridViewerStore = useHybridViewerStore();
+  const genericRenderWindow = hybridViewerStore.genericRenderWindow.value;
+  const { is_picking, is_moving } = hybridViewerStore;
+
   genericRenderWindow.setContainer(container.value.$el);
   const webGLRenderWindow = genericRenderWindow.getApiSpecificRenderWindow();
   webGLRenderWindow.setUseBackgroundImage(true);
   const imageStyle = webGLRenderWindow.getReferenceByName("bgImage").style;
   Object.assign(imageStyle, { transition: "opacity 0.1s ease-in", zIndex: 1 });
-  imageStyleSetter(imageStyle);
 
-  resize(container.value.$el.offsetWidth, container.value.$el.offsetHeight);
+  performResize(container.value.$el.offsetWidth, container.value.$el.offsetHeight);
 
   let has_dragged = false;
   useMousePressed({
@@ -125,12 +79,7 @@ function performSetContainer(options) {
         return;
       }
       if (event.button === 0 && is_picking.value) {
-        clickPickingCallback(event, {
-          container: container.value.$el,
-          viewerStore,
-          genericRenderWindow,
-          syncRemoteCamera,
-        });
+        performClickPicking(event, container.value.$el);
         is_picking.value = false;
         return;
       }
@@ -141,8 +90,9 @@ function performSetContainer(options) {
     onReleased: () => {
       is_moving.value = false;
       if (has_dragged) {
-        genericRenderWindow.getRenderer().resetCameraClippingRange();
-        syncRemoteCamera();
+        const renderer = genericRenderWindow.getRenderer();
+        renderer.resetCameraClippingRange();
+        hybridViewerStore.syncRemoteCamera();
       }
       has_dragged = false;
     },
@@ -155,26 +105,29 @@ function performSetContainer(options) {
         imageStyle.opacity = 0;
       }
     }
-    hoverHighlight(event);
+    hybridViewerStore.hoverHighlight(event);
   });
+  let wheelEventEndTimeout = undefined;
   useEventListener(container, "wheel", () => {
     is_moving.value = true;
     if (imageStyle) {
       imageStyle.opacity = 0;
     }
     clearTimeout(wheelEventEndTimeout);
-    wheelTimeoutSetter(
-      setTimeout(() => {
-        is_moving.value = false;
-        genericRenderWindow.getRenderer().resetCameraClippingRange();
-        syncRemoteCamera();
-      }, wheelTimeoutMs),
-    );
+    wheelEventEndTimeout = setTimeout(() => {
+      is_moving.value = false;
+      const renderer = genericRenderWindow.getRenderer();
+      renderer.resetCameraClippingRange();
+      hybridViewerStore.syncRemoteCamera();
+    }, WHEEL_TIME_OUT_MS);
   });
 }
 
-async function performResize(width, height, options) {
-  const { viewerStore, status, Status, genericRenderWindow, viewStream, remoteRender } = options;
+async function performResize(width, height) {
+  const hybridViewerStore = useHybridViewerStore();
+  const genericRenderWindow = hybridViewerStore.genericRenderWindow.value;
+  const { status, viewStream } = hybridViewerStore;
+  const viewerStore = useViewerStore();
   if (viewerStore.status !== Status.CONNECTED || status.value !== Status.CREATED) {
     return;
   }
@@ -184,9 +137,12 @@ async function performResize(width, height, options) {
   canvas.height = height;
   await nextTick();
   webGLRenderWindow.setSize(width, height);
-  viewStream.setSize(width, height);
-  genericRenderWindow.getRenderWindow().render();
-  remoteRender();
+  if (viewStream && viewStream.value) {
+    viewStream.value.setSize(width, height);
+  }
+  const renderWindow = genericRenderWindow.getRenderWindow();
+  renderWindow.render();
+  await hybridViewerStore.remoteRender();
 }
 
 export { performClickPicking, performResize, performSetContainer, useHybridViewerViewport };

From 1e3193548f58d1b6c6972313d6a749a845b40103 Mon Sep 17 00:00:00 2001
From: MaxNumerique <144453705+MaxNumerique@users.noreply.github.com>
Date: Fri, 14 Aug 2026 09:30:14 +0000
Subject: [PATCH 06/11] Apply prepare changes

---
 internal/stores/hybrid_viewer/highlight.js | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/internal/stores/hybrid_viewer/highlight.js b/internal/stores/hybrid_viewer/highlight.js
index 15746cc27..1a7879ea5 100644
--- a/internal/stores/hybrid_viewer/highlight.js
+++ b/internal/stores/hybrid_viewer/highlight.js
@@ -40,11 +40,7 @@ function useHybridViewerHighlight() {
 }
 
 function performHoverHighlight(event, options = {}) {
-  const {
-    is_hover_highlight,
-    hover_highlight_field_type,
-    onResponse,
-  } = options;
+  const { is_hover_highlight, hover_highlight_field_type, onResponse } = options;
   if (!is_hover_highlight.value) {
     return;
   }

From 339b9b9a6d6c5a0accf7b7ce6072e108fdda62d5 Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Fri, 14 Aug 2026 11:40:17 +0200
Subject: [PATCH 07/11] more

---
 internal/stores/hybrid_viewer/highlight.js | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/internal/stores/hybrid_viewer/highlight.js b/internal/stores/hybrid_viewer/highlight.js
index 15746cc27..1a7879ea5 100644
--- a/internal/stores/hybrid_viewer/highlight.js
+++ b/internal/stores/hybrid_viewer/highlight.js
@@ -40,11 +40,7 @@ function useHybridViewerHighlight() {
 }
 
 function performHoverHighlight(event, options = {}) {
-  const {
-    is_hover_highlight,
-    hover_highlight_field_type,
-    onResponse,
-  } = options;
+  const { is_hover_highlight, hover_highlight_field_type, onResponse } = options;
   if (!is_hover_highlight.value) {
     return;
   }

From 32555c3d1c2cffe27466477cb2dc71c5b55774e7 Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Fri, 14 Aug 2026 11:57:43 +0200
Subject: [PATCH 08/11] more

---
 internal/stores/hybrid_viewer/brightness.js |  4 +-
 internal/stores/hybrid_viewer/camera.js     | 65 +++++++++------------
 internal/stores/hybrid_viewer/filters.js    |  6 +-
 internal/stores/hybrid_viewer/highlight.js  | 22 +++----
 internal/stores/hybrid_viewer/scene.js      | 61 +++++++++----------
 internal/stores/hybrid_viewer/viewport.js   | 44 +++++++-------
 6 files changed, 94 insertions(+), 108 deletions(-)

diff --git a/internal/stores/hybrid_viewer/brightness.js b/internal/stores/hybrid_viewer/brightness.js
index 3f06c5fbd..204961a10 100644
--- a/internal/stores/hybrid_viewer/brightness.js
+++ b/internal/stores/hybrid_viewer/brightness.js
@@ -14,12 +14,12 @@ function useHybridViewerBrightness() {
     : undefined;
 
   function getAverageBrightness(rect) {
-    const hybridViewerStore = useHybridViewerStore();
+    const { genericRenderWindow } = useHybridViewerStore();
     return computeAverageBrightness(rect, {
       latestImage: latestImage.value,
       offscreenCtx,
       offscreenCanvas,
-      genericRenderWindow: hybridViewerStore.genericRenderWindow.value,
+      genericRenderWindow: genericRenderWindow.value,
     });
   }
 
diff --git a/internal/stores/hybrid_viewer/camera.js b/internal/stores/hybrid_viewer/camera.js
index dcb708061..c639f3990 100644
--- a/internal/stores/hybrid_viewer/camera.js
+++ b/internal/stores/hybrid_viewer/camera.js
@@ -35,7 +35,6 @@ function getImageStyle(genericRenderWindow) {
 }
 
 function useHybridViewerCamera() {
-  const hybridViewerStore = useHybridViewerStore();
   const camera_options = reactive({});
 
   function syncRemoteCamera() {
@@ -47,10 +46,10 @@ function useHybridViewerCamera() {
   }
 
   function resetCamera() {
-    const genericRenderWindow = hybridViewerStore.genericRenderWindow.value;
-    const renderer = genericRenderWindow.getRenderer();
+    const { genericRenderWindow } = useHybridViewerStore();
+    const renderer = genericRenderWindow.value.getRenderer();
     renderer.resetCamera();
-    const renderWindow = genericRenderWindow.getRenderWindow();
+    const renderWindow = genericRenderWindow.value.getRenderWindow();
     renderWindow.render();
     syncRemoteCamera();
   }
@@ -114,11 +113,9 @@ function centerCameraOnPosition(camera, pickedPosition) {
 }
 
 function performSetCamera(targetCameraOptions) {
-  const hybridViewerStore = useHybridViewerStore();
-  const genericRenderWindow = hybridViewerStore.genericRenderWindow.value;
-  const { is_moving } = hybridViewerStore;
-  const imageStyle = getImageStyle(genericRenderWindow);
-  const renderer = genericRenderWindow.getRenderer();
+  const { genericRenderWindow, is_moving, syncRemoteCamera } = useHybridViewerStore();
+  const imageStyle = getImageStyle(genericRenderWindow.value);
+  const renderer = genericRenderWindow.value.getRenderer();
   const camera = renderer.getActiveCamera();
   const startState = getCameraOptions(camera);
   const duration = computeAnimationDuration(startState, targetCameraOptions);
@@ -134,26 +131,24 @@ function performSetCamera(targetCameraOptions) {
     bumpMultiplier: 0,
     easeExponent: EASE_EXPONENT,
     onUpdate: () => {
-      const renderWindow = genericRenderWindow.getRenderWindow();
+      const renderWindow = genericRenderWindow.value.getRenderWindow();
       renderWindow.render();
     },
     onEnd: () => {
       applyCameraOptions(camera, targetCameraOptions);
-      const renderWindow = genericRenderWindow.getRenderWindow();
+      const renderWindow = genericRenderWindow.value.getRenderWindow();
       renderWindow.render();
       is_moving.value = false;
-      hybridViewerStore.syncRemoteCamera();
+      syncRemoteCamera();
     },
   });
 }
 
 function performCameraOrientation(orientation) {
-  const hybridViewerStore = useHybridViewerStore();
-  const genericRenderWindow = hybridViewerStore.genericRenderWindow.value;
-  const { is_moving } = hybridViewerStore;
-  const imageStyle = getImageStyle(genericRenderWindow);
+  const { genericRenderWindow, is_moving, syncRemoteCamera } = useHybridViewerStore();
+  const imageStyle = getImageStyle(genericRenderWindow.value);
   const config = ORIENTATIONS[orientation.toLowerCase()];
-  const renderer = genericRenderWindow.getRenderer();
+  const renderer = genericRenderWindow.value.getRenderer();
   const camera = renderer.getActiveCamera();
   const startState = getCameraOptions(camera);
 
@@ -182,20 +177,18 @@ function performCameraOrientation(orientation) {
     bumpMultiplier: BUMP_MULTIPLIER,
     easeExponent: EASE_EXPONENT,
     onUpdate: () => {
-      const renderWindow = genericRenderWindow.getRenderWindow();
+      const renderWindow = genericRenderWindow.value.getRenderWindow();
       renderWindow.render();
     },
     onEnd: () => {
       is_moving.value = false;
-      hybridViewerStore.syncRemoteCamera();
+      syncRemoteCamera();
     },
   });
 }
 
 async function performFocusCameraOnObject(id, block_ids = []) {
-  const hybridViewerStore = useHybridViewerStore();
-  const genericRenderWindow = hybridViewerStore.genericRenderWindow.value;
-  const { hybridDb } = hybridViewerStore;
+  const { genericRenderWindow, hybridDb } = useHybridViewerStore();
 
   if (!hybridDb[id]) {
     return;
@@ -211,7 +204,7 @@ async function performFocusCameraOnObject(id, block_ids = []) {
     bounds = hybridDb[id].actor.getBounds();
   }
 
-  const renderer = genericRenderWindow.getRenderer();
+  const renderer = genericRenderWindow.value.getRenderer();
   const camera = renderer.getActiveCamera();
   const startOptions = getCameraOptions(camera);
   renderer.resetCamera(bounds);
@@ -222,10 +215,9 @@ async function performFocusCameraOnObject(id, block_ids = []) {
 }
 
 function performSyncRemoteCamera() {
-  const hybridViewerStore = useHybridViewerStore();
-  const genericRenderWindow = hybridViewerStore.genericRenderWindow.value;
+  const { genericRenderWindow, camera_options, remoteRender } = useHybridViewerStore();
   const viewerStore = useViewerStore();
-  const renderer = genericRenderWindow.getRenderer();
+  const renderer = genericRenderWindow.value.getRenderer();
   const camera = renderer.getActiveCamera();
   const options_camera = getCameraOptions(camera);
   const schema = viewer_schemas.opengeodeweb_viewer.viewer.update_camera;
@@ -237,9 +229,9 @@ function performSyncRemoteCamera() {
     },
     {
       response_function: () => {
-        hybridViewerStore.remoteRender();
-        if (hybridViewerStore.camera_options) {
-          Object.assign(hybridViewerStore.camera_options, options_camera);
+        remoteRender();
+        if (camera_options) {
+          Object.assign(camera_options, options_camera);
         }
       },
     },
@@ -250,23 +242,22 @@ async function applySnapshot(snapshot) {
   if (!snapshot) {
     return;
   }
-  const hybridViewerStore = useHybridViewerStore();
+  const { genericRenderWindow, setZScaling, setCamera, syncRemoteCamera } = useHybridViewerStore();
   const z_scale = snapshot.zScale;
   if (typeof z_scale === "number") {
-    await hybridViewerStore.setZScaling(z_scale);
+    await setZScaling(z_scale);
   }
   const { camera_options: snapshot_camera_options } = snapshot;
   if (snapshot_camera_options) {
-    if (hybridViewerStore.setCamera) {
-      hybridViewerStore.setCamera(snapshot_camera_options);
+    if (setCamera) {
+      setCamera(snapshot_camera_options);
     } else {
-      const genericRenderWindow = hybridViewerStore.genericRenderWindow.value;
-      const renderer = genericRenderWindow.getRenderer();
+      const renderer = genericRenderWindow.value.getRenderer();
       const camera = renderer.getActiveCamera();
       applyCameraOptions(camera, snapshot_camera_options);
-      const renderWindow = genericRenderWindow.getRenderWindow();
+      const renderWindow = genericRenderWindow.value.getRenderWindow();
       renderWindow.render();
-      hybridViewerStore.syncRemoteCamera();
+      syncRemoteCamera();
     }
   }
 }
diff --git a/internal/stores/hybrid_viewer/filters.js b/internal/stores/hybrid_viewer/filters.js
index ee3bfc08f..fec8ba375 100644
--- a/internal/stores/hybrid_viewer/filters.js
+++ b/internal/stores/hybrid_viewer/filters.js
@@ -19,18 +19,20 @@ function useHybridViewerFilters() {
 
 async function performSetClippingPlanes(ids, planes) {
   const viewerStore = useViewerStore();
+  const { remoteRender } = useHybridViewerStore();
   const schema = viewer_schemas.opengeodeweb_viewer.viewer.clipping_planes;
   const params = { ids, planes };
   await viewerStore.request({ schema, params });
-  await useHybridViewerStore().remoteRender();
+  await remoteRender();
 }
 
 async function performSetShrink(ids, shrink_factor) {
   const viewerStore = useViewerStore();
+  const { remoteRender } = useHybridViewerStore();
   const schema = viewer_schemas.opengeodeweb_viewer.viewer.shrink;
   const params = { ids, shrink_factor };
   await viewerStore.request({ schema, params });
-  await useHybridViewerStore().remoteRender();
+  await remoteRender();
 }
 
 export { performSetClippingPlanes, performSetShrink, useHybridViewerFilters };
diff --git a/internal/stores/hybrid_viewer/highlight.js b/internal/stores/hybrid_viewer/highlight.js
index 1a7879ea5..5b9c4cced 100644
--- a/internal/stores/hybrid_viewer/highlight.js
+++ b/internal/stores/hybrid_viewer/highlight.js
@@ -44,12 +44,11 @@ function performHoverHighlight(event, options = {}) {
   if (!is_hover_highlight.value) {
     return;
   }
-  const hybridViewerStore = useHybridViewerStore();
-  const genericRenderWindow = hybridViewerStore.genericRenderWindow.value;
-  if (!genericRenderWindow) {
+  const { genericRenderWindow, hybridDb } = useHybridViewerStore();
+  if (!genericRenderWindow.value) {
     return;
   }
-  const container = genericRenderWindow.getContainer();
+  const container = genericRenderWindow.value.getContainer();
   if (!container) {
     return;
   }
@@ -60,7 +59,7 @@ function performHoverHighlight(event, options = {}) {
     x: Math.round(event.clientX - rect.left),
     y: Math.round(rect.height - (event.clientY - rect.top)),
     field_type: hover_highlight_field_type.value,
-    ids: Object.keys(hybridViewerStore.hybridDb),
+    ids: Object.keys(hybridDb),
   };
   viewerStore.request(
     {
@@ -74,17 +73,15 @@ function performHoverHighlight(event, options = {}) {
 }
 
 function performClearHoverHighlight() {
-  const hybridViewerStore = useHybridViewerStore();
-  const fieldType = hybridViewerStore.hover_highlight_field_type
-    ? hybridViewerStore.hover_highlight_field_type.value
-    : "CELL";
+  const { hover_highlight_field_type, hybridDb } = useHybridViewerStore();
+  const fieldType = hover_highlight_field_type ? hover_highlight_field_type.value : "CELL";
   const viewerStore = useViewerStore();
   const schema = viewer_schemas.opengeodeweb_viewer.viewer.highlight;
   const params = {
     x: -1,
     y: -1,
     field_type: fieldType,
-    ids: Object.keys(hybridViewerStore.hybridDb || {}),
+    ids: Object.keys(hybridDb || {}),
   };
   viewerStore.request({ schema, params });
 }
@@ -112,9 +109,8 @@ function createHoverHighlight(options = {}) {
   } = options;
 
   return useDebounceFn((event) => {
-    const hybridViewerStore = useHybridViewerStore();
-    const genericRenderWindow = hybridViewerStore.genericRenderWindow.value;
-    const containerElement = genericRenderWindow ? genericRenderWindow.getContainer() : undefined;
+    const { genericRenderWindow } = useHybridViewerStore();
+    const containerElement = genericRenderWindow.value ? genericRenderWindow.value.getContainer() : undefined;
     let relativeMousePosition = { x: 0, y: 0 };
     if (containerElement) {
       const containerRect = containerElement.getBoundingClientRect();
diff --git a/internal/stores/hybrid_viewer/scene.js b/internal/stores/hybrid_viewer/scene.js
index fb3120155..75bda4885 100644
--- a/internal/stores/hybrid_viewer/scene.js
+++ b/internal/stores/hybrid_viewer/scene.js
@@ -43,9 +43,8 @@ function useHybridViewerScene() {
 }
 
 async function performAddItem(id) {
-  const hybridViewerStore = useHybridViewerStore();
-  const genericRenderWindow = hybridViewerStore.genericRenderWindow.value;
-  if (!genericRenderWindow) {
+  const { genericRenderWindow, hybridDb } = useHybridViewerStore();
+  if (!genericRenderWindow.value) {
     return;
   }
   const dataStore = useDataStore();
@@ -63,9 +62,9 @@ async function performAddItem(id) {
   const property = actor.getProperty();
   property.setColor(ACTOR_COLOR);
   actor.setMapper(mapper);
-  const renderer = genericRenderWindow.getRenderer();
-  if (hybridViewerStore.hybridDb[id] && hybridViewerStore.hybridDb[id].actor) {
-    renderer.removeActor(hybridViewerStore.hybridDb[id].actor);
+  const renderer = genericRenderWindow.value.getRenderer();
+  if (hybridDb[id] && hybridDb[id].actor) {
+    renderer.removeActor(hybridDb[id].actor);
   }
   const actors = renderer.getActors();
   const isFirst = actors.length === 0;
@@ -73,66 +72,62 @@ async function performAddItem(id) {
   if (isFirst) {
     renderer.resetCamera();
   }
-  hybridViewerStore.hybridDb[id] = { actor, polydata, mapper };
+  hybridDb[id] = { actor, polydata, mapper };
 }
 
 function performRemoveItem(id) {
-  const hybridViewerStore = useHybridViewerStore();
-  if (!hybridViewerStore.hybridDb[id]) {
+  const { genericRenderWindow, hybridDb } = useHybridViewerStore();
+  if (!hybridDb[id]) {
     return;
   }
-  const genericRenderWindow = hybridViewerStore.genericRenderWindow.value;
-  const renderer = genericRenderWindow.getRenderer();
-  renderer.removeActor(hybridViewerStore.hybridDb[id].actor);
-  const renderWindow = genericRenderWindow.getRenderWindow();
+  const renderer = genericRenderWindow.value.getRenderer();
+  renderer.removeActor(hybridDb[id].actor);
+  const renderWindow = genericRenderWindow.value.getRenderWindow();
   renderWindow.render();
-  delete hybridViewerStore.hybridDb[id];
+  delete hybridDb[id];
 }
 
 function performSetVisibility(id, visibility) {
-  const hybridViewerStore = useHybridViewerStore();
-  if (!hybridViewerStore.hybridDb[id]) {
+  const { genericRenderWindow, hybridDb } = useHybridViewerStore();
+  if (!hybridDb[id]) {
     return;
   }
-  const genericRenderWindow = hybridViewerStore.genericRenderWindow.value;
-  hybridViewerStore.hybridDb[id].actor.setVisibility(visibility);
-  const renderWindow = genericRenderWindow.getRenderWindow();
+  hybridDb[id].actor.setVisibility(visibility);
+  const renderWindow = genericRenderWindow.value.getRenderWindow();
   renderWindow.render();
 }
 
 async function performSetZScaling(z_scale) {
-  const hybridViewerStore = useHybridViewerStore();
-  if (hybridViewerStore.zScale) {
-    hybridViewerStore.zScale.value = z_scale;
+  const { genericRenderWindow, zScale, remoteRender } = useHybridViewerStore();
+  if (zScale) {
+    zScale.value = z_scale;
   }
-  const genericRenderWindow = hybridViewerStore.genericRenderWindow.value;
-  const renderer = genericRenderWindow.getRenderer();
+  const renderer = genericRenderWindow.value.getRenderer();
   for (const actor of renderer.getActors()) {
     const scale = actor.getScale();
     actor.setScale(scale[0], scale[1], z_scale);
   }
   renderer.resetCamera();
-  const renderWindow = genericRenderWindow.getRenderWindow();
+  const renderWindow = genericRenderWindow.value.getRenderWindow();
   renderWindow.render();
   const viewerStore = useViewerStore();
   const schema = viewer_schemas.opengeodeweb_viewer.viewer.set_z_scaling;
   const params = { z_scale };
   await viewerStore.request({ schema, params });
-  await hybridViewerStore.remoteRender();
+  await remoteRender();
 }
 
 function performClear() {
-  const hybridViewerStore = useHybridViewerStore();
-  const genericRenderWindow = hybridViewerStore.genericRenderWindow.value;
-  const renderer = genericRenderWindow.getRenderer();
+  const { genericRenderWindow, hybridDb } = useHybridViewerStore();
+  const renderer = genericRenderWindow.value.getRenderer();
   for (const actor of renderer.getActors()) {
     renderer.removeActor(actor);
   }
-  const renderWindow = genericRenderWindow.getRenderWindow();
+  const renderWindow = genericRenderWindow.value.getRenderWindow();
   renderWindow.render();
-  if (hybridViewerStore.hybridDb) {
-    for (const id of Object.keys(hybridViewerStore.hybridDb)) {
-      delete hybridViewerStore.hybridDb[id];
+  if (hybridDb) {
+    for (const id of Object.keys(hybridDb)) {
+      delete hybridDb[id];
     }
   }
 }
diff --git a/internal/stores/hybrid_viewer/viewport.js b/internal/stores/hybrid_viewer/viewport.js
index 25efc3cf2..d6466af36 100644
--- a/internal/stores/hybrid_viewer/viewport.js
+++ b/internal/stores/hybrid_viewer/viewport.js
@@ -24,8 +24,7 @@ function useHybridViewerViewport() {
 }
 
 function performClickPicking(event, containerElement) {
-  const hybridViewerStore = useHybridViewerStore();
-  const genericRenderWindow = hybridViewerStore.genericRenderWindow.value;
+  const { genericRenderWindow, syncRemoteCamera } = useHybridViewerStore();
   const viewerStore = useViewerStore();
   const rect = containerElement.getBoundingClientRect();
   const schema = viewer_schemas.opengeodeweb_viewer.viewer.get_point_position;
@@ -42,12 +41,12 @@ function performClickPicking(event, containerElement) {
       response_function: ({ x, y, z }) => {
         const pickedPos = [x, y, z];
         if (pickedPos.some((val) => val !== 0)) {
-          const renderer = genericRenderWindow.getRenderer();
+          const renderer = genericRenderWindow.value.getRenderer();
           const camera = renderer.getActiveCamera();
           centerCameraOnPosition(camera, pickedPos);
-          const renderWindow = genericRenderWindow.getRenderWindow();
+          const renderWindow = genericRenderWindow.value.getRenderWindow();
           renderWindow.render();
-          hybridViewerStore.syncRemoteCamera();
+          syncRemoteCamera();
         }
       },
     },
@@ -59,12 +58,16 @@ function performSetContainer(container) {
     return;
   }
 
-  const hybridViewerStore = useHybridViewerStore();
-  const genericRenderWindow = hybridViewerStore.genericRenderWindow.value;
-  const { is_picking, is_moving } = hybridViewerStore;
+  const {
+    genericRenderWindow,
+    is_picking,
+    is_moving,
+    syncRemoteCamera,
+    hoverHighlight,
+  } = useHybridViewerStore();
 
-  genericRenderWindow.setContainer(container.value.$el);
-  const webGLRenderWindow = genericRenderWindow.getApiSpecificRenderWindow();
+  genericRenderWindow.value.setContainer(container.value.$el);
+  const webGLRenderWindow = genericRenderWindow.value.getApiSpecificRenderWindow();
   webGLRenderWindow.setUseBackgroundImage(true);
   const imageStyle = webGLRenderWindow.getReferenceByName("bgImage").style;
   Object.assign(imageStyle, { transition: "opacity 0.1s ease-in", zIndex: 1 });
@@ -90,9 +93,9 @@ function performSetContainer(container) {
     onReleased: () => {
       is_moving.value = false;
       if (has_dragged) {
-        const renderer = genericRenderWindow.getRenderer();
+        const renderer = genericRenderWindow.value.getRenderer();
         renderer.resetCameraClippingRange();
-        hybridViewerStore.syncRemoteCamera();
+        syncRemoteCamera();
       }
       has_dragged = false;
     },
@@ -105,8 +108,9 @@ function performSetContainer(container) {
         imageStyle.opacity = 0;
       }
     }
-    hybridViewerStore.hoverHighlight(event);
+    hoverHighlight(event);
   });
+
   let wheelEventEndTimeout = undefined;
   useEventListener(container, "wheel", () => {
     is_moving.value = true;
@@ -116,22 +120,20 @@ function performSetContainer(container) {
     clearTimeout(wheelEventEndTimeout);
     wheelEventEndTimeout = setTimeout(() => {
       is_moving.value = false;
-      const renderer = genericRenderWindow.getRenderer();
+      const renderer = genericRenderWindow.value.getRenderer();
       renderer.resetCameraClippingRange();
-      hybridViewerStore.syncRemoteCamera();
+      syncRemoteCamera();
     }, WHEEL_TIME_OUT_MS);
   });
 }
 
 async function performResize(width, height) {
-  const hybridViewerStore = useHybridViewerStore();
-  const genericRenderWindow = hybridViewerStore.genericRenderWindow.value;
-  const { status, viewStream } = hybridViewerStore;
+  const { genericRenderWindow, status, viewStream, remoteRender } = useHybridViewerStore();
   const viewerStore = useViewerStore();
   if (viewerStore.status !== Status.CONNECTED || status.value !== Status.CREATED) {
     return;
   }
-  const webGLRenderWindow = genericRenderWindow.getApiSpecificRenderWindow();
+  const webGLRenderWindow = genericRenderWindow.value.getApiSpecificRenderWindow();
   const canvas = webGLRenderWindow.getCanvas();
   canvas.width = width;
   canvas.height = height;
@@ -140,9 +142,9 @@ async function performResize(width, height) {
   if (viewStream && viewStream.value) {
     viewStream.value.setSize(width, height);
   }
-  const renderWindow = genericRenderWindow.getRenderWindow();
+  const renderWindow = genericRenderWindow.value.getRenderWindow();
   renderWindow.render();
-  await hybridViewerStore.remoteRender();
+  await remoteRender();
 }
 
 export { performClickPicking, performResize, performSetContainer, useHybridViewerViewport };

From 75c942cc12fea6a8969379a5ddafa19173f3b58e Mon Sep 17 00:00:00 2001
From: MaxNumerique <144453705+MaxNumerique@users.noreply.github.com>
Date: Fri, 14 Aug 2026 09:58:34 +0000
Subject: [PATCH 09/11] Apply prepare changes

---
 internal/stores/hybrid_viewer/highlight.js | 4 +++-
 internal/stores/hybrid_viewer/viewport.js  | 9 ++-------
 2 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/internal/stores/hybrid_viewer/highlight.js b/internal/stores/hybrid_viewer/highlight.js
index 5b9c4cced..d90ead445 100644
--- a/internal/stores/hybrid_viewer/highlight.js
+++ b/internal/stores/hybrid_viewer/highlight.js
@@ -110,7 +110,9 @@ function createHoverHighlight(options = {}) {
 
   return useDebounceFn((event) => {
     const { genericRenderWindow } = useHybridViewerStore();
-    const containerElement = genericRenderWindow.value ? genericRenderWindow.value.getContainer() : undefined;
+    const containerElement = genericRenderWindow.value
+      ? genericRenderWindow.value.getContainer()
+      : undefined;
     let relativeMousePosition = { x: 0, y: 0 };
     if (containerElement) {
       const containerRect = containerElement.getBoundingClientRect();
diff --git a/internal/stores/hybrid_viewer/viewport.js b/internal/stores/hybrid_viewer/viewport.js
index d6466af36..628a7e32b 100644
--- a/internal/stores/hybrid_viewer/viewport.js
+++ b/internal/stores/hybrid_viewer/viewport.js
@@ -58,13 +58,8 @@ function performSetContainer(container) {
     return;
   }
 
-  const {
-    genericRenderWindow,
-    is_picking,
-    is_moving,
-    syncRemoteCamera,
-    hoverHighlight,
-  } = useHybridViewerStore();
+  const { genericRenderWindow, is_picking, is_moving, syncRemoteCamera, hoverHighlight } =
+    useHybridViewerStore();
 
   genericRenderWindow.value.setContainer(container.value.$el);
   const webGLRenderWindow = genericRenderWindow.value.getApiSpecificRenderWindow();

From 3fc82f37351136a0abcffe652ffe8fff4c780b58 Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Fri, 14 Aug 2026 14:32:29 +0200
Subject: [PATCH 10/11] refacto

---
 app/stores/hybrid_viewer.js                 |   4 +-
 internal/stores/hybrid_viewer/brightness.js |   9 +-
 internal/stores/hybrid_viewer/camera.js     |  29 ++-
 internal/stores/hybrid_viewer/highlight.js  | 190 ++++++++------------
 internal/stores/hybrid_viewer/scene.js      |  15 +-
 internal/stores/hybrid_viewer/viewport.js   |  11 +-
 6 files changed, 109 insertions(+), 149 deletions(-)

diff --git a/app/stores/hybrid_viewer.js b/app/stores/hybrid_viewer.js
index 2b0aa2065..1c6a38e82 100644
--- a/app/stores/hybrid_viewer.js
+++ b/app/stores/hybrid_viewer.js
@@ -111,9 +111,11 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
 
   return {
     genericRenderWindow,
+    status,
+    is_moving,
+    is_picking,
     initHybridViewer,
     remoteRender,
-    is_picking,
     exportStores,
     importStores: applySnapshot,
     ...brightnessStore,
diff --git a/internal/stores/hybrid_viewer/brightness.js b/internal/stores/hybrid_viewer/brightness.js
index 204961a10..16007db79 100644
--- a/internal/stores/hybrid_viewer/brightness.js
+++ b/internal/stores/hybrid_viewer/brightness.js
@@ -14,12 +14,10 @@ function useHybridViewerBrightness() {
     : undefined;
 
   function getAverageBrightness(rect) {
-    const { genericRenderWindow } = useHybridViewerStore();
     return computeAverageBrightness(rect, {
       latestImage: latestImage.value,
       offscreenCtx,
       offscreenCanvas,
-      genericRenderWindow: genericRenderWindow.value,
     });
   }
 
@@ -41,11 +39,12 @@ function mapRect(rect, latestImage, canvasRect) {
 }
 
 function computeAverageBrightness(rect, options) {
-  const { latestImage, offscreenCtx, offscreenCanvas, genericRenderWindow } = options;
-  if (!latestImage || !offscreenCtx || !offscreenCanvas || !genericRenderWindow) {
+  const { latestImage, offscreenCtx, offscreenCanvas } = options;
+  const { genericRenderWindow } = useHybridViewerStore();
+  if (!latestImage || !offscreenCtx || !offscreenCanvas || !genericRenderWindow.value) {
     return BACKGROUND_GREY_VALUE / RGB_MAX;
   }
-  const canvas = genericRenderWindow.getApiSpecificRenderWindow().getCanvas();
+  const canvas = genericRenderWindow.value.getApiSpecificRenderWindow().getCanvas();
   if (!canvas) {
     return BACKGROUND_GREY_VALUE / RGB_MAX;
   }
diff --git a/internal/stores/hybrid_viewer/camera.js b/internal/stores/hybrid_viewer/camera.js
index c639f3990..b1154fa90 100644
--- a/internal/stores/hybrid_viewer/camera.js
+++ b/internal/stores/hybrid_viewer/camera.js
@@ -113,7 +113,9 @@ function centerCameraOnPosition(camera, pickedPosition) {
 }
 
 function performSetCamera(targetCameraOptions) {
-  const { genericRenderWindow, is_moving, syncRemoteCamera } = useHybridViewerStore();
+  const hybridViewerStore = useHybridViewerStore();
+  const { genericRenderWindow, syncRemoteCamera } = hybridViewerStore;
+  const { is_moving } = storeToRefs(hybridViewerStore);
   const imageStyle = getImageStyle(genericRenderWindow.value);
   const renderer = genericRenderWindow.value.getRenderer();
   const camera = renderer.getActiveCamera();
@@ -145,7 +147,9 @@ function performSetCamera(targetCameraOptions) {
 }
 
 function performCameraOrientation(orientation) {
-  const { genericRenderWindow, is_moving, syncRemoteCamera } = useHybridViewerStore();
+  const hybridViewerStore = useHybridViewerStore();
+  const { genericRenderWindow, syncRemoteCamera } = hybridViewerStore;
+  const { is_moving } = storeToRefs(hybridViewerStore);
   const imageStyle = getImageStyle(genericRenderWindow.value);
   const config = ORIENTATIONS[orientation.toLowerCase()];
   const renderer = genericRenderWindow.value.getRenderer();
@@ -242,23 +246,12 @@ async function applySnapshot(snapshot) {
   if (!snapshot) {
     return;
   }
-  const { genericRenderWindow, setZScaling, setCamera, syncRemoteCamera } = useHybridViewerStore();
-  const z_scale = snapshot.zScale;
-  if (typeof z_scale === "number") {
-    await setZScaling(z_scale);
+  const { setZScaling, setCamera } = useHybridViewerStore();
+  if (typeof snapshot.zScale === "number") {
+    await setZScaling(snapshot.zScale);
   }
-  const { camera_options: snapshot_camera_options } = snapshot;
-  if (snapshot_camera_options) {
-    if (setCamera) {
-      setCamera(snapshot_camera_options);
-    } else {
-      const renderer = genericRenderWindow.value.getRenderer();
-      const camera = renderer.getActiveCamera();
-      applyCameraOptions(camera, snapshot_camera_options);
-      const renderWindow = genericRenderWindow.value.getRenderWindow();
-      renderWindow.render();
-      syncRemoteCamera();
-    }
+  if (snapshot.camera_options) {
+    setCamera(snapshot.camera_options);
   }
 }
 
diff --git a/internal/stores/hybrid_viewer/highlight.js b/internal/stores/hybrid_viewer/highlight.js
index d90ead445..940e3d75c 100644
--- a/internal/stores/hybrid_viewer/highlight.js
+++ b/internal/stores/hybrid_viewer/highlight.js
@@ -14,15 +14,7 @@ function useHybridViewerHighlight() {
 
   const clearHoverData = createClearHoverData(hoverTimeoutRef, hoverData, currentHoverId);
 
-  const hoverHighlight = createHoverHighlight({
-    is_hover_highlight,
-    hover_highlight_field_type,
-    hoverData,
-    hoverPosition,
-    currentHoverId,
-    hoverTimeoutRef,
-    clearHoverData,
-  });
+  const hoverHighlight = createHoverHighlight({ hoverTimeoutRef, currentHoverId, clearHoverData });
 
   function clearHoverHighlight() {
     clearHoverData();
@@ -39,16 +31,14 @@ function useHybridViewerHighlight() {
   };
 }
 
-function performHoverHighlight(event, options = {}) {
-  const { is_hover_highlight, hover_highlight_field_type, onResponse } = options;
+function performHoverHighlight(event, onResponse) {
+  const hybridViewerStore = useHybridViewerStore();
+  const { genericRenderWindow, hybridDb } = hybridViewerStore;
+  const { is_hover_highlight, hover_highlight_field_type } = storeToRefs(hybridViewerStore);
   if (!is_hover_highlight.value) {
     return;
   }
-  const { genericRenderWindow, hybridDb } = useHybridViewerStore();
-  if (!genericRenderWindow.value) {
-    return;
-  }
-  const container = genericRenderWindow.value.getContainer();
+  const container = genericRenderWindow.value?.getContainer();
   if (!container) {
     return;
   }
@@ -61,27 +51,19 @@ function performHoverHighlight(event, options = {}) {
     field_type: hover_highlight_field_type.value,
     ids: Object.keys(hybridDb),
   };
-  viewerStore.request(
-    {
-      schema,
-      params,
-    },
-    {
-      response_function: onResponse,
-    },
-  );
+  viewerStore.request({ schema, params }, { response_function: onResponse });
 }
 
 function performClearHoverHighlight() {
-  const { hover_highlight_field_type, hybridDb } = useHybridViewerStore();
-  const fieldType = hover_highlight_field_type ? hover_highlight_field_type.value : "CELL";
+  const { hybridDb } = useHybridViewerStore();
+  const { hover_highlight_field_type } = storeToRefs(useHybridViewerStore());
   const viewerStore = useViewerStore();
   const schema = viewer_schemas.opengeodeweb_viewer.viewer.highlight;
   const params = {
     x: -1,
     y: -1,
-    field_type: fieldType,
-    ids: Object.keys(hybridDb || {}),
+    field_type: hover_highlight_field_type.value,
+    ids: Object.keys(hybridDb),
   };
   viewerStore.request({ schema, params });
 }
@@ -97,94 +79,76 @@ function createClearHoverData(hoverTimeoutRef, hoverData, currentHoverId) {
   };
 }
 
-function createHoverHighlight(options = {}) {
-  const {
-    is_hover_highlight,
-    hover_highlight_field_type,
-    hoverData,
-    hoverPosition,
-    currentHoverId,
-    hoverTimeoutRef,
-    clearHoverData,
-  } = options;
-
+function createHoverHighlight({ hoverTimeoutRef, currentHoverId, clearHoverData }) {
   return useDebounceFn((event) => {
-    const { genericRenderWindow } = useHybridViewerStore();
-    const containerElement = genericRenderWindow.value
-      ? genericRenderWindow.value.getContainer()
-      : undefined;
-    let relativeMousePosition = { x: 0, y: 0 };
-    if (containerElement) {
-      const containerRect = containerElement.getBoundingClientRect();
-      relativeMousePosition = {
-        x: event.clientX - containerRect.left,
-        y: event.clientY - containerRect.top,
-      };
-    } else {
-      relativeMousePosition = { x: event.clientX, y: event.clientY };
-    }
-
-    performHoverHighlight(event, {
-      is_hover_highlight,
-      hover_highlight_field_type,
-      onResponse: async (response) => {
-        const isResponseValid =
-          response && response.id && response.picked_id !== undefined && response.picked_id !== -1;
-        if (!is_hover_highlight.value || !isResponseValid) {
-          clearHoverData();
-          return;
+    const hybridViewerStore = useHybridViewerStore();
+    const { genericRenderWindow } = hybridViewerStore;
+    const { is_hover_highlight, hoverData, hoverPosition } = storeToRefs(hybridViewerStore);
+    const containerElement = genericRenderWindow.value?.getContainer();
+    const relativeMousePosition = containerElement
+      ? {
+          x: event.clientX - containerElement.getBoundingClientRect().left,
+          y: event.clientY - containerElement.getBoundingClientRect().top,
         }
-
-        const hoverKey = `${response.id}_${response.field_type}_${response.picked_id}`;
-        if (currentHoverId.value === hoverKey) {
-          return;
-        }
-
-        if (hoverTimeoutRef.value) {
-          clearTimeout(hoverTimeoutRef.value);
-          hoverTimeoutRef.value = undefined;
-        }
-
-        hoverData.value = undefined;
-        currentHoverId.value = hoverKey;
-
-        let componentInfo = undefined;
-        let modelName = undefined;
-
-        const modelRecord = await database.data.get(response.id);
-        if (modelRecord) {
-          modelName = modelRecord.name;
-        }
-
-        if (response.geode_id) {
-          const components = database.model_components.where("[id+geode_id]");
-          const query = components.equals([response.id, response.geode_id]);
-          const component = await query.first();
-          if (component) {
-            componentInfo = {
-              name: component.name,
-              id: component.geode_id,
-              type: component.type,
-            };
-          }
+      : { x: event.clientX, y: event.clientY };
+
+    performHoverHighlight(event, async (response) => {
+      const isResponseValid =
+        response && response.id && response.picked_id !== undefined && response.picked_id !== -1;
+      if (!is_hover_highlight.value || !isResponseValid) {
+        clearHoverData();
+        return;
+      }
+
+      const hoverKey = `${response.id}_${response.field_type}_${response.picked_id}`;
+      if (currentHoverId.value === hoverKey) {
+        return;
+      }
+
+      if (hoverTimeoutRef.value) {
+        clearTimeout(hoverTimeoutRef.value);
+        hoverTimeoutRef.value = undefined;
+      }
+
+      hoverData.value = undefined;
+      currentHoverId.value = hoverKey;
+
+      let componentInfo = undefined;
+      let modelName = undefined;
+
+      const modelRecord = await database.data.get(response.id);
+      if (modelRecord) {
+        modelName = modelRecord.name;
+      }
+
+      if (response.geode_id) {
+        const components = database.model_components.where("[id+geode_id]");
+        const query = components.equals([response.id, response.geode_id]);
+        const component = await query.first();
+        if (component) {
+          componentInfo = {
+            name: component.name,
+            id: component.geode_id,
+            type: component.type,
+          };
         }
+      }
+
+      const newHoverData = {
+        modelId: response.id,
+        modelName,
+        blockName: response.geode_id,
+        pickedId: response.picked_id,
+        fieldType: response.field_type,
+        component: componentInfo,
+        attributes: response.attributes || {},
+      };
 
-        const newHoverData = {
-          modelId: response.id,
-          modelName,
-          blockName: response.geode_id,
-          pickedId: response.picked_id,
-          fieldType: response.field_type,
-          component: componentInfo,
-          attributes: response.attributes || {},
-        };
-
-        hoverTimeoutRef.value = setTimeout(() => {
-          hoverPosition.value = relativeMousePosition;
-          hoverData.value = newHoverData;
-          hoverTimeoutRef.value = undefined;
-        }, HOVER_TIMEOUT_MS);
-      },
+      hoverTimeoutRef.value = setTimeout(() => {
+        hoverPosition.value = relativeMousePosition;
+        hoverData.value = newHoverData;
+        hoverTimeoutRef.value = undefined;
+      }, HOVER_TIMEOUT_MS);
     });
   }, HOVER_DEBOUNCE_MS);
 }
diff --git a/internal/stores/hybrid_viewer/scene.js b/internal/stores/hybrid_viewer/scene.js
index 75bda4885..b6c8eeaad 100644
--- a/internal/stores/hybrid_viewer/scene.js
+++ b/internal/stores/hybrid_viewer/scene.js
@@ -98,10 +98,11 @@ function performSetVisibility(id, visibility) {
 }
 
 async function performSetZScaling(z_scale) {
-  const { genericRenderWindow, zScale, remoteRender } = useHybridViewerStore();
-  if (zScale) {
-    zScale.value = z_scale;
-  }
+  const hybridViewerStore = useHybridViewerStore();
+  const { genericRenderWindow, remoteRender } = hybridViewerStore;
+  const { zScale } = storeToRefs(hybridViewerStore);
+  zScale.value = z_scale;
+
   const renderer = genericRenderWindow.value.getRenderer();
   for (const actor of renderer.getActors()) {
     const scale = actor.getScale();
@@ -125,10 +126,8 @@ function performClear() {
   }
   const renderWindow = genericRenderWindow.value.getRenderWindow();
   renderWindow.render();
-  if (hybridDb) {
-    for (const id of Object.keys(hybridDb)) {
-      delete hybridDb[id];
-    }
+  for (const id of Object.keys(hybridDb)) {
+    delete hybridDb[id];
   }
 }
 
diff --git a/internal/stores/hybrid_viewer/viewport.js b/internal/stores/hybrid_viewer/viewport.js
index 628a7e32b..9620880bd 100644
--- a/internal/stores/hybrid_viewer/viewport.js
+++ b/internal/stores/hybrid_viewer/viewport.js
@@ -58,8 +58,9 @@ function performSetContainer(container) {
     return;
   }
 
-  const { genericRenderWindow, is_picking, is_moving, syncRemoteCamera, hoverHighlight } =
-    useHybridViewerStore();
+  const hybridViewerStore = useHybridViewerStore();
+  const { genericRenderWindow, syncRemoteCamera, hoverHighlight } = hybridViewerStore;
+  const { is_picking, is_moving } = storeToRefs(hybridViewerStore);
 
   genericRenderWindow.value.setContainer(container.value.$el);
   const webGLRenderWindow = genericRenderWindow.value.getApiSpecificRenderWindow();
@@ -123,7 +124,9 @@ function performSetContainer(container) {
 }
 
 async function performResize(width, height) {
-  const { genericRenderWindow, status, viewStream, remoteRender } = useHybridViewerStore();
+  const hybridViewerStore = useHybridViewerStore();
+  const { genericRenderWindow, remoteRender } = hybridViewerStore;
+  const { status, viewStream } = storeToRefs(hybridViewerStore);
   const viewerStore = useViewerStore();
   if (viewerStore.status !== Status.CONNECTED || status.value !== Status.CREATED) {
     return;
@@ -134,7 +137,7 @@ async function performResize(width, height) {
   canvas.height = height;
   await nextTick();
   webGLRenderWindow.setSize(width, height);
-  if (viewStream && viewStream.value) {
+  if (viewStream.value) {
     viewStream.value.setSize(width, height);
   }
   const renderWindow = genericRenderWindow.value.getRenderWindow();

From 3f702b902fb3fb3730db86d420660e31d9beb65d Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Fri, 14 Aug 2026 14:34:59 +0200
Subject: [PATCH 11/11] imageStyle

---
 internal/stores/hybrid_viewer/camera.js | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/internal/stores/hybrid_viewer/camera.js b/internal/stores/hybrid_viewer/camera.js
index b1154fa90..8f64381fd 100644
--- a/internal/stores/hybrid_viewer/camera.js
+++ b/internal/stores/hybrid_viewer/camera.js
@@ -22,11 +22,12 @@ const ORIENTATIONS = {
   xminus: { position: [-1, 0, 0], view_up: [0, 0, 1] },
 };
 
-function getImageStyle(genericRenderWindow) {
-  if (!genericRenderWindow) {
+function getImageStyle() {
+  const { genericRenderWindow } = useHybridViewerStore();
+  if (!genericRenderWindow.value) {
     return undefined;
   }
-  const webGLRenderWindow = genericRenderWindow.getApiSpecificRenderWindow();
+  const webGLRenderWindow = genericRenderWindow.value.getApiSpecificRenderWindow();
   if (!webGLRenderWindow) {
     return undefined;
   }
@@ -116,7 +117,7 @@ function performSetCamera(targetCameraOptions) {
   const hybridViewerStore = useHybridViewerStore();
   const { genericRenderWindow, syncRemoteCamera } = hybridViewerStore;
   const { is_moving } = storeToRefs(hybridViewerStore);
-  const imageStyle = getImageStyle(genericRenderWindow.value);
+  const imageStyle = getImageStyle();
   const renderer = genericRenderWindow.value.getRenderer();
   const camera = renderer.getActiveCamera();
   const startState = getCameraOptions(camera);
@@ -150,7 +151,7 @@ function performCameraOrientation(orientation) {
   const hybridViewerStore = useHybridViewerStore();
   const { genericRenderWindow, syncRemoteCamera } = hybridViewerStore;
   const { is_moving } = storeToRefs(hybridViewerStore);
-  const imageStyle = getImageStyle(genericRenderWindow.value);
+  const imageStyle = getImageStyle();
   const config = ORIENTATIONS[orientation.toLowerCase()];
   const renderer = genericRenderWindow.value.getRenderer();
   const camera = renderer.getActiveCamera();