@aics/vole-app 3.4.2 → 3.4.4

package/es/aics-image-viewer/components/useVolume.js

@@ -184,11 +184,21 @@ var useVolume = function useVolume(scenePaths, options) {
     throw e;
   }, [onErrorRef]);
 
-  // channel indexes, sorted by category
-  var _useState9 = useState({}),
-    _useState10 = _slicedToArray(_useState9, 2),
-    channelGroupedByType = _useState10[0],
-    setChannelGroupedByType = _useState10[1];
+  // channelGroupedByType groups channel indexes by their category.
+  // It depends on `viewerChannelSettings` and the channel names in the current image.
+  // TODO this can be derived much more easily once `Volume` has events
+  var channelNamesKey = channelSettings.map(function (_ref3) {
+    var name = _ref3.name;
+    return name;
+  }).join("\0");
+  var channelNames = useMemo(function () {
+    return channelNamesKey.split("\0");
+  }, [channelNamesKey]);
+  var useDefaultViewerChannelSettings = useViewerState(select("useDefaultViewerChannelSettings"));
+  var channelGroupedByType = useMemo(function () {
+    var viewerChannelSettings = useDefaultViewerChannelSettings ? getDefaultViewerChannelSettings() : options === null || options === void 0 ? void 0 : options.viewerChannelSettings;
+    return makeChannelIndexGrouping(channelNames, viewerChannelSettings);
+  }, [channelNames, options === null || options === void 0 ? void 0 : options.viewerChannelSettings, useDefaultViewerChannelSettings]);
   var onChannelDataLoaded = useCallback(function (aimg, channelIndex) {
     // let the hook caller know that this channel has loaded
     var isInitialLoad = channelVersionsRef.current[channelIndex] === CHANNEL_INITIAL_LOAD;
@@ -208,8 +218,6 @@ var useVolume = function useVolume(scenePaths, options) {
     var _useViewerState$getSt = useViewerState.getState(),
       useDefaultViewerChannelSettings = _useViewerState$getSt.useDefaultViewerChannelSettings;
     var viewerChannelSettings = useDefaultViewerChannelSettings ? getDefaultViewerChannelSettings() : options === null || options === void 0 ? void 0 : options.viewerChannelSettings;
-    var grouping = makeChannelIndexGrouping(channelNames, viewerChannelSettings);
-    setChannelGroupedByType(grouping);
     return initChannelSettings(channelNames, viewerChannelSettings);
   }, [initChannelSettings, options === null || options === void 0 ? void 0 : options.viewerChannelSettings]);
 
@@ -219,7 +227,7 @@ var useVolume = function useVolume(scenePaths, options) {
     setLoadThrewError(false);
     inInitialLoadRef.current = true;
     var openImage = /*#__PURE__*/function () {
-      var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+      var _ref4 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
         var scene, time, loadSpec, aimg, channelNames, newChannelSettings, requiredLoadSpec, requiredChannelsToLoad, _useViewerState$getSt2, useDefaultViewerChannelSettings, viewerChannelSettings, maskChannelName, maskChannelIndex, viewMode, slice;
         return _regeneratorRuntime().wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
@@ -292,11 +300,11 @@ var useVolume = function useVolume(scenePaths, options) {
         }, _callee);
       }));
       return function openImage() {
-        return _ref3.apply(this, arguments);
+        return _ref4.apply(this, arguments);
       };
     }();
     openImage();
-  }, [sceneLoader, onError, onCreateImageRef, onChangeSceneRef, onChannelLoadedRef, channelVersionsRef, setChannelVersions, playControls, setIsLoading, onChannelDataLoaded, changeViewerSetting, initChannelSettings, setChannelStateForNewImage, options === null || options === void 0 ? void 0 : options.viewerChannelSettings]);
+  }, [sceneLoader, onError, onCreateImageRef, onChangeSceneRef, onChannelLoadedRef, channelVersionsRef, setChannelVersions, playControls, setIsLoading, onChannelDataLoaded, changeViewerSetting, setChannelStateForNewImage, options === null || options === void 0 ? void 0 : options.viewerChannelSettings]);
   // of the above dependencies, we expect only `sceneLoader` to change.
 
   var setTime = useCallback(function (view3d, time) {

package/es/aics-image-viewer/shared/utils/controlPointsToLut.js

@@ -86,26 +86,15 @@ function parseLutValue(value, histogram) {
  * "autoij:0" // use Auto-IJ to calculate min and max.
  * ```
  */
-export function parseLutFromSettings(histogram, initSettings) {
-  var _initSettings$intensi, _initSettings$intensi2;
-  // TODO: Consider minimizing the types/classes this function is interacting
-  // with, since it is only using `initSettings.lut` and the returned Lut is a
-  // wrapper around the control point array, e.g.
-  // `parseControlPointsFromLutParam(histogram: Histogram, lutParam: [string,
-  // string] | undefined): ControlPoint[] | undefined`
-
-  // There are two possible locations for the LUT settings, due to legacy
-  // reasons. `initSettings.lut` is deprecated in favor of
-  // `initSettings.intensity.lut`.
-  var settingsLut = (_initSettings$intensi = (_initSettings$intensi2 = initSettings.intensity) === null || _initSettings$intensi2 === void 0 ? void 0 : _initSettings$intensi2.lut) !== null && _initSettings$intensi !== void 0 ? _initSettings$intensi : initSettings.lut;
-  if (settingsLut === undefined || settingsLut.length !== 2) {
+export function parseLutSetting(histogram, lutSetting) {
+  if (lutSetting === undefined || lutSetting.length !== 2) {
     return undefined;
   }
   var lutValues;
-  if (settingsLut[0] === "autoij" || settingsLut[1] === "autoij") {
+  if (lutSetting[0] === "autoij" || lutSetting[1] === "autoij") {
     lutValues = histogram.findAutoIJBins();
   } else {
-    lutValues = [parseLutValue(settingsLut[0], histogram), parseLutValue(settingsLut[1], histogram)];
+    lutValues = [parseLutValue(lutSetting[0], histogram), parseLutValue(lutSetting[1], histogram)];
   }
   if (!Number.isFinite(lutValues[0]) || !Number.isFinite(lutValues[1])) {
     return undefined;
@@ -156,8 +145,12 @@ export function initializeLut(aimg, channelIndex, channelSettings) {
   // Attempt to load a LUT from the settings, which will be used as a fallback
   // to initialize the control points and ramp.
   if (initSettings) {
-    var _parseLutFromSettings;
-    lut = (_parseLutFromSettings = parseLutFromSettings(histogram, initSettings)) !== null && _parseLutFromSettings !== void 0 ? _parseLutFromSettings : defaultLut;
+    var _initSettings$intensi, _initSettings$intensi2, _parseLutSetting;
+    // There are two possible locations for the LUT settings, due to legacy
+    // reasons. `initSettings.lut` is deprecated in favor of
+    // `initSettings.intensity.lut`.
+    var lutSetting = (_initSettings$intensi = (_initSettings$intensi2 = initSettings.intensity) === null || _initSettings$intensi2 === void 0 ? void 0 : _initSettings$intensi2.lut) !== null && _initSettings$intensi !== void 0 ? _initSettings$intensi : initSettings.lut;
+    lut = (_parseLutSetting = parseLutSetting(histogram, lutSetting)) !== null && _parseLutSetting !== void 0 ? _parseLutSetting : defaultLut;
   }
 
   // Use raw intensity values for control points or ramp if provided in the
@@ -189,15 +182,6 @@ export function initializeLut(aimg, channelIndex, channelSettings) {
       });
     });
   }
-
-  // Apply whatever lut is currently visible
-  var visibleLut;
-  if (initSettings !== null && initSettings !== void 0 && initSettings.controlPointsEnabled) {
-    visibleLut = new Lut().createFromControlPoints(controlPoints);
-  } else {
-    visibleLut = new Lut().createFromControlPoints(ramp);
-  }
-  aimg.setLut(channelIndex, visibleLut);
   return {
     ramp: ramp,
     controlPoints: controlPoints

package/es/aics-image-viewer/shared/utils/sceneStore.js

@@ -102,10 +102,12 @@ var SceneStore = /*#__PURE__*/function () {
                   return channelIndex < imageInfo.channelNames.length;
                 }),
                 time: Math.min(spec.time, maxTime)
-              });
+              }); // TODO it's not great that this is the caller's responsibility... fix this more robustly in vole-core
+              image.loadSpec = _objectSpread(_objectSpread({}, image.loadSpec), adjustedSpec);
+              image.loadSpecRequired = _objectSpread(_objectSpread({}, image.loadSpecRequired), adjustedSpec);
               options === null || options === void 0 || (_options$onCreateScen = options.onCreateScene) === null || _options$onCreateScen === void 0 || _options$onCreateScen.call(options, image, scene, adjustedSpec);
               loader.loadVolumeData(image, adjustedSpec, options === null || options === void 0 ? void 0 : options.onChannelLoaded);
-            case 14:
+            case 16:
             case "end":
               return _context2.stop();
           }

package/es/aics-image-viewer/state/deserialize.js

@@ -12,6 +12,7 @@ function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 import { ImageType, RenderMode, ViewMode } from "../shared/enums";
+import { controlPointsToRamp, parseLutSetting } from "../shared/utils/controlPointsToLut";
 import { removeUndefinedProperties } from "../shared/utils/datatypes";
 import { clamp } from "../shared/utils/math";
 import { CameraTransformKeys, ViewerChannelSettingKeys, ViewerStateKeys } from "./types";
@@ -434,4 +435,98 @@ export function deserializeViewerChannelSetting(channelIndex, jsonState) {
     }
   }
   return result;
+}
+
+/**
+ * Parses a `ViewerChannelStateParams` object into a partial `ChannelState`.
+ *
+ * This is used to convert raw URL params into internal channel state fields,
+ * leaving absent or invalid values undefined.
+ *
+ * This function optionally accepts the target channel's `Histogram`. This
+ * argument is required to parse the following params correctly:
+ *
+ * - `lut`, which contains instructions for how to set the channel's
+ *   intensities *relative to its intensity distribution*.
+ * - `rmp`, the legacy ramp parameter represented as histogram bin indices
+ * - `cps`, the legacy control points parameter where `x` values are
+ *   represented as histogram bin indices
+ *
+ * If `histogram` is left undefined, e.g. because the channel has not yet been
+ * loaded, these params are ignored.
+ */
+export function deserializeChannelState(jsonState, histogram) {
+  var result = {
+    volumeEnabled: parseStringBoolean(jsonState[ViewerChannelSettingKeys.VolumeEnabled]),
+    isosurfaceEnabled: parseStringBoolean(jsonState[ViewerChannelSettingKeys.SurfaceEnabled]),
+    isovalue: parseStringFloat(jsonState[ViewerChannelSettingKeys.IsosurfaceValue], -Infinity, Infinity),
+    keepIntensityRange: parseStringBoolean(jsonState[ViewerChannelSettingKeys.KeepRange]),
+    opacity: parseStringFloat(jsonState[ViewerChannelSettingKeys.IsosurfaceAlpha], 0, 1),
+    colorizeEnabled: parseStringBoolean(jsonState[ViewerChannelSettingKeys.Colorize]),
+    colorizeAlpha: parseStringFloat(jsonState[ViewerChannelSettingKeys.ColorizeAlpha], 0, 1),
+    useControlPoints: parseStringBoolean(jsonState[ViewerChannelSettingKeys.ControlPointsEnabled]),
+    color: parseHexColorAsColorArray(jsonState[ViewerChannelSettingKeys.Color])
+  };
+  var lutSerialized = jsonState[ViewerChannelSettingKeys.Lut];
+  var pointsFromLut = undefined;
+  if (histogram !== undefined && lutSerialized !== undefined && LUT_REGEX.test(lutSerialized)) {
+    var _lutSerialized$split = lutSerialized.split(":"),
+      _lutSerialized$split2 = _slicedToArray(_lutSerialized$split, 2),
+      min = _lutSerialized$split2[0],
+      max = _lutSerialized$split2[1];
+    var lut = parseLutSetting(histogram, [min.trim(), max.trim()]);
+    pointsFromLut = lut === null || lut === void 0 ? void 0 : lut.controlPoints.map(function (point) {
+      return _objectSpread(_objectSpread({}, point), {}, {
+        x: histogram.getValueFromBinIndex(point.x)
+      });
+    });
+  }
+  if (jsonState[ViewerChannelSettingKeys.Ramp]) {
+    if (RAMP_REGEX.test(jsonState[ViewerChannelSettingKeys.Ramp])) {
+      var _jsonState$ViewerChan7 = jsonState[ViewerChannelSettingKeys.Ramp].split(":"),
+        _jsonState$ViewerChan8 = _slicedToArray(_jsonState$ViewerChan7, 2),
+        _min3 = _jsonState$ViewerChan8[0],
+        _max3 = _jsonState$ViewerChan8[1];
+      result.ramp = [Number.parseFloat(_min3), Number.parseFloat(_max3)];
+    }
+  } else if (jsonState[ViewerChannelSettingKeys.RampLegacy]) {
+    if (histogram !== undefined) {
+      if (RAMP_REGEX.test(jsonState[ViewerChannelSettingKeys.RampLegacy])) {
+        var _jsonState$ViewerChan9 = jsonState[ViewerChannelSettingKeys.RampLegacy].split(":"),
+          _jsonState$ViewerChan10 = _slicedToArray(_jsonState$ViewerChan9, 2),
+          rawMin = _jsonState$ViewerChan10[0],
+          rawMax = _jsonState$ViewerChan10[1];
+        var _min4 = histogram.getValueFromBinIndex(Number.parseFloat(rawMin));
+        var _max4 = histogram.getValueFromBinIndex(Number.parseFloat(rawMax));
+        result.ramp = [_min4, _max4];
+      }
+    }
+  } else if (pointsFromLut !== undefined) {
+    result.ramp = controlPointsToRamp(pointsFromLut);
+  }
+  if (jsonState[ViewerChannelSettingKeys.ControlPoints]) {
+    var parsedResult = parseControlPoints(jsonState[ViewerChannelSettingKeys.ControlPoints]);
+    if (parsedResult) {
+      result.controlPoints = parsedResult;
+    }
+  } else if (jsonState[ViewerChannelSettingKeys.ControlPointsLegacy]) {
+    if (histogram !== undefined) {
+      var _parsedResult2 = parseControlPoints(jsonState[ViewerChannelSettingKeys.ControlPointsLegacy]);
+      if (_parsedResult2) {
+        result.controlPoints = _parsedResult2.map(function (_ref) {
+          var opacity = _ref.opacity,
+            color = _ref.color,
+            x = _ref.x;
+          return {
+            opacity: opacity,
+            color: color,
+            x: histogram.getValueFromBinIndex(x)
+          };
+        });
+      }
+    }
+  } else if (pointsFromLut !== undefined) {
+    result.controlPoints = pointsFromLut;
+  }
+  return removeUndefinedProperties(result);
 }

package/es/aics-image-viewer/state/test/deserialize.test.js

@@ -12,7 +12,7 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import { describe, expect, it } from "@jest/globals";
 import { RenderMode, ViewMode } from "../../shared/enums";
-import { CONTROL_POINTS_REGEX, deserializeViewerChannelSetting, deserializeViewerState, LEGACY_CONTROL_POINTS_REGEX, parseHexColorAsColorArray, parseKeyValueList, parseStringEnum, parseStringFloat, parseStringInt } from "../deserialize";
+import { CONTROL_POINTS_REGEX, deserializeChannelState, deserializeViewerChannelSetting, deserializeViewerState, LEGACY_CONTROL_POINTS_REGEX, parseHexColorAsColorArray, parseKeyValueList, parseStringEnum, parseStringFloat, parseStringInt } from "../deserialize";
 import { serializeViewerState } from "../serialize";
 import { CUSTOM_TEST_VIEWER_STATE, DEFAULT_TEST_VIEWER_CHANNEL_SETTING, DEFAULT_TEST_VIEWER_STATE, SERIALIZED_CUSTOM_TEST_VIEWER_STATE, SERIALIZED_DEFAULT_TEST_VIEWER_STATE } from "./test_data";
 
@@ -306,6 +306,57 @@ describe("deserializeViewerChannelSetting", function () {
     expect(result.isovalue).toBeUndefined();
   });
 });
+describe("deserializeChannelState", function () {
+  it("returns an empty object for empty input", function () {
+    expect(deserializeChannelState({})).toEqual({});
+  });
+  it("parses channel state fields", function () {
+    var data = {
+      col: "ff0000",
+      clz: "1",
+      cza: "0.5",
+      isa: "0.75",
+      ven: "1",
+      sen: "1",
+      isv: "128",
+      ram: "0:255",
+      cpe: "1",
+      pin: "1"
+    };
+    expect(deserializeChannelState(data)).toEqual({
+      color: [255, 0, 0],
+      colorizeEnabled: true,
+      colorizeAlpha: 0.5,
+      opacity: 0.75,
+      volumeEnabled: true,
+      isosurfaceEnabled: true,
+      isovalue: 128,
+      ramp: [0, 255],
+      useControlPoints: true,
+      keepIntensityRange: true
+    });
+  });
+  it("prefers new control points and ramp fields over legacy fields", function () {
+    var data = {
+      cpt: "0:0:000000:255:1:ffffff",
+      cps: "0:0:ff0000:255:1:00ff00",
+      ram: "1:2",
+      rmp: "3:4"
+    };
+    expect(deserializeChannelState(data)).toEqual({
+      controlPoints: [{
+        x: 0,
+        opacity: 0,
+        color: [0, 0, 0]
+      }, {
+        x: 255,
+        opacity: 1,
+        color: [255, 255, 255]
+      }],
+      ramp: [1, 2]
+    });
+  });
+});
 describe("deserializeViewerState", function () {
   it("returns an empty object for empty input", function () {
     expect(deserializeViewerState({})).toEqual({});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aics/vole-app",
-  "version": "3.4.2",
+  "version": "3.4.4",
   "description": "web view of cell volume images",
   "main": "es/index.js",
   "module": "es/index.js",
@@ -43,7 +43,7 @@
     "deploy": "gh-pages -d imageviewer -t true",
     "checks": "npm run lint && npm run typeCheck && npm run test"
   },
-  "author": "Megan Riel-Mehan",
+  "author": "Allen Institute, Cell Science",
   "license": "BSD-3-Clause",
   "dependencies": {
     "@aics/vole-core": "^4.9.2",
@@ -60,6 +60,7 @@
     "react-color": "^2.19.3",
     "react-router-dom": "^6.26.2",
     "styled-components": "^6.1.13",
+    "three": "0.184.0",
     "usehooks-ts": "^3.1.0",
     "uuid": "^13.0.0",
     "zustand": "^5.0.6"
@@ -85,7 +86,7 @@
     "@types/react": "^18.x",
     "@types/react-color": "^3.0.12",
     "@types/react-dom": "^18.x",
-    "@types/three": "^0.171.0",
+    "@types/three": "0.184.0",
     "@typescript-eslint/eslint-plugin": "^8.46.2",
     "@typescript-eslint/parser": "^8.46.2",
     "antd": "^5.16.2",

package/type-declarations/aics-image-viewer/shared/utils/controlPointsToLut.d.ts

@@ -1,5 +1,5 @@
 import { type ControlPoint, type Histogram, Lut, type Volume } from "@aics/vole-core";
-import { type ViewerChannelSetting, type ViewerChannelSettings } from "./viewerChannelSettings";
+import { type ViewerChannelSettings } from "./viewerChannelSettings";
 /**
  * @param {Object[]} controlPoints - array of `{x:number, opacity:number,
  * color:string}`, where `x` is a histogram bin index.
@@ -35,7 +35,7 @@ export declare function getDefaultLut(histogram: Histogram): Lut;
  * "autoij:0" // use Auto-IJ to calculate min and max.
  * ```
  */
-export declare function parseLutFromSettings(histogram: Histogram, initSettings: ViewerChannelSetting): Lut | undefined;
+export declare function parseLutSetting(histogram: Histogram, lutSetting: [string, string] | undefined): Lut | undefined;
 /**
  * Initializes the lookup table (LUT) that maps from volume intensity values to color + opacity and applies the LUT to the volume.
  *

package/type-declarations/aics-image-viewer/state/deserialize.d.ts

@@ -1,6 +1,7 @@
+import type { Histogram } from "@aics/vole-core";
 import type { ColorArray } from "../shared/utils/colorRepresentations";
 import type { ViewerChannelSetting } from "../shared/utils/viewerChannelSettings";
-import { type ViewerChannelStateParams, type ViewerState, type ViewerStateParams } from "./types";
+import { type ChannelState, type ViewerChannelStateParams, type ViewerState, type ViewerStateParams } from "./types";
 /**
  * LEGACY: Matches a COMMA-separated list of control points, where each control point is represented
  * by a triplet of `{x}:{opacity}:{hex color}`.
@@ -68,3 +69,22 @@ export declare function deserializeViewerState(params: ViewerStateParams): Parti
  * @returns A ViewerChannelSetting object.
  */
 export declare function deserializeViewerChannelSetting(channelIndex: number, jsonState: ViewerChannelStateParams): ViewerChannelSetting;
+/**
+ * Parses a `ViewerChannelStateParams` object into a partial `ChannelState`.
+ *
+ * This is used to convert raw URL params into internal channel state fields,
+ * leaving absent or invalid values undefined.
+ *
+ * This function optionally accepts the target channel's `Histogram`. This
+ * argument is required to parse the following params correctly:
+ *
+ * - `lut`, which contains instructions for how to set the channel's
+ *   intensities *relative to its intensity distribution*.
+ * - `rmp`, the legacy ramp parameter represented as histogram bin indices
+ * - `cps`, the legacy control points parameter where `x` values are
+ *   represented as histogram bin indices
+ *
+ * If `histogram` is left undefined, e.g. because the channel has not yet been
+ * loaded, these params are ignored.
+ */
+export declare function deserializeChannelState(jsonState: ViewerChannelStateParams, histogram?: Histogram): Partial<ChannelState>;