@aics/vole-app 2.15.0 → 3.1.1

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

@@ -8,9 +8,9 @@ import { LoadingOutlined } from "@ant-design/icons";
 import React from "react";
 import { CLIPPING_PANEL_HEIGHT_DEFAULT, CLIPPING_PANEL_HEIGHT_TALL } from "../../shared/constants";
 import { ViewMode } from "../../shared/enums";
+import { select, useViewerState } from "../../state/store";
 import AxisClipSliders from "../AxisClipSliders";
 import BottomPanel from "../BottomPanel";
-import { connectToViewerState } from "../ViewerStateProvider";
 import "./styles.css";
 var ViewerWrapper = function ViewerWrapper(props) {
   var view3dviewerRef = /*#__PURE__*/React.createRef();
@@ -37,14 +37,15 @@ var ViewerWrapper = function ViewerWrapper(props) {
     return noImageText || spinner;
   };
   var appHeight = props.appHeight,
-    changeViewerSetting = props.changeViewerSetting,
     visibleControls = props.visibleControls,
     numTimesteps = props.numTimesteps,
-    numScenes = props.numScenes,
-    viewMode = props.viewMode,
-    region = props.region,
-    slice = props.slice,
-    time = props.time;
+    numScenes = props.numScenes;
+  var changeViewerSetting = useViewerState(select("changeViewerSetting"));
+  var viewMode = useViewerState(select("viewMode"));
+  var region = useViewerState(select("region"));
+  var slice = useViewerState(select("slice"));
+  var time = useViewerState(select("time"));
+  var scene = useViewerState(select("scene"));
   var clippingPanelTall = numTimesteps > 1 && numScenes > 1 && viewMode === ViewMode.threeD;
   return /*#__PURE__*/React.createElement("div", {
     className: "cell-canvas",
@@ -70,12 +71,12 @@ var ViewerWrapper = function ViewerWrapper(props) {
     slices: slice,
     numTimesteps: numTimesteps,
     time: time,
-    scene: props.scene,
+    scene: scene,
     playControls: props.playControls,
     playingAxis: props.playingAxis
   })), renderOverlay());
 };
-export default connectToViewerState(ViewerWrapper, ["autorotate", "viewMode", "region", "slice", "time", "scene", "changeViewerSetting"]);
+export default ViewerWrapper;
 var STYLES = {
   viewer: {
     display: "flex",

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

@@ -10,19 +10,36 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import { Collapse, List } from "antd";
 import React from "react";
+import { useShallow } from "zustand/shallow";
 import { getDisplayName } from "../shared/utils/viewerChannelSettings";
+import { select, useViewerState } from "../state/store";
 import ChannelsWidgetRow from "./ChannelsWidgetRow";
 import SharedCheckBox from "./shared/SharedCheckBox";
-import { connectToViewerState } from "./ViewerStateProvider";
+
+/** A quick custom hook to grab a single state field from every channel */
+var useSelectFromAllChannels = function useSelectFromAllChannels(key) {
+  return useShallow(function (_ref) {
+    var channelSettings = _ref.channelSettings;
+    return channelSettings.map(function (settings) {
+      return settings[key];
+    });
+  });
+};
 var ChannelsWidget = function ChannelsWidget(props) {
   var channelGroupedByType = props.channelGroupedByType,
-    channelSettings = props.channelSettings,
     channelDataChannels = props.channelDataChannels,
     filterFunc = props.filterFunc,
     viewerChannelSettings = props.viewerChannelSettings;
+  var changeChannelSetting = useViewerState(select("changeChannelSetting"));
+  var selectVolumeEnabled = useSelectFromAllChannels("volumeEnabled");
+  var selectIsosurfaceEnabled = useSelectFromAllChannels("isosurfaceEnabled");
+  var selectNames = useSelectFromAllChannels("name");
+  var volumeEnabled = useViewerState(selectVolumeEnabled);
+  var isosurfaceEnabled = useViewerState(selectIsosurfaceEnabled);
+  var channelNames = useViewerState(selectNames);
   var createCheckboxHandler = function createCheckboxHandler(key) {
     return function (value, channelArray) {
-      props.changeChannelSetting(channelArray, _defineProperty({}, key, value));
+      changeChannelSetting(channelArray, _defineProperty({}, key, value));
     };
   };
   var showVolumes = createCheckboxHandler("volumeEnabled");
@@ -31,12 +48,10 @@ var ChannelsWidget = function ChannelsWidget(props) {
     var volChecked = [];
     var isoChecked = [];
     channelArray.forEach(function (channelIndex) {
-      var channelSetting = channelSettings[channelIndex];
-      if (!channelSetting) return;
-      if (channelSetting.volumeEnabled) {
+      if (volumeEnabled[channelIndex]) {
         volChecked.push(channelIndex);
       }
-      if (channelSetting.isosurfaceEnabled) {
+      if (isosurfaceEnabled[channelIndex]) {
         isoChecked.push(channelIndex);
       }
     });
@@ -56,28 +71,26 @@ var ChannelsWidget = function ChannelsWidget(props) {
     }, "All Surf"));
   };
   var renderChannelRow = function renderChannelRow(channelIndex) {
-    var thisChannelSettings = channelSettings[channelIndex];
-    return thisChannelSettings ? /*#__PURE__*/React.createElement(ChannelsWidgetRow, {
-      key: "".concat(channelIndex, "_").concat(thisChannelSettings.name, "_").concat(channelIndex),
+    var channelName = channelNames[channelIndex];
+    return channelName ? /*#__PURE__*/React.createElement(ChannelsWidgetRow, {
+      key: channelIndex,
       index: channelIndex,
       channelDataForChannel: channelDataChannels[channelIndex],
-      name: getDisplayName(thisChannelSettings.name, channelIndex, viewerChannelSettings),
-      channelState: thisChannelSettings,
-      changeChannelSetting: props.changeChannelSetting,
+      name: getDisplayName(channelName, channelIndex, viewerChannelSettings),
       onColorChangeComplete: props.onColorChangeComplete,
       saveIsosurface: props.saveIsosurface
     }) : null;
   };
   var firstKey = Object.keys(channelGroupedByType)[0];
-  var rows = channelDataChannels && Object.entries(channelGroupedByType).filter(function (_ref) {
-    var _ref2 = _slicedToArray(_ref, 2),
-      key = _ref2[0],
-      channelArray = _ref2[1];
+  var rows = channelDataChannels && Object.entries(channelGroupedByType).filter(function (_ref2) {
+    var _ref3 = _slicedToArray(_ref2, 2),
+      key = _ref3[0],
+      channelArray = _ref3[1];
     return channelArray.length > 0 && (!filterFunc || filterFunc(key));
-  }).map(function (_ref3) {
-    var _ref4 = _slicedToArray(_ref3, 2),
-      key = _ref4[0],
-      channelArray = _ref4[1];
+  }).map(function (_ref4) {
+    var _ref5 = _slicedToArray(_ref4, 2),
+      key = _ref5[0],
+      channelArray = _ref5[1];
     var children = /*#__PURE__*/React.createElement(List, {
       itemLayout: "horizontal",
       dataSource: channelArray,
@@ -97,4 +110,4 @@ var ChannelsWidget = function ChannelsWidget(props) {
     collapsible: "icon"
   });
 };
-export default connectToViewerState(ChannelsWidget, ["channelSettings", "changeChannelSetting"]);
+export default ChannelsWidget;

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

@@ -4,42 +4,47 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof 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 _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 { Button, Checkbox, InputNumber, List } from "antd";
+import { Button, Checkbox, List } from "antd";
 import React, { useCallback, useState } from "react";
-import { DTYPE_RANGE, ISOSURFACE_OPACITY_SLIDER_MAX } from "../../shared/constants";
 import { colorArrayToObject, colorObjectToArray } from "../../shared/utils/colorRepresentations";
+import { select, useViewerState } from "../../state/store";
 import ColorPicker from "../ColorPicker";
-import SliderRow from "../shared/SliderRow";
 import ViewerIcon from "../shared/ViewerIcon";
 import TfEditor from "../TfEditor";
 import "./styles.css";
 var ChannelsWidgetRow = function ChannelsWidgetRow(props) {
   var index = props.index,
-    changeChannelSetting = props.changeChannelSetting,
-    saveIsosurface = props.saveIsosurface,
-    channelState = props.channelState;
+    saveIsosurface = props.saveIsosurface;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     controlsOpen = _useState2[0],
     setControlsOpen = _useState2[1];
+  var changeChannelSetting = useViewerState(select("changeChannelSetting"));
+  var channelState = useViewerState(function (_ref) {
+    var channelSettings = _ref.channelSettings;
+    return channelSettings[props.index];
+  });
   var changeSettingForThisChannel = useCallback(function (value) {
     return changeChannelSetting(index, value);
   }, [changeChannelSetting, index]);
-  var volumeCheckHandler = function volumeCheckHandler(_ref) {
-    var target = _ref.target;
+  var saveThisIsosurface = useCallback(function (format) {
+    return saveIsosurface(index, format);
+  }, [saveIsosurface, index]);
+  var volumeCheckHandler = function volumeCheckHandler(_ref2) {
+    var target = _ref2.target;
     changeChannelSetting(index, {
       volumeEnabled: target.checked
     });
   };
-  var isosurfaceCheckHandler = function isosurfaceCheckHandler(_ref2) {
-    var target = _ref2.target;
+  var isosurfaceCheckHandler = function isosurfaceCheckHandler(_ref3) {
+    var target = _ref3.target;
     changeChannelSetting(index, {
       isosurfaceEnabled: target.checked
     });
   };
   var onColorChange = function onColorChange(newRGB, _oldRGB, index) {
     var color = colorObjectToArray(newRGB);
-    props.changeChannelSetting(index, {
+    changeChannelSetting(index, {
       color: color
     });
   };
@@ -75,13 +80,15 @@ var ChannelsWidgetRow = function ChannelsWidgetRow(props) {
     type: "text"
   }));
   var createTFEditor = function createTFEditor() {
+    // TODO this is most of `channelState`... should `TfEditor` just get `channelState`?
     var controlPoints = channelState.controlPoints,
       colorizeEnabled = channelState.colorizeEnabled,
       colorizeAlpha = channelState.colorizeAlpha,
       useControlPoints = channelState.useControlPoints,
       ramp = channelState.ramp,
       plotMin = channelState.plotMin,
-      plotMax = channelState.plotMax;
+      plotMax = channelState.plotMax,
+      isovalue = channelState.isovalue;
     return /*#__PURE__*/React.createElement(TfEditor, {
       id: "TFEditor" + index,
       width: 418,
@@ -94,66 +101,15 @@ var ChannelsWidgetRow = function ChannelsWidgetRow(props) {
       useControlPoints: useControlPoints,
       ramp: ramp,
       plotMin: plotMin,
-      plotMax: plotMax
+      plotMax: plotMax,
+      keepIntensityRange: channelState.keepIntensityRange,
+      isovalue: isovalue,
+      opacity: channelState.opacity,
+      volumeEnabled: channelState.volumeEnabled,
+      isosurfaceEnabled: channelState.isosurfaceEnabled,
+      saveIsosurface: saveThisIsosurface
     });
   };
-  var renderSurfaceControls = function renderSurfaceControls() {
-    var range = DTYPE_RANGE[props.channelDataForChannel.dtype];
-    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(SliderRow, {
-      label: "Isovalue",
-      min: range.min,
-      max: range.max,
-      start: channelState.isovalue,
-      onChange: function onChange(_ref3) {
-        var _ref4 = _slicedToArray(_ref3, 1),
-          isovalue = _ref4[0];
-        return changeSettingForThisChannel({
-          isovalue: isovalue
-        });
-      },
-      formatInteger: true
-    }, /*#__PURE__*/React.createElement(InputNumber, {
-      value: channelState.isovalue,
-      onChange: function onChange(isovalue) {
-        return isovalue !== null && changeSettingForThisChannel({
-          isovalue: isovalue
-        });
-      },
-      formatter: function formatter(v) {
-        return v === undefined ? "" : Number(v).toFixed(0);
-      },
-      min: range.min,
-      max: range.max,
-      size: "small",
-      controls: false,
-      style: {
-        width: "64px",
-        marginLeft: "8px"
-      }
-    })), /*#__PURE__*/React.createElement(SliderRow, {
-      label: "Opacity",
-      max: ISOSURFACE_OPACITY_SLIDER_MAX,
-      start: channelState.opacity * ISOSURFACE_OPACITY_SLIDER_MAX,
-      onChange: function onChange(_ref5) {
-        var _ref6 = _slicedToArray(_ref5, 1),
-          opacity = _ref6[0];
-        return changeSettingForThisChannel({
-          opacity: opacity / ISOSURFACE_OPACITY_SLIDER_MAX
-        });
-      },
-      formatInteger: true
-    }), /*#__PURE__*/React.createElement("div", {
-      className: "button-row"
-    }, /*#__PURE__*/React.createElement(Button, {
-      onClick: function onClick() {
-        return saveIsosurface(index, "GLTF");
-      }
-    }, "Export GLTF"), /*#__PURE__*/React.createElement(Button, {
-      onClick: function onClick() {
-        return saveIsosurface(index, "STL");
-      }
-    }, "Export STL")));
-  };
   var renderControls = function renderControls() {
     if (!channelState.volumeEnabled && !channelState.isosurfaceEnabled) {
       return /*#__PURE__*/React.createElement("h4", {
@@ -162,7 +118,7 @@ var ChannelsWidgetRow = function ChannelsWidgetRow(props) {
         }
       }, "Not currently visible");
     }
-    return /*#__PURE__*/React.createElement(React.Fragment, null, channelState.volumeEnabled && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h4", null, "Volume settings:"), createTFEditor()), channelState.isosurfaceEnabled && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h4", null, "Surface settings:"), renderSurfaceControls()));
+    return /*#__PURE__*/React.createElement(React.Fragment, null, (channelState.volumeEnabled || channelState.isosurfaceEnabled) && createTFEditor());
   };
   var rowClass = controlsOpen ? "channel-row" : "channel-row controls-closed";
   return /*#__PURE__*/React.createElement(List.Item, {

package/es/aics-image-viewer/components/ChannelsWidgetRow/styles.css

@@ -9,12 +9,6 @@
     color:var(--color-controlpanel-text);
   }
 
-.channel-rows-list .ant-list-item.channel-row h4{
-    color:var(--color-text-section);
-    margin-top:28px;
-    margin-bottom:10px;
-  }
-
 .channel-rows-list .ant-list-item.channel-row .ant-btn-text{
     color:var(--color-button-icon-activated-text);
     transition:color 0.3s;

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

@@ -10,9 +10,9 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof 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 _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 { map } from "lodash";
 import React from "react";
 import { SketchPicker } from "react-color";
-import { map } from "lodash";
 // if there are fewer than this many screen pixels below the swatch but more above, open above the swatch
 var OPEN_ABOVE_MARGIN = 310;
 var DEFAULT_COLOR = {

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

@@ -12,12 +12,12 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 import { Button, Collapse, Dropdown, Flex, Tooltip } from "antd";
 import React from "react";
 import { PRESET_COLOR_MAP } from "../../shared/constants";
+import { select, useViewerState } from "../../state/store";
 import ChannelsWidget from "../ChannelsWidget";
 import CustomizeWidget from "../CustomizeWidget";
 import GlobalVolumeControls from "../GlobalVolumeControls";
 import MetadataViewer from "../MetadataViewer";
 import ViewerIcon from "../shared/ViewerIcon";
-import { connectToViewerState } from "../ViewerStateProvider";
 import "./styles.css";
 var ControlTab = /*#__PURE__*/function (ControlTab) {
   ControlTab[ControlTab["Channels"] = 0] = "Channels";
@@ -35,6 +35,7 @@ function ControlPanel(props) {
     _setTab(newTab);
     props.setCollapsed(false);
   };
+  var resetToDefaultViewerState = useViewerState(select("resetToDefaultViewerState"));
   var controlPanelContainerRef = React.useRef(null);
   var getDropdownContainer = controlPanelContainerRef.current ? function () {
     return controlPanelContainerRef.current;
@@ -130,7 +131,7 @@ function ControlPanel(props) {
       placement: "right",
       title: "Clears ALL rendering settings and channel configuration to the default viewer state. This will replace any edits to channel settings, color presets, and rendering adjustments."
     }, /*#__PURE__*/React.createElement(Button, {
-      onClick: props.resetToDefaultViewerState
+      onClick: resetToDefaultViewerState
     }, "Clear all settings"))));
   };
   return /*#__PURE__*/React.createElement("div", {
@@ -174,7 +175,7 @@ function ControlPanel(props) {
     filterFunc: props.filterFunc,
     viewerChannelSettings: viewerChannelSettings
   }), tab === ControlTab.Advanced && renderAdvancedSettings(), tab === ControlTab.Metadata && /*#__PURE__*/React.createElement(MetadataViewer, {
-    metadata: props.getMetadata()
+    metadata: props.metadata
   }))));
 }
-export default connectToViewerState(ControlPanel, ["resetToDefaultViewerState"]);
+export default ControlPanel;

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

@@ -1,7 +1,7 @@
 import React from "react";
-import ColorPicker from "./ColorPicker";
 import { colorArrayToObject, colorObjectToArray } from "../shared/utils/colorRepresentations";
-import { connectToViewerState } from "./ViewerStateProvider";
+import { select, useViewerState } from "../state/store";
+import ColorPicker from "./ColorPicker";
 var ColorPickerRow = function ColorPickerRow(_ref) {
   var color = _ref.color,
     _onColorChange = _ref.onColorChange,
@@ -20,17 +20,21 @@ var ColorPickerRow = function ColorPickerRow(_ref) {
   })), /*#__PURE__*/React.createElement("span", null, children));
 };
 var CustomizeWidget = function CustomizeWidget(props) {
+  var showBoundingBox = useViewerState(select("showBoundingBox"));
+  var backgroundColor = useViewerState(select("backgroundColor"));
+  var boundingBoxColor = useViewerState(select("boundingBoxColor"));
+  var changeViewerSetting = useViewerState(select("changeViewerSetting"));
   return /*#__PURE__*/React.createElement(React.Fragment, null, props.visibleControls.backgroundColorPicker && /*#__PURE__*/React.createElement(ColorPickerRow, {
-    color: props.backgroundColor,
+    color: backgroundColor,
     onColorChange: function onColorChange(color) {
-      return props.changeViewerSetting("backgroundColor", color);
+      return changeViewerSetting("backgroundColor", color);
     }
   }, "Background color"), props.visibleControls.boundingBoxColorPicker && /*#__PURE__*/React.createElement(ColorPickerRow, {
-    color: props.boundingBoxColor,
+    color: boundingBoxColor,
     onColorChange: function onColorChange(color) {
-      return props.changeViewerSetting("boundingBoxColor", color);
+      return changeViewerSetting("boundingBoxColor", color);
     }
-  }, "Bounding box color", !props.showBoundingBox && /*#__PURE__*/React.createElement("i", null, " - bounding box turned off")));
+  }, "Bounding box color", !showBoundingBox && /*#__PURE__*/React.createElement("i", null, " - bounding box turned off")));
 };
 var STYLES = {
   colorPickerRow: {
@@ -43,4 +47,4 @@ var STYLES = {
     marginRight: "16px"
   }
 };
-export default connectToViewerState(CustomizeWidget, ["showBoundingBox", "backgroundColor", "boundingBoxColor", "changeViewerSetting"]);
+export default CustomizeWidget;

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

@@ -1,4 +1,3 @@
-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 _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
@@ -9,6 +8,7 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof 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 _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 _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 _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); }
@@ -37,13 +37,13 @@ var ERROR_TYPE_DESCRIPTIONS = _defineProperty(_defineProperty(_defineProperty(_d
 }, "start a bug report here"), ".")), VolumeLoadErrorType.INVALID_METADATA, /*#__PURE__*/React.createElement(React.Fragment, null, "The viewer was unable to read all necessary information from this volume's metadata. Check that your dataset's metadata is complete and properly formatted. If you believe your data is valid and should be supported by our viewer, let us know by ", /*#__PURE__*/React.createElement(IssueLink, null, "opening a GitHub issue"), ".")), VolumeLoadErrorType.INVALID_MULTI_SOURCE_ZARR, /*#__PURE__*/React.createElement(React.Fragment, null, "The viewer is currently configured to consolidate multiple OME-Zarr datasets into a single volume, but the provided datasets can't all be matched up. Ensure that all dataset URLs are correct and that at least one equivalently-sized scale level exists in all datasets."));
 var getErrorTitle = function getErrorTitle(error) {
   var _error$toString;
-  return error instanceof Error && ((_error$toString = error.toString) === null || _error$toString === void 0 ? void 0 : _error$toString.call(error)) || typeof error === "string" && error || "Unknown error";
+  return error instanceof Error && ((_error$toString = error.toString) === null || _error$toString === void 0 ? void 0 : _error$toString.call(error)) || typeof error === "string" && error || _typeof(error) === "object" && error !== null && error.title || "Unknown error";
 };
 var getErrorDescription = function getErrorDescription(error) {
   var _ERROR_TYPE_DESCRIPTI2;
   var type = error.type;
   if (!type) {
-    return UNKNOWN_ERROR_DESCRIPTION;
+    return _typeof(error) === "object" && error !== null && error.description || UNKNOWN_ERROR_DESCRIPTION;
   }
   return (_ERROR_TYPE_DESCRIPTI2 = ERROR_TYPE_DESCRIPTIONS[type]) !== null && _ERROR_TYPE_DESCRIPTI2 !== void 0 ? _ERROR_TYPE_DESCRIPTI2 : UNKNOWN_ERROR_DESCRIPTION;
 };
@@ -109,8 +109,8 @@ export var useErrorAlert = function useErrorAlert() {
     setErrorCounts = _React$useState8[1];
   var addError = React.useCallback(function (error) {
     var _seenErrors$get;
-    console.error(error);
     var errorTitle = getErrorTitle(error);
+    console.error(error instanceof Error ? error : errorTitle);
     var errorSeenCount = ((_seenErrors$get = seenErrors.get(errorTitle)) !== null && _seenErrors$get !== void 0 ? _seenErrors$get : 0) + 1;
     setErrorList(function (prev) {
       return [].concat(_toConsumableArray(prev), [error]);

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

@@ -1,12 +1,18 @@
 import { Checkbox } from "antd";
 import React from "react";
+import { select, useViewerState } from "../state/store";
 import SliderRow from "./shared/SliderRow";
-import { connectToViewerState } from "./ViewerStateProvider";
 var GlobalVolumeControls = function GlobalVolumeControls(props) {
+  var maskAlpha = useViewerState(select("maskAlpha"));
+  var brightness = useViewerState(select("brightness"));
+  var density = useViewerState(select("density"));
+  var levels = useViewerState(select("levels"));
+  var interpolationEnabled = useViewerState(select("interpolationEnabled"));
+  var changeViewerSetting = useViewerState(select("changeViewerSetting"));
   var createSliderRow = function createSliderRow(label, start, max, propKey) {
     var onUpdate = function onUpdate(_strValues, _handle, values) {
       var selectValue = values.length === 1 ? values[0] : values;
-      props.changeViewerSetting(propKey, selectValue);
+      changeViewerSetting(propKey, selectValue);
     };
     return /*#__PURE__*/React.createElement(SliderRow, {
       label: label,
@@ -15,11 +21,7 @@ var GlobalVolumeControls = function GlobalVolumeControls(props) {
       onUpdate: onUpdate
     });
   };
-  var showControls = props.visibleControls,
-    maskAlpha = props.maskAlpha,
-    brightness = props.brightness,
-    density = props.density,
-    levels = props.levels;
+  var showControls = props.visibleControls;
   return /*#__PURE__*/React.createElement("div", {
     style: {
       paddingTop: 18,
@@ -29,11 +31,11 @@ var GlobalVolumeControls = function GlobalVolumeControls(props) {
     label: "interpolate",
     hideSlider: true
   }, /*#__PURE__*/React.createElement(Checkbox, {
-    checked: props.interpolationEnabled,
+    checked: interpolationEnabled,
     onChange: function onChange(_ref) {
       var target = _ref.target;
-      return props.changeViewerSetting("interpolationEnabled", target.checked);
+      return changeViewerSetting("interpolationEnabled", target.checked);
     }
   })));
 };
-export default connectToViewerState(GlobalVolumeControls, ["maskAlpha", "brightness", "density", "levels", "interpolationEnabled", "changeViewerSetting"]);
+export default GlobalVolumeControls;

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

@@ -20,6 +20,7 @@ var palette = {
   veryLtPurple: "#e7e4f2",
   brightRed: "#ff4d4d",
   brightGreen: "#61d900",
+  veryBrightGreen: "#61ff00",
   brightBlue: "#0099ff"
 };
 var theme = {
@@ -93,7 +94,8 @@ var theme = {
       text: palette.ltGrey,
       sectionBg: palette.medDarkGrey,
       drawerBg: palette.veryDarkGrey,
-      rampSlider: palette.medPurple
+      rampSlider: palette.medPurple,
+      isovalueSlider: palette.veryBrightGreen
     },
     toolbar: {
       buttonBg: "#000000cc"
@@ -136,7 +138,7 @@ var theme = {
 /** Makes theme styling available to child components via CSS variables. */
 var CssProvider = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n\n  ", "\n\n  h1, h2, h3, h4, p {\n    font-family: var(--font-family);\n  }\n\n  h1 {\n    color: var(--color-text-header);\n    font-size: 28px;\n    font-weight: 400;\n  }\n\n  h2 {\n    color: var(--color-text-section);\n    font-size: 19px;\n    font-weight: 400;\n  }\n\n  h3 {\n    color: var(--color-text-header);\n    font-size: 16px;\n    font-weight: 600;\n  }\n\n  h4 {\n    color: var(--color-text-header);\n    font-size: 14px;\n    font-weight: 400;\n  }\n\n  p {\n    color: var(--color-text-body);\n    font-size: 14px;\n    font-weight: 400;\n  }\n\n  a {\n    color: var(--color-text-link);\n  }\n\n  & *::selection {\n    background-color: var(--color-text-selection-bg);\n    color: var(--color-text-selection-text);\n  }\n\n  /** TODO: Go through these styles and see if we can use Ant ConfigProvider for them instead. */\n  .ant-btn-link,\n  .ant-btn-text,\n  .ant-btn-primary,\n  .ant-btn-icon-only {\n    box-shadow: none;\n\n    &:hover:not(:disabled),\n    &:focus-visible:not(:disabled) {\n      background-color: var(--color-button-primary-hover-bg);\n      border-color: var(--color-button-primary-hover-bg);\n      color: var(--color-button-primary-text);\n    }\n\n    &:active:not(:disabled) {\n      background-color: var(--color-button-primary-hover-bg);\n      border: 1px solid var(--color-button-primary-active-outline);\n      color: var(--color-button-primary-text);\n    }\n  }\n\n  /* Let us use buttons with type=\"text\" as purely semantic containers - don't bring any styling! */\n  .ant-btn-text {\n    width: unset;\n    height: unset;\n    padding: unset;\n\n    &:hover:not(:disabled),\n    &:focus-visible:not(:disabled) {\n      background-color: unset;\n      border-color: transparent;\n    }\n  }\n\n  .ant-btn-icon-only:disabled {\n    color: var(--color-button-icon-disabled-text);\n  }\n\n  .ant-btn-link:not(:disabled) {\n    // Change from default blue link text\n    color: var(--color-button-link-text);\n  }\n\n  /**\n   * Tertiary style buttons. Grey outline by default, turns to light\n   * purple outline on hover.\n   */\n  .ant-btn-default:not(.ant-btn-icon-only) {\n    background-color: var(--color-button-tertiary-bg);\n    color: var(--color-button-tertiary-text);\n    border-color: var(--color-button-tertiary-outline);\n\n    &:hover:not(:disabled),\n    &:focus-visible:not(:disabled) {\n      background-color: transparent;\n      border-color: var(--color-button-tertiary-hover-bg);\n      color: var(--color-button-tertiary-hover-text);\n    }\n\n    &:active:not(:disabled) {\n      background-color: transparent;\n      border-color: var(--color-button-tertiary-active-outline);\n      color: var(--color-button-tertiary-active-text);\n    }\n  }\n\n  // Overrides for checkbox styling\n  & .ant-checkbox-input {\n    &:hover,\n    &:focus-visible {\n      border: 1px solid white;\n    }\n  }\n\n  & .ant-checkbox.ant-checkbox-checked {\n    background-color: var(--color-checkbox-bg);\n  }\n\n  .ant-checkbox-inner {\n    background-color: transparent !important;\n  }\n\n  // Add outlines to modals and dropdowns\n  & .ant-select-dropdown,\n  & .ant-dropdown-menu,\n  & .ant-modal-content {\n    border: 1px solid var(--color-modal-border);\n  }\n\n  // Force active/hovered text to be white instead of grey for better contrast\n  & .ant-dropdown-menu-item-active {\n    color: var(--color-menu-hover-text);\n  }\n\n  // Remove padding in dropdown menus and make items reactangular + flush with the edge\n  & .ant-dropdown-menu,\n  & .ant-select-dropdown {\n    padding: 0;\n    overflow: hidden;\n\n    & .ant-dropdown-menu-item,\n    & .ant-select-item {\n      border-radius: 0;\n    }\n  }\n"])), function (_ref) {
   var $theme = _ref.$theme;
-  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      /* Component and color variables. */\n      // TODO: Fix inconsistent use of border vs. outline\n      // TODO: Remove variables that aren't used in other CSS files. These should be set directly\n      // from the $theme object to reduce unnecessary variables.\n      --color-text-link: ", ";\n      --color-text-header: ", ";\n      --color-text-section: ", ";\n      --color-text-body: ", ";\n      --color-text-error: ", ";\n\n      --color-text-selection-bg: ", ";\n      --color-text-selection-text: ", ";\n\n      --color-header-title: ", ";\n      --color-header-hover-title: ", ";\n      --color-header-bg: ", ";\n      --color-header-border: ", ";\n\n      --color-button-primary-bg: ", ";\n      --color-button-primary-text: ", ";\n      --color-button-primary-hover-bg: ", ";\n      --color-button-primary-active-bg: ", ";\n      --color-button-primary-active-outline: ", ";\n      --color-button-primary-disabled-bg: ", ";\n\n      --color-button-link-text: ", ";\n\n      --color-button-secondary-bg: ", ";\n      --color-button-secondary-text: ", ";\n      --color-button-secondary-outline: ", ";\n\n      --color-button-tertiary-bg: transparent;\n      --color-button-tertiary-text: ", ";\n      --color-button-tertiary-outline: ", ";\n      --color-button-tertiary-hover-outline: ", ";\n      --color-button-tertiary-hover-text: ", ";\n      --color-button-tertiary-active-outline: ", ";\n      --color-button-tertiary-active-text: ", ";\n\n      --color-button-icon-disabled-text: ", ";\n      --color-button-icon-disabled-text: ", ";\n      --color-button-icon-activated-text: ", ";\n      --color-button-icon-activated-bg: ", ";\n      --color-button-icon-activated-outline: ", ";\n\n      --color-toolbar-button-bg: ", ";\n\n      --color-controlpanel-bg: ", ";\n      --color-controlpanel-border: ", ";\n      --color-controlpanel-section-text: ", ";\n      --color-controlpanel-text: ", ";\n      --color-controlpanel-section-bg: ", ";\n      --color-controlpanel-drawer-bg: ", ";\n      --color-controlpanel-ramp-slider: ", ";\n\n      --color-landingpage-bg: ", ";\n      --color-landingpage-bg-alt: ", ";\n      --color-landingpage-text: ", ";\n      --color-landingpage-banner-highlight-bg: ", ";\n\n      --color-statusflag-border: ", ";\n      --color-statusflag-text: ", ";\n\n      --color-layout-dividers: ", ";\n\n      --color-modal-border: ", ";\n\n      --color-menu-hover-text: ", ";\n      --color-menu-selected-text: ", ";\n\n      --color-checkbox-bg: ", ";\n\n      --font-family: ", ";\n    "])), $theme.colors.text.link, $theme.colors.text.header, $theme.colors.text.section, $theme.colors.text.body, $theme.colors.text.error, $theme.colors.text.selectionBg, $theme.colors.text.selectionText, $theme.colors.header.title, $theme.colors.header.hoverTitle, $theme.colors.header.bg, $theme.colors.header.border, $theme.colors.button.primary.bg, $theme.colors.button.primary.text, $theme.colors.button.primary.hoverBg, $theme.colors.button.primary.hoverBg, $theme.colors.button.primary.activeOutline, $theme.colors.button.primary.disabledBg, $theme.colors.button.link.text, $theme.colors.button.secondary.bg, $theme.colors.button.secondary.text, $theme.colors.button.secondary.outline, $theme.colors.button.tertiary.text, $theme.colors.button.tertiary.outline, $theme.colors.button.tertiary.hoverOutline, $theme.colors.button.tertiary.hoverText, $theme.colors.button.tertiary.activeOutline, $theme.colors.button.tertiary.hoverText, $theme.colors.button.tertiary.disabledText, $theme.colors.button.tertiary.disabledText, $theme.colors.button.tertiary.activatedText, $theme.colors.button.tertiary.activatedBg, $theme.colors.button.tertiary.activatedOutline, $theme.colors.toolbar.buttonBg, $theme.colors.controlPanel.bg, $theme.colors.controlPanel.border, $theme.colors.controlPanel.sectionText, $theme.colors.controlPanel.text, $theme.colors.controlPanel.sectionBg, $theme.colors.controlPanel.drawerBg, $theme.colors.controlPanel.rampSlider, $theme.colors.landingPage.bg, $theme.colors.landingPage.bgAlt, $theme.colors.landingPage.text, $theme.colors.landingPage.bannerBg, $theme.colors.statusFlag.border, $theme.colors.statusFlag.text, $theme.colors.layout.dividers, $theme.colors.modal.border, $theme.colors.menu.hoverText, $theme.colors.menu.selectedText, $theme.colors.checkbox.bg, $theme.fonts.family);
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      /* Component and color variables. */\n      // TODO: Fix inconsistent use of border vs. outline\n      // TODO: Remove variables that aren't used in other CSS files. These should be set directly\n      // from the $theme object to reduce unnecessary variables.\n      --color-text-link: ", ";\n      --color-text-header: ", ";\n      --color-text-section: ", ";\n      --color-text-body: ", ";\n      --color-text-error: ", ";\n\n      --color-text-selection-bg: ", ";\n      --color-text-selection-text: ", ";\n\n      --color-header-title: ", ";\n      --color-header-hover-title: ", ";\n      --color-header-bg: ", ";\n      --color-header-border: ", ";\n\n      --color-button-primary-bg: ", ";\n      --color-button-primary-text: ", ";\n      --color-button-primary-hover-bg: ", ";\n      --color-button-primary-active-bg: ", ";\n      --color-button-primary-active-outline: ", ";\n      --color-button-primary-disabled-bg: ", ";\n\n      --color-button-link-text: ", ";\n\n      --color-button-secondary-bg: ", ";\n      --color-button-secondary-text: ", ";\n      --color-button-secondary-outline: ", ";\n\n      --color-button-tertiary-bg: transparent;\n      --color-button-tertiary-text: ", ";\n      --color-button-tertiary-outline: ", ";\n      --color-button-tertiary-hover-outline: ", ";\n      --color-button-tertiary-hover-text: ", ";\n      --color-button-tertiary-active-outline: ", ";\n      --color-button-tertiary-active-text: ", ";\n\n      --color-button-icon-disabled-text: ", ";\n      --color-button-icon-disabled-text: ", ";\n      --color-button-icon-activated-text: ", ";\n      --color-button-icon-activated-bg: ", ";\n      --color-button-icon-activated-outline: ", ";\n\n      --color-toolbar-button-bg: ", ";\n\n      --color-controlpanel-bg: ", ";\n      --color-controlpanel-border: ", ";\n      --color-controlpanel-section-text: ", ";\n      --color-controlpanel-text: ", ";\n      --color-controlpanel-section-bg: ", ";\n      --color-controlpanel-drawer-bg: ", ";\n      --color-controlpanel-ramp-slider: ", ";\n      --color-controlpanel-isovalue-slider: ", ";\n\n      --color-landingpage-bg: ", ";\n      --color-landingpage-bg-alt: ", ";\n      --color-landingpage-text: ", ";\n      --color-landingpage-banner-highlight-bg: ", ";\n\n      --color-statusflag-border: ", ";\n      --color-statusflag-text: ", ";\n\n      --color-layout-dividers: ", ";\n\n      --color-modal-border: ", ";\n\n      --color-menu-hover-text: ", ";\n      --color-menu-selected-text: ", ";\n\n      --color-checkbox-bg: ", ";\n\n      --font-family: ", ";\n    "])), $theme.colors.text.link, $theme.colors.text.header, $theme.colors.text.section, $theme.colors.text.body, $theme.colors.text.error, $theme.colors.text.selectionBg, $theme.colors.text.selectionText, $theme.colors.header.title, $theme.colors.header.hoverTitle, $theme.colors.header.bg, $theme.colors.header.border, $theme.colors.button.primary.bg, $theme.colors.button.primary.text, $theme.colors.button.primary.hoverBg, $theme.colors.button.primary.hoverBg, $theme.colors.button.primary.activeOutline, $theme.colors.button.primary.disabledBg, $theme.colors.button.link.text, $theme.colors.button.secondary.bg, $theme.colors.button.secondary.text, $theme.colors.button.secondary.outline, $theme.colors.button.tertiary.text, $theme.colors.button.tertiary.outline, $theme.colors.button.tertiary.hoverOutline, $theme.colors.button.tertiary.hoverText, $theme.colors.button.tertiary.activeOutline, $theme.colors.button.tertiary.hoverText, $theme.colors.button.tertiary.disabledText, $theme.colors.button.tertiary.disabledText, $theme.colors.button.tertiary.activatedText, $theme.colors.button.tertiary.activatedBg, $theme.colors.button.tertiary.activatedOutline, $theme.colors.toolbar.buttonBg, $theme.colors.controlPanel.bg, $theme.colors.controlPanel.border, $theme.colors.controlPanel.sectionText, $theme.colors.controlPanel.text, $theme.colors.controlPanel.sectionBg, $theme.colors.controlPanel.drawerBg, $theme.colors.controlPanel.rampSlider, $theme.colors.controlPanel.isovalueSlider, $theme.colors.landingPage.bg, $theme.colors.landingPage.bgAlt, $theme.colors.landingPage.text, $theme.colors.landingPage.bannerBg, $theme.colors.statusFlag.border, $theme.colors.statusFlag.text, $theme.colors.layout.dividers, $theme.colors.modal.border, $theme.colors.menu.hoverText, $theme.colors.menu.selectedText, $theme.colors.checkbox.bg, $theme.fonts.family);
 });
 
 /**