Support OME "labels" metadata

Author: manzt

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

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 (
     <Details>
       <Grid container direction="column">
@@ -51,6 +53,14 @@ function Content() {
             <ChannelController channelIndex={i} key={i} />
           ))}
         </Grid>
+        {nLabels > 0 && (
+          <Grid>
+            <Typography variant="caption">labels:</Typography>
+            {range(nLabels).map((i) => (
+              <Labels labelIndex={i} key={i} />
+            ))}
+          </Grid>
+        )}
       </Grid>
     </Details>
   );

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 (
+    <>
+      <Divider />
+      <Typography variant="caption">{name}</Typography>
+      <DenseSlider value={opacity} onChange={handleOpacityChange} min={0} max={1} step={0.01} />
+    </>
+  );
+}

src/io.ts

@@ -218,12 +218,73 @@ 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: {
       ...layerProps,
       loader: source.loader,
     },
     on: true,
+    labels,
+  };
+}
+
+function getTransformSourceSelectionFromLabels(
+  labelsResolutions: Array<{ shape: Array<number>; labels: Array<string> }>,
+  source: { shape: Array<number>; labels: Array<string> },
+) {
+  // 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<number>): Array<number> => {
+    return labelsSource.labels.map((name) =>
+      excludeFromTransformedSelection.has(name) ? 0 : sourceSelection[source.labels.indexOf(name)],
+    );
   };
 }