@aics/vole-app 2.11.0

package/es/aics-image-viewer/components/ViewerStateProvider/ResetStateProvider.js

@@ -0,0 +1,160 @@
+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 _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 _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), 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 { isEqual } from "lodash";
+import { getDefaultViewerState, getDefaultCameraState, getDefaultChannelState, getDefaultViewerChannelSettings, getDefaultChannelColor } from "../../shared/constants";
+import { ViewMode } from "../../shared/enums";
+import { overrideViewerState, overrideChannelStates, getEnabledChannelIndices, initializeOneChannelSetting } from "../../shared/utils/viewerState";
+/**
+ * Provides reset functionality for the viewer and channel states.
+ */
+var ResetStateProvider = /*#__PURE__*/function () {
+  function ResetStateProvider(viewerStateRef) {
+    _classCallCheck(this, ResetStateProvider);
+    this.ref = viewerStateRef;
+    this.savedViewerState = {};
+    this.channelsToReset = new Set();
+    this.channelsToResetOnLoad = new Set();
+    this.savedViewerChannelSettings = undefined;
+    this.useDefaultViewerChannelSettings = false;
+    this.resetToSavedViewerState = this.resetToSavedViewerState.bind(this);
+    this.resetToDefaultViewerState = this.resetToDefaultViewerState.bind(this);
+    this.resetToState = this.resetToState.bind(this);
+    this.setSavedViewerState = this.setSavedViewerState.bind(this);
+    this.setSavedViewerChannelSettings = this.setSavedViewerChannelSettings.bind(this);
+    this.getChannelsAwaitingReset = this.getChannelsAwaitingReset.bind(this);
+    this.getChannelsAwaitingResetOnLoad = this.getChannelsAwaitingResetOnLoad.bind(this);
+    this.onResetChannel = this.onResetChannel.bind(this);
+    this.getCurrentViewerChannelSettings = this.getCurrentViewerChannelSettings.bind(this);
+  }
+
+  // Setup Callbacks ////////////////////////////////////////////////////////////////////
+  return _createClass(ResetStateProvider, [{
+    key: "setSavedViewerState",
+    value: function setSavedViewerState(state) {
+      this.savedViewerState = state;
+    }
+  }, {
+    key: "setSavedViewerChannelSettings",
+    value: function setSavedViewerChannelSettings(settings) {
+      this.savedViewerChannelSettings = settings;
+    }
+  }, {
+    key: "getChannelsAwaitingReset",
+    value: function getChannelsAwaitingReset() {
+      return this.channelsToReset;
+    }
+  }, {
+    key: "getChannelsAwaitingResetOnLoad",
+    value: function getChannelsAwaitingResetOnLoad() {
+      return this.channelsToResetOnLoad;
+    }
+  }, {
+    key: "onResetChannel",
+    value: function onResetChannel(channelIndex) {
+      this.channelsToReset["delete"](channelIndex);
+      this.channelsToResetOnLoad["delete"](channelIndex);
+    }
+
+    /**
+     * Returns the current viewer channel settings that the viewer should use when
+     * resetting channels to an initial state.
+     */
+  }, {
+    key: "getCurrentViewerChannelSettings",
+    value: function getCurrentViewerChannelSettings() {
+      if (this.useDefaultViewerChannelSettings) {
+        return getDefaultViewerChannelSettings();
+      }
+      return this.savedViewerChannelSettings;
+    }
+
+    /**
+     * Helper method. Resets the viewer and all channels to the provided state. If new data needs to
+     * be loaded, handles setup so the reset will be applied to each channel as it loads in.
+     */
+  }, {
+    key: "resetToState",
+    value: function resetToState(newState, newChannelStates) {
+      var _this$ref$current = this.ref.current,
+        changeViewerSetting = _this$ref$current.changeViewerSetting,
+        setChannelSettings = _this$ref$current.setChannelSettings,
+        channelSettings = _this$ref$current.channelSettings,
+        viewMode = _this$ref$current.viewMode,
+        time = _this$ref$current.time,
+        slice = _this$ref$current.slice;
+
+      // 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 && !isEqual(newState.slice.z, slice.z);
+      var willNeedResetOnLoad = isInDifferentViewMode || isAtDifferentTime || isAtDifferentZSlice;
+      overrideViewerState(changeViewerSetting, newState);
+      overrideChannelStates(setChannelSettings, channelSettings, newChannelStates);
+      this.channelsToReset = new Set(Array(newChannelStates.length).keys());
+      if (willNeedResetOnLoad) {
+        var enabledChannelsAndResetState = getEnabledChannelIndices(newChannelStates);
+        this.channelsToResetOnLoad = new Set(enabledChannelsAndResetState);
+        var _iterator = _createForOfIteratorHelper(enabledChannelsAndResetState),
+          _step;
+        try {
+          for (_iterator.s(); !(_step = _iterator.n()).done;) {
+            var channelIndex = _step.value;
+            this.channelsToReset["delete"](channelIndex);
+          }
+        } catch (err) {
+          _iterator.e(err);
+        } finally {
+          _iterator.f();
+        }
+      }
+    }
+
+    /** Resets to the initial saved state of the viewer, as shown to the user on load. */
+  }, {
+    key: "resetToSavedViewerState",
+    value: function resetToSavedViewerState() {
+      var _this = this;
+      var channelSettings = this.ref.current.channelSettings;
+      var newViewerState = _objectSpread(_objectSpread({}, getDefaultViewerState()), {}, {
+        cameraState: getDefaultCameraState(this.savedViewerState.viewMode || ViewMode.threeD)
+      }, this.savedViewerState);
+      var newChannelSettings = channelSettings.map(function (_, index) {
+        var initialChannelSetting = initializeOneChannelSetting(channelSettings[index].name, index, getDefaultChannelColor(index), _this.savedViewerChannelSettings);
+        return initialChannelSetting;
+      });
+      this.resetToState(newViewerState, newChannelSettings);
+      this.useDefaultViewerChannelSettings = false;
+    }
+
+    /** Reset to global default viewer state, as if loading the volume with no parameters. */
+  }, {
+    key: "resetToDefaultViewerState",
+    value: function resetToDefaultViewerState() {
+      var channelSettings = this.ref.current.channelSettings;
+      var defaultViewerState = _objectSpread(_objectSpread({}, getDefaultViewerState()), {}, {
+        cameraState: getDefaultCameraState(ViewMode.threeD)
+      });
+      var defaultChannelStates = channelSettings.map(function (_, index) {
+        return getDefaultChannelState(index);
+      });
+      for (var i = 0; i < Math.min(3, defaultChannelStates.length); i++) {
+        defaultChannelStates[i].volumeEnabled = true;
+      }
+      this.resetToState(defaultViewerState, defaultChannelStates);
+      this.useDefaultViewerChannelSettings = true;
+    }
+  }]);
+}();
+export { ResetStateProvider as default };

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

@@ -0,0 +1,261 @@
+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 _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; }
+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 _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); }
+import React, { useCallback, useContext, useEffect, useMemo, useReducer, useRef } from "react";
+import { getDefaultViewerChannelSettings, getDefaultViewerState } from "../../shared/constants";
+import { RenderMode, ViewMode } from "../../shared/enums";
+import { useConstructor } from "../../shared/utils/hooks";
+import ResetStateProvider from "./ResetStateProvider";
+var isObject = function isObject(val) {
+  return _typeof(val) === "object" && val !== null && !Array.isArray(val);
+};
+
+// Some viewer settings require custom change behaviors to change related settings simultaneously or guard against
+// entering an illegal state (e.g. autorotate must not be on in pathtrace mode). Those behaviors are defined here.
+var VIEWER_SETTINGS_CHANGE_HANDLERS = {
+  // View mode: if we're switching to 2d, switch to volumetric rendering
+  viewMode: function viewMode(prevSettings, _viewMode) {
+    var switchToVolumetric = _viewMode !== ViewMode.threeD && prevSettings.renderMode === RenderMode.pathTrace;
+    return _objectSpread(_objectSpread({}, prevSettings), {}, {
+      viewMode: _viewMode,
+      renderMode: switchToVolumetric ? RenderMode.volumetric : prevSettings.renderMode
+    });
+  },
+  // Render mode: if we're switching to pathtrace, turn off autorotate
+  // Also, do not allow pathtrace mode in any mode other than 3D.
+  renderMode: function renderMode(prevSettings, _renderMode) {
+    if (_renderMode === RenderMode.pathTrace && prevSettings.viewMode !== ViewMode.threeD) {
+      return _objectSpread({}, prevSettings);
+    }
+    return _objectSpread(_objectSpread({}, prevSettings), {}, {
+      renderMode: _renderMode,
+      autorotate: _renderMode === RenderMode.pathTrace ? false : prevSettings.autorotate
+    });
+  },
+  // Autorotate: do not enable autorotate while in pathtrace mode
+  autorotate: function autorotate(prevSettings, _autorotate) {
+    return _objectSpread(_objectSpread({}, prevSettings), {}, {
+      // The button should theoretically be unclickable while in pathtrace mode, but this provides extra security
+      autorotate: prevSettings.renderMode === RenderMode.pathTrace ? false : _autorotate
+    });
+  }
+};
+var viewerSettingsReducer = function viewerSettingsReducer(viewerSettings, _ref) {
+  var key = _ref.key,
+    value = _ref.value;
+  var changeHandler = VIEWER_SETTINGS_CHANGE_HANDLERS[key];
+  if (changeHandler) {
+    // This setting has a custom change handler. Let it handle creating a new state object.
+    return changeHandler(viewerSettings, value);
+  } else {
+    var setting = viewerSettings[key];
+    if (isObject(setting) && isObject(value)) {
+      // This setting is an object, and we may be updating it with a partial object.
+      return _objectSpread(_objectSpread({}, viewerSettings), {}, _defineProperty({}, key, _objectSpread(_objectSpread({}, setting), value)));
+    } else {
+      // This setting is regular. Update it the regular way.
+      return _objectSpread(_objectSpread({}, viewerSettings), {}, _defineProperty({}, key, value));
+    }
+  }
+};
+var ChannelSettingActionType = /*#__PURE__*/function (ChannelSettingActionType) {
+  ChannelSettingActionType["UniformUpdate"] = "UniformUpdate";
+  ChannelSettingActionType["ArrayUpdate"] = "ArrayUpdate";
+  ChannelSettingActionType["Init"] = "Init";
+  return ChannelSettingActionType;
+}(ChannelSettingActionType || {});
+/** Set channel setting `key` on one or more channels specified by `index` to value `value`. */
+/** Set the values of channel setting `key` for all channels from an array of values ordered by channel index */
+/** Initialize list of channel states */
+var channelSettingsReducer = function channelSettingsReducer(channelSettings, action) {
+  if (action.type === ChannelSettingActionType.Init) {
+    // ChannelSettingInitAction
+    return action.value;
+  } else if (action.type === ChannelSettingActionType.ArrayUpdate) {
+    // ChannelSettingArrayUpdateAction
+    return channelSettings.map(function (channel, idx) {
+      return action.value[idx] ? _objectSpread(_objectSpread({}, channel), {}, _defineProperty({}, action.key, action.value[idx])) : channel;
+    });
+  } else {
+    // type is ChannelSettingActionType.UniformUpdate
+    if (Array.isArray(action.index)) {
+      // ChannelSettingUniformUpdateAction on potentially multiple channels
+      return channelSettings.map(function (channel, idx) {
+        return action.index.includes(idx) ? _objectSpread(_objectSpread({}, channel), action.value) : channel;
+      });
+    } else {
+      // ChannelSettingUniformUpdateAction on a single channel
+      var newSettings = channelSettings.slice();
+      if (action.index >= 0 && action.index < channelSettings.length) {
+        newSettings[action.index] = _objectSpread(_objectSpread({}, newSettings[action.index]), action.value);
+      }
+      return newSettings;
+    }
+  }
+};
+var nullfn = function nullfn() {};
+var DEFAULT_VIEWER_CONTEXT = _objectSpread(_objectSpread({}, getDefaultViewerState()), {}, {
+  channelSettings: [],
+  changeViewerSetting: nullfn,
+  setChannelSettings: nullfn,
+  changeChannelSetting: nullfn,
+  applyColorPresets: nullfn,
+  resetToSavedViewerState: nullfn,
+  resetToDefaultViewerState: nullfn,
+  setSavedViewerChannelSettings: nullfn,
+  getCurrentViewerChannelSettings: function getCurrentViewerChannelSettings() {
+    return getDefaultViewerChannelSettings();
+  },
+  getChannelsAwaitingReset: function getChannelsAwaitingReset() {
+    return new Set();
+  },
+  getChannelsAwaitingResetOnLoad: function getChannelsAwaitingResetOnLoad() {
+    return new Set();
+  },
+  onResetChannel: nullfn
+});
+export var ALL_VIEWER_STATE_KEYS = Object.keys(DEFAULT_VIEWER_CONTEXT);
+var DEFAULT_VIEWER_CONTEXT_OUTER = {
+  ref: {
+    current: DEFAULT_VIEWER_CONTEXT
+  }
+};
+export var ViewerStateContext = /*#__PURE__*/React.createContext(DEFAULT_VIEWER_CONTEXT_OUTER);
+
+/** Provides a central store for the state of the viewer, and the methods to update it. */
+var ViewerStateProvider = function ViewerStateProvider(props) {
+  var _useReducer = useReducer(viewerSettingsReducer, _objectSpread({}, getDefaultViewerState())),
+    _useReducer2 = _slicedToArray(_useReducer, 2),
+    viewerSettings = _useReducer2[0],
+    viewerDispatch = _useReducer2[1];
+  var _useReducer3 = useReducer(channelSettingsReducer, []),
+    _useReducer4 = _slicedToArray(_useReducer3, 2),
+    channelSettings = _useReducer4[0],
+    channelDispatch = _useReducer4[1];
+  // Provide viewer state via a ref, so that closures that run asynchronously can capture the ref instead of the
+  // specific values they need and always have the most up-to-date state.
+  var ref = useRef(DEFAULT_VIEWER_CONTEXT);
+  var resetProvider = useConstructor(function () {
+    return new ResetStateProvider(ref);
+  });
+  useEffect(function () {
+    resetProvider.setSavedViewerState(props.viewerSettings || {});
+  }, [props.viewerSettings]);
+  var changeViewerSetting = useCallback(function (key, value) {
+    return viewerDispatch({
+      key: key,
+      value: value
+    });
+  }, []);
+  var changeChannelSetting = useCallback(function (index, value) {
+    channelDispatch({
+      type: ChannelSettingActionType.UniformUpdate,
+      index: index,
+      value: value
+    });
+  }, []);
+  var applyColorPresets = useCallback(function (value) {
+    return channelDispatch({
+      type: ChannelSettingActionType.ArrayUpdate,
+      key: "color",
+      value: value
+    });
+  }, []);
+  var setChannelSettings = useCallback(function (channels) {
+    return channelDispatch({
+      type: ChannelSettingActionType.Init,
+      value: channels
+    });
+  }, []);
+
+  // Sync viewer settings prop with state
+  // React docs seem to be fine with syncing state with props directly in the render function, but that caused an
+  // infinite render loop, so now it's in a `useMemo`:
+  // https://react.dev/learn/you-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes
+  useMemo(function () {
+    if (props.viewerSettings) {
+      for (var _i = 0, _arr = Object.keys(props.viewerSettings); _i < _arr.length; _i++) {
+        var key = _arr[_i];
+        if (viewerSettings[key] !== props.viewerSettings[key]) {
+          changeViewerSetting(key, props.viewerSettings[key]);
+        }
+      }
+    }
+  }, [props.viewerSettings]);
+  var context = useMemo(function () {
+    ref.current = _objectSpread(_objectSpread({}, viewerSettings), {}, {
+      channelSettings: channelSettings,
+      changeViewerSetting: changeViewerSetting,
+      setChannelSettings: setChannelSettings,
+      changeChannelSetting: changeChannelSetting,
+      applyColorPresets: applyColorPresets,
+      // Reset-related callbacks
+      setSavedViewerChannelSettings: resetProvider.setSavedViewerChannelSettings,
+      getCurrentViewerChannelSettings: resetProvider.getCurrentViewerChannelSettings,
+      getChannelsAwaitingReset: resetProvider.getChannelsAwaitingReset,
+      getChannelsAwaitingResetOnLoad: resetProvider.getChannelsAwaitingResetOnLoad,
+      onResetChannel: resetProvider.onResetChannel,
+      resetToSavedViewerState: resetProvider.resetToSavedViewerState,
+      resetToDefaultViewerState: resetProvider.resetToDefaultViewerState
+    });
+
+    // `ref` is wrapped in another object to ensure that the context updates when state does.
+    // (`ref` on its own would always compare equal to itself and the context would never update.)
+    return {
+      ref: ref
+    };
+  }, [viewerSettings, channelSettings]);
+  return /*#__PURE__*/React.createElement(ViewerStateContext.Provider, {
+    value: context
+  }, props.children);
+};
+
+/**
+ * Higher-order component that connects a component to the viewer state context.
+ *
+ * Accepts a `component` and an array of `keys` from the viewer state context, and returns a new memoized component
+ * which "subscribes" to only those fields of state, and will not re-render if other fields change. This works by
+ * creating a component which is "split in two" as described
+ * [here](https://react.dev/reference/react/memo#updating-a-memoized-component-using-a-context).
+ *
+ * NOTE that while higher-order components don't seem to be explicitly considered an anti-pattern, they don't appear in
+ * modern documentation because they are "[not commonly used in modern React
+ * code](https://legacy.reactjs.org/docs/higher-order-components.html)." React-redux, which inspired this "connect"
+ * pattern, has also generally moved away from this pattern [in favor of a hooks-based
+ * approach](https://react-redux.js.org/api/hooks). I too would love to use hooks to connect to viewer state, but there
+ * is currently no way to hook into context without agreeing to re-render on every change. I feel okay using a higher-
+ * order component in this case because, analogous to a custom hook, it extends a provided primitive HOC (`memo`).
+ */
+export function connectToViewerState(component, keys) {
+  var MemoedComponent = /*#__PURE__*/React.memo(component);
+  var ConnectedComponent = function ConnectedComponent(props) {
+    var viewerState = useContext(ViewerStateContext);
+    var mergedProps = _objectSpread({}, props);
+    var _iterator = _createForOfIteratorHelper(keys),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var key = _step.value;
+        mergedProps[key] = viewerState.ref.current[key];
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+    return /*#__PURE__*/React.createElement(MemoedComponent, mergedProps);
+  };
+  ConnectedComponent.displayName = "Connected(".concat(component.displayName || component.name, ")");
+  return ConnectedComponent;
+}
+export default ViewerStateProvider;

package/es/aics-image-viewer/components/ViewerStateProvider/types.js

@@ -0,0 +1 @@
+export {};

package/es/aics-image-viewer/components/shared/NumericInput/index.js

@@ -0,0 +1,147 @@
+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 React from "react";
+import { CaretDownOutlined, CaretUpOutlined } from "@ant-design/icons";
+import { useRefWithSetter } from "../../../shared/utils/hooks";
+import "./styles.css";
+/**
+ * Fully-controlled numeric input (value must be supplied from state in parent).
+ * Changeable with arrow keys, typing values, or clickable arrows. Inspired by
+ * ant's `InputNumber`, but conforms to our style and behavior expectations.
+ */
+var NumericInput = function NumericInput(_ref) {
+  var value = _ref.value,
+    _ref$step = _ref.step,
+    step = _ref$step === void 0 ? 1 : _ref$step,
+    _ref$precision = _ref.precision,
+    precision = _ref$precision === void 0 ? step : _ref$precision,
+    _ref$min = _ref.min,
+    min = _ref$min === void 0 ? 0 : _ref$min,
+    _ref$max = _ref.max,
+    max = _ref$max === void 0 ? Number.MAX_SAFE_INTEGER : _ref$max,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className,
+    onChange = _ref.onChange;
+  // While the input has focus, allow invalid input, just don't call `onChange` with it
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    hasFocus = _React$useState2[0],
+    _setHasFocus = _React$useState2[1];
+  // State doesn't update before focus handler runs - keep a ref following focus state
+  var _useRefWithSetter = useRefWithSetter(_setHasFocus, hasFocus),
+    _useRefWithSetter2 = _slicedToArray(_useRefWithSetter, 2),
+    hasFocusRef = _useRefWithSetter2[0],
+    setHasFocus = _useRefWithSetter2[1];
+
+  // Hold the potentially invalid contents of the focused input here
+  var _React$useState3 = React.useState(""),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    textContent = _React$useState4[0],
+    setTextContent = _React$useState4[1];
+  var inputRef = React.useRef(null);
+  var clamp = function clamp(newValue) {
+    return Math.min(Math.max(newValue, min), max);
+  };
+  var roundToPrecision = function roundToPrecision(newValue) {
+    return clamp(Math.round(newValue / precision) * precision);
+  };
+  var shouldChange = function shouldChange(newValue) {
+    return !(isNaN(newValue) || newValue === value || disabled);
+  };
+  var displayedValue = roundToPrecision(value);
+  var onFocus = function onFocus() {
+    if (!hasFocusRef.current) {
+      // propagate current value to `textContent` on focus
+      setTextContent(displayedValue.toString());
+      setHasFocus(true);
+    }
+  };
+  var changeByStep = function changeByStep(up) {
+    var _inputRef$current;
+    var delta = up ? step : -step;
+    var newValue = clamp(displayedValue + delta);
+    if (shouldChange(newValue)) {
+      onChange(newValue);
+      setTextContent(newValue.toString());
+      // let the focus handler know we've taken care of things, so it won't restore the previous value
+      setHasFocus(true);
+    }
+    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
+  };
+  var onKeyDown = function onKeyDown(event) {
+    var key = event.key;
+    if (["Up", "ArrowUp", "Down", "ArrowDown"].includes(key)) {
+      changeByStep(key === "Up" || key === "ArrowUp");
+      event.preventDefault();
+    } else if (key === "Enter") {
+      var _inputRef$current2;
+      (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 || _inputRef$current2.blur();
+    }
+  };
+  var handleTyping = function handleTyping(inputStr) {
+    setTextContent(inputStr);
+
+    // if the user clears all text, assume they mean 0 (or the extremum closest to it)
+    // this is likely not completely general, but should be reasonable for any of our purposes
+    var inputNum = inputStr === "" ? 0 : parseFloat(inputStr);
+    var newValue = roundToPrecision(inputNum);
+    if (shouldChange(newValue)) {
+      onChange(newValue);
+    }
+  };
+  var fullClassName = "numinput" + (disabled ? " numinput-disabled" : "") + (className && " ".concat(className));
+  return /*#__PURE__*/React.createElement("div", {
+    className: fullClassName,
+    onKeyDown: onKeyDown
+  }, /*#__PURE__*/React.createElement("input", {
+    value: hasFocus ? textContent : displayedValue,
+    step: step,
+    min: min,
+    max: max,
+    disabled: disabled,
+    className: "numinput-input",
+    autoComplete: "off",
+    role: "spinbutton",
+    "aria-valuenow": displayedValue,
+    "aria-valuemin": min,
+    "aria-valuemax": max,
+    ref: inputRef,
+    onChange: function onChange(_ref2) {
+      var target = _ref2.target;
+      return handleTyping(target.value);
+    },
+    onFocus: onFocus,
+    onBlur: function onBlur() {
+      return setHasFocus(false);
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "numinput-controls"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "numinput-controls-button numinput-controls-button-up",
+    role: "button",
+    "aria-label": "Increase Value",
+    "aria-disabled": disabled,
+    onClick: function onClick() {
+      return changeByStep(true);
+    }
+  }, /*#__PURE__*/React.createElement(CaretUpOutlined, {
+    className: "numinput-controls-button-icon"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "numinput-controls-button numinput-controls-button-down",
+    role: "button",
+    "aria-label": "Decrease Value",
+    "aria-disabled": disabled,
+    onClick: function onClick() {
+      return changeByStep(false);
+    }
+  }, /*#__PURE__*/React.createElement(CaretDownOutlined, {
+    className: "numinput-controls-button-icon"
+  }))));
+};
+export default NumericInput;

package/es/aics-image-viewer/components/shared/NumericInput/styles.css

@@ -0,0 +1,64 @@
+.numinput{
+  height:23px;
+  width:52px;
+  position:relative;
+  display:inline-block;
+  box-sizing:border-box;
+}
+
+  .numinput input{
+    color:var(--color-text-body);
+  }
+
+  .numinput.numinput-disabled{
+    opacity:0.5;
+  }
+
+  .numinput .numinput-input{
+    width:40px;
+    height:100%;
+    font-size:12px;
+    text-align:right;
+    padding-right:6px;
+    background-color:transparent;
+    border:1px solid #4b4b4b;
+  }
+
+  .numinput .numinput-input:focus{
+      outline:none;
+    }
+
+  .numinput .numinput-controls{
+    width:12px;
+    height:100%;
+    position:absolute;
+    display:inline-block;
+    border:1px solid #4b4b4b;
+    border-left-width:0;
+  }
+
+  .numinput .numinput-controls-button{
+    width:100%;
+    height:50%;
+    line-height:0;
+    transition:all 0.3s linear;
+  }
+
+  .numinput .numinput-controls-button.numinput-controls-button-up{
+      border-bottom:1px solid #4b4b4b;
+    }
+
+  .numinput .numinput-controls-button .numinput-controls-button-icon{
+      font-size:9px;
+      margin:1px;
+    }
+
+  .numinput:not(.numinput-disabled) .numinput-controls-button{
+    cursor:pointer;
+  }
+
+  .numinput:not(.numinput-disabled) .numinput-controls-button:hover,
+    .numinput:not(.numinput-disabled) .numinput-controls-button:focus{
+      background-color:#9e6aff;
+      color:white;
+    }

package/es/aics-image-viewer/components/shared/SharedCheckBox.js

@@ -0,0 +1,17 @@
+import React from "react";
+import { Checkbox } from "antd";
+var SharedCheckbox = function SharedCheckbox(props) {
+  var onCheckAllChange = function onCheckAllChange(_ref) {
+    var target = _ref.target;
+    return props.onChange(target.checked, props.allOptions);
+  };
+  var indeterminate = !!props.checkedList.length && props.checkedList.length < props.allOptions.length;
+  var checkAll = props.checkedList.length === props.allOptions.length;
+  return /*#__PURE__*/React.createElement(Checkbox, {
+    indeterminate: indeterminate,
+    onChange: onCheckAllChange,
+    checked: checkAll,
+    style: props.style
+  }, props.children);
+};
+export default SharedCheckbox;