feat(ViSR): Tomography slice viewer

apps/visr/package.json

@@ -32,6 +32,7 @@
     "@react-three/fiber": "^8.16.8",
     "@tanstack/react-query": "^5.90.21",
     "ndarray": "^1.0.19",
+    "ndarray-ops": "^1.2.2",
     "react-error-boundary": "^6.0.0",
     "react-router-dom": "^7.7.1",
     "three": "^0.164.1"
@@ -42,6 +43,8 @@
     "@mui/material": "^6.5.0",
     "@mui/x-date-pickers": "^7.29.4",
     "@types/ndarray": "^1.0.14",
+    "@types/ndarray-ops": "^1.2.7",
+    "@types/node": "^25.9.2",
     "@types/react-relay": "^18.2.1",
     "@types/relay-runtime": "^19.0.2",
     "@types/three": "^0.164.0",

apps/visr/src/components/tomography/CameraViewer.tsx

@@ -1,6 +1,6 @@
 import { Box, Typography } from "@mui/material";
-export default function CameraViewer() {
 
+export default function CameraViewer() {
   // static image showing camera view/projection feed
   return (
     <Box
@@ -27,7 +27,6 @@ export default function CameraViewer() {
         <Typography variant="overline" color="primary">
           Camera View
         </Typography>
-
       </Box>
 
       <Box

apps/visr/src/components/tomography/Controls.tsx

@@ -1,18 +1,38 @@
 import {
   Box,
   Button,
+  FormControlLabel,
   LinearProgress,
+  Radio,
+  RadioGroup,
+  Slider,
   Stack,
   TextField,
+  Typography,
 } from "@mui/material";
+import { Plane } from "./PlaneEnum";
 
 interface Props {
   onRun: () => void;
   onReset: () => void;
+  onSlide: (event: Event, newValue: number | number[]) => void;
+  onSetDirection: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  plane: Plane;
   progress: number;
+  slice: number;
+  volumeShape: [number, number, number];
 }
 
-export default function Controls({ onRun, onReset, progress }: Props) {
+export default function Controls({
+  onRun,
+  onReset,
+  onSlide,
+  onSetDirection,
+  plane,
+  progress,
+  slice,
+  volumeShape,
+}: Props) {
   return (
     <Box
       sx={{
@@ -27,8 +47,6 @@ export default function Controls({ onRun, onReset, progress }: Props) {
       }}
     >
       <Stack direction="row" spacing={1} alignItems="center">
-
-
         <TextField
           label="angles"
           type="number"
@@ -55,14 +73,41 @@ export default function Controls({ onRun, onReset, progress }: Props) {
         >
           Revolve
         </ToggleButton> */}
+        <Box sx={{ flex: 1 }}>
+          <Typography variant="body1" color="primary">
+            Slice
+          </Typography>
+          <Slider
+            shiftStep={1}
+            step={1}
+            min={0}
+            max={
+              plane === Plane.Z
+                ? volumeShape[0] - 1
+                : plane === Plane.Y
+                  ? volumeShape[1] - 1
+                  : volumeShape[2] - 1
+            }
+            marks
+            onChange={onSlide}
+            value={slice}
+          ></Slider>{" "}
+          <Typography variant="body1" color="primary">
+            Axis
+          </Typography>
+          <RadioGroup row value={plane} onChange={onSetDirection}>
+            <FormControlLabel value={Plane.X} control={<Radio />} label="X" />
+            <FormControlLabel value={Plane.Y} control={<Radio />} label="Y" />
+            <FormControlLabel value={Plane.Z} control={<Radio />} label="Z" />
+          </RadioGroup>
+        </Box>
       </Stack>
 
       <LinearProgress
         variant="determinate"
         value={progress}
         sx={{ height: 8, borderRadius: 1 }}
       />
-
     </Box>
   );
 }

apps/visr/src/components/tomography/PlaneEnum.tsx

@@ -0,0 +1,5 @@
+export enum Plane {
+  X,
+  Y,
+  Z,
+}

apps/visr/src/components/tomography/SliceViewer.tsx

@@ -0,0 +1,74 @@
+import { Box, Typography } from "@mui/material";
+import { Plane } from "./PlaneEnum";
+import { HeatmapPlot } from "@diamondlightsource/davidia";
+import ndarray from "ndarray";
+import createArrayFromView from "../../utils/createArrayFromView";
+
+interface Props {
+  volumeData: Uint8Array;
+  volumeShape: [number, number, number];
+  plane: Plane;
+  slice: number;
+}
+export default function SliceViewer({
+  volumeData,
+  volumeShape,
+  plane,
+  slice,
+}: Props) {
+  if (volumeData == undefined || volumeShape == undefined) {
+    return <Box />;
+  }
+
+  const volume = ndarray(volumeData, volumeShape);
+  let sliceNdarray: ndarray.NdArray<Uint8Array>;
+
+  switch (plane) {
+    case Plane.Z: {
+      sliceNdarray = createArrayFromView(volume.pick(slice, null, null));
+      break;
+    }
+    case Plane.Y: {
+      sliceNdarray = createArrayFromView(volume.pick(null, slice, null));
+      break;
+    }
+    case Plane.X: {
+      sliceNdarray = createArrayFromView(volume.pick(null, null, slice));
+      break;
+    }
+  }
+
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        height: "100%",
+        bgcolor: "background.paper",
+      }}
+    >
+      <Box
+        sx={{
+          px: 2,
+          py: 1.25,
+          borderBottom: 1,
+          borderColor: "divider",
+          // height: "100%",
+        }}
+      >
+        <Typography variant="overline" color="primary">
+          Slice View
+        </Typography>
+      </Box>
+      <div style={{ display: "grid", height: "100%" }}>
+        <HeatmapPlot
+          aspect="auto"
+          plotConfig={{}}
+          values={sliceNdarray}
+          domain={[0, 255]}
+          customToolbarChildren={null}
+        />
+      </div>
+    </Box>
+  );
+}

apps/visr/src/components/tomography/TomographyView.tsx

@@ -1,16 +1,81 @@
-import { Box } from "@mui/material";
-import { useRef, useState } from "react";
+import { Box, Divider, Stack } from "@mui/material";
+import { useEffect, useRef, useState } from "react";
 import CameraViewer from "./CameraViewer";
 import VolumeViewer from "./VolumeViewer";
 import Controls from "./Controls";
+import SliceViewer from "./SliceViewer";
+import { Plane } from "./PlaneEnum";
+
+interface Volume {
+  volumeData: Uint8Array;
+  volumeShape: [number, number, number];
+}
 
 const SCAN_DURATION_MS = 3000;
 
 function TomographyView() {
+  const [volume, setVolume] = useState<Volume | null>(null);
   const [volumeVisible, setVolumeVisible] = useState(false);
   const [progress, setProgress] = useState(0);
   const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
   // const [revolve, setRevolve] = useState(false);
+  const [slice, setSlice] = useState<number>(0);
+  const [plane, setPlane] = useState<Plane>(Plane.Z);
+
+  useEffect(() => {
+    async function loadTestVolume() {
+      const [metaRes, rawRes] = await Promise.all([
+        fetch("/test-data/volume.json"),
+        fetch("/test-data/volume.raw"),
+      ]);
+      const meta = (await metaRes.json()) as {
+        shape: [number, number, number];
+      };
+      const buffer = await rawRes.arrayBuffer();
+      setVolume({
+        volumeData: new Uint8Array(buffer),
+        volumeShape: meta.shape,
+      });
+    }
+
+    loadTestVolume();
+  }, []);
+
+  //use local storage to persist values across multiple open tabs
+  useEffect(() => {
+    localStorage.setItem("plane", plane.toString());
+    localStorage.setItem("volumeVisible", volumeVisible.toString());
+    localStorage.setItem("slice", slice.toString());
+    localStorage.setItem("progress", progress.toString());
+  }, [plane, volumeVisible, slice, progress]);
+
+  useEffect(() => {
+    const onReceiveMessage = (e: StorageEvent) => {
+      const { key, newValue } = e;
+      switch (key) {
+        case "plane": {
+          setPlane(Number(newValue));
+          break;
+        }
+        case "volumeVisible": {
+          setVolumeVisible(Boolean(newValue));
+          break;
+        }
+        case "slice": {
+          setSlice(Number(newValue));
+          break;
+        }
+        case "progress": {
+          setProgress(Number(newValue));
+          break;
+        }
+      }
+    };
+    window.addEventListener("storage", onReceiveMessage);
+    return () => {
+      window.removeEventListener("storage", onReceiveMessage);
+    };
+  }, []);
 
   // run waits 3 seconds, updating progress bar then allows mock volume to be seen
   const handleRun = () => {
@@ -37,8 +102,18 @@ function TomographyView() {
     setProgress(0);
   };
 
-  // revolve to be implemented
+  const handleSlider = (event: Event, newValue: number | number[]) => {
+    const slice = typeof newValue == "number" ? newValue : newValue[0];
+    setSlice(slice);
+  };
+
+  const handlePlane = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const radioValue = Number((event.target as HTMLInputElement).value);
+    setPlane(radioValue);
+  };
 
+  if (!volume) return <Box />;
+  // revolve to be implemented
   return (
     <Box
       sx={{
@@ -50,12 +125,10 @@ function TomographyView() {
         bgcolor: "background.default",
       }}
     >
-      <Box sx={{ display: "flex", flex: 1, overflow: "hidden" }}>
-
-        {/* Left panel */}
+      <Stack direction="row" divider={<Divider orientation="vertical" />}>
         <Box
           sx={{
-            width: "38%",
+            width: "30%",
             minWidth: 260,
             display: "flex",
             flexDirection: "column",
@@ -64,13 +137,47 @@ function TomographyView() {
           <CameraViewer />
         </Box>
 
-        {/* Right panel */}
-        <Box sx={{ flex: 1, display: "flex", flexDirection: "column" }}>
-          <VolumeViewer visible={volumeVisible} />
+        <Box
+          sx={{
+            flex: 1,
+            width: "30%",
+            display: "flex",
+            flexDirection: "column",
+          }}
+        >
+          <VolumeViewer
+            volumeData={volume.volumeData}
+            volumeShape={volume.volumeShape}
+            visible={volumeVisible}
+          />
         </Box>
-      </Box>
-
-      <Controls onRun={handleRun} onReset={handleReset} progress={progress} />
+        <Box
+          sx={{
+            flex: 1,
+            width: "30%",
+            display: "flex",
+            flexDirection: "column",
+            bgcolor: "red",
+          }}
+        >
+          <SliceViewer
+            volumeData={volume.volumeData}
+            volumeShape={volume.volumeShape}
+            slice={slice}
+            plane={plane}
+          />
+        </Box>
+      </Stack>
+      <Controls
+        onRun={handleRun}
+        onReset={handleReset}
+        onSlide={handleSlider}
+        onSetDirection={handlePlane}
+        plane={plane}
+        progress={progress}
+        slice={slice}
+        volumeShape={volume ? volume.volumeShape : [0, 0, 0]}
+      />
     </Box>
   );
 }