@geode/opengeodeweb-front 10.34.0-rc.8 → 10.34.0

package/internal/stores/hybrid_viewer/highlight.ts

@@ -1,95 +1,80 @@
-// Not auto-fixable (eslint's sort-imports core rule has no autofixer) and this file's import order doesn't match its syntax-kind-then-alphabetical requirement - left as-is rather than manually reordered across the codebase for a purely cosmetic rule.
-// oxlint-disable eslint/sort-imports
 import { HOVER_DEBOUNCE_MS, HOVER_TIMEOUT_MS } from "./constants";
+import type { HoverComponentInfo, HoverData } from "./vtk_types";
+import type { IndexableType } from "dexie";
 import { database } from "@ogw_internal/database/database.js";
-import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
+import { useHybridViewerCore } from "./core";
+import { useHybridViewerScene } from "./scene";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
-import type { IndexableType } from "dexie";
-import type { Ref } from "vue";
-import type { HoverComponentInfo, HoverData, HybridViewerStorePublic } from "./vtk_types";
 
 // The dynamic/RPC-shaped payload of the viewer's "highlight" schema response.
 interface HighlightResponse {
   id?: string;
   picked_id?: number;
   field_type?: string;
-  geode_id?: string;
+  geode_id?: string | null;
   attributes?: Record<string, unknown>;
 }
 
-function createClearHoverData(
-  hoverTimeoutRef: Ref<ReturnType<typeof setTimeout> | undefined>,
-  hoverData: Ref<HoverData | undefined>,
-  currentHoverId: Ref<string | undefined>,
-) {
-  return function clearHoverData(): void {
+// Shared via createSharedComposable (rather than merged into the parent hybridViewer store) so sibling slices, e.g. ruler.ts and viewport.ts, can read hover state/clearHoverHighlight/hoverHighlight directly without importing the parent store and creating a cycle. A Pinia store would work too but its $id/$patch/... properties would leak into the composed store's spread and collapse its inferred type.
+const useHybridViewerHighlight = createSharedComposable(() => {
+  const is_hover_highlight = ref(false);
+  const hover_highlight_field_type = ref("CELL");
+  const hoverData = ref<HoverData | undefined>(undefined);
+  const hoverPosition = ref({
+    x: 0,
+    y: 0,
+  });
+  const hoverTimeoutRef = ref<ReturnType<typeof setTimeout> | undefined>(undefined);
+  const currentHoverId = ref<string | undefined>(undefined);
+
+  function clearHoverData(): void {
     if (hoverTimeoutRef.value) {
       clearTimeout(hoverTimeoutRef.value);
       hoverTimeoutRef.value = undefined;
     }
     hoverData.value = undefined;
     currentHoverId.value = undefined;
-  };
-}
-
-function performHoverHighlight(
-  event: MouseEvent,
-  onResponse: (response: unknown) => void | Promise<void>,
-): void {
-  const hybridViewerStore = useHybridViewerStore();
-  const { genericRenderWindow, hybridDb } = hybridViewerStore as unknown as HybridViewerStorePublic;
-  const { is_hover_highlight, hover_highlight_field_type } = storeToRefs(
-    hybridViewerStore,
-  ) as unknown as { is_hover_highlight: Ref<boolean>; hover_highlight_field_type: Ref<string> };
-  if (!is_hover_highlight.value) {
-    return;
-  }
-  const container = genericRenderWindow.value?.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),
-  };
-  viewerStore.request(
-    {
-      schema,
-      params,
-    },
-    {
-      response_function: onResponse,
-    },
-  );
-}
 
-interface CreateHoverHighlightParams {
-  hoverTimeoutRef: Ref<ReturnType<typeof setTimeout> | undefined>;
-  currentHoverId: Ref<string | undefined>;
-  clearHoverData: () => void;
-}
-
-function createHoverHighlight({
-  hoverTimeoutRef,
-  currentHoverId,
-  clearHoverData,
-}: CreateHoverHighlightParams) {
-  return useDebounceFn((event: MouseEvent) => {
-    const hybridViewerStore = useHybridViewerStore();
-    const { genericRenderWindow } = hybridViewerStore as unknown as HybridViewerStorePublic;
-    const { is_hover_highlight, hoverData, hoverPosition } = storeToRefs(
-      hybridViewerStore,
-    ) as unknown as {
-      is_hover_highlight: Ref<boolean>;
-      hoverData: Ref<HoverData | undefined>;
-      hoverPosition: Ref<{ x: number; y: number }>;
+  function requestHoverHighlight(
+    event: MouseEvent,
+    onResponse: (response: unknown) => void | Promise<void>,
+  ): void {
+    if (!is_hover_highlight.value) {
+      return;
+    }
+    const { genericRenderWindow } = useHybridViewerCore();
+    const { hybridDb } = useHybridViewerScene();
+    const container = genericRenderWindow.value?.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),
     };
+    viewerStore
+      .request(
+        {
+          schema,
+          params,
+        },
+        {
+          response_function: onResponse,
+        },
+      )
+      // oxlint-disable-next-line promise/prefer-await-to-then -- fire-and-forget inside a sync caller; see codebase convention in global_attribute_style.ts.
+      .catch(() => undefined);
+  }
+
+  const hoverHighlight = useDebounceFn((event: MouseEvent) => {
+    const { genericRenderWindow } = useHybridViewerCore();
     const containerElement = genericRenderWindow.value?.getContainer();
     const relativeMousePosition = containerElement
       ? {
@@ -100,11 +85,16 @@ function createHoverHighlight({
           x: event.clientX,
           y: event.clientY,
         };
-    performHoverHighlight(event, async (rawResponse: unknown) => {
+    requestHoverHighlight(event, async (rawResponse: unknown) => {
+      // oxlint-disable-next-line no-unsafe-type-assertion -- trusted viewer RPC response boundary.
       const response = rawResponse as HighlightResponse | undefined;
-      const isResponseValid =
-        response && response.id && response.picked_id !== undefined && response.picked_id !== -1;
-      if (!is_hover_highlight.value || !isResponseValid) {
+      if (
+        !is_hover_highlight.value ||
+        response === undefined ||
+        response.id === undefined ||
+        response.picked_id === undefined ||
+        response.picked_id === -1
+      ) {
         clearHoverData();
         return;
       }
@@ -120,19 +110,14 @@ function createHoverHighlight({
       currentHoverId.value = hoverKey;
       let componentInfo: HoverComponentInfo | undefined = undefined;
       let modelName: string | undefined = undefined;
-      const modelRecord = (await database.data?.get(response.id as string)) as
-        | { name?: string }
-        | undefined;
+      const modelRecord = (await database.data?.get(response.id)) as { name?: string } | undefined;
       if (modelRecord) {
         modelName = modelRecord.name;
       }
       const modelComponentsTable = database.model_components;
-      if (response.geode_id && modelComponentsTable) {
+      if (response.geode_id !== undefined && response.geode_id !== null && modelComponentsTable) {
         const components = modelComponentsTable.where("[id+geode_id]");
-        const query = components.equals([
-          response.id as string,
-          response.geode_id,
-        ] as IndexableType);
+        const query = components.equals([response.id, response.geode_id] as IndexableType);
         const component = (await query.first()) as
           | { name?: string; geode_id?: string; type?: string }
           | undefined;
@@ -145,13 +130,13 @@ function createHoverHighlight({
         }
       }
       const newHoverData: HoverData = {
-        modelId: response.id as string,
+        modelId: response.id,
         modelName,
-        blockName: response.geode_id,
+        blockName: response.geode_id ?? undefined,
         pickedId: response.picked_id,
         fieldType: response.field_type,
         component: componentInfo,
-        attributes: response.attributes || {},
+        attributes: response.attributes ?? {},
       };
       hoverTimeoutRef.value = setTimeout(() => {
         hoverPosition.value = relativeMousePosition;
@@ -160,47 +145,29 @@ function createHoverHighlight({
       }, HOVER_TIMEOUT_MS);
     });
   }, HOVER_DEBOUNCE_MS);
-}
-function performClearHoverHighlight(): void {
-  const hybridViewerStore = useHybridViewerStore();
-  const { hybridDb } = hybridViewerStore as unknown as HybridViewerStorePublic;
-  const { hover_highlight_field_type } = storeToRefs(hybridViewerStore) as unknown as {
-    hover_highlight_field_type: Ref<string>;
-  };
-  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),
-  };
-  viewerStore.request({
-    schema,
-    params,
-  });
-}
 
-function useHybridViewerHighlight() {
-  const is_hover_highlight = ref(false);
-  const hover_highlight_field_type = ref("CELL");
-  const hoverData = ref<HoverData | undefined>(undefined);
-  const hoverPosition = ref({
-    x: 0,
-    y: 0,
-  });
-  const hoverTimeoutRef = ref<ReturnType<typeof setTimeout> | undefined>(undefined);
-  const currentHoverId = ref<string | undefined>(undefined);
-  const clearHoverData = createClearHoverData(hoverTimeoutRef, hoverData, currentHoverId);
-  const hoverHighlight = createHoverHighlight({
-    hoverTimeoutRef,
-    currentHoverId,
-    clearHoverData,
-  });
+  function requestClearHoverHighlight(): void {
+    const { hybridDb } = useHybridViewerScene();
+    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),
+    };
+    viewerStore
+      .request({
+        schema,
+        params,
+      })
+      // oxlint-disable-next-line promise/prefer-await-to-then -- fire-and-forget inside a sync caller; see codebase convention in global_attribute_style.ts.
+      .catch(() => undefined);
+  }
 
   function clearHoverHighlight(): void {
     clearHoverData();
-    performClearHoverHighlight();
+    requestClearHoverHighlight();
   }
 
   return {
@@ -211,12 +178,6 @@ function useHybridViewerHighlight() {
     clearHoverHighlight,
     hoverHighlight,
   };
-}
+});
 
-export {
-  createClearHoverData,
-  createHoverHighlight,
-  performClearHoverHighlight,
-  performHoverHighlight,
-  useHybridViewerHighlight,
-};
+export { useHybridViewerHighlight };

package/internal/stores/hybrid_viewer/ruler.ts

@@ -1,17 +1,26 @@
-// Not auto-fixable (eslint's sort-imports core rule has no autofixer) and this file's import order doesn't match its syntax-kind-then-alphabetical requirement - left as-is rather than manually reordered across the codebase for a purely cosmetic rule.
-// oxlint-disable eslint/sort-imports
-import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
+import { useHybridViewerCore } from "./core";
+import { useHybridViewerHighlight } from "./highlight";
+import { useHybridViewerScene } from "./scene";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
-import type { Ref } from "vue";
-import type { HybridViewerStorePublic } from "./vtk_types";
 
 interface RulerHoverState {
   active: boolean;
   fieldType: string;
 }
 
-function useHybridViewerRuler() {
+function useHybridViewerRuler(): {
+  is_ruler_active: Ref<boolean>;
+  ruler_snap: Ref<boolean>;
+  ruler_point1: Ref<number[] | undefined>;
+  ruler_point2: Ref<number[] | undefined>;
+  ruler_distance: Ref<number | undefined>;
+  ruler_awaiting_point: Ref<number>;
+  handleRulerClick: (x: number, y: number) => Promise<void>;
+  applyRuler: () => Promise<void>;
+  clearRuler: () => Promise<void>;
+  deactivateRuler: () => void;
+} {
   const is_ruler_active = ref(false);
   const ruler_snap = ref(false);
   const ruler_point1 = ref<number[] | undefined>(undefined);
@@ -21,11 +30,8 @@ function useHybridViewerRuler() {
   const ruler_previous_hover_state = ref<RulerHoverState>({ active: false, fieldType: "CELL" });
 
   function updateRulerSnapHighlight(): void {
-    const hybridViewerStore = useHybridViewerStore();
-    const { is_hover_highlight, hover_highlight_field_type } = storeToRefs(
-      hybridViewerStore,
-    ) as unknown as { is_hover_highlight: Ref<boolean>; hover_highlight_field_type: Ref<string> };
-    const { clearHoverHighlight } = hybridViewerStore as unknown as HybridViewerStorePublic;
+    const { is_hover_highlight, hover_highlight_field_type, clearHoverHighlight } =
+      useHybridViewerHighlight();
 
     if (is_ruler_active.value && ruler_snap.value) {
       ruler_previous_hover_state.value = {
@@ -52,9 +58,10 @@ function useHybridViewerRuler() {
     const points = ruler_point2.value
       ? [ruler_point1.value, ruler_point2.value]
       : [ruler_point1.value];
-    const { remoteRender } = useHybridViewerStore() as unknown as HybridViewerStorePublic;
+    const { remoteRender } = useHybridViewerCore();
     const viewerStore = useViewerStore();
     const schema = viewer_schemas.opengeodeweb_viewer.viewer.ruler;
+    // oxlint-disable-next-line no-unsafe-type-assertion -- response shape is defined by the ruler schema.
     const response = (await viewerStore.request({ schema, params: { points } })) as {
       distance?: number;
     };
@@ -63,7 +70,7 @@ function useHybridViewerRuler() {
   }
 
   async function handleRulerClick(x: number, y: number): Promise<void> {
-    const { hybridDb } = useHybridViewerStore() as unknown as HybridViewerStorePublic;
+    const { hybridDb } = useHybridViewerScene();
     const viewerStore = useViewerStore();
     let coords: number[] | undefined = undefined;
     if (ruler_snap.value) {
@@ -74,6 +81,7 @@ function useHybridViewerRuler() {
         field_type: "POINT",
         ids: Object.keys(hybridDb),
       };
+      // oxlint-disable-next-line no-unsafe-type-assertion -- response shape is defined by the highlight schema.
       const response = (await viewerStore.request({ schema, params })) as {
         attributes?: { coordinates?: number[] };
       };
@@ -81,6 +89,7 @@ function useHybridViewerRuler() {
     } else {
       const schema = viewer_schemas.opengeodeweb_viewer.viewer.get_point_position;
       const params = { x: Math.round(x), y: Math.round(y) };
+      // oxlint-disable-next-line no-unsafe-type-assertion -- response shape is defined by the get_point_position schema.
       const response = (await viewerStore.request({ schema, params })) as {
         x: number;
         y: number;
@@ -105,7 +114,7 @@ function useHybridViewerRuler() {
   }
 
   function deactivateRuler(): void {
-    const { clearHoverHighlight } = useHybridViewerStore() as unknown as HybridViewerStorePublic;
+    const { clearHoverHighlight } = useHybridViewerHighlight();
     is_ruler_active.value = false;
     clearHoverHighlight();
   }
@@ -116,7 +125,7 @@ function useHybridViewerRuler() {
     ruler_distance.value = undefined;
     ruler_awaiting_point.value = 1;
     deactivateRuler();
-    const { remoteRender } = useHybridViewerStore() as unknown as HybridViewerStorePublic;
+    const { remoteRender } = useHybridViewerCore();
     const viewerStore = useViewerStore();
     const schema = viewer_schemas.opengeodeweb_viewer.viewer.reset_ruler;
     await viewerStore.request({ schema });

package/internal/stores/hybrid_viewer/scene.ts

@@ -1,131 +1,116 @@
-// Not auto-fixable (eslint's sort-imports core rule has no autofixer) and this file's import order doesn't match its syntax-kind-then-alphabetical requirement - left as-is rather than manually reordered across the codebase for a purely cosmetic rule.
-// oxlint-disable eslint/sort-imports
+import type { HybridDb, vtkActor as VtkActorInstance } from "./vtk_types";
+import { requireRenderWindow, useHybridViewerCore } from "./core";
 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 type vtkPolyData from "@kitware/vtk.js/Common/DataModel/PolyData";
 import { newInstance as vtkXMLPolyDataReader } from "@kitware/vtk.js/IO/XML/XMLPolyDataReader";
-import type { HybridDb, HybridViewerStorePublic, vtkActor as VtkActorInstance } from "./vtk_types";
 
-async function performAddItem(id: string): Promise<void> {
-  const { genericRenderWindow, hybridDb } =
-    useHybridViewerStore() as unknown as HybridViewerStorePublic;
-  if (!genericRenderWindow.value) {
-    return;
-  }
-  const dataStore = useDataStore();
-  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 as string).buffer as ArrayBuffer,
-  );
-  const actor = vtkActor();
-  const mapper = vtkMapper();
-  const polydata = reader.getOutputData(0);
-  mapper.setInputData(polydata);
-  const property = actor.getProperty();
-  property.setColor(ACTOR_COLOR);
-  actor.setMapper(mapper);
-  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;
-  renderer.addActor(actor);
-  if (isFirst) {
-    renderer.resetCamera();
-  }
-  hybridDb[id] = {
-    actor,
-    polydata,
-    mapper,
-  };
-}
-function performRemoveItem(id: string): void {
-  const { genericRenderWindow, hybridDb } =
-    useHybridViewerStore() as unknown as HybridViewerStorePublic;
-  if (!hybridDb[id]) {
-    return;
-  }
-  const renderer = genericRenderWindow.value!.getRenderer();
-  renderer.removeActor(hybridDb[id]!.actor);
-  const renderWindow = genericRenderWindow.value!.getRenderWindow();
-  renderWindow.render();
-  delete hybridDb[id];
-}
-function performSetVisibility(id: string, visibility: boolean): void {
-  const { genericRenderWindow, hybridDb } =
-    useHybridViewerStore() as unknown as HybridViewerStorePublic;
-  if (!hybridDb[id]) {
-    return;
-  }
-  hybridDb[id]!.actor.setVisibility(visibility);
-  const renderWindow = genericRenderWindow.value!.getRenderWindow();
-  renderWindow.render();
-}
-async function performSetZScaling(z_scale: number): Promise<void> {
-  const hybridViewerStore = useHybridViewerStore();
-  const { genericRenderWindow, remoteRender } =
-    hybridViewerStore as unknown as HybridViewerStorePublic;
-  const { zScale } = storeToRefs(hybridViewerStore) as unknown as { zScale: Ref<number> };
-  zScale.value = z_scale;
-  const renderer = genericRenderWindow.value!.getRenderer();
-  for (const actor of renderer.getActors() as VtkActorInstance[]) {
-    const scale = actor.getScale();
-    actor.setScale(scale[0] ?? 1, scale[1] ?? 1, z_scale);
-  }
-  renderer.resetCamera();
-  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 remoteRender();
-}
-function performClear(): void {
-  const { genericRenderWindow, hybridDb } =
-    useHybridViewerStore() as unknown as HybridViewerStorePublic;
-  const renderer = genericRenderWindow.value!.getRenderer();
-  for (const actor of renderer.getActors()) {
-    renderer.removeActor(actor);
-  }
-  const renderWindow = genericRenderWindow.value!.getRenderWindow();
-  renderWindow.render();
-  for (const id of Object.keys(hybridDb)) {
-    delete hybridDb[id];
-  }
-}
-function useHybridViewerScene() {
+// Shared via createSharedComposable (rather than merged into the parent hybridViewer store) so sibling slices, e.g. camera.ts and ruler.ts, can read hybridDb/setZScaling directly without importing the parent store and creating a cycle. A Pinia store would work too but its $id/$patch/... properties would leak into the composed store's spread and collapse its inferred type.
+const useHybridViewerScene = createSharedComposable(() => {
   const hybridDb = reactive<HybridDb>({});
   const zScale = ref(1);
+
   async function addItem(id: string): Promise<void> {
-    await performAddItem(id);
+    const { genericRenderWindow } = useHybridViewerCore();
+    if (!genericRenderWindow.value) {
+      return;
+    }
+    const dataStore = useDataStore();
+    const isViewable = await dataStore.isItemViewable(id);
+    if (!isViewable) {
+      return;
+    }
+    const value = await dataStore.item(id);
+    const reader = vtkXMLPolyDataReader();
+    reader.parseAsArrayBuffer(new TextEncoder().encode(value.binary_light_viewable).buffer);
+    const actor = vtkActor();
+    const mapper = vtkMapper();
+    // oxlint-disable-next-line no-unsafe-type-assertion -- vtk.js's algorithm interface types getOutputData as `any`; this reader always produces polydata.
+    const polydata = reader.getOutputData(0) as unknown as vtkPolyData;
+    mapper.setInputData(polydata);
+    const property = actor.getProperty();
+    property.setColor(ACTOR_COLOR);
+    actor.setMapper(mapper);
+    const renderer = genericRenderWindow.value.getRenderer();
+    if (hybridDb[id]) {
+      renderer.removeActor(hybridDb[id].actor);
+    }
+    const actors = renderer.getActors();
+    const isFirst = actors.length === 0;
+    renderer.addActor(actor);
+    if (isFirst) {
+      renderer.resetCamera();
+    }
+    hybridDb[id] = {
+      actor,
+      polydata,
+      mapper,
+    };
   }
+
   function removeItem(id: string): void {
-    performRemoveItem(id);
+    const { genericRenderWindow } = useHybridViewerCore();
+    if (!hybridDb[id]) {
+      return;
+    }
+    const renderer = requireRenderWindow(genericRenderWindow).getRenderer();
+    renderer.removeActor(hybridDb[id].actor);
+    const renderWindow = requireRenderWindow(genericRenderWindow).getRenderWindow();
+    renderWindow.render();
+    Reflect.deleteProperty(hybridDb, id);
   }
+
   function setVisibility(id: string, visibility: boolean): void {
-    performSetVisibility(id, visibility);
+    const { genericRenderWindow } = useHybridViewerCore();
+    if (!hybridDb[id]) {
+      return;
+    }
+    hybridDb[id].actor.setVisibility(visibility);
+    const renderWindow = requireRenderWindow(genericRenderWindow).getRenderWindow();
+    renderWindow.render();
   }
+
   async function setZScaling(z_scale: number): Promise<void> {
-    await performSetZScaling(z_scale);
+    const { genericRenderWindow, remoteRender } = useHybridViewerCore();
+    zScale.value = z_scale;
+    const renderer = requireRenderWindow(genericRenderWindow).getRenderer();
+    // oxlint-disable-next-line no-unsafe-type-assertion -- renderer.getActors() is typed as vtkProp[] in vtk.js, but this scene only ever adds vtkActor instances.
+    for (const actor of renderer.getActors() as VtkActorInstance[]) {
+      const scale = actor.getScale();
+      actor.setScale(scale[0] ?? 1, scale[1] ?? 1, z_scale);
+    }
+    renderer.resetCamera();
+    const renderWindow = requireRenderWindow(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,
+    });
+    await remoteRender();
   }
+
   function clear(): void {
-    performClear();
+    const { genericRenderWindow } = useHybridViewerCore();
+    const renderer = requireRenderWindow(genericRenderWindow).getRenderer();
+    for (const actor of renderer.getActors()) {
+      renderer.removeActor(actor);
+    }
+    const renderWindow = requireRenderWindow(genericRenderWindow).getRenderWindow();
+    renderWindow.render();
+    for (const id of Object.keys(hybridDb)) {
+      Reflect.deleteProperty(hybridDb, id);
+    }
   }
+
   return {
     hybridDb,
     zScale,
@@ -135,12 +120,6 @@ function useHybridViewerScene() {
     setZScaling,
     clear,
   };
-}
-export {
-  performAddItem,
-  performClear,
-  performRemoveItem,
-  performSetVisibility,
-  performSetZScaling,
-  useHybridViewerScene,
-};
+});
+
+export { useHybridViewerScene };