Merge pull request #26 from BioNGFF/feat/axis-slider

add axis sliders

Author: davehorsfall

pnpm-lock.yaml

@@ -14,7 +14,8 @@
   "dependencies": {
     "@biongff/viewer": "workspace:*",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "@mui/material": "^7.2.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",

sites/app/package.json

@@ -1,7 +1,17 @@
 import React from 'react';
+
+import CssBaseline from '@mui/material/CssBaseline';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+
 import './App.css';
 import { Viewer, parseMatrix } from '@biongff/viewer';
 
+const darkTheme = createTheme({
+  palette: {
+    mode: 'dark',
+  },
+});
+
 function App() {
   const url = new URL(window.location.href);
 
@@ -15,14 +25,17 @@ function App() {
     .map((v) => parseMatrix(v));
 
   return (
-    <>
-      <Viewer
-        sources={sources}
-        channelAxis={channelAxis}
-        isLabel={isLabel}
-        modelMatrices={modelMatrices}
-      />
-    </>
+    <ThemeProvider theme={darkTheme}>
+      <CssBaseline />
+      <div className="App">
+        <Viewer
+          sources={sources}
+          channelAxis={channelAxis}
+          isLabel={isLabel}
+          modelMatrices={modelMatrices}
+        />
+      </div>
+    </ThemeProvider>
   );
 }
 

sites/app/src/App.jsx

@@ -0,0 +1,84 @@
+import React, { useEffect, useState } from 'react';
+
+import Grid from '@mui/material/Grid';
+import Input from '@mui/material/Input';
+import Slider from '@mui/material/Slider';
+import Typography from '@mui/material/Typography';
+
+const AxisSlider = ({ axis_labels, axisIndex, selections, max, onChange }) => {
+  const [value, setValue] = useState(0);
+  const axisLabel = axis_labels[axisIndex];
+
+  useEffect(() => {
+    setValue(selections[0] ? selections[0][axisIndex] : 1);
+  }, [selections, axisIndex]);
+
+  const setSelections = (v = value) => {
+    onChange(
+      selections.map((s) => {
+        s[axisIndex] = v;
+        return s;
+      }),
+    );
+  };
+
+  return (
+    <>
+      <Grid container spacing={2} sx={{ justifyContent: 'space-between' }}>
+        <Typography>{axisLabel}</Typography>
+        <Input
+          value={value}
+          size="small"
+          onChange={(e) => {
+            setSelections(Number(e.target.value));
+          }}
+          inputProps={{
+            step: 1,
+            min: 0,
+            max: max,
+            type: 'number',
+          }}
+        />
+      </Grid>
+      <Slider
+        size="small"
+        min={0}
+        max={max}
+        value={value}
+        onChange={(_e, v) => setValue(v)}
+        onChangeCommitted={() => setSelections()}
+      />
+    </>
+  );
+};
+
+export const AxisSliders = ({
+  axis_labels,
+  channel_axis,
+  loader,
+  selections,
+  onChange,
+}) => {
+  // from vizarr AxisSliders
+  const sliders = axis_labels
+    .slice(0, -2) // ignore last two axes, [y,x]
+    .map((name, i) => [name, i, loader[0].shape[i]]) // capture the name, index, and size of non-yx dims
+    .filter((d) => {
+      if (d[1] === channel_axis) return false; // ignore channel_axis (for OME-Zarr channel_axis === 1)
+      if (d[2] > 1) return true; // keep if size > 1
+      return false; // otherwise ignore as well
+    })
+    .map(([name, i, size]) => (
+      <AxisSlider
+        selections={selections}
+        key={name}
+        axis_labels={axis_labels}
+        axisIndex={i}
+        max={size - 1}
+        step={1}
+        onChange={onChange}
+      />
+    ));
+
+  return <>{sliders}</>;
+};

viewer/src/components/Controller/AxisSliders.jsx

@@ -5,25 +5,18 @@ import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
 import Checkbox from '@mui/material/Checkbox';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import FormGroup from '@mui/material/FormGroup';
-import Slider from '@mui/material/Slider';
 import Stack from '@mui/material/Stack';
 
-const OpactiySlider = ({ value, onChange }) => (
-  <Slider
-    size="small"
-    min={0}
-    max={1}
-    step={0.01}
-    value={value}
-    onChange={onChange}
-  />
-);
+import { AxisSliders } from './AxisSliders';
+import { OpacitySlider } from './OpacitySlider';
 
 export const Controller = ({
+  sourceData,
   layerStates,
   resetViewState,
   toggleVisibility,
   setLayerOpacity,
+  setLayerSelections,
 }) => {
   const controls = layerStates.map((layerState, index) => {
     if (!layerState) {
@@ -45,7 +38,12 @@ export const Controller = ({
             />
           }
         />
-        <OpactiySlider
+        <AxisSliders
+          {...sourceData[index]}
+          selections={layerState.layerProps.selections}
+          onChange={(selections) => setLayerSelections(index, selections)}
+        />
+        <OpacitySlider
           value={layerState.layerProps.opacity}
           onChange={(e, value) => setLayerOpacity(index, null, value)}
         />
@@ -64,7 +62,7 @@ export const Controller = ({
                 />
               }
             />
-            <OpactiySlider
+            <OpacitySlider
               value={label.layerProps.opacity}
               onChange={(e, value) =>
                 setLayerOpacity(index, label.layerProps.id, value)

viewer/src/components/Controller.jsx …src/components/Controller/Controller.jsxviewer/src/components/Controller.jsx renamed to viewer/src/components/Controller/Controller.jsx viewer/src/components/Controller.jsx renamed to viewer/src/components/Controller/Controller.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import Grid from '@mui/material/Grid';
+import Slider from '@mui/material/Slider';
+import Typography from '@mui/material/Typography';
+
+export const OpacitySlider = ({ value, onChange }) => (
+  <Grid container>
+    <Typography>Opacity</Typography>
+    <Slider
+      size="small"
+      min={0}
+      max={1}
+      step={0.01}
+      value={value}
+      onChange={onChange}
+    />
+  </Grid>
+);

viewer/src/components/Controller/OpacitySlider.jsx

@@ -19,7 +19,7 @@ import DeckGL, { OrthographicView } from 'deck.gl';
 import { Matrix4 } from 'math.gl';
 
 import { useSourceData } from '../hooks';
-import { Controller } from './Controller';
+import { Controller } from './Controller/Controller';
 import { LabelLayer } from '../layers/label-layer';
 
 const LayerStateMap = {
@@ -234,6 +234,20 @@ export const Viewer = ({
     }
   };
 
+  const setLayerSelections = (index, selections) => {
+    setLayerStates((prev) => {
+      return prev.map((state, i) => {
+        if (i !== index) return state;
+        return {
+          ...state,
+          layerProps: {
+            ...state.layerProps,
+            selections: selections,
+          },
+        };
+      });
+    });
+  };
   const { near, far } = useMemo(() => {
     if (!layers?.length) {
       return { near: 0.1, far: 1000 };
@@ -279,10 +293,12 @@ export const Viewer = ({
   return (
     <div>
       <Controller
+        sourceData={sourceData}
         layerStates={layerStates}
         resetViewState={resetViewState}
         toggleVisibility={toggleVisibility}
         setLayerOpacity={setLayerOpacity}
+        setLayerSelections={setLayerSelections}
       />
       <DeckGL
         ref={deckRef}