@biongff/vizarr 1.0.1 → 1.2.0

package/src/components/Viewer.tsx

@@ -1,136 +0,0 @@
-import { ScaleBarLayer } from "@hms-dbmi/viv";
-import DeckGL from "deck.gl";
-import { OrthographicView } from "deck.gl";
-import { useAtom, useAtomValue } from "jotai";
-import * as React from "react";
-import { useViewState } from "../hooks";
-import { layerAtoms, viewportAtom } from "../state";
-import { fitImageToViewport, getLayerSize, resolveLoaderFromLayerProps } from "../utils";
-
-import type { DeckGLRef, OrthographicViewState, PickingInfo } from "deck.gl";
-import type { GrayscaleBitmapLayerPickingInfo } from "../layers/label-layer";
-import type { ViewState, VizarrLayer } from "../state";
-
-export default function Viewer() {
-  const deckRef = React.useRef<DeckGLRef>(null);
-  const [viewport, setViewport] = useAtom(viewportAtom);
-  const [viewState, setViewState] = useViewState();
-  const layers = useAtomValue(layerAtoms);
-  const firstLayer = layers[0] as VizarrLayer;
-
-  const resetViewState = React.useCallback(
-    (layer: VizarrLayer) => {
-      const { deck } = deckRef.current || {};
-      if (deck) {
-        setViewState({
-          ...fitImageToViewport({
-            image: getLayerSize(layer),
-            viewport: deck,
-            padding: deck.width < 400 ? 10 : deck.width < 600 ? 30 : 50,
-            matrix: layer?.props.modelMatrix,
-          }),
-          width: deck.width,
-          height: deck.height,
-        });
-      }
-    },
-    [setViewState],
-  );
-
-  React.useEffect(() => {
-    if (!viewport && deckRef.current?.deck) {
-      setViewport(deckRef.current.deck);
-    }
-    if (viewport && firstLayer) {
-      if (!viewState) {
-        resetViewState(firstLayer);
-      } else if (!(viewState?.width || viewState?.height)) {
-        setViewState((vs) => ({
-          ...(vs as ViewState),
-          width: viewport.width,
-          height: viewport.height,
-        }));
-      }
-    }
-  }, [viewport, setViewport, firstLayer, resetViewState, viewState, setViewState]);
-
-  const deckLayers = React.useMemo(() => {
-    if (!firstLayer || !(viewState?.width && viewState?.height)) {
-      return layers;
-    }
-    const loader = resolveLoaderFromLayerProps(firstLayer.props);
-    if (Array.isArray(loader) && loader?.[0]?.meta?.physicalSizes?.x) {
-      const { size, unit } = loader[0].meta.physicalSizes.x;
-      const scalebar = new ScaleBarLayer({
-        id: "scalebar",
-        size: size / firstLayer.props.modelMatrix[0],
-        unit: unit,
-        viewState: viewState,
-        snap: false,
-      });
-      return [...layers, scalebar];
-    }
-    return layers;
-  }, [layers, firstLayer, viewState]);
-
-  // Enables screenshots of the canvas: https://github.com/visgl/deck.gl/issues/2200
-  const glOptions: WebGLContextAttributes = {
-    preserveDrawingBuffer: true,
-  };
-
-  const getTooltip = (info: GrayscaleBitmapLayerPickingInfo | PickingInfo) => {
-    const { layer, index } = info as PickingInfo;
-    const { label, value } = info as GrayscaleBitmapLayerPickingInfo;
-    if (!layer || index === null || index === undefined) {
-      return null;
-    }
-    return {
-      text: value !== null && value !== undefined ? `${label}: ${value}` : `${label}`,
-    };
-  };
-
-  const { near, far } = React.useMemo(() => {
-    if (!firstLayer) {
-      return { near: 0.1, far: 1000 };
-    }
-
-    const zs = layers.flatMap((layer) => {
-      const matrix = (layer as VizarrLayer)?.props?.modelMatrix;
-      if (!matrix) {
-        return [];
-      }
-      const { width, height } = getLayerSize(firstLayer);
-      const corners = [
-        [0, 0, 0],
-        [width, 0, 0],
-        [width, height, 0],
-        [0, height, 0],
-      ].map((corner) => matrix.transformAsPoint(corner)[2]);
-      return corners;
-    });
-
-    const minZ = Math.min(...zs);
-    const maxZ = Math.max(...zs);
-
-    return {
-      near: maxZ ? -10000 * Math.abs(maxZ) : 0.1,
-      far: minZ ? 10000 * Math.abs(minZ) : 1000,
-    };
-  }, [layers, firstLayer]);
-
-  return (
-    <DeckGL
-      ref={deckRef}
-      layers={deckLayers}
-      viewState={viewState && { ortho: viewState }}
-      onViewStateChange={(e: { viewState: OrthographicViewState }) =>
-        // @ts-expect-error - deck doesn't know this should be ok
-        setViewState(e.viewState)
-      }
-      views={[new OrthographicView({ id: "ortho", controller: true, near, far })]}
-      glOptions={glOptions}
-      getTooltip={getTooltip}
-      onDeviceInitialized={() => setViewport(deckRef.current?.deck || null)}
-    />
-  );
-}

package/src/hooks.ts

@@ -1,29 +0,0 @@
-import { type PrimitiveAtom, useAtom } from "jotai";
-import * as React from "react";
-import type { LayerState, SourceData, ViewState } from "./state";
-
-import * as utils from "./utils";
-
-export const SourceDataContext = React.createContext<PrimitiveAtom<{ id: string } & SourceData> | null>(null);
-
-export function useSourceData() {
-  const atom = React.useContext(SourceDataContext);
-  utils.assert(atom, "useSourceData hook must be used within SourceDataContext.");
-  return useAtom(atom);
-}
-
-export const LayerStateContext = React.createContext<PrimitiveAtom<{ id: string } & LayerState> | null>(null);
-
-export function useLayerState() {
-  const atom = React.useContext(LayerStateContext);
-  utils.assert(atom, "useLayerState hook must be used within LayerStateContext.");
-  return useAtom(atom);
-}
-
-export const ViewStateContext = React.createContext<PrimitiveAtom<ViewState | null> | null>(null);
-
-export function useViewState() {
-  const atom = React.useContext(ViewStateContext);
-  utils.assert(atom, "useViewState hook must be used within ViewStateContext.");
-  return useAtom(atom);
-}

package/src/index.tsx

@@ -1,138 +0,0 @@
-import { Box, Link, Typography } from "@mui/material";
-import { ThemeProvider } from "@mui/material/styles";
-import { type PrimitiveAtom, Provider, atom } from "jotai";
-import { useAtomValue, useSetAtom } from "jotai";
-import * as React from "react";
-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,
-  addImageAtom,
-  redirectObjAtom,
-  sourceErrorAtom,
-  viewStateAtom,
-} from "./state";
-import theme from "./theme";
-import { defer, typedEmitter } from "./utils";
-
-export { version } from "../package.json";
-
-type Events = {
-  viewStateChange: ViewState;
-};
-
-export type { ViewState, ImageLayerConfig };
-
-export interface VizarrViewer {
-  addImage(config: ImageLayerConfig): void;
-  setViewState(viewState: ViewState): void;
-  on<E extends keyof Events>(event: E, cb: (data: Events[E]) => void): void;
-  destroy(): void;
-}
-
-export function createViewer(element: HTMLElement, options: { menuOpen?: boolean } = {}): Promise<VizarrViewer> {
-  const ref = React.createRef<VizarrViewer>();
-  const emitter = typedEmitter<Events>();
-  const viewStateAtomWithEffect: PrimitiveAtom<ViewState | null> = atom(
-    (get) => get(viewStateAtom),
-    (get, set, update) => {
-      const viewState = typeof update === "function" ? update(get(viewStateAtom)) : update;
-      if (viewState)
-        emitter.emit("viewStateChange", {
-          target: viewState.target,
-          zoom: viewState.zoom,
-        });
-      set(viewStateAtom, update);
-    },
-  );
-  const { promise, resolve } = defer<VizarrViewer>();
-
-  function App() {
-    const sourceError = useAtomValue(sourceErrorAtom);
-    const redirectObj = useAtomValue(redirectObjAtom);
-    const addImage = useSetAtom(addImageAtom);
-    const setViewState = useSetAtom(viewStateAtomWithEffect);
-    React.useImperativeHandle(
-      ref,
-      () => ({
-        addImage,
-        setViewState,
-        on: emitter.on.bind(emitter),
-        destroy: () => root.unmount(),
-      }),
-      [setViewState, addImage],
-    );
-    React.useEffect(() => {
-      if (ref.current) {
-        resolve(ref.current);
-      }
-    }, []);
-    return (
-      <>
-        {sourceError === null && redirectObj === null && (
-          <ViewStateContext.Provider value={viewStateAtomWithEffect}>
-            <Menu open={options.menuOpen ?? true} />
-            <Viewer />
-          </ViewStateContext.Provider>
-        )}
-        {sourceError !== null && (
-          <Box
-            sx={{
-              position: "fixed",
-              top: 0,
-              bottom: 0,
-              left: 0,
-              right: 0,
-              color: "#fff",
-              display: "flex",
-              alignItems: "center",
-              textAlign: "center",
-              justifyContent: "center",
-              fontSize: "120%",
-            }}
-          >
-            <p>{`Error: server replied with "${sourceError}" when loading the resource`}</p>
-          </Box>
-        )}
-        {redirectObj !== null && (
-          <Box
-            sx={{
-              position: "fixed",
-              top: 0,
-              bottom: 0,
-              left: 0,
-              right: 0,
-              color: "#fff",
-              display: "flex",
-              alignItems: "center",
-              textAlign: "center",
-              justifyContent: "center",
-              fontSize: "120%",
-            }}
-          >
-            <Typography variant="h5">
-              {redirectObj.message}
-              <Link href={redirectObj.url}> {redirectObj.url} </Link>
-            </Typography>
-          </Box>
-        )}
-      </>
-    );
-  }
-  let root = ReactDOM.createRoot(element);
-  root.render(
-    <ThemeProvider theme={theme}>
-      <Provider>
-        <ViewStateContext.Provider value={viewStateAtomWithEffect}>
-          <App />
-        </ViewStateContext.Provider>
-      </Provider>
-    </ThemeProvider>,
-  );
-  return promise;
-}

package/src/io.ts

@@ -1,276 +0,0 @@
-import * as zarr from "zarrita";
-import { ZarrPixelSource } from "./ZarrPixelSource";
-import { loadOmeMultiscales, loadPlate, loadWell } from "./ome";
-import * as utils from "./utils";
-
-import { DEFAULT_LABEL_OPACITY } from "./layers/label-layer";
-import type { BaseLayerProps } from "./layers/viv-layers";
-import type { ImageLayerConfig, LayerState, MultichannelConfig, SingleChannelConfig, SourceData } from "./state";
-
-async function loadSingleChannel(config: SingleChannelConfig, data: Array<ZarrPixelSource>): Promise<SourceData> {
-  const { color, contrast_limits, visibility, name, colormap = "", opacity = 1 } = config;
-  const lowres = data[data.length - 1];
-  const selection = Array(data[0].shape.length).fill(0);
-  const limits = contrast_limits ?? (await (() => utils.calcDataRange(lowres, selection))());
-  return {
-    loader: data,
-    name,
-    channel_axis: null,
-    colors: [color ?? utils.COLORS.white],
-    names: ["channel_0"],
-    contrast_limits: [limits],
-    visibilities: [visibility ?? true],
-    model_matrix: utils.parseMatrix(config.model_matrix),
-    defaults: {
-      selection,
-      colormap,
-      opacity,
-    },
-    axis_labels: data[0].labels,
-  };
-}
-
-async function loadMultiChannel(
-  config: MultichannelConfig,
-  data: Array<ZarrPixelSource>,
-  channelAxis: number,
-): Promise<SourceData> {
-  const { names, contrast_limits, name, model_matrix, opacity = 1, colormap = "" } = config;
-  let { visibilities, colors } = config;
-  const n = data[0].shape[channelAxis];
-
-  for (const channelProp of [contrast_limits, visibilities, names, colors]) {
-    if (channelProp) {
-      const propertyName = Object.keys({ channelProp })[0];
-      utils.assert(
-        channelProp.length === n,
-        `channel_axis is length ${n} and provided channel_axis property ${propertyName} is different size.`,
-      );
-    }
-  }
-
-  visibilities = visibilities || utils.getDefaultVisibilities(n);
-  colors = colors || utils.getDefaultColors(n, visibilities);
-
-  const contrastLimits =
-    contrast_limits ?? (await (() => utils.calcConstrastLimits(data[data.length - 1], channelAxis, visibilities))());
-
-  return {
-    loader: data,
-    name,
-    channel_axis: channelAxis,
-    colors,
-    names: names ?? utils.range(n).map((i) => `channel_${i}`),
-    contrast_limits: contrastLimits,
-    visibilities,
-    model_matrix: utils.parseMatrix(model_matrix),
-    defaults: {
-      selection: Array(data[0].shape.length).fill(0),
-      colormap,
-      opacity,
-    },
-    axis_labels: data[0].labels,
-  };
-}
-
-export async function createSourceData(config: ImageLayerConfig): Promise<SourceData> {
-  const node = await utils.open(config.source);
-  let data: zarr.Array<zarr.DataType, zarr.Readable>[];
-  let axes: Ome.Axis[] | undefined;
-
-  if (node instanceof zarr.Group) {
-    let attrs = utils.resolveAttrs(node.attrs);
-
-    if (utils.isOmePlate(attrs)) {
-      return loadPlate(config, node, attrs.plate);
-    }
-
-    if (utils.isOmeWell(attrs)) {
-      return loadWell(config, node, attrs.well);
-    }
-
-    if (utils.isMultiscales(attrs)) {
-      return loadOmeMultiscales(config, node, attrs);
-    }
-
-    if (Object.keys(attrs).length === 0 && node.path) {
-      // No rootAttrs in this group.
-      const parent = await zarr.open(node.resolve(".."), { kind: "group" });
-      const parentAttrs = utils.resolveAttrs(parent.attrs);
-      if (utils.isOmePlate(parentAttrs)) {
-        return loadPlate(config, parent, parentAttrs.plate);
-      }
-    }
-
-    if (utils.isBioformats2rawlayout(attrs)) {
-      let toUrl = `${utils.OME_VALIDATOR_URL}?source=${config.source}`;
-      throw new utils.RedirectError("Please open in ome-ngff-validator", toUrl);
-    }
-    utils.assert(utils.isMultiscales(attrs), "Group is missing multiscales specification.");
-    data = await utils.loadMultiscales(node, attrs.multiscales);
-    if (attrs.multiscales[0].axes) {
-      axes = utils.getNgffAxes(attrs.multiscales);
-    }
-  } else {
-    data = [node];
-  }
-
-  // explicit override in config > ngff > guessed from data shape
-  const { channel_axis, labels } = getAxisLabelsAndChannelAxis(config, axes, data[0]);
-
-  const tileSize = utils.guessTileSize(data[0]);
-  const loader = data.map((d) => new ZarrPixelSource(d, { labels, tileSize }));
-  const [base] = loader;
-
-  // If explicit channel axis is provided, try to load as multichannel.
-
-  if ("channel_axis" in config || channel_axis > -1) {
-    config = config as MultichannelConfig;
-    return loadMultiChannel(config, loader, Number(config.channel_axis ?? channel_axis));
-  }
-
-  const nDims = base.shape.length;
-  if (nDims === 2 || !("channel_axis" in config)) {
-    return loadSingleChannel(config as SingleChannelConfig, loader);
-  }
-
-  throw Error("Failed to load image.");
-}
-
-type Labels = [...string[], "y", "x"];
-function getAxisLabelsAndChannelAxis(
-  config: ImageLayerConfig,
-  ngffAxes: Ome.Axis[] | undefined,
-  arr: zarr.Array<zarr.DataType, zarr.Readable>,
-): { labels: Labels; channel_axis: number } {
-  // type cast string[] to Labels
-  const maybeAxisLabels = config.axis_labels as undefined | Labels;
-  // ensure numeric if provided
-  const maybeChannelAxis = "channel_axis" in config ? Number(config.channel_axis) : undefined;
-  // Use ngff axes metadata if labels or channel axis aren't explicitly provided
-  if (ngffAxes) {
-    const labels = maybeAxisLabels ?? utils.getNgffAxisLabels(ngffAxes);
-    const channel_axis = maybeChannelAxis ?? ngffAxes.findIndex((axis) => axis.type === "channel");
-    return { labels, channel_axis };
-  }
-
-  // create dummy axis labels if not provided and try to guess channel_axis if missing
-  const labels = maybeAxisLabels ?? utils.getAxisLabels(arr);
-  const channel_axis = maybeChannelAxis ?? labels.indexOf("c");
-  return { labels, channel_axis };
-}
-
-export function initLayerStateFromSource(source: SourceData & { id: string }): LayerState {
-  const { selection, opacity, colormap } = source.defaults;
-
-  const selections: number[][] = [];
-  const colors: [number, number, number][] = [];
-  const contrastLimits: [start: number, end: number][] = [];
-  const channelsVisible: boolean[] = [];
-
-  const visibleIndices = source.visibilities.flatMap((bool, i) => (bool ? i : []));
-  // Limit the number of initial channels to the max allowed
-  for (const index of visibleIndices.slice(0, utils.MAX_CHANNELS)) {
-    const channelSelection = [...selection];
-    if (Number.isInteger(source.channel_axis)) {
-      channelSelection[source.channel_axis as number] = index;
-    }
-    selections.push(channelSelection);
-    colors.push(utils.hexToRGB(source.colors[index]));
-    // TODO: should never be undefined
-    contrastLimits.push(source.contrast_limits[index] ?? [0, 255]);
-    channelsVisible.push(true);
-  }
-
-  const layerProps = {
-    id: source.id,
-    selections,
-    colors,
-    contrastLimits,
-    contrastLimitsRange: [...contrastLimits],
-    channelsVisible,
-    opacity,
-    colormap,
-    modelMatrix: source.model_matrix,
-    onClick: source.onClick,
-  } satisfies BaseLayerProps;
-
-  if (source.loaders) {
-    return {
-      kind: "grid",
-      layerProps: {
-        ...layerProps,
-        loaders: source.loaders,
-        columns: source.columns as number,
-        rows: source.rows as number,
-      },
-      on: true,
-    };
-  }
-
-  if (source.loader.length === 1) {
-    return {
-      kind: "image",
-      layerProps: {
-        ...layerProps,
-        loader: source.loader[0],
-      },
-      on: true,
-    };
-  }
-
-  let labels = undefined;
-  if (source.labels && source.labels.length > 0) {
-    labels = source.labels.map((label, i) => ({
-      on: false,
-      transformSourceSelection: getSourceSelectionTransform(label.loader[0], source.loader[0]),
-      layerProps: {
-        id: `${source.id}_${i}`,
-        loader: label.loader,
-        modelMatrix: label.modelMatrix,
-        opacity: DEFAULT_LABEL_OPACITY,
-        colors: label.colors,
-      },
-    }));
-  }
-
-  return {
-    kind: "multiscale",
-    layerProps: {
-      ...layerProps,
-      loader: source.loader,
-    },
-    on: true,
-    labels,
-  };
-}
-
-function getSourceSelectionTransform(
-  labels: { shape: Array<number>; labels: Array<string> },
-  source: { shape: Array<number>; labels: Array<string> },
-) {
-  utils.assert(
-    source.shape.length === source.labels.length,
-    `Image source axes and shape are not same rank. Got ${JSON.stringify(source)}`,
-  );
-  utils.assert(
-    labels.shape.length === labels.labels.length,
-    `Label axes and shape are not same rank. Got ${JSON.stringify(labels)}`,
-  );
-  utils.assert(
-    labels.labels.every((label) => source.labels.includes(label)),
-    `Label axes MUST be a subset of source. Source: ${JSON.stringify(source.labels)} Labels: ${JSON.stringify(labels.labels)}`,
-  );
-  // Identify labels that should always map to 0, regardless of the source selection.
-  const excludeFromTransformedSelection = new Set(
-    utils
-      .zip(labels.labels, labels.shape)
-      .filter(([_, size]) => size === 1)
-      .map(([name, _]) => name),
-  );
-  return (sourceSelection: Array<number>): Array<number> => {
-    return labels.labels.map((name) =>
-      excludeFromTransformedSelection.has(name) ? 0 : sourceSelection[source.labels.indexOf(name)],
-    );
-  };
-}