feat(ngff): Support displaying "labels" for "multiscales" nodes

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";
@@ -51,6 +52,19 @@ function Content() {
             <ChannelController channelIndex={i} key={i} />
           ))}
         </Grid>
+        {layer.labels?.length && (
+          <>
+            <Grid container justifyContent="space-between">
+              <Typography variant="caption">labels:</Typography>
+            </Grid>
+            <Divider />
+            <Grid>
+              {layer.labels.map((label, i) => (
+                <Labels labelIndex={i} key={label.layerProps.id} />
+              ))}
+            </Grid>
+          </>
+        )}
       </Grid>
     </Details>
   );

src/components/LayerController/Labels.tsx

@@ -0,0 +1,73 @@
+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";
+
+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.with(labelIndex, {
+          ...prev.labels[labelIndex],
+          layerProps: {
+            ...prev.labels[labelIndex].layerProps,
+            opacity: value as number,
+          },
+        }),
+      };
+    });
+  };
+
+  const { name } = source.labels[labelIndex];
+  const label = layer.labels[labelIndex];
+  return (
+    <>
+      <Grid container justifyContent="space-between" wrap="nowrap">
+        <div style={{ width: 165, overflow: "hidden", textOverflow: "ellipsis" }}>
+          <Typography variant="caption" noWrap>
+            {name}
+          </Typography>
+        </div>
+      </Grid>
+      <Grid container justifyContent="space-between">
+        <Grid item xs={2}>
+          <IconButton
+            style={{ backgroundColor: "transparent", padding: 0, zIndex: 2 }}
+            onClick={() => {
+              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 ? <RadioButtonChecked /> : <RadioButtonUnchecked />}
+          </IconButton>
+        </Grid>
+        <Grid item xs={10}>
+          <Slider
+            value={label.layerProps.opacity}
+            onChange={handleOpacityChange}
+            min={0}
+            max={1}
+            step={0.01}
+            style={{ padding: "10px 0px 5px 0px" }}
+          />
+        </Grid>
+      </Grid>
+    </>
+  );
+}

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 (
     <LayerStateContext.Provider value={layerAtom}>
       <Accordion defaultExpanded>

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";
 
@@ -218,12 +219,58 @@ 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: 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,
+      },
+    }));
+  }
+
   return {
     kind: "multiscale",
     layerProps: {
       ...layerProps,
       loader: source.loader,
     },
     on: true,
+    labels,
+  };
+}
+
+function getSourceSelectionTransform(
+  labels: { shape: Array<number>; labels: Array<string> },
+  source: { shape: Array<number>; labels: Array<string> },
+) {
+  utils.assert(
+    source.shape.length === source.labels.length,
+    `Image source axes and shape are not same rank. Got ${JSON.stringify(source)}`,
+  );
+  utils.assert(
+    labels.shape.length === labels.labels.length,
+    `Label axes and shape are not same rank. Got ${JSON.stringify(labels)}`,
+  );
+  utils.assert(
+    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)}`,
+  );
+  // Identify labels that should always map to 0, regardless of the source selection.
+  const excludeFromTransformedSelection = new Set(
+    utils
+      .zip(labels.labels, labels.shape)
+      .filter(([_, size]) => size === 1)
+      .map(([name, _]) => name),
+  );
+  return (sourceSelection: Array<number>): Array<number> => {
+    return labels.labels.map((name) =>
+      excludeFromTransformedSelection.has(name) ? 0 : sourceSelection[source.labels.indexOf(name)],
+    );
   };
 }