@aics/vole-app 2.15.0 → 3.1.1

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

@@ -1,29 +1,6 @@
 import { getDefaultChannelState } from "../constants";
 import { findFirstChannelMatch, getDisplayName } from "./viewerChannelSettings";
 
-/** Sets all fields of the viewer state to the values of the `newState`. */
-export function overrideViewerState(changeViewerSetting, newState) {
-  for (var _i = 0, _arr = Object.keys(newState); _i < _arr.length; _i++) {
-    var key = _arr[_i];
-    changeViewerSetting(key, newState[key]);
-  }
-
-  // Pathtrace rendering is not allowed in 2D view mode but is in 3D mode.
-  // Since we're not guaranteed on the order of object keys, apply changes to render mode a second time
-  // in case we were previously in 2D view mode and the change was blocked, but we're now in 3D.
-  changeViewerSetting("renderMode", newState.renderMode);
-}
-export function overrideChannelStates(setChannelSettings, currentStates, newStates) {
-  // Match the names in the new state with the existing state so we do not override the names.
-  // Also don't reset the control points or ramps, since these will be reset in the app.
-  for (var i = 0; i < newStates.length; i++) {
-    newStates[i].name = currentStates[i].name;
-    newStates[i].controlPoints = currentStates[i].controlPoints;
-    newStates[i].ramp = currentStates[i].ramp;
-  }
-  setChannelSettings(newStates);
-}
-
 /** Returns the indices of channels that have either the volume or isosurface enabled. */
 export function getEnabledChannelIndices(channelSettings) {
   var enabledChannels = [];
@@ -44,7 +21,7 @@ export function colorHexToArray(hex) {
   }
 }
 export function initializeOneChannelSetting(channelName, index, defaultColor, viewerChannelSettings) {
-  var _initSettings$enabled, _initSettings$surface, _initSettings$coloriz, _initSettings$coloriz2, _initSettings$isovalu, _initSettings$surface2, _colorHexToArray, _initSettings$color, _initSettings$control, _initSettings$control2, _initSettings$ramp;
+  var _initSettings$enabled, _initSettings$surface, _initSettings$coloriz, _initSettings$coloriz2, _initSettings$isovalu, _initSettings$surface2, _colorHexToArray, _initSettings$color, _initSettings$control, _initSettings$keepInt, _initSettings$control2, _initSettings$ramp;
   var defaultChannelState = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : getDefaultChannelState();
   var initSettings = {};
   if (viewerChannelSettings) {
@@ -63,6 +40,9 @@ export function initializeOneChannelSetting(channelName, index, defaultColor, vi
     opacity: (_initSettings$surface2 = initSettings.surfaceOpacity) !== null && _initSettings$surface2 !== void 0 ? _initSettings$surface2 : defaultChannelState.opacity,
     color: (_colorHexToArray = colorHexToArray((_initSettings$color = initSettings.color) !== null && _initSettings$color !== void 0 ? _initSettings$color : "")) !== null && _colorHexToArray !== void 0 ? _colorHexToArray : defaultColor,
     useControlPoints: (_initSettings$control = initSettings.controlPointsEnabled) !== null && _initSettings$control !== void 0 ? _initSettings$control : defaultChannelState.useControlPoints,
+    keepIntensityRange: (_initSettings$keepInt = initSettings.keepIntensityRange) !== null && _initSettings$keepInt !== void 0 ? _initSettings$keepInt : defaultChannelState.keepIntensityRange,
+    // Note: The below values are placeholders and will be overridden (and the
+    // initial settings applied) when the channel is first loaded.
     controlPoints: (_initSettings$control2 = initSettings.controlPoints) !== null && _initSettings$control2 !== void 0 ? _initSettings$control2 : defaultChannelState.controlPoints,
     ramp: (_initSettings$ramp = initSettings.ramp) !== null && _initSettings$ramp !== void 0 ? _initSettings$ramp : defaultChannelState.ramp,
     plotMin: defaultChannelState.plotMin,

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

@@ -0,0 +1,111 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+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 _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+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; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+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 { getDefaultCameraState, getDefaultChannelColor, getDefaultChannelState, getDefaultViewerState } from "../shared/constants";
+import { ViewMode } from "../shared/enums";
+import { getEnabledChannelIndices, initializeOneChannelSetting } from "../shared/utils/viewerState";
+import { validateState } from "./util";
+var resetState = function resetState(currentState, newState, newChannelStates) {
+  var channelSettings = currentState.channelSettings,
+    viewMode = currentState.viewMode,
+    time = currentState.time,
+    slice = currentState.slice,
+    scene = currentState.scene;
+
+  // Needs reset on reload if one of the view modes is 2D while the other is 3D,
+  // if the timestamp is different, or if we're on a different z slice.
+  // TODO: Handle stopping playback? Requires playback to be part of ViewerStateContext
+  var isInDifferentViewMode = viewMode !== newState.viewMode && (viewMode === ViewMode.xy || newState.viewMode === ViewMode.xy);
+  var isAtDifferentTime = time !== newState.time;
+  var isAtDifferentZSlice = newState.viewMode === ViewMode.xy && !(newState.slice.z === slice.z);
+  var isAtDifferentScene = newState.scene !== scene;
+  var willNeedResetOnLoad = isInDifferentViewMode || isAtDifferentTime || isAtDifferentZSlice || isAtDifferentScene;
+  var viewerState = validateState(currentState, newState);
+  // Match the names in the new state with the existing state so we do not override the names.
+  // Also don't reset the control points or ramps, since these will be reset in the app.
+  var channelState = newChannelStates.map(function (state, index) {
+    return _objectSpread(_objectSpread({}, state), {}, {
+      name: channelSettings[index].name,
+      displayName: channelSettings[index].displayName,
+      controlPoints: channelSettings[index].controlPoints,
+      ramp: channelSettings[index].ramp,
+      plotMin: channelSettings[index].plotMin,
+      plotMax: channelSettings[index].plotMax
+    });
+  });
+  var channelsToReset = _toConsumableArray(Array(newChannelStates.length).keys());
+  var channelsToResetOnLoad = [];
+  if (willNeedResetOnLoad) {
+    channelsToResetOnLoad = getEnabledChannelIndices(newChannelStates);
+    channelsToReset = channelsToReset.filter(function (ch) {
+      return !channelsToResetOnLoad.includes(ch);
+    });
+  }
+  return _objectSpread(_objectSpread({}, viewerState), {}, {
+    channelSettings: channelState,
+    channelsToReset: channelsToReset,
+    channelsToResetOnLoad: channelsToResetOnLoad
+  });
+};
+export var createResetSlice = function createResetSlice(set) {
+  return {
+    channelsToReset: [],
+    channelsToResetOnLoad: [],
+    savedViewerChannelSettings: undefined,
+    useDefaultViewerChannelSettings: false,
+    onResetChannel: function onResetChannel(channelIndex) {
+      set(function (_ref) {
+        var channelsToReset = _ref.channelsToReset,
+          channelsToResetOnLoad = _ref.channelsToResetOnLoad;
+        return {
+          channelsToReset: channelsToReset.filter(function (ch) {
+            return ch !== channelIndex;
+          }),
+          channelsToResetOnLoad: channelsToResetOnLoad.filter(function (ch) {
+            return ch !== channelIndex;
+          })
+        };
+      });
+    },
+    resetToSavedViewerState: function resetToSavedViewerState(savedState, viewerChannelSettings) {
+      set(function (currentState) {
+        var _savedState$viewMode;
+        var channelSettings = currentState.channelSettings;
+        var newViewerState = _objectSpread(_objectSpread({}, getDefaultViewerState()), {}, {
+          cameraState: getDefaultCameraState((_savedState$viewMode = savedState === null || savedState === void 0 ? void 0 : savedState.viewMode) !== null && _savedState$viewMode !== void 0 ? _savedState$viewMode : ViewMode.threeD)
+        }, savedState);
+        var newChannelSettings = channelSettings.map(function (_, index) {
+          return initializeOneChannelSetting(channelSettings[index].name, index, getDefaultChannelColor(index), viewerChannelSettings);
+        });
+        return _objectSpread(_objectSpread({}, resetState(currentState, newViewerState, newChannelSettings)), {}, {
+          useDefaultViewerChannelSettings: false
+        });
+      });
+    },
+    resetToDefaultViewerState: function resetToDefaultViewerState() {
+      set(function (currentState) {
+        var channelSettings = currentState.channelSettings;
+        var defaultViewerState = _objectSpread(_objectSpread({}, getDefaultViewerState()), {}, {
+          cameraState: getDefaultCameraState(ViewMode.threeD)
+        });
+        var defaultChannelStates = channelSettings.map(function (_, index) {
+          var defaultState = getDefaultChannelState(index);
+          defaultState.volumeEnabled = index < 3;
+          return defaultState;
+        });
+        return _objectSpread(_objectSpread({}, resetState(currentState, defaultViewerState, defaultChannelStates)), {}, {
+          useDefaultViewerChannelSettings: true
+        });
+      });
+    }
+  };
+};

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

@@ -0,0 +1,90 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+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 { create } from "zustand";
+import { subscribeWithSelector } from "zustand/middleware";
+import { getDefaultViewerState } from "../shared/constants";
+import { createResetSlice } from "./reset";
+import { validateState, validateStateValue } from "./util";
+var createViewerStateStore = function createViewerStateStore(set) {
+  for (var _len = arguments.length, etc = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    etc[_key - 1] = arguments[_key];
+  }
+  return _objectSpread(_objectSpread(_objectSpread({}, createResetSlice.apply(void 0, [set].concat(etc))), getDefaultViewerState()), {}, {
+    channelSettings: [],
+    changeViewerSetting: function changeViewerSetting(key, value) {
+      return set(function (state) {
+        return validateStateValue(state, key, value);
+      });
+    },
+    mergeViewerSettings: function mergeViewerSettings(settings) {
+      return set(function (state) {
+        return validateState(state, settings);
+      });
+    },
+    changeChannelSetting: function changeChannelSetting(index, value) {
+      set(function (_ref) {
+        var channelSettings = _ref.channelSettings;
+        return {
+          channelSettings: channelSettings.map(function (channel, channelIndex) {
+            var changeThisChannel = Array.isArray(index) ? index.includes(channelIndex) : index === channelIndex;
+            return changeThisChannel ? _objectSpread(_objectSpread({}, channel), value) : channel;
+          })
+        };
+      });
+    },
+    replaceAllChannelSettings: function replaceAllChannelSettings(channelSettings) {
+      return set({
+        channelSettings: channelSettings
+      });
+    },
+    applyColorPresets: function applyColorPresets(colors) {
+      set(function (_ref2) {
+        var channelSettings = _ref2.channelSettings;
+        return {
+          channelSettings: channelSettings.map(function (channel, channelIndex) {
+            return _objectSpread(_objectSpread({}, channel), {}, {
+              color: colors[channelIndex % colors.length]
+            });
+          })
+        };
+      });
+    }
+  });
+};
+export var useViewerState = create()(subscribeWithSelector(createViewerStateStore));
+export var selectViewerSettings = function selectViewerSettings(store) {
+  return {
+    viewMode: store.viewMode,
+    renderMode: store.renderMode,
+    imageType: store.imageType,
+    showAxes: store.showAxes,
+    showBoundingBox: store.showBoundingBox,
+    boundingBoxColor: store.boundingBoxColor,
+    backgroundColor: store.backgroundColor,
+    autorotate: store.autorotate,
+    maskAlpha: store.maskAlpha,
+    brightness: store.brightness,
+    density: store.density,
+    levels: store.levels,
+    interpolationEnabled: store.interpolationEnabled,
+    region: store.region,
+    slice: store.slice,
+    time: store.time,
+    scene: store.scene,
+    cameraState: store.cameraState
+  };
+};
+
+/**
+ * A small boilerplate-reducer for subscribing to a single state value with `useViewerStore`.
+ * Should only be used with string literals for best type-checking results.
+ */
+export var select = function select(key) {
+  return function (settings) {
+    return settings[key];
+  };
+};

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

@@ -0,0 +1,153 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+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; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import { RENDERMODE_PATHTRACE, RENDERMODE_RAYMARCH } from "@aics/vole-core";
+import { shallow } from "zustand/shallow";
+import { RenderMode, ViewMode } from "../shared/enums";
+import { activeAxisMap } from "../shared/types";
+import { colorArrayToFloats } from "../shared/utils/colorRepresentations";
+import { alphaSliderToImageValue, brightnessSliderToImageValue, densitySliderToImageValue, gammaSliderToImageValues } from "../shared/utils/sliderValuesToImageValues";
+import { select } from "./store";
+var REF_EQ = {
+  fireImmediately: true
+};
+var DEEP_EQ = {
+  fireImmediately: true,
+  equalityFn: shallow
+};
+export var subscribeViewToState = function subscribeViewToState(store, view3d) {
+  var unsubscribers = [
+  // view mode
+  store.subscribe(select("viewMode"), function (viewMode) {
+    view3d.setCameraMode(viewMode);
+    view3d.resize(null);
+  }, REF_EQ),
+  // camera state
+  store.subscribe(select("cameraState"), function (cameraState) {
+    if (cameraState) {
+      view3d.setCameraState(cameraState);
+    }
+  }, DEEP_EQ),
+  // autorotate
+  store.subscribe(select("autorotate"), view3d.setAutoRotate.bind(view3d), REF_EQ),
+  // show axes
+  store.subscribe(select("showAxes"), view3d.setShowAxis.bind(view3d), REF_EQ),
+  // background color
+  store.subscribe(select("backgroundColor"), function (backgroundColor) {
+    return view3d.setBackgroundColor(colorArrayToFloats(backgroundColor));
+  }, REF_EQ),
+  // brightness
+  store.subscribe(select("brightness"), function (brightness) {
+    view3d.updateExposure(brightnessSliderToImageValue(brightness));
+  }, REF_EQ)];
+  return function () {
+    return unsubscribers.forEach(function (unsubscribe) {
+      return unsubscribe();
+    });
+  };
+};
+var selectAxisClipUpdateInfo = function selectAxisClipUpdateInfo(axis) {
+  return function (_ref) {
+    var region = _ref.region,
+      slice = _ref.slice,
+      viewMode = _ref.viewMode;
+    return {
+      region: region[axis],
+      slice: slice[axis],
+      viewMode: viewMode
+    };
+  };
+};
+export var subscribeImageToState = function subscribeImageToState(store, view3d, image) {
+  var axisClipUpdater = function axisClipUpdater(axis) {
+    return function (_ref2) {
+      var _ref2$region = _slicedToArray(_ref2.region, 2),
+        minval = _ref2$region[0],
+        maxval = _ref2$region[1],
+        slice = _ref2.slice,
+        viewMode = _ref2.viewMode;
+      var isOrthoAxis = false;
+      var axismin = 0.0;
+      var axismax = 1.0;
+      if (viewMode === ViewMode.threeD) {
+        // 3d mode: just use the region from state
+        axismin = minval;
+        axismax = maxval;
+      } else {
+        // 2d mode: if this is the looked-down axis...
+        if (activeAxisMap[viewMode] === axis) {
+          // ...show a one-slice region around `slice`
+          var oneSlice = 1 / image.imageInfo.volumeSize[axis];
+          axismin = slice;
+          axismax = slice + oneSlice;
+        } else {
+          // ...otherwise, reset to [0, 1] - we probably just changed `viewMode` to 2d and want to see the whole slice
+          axismin = 0.0;
+          axismax = 1.0;
+        }
+
+        // also, "look down z" has a special mode with its own special setting
+        if (axis === "z" && viewMode === ViewMode.xy) {
+          view3d.setZSlice(image, Math.floor(slice * image.imageInfo.volumeSize.z));
+        }
+      }
+
+      // view3d wants the coordinates in the -0.5 to 0.5 range
+      view3d.setAxisClip(image, axis, axismin - 0.5, axismax - 0.5, isOrthoAxis);
+      // TODO necessary?
+      // view3d.setCameraMode(viewMode);
+      // TODO under some circumstances, this effect will trigger a load. Ideally, this would be reflected in the load
+      //   state managed by `useVolume`. This is complicated by the fact that the relevant methods (`setAxisClip` and
+      //   `setZSlice`) don't provide a channel load callback like other load-triggering methods (e.g. `setTime`).
+    };
+  };
+  var unsubscribers = [
+  // show bounding box
+  store.subscribe(select("showBoundingBox"), function (showBoundingBox) {
+    return view3d.setShowBoundingBox(image, showBoundingBox);
+  }, REF_EQ),
+  // bounding box color
+  store.subscribe(select("boundingBoxColor"), function (boundingBoxColor) {
+    return view3d.setBoundingBoxColor(image, colorArrayToFloats(boundingBoxColor));
+  }, REF_EQ),
+  // render mode
+  store.subscribe(select("renderMode"), function (renderMode) {
+    view3d.setMaxProjectMode(image, renderMode === RenderMode.maxProject);
+    view3d.setVolumeRenderMode(renderMode === RenderMode.pathTrace ? RENDERMODE_PATHTRACE : RENDERMODE_RAYMARCH);
+    view3d.updateActiveChannels(image);
+  }, REF_EQ),
+  // mask alpha
+  store.subscribe(select("maskAlpha"), function (maskAlpha) {
+    view3d.updateMaskAlpha(image, alphaSliderToImageValue(maskAlpha));
+    view3d.updateActiveChannels(image);
+  }, REF_EQ),
+  // density
+  store.subscribe(select("density"), function (density) {
+    return view3d.updateDensity(image, densitySliderToImageValue(density));
+  }, REF_EQ),
+  // gamma
+  store.subscribe(select("levels"), function (levels) {
+    var _gammaSliderToImageVa = gammaSliderToImageValues(levels),
+      min = _gammaSliderToImageVa.min,
+      max = _gammaSliderToImageVa.max,
+      scale = _gammaSliderToImageVa.scale;
+    view3d.setGamma(image, min, max, scale);
+  }, REF_EQ),
+  // interpolation
+  store.subscribe(select("interpolationEnabled"), function (enabled) {
+    return view3d.setInterpolationEnabled(image, enabled);
+  }, REF_EQ),
+  // clipping
+  store.subscribe(selectAxisClipUpdateInfo("x"), axisClipUpdater("x"), DEEP_EQ), store.subscribe(selectAxisClipUpdateInfo("y"), axisClipUpdater("y"), DEEP_EQ), store.subscribe(selectAxisClipUpdateInfo("z"), axisClipUpdater("z"), DEEP_EQ)
+
+  // TODO reset channels, time, scene?
+  ];
+  return function () {
+    return unsubscribers.forEach(function (unsubscribe) {
+      return unsubscribe();
+    });
+  };
+};

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

@@ -0,0 +1,247 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+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; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+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 { getDefaultCameraState, getDefaultChannelState, getDefaultViewerState } from "../../shared/constants";
+import { ImageType, RenderMode, ViewMode } from "../../shared/enums";
+import { useViewerState } from "../store";
+var arbitraryViewerState = function arbitraryViewerState() {
+  return {
+    viewMode: ViewMode.xy,
+    renderMode: RenderMode.pathTrace,
+    imageType: ImageType.fullField,
+    showAxes: true,
+    showBoundingBox: true,
+    boundingBoxColor: [0, 255, 0],
+    backgroundColor: [255, 255, 0],
+    autorotate: true,
+    maskAlpha: 255,
+    brightness: 0,
+    density: 0,
+    levels: [253, 254, 255],
+    interpolationEnabled: false,
+    region: {
+      x: [0, 0],
+      y: [0, 0],
+      z: [0, 0]
+    },
+    slice: {
+      x: 3,
+      y: 3,
+      z: 3
+    },
+    time: 12,
+    scene: 3,
+    cameraState: undefined
+  };
+};
+var arbitraryChannelState = function arbitraryChannelState() {
+  return {
+    name: "foo",
+    displayName: "foo",
+    volumeEnabled: true,
+    isosurfaceEnabled: true,
+    isovalue: 77,
+    colorizeEnabled: true,
+    colorizeAlpha: 88,
+    opacity: 0.5,
+    color: [0, 0, 255],
+    ramp: [12, 13],
+    useControlPoints: true,
+    controlPoints: [{
+      x: 0,
+      opacity: 0,
+      color: [255, 0, 0]
+    }, {
+      x: 100,
+      opacity: 1,
+      color: [0, 255, 0]
+    }],
+    plotMin: 50,
+    plotMax: 85,
+    keepIntensityRange: true
+  };
+};
+var multipleArbitraryChannels = function multipleArbitraryChannels() {
+  return [_objectSpread(_objectSpread({}, arbitraryChannelState()), {}, {
+    name: "one",
+    displayName: "one",
+    volumeEnabled: false
+  }), _objectSpread(_objectSpread({}, arbitraryChannelState()), {}, {
+    name: "two",
+    displayName: "two",
+    volumeEnabled: false
+  }), _objectSpread(_objectSpread({}, arbitraryChannelState()), {}, {
+    name: "three",
+    displayName: "three"
+  }), _objectSpread(_objectSpread({}, arbitraryChannelState()), {}, {
+    name: "fish",
+    displayName: "fish",
+    volumeEnabled: true
+  })];
+};
+
+/** We expect these keys of `ChannelState` to never be reset by the functions tested in this file */
+var NOT_RESET_KEYS = ["name", "displayName", "volumeEnabled", "controlPoints", "ramp", "plotMin", "plotMax"];
+var checkViewerState = function checkViewerState(state) {
+  var exclude = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  var defaultState = _objectSpread(_objectSpread({}, getDefaultViewerState()), {}, {
+    cameraState: getDefaultCameraState(ViewMode.threeD)
+  });
+  var allStateKeys = Object.keys(defaultState);
+  var stateKeys = allStateKeys.filter(function (key) {
+    return !exclude.includes(key);
+  });
+  var _iterator = _createForOfIteratorHelper(stateKeys),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var key = _step.value;
+      expect(defaultState[key]).toEqual(state[key]);
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+};
+var checkChannelState = function checkChannelState(index, state, exclude) {
+  var defaultState = getDefaultChannelState(index);
+  var allStateKeys = Object.keys(defaultState);
+  var stateKeys = allStateKeys.filter(function (key) {
+    return !exclude.includes(key);
+  });
+  var _iterator2 = _createForOfIteratorHelper(stateKeys),
+    _step2;
+  try {
+    for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+      var key = _step2.value;
+      expect(defaultState[key]).toEqual(state[key]);
+    }
+  } catch (err) {
+    _iterator2.e(err);
+  } finally {
+    _iterator2.f();
+  }
+};
+describe("reset state", function () {
+  describe("resetToDefaultViewerState", function () {
+    it("resets viewer state properties to their defaults", function () {
+      useViewerState.setState(arbitraryViewerState());
+      useViewerState.getState().resetToDefaultViewerState();
+      checkViewerState(useViewerState.getState());
+    });
+    it("resets most properties to their defaults", function () {
+      useViewerState.getState().replaceAllChannelSettings(multipleArbitraryChannels());
+      useViewerState.getState().resetToDefaultViewerState();
+      useViewerState.getState().channelSettings.forEach(function (channel, index) {
+        checkChannelState(index, channel, NOT_RESET_KEYS);
+      });
+    });
+    it("preserves each channel's original names and transfer function configs", function () {
+      var arbitraryChannels = multipleArbitraryChannels();
+      useViewerState.getState().replaceAllChannelSettings(arbitraryChannels);
+      useViewerState.getState().resetToDefaultViewerState();
+      useViewerState.getState().channelSettings.forEach(function (channel, index) {
+        var originalChannel = arbitraryChannels[index];
+        expect(channel.name).toEqual(originalChannel.name);
+        expect(channel.displayName).toEqual(originalChannel.displayName);
+        expect(channel.controlPoints).toEqual(originalChannel.controlPoints);
+        expect(channel.ramp).toEqual(originalChannel.ramp);
+        expect(channel.plotMin).toEqual(originalChannel.plotMin);
+        expect(channel.plotMax).toEqual(originalChannel.plotMax);
+      });
+    });
+    it("sets only the first three channels to have volumes enabled", function () {
+      useViewerState.getState().replaceAllChannelSettings(multipleArbitraryChannels());
+      useViewerState.getState().resetToDefaultViewerState();
+      var _useViewerState$getSt = useViewerState.getState(),
+        channelSettings = _useViewerState$getSt.channelSettings;
+      expect(channelSettings[0].volumeEnabled).toBe(true);
+      expect(channelSettings[1].volumeEnabled).toBe(true);
+      expect(channelSettings[2].volumeEnabled).toBe(true);
+      expect(channelSettings[3].volumeEnabled).toBe(false);
+    });
+    it("sets `useDefaultViewerChannelSettings` to `true`", function () {
+      useViewerState.getState().resetToSavedViewerState();
+      useViewerState.getState().resetToDefaultViewerState();
+      expect(useViewerState.getState().useDefaultViewerChannelSettings).toBe(true);
+    });
+  });
+  describe("resetToSavedViewerState", function () {
+    it('sets viewer state properties passed in as "saved," and resets all others', function () {
+      var savedState = {
+        renderMode: RenderMode.pathTrace,
+        brightness: 33,
+        backgroundColor: [128, 128, 128],
+        showAxes: true,
+        time: 4
+      };
+      var savedStateKeys = Object.keys(savedState);
+      useViewerState.setState(arbitraryViewerState());
+      useViewerState.getState().resetToSavedViewerState(savedState);
+      checkViewerState(useViewerState.getState(), savedStateKeys);
+      var state = useViewerState.getState();
+      expect(state.renderMode).toEqual(savedState.renderMode);
+      expect(state.brightness).toEqual(savedState.brightness);
+      expect(state.backgroundColor).toEqual(savedState.backgroundColor);
+      expect(state.showAxes).toEqual(savedState.showAxes);
+      expect(state.time).toEqual(savedState.time);
+    });
+    it("applies saved viewer channel settings", function () {
+      var viewerChannelSettings = {
+        groups: [{
+          name: "group",
+          channels: [{
+            match: ["one", "three"],
+            surfaceEnabled: true,
+            isovalue: 38,
+            color: "ff00ff"
+          }, {
+            match: "two",
+            controlPointsEnabled: true,
+            colorizeEnabled: true,
+            colorizeAlpha: 27
+          }]
+        }]
+      };
+      var arbitraryChannels = multipleArbitraryChannels();
+      useViewerState.getState().replaceAllChannelSettings(arbitraryChannels);
+      useViewerState.getState().resetToSavedViewerState({}, viewerChannelSettings);
+      var _useViewerState$getSt2 = useViewerState.getState(),
+        channelSettings = _useViewerState$getSt2.channelSettings;
+
+      // Channel named "one" should have matched group 1 above
+      checkChannelState(0, channelSettings[0], [].concat(NOT_RESET_KEYS, ["isosurfaceEnabled", "color", "isovalue"]));
+      expect(channelSettings[0].isosurfaceEnabled).toBe(true);
+      expect(channelSettings[0].color).toEqual([255, 0, 255]);
+      expect(channelSettings[0].isovalue).toBe(38);
+
+      // Channel named "two" should have matched group 2 above
+      checkChannelState(1, channelSettings[1], [].concat(NOT_RESET_KEYS, ["useControlPoints", "colorizeEnabled", "colorizeAlpha"]));
+      expect(channelSettings[1].useControlPoints).toBe(true);
+      expect(channelSettings[1].colorizeEnabled).toBe(true);
+      expect(channelSettings[1].colorizeAlpha).toBe(27);
+
+      // Channel named "three" should have matched group 1 above
+      checkChannelState(2, channelSettings[2], [].concat(NOT_RESET_KEYS, ["isosurfaceEnabled", "color", "isovalue"]));
+      expect(channelSettings[2].isosurfaceEnabled).toBe(true);
+      expect(channelSettings[2].color).toEqual([255, 0, 255]);
+      expect(channelSettings[2].isovalue).toBe(38);
+
+      // Channel named "fish" should not have matched any group and have default settings
+      checkChannelState(3, channelSettings[3], NOT_RESET_KEYS);
+    });
+    it("sets `useDefaultViewerChannelSettings` to `false`", function () {
+      useViewerState.getState().resetToDefaultViewerState();
+      useViewerState.getState().resetToSavedViewerState();
+      expect(useViewerState.getState().useDefaultViewerChannelSettings).toBe(false);
+    });
+  });
+});