From 30c9e3b4195c47d08aa41c955072407e02cc623f Mon Sep 17 00:00:00 2001 From: Trevor Manz Date: Thu, 6 Mar 2025 12:07:28 -0500 Subject: [PATCH 1/8] Support OME "labels" metadata --- main.ts | 16 +- src/components/LayerController/Content.tsx | 10 + src/components/LayerController/Labels.tsx | 50 +++ src/io.ts | 61 ++++ src/layers/label-layer.ts | 352 +++++++++++++++++++++ src/ome.ts | 35 +- src/state.ts | 34 +- src/types.ts | 20 +- src/utils.ts | 31 +- 9 files changed, 590 insertions(+), 19 deletions(-) create mode 100644 src/components/LayerController/Labels.tsx create mode 100644 src/layers/label-layer.ts diff --git a/main.ts b/main.ts index b35da4a7..18b7f4d6 100644 --- a/main.ts +++ b/main.ts @@ -20,14 +20,14 @@ async function main() { // Add event listener to sync viewState as query param. // Debounce to limit how quickly we are pushing to browser history - viewer.on( - "viewStateChange", - debounce((update: vizarr.ViewState) => { - const url = new URL(window.location.href); - url.searchParams.set("viewState", JSON.stringify(update)); - window.history.pushState({}, "", decodeURIComponent(url.href)); - }, 200), - ); + // viewer.on( + // "viewStateChange", + // debounce((update: vizarr.ViewState) => { + // const url = new URL(window.location.href); + // url.searchParams.set("viewState", JSON.stringify(update)); + // window.history.pushState({}, "", decodeURIComponent(url.href)); + // }, 200), + // ); // parse image config // @ts-expect-error - TODO: validate config diff --git a/src/components/LayerController/Content.tsx b/src/components/LayerController/Content.tsx index da2552c0..7f0a2ac2 100644 --- a/src/components/LayerController/Content.tsx +++ b/src/components/LayerController/Content.tsx @@ -6,6 +6,7 @@ import AcquisitionController from "./AcquisitionController"; import AddChannelButton from "./AddChannelButton"; import AxisSliders from "./AxisSliders"; import ChannelController from "./ChannelController"; +import Labels from "./Labels"; import OpacitySlider from "./OpacitySlider"; import { useLayerState } from "../../hooks"; @@ -22,6 +23,7 @@ const Details = withStyles({ function Content() { const [layer] = useLayerState(); const nChannels = layer.layerProps.selections.length; + const nLabels = layer.labels?.layerProps.length ?? 0; return (
@@ -51,6 +53,14 @@ function Content() { ))} + {nLabels > 0 && ( + + labels: + {range(nLabels).map((i) => ( + + ))} + + )}
); diff --git a/src/components/LayerController/Labels.tsx b/src/components/LayerController/Labels.tsx new file mode 100644 index 00000000..9ea0d867 --- /dev/null +++ b/src/components/LayerController/Labels.tsx @@ -0,0 +1,50 @@ +import { Divider, Typography } from "@material-ui/core"; +import { Slider } from "@material-ui/core"; +import { withStyles } from "@material-ui/styles"; +import React from "react"; + +import { useLayerState, useSourceData } from "../../hooks"; +import { assert } from "../../utils"; + +const DenseSlider = withStyles({ + root: { + color: "white", + padding: "10px 0px 5px 0px", + marginRight: "5px", + }, + active: { + boxshadow: "0px 0px 0px 8px rgba(158, 158, 158, 0.16)", + }, +})(Slider); + +export default function Labels({ labelIndex }: { labelIndex: number }) { + const [source] = useSourceData(); + const [layer, setLayer] = useLayerState(); + assert(source.labels && layer.kind === "multiscale" && layer.labels, "Missing image labels"); + + const handleOpacityChange = (_: unknown, value: number | number[]) => { + setLayer((prev) => { + assert(prev.kind === "multiscale" && prev.labels, "Missing image labels"); + return { + ...prev, + labels: { + ...prev.labels, + layerProps: prev.labels.layerProps.with(labelIndex, { + ...prev.labels.layerProps[labelIndex], + opacity: value as number, + }), + }, + }; + }); + }; + + const { name } = source.labels[labelIndex]; + const { opacity } = layer.labels.layerProps[labelIndex]; + return ( + <> + + {name} + + + ); +} diff --git a/src/io.ts b/src/io.ts index d0dc52d4..b5355039 100644 --- a/src/io.ts +++ b/src/io.ts @@ -218,6 +218,24 @@ export function initLayerStateFromSource(source: SourceData & { id: string }): L }; } + let labels = undefined; + if (source.labels && source.labels.length > 0) { + labels = { + on: true, + layerProps: source.labels.map((label, i) => ({ + id: `${source.id}_${i}`, + loader: label.loader, + modelMatrix: label.modelMatrix, + opacity: 1, + colors: label.colors, + })), + transformSourceSelection: getTransformSourceSelectionFromLabels( + source.labels.map((label) => label.loader[0]), + source.loader[0], + ), + }; + } + return { kind: "multiscale", layerProps: { @@ -225,5 +243,48 @@ export function initLayerStateFromSource(source: SourceData & { id: string }): L loader: source.loader, }, on: true, + labels, + }; +} + +function getTransformSourceSelectionFromLabels( + labelsResolutions: Array<{ shape: Array; labels: Array }>, + source: { shape: Array; labels: Array }, +) { + // representative source for labels + const labelsSource = labelsResolutions[0]; + utils.assert( + source.shape.length === source.labels.length, + `Image source axes and shape are not same rank. Got ${JSON.stringify(source)}`, + ); + utils.assert( + labelsSource.shape.length === labelsSource.labels.length, + `Label axes and shape are not same rank. Got ${JSON.stringify(labelsSource)}`, + ); + utils.assert( + labelsSource.labels.every((label) => source.labels.includes(label)), + `Label axes MUST be a subset of source. Source: ${JSON.stringify(source.labels)} Labels: ${JSON.stringify(labelsSource.labels)}`, + ); + for (const { labels, shape } of labelsResolutions.slice(1)) { + utils.assert( + utils.zip(labels, labelsSource.labels).every(([a, b]) => a === b), + `Error: All labels must share the same axes. Mismatched labels found: ${JSON.stringify(labels)}`, + ); + utils.assert( + utils.zip(shape, labelsSource.shape).every(([a, b]) => a === b), + `Error: All labels must share the same shape. Mismatched labels found: ${JSON.stringify(shape)}`, + ); + } + // Identify labels that should always map to 0, regardless of the source selection. + const excludeFromTransformedSelection = new Set( + utils + .zip(labelsSource.labels, labelsSource.shape) + .filter(([_, size]) => size === 1) + .map(([name, _]) => name), + ); + return (sourceSelection: Array): Array => { + return labelsSource.labels.map((name) => + excludeFromTransformedSelection.has(name) ? 0 : sourceSelection[source.labels.indexOf(name)], + ); }; } diff --git a/src/layers/label-layer.ts b/src/layers/label-layer.ts new file mode 100644 index 00000000..745cf9cc --- /dev/null +++ b/src/layers/label-layer.ts @@ -0,0 +1,352 @@ +import { BitmapLayer, TileLayer } from "deck.gl"; +import * as utils from "../utils"; + +import type { Layer, UpdateParameters } from "deck.gl"; +import { type Matrix4, clamp } from "math.gl"; +import type * as zarr from "zarrita"; +import type { ZarrPixelSource } from "../ZarrPixelSource"; + +type Texture = ReturnType; + +export type OmeColor = Readonly<{ + labelValue: number; + rgba: readonly [r: number, g: number, b: number, a: number]; +}>; + +export interface LabelLayerProps { + id: string; + loader: Array; + selection: Array; + opacity: number; + modelMatrix: Matrix4; + colors?: ReadonlyArray; +} + +/** + * @see {@href https://ngff.openmicroscopy.org/0.5/index.html#labels-md} + * + * The pixels of the label images MUST be integer data types, i.e. one of [uint8, int8, uint16, int16, uint32, int32, uint64, int64]. + */ +type LabelDataType = zarr.Uint8 | zarr.Int8 | zarr.Uint16 | zarr.Int16 | zarr.Uint32 | zarr.Int32; +// TODO: bigint data types are supported by the spec but not by Viv's data loader. +// | zarr.Uint64 +// | zarr.Int64; + +/** The decoded tile data from a OME-NGFF label source */ +type LabelPixelData = { + data: zarr.TypedArray; + width: number; + height: number; +}; + +export class LabelLayer extends TileLayer { + static layerName = "VizarrLabelLayer"; + // @ts-expect-error - only way to extend the base state type + state!: { colorTexture: Texture } & TileLayer["state"]; + + constructor(props: LabelLayerProps) { + const resolutions = props.loader; + const dimensions = { + height: resolutions[0].shape.at(-2), + width: resolutions[0].shape.at(-1), + }; + utils.assert(dimensions.width && dimensions.height); + const tileSize = getTileSizeForResolutions(resolutions); + super({ + id: `labels-${props.id}`, + extent: [0, 0, dimensions.width, dimensions.height], + tileSize: tileSize, + minZoom: Math.round(-(resolutions.length - 1)), + opacity: props.opacity, + maxZoom: 0, + modelMatrix: props.modelMatrix, + colors: props.colors, + zoomOffset: Math.round(Math.log2(props.modelMatrix ? props.modelMatrix.getScale()[0] : 1)), + updateTriggers: { + getTileData: [props.loader, props.selection], + }, + async getTileData({ index, signal }) { + const { x, y, z } = index; + const resolution = resolutions[Math.round(-z)]; + const request = { x, y, signal, selection: props.selection }; + let { data, width, height } = await resolution.getTile(request); + utils.assert( + !(data instanceof Float32Array) && !(data instanceof Float64Array), + `The pixels of labels MUST be integer data types, got ${JSON.stringify(resolution.dtype)}`, + ); + return { data, width, height }; + }, + }); + } + + renderSubLayers( + params: TileLayer["props"] & { + data: LabelPixelData; + tile: { + index: { x: number; y: number; z: number }; + boundingBox: [min: Array, max: Array]; + }; + }, + ): Layer { + const { tile, data, ...props } = params; + const [[left, bottom], [right, top]] = tile.boundingBox; + utils.assert(props.extent, "missing extent"); + const [_x0, _y0, width, height] = props.extent; + return new GrayscaleBitmapLayer({ + id: `tile-${tile.index.x}.${tile.index.y}.${tile.index.z}-${props.id}`, + pixelData: data, + opacity: props.opacity, + modelMatrix: props.modelMatrix, + colorTexture: this.state.colorTexture, + bounds: [clamp(left, 0, width), clamp(top, 0, height), clamp(right, 0, width), clamp(bottom, 0, height)], + // For underlying class + image: new ImageData(data.width, data.height), + pickable: false, + }); + } + + updateState({ props, oldProps, changeFlags, ...rest }: UpdateParameters): void { + super.updateState({ props, oldProps, changeFlags, ...rest }); + // we make the colorTexture on this layer so we can share it amoung all the sublayers + if (props.colors !== oldProps.colors || !this.state.colorTexture) { + this.state.colorTexture?.destroy(); + const colorTexture = createColorTexture({ + source: props.colors, + maxTextureDimension2D: this.context.device.limits.maxTextureDimension2D, + }); + this.setState({ + colorTexture: this.context.device.createTexture({ + width: colorTexture.width, + height: colorTexture.height, + data: colorTexture.data, + dimension: "2d", + mipmaps: false, + sampler: { + minFilter: "nearest", + magFilter: "nearest", + addressModeU: "clamp-to-edge", + addressModeV: "clamp-to-edge", + }, + format: "rgba8unorm", + }), + }); + } + } +} + +export class GrayscaleBitmapLayer extends BitmapLayer<{ pixelData: LabelPixelData; colorTexture: Texture }> { + static layerName = "VizarrGrayscaleBitmapLayer"; + // @ts-expect-error - only way to extend the base state type + state!: { texture: Texture } & BitmapLayer["state"]; + + getShaders() { + const sampler = ( + { + Uint8Array: "usampler2D", + Uint16Array: "usampler2D", + Uint32Array: "usampler2D", + Int8Array: "isampler2D", + Int16Array: "isampler2D", + Int32Array: "isampler2D", + } as const + )[typedArrayConstructorName(this.props.pixelData.data)]; + // replace the builtin fragment shader with our own + return { + ...super.getShaders(), + fs: `\ +#version 300 es +#define SHADER_NAME grayscale-bitmap-layer-fragment-shader + +precision highp float; +precision highp int; +precision highp ${sampler}; + +uniform ${sampler} grayscaleTexture; +uniform sampler2D colorTexture; +uniform float colorTextureWidth; +uniform float colorTextureHeight; +uniform float opacity; + +in vec2 vTexCoord; +out vec4 fragColor; + +void main() { + int index = int(texture(grayscaleTexture, vTexCoord).r); + float x = (mod(float(index), colorTextureWidth) + 0.5) / colorTextureWidth; + float y = (floor(float(index) / colorTextureWidth) + 0.5) / colorTextureHeight; + vec2 uv = vec2(x, y); + vec3 color = texture(colorTexture, uv).rgb; + fragColor = vec4(color, ((index > 0) ? 1.0 : 0.0) * opacity); +} +`, + }; + } + + updateState({ props, oldProps, changeFlags, ...rest }: UpdateParameters): void { + super.updateState({ props, oldProps, changeFlags, ...rest }); + if (props.pixelData !== oldProps.pixelData) { + this.state.texture?.destroy(); + this.setState({ + texture: this.context.device.createTexture({ + width: props.pixelData.width, + height: props.pixelData.height, + data: props.pixelData.data, + dimension: "2d", + mipmaps: false, + sampler: { + minFilter: "nearest", + magFilter: "nearest", + addressModeU: "clamp-to-edge", + addressModeV: "clamp-to-edge", + }, + format: ( + { + Uint8Array: "r8uint", + Uint16Array: "r16uint", + Uint32Array: "r32uint", + Int8Array: "r8sint", + Int16Array: "r16sint", + Int32Array: "r32sint", + } as const + )[typedArrayConstructorName(props.pixelData.data)], + }), + }); + } + } + + draw(opts: unknown) { + const { model, texture } = this.state; + const { colorTexture } = this.props; + + if (model && texture && colorTexture) { + model.setUniforms({ + colorTextureWidth: colorTexture.width, + colorTextureHeight: colorTexture.height, + }); + model.setBindings({ + grayscaleTexture: texture, + colorTexture: colorTexture, + }); + } + super.draw(opts); + } +} + +function getTileSizeForResolutions(resolutions: Array): number { + const tileSize = resolutions[0].tileSize; + utils.assert( + resolutions.every((resolution) => resolution.tileSize === tileSize), + "resolutions must all have the same tile size", + ); + return tileSize; +} + +const SEEN_LUTS = new WeakSet>(); + +/** + * Creates a color lookup table (LUT) as a 2D texture. + * + * @param options.source - The source lookup table. + * @param options.maxTextureDimension2D - The maximum texture dimension size. + */ +function createColorTexture(options: { + source?: ReadonlyArray; + maxTextureDimension2D: number; +}) { + const { source, maxTextureDimension2D } = options; + const fallback = { + data: DEFAULT_COLOR_TEXTURE, + width: DEFAULT_COLOR_TEXTURE.length / 4, + height: 1, + }; + + if (!source) { + return fallback; + } + + // pack the colors into a 2D texture + const size = Math.max(...source.map((e) => e.labelValue)) + 1; + const width = Math.min(size, maxTextureDimension2D); + const height = Math.ceil(size / width); + + if (width > maxTextureDimension2D || height > maxTextureDimension2D) { + if (!SEEN_LUTS.has(source)) { + console.warn("[vizarr] Skipping color palette from OME-NGFF `image-label` source: max texture dimension limit."); + SEEN_LUTS.add(source); + } + return fallback; + } + + const data = new Uint8Array(width * height * 4); + for (const { labelValue, rgba } of source) { + const x = labelValue % width; + const y = Math.floor(labelValue / width); + const texIndex = (y * width + x) * 4; + data[texIndex] = rgba[0]; + data[texIndex + 1] = rgba[1]; + data[texIndex + 2] = rgba[2]; + data[texIndex + 3] = rgba[3]; + } + + return { data, width, height }; +} + +const COLOR_PALETTES = { + pastel1: [ + [251, 180, 174], + [179, 205, 227], + [204, 235, 197], + [222, 203, 228], + [254, 217, 166], + [255, 255, 204], + [229, 216, 189], + [253, 218, 236], + [242, 242, 242], + ], + set3: [ + [141, 211, 199], + [255, 255, 179], + [190, 186, 218], + [251, 128, 114], + [128, 177, 211], + [253, 180, 98], + [179, 222, 105], + [252, 205, 229], + [217, 217, 217], + [188, 128, 189], + ], + pathology: [ + [228, 158, 37], + [91, 181, 231], + [22, 157, 116], + [239, 226, 82], + [16, 115, 176], + [211, 94, 26], + [202, 122, 166], + ], + pathologyLarge: [ + [0, 73, 73], + [0, 146, 146], + [255, 109, 182], + [255, 182, 219], + [73, 0, 146], + [0, 109, 219], + [182, 109, 255], + [109, 182, 255], + [182, 219, 255], + [146, 0, 0], + [146, 72, 0], + [219, 109, 0], + [36, 255, 36], + [255, 255, 109], + [255, 255, 255], + ], +} as const; + +const DEFAULT_COLOR_TEXTURE = Uint8Array.from(COLOR_PALETTES.pathologyLarge.flatMap((color) => [...color, 255])); + +function typedArrayConstructorName(arr: zarr.TypedArray) { + const ArrayType = arr.constructor as zarr.TypedArrayConstructor; + const name = ArrayType.name as `${Capitalize}Array`; + return name; +} diff --git a/src/ome.ts b/src/ome.ts index 4d5396b7..026e285a 100644 --- a/src/ome.ts +++ b/src/ome.ts @@ -1,8 +1,9 @@ import pMap from "p-map"; import * as zarr from "zarrita"; -import type { ImageLayerConfig, OnClickData, SourceData } from "./state"; +import type { ImageLabels, ImageLayerConfig, OnClickData, SourceData } from "./state"; import { ZarrPixelSource } from "./ZarrPixelSource"; +import type { OmeColor } from "./layers/label-layer"; import * as utils from "./utils"; export async function loadWell( @@ -253,8 +254,8 @@ export async function loadOmeMultiscales( const axis_labels = utils.getNgffAxisLabels(axes); const meta = parseOmeroMeta(attrs.omero, axes); const tileSize = utils.guessTileSize(data[0]); - const loader = data.map((arr) => new ZarrPixelSource(arr, { labels: axis_labels, tileSize })); + const labels = await resolveOmeLabelsFromMultiscales(grp); return { loader: loader, axis_labels, @@ -268,9 +269,39 @@ export async function loadOmeMultiscales( }, ...meta, name: meta.name ?? name, + labels: await Promise.all(labels.map((name) => loadOmeImageLabel(grp.resolve("labels"), name))), }; } +async function loadOmeImageLabel(root: zarr.Location, name: string): Promise { + 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): Promise> { + return zarr + .open(grp.resolve("labels"), { kind: "group" }) + .then(({ attrs }) => (attrs.labels ?? []) as Array) + .catch((e) => { + utils.rethrowUnless(e, zarr.NodeNotFoundError); + return []; + }); +} + type Meta = { name: string | undefined; names: Array; diff --git a/src/state.ts b/src/state.ts index caf23587..9fcd68f4 100644 --- a/src/state.ts +++ b/src/state.ts @@ -11,6 +11,7 @@ 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, @@ -54,6 +55,13 @@ export type OnClickData = Record & { gridCoord?: { row: number; column: number }; }; +export type ImageLabels = Array<{ + name: string; + loader: ZarrPixelSource[]; + modelMatrix: Matrix4; + colors?: ReadonlyArray; +}>; + export type SourceData = { loader: ZarrPixelSource[]; loaders?: GridLoader[]; // for OME plates @@ -75,6 +83,7 @@ export type SourceData = { model_matrix: Matrix4; axis_labels: string[]; onClick?: (e: OnClickData) => void; + labels?: ImageLabels; }; export type VivProps = ConstructorParameters[0]; @@ -103,6 +112,11 @@ export type LayerState = { kind: T; layerProps: LayerPropsMap[T]; on: boolean; + labels?: { + layerProps: Array>; + on: boolean; + transformSourceSelection: (sourceSelection: Array) => Array; + }; }; type WithId = T & { id: string }; @@ -146,7 +160,11 @@ export const layerFamilyAtom: AtomFamily, PrimitiveAtom a.id === b.id, ); -export type VizarrLayer = Layer | Layer | Layer; +export type VizarrLayer = + | Layer + | Layer + | Layer + | Layer; const LayerConstructors = { image: ImageLayer, @@ -160,9 +178,17 @@ export const layerAtoms = atom((get) => { return []; } const layersState = get(waitForAll(atoms.map((a) => layerFamilyAtom(get(a))))); - return layersState.map((layer) => { + return layersState.flatMap((layer) => { + if (!layer.on) return []; const Layer = LayerConstructors[layer.kind]; // @ts-expect-error - TS can't resolve that Layer & layerProps bound together - return new Layer(layer.layerProps); - }) as Array; + const layers: Array = [new Layer(layer.layerProps)]; + if (layer.kind === "multiscale" && layer.labels?.on) { + const { layerProps, transformSourceSelection } = layer.labels; + const selection = transformSourceSelection(layer.layerProps.selections[0]); + const imageLabelLayers = layerProps.map((props) => new LabelLayer({ ...props, selection })); + layers.push(...imageLabelLayers); + } + return layers; + }); }); diff --git a/src/types.ts b/src/types.ts index 9c800b23..59e959af 100644 --- a/src/types.ts +++ b/src/types.ts @@ -85,9 +85,27 @@ declare namespace Ome { version: Version; } + interface ImageLabel { + version: Version; + colors?: Array<{ + "label-value": number; + rgba: [r: number, g: number, b: number, a: number]; + }>; + properties?: Array<{ + "label-value": number; + "omero:roiId": number; + "omero:shapeId": number; + }>; + /** Location of source image */ + source: { + image: string; + }; + } + type Attrs = | { multiscales: Multiscale[] } | { omero: Omero; multiscales: Multiscale[] } | { plate: Plate } - | { well: Well }; + | { well: Well } + | { "image-label": ImageLabel; multiscales: Multiscale[] }; } diff --git a/src/utils.ts b/src/utils.ts index ed64afe1..9d060aee 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -3,6 +3,7 @@ import * as zarr from "zarrita"; import type { ZarrPixelSource } from "./ZarrPixelSource"; import type { GridLayerProps } from "./layers/grid-layer"; +import type { LabelLayerProps } from "./layers/label-layer"; import type { ImageLayerProps, MultiscaleImageLayerProps } from "./layers/viv-layers"; import { lru } from "./lru-store"; import type { ViewState } from "./state"; @@ -426,9 +427,9 @@ export class RedirectError extends Error { * @param expr The expression to test. * @param msg The message to display if the assertion fails. */ -export function assert(expr: unknown, msg = ""): asserts expr { +export function assert(expr: unknown, msg: string | (() => string) = ""): asserts expr { if (!expr) { - throw new AssertionError(msg); + throw new AssertionError(typeof msg === "function" ? msg() : msg); } } @@ -456,6 +457,12 @@ export function isOmeWell(attrs: zarr.Attributes): attrs is { well: Ome.Well } { return "well" in attrs; } +export function isOmeImageLabel( + attrs: zarr.Attributes, +): attrs is { "image-label": Ome.ImageLabel; multiscales: Ome.Multiscale[] } { + return "image-label" in attrs && isMultiscales(attrs); +} + export function isOmeMultiscales(attrs: zarr.Attributes): attrs is { omero: Ome.Omero; multiscales: Ome.Multiscale[] } { return "omero" in attrs && isMultiscales(attrs); } @@ -508,12 +515,14 @@ export function rethrowUnless Er } export function isGridLayerProps( - props: GridLayerProps | ImageLayerProps | MultiscaleImageLayerProps, + props: GridLayerProps | ImageLayerProps | MultiscaleImageLayerProps | LabelLayerProps, ): props is GridLayerProps { return "loaders" in props && "rows" in props && "columns" in props; } -export function resolveLoaderFromLayerProps(layerProps: GridLayerProps | ImageLayerProps | MultiscaleImageLayerProps) { +export function resolveLoaderFromLayerProps( + layerProps: GridLayerProps | ImageLayerProps | MultiscaleImageLayerProps | LabelLayerProps, +) { return isGridLayerProps(layerProps) ? layerProps.loaders[0].loader : layerProps.loader; } @@ -568,3 +577,17 @@ export function coordinateTransformationsToMatrix(multiscales: Array(...arrays: { [K in keyof T]: ReadonlyArray }): T[] { + const minLength = arrays.reduce((minLength, arr) => Math.min(arr.length, minLength), Number.POSITIVE_INFINITY); + const result: T[] = new Array(minLength); + for (let i = 0; i < minLength; i += 1) { + const arr = arrays.map((it) => it[i]); + result[i] = arr as T; + } + return result; +} From 72e960899ec64bbc89535c881d58e30c60d2a539 Mon Sep 17 00:00:00 2001 From: Trevor Manz Date: Thu, 6 Mar 2025 12:17:07 -0500 Subject: [PATCH 2/8] Prune unused palettes --- src/layers/label-layer.ts | 43 +++++---------------------------------- 1 file changed, 5 insertions(+), 38 deletions(-) diff --git a/src/layers/label-layer.ts b/src/layers/label-layer.ts index 745cf9cc..52080cd7 100644 --- a/src/layers/label-layer.ts +++ b/src/layers/label-layer.ts @@ -291,40 +291,9 @@ function createColorTexture(options: { return { data, width, height }; } -const COLOR_PALETTES = { - pastel1: [ - [251, 180, 174], - [179, 205, 227], - [204, 235, 197], - [222, 203, 228], - [254, 217, 166], - [255, 255, 204], - [229, 216, 189], - [253, 218, 236], - [242, 242, 242], - ], - set3: [ - [141, 211, 199], - [255, 255, 179], - [190, 186, 218], - [251, 128, 114], - [128, 177, 211], - [253, 180, 98], - [179, 222, 105], - [252, 205, 229], - [217, 217, 217], - [188, 128, 189], - ], - pathology: [ - [228, 158, 37], - [91, 181, 231], - [22, 157, 116], - [239, 226, 82], - [16, 115, 176], - [211, 94, 26], - [202, 122, 166], - ], - pathologyLarge: [ +// From Vitessce https://github.com/vitessce/vitessce/blob/03c6d5d843640982e984a0e309f1ba1807085128/packages/utils/other-utils/src/components.ts#L50-L67 +const DEFAULT_COLOR_TEXTURE = Uint8Array.from( + [ [0, 73, 73], [0, 146, 146], [255, 109, 182], @@ -340,10 +309,8 @@ const COLOR_PALETTES = { [36, 255, 36], [255, 255, 109], [255, 255, 255], - ], -} as const; - -const DEFAULT_COLOR_TEXTURE = Uint8Array.from(COLOR_PALETTES.pathologyLarge.flatMap((color) => [...color, 255])); + ].flatMap((color) => [...color, 255]), +); function typedArrayConstructorName(arr: zarr.TypedArray) { const ArrayType = arr.constructor as zarr.TypedArrayConstructor; From 9382a95f45c9aa576339ea1d7b8c803587efd2bb Mon Sep 17 00:00:00 2001 From: Trevor Manz Date: Thu, 6 Mar 2025 12:18:38 -0500 Subject: [PATCH 3/8] Remove unused ability to assert func --- src/utils.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/utils.ts b/src/utils.ts index 9d060aee..fb517195 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -427,9 +427,9 @@ export class RedirectError extends Error { * @param expr The expression to test. * @param msg The message to display if the assertion fails. */ -export function assert(expr: unknown, msg: string | (() => string) = ""): asserts expr { +export function assert(expr: unknown, msg = ""): asserts expr { if (!expr) { - throw new AssertionError(typeof msg === "function" ? msg() : msg); + throw new AssertionError(msg); } } From 16d79ccd166b9bd80749645a152fb99a881b1382 Mon Sep 17 00:00:00 2001 From: Trevor Manz Date: Thu, 6 Mar 2025 12:39:42 -0500 Subject: [PATCH 4/8] Set default label opacity to 0.5 --- src/io.ts | 3 ++- src/layers/label-layer.ts | 2 ++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/src/io.ts b/src/io.ts index b5355039..341107c3 100644 --- a/src/io.ts +++ b/src/io.ts @@ -3,6 +3,7 @@ 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"; @@ -226,7 +227,7 @@ export function initLayerStateFromSource(source: SourceData & { id: string }): L id: `${source.id}_${i}`, loader: label.loader, modelMatrix: label.modelMatrix, - opacity: 1, + opacity: DEFAULT_LABEL_OPACITY, colors: label.colors, })), transformSourceSelection: getTransformSourceSelectionFromLabels( diff --git a/src/layers/label-layer.ts b/src/layers/label-layer.ts index 52080cd7..daccab83 100644 --- a/src/layers/label-layer.ts +++ b/src/layers/label-layer.ts @@ -8,6 +8,8 @@ import type { ZarrPixelSource } from "../ZarrPixelSource"; type Texture = ReturnType; +export const DEFAULT_LABEL_OPACITY = 0.5; + export type OmeColor = Readonly<{ labelValue: number; rgba: readonly [r: number, g: number, b: number, a: number]; From 0d3205ca393508670dcdfe274e9995716869101c Mon Sep 17 00:00:00 2001 From: Trevor Manz Date: Thu, 6 Mar 2025 13:03:24 -0500 Subject: [PATCH 5/8] Support independent selection transforms for labels --- src/components/LayerController/Content.tsx | 2 +- src/components/LayerController/Labels.tsx | 14 ++++---- src/io.ts | 42 +++++++--------------- src/state.ts | 15 ++++---- 4 files changed, 29 insertions(+), 44 deletions(-) diff --git a/src/components/LayerController/Content.tsx b/src/components/LayerController/Content.tsx index 7f0a2ac2..3b6dc66a 100644 --- a/src/components/LayerController/Content.tsx +++ b/src/components/LayerController/Content.tsx @@ -23,7 +23,7 @@ const Details = withStyles({ function Content() { const [layer] = useLayerState(); const nChannels = layer.layerProps.selections.length; - const nLabels = layer.labels?.layerProps.length ?? 0; + const nLabels = layer.labels?.length ?? 0; return (
diff --git a/src/components/LayerController/Labels.tsx b/src/components/LayerController/Labels.tsx index 9ea0d867..d4cfc57d 100644 --- a/src/components/LayerController/Labels.tsx +++ b/src/components/LayerController/Labels.tsx @@ -27,19 +27,19 @@ export default function Labels({ labelIndex }: { labelIndex: number }) { assert(prev.kind === "multiscale" && prev.labels, "Missing image labels"); return { ...prev, - labels: { - ...prev.labels, - layerProps: prev.labels.layerProps.with(labelIndex, { - ...prev.labels.layerProps[labelIndex], + labels: prev.labels.with(labelIndex, { + ...prev.labels[labelIndex], + layerProps: { + ...prev.labels[labelIndex].layerProps, opacity: value as number, - }), - }, + }, + }), }; }); }; const { name } = source.labels[labelIndex]; - const { opacity } = layer.labels.layerProps[labelIndex]; + const { opacity } = layer.labels[labelIndex].layerProps; return ( <> diff --git a/src/io.ts b/src/io.ts index 341107c3..fbcf32d9 100644 --- a/src/io.ts +++ b/src/io.ts @@ -221,20 +221,16 @@ export function initLayerStateFromSource(source: SourceData & { id: string }): L let labels = undefined; if (source.labels && source.labels.length > 0) { - labels = { + labels = source.labels.map((label, i) => ({ on: true, - layerProps: source.labels.map((label, i) => ({ + 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, - })), - transformSourceSelection: getTransformSourceSelectionFromLabels( - source.labels.map((label) => label.loader[0]), - source.loader[0], - ), - }; + }, + })); } return { @@ -248,43 +244,31 @@ export function initLayerStateFromSource(source: SourceData & { id: string }): L }; } -function getTransformSourceSelectionFromLabels( - labelsResolutions: Array<{ shape: Array; labels: Array }>, +function getSourceSelectionTransform( + labels: { shape: Array; labels: Array }, source: { shape: Array; labels: Array }, ) { - // representative source for labels - const labelsSource = labelsResolutions[0]; utils.assert( source.shape.length === source.labels.length, `Image source axes and shape are not same rank. Got ${JSON.stringify(source)}`, ); utils.assert( - labelsSource.shape.length === labelsSource.labels.length, - `Label axes and shape are not same rank. Got ${JSON.stringify(labelsSource)}`, + labels.shape.length === labels.labels.length, + `Label axes and shape are not same rank. Got ${JSON.stringify(labels)}`, ); utils.assert( - labelsSource.labels.every((label) => source.labels.includes(label)), - `Label axes MUST be a subset of source. Source: ${JSON.stringify(source.labels)} Labels: ${JSON.stringify(labelsSource.labels)}`, + 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)}`, ); - for (const { labels, shape } of labelsResolutions.slice(1)) { - utils.assert( - utils.zip(labels, labelsSource.labels).every(([a, b]) => a === b), - `Error: All labels must share the same axes. Mismatched labels found: ${JSON.stringify(labels)}`, - ); - utils.assert( - utils.zip(shape, labelsSource.shape).every(([a, b]) => a === b), - `Error: All labels must share the same shape. Mismatched labels found: ${JSON.stringify(shape)}`, - ); - } // Identify labels that should always map to 0, regardless of the source selection. const excludeFromTransformedSelection = new Set( utils - .zip(labelsSource.labels, labelsSource.shape) + .zip(labels.labels, labels.shape) .filter(([_, size]) => size === 1) .map(([name, _]) => name), ); return (sourceSelection: Array): Array => { - return labelsSource.labels.map((name) => + return labels.labels.map((name) => excludeFromTransformedSelection.has(name) ? 0 : sourceSelection[source.labels.indexOf(name)], ); }; diff --git a/src/state.ts b/src/state.ts index 9fcd68f4..c9eadc62 100644 --- a/src/state.ts +++ b/src/state.ts @@ -112,11 +112,11 @@ export type LayerState = { kind: T; layerProps: LayerPropsMap[T]; on: boolean; - labels?: { - layerProps: Array>; + labels?: Array<{ + layerProps: Omit; on: boolean; transformSourceSelection: (sourceSelection: Array) => Array; - }; + }>; }; type WithId = T & { id: string }; @@ -183,10 +183,11 @@ export const layerAtoms = atom((get) => { const Layer = LayerConstructors[layer.kind]; // @ts-expect-error - TS can't resolve that Layer & layerProps bound together const layers: Array = [new Layer(layer.layerProps)]; - if (layer.kind === "multiscale" && layer.labels?.on) { - const { layerProps, transformSourceSelection } = layer.labels; - const selection = transformSourceSelection(layer.layerProps.selections[0]); - const imageLabelLayers = layerProps.map((props) => new LabelLayer({ ...props, selection })); + if (layer.kind === "multiscale" && layer.labels?.length) { + const imageLabelLayers = layer.labels.map( + ({ layerProps, transformSourceSelection }) => + new LabelLayer({ ...layerProps, selection: transformSourceSelection(layer.layerProps.selections[0]) }), + ); layers.push(...imageLabelLayers); } return layers; From eaf1424a6d68637c6ff210ec87e5af34f7b119a9 Mon Sep 17 00:00:00 2001 From: Trevor Manz Date: Thu, 6 Mar 2025 13:10:09 -0500 Subject: [PATCH 6/8] Remove unused types --- src/state.ts | 15 --------------- 1 file changed, 15 deletions(-) diff --git a/src/state.ts b/src/state.ts index c9eadc62..a67df0c2 100644 --- a/src/state.ts +++ b/src/state.ts @@ -86,21 +86,6 @@ export type SourceData = { labels?: ImageLabels; }; -export type VivProps = ConstructorParameters[0]; - -export interface BaseLayerProps { - id: string; - contrastLimits: VivProps["contrastLimits"]; - colors: [r: number, g: number, b: number][]; - channelsVisible: NonNullable; - opacity: NonNullable; - colormap: string; // TODO: more precise - selections: number[][]; - modelMatrix: Matrix4; - contrastLimitsRange: [min: number, max: number][]; - onClick?: (e: OnClickData) => void; -} - type LayerType = "image" | "multiscale" | "grid"; type LayerPropsMap = { image: ImageLayerProps; From ce154bd29fd048c63a04f7c7322da8d85da1fb2d Mon Sep 17 00:00:00 2001 From: Trevor Manz Date: Thu, 6 Mar 2025 13:39:27 -0500 Subject: [PATCH 7/8] Clean up layer state logic --- src/state.ts | 54 ++++++++++++++++++++++++++++++++++------------------ 1 file changed, 35 insertions(+), 19 deletions(-) diff --git a/src/state.ts b/src/state.ts index a67df0c2..d25e9af9 100644 --- a/src/state.ts +++ b/src/state.ts @@ -1,4 +1,4 @@ -import { atom } from "jotai"; +import { type Atom, atom } from "jotai"; import { atomFamily, splitAtom, waitForAll } from "jotai/utils"; import { RedirectError, rethrowUnless } from "./utils"; @@ -157,24 +157,40 @@ const LayerConstructors = { grid: GridLayer, } as const; -export const layerAtoms = atom((get) => { - const atoms = get(sourceInfoAtomAtoms); - if (atoms.length === 0) { - return []; - } - const layersState = get(waitForAll(atoms.map((a) => layerFamilyAtom(get(a))))); - return layersState.flatMap((layer) => { - if (!layer.on) return []; - const Layer = LayerConstructors[layer.kind]; +const layerInstanceFamily = atomFamily((a: Atom) => + 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 - const layers: Array = [new Layer(layer.layerProps)]; - if (layer.kind === "multiscale" && layer.labels?.length) { - const imageLabelLayers = layer.labels.map( - ({ layerProps, transformSourceSelection }) => - new LabelLayer({ ...layerProps, selection: transformSourceSelection(layer.layerProps.selections[0]) }), - ); - layers.push(...imageLabelLayers); + return new Layer(layerProps) as VizarrLayer; + }), +); + +const imageLabelsIstanceFamily = atomFamily((a: Atom) => + atom((get) => { + const { on, labels, layerProps } = get(a); + if (!on || !labels) { + return []; } - return layers; - }); + return labels.map( + (label) => + new LabelLayer({ + ...label.layerProps, + selection: label.transformSourceSelection(layerProps.selections[0]), + }), + ); + }), +); + +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(); }); From 386cd8240c64a0f9ab70a0961dd04c1c54b093cf Mon Sep 17 00:00:00 2001 From: Trevor Manz Date: Fri, 7 Mar 2025 19:20:01 -0500 Subject: [PATCH 8/8] Add layer toggle with default off --- src/components/LayerController/Content.tsx | 20 +++++--- src/components/LayerController/Labels.tsx | 59 +++++++++++++++------- src/components/LayerController/index.tsx | 1 - src/io.ts | 3 +- src/state.ts | 13 ++--- vite.config.js | 4 +- 6 files changed, 63 insertions(+), 37 deletions(-) diff --git a/src/components/LayerController/Content.tsx b/src/components/LayerController/Content.tsx index 3b6dc66a..787d6f0f 100644 --- a/src/components/LayerController/Content.tsx +++ b/src/components/LayerController/Content.tsx @@ -23,7 +23,6 @@ const Details = withStyles({ function Content() { const [layer] = useLayerState(); const nChannels = layer.layerProps.selections.length; - const nLabels = layer.labels?.length ?? 0; return (
@@ -53,13 +52,18 @@ function Content() { ))} - {nLabels > 0 && ( - - labels: - {range(nLabels).map((i) => ( - - ))} - + {layer.labels?.length && ( + <> + + labels: + + + + {layer.labels.map((label, i) => ( + + ))} + + )}
diff --git a/src/components/LayerController/Labels.tsx b/src/components/LayerController/Labels.tsx index d4cfc57d..81d6fe85 100644 --- a/src/components/LayerController/Labels.tsx +++ b/src/components/LayerController/Labels.tsx @@ -1,22 +1,10 @@ -import { Divider, Typography } from "@material-ui/core"; -import { Slider } from "@material-ui/core"; -import { withStyles } from "@material-ui/styles"; +import { Grid, IconButton, Slider, Typography } from "@material-ui/core"; +import { RadioButtonChecked, RadioButtonUnchecked } from "@material-ui/icons"; import React from "react"; import { useLayerState, useSourceData } from "../../hooks"; import { assert } from "../../utils"; -const DenseSlider = withStyles({ - root: { - color: "white", - padding: "10px 0px 5px 0px", - marginRight: "5px", - }, - active: { - boxshadow: "0px 0px 0px 8px rgba(158, 158, 158, 0.16)", - }, -})(Slider); - export default function Labels({ labelIndex }: { labelIndex: number }) { const [source] = useSourceData(); const [layer, setLayer] = useLayerState(); @@ -39,12 +27,47 @@ export default function Labels({ labelIndex }: { labelIndex: number }) { }; const { name } = source.labels[labelIndex]; - const { opacity } = layer.labels[labelIndex].layerProps; + const label = layer.labels[labelIndex]; return ( <> - - {name} - + +
+ + {name} + +
+ + + + { + setLayer((prev) => { + assert(prev.kind === "multiscale" && prev.labels, "Missing image labels"); + return { + ...prev, + labels: prev.labels.with(labelIndex, { + ...prev.labels[labelIndex], + on: !prev.labels[labelIndex].on, + }), + }; + }); + }} + > + {label.on ? : } + + + + + + ); } diff --git a/src/components/LayerController/index.tsx b/src/components/LayerController/index.tsx index 287f1fd0..8e13043e 100644 --- a/src/components/LayerController/index.tsx +++ b/src/components/LayerController/index.tsx @@ -31,7 +31,6 @@ const Accordion = withStyles({ function LayerController() { const [sourceInfo] = useSourceData(); const layerAtom = layerFamilyAtom(sourceInfo); - const { name = "" } = sourceInfo; return ( diff --git a/src/io.ts b/src/io.ts index fbcf32d9..fd970964 100644 --- a/src/io.ts +++ b/src/io.ts @@ -222,13 +222,14 @@ export function initLayerStateFromSource(source: SourceData & { id: string }): L let labels = undefined; if (source.labels && source.labels.length > 0) { labels = source.labels.map((label, i) => ({ - on: true, + 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, }, })); } diff --git a/src/state.ts b/src/state.ts index d25e9af9..69c87e70 100644 --- a/src/state.ts +++ b/src/state.ts @@ -175,12 +175,13 @@ const imageLabelsIstanceFamily = atomFamily((a: Atom) => if (!on || !labels) { return []; } - return labels.map( - (label) => - new LabelLayer({ - ...label.layerProps, - selection: label.transformSourceSelection(layerProps.selections[0]), - }), + return labels.map((label) => + label.on + ? new LabelLayer({ + ...label.layerProps, + selection: label.transformSourceSelection(layerProps.selections[0]), + }) + : null, ); }), ); diff --git a/vite.config.js b/vite.config.js index f2deb491..409e82ec 100644 --- a/vite.config.js +++ b/vite.config.js @@ -3,8 +3,6 @@ import * as path from "node:path"; import react from "@vitejs/plugin-react"; import { defineConfig } from "vite"; -const source = process.env.VIZARR_DATA || "https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.1/6001253.zarr"; - /** * Writes a new entry point that exports contents of an existing chunk. * @param {string} entryPointName - Name of the new entry point @@ -44,6 +42,6 @@ export default defineConfig({ }, }, server: { - open: `?source=${source}`, + open: `?source=${process.env.VIZARR_DATA || "https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.1/6001253.zarr"}`, }, });