Threshold control for tomography

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

@@ -9,13 +9,15 @@ interface Props {
   volumeShape: [number, number, number];
   plane: Plane;
   slice: number;
+  threshold?: number; // raw 0–255; values at or below render as the bottom of the colormap
   resizeKey?: string; //if this depends on a value, the plot will remount every time that value changes. If no need for it to remound, leave as undefined
 }
 export default function SliceViewer({
   volumeData,
   volumeShape,
   plane,
   slice,
+  threshold = 0,
   resizeKey,
 }: Props) {
   if (volumeData == undefined || volumeShape == undefined) {
@@ -46,7 +48,7 @@ export default function SliceViewer({
       aspect={"equal"}
       plotConfig={{}}
       values={sliceNdarray}
-      domain={[0, 255]}
+      domain={[threshold, 255]}
       customToolbarChildren={null}
     />
   );

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

@@ -11,16 +11,20 @@ import { Plane } from "./PlaneEnum";
 interface Props {
   onSlide: (event: Event, newValue: number | number[]) => void;
   onSetDirection: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  onThreshold: (event: Event, newValue: number | number[]) => void;
   plane: Plane;
   slice: number;
+  threshold: number;
   volumeShape: [number, number, number];
 }
 
 export default function Controls({
   onSlide,
   onSetDirection,
+  onThreshold,
   plane,
   slice,
+  threshold,
   volumeShape,
 }: Props) {
   const maxSlice: Record<Plane, number> = {
@@ -38,6 +42,21 @@ export default function Controls({
         p: 3,
       }}
     >
+      <Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
+        <Typography variant="body2" color="primary">
+          Threshold
+        </Typography>
+        <Slider
+          min={0}
+          max={254}
+          step={1}
+          value={threshold}
+          onChange={onThreshold}
+          valueLabelDisplay="auto"
+          aria-label="Threshold"
+        />
+      </Box>
+
       <Typography variant="overline" color="primary">
         Slice View
       </Typography>

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

@@ -16,6 +16,7 @@ interface Props {
   volumeVisible: boolean;
   slice: number;
   plane: Plane;
+  threshold: number;
 }
 
 // ---------------------------------------------------------------------------
@@ -47,6 +48,7 @@ function TomographyPlots({
   volumeShape,
   plane,
   slice,
+  threshold,
   drawerOpen,
 }: Props) {
   const { width, containerRef, mounted } = useContainerWidth();
@@ -96,12 +98,17 @@ function TomographyPlots({
   // -------------------------------------------------------------------------
   const views = [
     <CamPva />,
-    <VolumeRenderer volumeData={volumeData} volumeShape={volumeShape} />,
+    <VolumeRenderer
+      volumeData={volumeData}
+      volumeShape={volumeShape}
+      threshold={threshold / 255}
+    />,
     <SliceViewer
       volumeData={volumeData}
       volumeShape={volumeShape}
       slice={slice}
       plane={plane}
+      threshold={threshold}
     />,
   ];
 

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

@@ -25,6 +25,7 @@ function TomographyView() {
   // const [revolve, setRevolve] = useState(false);
   const [slice, setSlice] = useState<number>(0);
   const [plane, setPlane] = useState<Plane>(Plane.Z);
+  const [threshold, setThreshold] = useState<number>(38); // 38/255 ≈ 0.15, the renderer's old default
   const [drawerOpen, setDrawerOpen] = useState(true);
 
   // -------------------------------------------------------------------------
@@ -95,6 +96,10 @@ function TomographyView() {
     setPlane(radioValue);
   };
 
+  const handleThreshold = (event: Event, newValue: number | number[]) => {
+    setThreshold(typeof newValue == "number" ? newValue : newValue[0]);
+  };
+
   // revolve to be implemented
 
   if (!volume) return <Box />;
@@ -116,6 +121,7 @@ function TomographyView() {
         volumeVisible={volumeVisible}
         plane={plane}
         slice={slice}
+        threshold={threshold}
         volumeShape={volume.volumeShape}
         drawerOpen={drawerOpen}
       />
@@ -127,8 +133,10 @@ function TomographyView() {
           <TomographyControls
             onSlide={handleSlider}
             onSetDirection={handlePlane}
+            onThreshold={handleThreshold}
             plane={plane}
             slice={slice}
+            threshold={threshold}
             volumeShape={volume.volumeShape}
           />,
         ]}

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

@@ -35,18 +35,21 @@
       opacityScale: { value: opacityScale },
       steps: { value: steps },
     }),
     [],
   ); // eslint-disable-line react-hooks/exhaustive-deps
 
   // Sync scalar uniforms when props change
   useEffect(() => {
     uniforms.threshold.value = threshold;
+    invalidate();
   }, [threshold, uniforms]);
   useEffect(() => {
     uniforms.opacityScale.value = opacityScale;
+    invalidate();
   }, [opacityScale, uniforms]);
   useEffect(() => {
     uniforms.steps.value = steps;
+    invalidate();
   }, [steps, uniforms]);
 
   // Upload volume data to GPU texture