Add support for setColormapLabel

examples/demos/Atlas.tsx

@@ -0,0 +1,84 @@
+/**
+ * https://github.com/niivue/niivue/blob/bef7941124538e3e593fbce632b7d67826c9bc1e/demos/features/atlas.html
+ * https://niivue.github.io/niivue/features/atlas.html
+ */
+
+import { NiivueCanvas, NVROptions, NVRVolume } from "../../src";
+
+import { useImmer } from "use-immer";
+import { Niivue } from "@niivue/niivue";
+import React, { useState } from "react";
+import styles from "./upstream.module.css";
+
+import AalColormapLabel from "../public/images/aal.json";
+import { ColorMap } from "../../src/reexport.ts";
+
+const Atlas = () => {
+  const [darkBackground, setDarkBackground] = useState(false);
+  const [alpha, setAlpha] = useState(255);
+  const [crosshairLocation, setCrosshairLocation] = useState("");
+
+  const options: NVROptions = {
+    // https://github.com/niivue/niivue/blob/bef7941124538e3e593fbce632b7d67826c9bc1e/demos/features/atlas.html#L67-L73
+    backColor: darkBackground ? [0.5, 0.5, 0.5, 1] : [1, 1, 1, 1],
+  };
+
+  const volumes: NVRVolume[] = [
+    {
+      url: "/images/mni152.nii.gz",
+    },
+    {
+      url: "/images/aal.nii.gz",
+      colormapLabel: AalColormapLabel as ColorMap,
+      opacity: alpha / 255,
+    },
+  ];
+
+  return (
+    <div className={styles.root}>
+      <header>
+        {/* not implemented */}
+        {/*<label htmlFor="check1">Outline</label>*/}
+        {/*<input type="checkbox" id="check1" unchecked/>*/}
+        <label htmlFor="check2">Dark Background</label>
+        <input
+          type="checkbox"
+          id="check2"
+          checked={darkBackground}
+          onChange={(e) => setDarkBackground(e.target.checked)}
+        />
+        <label htmlFor="alphaSlider">Opacity</label>
+        <input
+          type="range"
+          min={1}
+          max={255}
+          value={alpha}
+          onChange={(e) => setAlpha(e.target.valueAsNumber)}
+          id="alphaSlider"
+        />
+        {/* not implemented */}
+        {/*<label htmlFor="padSlider">Padding</label>*/}
+        {/*<input*/}
+        {/*  type="range"*/}
+        {/*  min="0"*/}
+        {/*  max="10"*/}
+        {/*  value="5"*/}
+        {/*  id="padSlider"*/}
+        {/*/>*/}
+      </header>
+      <main>
+        <NiivueCanvas
+          volumes={volumes}
+          options={options}
+          onStart={(nv) => {
+            nv.onLocationChange = (location: any) =>
+              setCrosshairLocation(location.string);
+          }}
+        />
+      </main>
+      <footer id="location">{crosshairLocation}</footer>
+    </div>
+  );
+};
+
+export default Atlas;

examples/index.tsx

@@ -10,6 +10,7 @@ import { NiivueCanvasForTest } from "./NiivueCanvasForPlaywrightTest.tsx";
 import ReadmeExample from "./ReadmeExample.tsx";
 import ModulateScalar from "./demos/ModulateScalar.tsx";
 import "./index.css";
+import Atlas from "./demos/Atlas.tsx";
 
 const nonRootRoutes: RouteObject[] = [
   {
@@ -20,6 +21,10 @@ const nonRootRoutes: RouteObject[] = [
     path: "/modulate_scalar",
     element: <ModulateScalar />,
   },
+  {
+    path: "/atlas",
+    element: <Atlas />,
+  },
   {
     path: "/playwright_harness",
     element: <NiivueCanvasForTest />,

examples/public/images/aal.json

@@ -0,0 +1,151 @@
+{
+  "R": [
+    0, 71, 33, 192, 32, 195, 208, 173, 233, 202, 25, 210, 145, 89, 87, 245, 246,
+    38, 3, 25, 57, 167, 245, 86, 227, 208, 81, 64, 90, 199, 140, 48, 212, 180,
+    70, 120, 9, 192, 245, 177, 65, 157, 9, 193, 100, 181, 125, 145, 62, 8, 108,
+    36, 140, 237, 242, 248, 161, 189, 41, 114, 65, 121, 97, 50, 238, 149, 44,
+    214, 124, 167, 40, 167, 127, 178, 231, 30, 173, 244, 193, 203, 204, 238,
+    139, 135, 71, 234, 234, 217, 66, 14, 129, 19, 97, 165, 112, 244, 35, 73,
+    192, 12, 149, 71, 33, 192, 32, 195, 208, 173, 233, 202, 25, 210, 145, 89,
+    87, 245, 246
+  ],
+  "G": [
+    0, 46, 78, 199, 79, 89, 41, 208, 135, 20, 154, 35, 21, 43, 230, 113, 191,
+    147, 208, 37, 28, 27, 86, 203, 25, 209, 148, 187, 139, 111, 48, 102, 76,
+    110, 106, 130, 37, 160, 34, 222, 90, 165, 245, 222, 102, 47, 19, 130, 4,
+    232, 137, 211, 240, 11, 140, 21, 42, 22, 241, 61, 99, 115, 199, 166, 114,
+    190, 204, 60, 233, 66, 115, 230, 125, 103, 203, 125, 13, 176, 94, 131, 39,
+    198, 167, 124, 67, 175, 254, 1, 15, 198, 62, 237, 159, 31, 218, 58, 244, 47,
+    61, 67, 94, 46, 78, 199, 79, 89, 41, 208, 135, 20, 154, 35, 21, 43, 230,
+    113, 191
+  ],
+  "B": [
+    0, 154, 43, 10, 207, 204, 164, 231, 136, 58, 239, 30, 147, 230, 101, 111,
+    150, 35, 128, 57, 252, 79, 173, 120, 25, 126, 81, 85, 8, 7, 122, 237, 190,
+    152, 246, 182, 130, 219, 67, 76, 167, 178, 235, 250, 28, 61, 186, 250, 199,
+    67, 58, 50, 86, 182, 108, 77, 89, 112, 59, 125, 226, 50, 205, 227, 125, 128,
+    104, 27, 59, 66, 53, 133, 159, 203, 97, 125, 139, 159, 158, 7, 215, 47, 140,
+    226, 223, 231, 44, 110, 184, 61, 233, 47, 67, 148, 22, 120, 173, 156, 117,
+    181, 94, 154, 43, 10, 207, 204, 164, 231, 136, 58, 239, 30, 147, 230, 101,
+    111, 150
+  ],
+  "labels": [
+    "Air",
+    "Precentral_L",
+    "Precentral_R",
+    "Frontal_Sup_L",
+    "Frontal_Sup_R",
+    "Frontal_Sup_Orb_L",
+    "Frontal_Sup_Orb_R",
+    "Frontal_Mid_L",
+    "Frontal_Mid_R",
+    "Frontal_Mid_Orb_L",
+    "Frontal_Mid_Orb_R",
+    "Frontal_Inf_Oper_L",
+    "Frontal_Inf_Oper_R",
+    "Frontal_Inf_Tri_L",
+    "Frontal_Inf_Tri_R",
+    "Frontal_Inf_Orb_L",
+    "Frontal_Inf_Orb_R",
+    "Rolandic_Oper_L",
+    "Rolandic_Oper_R",
+    "Supp_Motor_Area_L",
+    "Supp_Motor_Area_R",
+    "Olfactory_L",
+    "Olfactory_R",
+    "Frontal_Sup_Medial_L",
+    "Frontal_Sup_Medial_R",
+    "Frontal_Med_Orb_L",
+    "Frontal_Med_Orb_R",
+    "Rectus_L",
+    "Rectus_R",
+    "Insula_L",
+    "Insula_R",
+    "Cingulum_Ant_L",
+    "Cingulum_Ant_R",
+    "Cingulum_Mid_L",
+    "Cingulum_Mid_R",
+    "Cingulum_Post_L",
+    "Cingulum_Post_R",
+    "Hippocampus_L",
+    "Hippocampus_R",
+    "ParaHippocampal_L",
+    "ParaHippocampal_R",
+    "Amygdala_L",
+    "Amygdala_R",
+    "Calcarine_L",
+    "Calcarine_R",
+    "Cuneus_L",
+    "Cuneus_R",
+    "Lingual_L",
+    "Lingual_R",
+    "Occipital_Sup_L",
+    "Occipital_Sup_R",
+    "Occipital_Mid_L",
+    "Occipital_Mid_R",
+    "Occipital_Inf_L",
+    "Occipital_Inf_R",
+    "Fusiform_L",
+    "Fusiform_R",
+    "Postcentral_L",
+    "Postcentral_R",
+    "Parietal_Sup_L",
+    "Parietal_Sup_R",
+    "Parietal_Inf_L",
+    "Parietal_Inf_R",
+    "SupraMarginal_L",
+    "SupraMarginal_R",
+    "Angular_L",
+    "Angular_R",
+    "Precuneus_L",
+    "Precuneus_R",
+    "Paracentral_Lobule_L",
+    "Paracentral_Lobule_R",
+    "Caudate_L",
+    "Caudate_R",
+    "Putamen_L",
+    "Putamen_R",
+    "Pallidum_L",
+    "Pallidum_R",
+    "Thalamus_L",
+    "Thalamus_R",
+    "Heschl_L",
+    "Heschl_R",
+    "Temporal_Sup_L",
+    "Temporal_Sup_R",
+    "Temporal_Pole_Sup_L",
+    "Temporal_Pole_Sup_R",
+    "Temporal_Mid_L",
+    "Temporal_Mid_R",
+    "Temporal_Pole_Mid_L",
+    "Temporal_Pole_Mid_R",
+    "Temporal_Inf_L",
+    "Temporal_Inf_R",
+    "Cerebelum_Crus1_L",
+    "Cerebelum_Crus1_R",
+    "Cerebelum_Crus2_L",
+    "Cerebelum_Crus2_R",
+    "Cerebelum_3_L",
+    "Cerebelum_3_R",
+    "Cerebelum_4_5_L",
+    "Cerebelum_4_5_R",
+    "Cerebelum_6_L",
+    "Cerebelum_6_R",
+    "Cerebelum_7b_L",
+    "Cerebelum_7b_R",
+    "Cerebelum_8_L",
+    "Cerebelum_8_R",
+    "Cerebelum_9_L",
+    "Cerebelum_9_R",
+    "Cerebelum_10_L",
+    "Cerebelum_10_R",
+    "Vermis_1_2",
+    "Vermis_3",
+    "Vermis_4_5",
+    "Vermis_6",
+    "Vermis_7",
+    "Vermis_8",
+    "Vermis_9",
+    "Vermis_10"
+  ]
+}

src/NiivueMutator.ts

@@ -4,10 +4,9 @@ import {
   LoadableVolumeOptions,
   ImageOptions,
   NVROptions,
-  NVRMesh,
-  HasUrlObject,
 } from "./model.ts";
 import * as setters from "./setters.ts";
+import { ColorMap } from "./reexport.ts";
 
 /**
  * Provides helper functions to mutate the Niivue instance.
@@ -109,16 +108,19 @@ class NiivueMutator {
   }
 
   /**
-   * Handle special properties such as the keys of `SpecialVolumeOptions`.
+   * Handle special properties such as the keys of {@link SpecialVolumeOptions}.
    */
   private handleSpecialImageProperties(volume: NVRVolume) {
     if ("modulationImageUrl" in volume) {
       this.setModulationImage(volume, volume.modulationImageUrl);
     }
+    if ("colormapLabel" in volume) {
+      this.setColormapLabel(volume, volume.colormapLabel);
+    }
   }
 
   /**
-   * Wrapper for `this.nv.setModulationImage`
+   * Wrapper for {@link Niivue.setModulationImage}
    */
   private setModulationImage(
     target: NVRVolume,
@@ -148,6 +150,23 @@ class NiivueMutator {
     );
   }
 
+  /**
+   * Wrapper for {@link NVImage.setColormapLabel}
+   */
+  private setColormapLabel(
+    volume: NVRVolume,
+    colormapLabel: undefined | ColorMap,
+  ) {
+    if (colormapLabel === undefined) {
+      throw new Error(
+        `colormapLabel is undefined, and unsetting of a colormapLabel is not supported.`,
+      );
+    }
+    const targetImage = this.nv.getMediaByUrl(volume.url) as NVImage;
+    targetImage.setColormapLabel(colormapLabel);
+    this.nv.updateGLVolume();
+  }
+
   /**
    * Apply changes to already loaded volumes.
    */
@@ -244,6 +263,7 @@ const SPECIAL_IMAGE_FIELDS: (keyof NVRVolume)[] = ["url", "modulationImageUrl"];
 const UNLOADABLE_IMAGE_FIELDS: (keyof NVRVolume)[] = [
   "modulationImageUrl",
   "modulateAlpha",
+  "colormapLabel",
 ];
 
 /**