@aics/vole-app 2.14.0 → 3.1.1

package/es/aics-image-viewer/components/App/ChannelUpdater.js

@@ -1,3 +1,9 @@
+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); }
 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; } }
@@ -6,17 +12,22 @@ function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(
 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 { Lut } from "@aics/vole-core";
 import { useEffect } from "react";
-import { controlPointsToLut, rampToControlPoints } from "../../shared/utils/controlPointsToLut";
+import { useShallow } from "zustand/shallow";
+import { binIndexedControlPointsToLut, rampToControlPoints } from "../../shared/utils/controlPointsToLut";
+import { useViewerState } from "../../state/store";
 /**
  * A component that doesn't render anything, but reacts to the provided `ChannelState`
  * and keeps it in sync with the viewer.
  */
 var ChannelUpdater = function ChannelUpdater(_ref) {
   var index = _ref.index,
-    channelState = _ref.channelState,
     view3d = _ref.view3d,
     image = _ref.image,
     version = _ref.version;
+  var channelStateSelector = useShallow(function (state) {
+    return state.channelSettings[index];
+  });
+  var channelState = useViewerState(channelStateSelector);
   var volumeEnabled = channelState.volumeEnabled,
     isosurfaceEnabled = channelState.isosurfaceEnabled,
     isovalue = channelState.isovalue,
@@ -73,8 +84,15 @@ var ChannelUpdater = function ChannelUpdater(_ref) {
     if (useControlPoints && controlPoints.length < 2) {
       return;
     }
+    var histogram = currentImage.getHistogram(index);
     var controlPointsToUse = useControlPoints ? controlPoints : rampToControlPoints(ramp);
-    var gradient = controlPointsToLut(controlPointsToUse);
+    // Convert control points from raw intensity values to histogram bin indices
+    var binIndexedControlPoints = controlPointsToUse.map(function (cp) {
+      return _objectSpread(_objectSpread({}, cp), {}, {
+        x: histogram.findFractionalBinOfValue(cp.x)
+      });
+    });
+    var gradient = binIndexedControlPointsToLut(binIndexedControlPoints);
     currentImage.setLut(index, gradient);
     view3d.updateLuts(currentImage);
   }, [controlPoints, ramp, useControlPoints, index, view3d]);

package/es/aics-image-viewer/components/App/index.js

@@ -15,24 +15,23 @@ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length)
 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; }
 // 3rd Party Imports
-import { RENDERMODE_PATHTRACE, RENDERMODE_RAYMARCH, View3d } from "@aics/vole-core";
+import { View3d } from "@aics/vole-core";
 import { Layout } from "antd";
 import { debounce, isEqual } from "lodash";
-import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
-import { AXIS_MARGIN_DEFAULT, CLIPPING_PANEL_HEIGHT_DEFAULT, CLIPPING_PANEL_HEIGHT_TALL, CONTROL_PANEL_CLOSE_WIDTH, DTYPE_RANGE, getDefaultViewerState, SCALE_BAR_MARGIN_DEFAULT } from "../../shared/constants";
-import { ImageType, RenderMode, ViewMode } from "../../shared/enums";
-import { activeAxisMap } from "../../shared/types";
-import { colorArrayToFloats } from "../../shared/utils/colorRepresentations";
-import { controlPointsToRamp, initializeLut, rampToControlPoints, remapControlPointsForChannel } from "../../shared/utils/controlPointsToLut";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { AXIS_MARGIN_DEFAULT, CLIPPING_PANEL_HEIGHT_DEFAULT, CLIPPING_PANEL_HEIGHT_TALL, CONTROL_PANEL_CLOSE_WIDTH, getDefaultViewerChannelSettings, getDefaultViewerState, SCALE_BAR_MARGIN_DEFAULT } from "../../shared/constants";
+import { ImageType, ViewMode } from "../../shared/enums";
+import { controlPointsToRamp, initializeLut } from "../../shared/utils/controlPointsToLut";
 import { useConstructor } from "../../shared/utils/hooks";
-import { alphaSliderToImageValue, brightnessSliderToImageValue, densitySliderToImageValue, gammaSliderToImageValues } from "../../shared/utils/sliderValuesToImageValues";
+import { findFirstChannelMatch } from "../../shared/utils/viewerChannelSettings";
+import { select, useViewerState } from "../../state/store";
+import { subscribeImageToState, subscribeViewToState } from "../../state/subscribers";
 import useVolume, { ImageLoadStatus } from "../useVolume";
 import CellViewerCanvasWrapper from "../CellViewerCanvasWrapper";
 import ControlPanel from "../ControlPanel";
 import { useErrorAlert } from "../ErrorAlert";
 import StyleProvider from "../StyleProvider";
 import Toolbar from "../Toolbar";
-import { ViewerStateContext } from "../ViewerStateProvider";
 import ChannelUpdater from "./ChannelUpdater";
 import "../../assets/styles/globals.css";
 import "./styles.css";
@@ -105,31 +104,37 @@ var setIndicatorPositions = function setIndicatorPositions(view3d, panelOpen, ha
   view3d.setScaleBarPosition(scaleBarX, scaleBarY);
 };
 var App = function App(props) {
-  var _props$showError, _getCurrentViewerChan, _scenes$length, _scenes2, _image$imageInfo$volu, _image$imageInfo$subr, _image$imageInfo$time, _props$transform2, _props$transform4;
+  var _props$showError, _props$viewerChannelS, _scenes$length, _scenes2, _image$imageInfo$volu, _image$imageInfo$subr, _image$imageInfo$time, _props$transform2, _props$transform4;
   props = _objectSpread(_objectSpread({}, defaultProps), props);
 
   // State management /////////////////////////////////////////////////////////
-  var viewerState = useContext(ViewerStateContext).ref;
-  var _viewerState$current = viewerState.current,
-    imageType = _viewerState$current.imageType,
-    viewMode = _viewerState$current.viewMode,
-    channelSettings = _viewerState$current.channelSettings,
-    changeChannelSetting = _viewerState$current.changeChannelSetting,
-    applyColorPresets = _viewerState$current.applyColorPresets,
-    setSavedViewerChannelSettings = _viewerState$current.setSavedViewerChannelSettings,
-    getCurrentViewerChannelSettings = _viewerState$current.getCurrentViewerChannelSettings,
-    getChannelsAwaitingReset = _viewerState$current.getChannelsAwaitingReset,
-    onResetChannel = _viewerState$current.onResetChannel;
-  var _props = props,
-    onControlPanelToggle = _props.onControlPanelToggle,
-    onImageTitleChange = _props.onImageTitleChange,
-    metadata = _props.metadata,
-    metadataFormatter = _props.metadataFormatter;
-  useMemo(function () {
-    if (props.viewerChannelSettings) {
-      setSavedViewerChannelSettings(props.viewerChannelSettings);
+  var imageType = useViewerState(select("imageType"));
+  var viewMode = useViewerState(select("viewMode"));
+  var scene = useViewerState(select("scene"));
+  var time = useViewerState(select("time"));
+  var showAxes = useViewerState(select("showAxes"));
+  var channelSettings = useViewerState(select("channelSettings"));
+  var changeChannelSetting = useViewerState(select("changeChannelSetting"));
+  var applyColorPresets = useViewerState(select("applyColorPresets"));
+  var resetToSavedState = useViewerState(select("resetToSavedViewerState"));
+  var resetToSavedViewerState = useCallback(function () {
+    return resetToSavedState(props.viewerSettings, props.viewerChannelSettings);
+  }, [resetToSavedState, props.viewerSettings, props.viewerChannelSettings]);
+
+  // Apply viewer settings to state that have changed since the last prop
+  var prevViewerSettingsPropsRef = useRef();
+  if (props.viewerSettings && !isEqual(props.viewerSettings, prevViewerSettingsPropsRef.current)) {
+    for (var _i = 0, _arr = Object.keys(props.viewerSettings); _i < _arr.length; _i++) {
+      var _prevViewerSettingsPr, _prevViewerSettingsPr2;
+      var key = _arr[_i];
+      var value = props.viewerSettings[key];
+      var lastValue = (_prevViewerSettingsPr = (_prevViewerSettingsPr2 = prevViewerSettingsPropsRef.current) === null || _prevViewerSettingsPr2 === void 0 ? void 0 : _prevViewerSettingsPr2[key]) !== null && _prevViewerSettingsPr !== void 0 ? _prevViewerSettingsPr : undefined;
+      if (value !== undefined && !isEqual(value, lastValue)) {
+        useViewerState.getState().changeViewerSetting(key, value);
+      }
     }
-  }, [props.viewerChannelSettings, setSavedViewerChannelSettings]);
+    prevViewerSettingsPropsRef.current = props.viewerSettings;
+  }
   var view3d = useConstructor(function () {
     return new View3d();
   });
@@ -155,11 +160,11 @@ var App = function App(props) {
   }, [view3d, showError]);
   var imageUrlRef = useRef("");
   var scenesRef = useRef([]);
-  var _props2 = props,
-    imageUrl = _props2.imageUrl,
-    parentImageUrl = _props2.parentImageUrl,
-    rawData = _props2.rawData,
-    rawDims = _props2.rawDims;
+  var _props = props,
+    imageUrl = _props.imageUrl,
+    parentImageUrl = _props.parentImageUrl,
+    rawData = _props.rawData,
+    rawDims = _props.rawDims;
   var scenes = useMemo(function () {
     if (rawData && rawDims) {
       return [{
@@ -180,21 +185,58 @@ var App = function App(props) {
       return result;
     }
   }, [imageUrl, parentImageUrl, rawData, rawDims, imageType]);
-  var maskChannelName = (_getCurrentViewerChan = getCurrentViewerChannelSettings()) === null || _getCurrentViewerChan === void 0 ? void 0 : _getCurrentViewerChan.maskChannelName;
+  var maskChannelName = (_props$viewerChannelS = props.viewerChannelSettings) === null || _props$viewerChannelS === void 0 ? void 0 : _props$viewerChannelS.maskChannelName;
 
   // we need to keep track of channel ranges for remapping control points
   var channelRangesRef = useRef([]);
+  var removePreviousImage = useRef(undefined);
+  var _props2 = props,
+    onImageTitleChange = _props2.onImageTitleChange;
   var onCreateImage = useCallback(function (newImage) {
+    var _removePreviousImage$, _newImage$imageInfo$c;
+    (_removePreviousImage$ = removePreviousImage.current) === null || _removePreviousImage$ === void 0 || _removePreviousImage$.call(removePreviousImage);
     if (newImage === null) {
       return;
     }
-    channelRangesRef.current = new Array(newImage.channelNames.length).fill(undefined);
-    var channelSettings = viewerState.current.channelSettings;
+    var _useViewerState$getSt = useViewerState.getState(),
+      channelState = _useViewerState$getSt.channelSettings;
+    var channelNames = newImage.channelNames;
+    channelRangesRef.current = channelNames.map(function (_, i) {
+      var _channelState$i;
+      return (_channelState$i = channelState[i]) !== null && _channelState$i !== void 0 && _channelState$i.keepIntensityRange ? channelRangesRef.current[i] : undefined;
+    });
+    var _useViewerState$getSt2 = useViewerState.getState(),
+      useDefaultViewerChannelSettings = _useViewerState$getSt2.useDefaultViewerChannelSettings;
+    var viewerChannelSettings = useDefaultViewerChannelSettings ? getDefaultViewerChannelSettings() : props.viewerChannelSettings;
+
+    // If the image has channel color metadata, apply those colors now
+    var channelColorMeta = (_newImage$imageInfo$c = newImage.imageInfo.channelColors) === null || _newImage$imageInfo$c === void 0 ? void 0 : _newImage$imageInfo$c.map(function (color, index) {
+      // Filter out channels that have colors in `viewerChannelSettings`
+      if (viewerChannelSettings === undefined) {
+        return color;
+      }
+      var settings = findFirstChannelMatch(channelNames[index], index, viewerChannelSettings);
+      if ((settings === null || settings === void 0 ? void 0 : settings.color) !== undefined) {
+        return undefined;
+      } else {
+        return color;
+      }
+    });
+    if (Array.isArray(channelColorMeta)) {
+      channelColorMeta.forEach(function (color, index) {
+        if (Array.isArray(color) && index < channelNames.length) {
+          changeChannelSetting(index, {
+            color: color
+          });
+        }
+      });
+    }
     view3d.addVolume(newImage, {
       // Immediately passing down channel parameters isn't strictly necessary, but keeps things looking consistent on load
-      channels: newImage.channelNames.map(function (name) {
+      channels: newImage.channelNames.map(function (name, index) {
+        var _channelColorMeta$ind;
         // TODO do we really need to be searching by name here?
-        var ch = channelSettings.find(function (channel) {
+        var ch = channelState.find(function (channel) {
           return channel.name === name;
         });
         if (!ch) {
@@ -205,58 +247,76 @@ var App = function App(props) {
           isosurfaceEnabled: ch.isosurfaceEnabled,
           isovalue: ch.isovalue,
           isosurfaceOpacity: ch.opacity,
-          color: ch.color
+          color: (_channelColorMeta$ind = channelColorMeta === null || channelColorMeta === void 0 ? void 0 : channelColorMeta[index]) !== null && _channelColorMeta$ind !== void 0 ? _channelColorMeta$ind : ch.color
         };
       })
     });
-    onImageTitleChange === null || onImageTitleChange === void 0 || onImageTitleChange(newImage.imageInfo.imageInfo.name);
     view3d.updateActiveChannels(newImage);
-  }, [view3d, viewerState, onImageTitleChange]);
+    var unsubscribeView = subscribeViewToState(useViewerState, view3d);
+    var unsubscribeImage = subscribeImageToState(useViewerState, view3d, newImage);
+    removePreviousImage.current = function () {
+      unsubscribeView();
+      unsubscribeImage();
+      view3d.removeAllVolumes();
+      removePreviousImage.current = undefined;
+    };
+  }, [props.viewerChannelSettings, view3d, changeChannelSetting]);
+  var _useState = useState(undefined),
+    _useState2 = _slicedToArray(_useState, 2),
+    loadedScene = _useState2[0],
+    setLoadedScene = _useState2[1];
+  var onChangeScene = useCallback(function (image, sceneIndex) {
+    onImageTitleChange === null || onImageTitleChange === void 0 || onImageTitleChange(image.imageInfo.imageInfo.name);
+    setLoadedScene(sceneIndex);
+  }, [onImageTitleChange]);
   var onChannelLoaded = useCallback(function (image, channelIndex, isInitialLoad) {
-    // TODO this was once a search by name - is that still necessary or will the index always be correct?
-    var thisChannelSettings = channelSettings[channelIndex];
-    var _viewerState$current2 = viewerState.current,
-      getChannelsAwaitingResetOnLoad = _viewerState$current2.getChannelsAwaitingResetOnLoad,
-      getCurrentViewerChannelSettings = _viewerState$current2.getCurrentViewerChannelSettings,
-      changeChannelSetting = _viewerState$current2.changeChannelSetting;
+    // TODO this was once a search by name - is that still necessary or will
+    // the index always be correct?
+    var _useViewerState$getSt3 = useViewerState.getState(),
+      channelsToResetOnLoad = _useViewerState$getSt3.channelsToResetOnLoad,
+      useDefaultViewerChannelSettings = _useViewerState$getSt3.useDefaultViewerChannelSettings,
+      channelSettings = _useViewerState$getSt3.channelSettings;
+    var channelState = channelSettings[channelIndex];
+    var viewerChannelSettings = useDefaultViewerChannelSettings ? getDefaultViewerChannelSettings() : props.viewerChannelSettings;
     var thisChannel = image.getChannel(channelIndex);
-    var noLut = !thisChannelSettings || !thisChannelSettings.controlPoints || !thisChannelSettings.ramp;
-    if (isInitialLoad || noLut || getChannelsAwaitingResetOnLoad().has(channelIndex)) {
+    var noLut = !channelState || !channelState.controlPoints || !channelState.ramp;
+    var hasOldRange = channelRangesRef.current[channelIndex] !== undefined;
+    var canInitializeToExistingRange = (channelState === null || channelState === void 0 ? void 0 : channelState.keepIntensityRange) && hasOldRange;
+    // True if we are loading new data and the old range cannot or should not
+    // be kept (no saved range or keeping intensities is disabled).
+    var needsInitializeToDefaults = isInitialLoad && !canInitializeToExistingRange;
+    if (needsInitializeToDefaults || noLut || channelsToResetOnLoad.includes(channelIndex)) {
+      var _initSettings$isovalu;
       // This channel needs its LUT initialized
-      var _initializeLut = initializeLut(image, channelIndex, getCurrentViewerChannelSettings()),
+      var _initializeLut = initializeLut(image, channelIndex, viewerChannelSettings),
         ramp = _initializeLut.ramp,
         controlPoints = _initializeLut.controlPoints;
-      var dtype = thisChannel.dtype;
+
+      // Initialize isovalue to channel settings or default to midpoint of data range
+      var name = image.channelNames[channelIndex];
+      var initSettings = viewerChannelSettings && findFirstChannelMatch(name, channelIndex, viewerChannelSettings);
+      var defaultIsovalue = thisChannel.rawMin + (thisChannel.rawMax - thisChannel.rawMin) / 2;
+      var isovalue = (_initSettings$isovalu = initSettings === null || initSettings === void 0 ? void 0 : initSettings.isovalue) !== null && _initSettings$isovalu !== void 0 ? _initSettings$isovalu : defaultIsovalue;
       changeChannelSetting(channelIndex, {
         controlPoints: controlPoints,
         ramp: controlPointsToRamp(ramp),
         // set the default range of the transfer function editor to cover the full range of the data type
-        plotMin: DTYPE_RANGE[dtype].min,
-        plotMax: DTYPE_RANGE[dtype].max
+        plotMin: thisChannel.rawMin,
+        plotMax: thisChannel.rawMax,
+        isovalue: isovalue
       });
     } else {
-      // This channel has already been initialized, but its LUT was just remapped and we need to update some things
-      var oldRange = channelRangesRef.current[channelIndex];
-      if (thisChannelSettings.useControlPoints) {
-        // control points were just automatically remapped - update in state
-        var rampControlPoints = rampToControlPoints(thisChannelSettings.ramp);
-        // now manually remap ramp using the channel's old range
-        var remappedRampControlPoints = remapControlPointsForChannel(rampControlPoints, oldRange, thisChannel);
-        changeChannelSetting(channelIndex, {
-          ramp: controlPointsToRamp(remappedRampControlPoints),
-          controlPoints: thisChannel.lut.controlPoints
-        });
-      } else {
-        // ramp was just automatically remapped - update in state
-        var _ramp = controlPointsToRamp(thisChannel.lut.controlPoints);
-        // now manually remap control points using the channel's old range
-        var _controlPoints = thisChannelSettings.controlPoints;
-        var remappedControlPoints = remapControlPointsForChannel(_controlPoints, oldRange, thisChannel);
-        changeChannelSetting(channelIndex, {
-          controlPoints: remappedControlPoints,
-          ramp: _ramp
-        });
-      }
+      // Expand the plot min and max to include the current data range as
+      // needed. This keeps the domain visually consistent when replaying
+      // through time or Z slices.
+      //
+      // NOTE: This must use the most up-to-date channel plot range, because
+      // onChannelLoaded can be called multiple times per channel during
+      // loading.
+      changeChannelSetting(channelIndex, {
+        plotMin: Math.min(thisChannel.rawMin, channelState.plotMin),
+        plotMax: Math.max(thisChannel.rawMax, channelState.plotMax)
+      });
     }
 
     // save the channel's new range for remapping next time
@@ -269,14 +329,16 @@ var App = function App(props) {
     if (image.isLoaded()) {
       view3d.updateActiveChannels(image);
     }
-  }, [view3d, channelSettings, maskChannelName, viewerState]);
+  }, [view3d, changeChannelSetting, maskChannelName, props.viewerChannelSettings]);
   var onError = useCallback(function (error) {
     showError(error);
     onImageTitleChange === null || onImageTitleChange === void 0 || onImageTitleChange(undefined);
   }, [showError, onImageTitleChange]);
   var volume = useVolume(scenes, {
+    viewerChannelSettings: props.viewerChannelSettings,
     onCreateImage: onCreateImage,
     onChannelLoaded: onChannelLoaded,
+    onChangeScene: onChangeScene,
     onError: onError,
     maskChannelName: maskChannelName
   });
@@ -298,26 +360,25 @@ var App = function App(props) {
   var numTimesteps = (_image$imageInfo$time = image === null || image === void 0 ? void 0 : image.imageInfo.times) !== null && _image$imageInfo$time !== void 0 ? _image$imageInfo$time : 1;
 
   // const [channelGroupedByType, setChannelGroupedByType] = useState<ChannelGrouping>({});
-  var _useState = useState(function () {
+  var _useState3 = useState(function () {
       return window.innerWidth < CONTROL_PANEL_CLOSE_WIDTH;
     }),
-    _useState2 = _slicedToArray(_useState, 2),
-    controlPanelClosed = _useState2[0],
-    setControlPanelClosed = _useState2[1];
-  // Only allow auto-close once while the screen is too narrow.
-  var _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    hasAutoClosedControlPanel = _useState4[0],
-    setHasAutoClosedControlPanel = _useState4[1];
-  var _useState5 = useState(true),
+    controlPanelClosed = _useState4[0],
+    setControlPanelClosed = _useState4[1];
+  // Only allow auto-close once while the screen is too narrow.
+  var _useState5 = useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
-    clippingPanelOpen = _useState6[0],
-    setClippingPanelOpen = _useState6[1];
+    hasAutoClosedControlPanel = _useState6[0],
+    setHasAutoClosedControlPanel = _useState6[1];
+  var _useState7 = useState(true),
+    _useState8 = _slicedToArray(_useState7, 2),
+    clippingPanelOpen = _useState8[0],
+    setClippingPanelOpen = _useState8[1];
   var clippingPanelOpenTimeout = useRef(0);
 
   // Imperative callbacks /////////////////////////////////////////////////////
 
-  var viewerSettings = viewerState.current;
   var saveIsosurface = useCallback(function (channelIndex, type) {
     if (image) view3d.saveChannelIsosurface(image, channelIndex, type);
   }, [image, view3d]);
@@ -329,21 +390,24 @@ var App = function App(props) {
       anchor.click();
     });
   }, [view3d]);
-  var getMetadata = useCallback(function () {
+  var _props3 = props,
+    metadataFormatter = _props3.metadataFormatter;
+  var metadata = useMemo(function () {
     var imageMetadata = image === null || image === void 0 ? void 0 : image.imageMetadata;
     if (imageMetadata && metadataFormatter) {
       imageMetadata = metadataFormatter(imageMetadata);
     }
+    var propsMetadata = props.metadata;
     var sceneMeta;
-    if (Array.isArray(metadata)) {
+    if (Array.isArray(propsMetadata)) {
       // If metadata is an array, try to index it by scene
-      if (metadata.length >= numScenes) {
-        sceneMeta = metadata[viewerState.current.scene];
+      if (propsMetadata.length >= numScenes && loadedScene !== undefined) {
+        sceneMeta = propsMetadata[loadedScene];
       } else {
-        sceneMeta = metadata[0];
+        sceneMeta = propsMetadata[0];
       }
     } else {
-      sceneMeta = metadata;
+      sceneMeta = propsMetadata;
     }
     if (imageMetadata && Object.keys(imageMetadata).length > 0) {
       return _objectSpread({
@@ -353,11 +417,11 @@ var App = function App(props) {
       var _sceneMeta;
       return (_sceneMeta = sceneMeta) !== null && _sceneMeta !== void 0 ? _sceneMeta : {};
     }
-  }, [metadata, metadataFormatter, image, numScenes, viewerState]);
+  }, [props.metadata, metadataFormatter, image, loadedScene, numScenes]);
   useEffect(function () {
     var hasTime = numTimesteps > 1;
     var hasScenes = numScenes > 1;
-    var mode3d = viewerSettings.viewMode === ViewMode.threeD;
+    var mode3d = viewMode === ViewMode.threeD;
     setIndicatorPositions(view3d, clippingPanelOpen, hasTime, hasScenes, mode3d);
 
     // Hide indicators while clipping panel is in motion - otherwise they pop to the right place prematurely
@@ -369,12 +433,12 @@ var App = function App(props) {
       clippingPanelOpenTimeout.current = window.setTimeout(function () {
         view3d.setShowScaleBar(true);
         view3d.setShowTimestepIndicator(true);
-        if (viewerSettings.showAxes) {
+        if (showAxes) {
           view3d.setShowAxis(true);
         }
       }, CLIPPING_PANEL_ANIMATION_DURATION_MS);
     }
-  }, [view3d, numTimesteps, numScenes, viewerSettings.viewMode, viewerSettings.showAxes, clippingPanelOpen]);
+  }, [view3d, numTimesteps, numScenes, viewMode, showAxes, clippingPanelOpen]);
 
   // Effects //////////////////////////////////////////////////////////////////
 
@@ -396,6 +460,8 @@ var App = function App(props) {
       return window.removeEventListener("resize", onResizeDebounced);
     };
   }, [hasAutoClosedControlPanel]);
+  var _props4 = props,
+    onControlPanelToggle = _props4.onControlPanelToggle;
   useEffect(function () {
     return onControlPanelToggle && onControlPanelToggle(controlPanelClosed);
   }, [controlPanelClosed, onControlPanelToggle]);
@@ -418,36 +484,17 @@ var App = function App(props) {
   };
 
   // Effects to imperatively sync `viewerSettings` to `view3d`
-  useImageEffect(function (_currentImage) {
-    view3d.setCameraMode(viewerSettings.viewMode);
-    view3d.resize(null);
-  }, [viewerSettings.viewMode, view3d]);
-  useImageEffect(function (_currentImage) {
-    if (viewerSettings.cameraState) {
-      view3d.setCameraState(viewerSettings.cameraState);
-    }
-  }, [viewerSettings.cameraState, view3d]);
-  useImageEffect(function (_currentImage) {
-    return view3d.setAutoRotate(viewerSettings.autorotate);
-  }, [viewerSettings.autorotate, view3d]);
-  useImageEffect(function (_currentImage) {
-    return view3d.setShowAxis(viewerSettings.showAxes);
-  }, [viewerSettings.showAxes, view3d]);
-  useImageEffect(function (_currentImage) {
-    return view3d.setBackgroundColor(colorArrayToFloats(viewerSettings.backgroundColor));
-  }, [viewerSettings.backgroundColor, view3d]);
-  useImageEffect(function (currentImage) {
-    return view3d.setBoundingBoxColor(currentImage, colorArrayToFloats(viewerSettings.boundingBoxColor));
-  }, [viewerSettings.boundingBoxColor, view3d]);
-  useImageEffect(function (currentImage) {
-    return view3d.setShowBoundingBox(currentImage, viewerSettings.showBoundingBox);
-  }, [viewerSettings.showBoundingBox, view3d]);
+
   useImageEffect(function (image) {
     // Check whether any channels are marked to be reset and apply it.
-    var channelsAwaitingReset = getChannelsAwaitingReset();
+    var viewerState = useViewerState.getState();
+    var channelsToReset = viewerState.channelsToReset,
+      onResetChannel = viewerState.onResetChannel,
+      useDefaultViewerChannelSettings = viewerState.useDefaultViewerChannelSettings;
+    var viewerChannelSettings = useDefaultViewerChannelSettings ? getDefaultViewerChannelSettings() : props.viewerChannelSettings;
     for (var i = 0; i < channelSettings.length; i++) {
-      if (channelsAwaitingReset.has(i)) {
-        var _initializeLut2 = initializeLut(image, i, getCurrentViewerChannelSettings()),
+      if (channelsToReset.includes(i)) {
+        var _initializeLut2 = initializeLut(image, i, viewerChannelSettings),
           ramp = _initializeLut2.ramp,
           controlPoints = _initializeLut2.controlPoints;
         changeChannelSetting(i, {
@@ -457,40 +504,15 @@ var App = function App(props) {
         onResetChannel(i);
       }
     }
-  }, [changeChannelSetting, channelSettings, getChannelsAwaitingReset, getCurrentViewerChannelSettings, onResetChannel]);
-  useImageEffect(function (currentImage) {
-    var renderMode = viewerSettings.renderMode;
-    view3d.setMaxProjectMode(currentImage, renderMode === RenderMode.maxProject);
-    view3d.setVolumeRenderMode(renderMode === RenderMode.pathTrace ? RENDERMODE_PATHTRACE : RENDERMODE_RAYMARCH);
-    view3d.updateActiveChannels(currentImage);
-  }, [viewerSettings.renderMode, view3d]);
-  useImageEffect(function (currentImage) {
-    view3d.updateMaskAlpha(currentImage, alphaSliderToImageValue(viewerSettings.maskAlpha));
-    view3d.updateActiveChannels(currentImage);
-  }, [viewerSettings.maskAlpha, view3d]);
-  useImageEffect(function (_currentImage) {
-    var brightness = brightnessSliderToImageValue(viewerSettings.brightness);
-    view3d.updateExposure(brightness);
-  }, [viewerSettings.brightness, view3d]);
-  useImageEffect(function (currentImage) {
-    var density = densitySliderToImageValue(viewerSettings.density);
-    view3d.updateDensity(currentImage, density);
-  }, [viewerSettings.density, view3d]);
-  useImageEffect(function (currentImage) {
-    var imageValues = gammaSliderToImageValues(viewerSettings.levels);
-    view3d.setGamma(currentImage, imageValues.min, imageValues.scale, imageValues.max);
-  }, [viewerSettings.levels, view3d]);
+  }, [changeChannelSetting, channelSettings, props.viewerChannelSettings]);
 
   // `time` and `scene` have their own special handlers via `volume`, since they both trigger loads
   useEffect(function () {
-    return setTime(view3d, viewerSettings.time);
-  }, [view3d, viewerSettings.time, setTime]);
+    return setTime(view3d, time);
+  }, [view3d, time, setTime]);
   useEffect(function () {
-    return setScene(viewerSettings.scene);
-  }, [viewerSettings.scene, setScene]);
-  useImageEffect(function (currentImage) {
-    return view3d.setInterpolationEnabled(currentImage, viewerSettings.interpolationEnabled);
-  }, [viewerSettings.interpolationEnabled, view3d]);
+    return setScene(scene);
+  }, [scene, setScene]);
   useImageEffect(function (currentImage) {
     var _props$transform;
     return view3d.setVolumeTranslation(currentImage, ((_props$transform = props.transform) === null || _props$transform === void 0 ? void 0 : _props$transform.translation) || [0, 0, 0]);
@@ -499,43 +521,6 @@ var App = function App(props) {
     var _props$transform3;
     return view3d.setVolumeRotation(currentImage, ((_props$transform3 = props.transform) === null || _props$transform3 === void 0 ? void 0 : _props$transform3.rotation) || [0, 0, 0]);
   }, [(_props$transform4 = props.transform) === null || _props$transform4 === void 0 ? void 0 : _props$transform4.rotation, view3d]);
-  var usePerAxisClippingUpdater = function usePerAxisClippingUpdater(axis, _ref, slice, viewMode) {
-    var _ref2 = _slicedToArray(_ref, 2),
-      minval = _ref2[0],
-      maxval = _ref2[1];
-    useImageEffect(
-    // Logic to determine axis clipping range, for each of x,y,z,3d slider:
-    // if slider was same as active axis view mode:  [viewerSettings.slice[axis], viewerSettings.slice[axis] + 1.0/volumeSize[axis]]
-    // if in 3d mode: viewerSettings.region[axis]
-    // else: [0,1]
-    function (currentImage) {
-      var isOrthoAxis = false;
-      var axismin = 0.0;
-      var axismax = 1.0;
-      if (viewMode === ViewMode.threeD) {
-        axismin = minval;
-        axismax = maxval;
-        isOrthoAxis = false;
-      } else {
-        isOrthoAxis = activeAxisMap[viewMode] === axis;
-        var oneSlice = 1 / currentImage.imageInfo.volumeSize[axis];
-        axismin = isOrthoAxis ? slice : 0.0;
-        axismax = isOrthoAxis ? slice + oneSlice : 1.0;
-        if (axis === "z" && viewMode === ViewMode.xy) {
-          view3d.setZSlice(currentImage, Math.floor(slice * currentImage.imageInfo.volumeSize.z));
-        }
-      }
-      // view3d wants the coordinates in the -0.5 to 0.5 range
-      view3d.setAxisClip(currentImage, axis, axismin - 0.5, axismax - 0.5, isOrthoAxis);
-      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`).
-    }, [axis, minval, maxval, slice, viewMode]);
-  };
-  usePerAxisClippingUpdater("x", viewerSettings.region.x, viewerSettings.slice.x, viewMode);
-  usePerAxisClippingUpdater("y", viewerSettings.region.y, viewerSettings.slice.y, viewMode);
-  usePerAxisClippingUpdater("z", viewerSettings.region.z, viewerSettings.slice.z, viewMode);
 
   // Rendering ////////////////////////////////////////////////////////////////
 
@@ -553,10 +538,10 @@ var App = function App(props) {
     style: {
       height: props.appHeight
     }
-  }, channelSettings.map(function (channelState, index) {
+  }, channelSettings.map(function (_ref, index) {
+    var name = _ref.name;
     return /*#__PURE__*/React.createElement(ChannelUpdater, {
-      key: "".concat(index, "_").concat(channelState.name),
-      channelState: channelState,
+      key: "".concat(index, "_").concat(name),
       index: index,
       view3d: view3d,
       image: image,
@@ -586,7 +571,7 @@ var App = function App(props) {
     saveIsosurface: saveIsosurface,
     onApplyColorPresets: applyColorPresets,
     viewerChannelSettings: props.viewerChannelSettings,
-    getMetadata: getMetadata
+    metadata: metadata
   })), /*#__PURE__*/React.createElement(Layout, {
     className: "cell-viewer-wrapper",
     style: {
@@ -600,6 +585,7 @@ var App = function App(props) {
     canPathTrace: view3d ? view3d.hasWebGL2() : false,
     resetCamera: resetCamera,
     downloadScreenshot: saveScreenshot,
+    resetToSavedViewerState: resetToSavedViewerState,
     visibleControls: visibleControls
   }), /*#__PURE__*/React.createElement(CellViewerCanvasWrapper, {
     view3d: view3d,