@biongff/vizarr 1.1.1 → 1.2.0

package/src/layers/viv-layers.ts

@@ -1,55 +0,0 @@
-/**
- * Type-complete interfaces to Viv's core layers
- *
- * @module
- */
-import { ImageLayer as BaseImageLayer, MultiscaleImageLayer as BaseMultiscaleImageLayer } from "@hms-dbmi/viv";
-
-import type { Layer } from "deck.gl";
-import type { Matrix4 } from "math.gl";
-import type { ZarrPixelSource } from "../ZarrPixelSource";
-
-export interface BaseLayerProps {
-  id: string;
-  contrastLimits: Array<[min: number, max: number]>;
-  colors: [r: number, g: number, b: number][];
-  channelsVisible: Array<boolean>;
-  opacity: number;
-  colormap: string; // TODO: more precise
-  selections: number[][];
-  modelMatrix: Matrix4;
-  contrastLimitsRange: [min: number, max: number][];
-  pickable?: boolean;
-  onClick?: (e: Record<string, unknown>) => void;
-}
-
-export interface MultiscaleImageLayerProps extends BaseLayerProps {
-  loader: Array<ZarrPixelSource>;
-}
-
-// @ts-expect-error - Viv does faithfully implement the Layer interface, just not captured in the types
-export class MultiscaleImageLayer
-  extends BaseMultiscaleImageLayer<string[]>
-  implements Layer<MultiscaleImageLayerProps>
-{
-  static layerName = "VizarMultiscaleImageLayer";
-  // biome-ignore lint/complexity/noUselessConstructor: Necessary for TypeScript to get the types
-  constructor(props: MultiscaleImageLayerProps) {
-    // @ts-expect-error - Viv's types are not correct
-    super(props);
-  }
-}
-
-export interface ImageLayerProps extends BaseLayerProps {
-  loader: ZarrPixelSource;
-}
-
-// @ts-expect-error - Viv does faithfully implement the Layer interface, just not captured in the types
-export class ImageLayer extends BaseImageLayer<string[]> implements Layer<ImageLayerProps> {
-  static layerName = "VizarrImageLayer";
-  // biome-ignore lint/complexity/noUselessConstructor: Necessary for TypeScript to get the types
-  constructor(props: ImageLayerProps) {
-    // @ts-expect-error - Viv's types are not correct
-    super(props);
-  }
-}

package/src/lru-store.ts

@@ -1,57 +0,0 @@
-import QuickLRU from "quick-lru";
-
-import type * as zarr from "zarrita";
-
-type RangeQuery =
-  | {
-      offset: number;
-      length: number;
-    }
-  | {
-      suffixLength: number;
-    };
-
-function normalizeKey(key: string, range?: RangeQuery) {
-  if (!range) return key;
-  if ("suffixLength" in range) return `${key}:-${range.suffixLength}`;
-  return `${key}:${range.offset}:${range.offset + range.length - 1}`;
-}
-
-export function lru<S extends zarr.Readable>(store: S, maxSize = 100) {
-  const cache = new QuickLRU<string, Promise<Uint8Array | undefined>>({ maxSize });
-  let getRange = store.getRange ? store.getRange.bind(store) : undefined;
-  function get(...args: Parameters<S["get"]>) {
-    const [key, opts] = args;
-    const cacheKey = normalizeKey(key);
-    const cached = cache.get(cacheKey);
-    if (cached) return cached;
-    const result = Promise.resolve(store.get(key, opts)).catch((err) => {
-      cache.delete(cacheKey);
-      throw err;
-    });
-    cache.set(cacheKey, result);
-    return result;
-  }
-  if (getRange) {
-    const _getRange = getRange;
-    getRange = (...args: Parameters<NonNullable<S["getRange"]>>) => {
-      const [key, range, opts] = args;
-      const cacheKey = normalizeKey(key, range);
-      const cached = cache.get(cacheKey);
-      if (cached) return cached;
-      const result = Promise.resolve(_getRange?.(key, range, opts)).catch((err) => {
-        cache.delete(cacheKey);
-        throw err;
-      });
-      cache.set(cacheKey, result);
-      return result;
-    };
-  }
-  return new Proxy(store, {
-    get(target, prop, receiver) {
-      if (prop === "get") return get;
-      if (prop === "getRange" && getRange) return getRange;
-      return Reflect.get(target, prop, receiver);
-    },
-  });
-}

package/src/ome.ts

@@ -1,388 +0,0 @@
-import pMap from "p-map";
-import * as zarr from "zarrita";
-import type { ImageLabels, ImageLayerConfig, OnClickData, SourceData } from "./state";
-
-import { ZarrPixelSource } from "./ZarrPixelSource";
-import * as utils from "./utils";
-
-export async function loadWell(
-  config: ImageLayerConfig,
-  grp: zarr.Group<zarr.Readable>,
-  wellAttrs: Ome.Well,
-): Promise<SourceData> {
-  // Can filter Well fields by URL query ?acquisition=ID
-  const acquisitionId: number | undefined = config.acquisition ? Number.parseInt(config.acquisition) : undefined;
-  let acquisitions: Ome.Acquisition[] = [];
-
-  utils.assert(wellAttrs?.images, "Well .zattrs missing images");
-  utils.assert(grp.path, "Cannot inspect zarr path to open well.");
-
-  const [row, col] = grp.path.split("/").filter(Boolean).slice(-2);
-
-  let { images } = wellAttrs;
-
-  // Do we have more than 1 Acquisition?
-  const acqIds = images.flatMap((img) => (img.acquisition ? [img.acquisition] : []));
-
-  if (acqIds.length > 1) {
-    // Need to get acquisitions metadata from parent Plate
-    const platePath = grp.path.replace(`${row}/${col}`, "");
-    const plate = await zarr.open(grp.resolve(platePath));
-    const plateAttrs = utils.resolveAttrs(plate.attrs) as { plate: Ome.Plate };
-    acquisitions = plateAttrs.plate.acquisitions ?? [];
-    // filter imagePaths by acquisition
-    if (acquisitionId && acqIds.includes(acquisitionId)) {
-      images = images.filter((img) => img.acquisition === acquisitionId);
-    }
-  }
-
-  const imgPaths = images.map((img) => img.path);
-  const cols = Math.ceil(Math.sqrt(imgPaths.length));
-  const rows = Math.ceil(imgPaths.length / cols);
-
-  // Use first image for rendering settings, resolutions etc.
-  const first = await zarr.open(grp.resolve(imgPaths[0]), { kind: "group" });
-  const imgAttrs = utils.resolveAttrs(first.attrs);
-
-  utils.assert(utils.isMultiscales(imgAttrs), "Path for image is not valid.");
-  let resolution = imgAttrs.multiscales[0].datasets[0].path;
-
-  // Create loader for every Image.
-  const promises = imgPaths.map((p) => {
-    const loc = grp.resolve(utils.join(p, resolution));
-    // @ts-expect-error - ok flag to avoid loading unused attrs
-    const arr: zarr.Array<zarr.DataType, zarr.Readable> = zarr.open(loc, { kind: "array", attrs: false });
-    return arr;
-  });
-  const data = await Promise.all(promises);
-  const axes = utils.getNgffAxes(imgAttrs.multiscales);
-  const axis_labels = utils.getNgffAxisLabels(axes);
-
-  const tileSize = utils.guessTileSize(data[0]);
-  const loaders = utils.range(rows).flatMap((row) => {
-    // filter to remove any empty row/col position
-    return utils
-      .range(cols)
-      .filter((col) => col + row * cols < data.length)
-      .map((col) => {
-        const offset = col + row * cols;
-        return {
-          name: String(offset),
-          row,
-          col,
-          loader: new ZarrPixelSource(data[offset], { labels: axis_labels, tileSize }),
-        };
-      });
-  });
-
-  let meta: Meta;
-  if (utils.isOmeMultiscales(imgAttrs)) {
-    meta = parseOmeroMeta(imgAttrs.omero, axes);
-  } else {
-    const lowres = loaders.at(-1);
-    utils.assert(lowres, "Expected at least one resolution, found none.");
-    meta = await defaultMeta(lowres.loader, axis_labels);
-  }
-
-  const sourceData: SourceData = {
-    loaders,
-    ...meta,
-    axis_labels,
-    loader: [loaders[0].loader],
-    model_matrix: utils.parseMatrix(config.model_matrix),
-    defaults: {
-      selection: meta.defaultSelection,
-      colormap: config.colormap ?? "",
-      opacity: config.opacity ?? 1,
-    },
-    name: `Well ${row}${col}`,
-  };
-
-  if (acquisitions.length > 0) {
-    // To show acquisition chooser in UI
-    sourceData.acquisitions = acquisitions;
-    sourceData.acquisitionId = acquisitionId || -1;
-  }
-
-  sourceData.rows = rows;
-  sourceData.columns = cols;
-  sourceData.onClick = (info: OnClickData) => {
-    let gridCoord = info.gridCoord;
-    if (!gridCoord) {
-      return;
-    }
-    const { row, column } = gridCoord;
-    let imgSource = undefined;
-    if (typeof config.source === "string" && grp.path && !Number.isNaN(row) && !Number.isNaN(column)) {
-      const field = row * cols + column;
-      imgSource = utils.join(config.source, imgPaths[field]);
-    }
-    if (config.onClick) {
-      info.layer = undefined;
-      info.imageSource = imgSource;
-      config.onClick(info);
-    } else if (imgSource) {
-      window.open(`${window.location.origin + window.location.pathname}?source=${imgSource}`);
-    }
-  };
-
-  return sourceData;
-}
-
-export async function loadPlate(
-  config: ImageLayerConfig,
-  grp: zarr.Group<zarr.Readable>,
-  plateAttrs: Ome.Plate,
-): Promise<SourceData> {
-  utils.assert(plateAttrs?.rows || plateAttrs?.columns, "Plate .zattrs missing rows, columns or wells");
-
-  const rows = plateAttrs.rows.map((row) => row.name);
-  const columns = plateAttrs.columns.map((row) => row.name);
-
-  // Fields are by index and we assume at least 1 per Well
-  const wellPaths = plateAttrs.wells.map((well) => well.path);
-  const zarrVersion = await utils.guessZarrVersion(grp);
-
-  // Use first image as proxy for others.
-  const wellAttrs = await utils.getAttrsOnly<{ well: Ome.Well }>(grp, {
-    path: wellPaths[0],
-    zarrVersion,
-  });
-  utils.assert("well" in wellAttrs, "Path for image is not valid, not a well.");
-
-  const imgPath = wellAttrs.well.images[0].path;
-  const imgAttrs = await utils.getAttrsOnly<Ome.Attrs>(grp, {
-    path: utils.join(wellPaths[0], imgPath),
-    zarrVersion,
-  });
-  utils.assert("multiscales" in imgAttrs, "Path for image is not valid.");
-
-  // Lowest resolution is the 'path' of the last 'dataset' from the first multiscales
-  const { datasets } = imgAttrs.multiscales[0];
-  const resolution = datasets[datasets.length - 1].path;
-
-  async function getImgPath(wellPath: string) {
-    const wellAttrs = await utils.getAttrsOnly<{ well: Ome.Well }>(grp, {
-      path: wellPath,
-      zarrVersion,
-    });
-    utils.assert("well" in wellAttrs, "Path for image is not valid, not a well.");
-    return utils.join(wellPath, wellAttrs.well.images[0].path);
-  }
-  const wellImagePaths = await Promise.all(wellPaths.map(getImgPath));
-
-  // Create loader for every Well. Some loaders may be undefined if Wells are missing.
-  const mapper = async ([key, path]: string[]) => {
-    // @ts-expect-error - we don't need the meta for these arrays
-    let arr: zarr.Array<zarr.DataType, zarr.Readable> = await zarr.open(grp.resolve(path), {
-      kind: "array",
-      attrs: false,
-    });
-    return [key, arr] as const;
-  };
-
-  const promises = await pMap(
-    wellImagePaths.map((p) => [p, utils.join(p, resolution)]),
-    mapper,
-    { concurrency: 10 },
-  );
-  const data = await Promise.all(promises);
-  const axes = utils.getNgffAxes(imgAttrs.multiscales);
-  const axis_labels = utils.getNgffAxisLabels(axes);
-  const tileSize = utils.guessTileSize(data[0][1]);
-  const loaders = data.map((d) => {
-    const [row, col] = d[0].split("/");
-    return {
-      name: `${row}${col}`,
-      row: rows.indexOf(row),
-      col: columns.indexOf(col),
-      loader: new ZarrPixelSource(d[1], { labels: axis_labels, tileSize }),
-    };
-  });
-  let meta: Meta;
-  if ("omero" in imgAttrs) {
-    meta = parseOmeroMeta(imgAttrs.omero, axes);
-  } else {
-    const lowres = loaders.at(-1);
-    utils.assert(lowres, "Expected at least one resolution, found none.");
-    meta = await defaultMeta(lowres.loader, axis_labels);
-  }
-
-  // Load Image to use for channel names, rendering settings, sizeZ, sizeT etc.
-  const sourceData: SourceData = {
-    loaders,
-    ...meta,
-    axis_labels,
-    loader: [loaders[0].loader],
-    model_matrix: utils.parseMatrix(config.model_matrix),
-    defaults: {
-      selection: meta.defaultSelection,
-      colormap: config.colormap ?? "",
-      opacity: config.opacity ?? 1,
-    },
-    name: plateAttrs.name || "Plate",
-    rows: rows.length,
-    columns: columns.length,
-  };
-  // Us onClick from image config or Open Well in new window
-  sourceData.onClick = (info: OnClickData) => {
-    let gridCoord = info.gridCoord;
-    if (!gridCoord) {
-      return;
-    }
-    const { row, column } = gridCoord;
-    let imgSource = undefined;
-    if (typeof config.source === "string" && grp.path && !Number.isNaN(row) && !Number.isNaN(column)) {
-      imgSource = utils.join(config.source, rows[row], columns[column]);
-    }
-    if (config.onClick) {
-      info.layer = undefined;
-      info.imageSource = imgSource;
-      config.onClick(info);
-    } else if (imgSource) {
-      window.open(`${window.location.origin + window.location.pathname}?source=${imgSource}`);
-    }
-  };
-  return sourceData;
-}
-
-export async function loadOmeMultiscales(
-  config: ImageLayerConfig,
-  grp: zarr.Group<zarr.Readable>,
-  attrs: { multiscales: Ome.Multiscale[] },
-): Promise<SourceData> {
-  const { name, opacity = 1, colormap = "" } = config;
-  const data = await utils.loadMultiscales(grp, attrs.multiscales);
-  const axes = utils.getNgffAxes(attrs.multiscales);
-  const axis_labels = utils.getNgffAxisLabels(axes);
-  const tileSize = utils.guessTileSize(data[0]);
-  let meta: Meta;
-  if (utils.isOmeMultiscales(attrs)) {
-    meta = parseOmeroMeta(attrs.omero, axes);
-  } else {
-    const lowresArray = data.at(-1);
-    utils.assert(lowresArray, "Expected at least one resolution in multiscales, found none.");
-    const lowresSource = new ZarrPixelSource(lowresArray, { labels: axis_labels, tileSize });
-    meta = await defaultMeta(lowresSource, axis_labels);
-  }
-  const physicalSizes = utils.getPhysicalSizes(utils.resolveAttrs(attrs));
-  const loader = data.map(
-    (arr, i) =>
-      new ZarrPixelSource(arr, {
-        labels: axis_labels,
-        tileSize,
-        ...(i === 0 ? { meta: { physicalSizes } } : {}),
-      }),
-  );
-  const labels = await resolveOmeLabelsFromMultiscales(grp);
-  return {
-    loader: loader,
-    axis_labels,
-    model_matrix: config.model_matrix
-      ? utils.parseMatrix(config.model_matrix)
-      : utils.coordinateTransformationsToMatrix(attrs.multiscales),
-    defaults: {
-      selection: meta.defaultSelection,
-      colormap,
-      opacity,
-    },
-    ...meta,
-    name: meta.name ?? name,
-    labels: await Promise.all(labels.map((name) => loadOmeImageLabel(grp.resolve("labels"), name))),
-  };
-}
-
-async function loadOmeImageLabel(root: zarr.Location<zarr.Readable>, name: string): Promise<ImageLabels[number]> {
-  const grp = await zarr.open(root.resolve(name), { kind: "group" });
-  const attrs = utils.resolveAttrs(grp.attrs);
-  utils.assert(utils.isOmeImageLabel(attrs), "No 'image-label' metadata.");
-  const data = await utils.loadMultiscales(grp, attrs.multiscales);
-  const baseResolution = data.at(0);
-  utils.assert(baseResolution, "No base resolution found for multiscale labels.");
-  const tileSize = utils.guessTileSize(baseResolution);
-  const axes = utils.getNgffAxes(attrs.multiscales);
-  const labels = utils.getNgffAxisLabels(axes);
-  const colors = (attrs["image-label"].colors ?? []).map((d) => ({ labelValue: d["label-value"], rgba: d.rgba }));
-  return {
-    name,
-    modelMatrix: utils.coordinateTransformationsToMatrix(attrs.multiscales),
-    loader: data.map((arr) => new ZarrPixelSource(arr, { labels, tileSize })),
-    colors: colors.length > 0 ? colors : undefined,
-  };
-}
-
-async function resolveOmeLabelsFromMultiscales(grp: zarr.Group<zarr.Readable>): Promise<Array<string>> {
-  return zarr
-    .open(grp.resolve("labels"), { kind: "group" })
-    .then(({ attrs }) => (utils.resolveAttrs(attrs).labels ?? []) as Array<string>)
-    .catch((e) => {
-      utils.rethrowUnless(e, zarr.NodeNotFoundError);
-      return [];
-    });
-}
-
-type Meta = {
-  name: string | undefined;
-  names: Array<string>;
-  colors: Array<string>;
-  contrast_limits: Array<[number, number] | undefined>;
-  visibilities: Array<boolean>;
-  channel_axis: number | null;
-  defaultSelection: Array<number>;
-};
-
-async function defaultMeta(loader: ZarrPixelSource, axis_labels: string[]): Promise<Meta> {
-  const channel_axis = axis_labels.indexOf("c");
-  const channel_count = channel_axis === -1 ? 1 : loader.shape[channel_axis];
-  const visibilities = utils.getDefaultVisibilities(channel_count);
-  const contrast_limits = await utils.calcConstrastLimits(loader, channel_axis, visibilities);
-  const colors = utils.getDefaultColors(channel_count, visibilities);
-  return {
-    name: "Image",
-    names: utils.range(channel_count).map((i) => `channel_${i}`),
-    colors,
-    contrast_limits,
-    visibilities,
-    channel_axis: axis_labels.includes("c") ? axis_labels.indexOf("c") : null,
-    defaultSelection: axis_labels.map(() => 0),
-  };
-}
-
-function parseOmeroMeta({ rdefs, channels, name }: Ome.Omero, axes: Ome.Axis[]): Meta {
-  const t = rdefs?.defaultT ?? 0;
-  const z = rdefs?.defaultZ ?? 0;
-  const greyscale = rdefs?.model === "greyscale";
-
-  const colors: string[] = [];
-  const contrast_limits: [min: number, max: number][] = [];
-  const visibilities: boolean[] = [];
-  const names: string[] = [];
-
-  channels.forEach((c, index) => {
-    colors.push(c.color);
-    contrast_limits.push([c.window.start, c.window.end]);
-    visibilities.push(c.active);
-    names.push(c.label || `${index}`);
-  });
-
-  if (greyscale && colors.length === 1) {
-    colors[0] = "FFFFFF";
-  }
-
-  const defaultSelection = axes.map((axis) => {
-    if (axis.type === "time") return t;
-    if (axis.name === "z") return z;
-    return 0;
-  });
-  const channel_axis = axes.findIndex((axis) => axis.type === "channel");
-
-  return {
-    name,
-    names,
-    colors,
-    contrast_limits,
-    visibilities,
-    channel_axis,
-    defaultSelection,
-  };
-}

package/src/state.ts

@@ -1,202 +0,0 @@
-import { type Atom, atom } from "jotai";
-import { atomFamily, splitAtom, waitForAll } from "jotai/utils";
-import { RedirectError, rethrowUnless } from "./utils";
-
-import type { Deck, Layer } from "deck.gl";
-import type { PrimitiveAtom } from "jotai";
-import type { AtomFamily } from "jotai/vanilla/utils/atomFamily";
-import type { Matrix4 } from "math.gl";
-import type * as zarr from "zarrita";
-import type { ZarrPixelSource } from "./ZarrPixelSource";
-import { initLayerStateFromSource } from "./io";
-
-import { GridLayer, type GridLayerProps, type GridLoader } from "./layers/grid-layer";
-import { LabelLayer, type LabelLayerProps, type OmeColor } from "./layers/label-layer";
-import {
-  ImageLayer,
-  type ImageLayerProps,
-  MultiscaleImageLayer,
-  type MultiscaleImageLayerProps,
-} from "./layers/viv-layers";
-
-export interface ViewState {
-  zoom: number;
-  target: [number, number];
-  width?: number;
-  height?: number;
-}
-
-interface BaseConfig {
-  source: string | zarr.Readable;
-  axis_labels?: string[];
-  name?: string;
-  colormap?: string;
-  opacity?: number;
-  acquisition?: string;
-  model_matrix?: string | number[];
-  onClick?: (e: unknown) => void;
-}
-
-export interface MultichannelConfig extends BaseConfig {
-  colors?: string[];
-  channel_axis?: number;
-  contrast_limits?: [min: number, max: number][];
-  names?: string[];
-  visibilities?: boolean[];
-}
-
-export interface SingleChannelConfig extends BaseConfig {
-  color?: string;
-  contrast_limits?: [min: number, max: number];
-  visibility?: boolean;
-}
-
-export type ImageLayerConfig = MultichannelConfig | SingleChannelConfig;
-
-export type OnClickData = Record<string, unknown> & {
-  gridCoord?: { row: number; column: number };
-};
-
-export type ImageLabels = Array<{
-  name: string;
-  loader: ZarrPixelSource[];
-  modelMatrix: Matrix4;
-  colors?: ReadonlyArray<OmeColor>;
-}>;
-
-export type SourceData = {
-  loader: ZarrPixelSource[];
-  loaders?: GridLoader[]; // for OME plates
-  rows?: number;
-  columns?: number;
-  acquisitions?: Ome.Acquisition[];
-  acquisitionId?: number;
-  name?: string;
-  channel_axis: number | null;
-  colors: string[];
-  names: string[];
-  contrast_limits: ([min: number, max: number] | undefined)[];
-  visibilities: boolean[];
-  defaults: {
-    selection: number[];
-    colormap: string;
-    opacity: number;
-  };
-  model_matrix: Matrix4;
-  axis_labels: string[];
-  onClick?: (e: OnClickData) => void;
-  labels?: ImageLabels;
-};
-
-type LayerType = "image" | "multiscale" | "grid";
-type LayerPropsMap = {
-  image: ImageLayerProps;
-  multiscale: MultiscaleImageLayerProps;
-  grid: GridLayerProps;
-};
-
-export type LayerState<T extends LayerType = LayerType> = {
-  kind: T;
-  layerProps: LayerPropsMap[T];
-  on: boolean;
-  labels?: Array<{
-    layerProps: Omit<LabelLayerProps, "selection">;
-    on: boolean;
-    transformSourceSelection: (sourceSelection: Array<number>) => Array<number>;
-  }>;
-};
-
-type WithId<T> = T & { id: string };
-
-export const viewStateAtom = atom<ViewState | null>(null);
-export const sourceErrorAtom = atom<string | null>(null);
-
-export interface Redirect {
-  url: string;
-  message: string;
-}
-export const redirectObjAtom = atom<Redirect | null>(null);
-
-export const viewportAtom = atom<Deck | null>(null);
-
-export const sourceInfoAtom = atom<WithId<SourceData>[]>([]);
-
-export const addImageAtom = atom(null, async (get, set, config: ImageLayerConfig) => {
-  const { createSourceData } = await import("./io");
-  const id = Math.random().toString(36).slice(2);
-
-  try {
-    const sourceData = await createSourceData(config);
-    const prevSourceInfo = get(sourceInfoAtom);
-    if (!sourceData.name) {
-      sourceData.name = `image_${Object.keys(prevSourceInfo).length}`;
-    }
-    set(sourceInfoAtom, [...prevSourceInfo, { id, ...sourceData }]);
-  } catch (err) {
-    rethrowUnless(err, Error);
-    if (err instanceof RedirectError) {
-      set(redirectObjAtom, { message: err.message, url: err.url });
-    } else {
-      set(sourceErrorAtom, err.message);
-    }
-  }
-});
-
-export const sourceInfoAtomAtoms = splitAtom(sourceInfoAtom);
-
-export const layerFamilyAtom: AtomFamily<WithId<SourceData>, PrimitiveAtom<WithId<LayerState>>> = atomFamily(
-  (param: WithId<SourceData>) => atom({ ...initLayerStateFromSource(param), id: param.id }),
-  (a, b) => a.id === b.id,
-);
-
-export type VizarrLayer =
-  | Layer<MultiscaleImageLayerProps>
-  | Layer<ImageLayerProps>
-  | Layer<GridLayerProps>
-  | Layer<LabelLayerProps>;
-
-const LayerConstructors = {
-  image: ImageLayer,
-  multiscale: MultiscaleImageLayer,
-  grid: GridLayer,
-} as const;
-
-const layerInstanceFamily = atomFamily((a: Atom<LayerState>) =>
-  atom((get) => {
-    const { on, layerProps, kind } = get(a);
-    if (!on) {
-      return null;
-    }
-    const Layer = LayerConstructors[kind];
-    // @ts-expect-error - TS can't resolve that Layer & layerProps bound together
-    return new Layer({ ...layerProps, pickable: layerProps.pickable ?? false }) as VizarrLayer;
-  }),
-);
-
-const imageLabelsIstanceFamily = atomFamily((a: Atom<LayerState>) =>
-  atom((get) => {
-    const { on, labels, layerProps } = get(a);
-    if (!on || !labels) {
-      return [];
-    }
-    return labels.map((label) =>
-      label.on
-        ? new LabelLayer({
-            ...label.layerProps,
-            selection: label.transformSourceSelection(layerProps.selections[0]),
-            pickable: true,
-          })
-        : null,
-    );
-  }),
-);
-
-export const layerAtoms = atom((get) => {
-  const layerAtoms = [];
-  for (const sourceAtom of get(sourceInfoAtomAtoms)) {
-    const layerStateAtom = layerFamilyAtom(get(sourceAtom));
-    layerAtoms.push(layerInstanceFamily(layerStateAtom));
-    layerAtoms.push(imageLabelsIstanceFamily(layerStateAtom));
-  }
-  return get(waitForAll(layerAtoms)).flat();
-});