Clean up color types and switch to large default color palette

Author: manzt

src/layers/label-layer.ts

@@ -8,14 +8,18 @@ import type { ZarrPixelSource } from "../ZarrPixelSource";
 
 type Texture = ReturnType<BitmapLayer["context"]["device"]["createTexture"]>;
 
-export type OmeColors = Readonly<Record<number, readonly [number, number, number, number]>>;
+export type OmeColor = Readonly<{
+  labelValue: number;
+  rgba: readonly [r: number, g: number, b: number, a: number];
+}>;
+
 export interface LabelLayerProps {
   id: string;
   loader: Array<ZarrPixelSource>;
   selection: Array<number>;
   opacity: number;
   modelMatrix: Matrix4;
-  colors?: OmeColors;
+  colors?: ReadonlyArray<OmeColor>;
 }
 
 /**
@@ -237,7 +241,7 @@ function getTileSizeForResolutions(resolutions: Array<ZarrPixelSource>): number
   return tileSize;
 }
 
-const SEEN_LUTS = new WeakSet<OmeColors>();
+const SEEN_LUTS = new WeakSet<ReadonlyArray<OmeColor>>();
 
 /**
  * Creates a color lookup table (LUT) as a 2D texture.
@@ -246,7 +250,7 @@ const SEEN_LUTS = new WeakSet<OmeColors>();
  * @param options.maxTextureDimension2D - The maximum texture dimension size.
  */
 function createColorTexture(options: {
-  source?: OmeColors;
+  source?: ReadonlyArray<OmeColor>;
   maxTextureDimension2D: number;
 }) {
   const { source, maxTextureDimension2D } = options;
@@ -261,7 +265,7 @@ function createColorTexture(options: {
   }
 
   // pack the colors into a 2D texture
-  const size = Math.max(...Object.keys(source).map(Number)) + 1;
+  const size = Math.max(...source.map((e) => e.labelValue)) + 1;
   const width = Math.min(size, maxTextureDimension2D);
   const height = Math.ceil(size / width);
 
@@ -274,15 +278,14 @@ function createColorTexture(options: {
   }
 
   const data = new Uint8Array(width * height * 4);
-  for (const [key, [r, g, b, a]] of Object.entries(source)) {
-    const index = +key;
-    const x = index % width;
-    const y = Math.floor(index / width);
+  for (const { labelValue, rgba } of source) {
+    const x = labelValue % width;
+    const y = Math.floor(labelValue / width);
     const texIndex = (y * width + x) * 4;
-    data[texIndex] = r;
-    data[texIndex + 1] = g;
-    data[texIndex + 2] = b;
-    data[texIndex + 3] = a;
+    data[texIndex] = rgba[0];
+    data[texIndex + 1] = rgba[1];
+    data[texIndex + 2] = rgba[2];
+    data[texIndex + 3] = rgba[3];
   }
 
   return { data, width, height };
@@ -340,7 +343,7 @@ const COLOR_PALETTES = {
   ],
 } as const;
 
-const DEFAULT_COLOR_TEXTURE = Uint8Array.from(COLOR_PALETTES.pathology.flatMap((color) => [...color, 255]));
+const DEFAULT_COLOR_TEXTURE = Uint8Array.from(COLOR_PALETTES.pathologyLarge.flatMap((color) => [...color, 255]));
 
 function typedArrayConstructorName(arr: zarr.TypedArray<LabelDataType>) {
   const ArrayType = arr.constructor as zarr.TypedArrayConstructor<LabelDataType>;

src/ome.ts

@@ -3,7 +3,7 @@ import * as zarr from "zarrita";
 import type { ImageLabels, ImageLayerConfig, OnClickData, SourceData } from "./state";
 
 import { ZarrPixelSource } from "./ZarrPixelSource";
-import type { OmeColors } from "./layers/label-layer";
+import type { OmeColor } from "./layers/label-layer";
 import * as utils from "./utils";
 
 export async function loadWell(
@@ -278,14 +278,17 @@ async function loadOmeImageLabel(root: zarr.Location<zarr.Readable>, name: strin
   const attrs = utils.resolveAttrs(grp.attrs);
   utils.assert(utils.isOmeImageLabel(attrs), "No 'image-label' metadata.");
   const data = await utils.loadMultiscales(grp, attrs.multiscales);
-  const tileSize = utils.guessTileSize(data[0]);
+  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: resolveImageLabelsLut(attrs["image-label"]),
+    colors: colors.length > 0 ? colors : undefined,
   };
 }
 
@@ -359,10 +362,3 @@ function parseOmeroMeta({ rdefs, channels, name }: Ome.Omero, axes: Ome.Axis[]):
     defaultSelection,
   };
 }
-
-function resolveImageLabelsLut(attrs: Ome.ImageLabel): OmeColors | undefined {
-  if (!attrs.colors || attrs.colors.length === 0) {
-    return undefined;
-  }
-  return Object.fromEntries(attrs.colors.map((d) => [d["label-value"], d.rgba]));
-}

src/state.ts

@@ -11,7 +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 OmeColors } from "./layers/label-layer";
+import { LabelLayer, type LabelLayerProps, type OmeColor } from "./layers/label-layer";
 import {
   ImageLayer,
   type ImageLayerProps,
@@ -59,7 +59,7 @@ export type ImageLabels = Array<{
   name: string;
   loader: ZarrPixelSource[];
   modelMatrix: Matrix4;
-  colors?: OmeColors;
+  colors?: ReadonlyArray<OmeColor>;
 }>;
 
 export type SourceData = {