Merge pull request #27 from BioNGFF/feat/channel-controller

add channel controller

Author: davehorsfall

sites/app/src/App.jsx

@@ -10,6 +10,9 @@ const darkTheme = createTheme({
   palette: {
     mode: 'dark',
   },
+  typography: {
+    fontSize: 12,
+  },
 });
 
 function App() {

sites/app/src/index.css

@@ -28,6 +28,7 @@ body {
   place-items: center;
   min-width: 320px;
   min-height: 100vh;
+  overflow: hidden;
 }
 
 h1 {
@@ -71,8 +72,14 @@ button:focus-visible {
   position: absolute;
   top: 1rem;
   left: 1rem;
+  bottom: 1rem;
   z-index: 1;
   padding: 0.5rem;
+  overflow-y: auto;
+  overflow-x: hidden;
+  width: 200px;
+  padding-right: 15px;
+  box-sizing: border-box;
 }
 
 .viewer-matrix {

viewer/src/components/Controller/AxisSliders.jsx

@@ -24,7 +24,7 @@ const AxisSlider = ({ axis_labels, axisIndex, selections, max, onChange }) => {
 
   return (
     <>
-      <Grid container spacing={2} sx={{ justifyContent: 'space-between' }}>
+      <Grid container justifyContent="space-between">
         <Typography>{axisLabel}</Typography>
         <Input
           value={value}

viewer/src/components/Controller/ChannelControllers.jsx

@@ -0,0 +1,103 @@
+import React from 'react';
+
+import { RadioButtonChecked, RadioButtonUnchecked } from '@mui/icons-material';
+import Grid from '@mui/material/Grid';
+import IconButton from '@mui/material/IconButton';
+import Slider from '@mui/material/Slider';
+import Typography from '@mui/material/Typography';
+
+const ChannelController = ({
+  channel_axis,
+  names,
+  selections,
+  contrastLimits,
+  contrastLimitsRange,
+  channelVisible,
+  colormap,
+  colors,
+  toggleChannelVisibility,
+  setChannelContrast,
+}) => {
+  // from vizarr ChannelController
+  const value = [...contrastLimits];
+  const color = `rgb(${colormap ? [255, 255, 255] : colors})`;
+  const on = channelVisible;
+  const [min, max] = contrastLimitsRange;
+
+  const nameIndex = Number.isInteger(channel_axis)
+    ? selections[channel_axis]
+    : 0;
+  const label = names[nameIndex];
+
+  return (
+    <>
+      <Grid container justifyContent="space-between">
+        <Typography noWrap title={label}>
+          {label}
+        </Typography>
+      </Grid>
+      <Grid container spacing={2}>
+        <Grid display="flex" justifyContent="center" alignItems="center">
+          <IconButton
+            style={{
+              color,
+              padding: 0,
+              backgroundColor: 'transparent',
+            }}
+            onClick={toggleChannelVisibility}
+          >
+            {on ? <RadioButtonChecked /> : <RadioButtonUnchecked />}
+          </IconButton>
+        </Grid>
+        <Grid
+          size="grow"
+          display="flex"
+          justifyContent="center"
+          alignItems="center"
+        >
+          <Slider
+            size="small"
+            value={value}
+            min={min}
+            max={max}
+            step={0.01}
+            style={{
+              padding: 0,
+              color,
+            }}
+            onChange={(_e, v) => setChannelContrast(v)}
+          />
+        </Grid>
+      </Grid>
+    </>
+  );
+};
+
+export const ChannelControllers = ({
+  channel_axis,
+  names,
+  layerProps,
+  toggleChannelVisibility,
+  setChannelContrast,
+}) => {
+  const nChannels = layerProps.selections.length;
+  return (
+    <Grid sx={{ width: '100%' }}>
+      {[...Array(nChannels).keys()].map((i) => (
+        <ChannelController
+          key={i}
+          channel_axis={channel_axis}
+          names={names}
+          selections={layerProps.selections[i]}
+          contrastLimits={layerProps.contrastLimits[i]}
+          contrastLimitsRange={layerProps.contrastLimitsRange[i]}
+          channelVisible={layerProps.channelsVisible[i]}
+          colors={layerProps.colors[i]}
+          colormap={layerProps.colormap}
+          toggleChannelVisibility={() => toggleChannelVisibility(i)}
+          setChannelContrast={(cl) => setChannelContrast(i, cl)}
+        />
+      ))}
+    </Grid>
+  );
+};

viewer/src/components/Controller/Controller.jsx

@@ -3,11 +3,14 @@ import React from 'react';
 import VisibilityIcon from '@mui/icons-material/Visibility';
 import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
 import Checkbox from '@mui/material/Checkbox';
+import Divider from '@mui/material/Divider';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import FormGroup from '@mui/material/FormGroup';
+import Grid from '@mui/material/Grid';
 import Stack from '@mui/material/Stack';
 
 import { AxisSliders } from './AxisSliders';
+import { ChannelControllers } from './ChannelControllers';
 import { OpacitySlider } from './OpacitySlider';
 
 export const Controller = ({
@@ -17,6 +20,8 @@ export const Controller = ({
   toggleVisibility,
   setLayerOpacity,
   setLayerSelections,
+  toggleChannelVisibility,
+  setChannelContrast,
 }) => {
   const controls = layerStates.map((layerState, index) => {
     if (!layerState) {
@@ -47,8 +52,19 @@ export const Controller = ({
           value={layerState.layerProps.opacity}
           onChange={(e, value) => setLayerOpacity(index, null, value)}
         />
-        {layerState.labels?.map((label) => (
+        <Divider>Channels</Divider>
+        <ChannelControllers
+          {...sourceData[index]}
+          {...layerState}
+          toggleChannelVisibility={(i) => toggleChannelVisibility(index, i)}
+          setChannelContrast={(i, contrast) =>
+            setChannelContrast(index, i, contrast)
+          }
+        />
+        {layerState.labels?.length && <Divider>Labels</Divider>}
+        {layerState.labels?.map((label, i) => (
           <React.Fragment key={label.layerProps.id}>
+            {i > 0 && <Divider />}
             <FormControlLabel
               key={label.layerProps.id}
               label={`${label.layerProps.id} (label)`}
@@ -77,7 +93,6 @@ export const Controller = ({
   return (
     <div className="viewer-controller">
       <Stack spacing={2}>
-        <p>Layers</p>
         <FormGroup>{controls}</FormGroup>
         <button type="button" className="btn" onClick={resetViewState}>
           Reset view

viewer/src/components/Viewer.jsx

@@ -248,6 +248,44 @@ export const Viewer = ({
       });
     });
   };
+
+  const toggleChannelVisibility = (index, channelIndex) => {
+    setLayerStates((prev) => {
+      return prev.map((state, i) => {
+        if (i !== index) return state;
+        return {
+          ...state,
+          layerProps: {
+            ...state.layerProps,
+            channelsVisible: state.layerProps.channelsVisible.map(
+              (visible, j) => {
+                if (j !== channelIndex) return visible;
+                return !visible;
+              },
+            ),
+          },
+        };
+      });
+    });
+  };
+
+  const setChannelContrast = (index, channelIndex, contrastLimits) => {
+    setLayerStates((prev) => {
+      return prev.map((state, i) => {
+        if (i !== index) return state;
+        return {
+          ...state,
+          layerProps: {
+            ...state.layerProps,
+            contrastLimits: state.layerProps.contrastLimits.map((cl, j) => {
+              if (j !== channelIndex) return cl;
+              return contrastLimits;
+            }),
+          },
+        };
+      });
+    });
+  };
   const { near, far } = useMemo(() => {
     if (!layers?.length) {
       return { near: 0.1, far: 1000 };
@@ -299,6 +337,8 @@ export const Viewer = ({
         toggleVisibility={toggleVisibility}
         setLayerOpacity={setLayerOpacity}
         setLayerSelections={setLayerSelections}
+        toggleChannelVisibility={toggleChannelVisibility}
+        setChannelContrast={setChannelContrast}
       />
       <DeckGL
         ref={deckRef}