@biongff/vizarr 1.1.1 → 1.3.0

package/src/ZarrPixelSource.ts

@@ -1,182 +0,0 @@
-import * as zarr from "zarrita";
-import { assert } from "./utils";
-
-import type * as viv from "@vivjs/types";
-
-// TODO: Export from top-level zarrita
-type Slice = ReturnType<typeof zarr.slice>;
-
-const X_AXIS_NAME = "x";
-const Y_AXIS_NAME = "y";
-const RGBA_CHANNEL_AXIS_NAME = "_c";
-
-type VivPixelData = {
-  data: zarr.TypedArray<Lowercase<viv.SupportedDtype>>;
-  width: number;
-  height: number;
-};
-
-export class ZarrPixelSource implements viv.PixelSource<Array<string>> {
-  readonly labels: viv.Labels<Array<string>>;
-  readonly tileSize: number;
-  readonly dtype: viv.SupportedDtype;
-  readonly meta?: viv.PixelSourceMeta;
-  readonly #arr: zarr.Array<zarr.NumberDataType | zarr.BigintDataType, zarr.Readable>;
-  readonly #transform: (
-    arr: zarr.TypedArray<zarr.NumberDataType | zarr.BigintDataType>,
-  ) => zarr.TypedArray<Lowercase<viv.SupportedDtype>>;
-
-  #pendingId: undefined | number = undefined;
-  #pending: Array<{
-    resolve: (data: VivPixelData) => void;
-    reject: (err: unknown) => void;
-    request: {
-      selection: Array<number | zarr.Slice>;
-      signal?: AbortSignal;
-    };
-  }> = [];
-
-  constructor(
-    arr: zarr.Array<zarr.DataType, zarr.Readable>,
-    options: { labels: viv.Labels<Array<string>>; tileSize: number; meta?: viv.PixelSourceMeta },
-  ) {
-    assert(arr.is("number") || arr.is("bigint"), `Unsupported viv dtype: ${arr.dtype}`);
-    this.#arr = arr;
-    this.labels = options.labels;
-    this.tileSize = options.tileSize;
-    this.meta = options.meta;
-    /**
-     * Some `zarrita` data types are not supported by Viv and require casting.
-     *
-     * Note how the casted type in the transform function is type-cast to `zarr.TypedArray<typeof arr.dtype>`.
-     * This ensures that the function body is correct based on whatever type narrowing we do in the if/else
-     * blocks based on dtype.
-     *
-     * TODO: Maybe we should add a console warning?
-     */
-    if (arr.dtype === "uint64" || arr.dtype === "int64") {
-      this.dtype = "Uint32";
-      this.#transform = (x) => Uint32Array.from(x as zarr.TypedArray<typeof arr.dtype>, (bint) => Number(bint));
-    } else if (arr.dtype === "float16") {
-      this.dtype = "Float32";
-      this.#transform = (x) => new Float32Array(x as zarr.TypedArray<typeof arr.dtype>);
-    } else {
-      this.dtype = capitalize(arr.dtype);
-      this.#transform = (x) => x as zarr.TypedArray<typeof arr.dtype>;
-    }
-  }
-
-  get #width() {
-    const lastIndex = this.shape.length - 1;
-    return this.shape[this.labels.indexOf("c") === lastIndex ? lastIndex - 1 : lastIndex];
-  }
-
-  get #height() {
-    const lastIndex = this.shape.length - 1;
-    return this.shape[this.labels.indexOf("c") === lastIndex ? lastIndex - 2 : lastIndex - 1];
-  }
-
-  get shape() {
-    return this.#arr.shape;
-  }
-
-  async getRaster(options: {
-    selection: viv.PixelSourceSelection<Array<string>> | Array<number>;
-    signal?: AbortSignal;
-  }): Promise<viv.PixelData> {
-    const { selection, signal } = options;
-    return this.#fetchData({
-      selection: buildZarrSelection(selection, {
-        labels: this.labels,
-        slices: { x: zarr.slice(null), y: zarr.slice(null) },
-      }),
-      signal,
-    });
-  }
-
-  onTileError(_err: unknown): void {
-    // no-op
-  }
-
-  async getTile(options: {
-    x: number;
-    y: number;
-    selection: viv.PixelSourceSelection<Array<string>> | Array<number>;
-    signal?: AbortSignal;
-  }): Promise<viv.PixelData> {
-    const { x, y, selection, signal } = options;
-    return this.#fetchData({
-      selection: buildZarrSelection(selection, {
-        labels: this.labels,
-        slices: {
-          x: zarr.slice(x * this.tileSize, Math.min((x + 1) * this.tileSize, this.#width)),
-          y: zarr.slice(y * this.tileSize, Math.min((y + 1) * this.tileSize, this.#height)),
-        },
-      }),
-      signal,
-    });
-  }
-
-  async #fetchData(request: { selection: Array<number | Slice>; signal?: AbortSignal }): Promise<viv.PixelData> {
-    const { promise, resolve, reject } = Promise.withResolvers<VivPixelData>();
-    this.#pending.push({ request, resolve, reject });
-    this.#pendingId = this.#pendingId ?? requestAnimationFrame(() => this.#fetchPending());
-    // @ts-expect-error - The missing generic ArrayBuffer type from Viv makes VivPixelData and viv.PixelData incompatible, even though they are.
-    return promise;
-  }
-
-  /**
-   * Fetch a pending batch of requests together and resolve independently.
-   *
-   * TODO: There could be more optimizations (e.g., multi-get)
-   */
-  async #fetchPending() {
-    for (const { request, resolve, reject } of this.#pending) {
-      zarr
-        .get(this.#arr, request.selection, { opts: { signal: request.signal } })
-        .then(({ data, shape }) => {
-          resolve({
-            data: this.#transform(data),
-            width: shape[1],
-            height: shape[0],
-          });
-        })
-        .catch((error) => reject(error));
-    }
-    this.#pendingId = undefined;
-    this.#pending = [];
-  }
-}
-
-function buildZarrSelection(
-  baseSelection: Record<string, number> | Array<number>,
-  options: {
-    labels: string[];
-    slices: { x: zarr.Slice; y: zarr.Slice };
-  },
-): Array<Slice | number> {
-  const { labels, slices } = options;
-  let selection: Array<Slice | number>;
-  if (Array.isArray(baseSelection)) {
-    // shallow copy
-    selection = [...baseSelection];
-  } else {
-    // initialize with zeros
-    selection = Array.from({ length: labels.length }, () => 0);
-    // fill in the selection
-    for (const [key, idx] of Object.entries(baseSelection)) {
-      selection[labels.indexOf(key)] = idx;
-    }
-  }
-  selection[labels.indexOf(X_AXIS_NAME)] = slices.x;
-  selection[labels.indexOf(Y_AXIS_NAME)] = slices.y;
-  if (RGBA_CHANNEL_AXIS_NAME in labels) {
-    selection[labels.indexOf(RGBA_CHANNEL_AXIS_NAME)] = zarr.slice(null);
-  }
-  return selection;
-}
-
-function capitalize<T extends string>(s: T): Capitalize<T> {
-  // @ts-expect-error - TypeScript can't verify that the return type is correct
-  return s[0].toUpperCase() + s.slice(1);
-}

package/src/codecs/jpeg2k.ts

@@ -1,22 +0,0 @@
-// TODO: Remove dependency on CDN for pdf.js source. Could use git submodule or
-// `deno bundle` since the pdf.js dist does not include ESM source code (only UMD or CJS).
-
-// @ts-ignore
-import { JpxImage } from "https://cdn.jsdelivr.net/gh/mozilla/pdf.js@30bd5f0/src/core/jpx.js";
-
-export default class Jpeg2k {
-  kind = "bytes_to_bytes" as const;
-  static codecId = "jpeg2k";
-  static fromConfig(): Jpeg2k {
-    return new Jpeg2k();
-  }
-  encode(_: Uint8Array): never {
-    throw new Error("encode not implemented");
-  }
-  async decode(data: Uint8Array): Promise<Uint8Array> {
-    const img = new JpxImage();
-    img.failOnCorruptedImage = true;
-    img.parse(data);
-    return img.tiles[0].items;
-  }
-}

package/src/codecs/register.ts

@@ -1,2 +0,0 @@
-import { registry } from "zarrita";
-registry.set("jpeg2k", () => import("./jpeg2k").then((m) => m.default));

package/src/components/LayerController/AcquisitionController.tsx

@@ -1,46 +0,0 @@
-import { Grid, NativeSelect } from "@mui/material";
-import React from "react";
-import type { ChangeEvent } from "react";
-import { useSourceData } from "../../hooks";
-
-function AcquisitionController() {
-  const [sourceData] = useSourceData();
-  const { acquisitionId, acquisitions } = sourceData;
-
-  if (!acquisitions) {
-    return null;
-  }
-
-  const handleSelectionChange = (event: ChangeEvent<HTMLSelectElement>) => {
-    let value = event.target.value;
-    const url = new URL(window.location.href);
-    if (value === "-1") {
-      url.searchParams.delete("acquisition");
-    } else {
-      url.searchParams.set("acquisition", value);
-    }
-    window.location.href = decodeURIComponent(url.href);
-  };
-
-  return (
-    <>
-      <Grid>
-        <NativeSelect fullWidth style={{ fontSize: "0.7em" }} onChange={handleSelectionChange} value={acquisitionId}>
-          <option value="-1" key="-1">
-            Filter by Acquisition
-          </option>
-          {acquisitions.map((acq) => {
-            acq = acq as Ome.Acquisition;
-            return (
-              <option value={acq.id} key={acq.id}>
-                Acquisition: {acq.name}
-              </option>
-            );
-          })}
-        </NativeSelect>
-      </Grid>
-    </>
-  );
-}
-
-export default AcquisitionController;

package/src/components/LayerController/AddChannelButton.tsx

@@ -1,122 +0,0 @@
-import { Add } from "@mui/icons-material";
-import { Divider, IconButton, NativeSelect, Paper, Popover, Typography } from "@mui/material";
-import React, { useState } from "react";
-import type { ChangeEvent, MouseEvent } from "react";
-
-import { useLayerState, useSourceData } from "../../hooks";
-import { MAX_CHANNELS, calcDataRange, hexToRGB, resolveLoaderFromLayerProps } from "../../utils";
-
-function AddChannelButton() {
-  const [source, setSource] = useSourceData();
-  const [layer, setLayer] = useLayerState();
-  const [anchorEl, setAnchorEl] = useState<null | Element>(null);
-
-  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
-    setAnchorEl(event.currentTarget);
-  };
-
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
-
-  const handleChange = async (event: ChangeEvent<HTMLSelectElement>) => {
-    handleClose();
-    const channelIndex = +event.target.value;
-    const channelSelection = [...source.defaults.selection];
-    if (source.channel_axis) {
-      channelSelection[source.channel_axis] = channelIndex;
-    }
-
-    // cacluate contrast limits if missing from source;
-    let lim: [min: number, max: number];
-    if (source.contrast_limits[channelIndex]) {
-      lim = source.contrast_limits[channelIndex] as [number, number];
-    } else {
-      const loader = resolveLoaderFromLayerProps(layer.layerProps);
-      const lowres = Array.isArray(loader) ? loader[loader.length - 1] : loader;
-      lim = await calcDataRange(lowres, channelSelection);
-      // Update source data with newly calculated limit
-      setSource((prev) => {
-        const clims = [...prev.contrast_limits];
-        clims[channelIndex] = lim;
-        return { ...prev, contrast_limits: clims };
-      });
-    }
-
-    setLayer((prev) => {
-      const { layerProps } = prev;
-      const selections = [...layerProps.selections, channelSelection];
-      const colors = [...layerProps.colors, hexToRGB(source.colors[channelIndex])];
-      const contrastLimits = [...layerProps.contrastLimitsRange, lim];
-      const channelsVisible = [...layerProps.channelsVisible, true];
-      return {
-        ...prev,
-        layerProps: {
-          ...layerProps,
-          selections,
-          colors,
-          contrastLimits,
-          contrastLimitsRange: [...contrastLimits],
-          channelsVisible,
-        },
-      };
-    });
-  };
-
-  const { names } = source;
-  const open = Boolean(anchorEl);
-  const id = open ? `layer-${source.id}-add-channel` : undefined;
-  return (
-    <>
-      <IconButton
-        onClick={handleClick}
-        aria-describedby={id}
-        style={{
-          backgroundColor: "transparent",
-          padding: 0,
-          zIndex: 2,
-          cursor: "pointer",
-        }}
-        disabled={layer.layerProps.selections.length === MAX_CHANNELS}
-      >
-        <Add />
-      </IconButton>
-      <Popover
-        id={id}
-        open={open}
-        anchorEl={anchorEl}
-        onClose={handleClose}
-        anchorOrigin={{
-          vertical: "bottom",
-          horizontal: "left",
-        }}
-        transformOrigin={{
-          vertical: "top",
-          horizontal: "left",
-        }}
-      >
-        <Paper style={{ padding: "0px 4px", marginBottom: 4, width: "8em" }}>
-          <Typography variant="caption">selection: </Typography>
-          <Divider />
-          <NativeSelect
-            fullWidth
-            style={{ fontSize: "0.7em" }}
-            id={`layer-${source.id}-channel-select`}
-            onChange={handleChange}
-          >
-            <option aria-label="None" value="">
-              None
-            </option>
-            {names.map((name, i) => (
-              <option value={i} key={name}>
-                {name}
-              </option>
-            ))}
-          </NativeSelect>
-        </Paper>
-      </Popover>
-    </>
-  );
-}
-
-export default AddChannelButton;

package/src/components/LayerController/AxisOptions.tsx

@@ -1,93 +0,0 @@
-import { MoreHoriz } from "@mui/icons-material";
-import { Divider, IconButton, Input, Paper, Popover, Typography } from "@mui/material";
-import { styled } from "@mui/material/styles";
-import React, { useState } from "react";
-import type { ChangeEvent, MouseEvent } from "react";
-import { useLayerState, useSourceData } from "../../hooks";
-
-const DenseInput = styled(Input)`
-  width: 5.5em;
-  font-size: 0.7em;
-`;
-
-interface Props {
-  axisIndex: number;
-  max: number;
-}
-
-function AxisOptions({ axisIndex, max }: Props) {
-  const [sourceData] = useSourceData();
-  const [layer, setLayer] = useLayerState();
-  const [anchorEl, setAnchorEl] = useState<null | Element>(null);
-
-  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
-    setAnchorEl(event.currentTarget);
-  };
-
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
-
-  const handleIndexChange = (event: ChangeEvent<HTMLInputElement>) => {
-    let value = +event.target.value;
-    // Restrict value to valid range
-    if (value < 0) value = 0;
-    if (value > max) value = max;
-
-    setLayer((prev) => {
-      let layerProps = { ...prev.layerProps };
-      // for each channel, update index
-      layerProps.selections = layerProps.selections.map((ch) => {
-        let new_ch = [...ch];
-        new_ch[axisIndex] = value;
-        return new_ch;
-      });
-
-      return { ...prev, layerProps };
-    });
-  };
-
-  const open = Boolean(anchorEl);
-  const id = open ? `${axisIndex}-index-${sourceData.id}-options` : undefined;
-  const value = layer.layerProps.selections[0] ? layer.layerProps.selections[0][axisIndex] : 1;
-
-  return (
-    <>
-      <IconButton
-        onClick={handleClick}
-        aria-describedby={id}
-        style={{
-          backgroundColor: "transparent",
-          padding: 0,
-          zIndex: 2,
-          cursor: "pointer",
-        }}
-      >
-        <MoreHoriz />
-      </IconButton>
-      <Popover
-        id={id}
-        open={open}
-        anchorEl={anchorEl}
-        onClose={handleClose}
-        anchorOrigin={{
-          vertical: "bottom",
-          horizontal: "left",
-        }}
-        transformOrigin={{
-          vertical: "top",
-          horizontal: "left",
-        }}
-      >
-        <Paper style={{ padding: "0px 4px", marginBottom: 4 }}>
-          <Typography variant="caption">Index:</Typography>
-          <Divider />
-          <DenseInput value={value} onChange={handleIndexChange} type="number" id="max" fullWidth={false} />
-          <Divider />
-        </Paper>
-      </Popover>
-    </>
-  );
-}
-
-export default AxisOptions;

package/src/components/LayerController/AxisSlider.tsx

@@ -1,86 +0,0 @@
-import { Divider, Grid, Slider, Typography } from "@mui/material";
-import { styled } from "@mui/material/styles";
-import * as React from "react";
-import { useLayerState, useSourceData } from "../../hooks";
-import DimensionOptions from "./AxisOptions";
-
-const DenseSlider = styled(Slider)`
-  color: white;
-  padding: 10px 0px 5px 0px;
-  margin-right: 5px;
-  :active { box-shadow: 0px 0px 0px 8px rgba(158, 158, 158, 0.16); }
-`;
-
-interface Props {
-  axisIndex: number;
-  max: number;
-}
-
-function AxisSlider({ axisIndex, max }: Props) {
-  const [layer, setLayer] = useLayerState();
-  const [sourceData] = useSourceData();
-  const { axis_labels } = sourceData;
-  let axisLabel = axis_labels[axisIndex];
-  if (axisLabel === "t" || axisLabel === "z") {
-    axisLabel = axisLabel.toUpperCase();
-  }
-  // state of the slider to update UI while dragging
-  const [value, setValue] = React.useState(0);
-
-  // If axis index change externally, need to update state
-  React.useEffect(() => {
-    // Use first channel to get initial value of slider - can be undefined on first render
-    setValue(layer.layerProps.selections[0] ? layer.layerProps.selections[0][axisIndex] : 1);
-  }, [layer.layerProps.selections, axisIndex]);
-
-  const handleRelease = () => {
-    setLayer((prev) => {
-      let layerProps = { ...prev.layerProps };
-      // for each channel, update index of this axis
-      layerProps.selections = layerProps.selections.map((ch) => {
-        let new_ch = [...ch];
-        new_ch[axisIndex] = value;
-        return new_ch;
-      });
-      return { ...prev, layerProps };
-    });
-  };
-
-  const handleDrag = (_: Event, value: number | number[]) => {
-    setValue(value as number);
-  };
-
-  return (
-    <>
-      <Grid>
-        <Grid container justifyContent="space-between">
-          <Grid size={{ xs: 10 }}>
-            <div style={{ width: 165, overflow: "hidden", textOverflow: "ellipsis" }}>
-              <Typography variant="caption" noWrap>
-                {axisLabel}: {value}/{max}
-              </Typography>
-            </div>
-          </Grid>
-          <Grid size={{ xs: 1 }}>
-            <DimensionOptions axisIndex={axisIndex} max={max} />
-          </Grid>
-        </Grid>
-        <Grid container justifyContent="space-between">
-          <Grid size={{ xs: 12 }}>
-            <DenseSlider
-              value={value}
-              onChange={handleDrag}
-              onChangeCommitted={handleRelease}
-              min={0}
-              max={max}
-              step={1}
-            />
-          </Grid>
-        </Grid>
-      </Grid>
-      <Divider />
-    </>
-  );
-}
-
-export default AxisSlider;

package/src/components/LayerController/AxisSliders.tsx

@@ -1,29 +0,0 @@
-import { Divider, Grid } from "@mui/material";
-import React from "react";
-import { useSourceData } from "../../hooks";
-import AxisSlider from "./AxisSlider";
-
-function AxisSliders() {
-  const [sourceData] = useSourceData();
-  const { axis_labels, channel_axis, loader } = sourceData;
-
-  const sliders = axis_labels
-    .slice(0, -2) // ignore last two axes, [y,x]
-    .map((name, i): [string, number, number] => [name, i, loader[0].shape[i]]) // capture the name, index, and size of non-yx dims
-    .filter((d) => {
-      if (d[1] === channel_axis) return false; // ignore channel_axis (for OME-Zarr channel_axis === 1)
-      if (d[2] > 1) return true; // keep if size > 1
-      return false; // otherwise ignore as well
-    })
-    .map(([name, i, size]) => <AxisSlider key={name} axisIndex={i} max={size - 1} />);
-
-  if (sliders.length === 0) return null;
-  return (
-    <>
-      <Grid>{sliders}</Grid>
-      <Divider />
-    </>
-  );
-}
-
-export default AxisSliders;

package/src/components/LayerController/ChannelController.tsx

@@ -1,84 +0,0 @@
-import { RadioButtonChecked, RadioButtonUnchecked } from "@mui/icons-material";
-import { Grid, IconButton, Slider, Typography } from "@mui/material";
-import React from "react";
-import { useLayerState, useSourceData } from "../../hooks";
-import ChannelOptions from "./ChannelOptions";
-
-function ChannelController({ channelIndex }: { channelIndex: number }) {
-  const [sourceData] = useSourceData();
-  const [layer, setLayer] = useLayerState();
-
-  const handleContrastChange = (_: Event, v: number | number[]) => {
-    setLayer((prev) => {
-      const contrastLimits = [...prev.layerProps.contrastLimits];
-      contrastLimits[channelIndex] = v as [number, number];
-      return { ...prev, layerProps: { ...prev.layerProps, contrastLimits } };
-    });
-  };
-  const handleVisibilityChange = () => {
-    setLayer((prev) => {
-      const channelsVisible = [...prev.layerProps.channelsVisible];
-      channelsVisible[channelIndex] = !channelsVisible[channelIndex];
-      return { ...prev, layerProps: { ...prev.layerProps, channelsVisible } };
-    });
-  };
-
-  const lp = layer.layerProps;
-
-  // Material slider tries to sort in place. Need to copy.
-  const value = [...lp.contrastLimits[channelIndex]];
-  const color = `rgb(${lp.colormap ? [255, 255, 255] : lp.colors[channelIndex]})`;
-  const on = lp.channelsVisible[channelIndex];
-  const [min, max] = lp.contrastLimitsRange[channelIndex];
-
-  const { channel_axis, names } = sourceData;
-  const selection = lp.selections[channelIndex];
-  const nameIndex = Number.isInteger(channel_axis) ? selection[channel_axis as number] : 0;
-  const label = names[nameIndex];
-  return (
-    <>
-      <Grid container justifyContent="space-between" wrap="nowrap">
-        <Grid size={{ xs: 10 }}>
-          <div style={{ width: 165, overflow: "hidden", textOverflow: "ellipsis" }}>
-            <Typography variant="caption" noWrap>
-              {label}
-            </Typography>
-          </div>
-        </Grid>
-        <Grid size={{ xs: 1 }}>
-          <ChannelOptions channelIndex={channelIndex} />
-        </Grid>
-      </Grid>
-      <Grid container justifyContent="space-between">
-        <Grid size={{ xs: 2 }}>
-          <IconButton
-            style={{
-              color,
-              backgroundColor: "transparent",
-              padding: 0,
-              zIndex: 2,
-            }}
-            onClick={handleVisibilityChange}
-          >
-            {on ? <RadioButtonChecked /> : <RadioButtonUnchecked />}
-          </IconButton>
-        </Grid>
-        <Grid size={{ xs: 10 }}>
-          <Slider
-            value={value}
-            onChange={handleContrastChange}
-            min={min}
-            max={max}
-            step={0.01}
-            style={{
-              padding: "10px 0px 5px 0px",
-              color,
-            }}
-          />
-        </Grid>
-      </Grid>
-    </>
-  );
-}
-
-export default ChannelController;