Migrate layers

Author: manzt

src/components/Viewer.tsx

@@ -1,17 +1,18 @@
 import DeckGL from "deck.gl";
-import { type Layer, OrthographicView } from "deck.gl";
+import { OrthographicView } from "deck.gl";
 import { type WritableAtom, useAtom } from "jotai";
 import { useAtomValue } from "jotai";
 import * as React from "react";
 
-import type { LayerProps } from "@deck.gl/core/lib/layer";
+import type { DeckGLRef, Layer, LayerProps, OrthographicViewState } from "deck.gl";
 import type { ZarrPixelSource } from "../ZarrPixelSource";
+import { useViewState } from "../hooks";
 import type { ViewState } from "../state";
 import { layerAtoms } from "../state";
 import { fitBounds, isInterleaved } from "../utils";
 
 type Data = { loader: ZarrPixelSource; rows: number; columns: number };
-type VizarrLayer = Layer<unknown, LayerProps<unknown> & Data>;
+type VizarrLayer = Layer<LayerProps & Data>;
 
 function getLayerSize(props: Data) {
   const { loader } = props;
@@ -28,21 +29,19 @@ function getLayerSize(props: Data) {
   return { height, width, maxZoom };
 }
 
-function WrappedViewStateDeck(props: {
-  layers: Array<VizarrLayer | null>;
-  viewStateAtom: WritableAtom<ViewState | undefined, ViewState>;
-}) {
-  const [viewState, setViewState] = useAtom(props.viewStateAtom);
-  const deckRef = React.useRef<DeckGL>(null);
+function WrappedViewStateDeck(props: { layers: Array<VizarrLayer> }) {
+  const [viewState, setViewState] = useViewState();
+  const deckRef = React.useRef<DeckGLRef>(null);
   const firstLayerProps = props.layers[0]?.props;
 
   // If viewState hasn't been updated, use the first loader to guess viewState
   // TODO: There is probably a better place / way to set the intital view and this is a hack.
-  if (deckRef.current && !viewState && firstLayerProps?.loader) {
+  if (deckRef.current?.deck && !viewState && firstLayerProps?.loader) {
     const { deck } = deckRef.current;
     const { width, height, maxZoom } = getLayerSize(firstLayerProps);
     const padding = deck.width < 400 ? 10 : deck.width < 600 ? 30 : 50; // Adjust depending on viewport width.
     const bounds = fitBounds([width, height], [deck.width, deck.height], maxZoom, padding);
+    console.log(bounds);
     // FIXME: For some reason deck.width & deck.height when there is no view
     // state, resulting in a `NaN` zoom.
     // This prevents us from setting the state until we have a valid state
@@ -60,15 +59,15 @@ function WrappedViewStateDeck(props: {
     <DeckGL
       ref={deckRef}
       layers={props.layers}
-      viewState={viewState}
-      onViewStateChange={(e) => setViewState(e.viewState)}
+      viewState={viewState ? { ortho: viewState } : undefined}
+      onViewStateChange={(e: { viewState: OrthographicViewState }) => setViewState(e.viewState)}
       views={[new OrthographicView({ id: "ortho", controller: true })]}
       glOptions={glOptions}
     />
   );
 }
 
-function Viewer(props: { viewStateAtom: WritableAtom<ViewState | undefined, ViewState> }) {
+function Viewer() {
   const layers: Array<VizarrLayer> = [];
   for (const { Layer, layerProps, on, imageLabel } of useAtomValue(layerAtoms)) {
     if (on) {
@@ -85,7 +84,7 @@ function Viewer(props: { viewStateAtom: WritableAtom<ViewState | undefined, View
         layers.push(layer);
       }
     }
-    return <WrappedViewStateDeck viewStateAtom={props.viewStateAtom} layers={layers} />;
+    return <WrappedViewStateDeck layers={layers} />;
   }
 }
 

src/hooks.ts

@@ -1,6 +1,6 @@
-import { type PrimitiveAtom, useAtom } from "jotai";
+import { type PrimitiveAtom, type WritableAtom, useAtom } from "jotai";
 import * as React from "react";
-import type { LayerState, SourceData } from "./state";
+import type { LayerState, SourceData, ViewState } from "./state";
 
 import * as utils from "./utils";
 
@@ -19,3 +19,11 @@ export function useLayerState() {
   utils.assert(atom, "useLayerState hook must be used within LayerStateContext.");
   return useAtom(atom);
 }
+
+export const ViewStateContext = React.createContext<WritableAtom<ViewState | undefined, ViewState> | null>(null);
+
+export function useViewState() {
+  const atom = React.useContext(ViewStateContext);
+  utils.assert(atom, "useViewState hook must be used within ViewStateContext.");
+  return useAtom(atom);
+}

src/index.tsx

@@ -8,6 +8,7 @@ import ReactDOM from "react-dom/client";
 import Menu from "./components/Menu";
 import Viewer from "./components/Viewer";
 import "./codecs/register";
+import { ViewStateContext } from "./hooks";
 import {
   type ImageLayerConfig,
   type ViewState,
@@ -83,10 +84,10 @@ export function createViewer(element: HTMLElement, options: { menuOpen?: boolean
     return (
       <>
         {sourceError === null && redirectObj === null && (
-          <>
+          <ViewStateContext.Provider value={viewStateAtom}>
             <Menu open={options.menuOpen ?? true} />
-            <Viewer viewStateAtom={viewStateAtom} />
-          </>
+            <Viewer />
+          </ViewStateContext.Provider>
         )}
         {sourceError !== null && (
           <div className={classes.errorContainer}>

src/layers/grid-layer.ts

@@ -1,10 +1,9 @@
-import type { CompositeLayerProps } from "@deck.gl/core/lib/composite-layer";
-import { CompositeLayer, type PickInfo, SolidPolygonLayer, TextLayer } from "deck.gl";
+import { CompositeLayer, SolidPolygonLayer, TextLayer } from "deck.gl";
 import pMap from "p-map";
 
-import type { SolidPolygonLayerProps, TextLayerProps } from "@deck.gl/layers";
 import { ColorPaletteExtension, XRLayer } from "@hms-dbmi/viv";
 import type { SupportedTypedArray } from "@vivjs/types";
+import type { CompositeLayerProps, PickingInfo, SolidPolygonLayerProps, TextLayerProps } from "deck.gl";
 import type { ZarrPixelSource } from "../ZarrPixelSource";
 import type { BaseLayerProps } from "../state";
 import { assert } from "../utils";
@@ -19,7 +18,7 @@ export interface GridLoader {
 type Polygon = Array<[number, number]>;
 
 export interface GridLayerProps
-  extends Omit<CompositeLayerProps<unknown>, "modelMatrix" | "opacity" | "onClick" | "id">,
+  extends Omit<CompositeLayerProps, "modelMatrix" | "opacity" | "onClick" | "id" | "loaders">,
     BaseLayerProps {
   loaders: GridLoader[];
   rows: number;
@@ -86,9 +85,15 @@ function refreshGridData(props: GridLayerProps) {
   return pMap(loaders, mapper, { concurrency });
 }
 
-export default class GridLayer extends CompositeLayer<unknown, CompositeLayerProps<unknown> & GridLayerProps> {
+type SharedLayerState = {
+  gridData: Awaited<ReturnType<typeof refreshGridData>>;
+  width: number;
+  height: number;
+};
+
+export default class GridLayer extends CompositeLayer<GridLayerProps> {
   initializeState() {
-    this.state = { gridData: [], width: 0, height: 0 };
+    this.#state = { gridData: [], width: 0, height: 0 };
     refreshGridData(this.props).then((gridData) => {
       const { width, height } = validateWidthHeight(gridData);
       this.setState({ gridData, width, height });
@@ -117,29 +122,35 @@ export default class GridLayer extends CompositeLayer<unknown, CompositeLayerPro
     }
   }
 
-  getPickingInfo({ info }: { info: PickInfo<unknown> }) {
+  get #state(): SharedLayerState {
+    // @ts-expect-error - type safe access to state
+    return this.state;
+  }
+
+  set #state(value: SharedLayerState) {
+    this.state = value;
+  }
+
+  getPickingInfo({ info }: { info: PickingInfo<unknown> }) {
     // provide Grid row and column info for mouse events (hover & click)
     if (!info.coordinate) {
       return info;
     }
     const spacer = this.props.spacer || 0;
-    const { width, height } = this.state;
+    const { width, height } = this.#state;
     const [x, y] = info.coordinate;
     const row = Math.floor(y / (height + spacer));
     const column = Math.floor(x / (width + spacer));
-    return {
-      ...info,
-      gridCoord: { row, column },
-    };
+    return { ...info, gridCoord: { row, column } };
   }
 
   renderLayers() {
-    const { gridData, width, height } = this.state;
+    const { gridData, width, height } = this.#state;
     if (width === 0 || height === 0) return null; // early return if no data
 
     const { rows, columns, spacer = 0, id = "" } = this.props;
     type Data = { row: number; col: number; loader: Pick<ZarrPixelSource, "dtype">; data: Array<SupportedTypedArray> };
-    const layers = gridData.map((d: Data) => {
+    const layers = gridData.map((d) => {
       const y = d.row * (height + spacer);
       const x = d.col * (width + spacer);
       const layerProps = {
@@ -172,7 +183,6 @@ export default class GridLayer extends CompositeLayer<unknown, CompositeLayerPro
         pickable: true, // enable picking
         id: `${id}-GridLayer-picking`,
       } satisfies SolidPolygonLayerProps<Data>;
-      // @ts-expect-error - SolidPolygonLayer props are not well typed
       const layer = new SolidPolygonLayer<Data, SolidPolygonLayerProps<Data>>({ ...this.props, ...layerProps });
       layers.push(layer);
     }

src/layers/image-label-layer.ts

@@ -1,12 +1,12 @@
-import { getImageSize, MultiscaleImageLayer } from "@hms-dbmi/viv";
-import { clamp } from "math.gl";
+import { MultiscaleImageLayer, getImageSize } from "@hms-dbmi/viv";
 import { TileLayer } from "deck.gl";
+import { clamp } from "math.gl";
 import * as utils from "../utils";
 
-import type { Matrix4 } from "math.gl";
-import type { ZarrPixelSource } from "../ZarrPixelSource";
 import type { PixelData } from "@vivjs/types";
 import { BitmapLayer } from "deck.gl";
+import type { Matrix4 } from "math.gl";
+import type { ZarrPixelSource } from "../ZarrPixelSource";
 
 export type ImageLabelLayerProps = {
   id: string;