Add checkout for high res mode

FNNDSC · Nov 29, 2023 · dc19972 · dc19972
1 parent e1ae3ea
commit dc19972
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 20 deletions.
diff --git a/src/AppLayout/index.tsx b/src/AppLayout/index.tsx
@@ -35,6 +35,7 @@ import {
   ToolbarItem,
   Text,
   TextVariants,
+  Checkbox,
 } from "@patternfly/react-core";
 import BarsIcon from "@patternfly/react-icons/dist/esm/icons/bars-icon";
 import { Table, Tr, Tbody, Td } from "@patternfly/react-table";
@@ -203,6 +204,13 @@ const MyPage = ({
     changeCalMax(value);
   };
 
+  const onHighResCheckboxToggled = (_e: any, checked: boolean) => {
+    const nextState = produce(visualState, (draft) => {
+      draft.highResolutionCapable = checked;
+    });
+    onVisualStateChange(nextState);
+  };
+
   const changeCalMin = (value: number) => {
     const nextState = produce(visualState, (draft) => {
       draft.globalMeshOverlaySettings.cal_min = value;
@@ -287,6 +295,8 @@ const MyPage = ({
     </Masthead>
   );
 
+  const smallSkip = <div style={{ height: "1em" }}></div>;
+
   const sidebar = (
     <PageSidebar>
       <PageSidebarBody>
@@ -349,7 +359,17 @@ const MyPage = ({
                 value={visualState.globalMeshOverlaySettings.cal_max}
               ></Slider>
 
-              <div style={{ height: "1em" }}></div>
+              {smallSkip}
+
+              <Checkbox
+                id="high-resolution-capable"
+                onChange={onHighResCheckboxToggled}
+                isChecked={visualState.highResolutionCapable}
+                label="High resolution"
+              />
+
+              {smallSkip}
+
               <Button
                 variant="secondary"
                 onClick={() => changeMeshOverlay(CENTERNAME_NEVER)}

diff --git a/src/SubplateSurfaces/index.tsx b/src/SubplateSurfaces/index.tsx
@@ -23,16 +23,13 @@ const SubplateSurfaces = ({ visualState }: { visualState: VisualState }) => {
   const meshCanvas = useRef();
   const volumeCanvas = useRef();
 
-  const meshNvRef = useRef<Niivue>();
-  const volumeNvRef = useRef<Niivue>();
+  const meshNvRef = useRef<Niivue>(new Niivue());
+  const volumeNvRef = useRef<Niivue>(new Niivue());
 
   const [lowerCanvasHeight, setLowerCanvasHeight] = useState(300);
 
   const loadMeshes = async () => {
     const nv = meshNvRef.current;
-    if (!nv) {
-      return;
-    }
 
     for (const loadedMesh of nv.meshes) {
       nv.removeMesh(loadedMesh);
@@ -56,9 +53,6 @@ const SubplateSurfaces = ({ visualState }: { visualState: VisualState }) => {
    */
   const changeMeshLayerProperties = () => {
     const nv = meshNvRef.current;
-    if (!nv) {
-      return;
-    }
 
     const desiredMeshes = visualState.meshes.filter((mesh) => mesh.visible);
 
@@ -76,8 +70,18 @@ const SubplateSurfaces = ({ visualState }: { visualState: VisualState }) => {
             ? 1.0
             : 0.0;
         nv.setMeshLayerProperty(loadedMesh.id, i, "opacity", opacity);
-        nv.setMeshLayerProperty(loadedMesh.id, i, "cal_min", visualState.globalMeshOverlaySettings.cal_min);
-        nv.setMeshLayerProperty(loadedMesh.id, i, "cal_max", visualState.globalMeshOverlaySettings.cal_max);
+        nv.setMeshLayerProperty(
+          loadedMesh.id,
+          i,
+          "cal_min",
+          visualState.globalMeshOverlaySettings.cal_min,
+        );
+        nv.setMeshLayerProperty(
+          loadedMesh.id,
+          i,
+          "cal_max",
+          visualState.globalMeshOverlaySettings.cal_max,
+        );
       }
     }
   };
@@ -88,6 +92,7 @@ const SubplateSurfaces = ({ visualState }: { visualState: VisualState }) => {
       meshNvRef.current = new Niivue({ isColorbar: true });
       const nv = meshNvRef.current;
       nv.attachToCanvas(meshCanvas.current);
+      nv.setHighResolutionCapable(visualState.highResolutionCapable);
       await loadMeshes();
 
       // hack: load the first volume to force the meshes to use the same axes as the volumes.
@@ -103,16 +108,16 @@ const SubplateSurfaces = ({ visualState }: { visualState: VisualState }) => {
 
       // Niivue settings
       nv.setMeshThicknessOn2D(0);
-      nv.setHighResolutionCapable(false);
       nv.opts.isOrientCube = true;
     };
 
     const initVolumeCanvas = async () => {
       // Note: need to create new Niivue object when switching subjects, otherwise WebGL freezes.
       volumeNvRef.current = new Niivue();
       const nv = volumeNvRef.current;
-
       nv.attachToCanvas(volumeCanvas.current);
+      nv.setHighResolutionCapable(visualState.highResolutionCapable);
+
       await nv.loadVolumes(visualState.volumes);
       nv.setSliceType(3);
       nv.setSliceMM(true);
@@ -134,14 +139,19 @@ const SubplateSurfaces = ({ visualState }: { visualState: VisualState }) => {
       });
     };
 
+    const updateSettings = () => {
+      [meshNvRef, volumeNvRef]
+        .map((ref) => ref.current)
+        .forEach((nv) => {
+          nv.setHighResolutionCapable(visualState.highResolutionCapable);
+        });
+    };
+
     /**
      * Sync the Niivue instance's volume opacities with the prop.
      */
     const updateVolumeOpacities = () => {
       const nv = volumeNvRef.current;
-      if (!nv) {
-        return;
-      }
       zipNvState(nv.volumes, visualState.volumes, "url").forEach(
         ([i, _vol, desiredState]) => {
           nv.setOpacity(i, desiredState.opacity);
@@ -166,13 +176,15 @@ const SubplateSurfaces = ({ visualState }: { visualState: VisualState }) => {
      * Mutate the current Niivue instance's loaded mesh and volume properties.
      */
     const update = () => {
+      updateSettings();
       updateVolumeOpacities();
       updateMeshes();
     };
 
     if (prevState.counter !== visualState.counter) {
       init();
-    } else {
+    } else if (meshNvRef.current.gl && volumeNvRef.current.gl) {
+      // update only when OpenGL is ready, which is not true during first render
       update();
     }
     setPrevState(visualState);

diff --git a/src/lib/visualstate.ts b/src/lib/visualstate.ts
@@ -166,6 +166,8 @@ type VisualState = {
    * Mesh overlay settings to use for all mesh overlays.
    */
   globalMeshOverlaySettings: MeshOverlaySettings;
+
+  highResolutionCapable: boolean;
 };
 
 const INITIAL_STATE: VisualState = {
@@ -179,6 +181,7 @@ const INITIAL_STATE: VisualState = {
     cal_min: 0.0,
     cal_max: 10.0,
   },
+  highResolutionCapable: false,
 };
 Object.freeze(INITIAL_STATE);
 
@@ -213,9 +216,11 @@ function organizeUrlsAsState(
     }),
   );
 
-  const counter = previous.counter + 1;
-  const globalMeshOverlaySettings = previous.globalMeshOverlaySettings;
-  return { volumes, meshes, counter, globalMeshOverlaySettings };
+  return produce(previous, (draft) => {
+    draft.volumes = volumes;
+    draft.meshes = meshes;
+    draft.counter = previous.counter + 1;
+  });
 }
 
 /**