Add layer toggle with default off

Author: manzt

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 (
     <Details>
       <Grid container direction="column">
@@ -53,13 +52,18 @@ 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>
+        {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

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

@@ -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,
       },
     }));
   }

src/state.ts

@@ -175,12 +175,13 @@ const imageLabelsIstanceFamily = atomFamily((a: Atom<LayerState>) =>
     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,
     );
   }),
 );

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"}`,
   },
 });