@geode/opengeodeweb-front 10.34.0-rc.2 → 10.34.0-rc.21

package/internal/stores/hybrid_viewer/highlight.ts

@@ -0,0 +1,183 @@
+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 { 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";
+
+// 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 | null;
+  attributes?: Record<string, unknown>;
+}
+
+// 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 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
+      ? {
+          x: event.clientX - containerElement.getBoundingClientRect().left,
+          y: event.clientY - containerElement.getBoundingClientRect().top,
+        }
+      : {
+          x: event.clientX,
+          y: event.clientY,
+        };
+    requestHoverHighlight(event, async (rawResponse: unknown) => {
+      // oxlint-disable-next-line no-unsafe-type-assertion -- trusted viewer RPC response boundary.
+      const response = rawResponse as HighlightResponse | undefined;
+      if (
+        !is_hover_highlight.value ||
+        response === undefined ||
+        response.id === undefined ||
+        response.picked_id === undefined ||
+        response.picked_id === -1
+      ) {
+        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: HoverComponentInfo | undefined = undefined;
+      let modelName: string | undefined = 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 !== undefined && response.geode_id !== null && modelComponentsTable) {
+        const components = modelComponentsTable.where("[id+geode_id]");
+        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;
+        if (component) {
+          componentInfo = {
+            name: component.name ?? "",
+            id: component.geode_id ?? "",
+            type: component.type ?? "",
+          };
+        }
+      }
+      const newHoverData: HoverData = {
+        modelId: response.id,
+        modelName,
+        blockName: response.geode_id ?? undefined,
+        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);
+    });
+  }, HOVER_DEBOUNCE_MS);
+
+  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();
+    requestClearHoverHighlight();
+  }
+
+  return {
+    is_hover_highlight,
+    hover_highlight_field_type,
+    hoverData,
+    hoverPosition,
+    clearHoverHighlight,
+    hoverHighlight,
+  };
+});
+
+export { useHybridViewerHighlight };

package/internal/stores/hybrid_viewer/{ruler.js → ruler.ts}

@@ -1,20 +1,37 @@
-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";
 
-function useHybridViewerRuler() {
+interface RulerHoverState {
+  active: boolean;
+  fieldType: string;
+}
+
+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(undefined);
-  const ruler_point2 = ref(undefined);
-  const ruler_distance = ref(undefined);
+  const ruler_point1 = ref<number[] | undefined>(undefined);
+  const ruler_point2 = ref<number[] | undefined>(undefined);
+  const ruler_distance = ref<number | undefined>(undefined);
   const ruler_awaiting_point = ref(1);
-  const ruler_previous_hover_state = ref({ active: false, fieldType: "CELL" });
+  const ruler_previous_hover_state = ref<RulerHoverState>({ active: false, fieldType: "CELL" });
 
-  function updateRulerSnapHighlight() {
-    const hybridViewerStore = useHybridViewerStore();
-    const { is_hover_highlight, hover_highlight_field_type } = storeToRefs(hybridViewerStore);
-    const { clearHoverHighlight } = hybridViewerStore;
+  function updateRulerSnapHighlight(): void {
+    const { is_hover_highlight, hover_highlight_field_type, clearHoverHighlight } =
+      useHybridViewerHighlight();
 
     if (is_ruler_active.value && ruler_snap.value) {
       ruler_previous_hover_state.value = {
@@ -34,25 +51,28 @@ function useHybridViewerRuler() {
 
   watch([is_ruler_active, ruler_snap], updateRulerSnapHighlight);
 
-  async function applyRuler() {
+  async function applyRuler(): Promise<void> {
     if (!ruler_point1.value) {
       return;
     }
     const points = ruler_point2.value
       ? [ruler_point1.value, ruler_point2.value]
       : [ruler_point1.value];
-    const { remoteRender } = useHybridViewerStore();
+    const { remoteRender } = useHybridViewerCore();
     const viewerStore = useViewerStore();
     const schema = viewer_schemas.opengeodeweb_viewer.viewer.ruler;
-    const response = await viewerStore.request({ schema, params: { points } });
+    // 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;
+    };
     ruler_distance.value = response.distance;
     await remoteRender();
   }
 
-  async function handleRulerClick(x, y) {
-    const { hybridDb } = useHybridViewerStore();
+  async function handleRulerClick(x: number, y: number): Promise<void> {
+    const { hybridDb } = useHybridViewerScene();
     const viewerStore = useViewerStore();
-    let coords = undefined;
+    let coords: number[] | undefined = undefined;
     if (ruler_snap.value) {
       const schema = viewer_schemas.opengeodeweb_viewer.viewer.highlight;
       const params = {
@@ -61,12 +81,20 @@ function useHybridViewerRuler() {
         field_type: "POINT",
         ids: Object.keys(hybridDb),
       };
-      const response = await viewerStore.request({ schema, params });
+      // 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[] };
+      };
       coords = response.attributes?.coordinates;
     } else {
       const schema = viewer_schemas.opengeodeweb_viewer.viewer.get_point_position;
       const params = { x: Math.round(x), y: Math.round(y) };
-      const response = await viewerStore.request({ schema, params });
+      // 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;
+        z: number;
+      };
       coords = [response.x, response.y, response.z];
     }
     if (!coords) {
@@ -85,19 +113,19 @@ function useHybridViewerRuler() {
     await applyRuler();
   }
 
-  function deactivateRuler() {
-    const { clearHoverHighlight } = useHybridViewerStore();
+  function deactivateRuler(): void {
+    const { clearHoverHighlight } = useHybridViewerHighlight();
     is_ruler_active.value = false;
     clearHoverHighlight();
   }
 
-  async function clearRuler() {
+  async function clearRuler(): Promise<void> {
     ruler_point1.value = undefined;
     ruler_point2.value = undefined;
     ruler_distance.value = undefined;
     ruler_awaiting_point.value = 1;
     deactivateRuler();
-    const { remoteRender } = useHybridViewerStore();
+    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

@@ -0,0 +1,125 @@
+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 { 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";
+
+// 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> {
+    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 {
+    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 {
+    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> {
+    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 {
+    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,
+    addItem,
+    removeItem,
+    setVisibility,
+    setZScaling,
+    clear,
+  };
+});
+
+export { useHybridViewerScene };

package/internal/stores/hybrid_viewer/viewport.ts

@@ -0,0 +1,177 @@
+import type { Vector3, ViewStreamLike } from "./vtk_types";
+import { centerCameraOnPosition, useHybridViewerCamera } from "./camera";
+import { Status } from "@ogw_front/utils/status";
+import { WHEEL_TIME_OUT_MS } from "./constants";
+import { useHybridViewerCore } from "./core";
+import { useHybridViewerHighlight } from "./highlight";
+import { useViewerStore } from "@ogw_front/stores/viewer";
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
+
+type ContainerRef = Ref<{ $el: HTMLElement } | undefined>;
+
+interface HybridViewerViewport {
+  setContainer: (container: ContainerRef | undefined) => void;
+  resize: (width: number, height: number) => Promise<void>;
+  viewStream: Ref<ViewStreamLike | undefined>;
+}
+
+async function resize(width: number, height: number): Promise<void> {
+  const { genericRenderWindow, remoteRender, status, viewStream } = useHybridViewerCore();
+  const viewerStore = useViewerStore();
+  if (viewerStore.status !== Status.CONNECTED || status.value !== Status.CREATED) {
+    return;
+  }
+  const renderWindow = genericRenderWindow.value;
+  if (!renderWindow) {
+    return;
+  }
+  // oxlint-disable-next-line no-unsafe-assignment -- vtk.js has no types for getApiSpecificRenderWindow(); narrowed below.
+  const webGLRenderWindow = renderWindow.getApiSpecificRenderWindow();
+  // oxlint-disable-next-line no-unsafe-type-assertion -- trusted vtk.js OpenGL render window API boundary.
+  const openGLRenderWindow = webGLRenderWindow as unknown as {
+    getCanvas: () => HTMLCanvasElement;
+    setSize: (width: number, height: number) => void;
+  };
+  const canvas = openGLRenderWindow.getCanvas();
+  canvas.width = width;
+  canvas.height = height;
+  await nextTick();
+  openGLRenderWindow.setSize(width, height);
+  if (viewStream.value) {
+    viewStream.value.setSize(width, height);
+  }
+  renderWindow.getRenderWindow().render();
+  await remoteRender();
+}
+
+function performClickPicking(event: MouseEvent, containerElement: HTMLElement): void {
+  const { genericRenderWindow } = useHybridViewerCore();
+  const { syncRemoteCamera } = useHybridViewerCamera();
+  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),
+    y: Math.round(rect.height - (event.clientY - rect.top)),
+  };
+  void viewerStore.request(
+    {
+      schema,
+      params,
+    },
+    {
+      response_function: (response: unknown) => {
+        // oxlint-disable-next-line no-unsafe-type-assertion -- response shape is defined by the get_point_position schema.
+        const { x, y, z } = response as { x: number; y: number; z: number };
+        const pickedPos: Vector3 = [x, y, z];
+        if (!genericRenderWindow.value || !pickedPos.some((val) => val !== 0)) {
+          return;
+        }
+        const renderer = genericRenderWindow.value.getRenderer();
+        const camera = renderer.getActiveCamera();
+        centerCameraOnPosition(camera, pickedPos);
+        genericRenderWindow.value.getRenderWindow().render();
+        syncRemoteCamera();
+      },
+    },
+  );
+}
+
+function setContainer(container: ContainerRef | undefined): void {
+  if (!container || !container.value) {
+    return;
+  }
+  const containerElement = container.value.$el;
+  const { genericRenderWindow, is_picking, is_moving } = useHybridViewerCore();
+  const { syncRemoteCamera } = useHybridViewerCamera();
+  const { hoverHighlight } = useHybridViewerHighlight();
+  if (!genericRenderWindow.value) {
+    return;
+  }
+  genericRenderWindow.value.setContainer(containerElement);
+  // oxlint-disable-next-line no-unsafe-assignment -- vtk.js has no types for getApiSpecificRenderWindow(); narrowed below.
+  const webGLRenderWindow = genericRenderWindow.value.getApiSpecificRenderWindow();
+  // oxlint-disable-next-line no-unsafe-type-assertion -- trusted vtk.js OpenGL render window API boundary.
+  const openGLRenderWindow = webGLRenderWindow as unknown as {
+    setUseBackgroundImage: (value: boolean) => void;
+    getReferenceByName: (name: string) => { style: CSSStyleDeclaration } | undefined;
+  };
+  openGLRenderWindow.setUseBackgroundImage(true);
+  const imageStyle = openGLRenderWindow.getReferenceByName("bgImage")?.style;
+  Object.assign(imageStyle ?? {}, {
+    transition: "opacity 0.1s ease-in",
+    zIndex: 1,
+  });
+  void resize(containerElement.offsetWidth, containerElement.offsetHeight);
+  let has_dragged = false;
+  useMousePressed({
+    target: containerElement,
+    onPressed: (event: MouseEvent | TouchEvent | DragEvent) => {
+      if (!(event instanceof MouseEvent)) {
+        return;
+      }
+      if (event.button !== 0 && event.button !== 1) {
+        return;
+      }
+      if (event.button === 0 && is_picking.value) {
+        performClickPicking(event, containerElement);
+        is_picking.value = false;
+        return;
+      }
+      is_moving.value = true;
+      has_dragged = false;
+      event.stopPropagation();
+    },
+    onReleased: () => {
+      is_moving.value = false;
+      if (has_dragged && genericRenderWindow.value) {
+        const renderer = genericRenderWindow.value.getRenderer();
+        renderer.resetCameraClippingRange();
+        syncRemoteCamera();
+      }
+      has_dragged = false;
+    },
+  });
+  useEventListener(containerElement, "mousemove", (event: MouseEvent) => {
+    if (is_moving.value) {
+      has_dragged = true;
+      if (imageStyle) {
+        imageStyle.opacity = "0";
+      }
+    }
+    void (async (): Promise<void> => {
+      try {
+        await hoverHighlight(event);
+      } catch {
+        // Ignore hover highlight failures
+      }
+    })();
+  });
+  let wheelEventEndTimeout: ReturnType<typeof setTimeout> | undefined = undefined;
+  useEventListener(containerElement, "wheel", () => {
+    is_moving.value = true;
+    if (imageStyle) {
+      imageStyle.opacity = "0";
+    }
+    clearTimeout(wheelEventEndTimeout);
+    wheelEventEndTimeout = setTimeout(() => {
+      is_moving.value = false;
+      if (!genericRenderWindow.value) {
+        return;
+      }
+      const renderer = genericRenderWindow.value.getRenderer();
+      renderer.resetCameraClippingRange();
+      syncRemoteCamera();
+    }, WHEEL_TIME_OUT_MS);
+  });
+}
+function useHybridViewerViewport(): HybridViewerViewport {
+  const { viewStream } = useHybridViewerCore();
+  return {
+    setContainer,
+    resize,
+    viewStream,
+  };
+}
+export { performClickPicking, useHybridViewerViewport };
+export type { ViewStreamLike } from "./vtk_types";

package/internal/stores/hybrid_viewer/vtk_types.ts

@@ -0,0 +1,58 @@
+import type { Vector3 } from "@kitware/vtk.js/types";
+import type vtkActor from "@kitware/vtk.js/Rendering/Core/Actor";
+
+// The camera state as exchanged with the viewer microservice (snake_case field names, plain arrays) - distinct from vtk.js's own vtkCamera object.
+interface CameraOptions {
+  focal_point: Vector3;
+  view_up: Vector3;
+  position: Vector3;
+  view_angle: number;
+  clipping_range: [number, number];
+  distance: number;
+}
+
+interface HybridDbEntry {
+  actor: vtkActor;
+  polydata: unknown;
+  mapper: unknown;
+}
+
+type HybridDb = Record<string, HybridDbEntry>;
+
+interface HoverComponentInfo {
+  name: string;
+  id: string;
+  type: string;
+}
+
+interface HoverData {
+  modelId: string;
+  modelName: string | undefined;
+  blockName: string | undefined;
+  pickedId: unknown;
+  fieldType: unknown;
+  component: HoverComponentInfo | undefined;
+  attributes: Record<string, unknown>;
+}
+
+// The image stream object returned by vtk.js's ImageStream.createViewStream(); vtk.js's own vtkViewStream type declares `onImageReady` with a zero-arg callback, which doesn't match how it's actually invoked at runtime (with the decoded image), so this describes the shape as it's actually used here.
+interface ViewStreamLike {
+  setSize: (width: number, height: number) => void;
+  onImageReady: (callback: (event: { image: unknown }) => void) => void;
+}
+
+export type { Vector3 } from "@kitware/vtk.js/types";
+export type { default as vtkActor } from "@kitware/vtk.js/Rendering/Core/Actor";
+export type { vtkCamera } from "@kitware/vtk.js/Rendering/Core/Camera";
+export type { vtkGenericRenderWindow } from "@kitware/vtk.js/Rendering/Misc/GenericRenderWindow";
+export type { vtkOpenGLRenderWindow } from "@kitware/vtk.js/Rendering/OpenGL/RenderWindow";
+export type { vtkRenderWindow } from "@kitware/vtk.js/Rendering/Core/RenderWindow";
+export type { vtkRenderer } from "@kitware/vtk.js/Rendering/Core/Renderer";
+export type {
+  CameraOptions,
+  HybridDbEntry,
+  HybridDb,
+  HoverComponentInfo,
+  HoverData,
+  ViewStreamLike,
+};