@aics/vole-app 2.11.0

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

@@ -0,0 +1,180 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+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 _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 _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { Button, Collapse, Dropdown, Flex, Tooltip } from "antd";
+import React from "react";
+import { PRESET_COLOR_MAP } from "../../shared/constants";
+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";
+  ControlTab[ControlTab["Advanced"] = 1] = "Advanced";
+  ControlTab[ControlTab["Metadata"] = 2] = "Metadata";
+  return ControlTab;
+}(ControlTab || {});
+var ControlTabNames = _defineProperty(_defineProperty(_defineProperty({}, ControlTab.Channels, "Channel Settings"), ControlTab.Advanced, "Advanced Settings"), ControlTab.Metadata, "Metadata");
+function ControlPanel(props) {
+  var _React$useState = React.useState(ControlTab.Channels),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    tab = _React$useState2[0],
+    _setTab = _React$useState2[1];
+  var setTab = function setTab(newTab) {
+    _setTab(newTab);
+    props.setCollapsed(false);
+  };
+  var controlPanelContainerRef = React.useRef(null);
+  var getDropdownContainer = controlPanelContainerRef.current ? function () {
+    return controlPanelContainerRef.current;
+  } : undefined;
+  var viewerChannelSettings = props.viewerChannelSettings,
+    visibleControls = props.visibleControls,
+    hasImage = props.hasImage;
+
+  // TODO key is a number, but MenuInfo assumes keys will always be strings
+  //   if future versions of antd make this type more permissive, remove ugly double-cast
+  var makeTurnOnPresetFn = function makeTurnOnPresetFn(_ref) {
+    var key = _ref.key;
+    return props.onApplyColorPresets(PRESET_COLOR_MAP[key].colors);
+  };
+  var renderColorPresetsDropdown = function renderColorPresetsDropdown() {
+    var dropDownMenuProps = {
+      items: PRESET_COLOR_MAP.map(function (preset, index) {
+        return {
+          key: index,
+          label: preset.name
+        };
+      }),
+      onClick: makeTurnOnPresetFn
+    };
+    return /*#__PURE__*/React.createElement("div", {
+      className: "color-presets-dropdown"
+    }, /*#__PURE__*/React.createElement(Dropdown, {
+      trigger: ["click"],
+      menu: dropDownMenuProps,
+      getPopupContainer: getDropdownContainer
+    }, /*#__PURE__*/React.createElement(Button, null, /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center",
+        gap: "4px"
+      }
+    }, "Apply palette", /*#__PURE__*/React.createElement(ViewerIcon, {
+      type: "dropdownArrow",
+      style: {
+        fontSize: "14px"
+      }
+    })))));
+  };
+  var renderTab = function renderTab(thisTab, icon) {
+    return /*#__PURE__*/React.createElement(Tooltip, _extends({
+      title: ControlTabNames[thisTab],
+      placement: "right"
+    }, !props.collapsed && {
+      open: false
+    }), /*#__PURE__*/React.createElement(Button, {
+      className: tab === thisTab ? "ant-btn-icon-only btn-tabactive" : "ant-btn-icon-only",
+      onClick: function onClick() {
+        return setTab(thisTab);
+      },
+      icon: typeof icon === "string" ? icon : undefined
+    }, _typeof(icon) === "object" && icon));
+  };
+  var renderAdvancedSettings = function renderAdvancedSettings() {
+    var items = [{
+      key: 0,
+      label: "Rendering adjustments",
+      children: /*#__PURE__*/React.createElement(GlobalVolumeControls, {
+        imageName: props.imageName,
+        pixelSize: props.pixelSize,
+        visibleControls: visibleControls
+      })
+    }];
+    var showCustomize = visibleControls.backgroundColorPicker || visibleControls.boundingBoxColorPicker;
+    if (showCustomize) {
+      items.push({
+        key: 1,
+        label: "Customize",
+        children: /*#__PURE__*/React.createElement(CustomizeWidget, {
+          visibleControls: props.visibleControls
+        })
+      });
+    }
+    return /*#__PURE__*/React.createElement(Flex, {
+      gap: 10,
+      vertical: true
+    }, /*#__PURE__*/React.createElement(Collapse, {
+      bordered: false,
+      defaultActiveKey: showCustomize ? [0, 1] : 0,
+      items: items
+    }), /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: "0 10px",
+        width: "fit-content"
+      }
+    }, /*#__PURE__*/React.createElement(Tooltip, {
+      trigger: ["hover", "focus"],
+      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
+    }, "Clear all settings"))));
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "control-panel-col-container",
+    ref: controlPanelContainerRef
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "control-panel-tab-col",
+    style: {
+      flex: "0 0 50px"
+    }
+  }, /*#__PURE__*/React.createElement(Button, {
+    className: "ant-btn-icon-only btn-collapse" + (props.collapsed ? " btn-collapse-collapsed" : ""),
+    onClick: function onClick() {
+      return props.setCollapsed(!props.collapsed);
+    }
+  }, /*#__PURE__*/React.createElement(ViewerIcon, {
+    type: "closePanel"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "tab-divider"
+  }), renderTab(ControlTab.Channels, /*#__PURE__*/React.createElement(ViewerIcon, {
+    type: "channels"
+  })), renderTab(ControlTab.Advanced, /*#__PURE__*/React.createElement(ViewerIcon, {
+    type: "preferences"
+  })), props.visibleControls.metadataViewer && renderTab(ControlTab.Metadata, /*#__PURE__*/React.createElement(ViewerIcon, {
+    type: "metadata"
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "control-panel-col",
+    style: {
+      flex: "0 0 450px"
+    }
+  }, /*#__PURE__*/React.createElement("h2", {
+    className: "control-panel-title"
+  }, ControlTabNames[tab]), visibleControls.colorPresetsDropdown && tab === ControlTab.Channels && renderColorPresetsDropdown(), hasImage && /*#__PURE__*/React.createElement("div", {
+    className: "channel-rows-list"
+  }, tab === ControlTab.Channels && /*#__PURE__*/React.createElement(ChannelsWidget, {
+    channelDataChannels: props.channelDataChannels,
+    channelGroupedByType: props.channelGroupedByType,
+    saveIsosurface: props.saveIsosurface,
+    onColorChangeComplete: props.onColorChangeComplete,
+    onApplyColorPresets: props.onApplyColorPresets,
+    filterFunc: props.filterFunc,
+    viewerChannelSettings: viewerChannelSettings
+  }), tab === ControlTab.Advanced && renderAdvancedSettings(), tab === ControlTab.Metadata && /*#__PURE__*/React.createElement(MetadataViewer, {
+    metadata: props.getMetadata()
+  }))));
+}
+export default connectToViewerState(ControlPanel, ["resetToDefaultViewerState"]);

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

@@ -0,0 +1,169 @@
+.control-panel-col-container{
+  display:flex;
+  height:100%;
+}
+
+.control-panel-col-container .control-panel-tab-col,
+  .control-panel-col-container .control-panel-col{
+    border-right:1px solid var(--color-controlpanel-border);
+  }
+
+.control-panel-col-container .control-panel-tab-col{
+    text-align:center;
+  }
+
+.control-panel-col-container .control-panel-tab-col .ant-btn{
+      margin-top:12px;
+      background-color:transparent;
+      border:1px solid transparent;
+      color:var(--color-button-tertiary-text);
+    }
+
+.control-panel-col-container .control-panel-tab-col .ant-btn:not([disabled]).btn-tabactive{
+          color:var(--color-button-icon-activated-text);
+          background-color:var(--color-button-icon-activated-bg);
+          border-color:var(--color-button-icon-activated-outline);
+        }
+
+.control-panel-col-container .control-panel-tab-col .ant-btn:not([disabled]):hover,
+        .control-panel-col-container .control-panel-tab-col .ant-btn:not([disabled]):focus-visible{
+          color:var(--color-button-icon-activated-text);
+          background-color:var(--color-button-primary-hover-bg);
+          border-color:var(--color-button-icon-activated-outline);
+        }
+
+.control-panel-col-container .control-panel-tab-col .btn-collapse svg{
+        transform:rotate(180deg);
+        transition:transform 0.2s linear;
+      }
+
+.control-panel-col-container .control-panel-tab-col .btn-collapse.btn-collapse-collapsed svg{
+        transform:rotate(0deg);
+      }
+
+.control-panel-col-container .control-panel-tab-col .tab-divider{
+      width:70%;
+      margin:12px 15% 0;
+      border-bottom:1px solid var(--color-controlpanel-border);
+    }
+
+.control-panel-col-container .control-panel-col{
+    flex:1 auto;
+    max-width:540px;
+    overflow-y:scroll;
+    scrollbar-width:none;
+  }
+
+.control-panel-col-container .control-panel-col::-webkit-scrollbar{
+      display:none;
+    }
+
+.control-panel-col-container .control-panel-col .control-panel-title{
+      margin:16px;
+      max-height:24px;
+      font-size:1.4em;
+    }
+
+.control-panel-col-container .control-panel-col .color-presets-dropdown{
+      margin:0 16px 16px;
+    }
+
+.control-panel-col-container .control-panel-col .channel-rows-list{
+      border-top:1px solid var(--color-controlpanel-border);
+    }
+
+.control-panel-col-container .control-panel-col .channel-rows-list .ant-list-item-meta{
+        align-items:center;
+      }
+
+.control-panel-col-container .control-panel-col .channel-rows-list .ant-list-item-meta .ant-list-item-meta-title{
+          margin:0;
+        }
+
+.control-panel-col-container .control-panel-col .channel-rows-list .ant-checkbox-wrapper:hover .ant-checkbox-inner{
+        border-color:white;
+      }
+
+.control-panel-col-container .control-panel-col .channel-rows-list .channel-visibility-controls,
+      .control-panel-col-container .control-panel-col .channel-rows-list .ant-collapse-extra{
+        width:40%;
+        display:flex;
+      }
+
+.control-panel-col-container .control-panel-col .channel-rows-list .channel-visibility-controls .ant-checkbox-wrapper, .control-panel-col-container .control-panel-col .channel-rows-list .ant-collapse-extra .ant-checkbox-wrapper{
+          flex:4;
+        }
+
+.control-panel-col-container .control-panel-col .channel-rows-list .ant-collapse-content-box{
+        padding:0 16px;
+      }
+
+.control-panel-col-container .control-panel-col .ant-collapse{
+      background-color:var(--color-controlpanel-bg);
+    }
+
+.control-panel-col-container .control-panel-col .ant-collapse .ant-collapse-header{
+        padding:13px 16px;
+        background-color:var(--color-controlpanel-section-bg);
+      }
+
+.control-panel-col-container .control-panel-col .noUi-horizontal .noUi-handle{
+    box-shadow:none;
+    cursor:pointer;
+    pointer-events:inherit;
+    background-color:#a0a0a0;
+    top:0px;
+    left:100%;
+    z-index:1;
+    width:8px;
+    height:8px;
+    border:none;
+    border-radius:0;
+    transform:translate(-50%, calc(-100% - 4px));
+}
+
+.control-panel-col-container .control-panel-col .noUi-handle::before{
+    display:none;
+    content:none;
+}
+
+.control-panel-col-container .control-panel-col .noUi-handle::after{
+    background-color:inherit;
+    width:8px;
+    height:8px;
+    top:0;
+    left:0;
+    transform:matrix(0.5, 0.5, -0.5, 0.5, 0, 4);
+    content:"";
+}
+
+.control-panel-col-container .control-panel-col .noUi-touch-area{
+    padding:8px;
+    margin-top:-4px;
+    margin-left:-4px;
+}
+
+.control-panel-col-container .control-panel-col .noUi-connect{
+    background-color:#a0a0a0;
+}
+
+.control-panel-col-container .control-panel-col .noUi-target.noUi-ltr.noUi-horizontal{
+    background-color:#a0a0a0;
+}
+
+.control-panel-col-container .control-panel-col .noUi-horizontal{
+    height:2px;
+}
+
+.control-panel-col-container .control-panel-col .noUi-target{
+    border:none;
+    box-shadow:none;
+}
+
+.control-panel-col-container .control-panel-col .noUi-tooltip{
+    border:none;
+    background-color:transparent;
+    color:inherit;
+    font-size:10px;
+    top:calc(100% + 3px);
+}

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

@@ -0,0 +1,46 @@
+import React from "react";
+import ColorPicker from "./ColorPicker";
+import { colorArrayToObject, colorObjectToArray } from "../shared/utils/colorRepresentations";
+import { connectToViewerState } from "./ViewerStateProvider";
+var ColorPickerRow = function ColorPickerRow(_ref) {
+  var color = _ref.color,
+    _onColorChange = _ref.onColorChange,
+    children = _ref.children;
+  return /*#__PURE__*/React.createElement("div", {
+    style: STYLES.colorPickerRow
+  }, /*#__PURE__*/React.createElement("span", {
+    style: STYLES.colorPicker
+  }, /*#__PURE__*/React.createElement(ColorPicker, {
+    color: colorArrayToObject(color),
+    onColorChange: function onColorChange(color) {
+      return _onColorChange(colorObjectToArray(color));
+    },
+    width: 18,
+    disableAlpha: true
+  })), /*#__PURE__*/React.createElement("span", null, children));
+};
+var CustomizeWidget = function CustomizeWidget(props) {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, props.visibleControls.backgroundColorPicker && /*#__PURE__*/React.createElement(ColorPickerRow, {
+    color: props.backgroundColor,
+    onColorChange: function onColorChange(color) {
+      return props.changeViewerSetting("backgroundColor", color);
+    }
+  }, "Background color"), props.visibleControls.boundingBoxColorPicker && /*#__PURE__*/React.createElement(ColorPickerRow, {
+    color: props.boundingBoxColor,
+    onColorChange: function onColorChange(color) {
+      return props.changeViewerSetting("boundingBoxColor", color);
+    }
+  }, "Bounding box color", !props.showBoundingBox && /*#__PURE__*/React.createElement("i", null, " - bounding box turned off")));
+};
+var STYLES = {
+  colorPickerRow: {
+    padding: "14px 0",
+    display: "flex",
+    borderBottom: "1px solid #6e6e6e",
+    color: "var(--color-controlpanel-text)"
+  },
+  colorPicker: {
+    marginRight: "16px"
+  }
+};
+export default connectToViewerState(CustomizeWidget, ["showBoundingBox", "backgroundColor", "boundingBoxColor", "changeViewerSetting"]);

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

@@ -0,0 +1,144 @@
+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); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+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 _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { VolumeLoadErrorType } from "@aics/vole-core";
+import { RightOutlined } from "@ant-design/icons";
+import { Alert, Button } from "antd";
+import React from "react";
+import { useConstructor } from "../../shared/utils/hooks";
+import "./styles.css";
+var IssueLink = function IssueLink(_ref) {
+  var bug = _ref.bug,
+    children = _ref.children;
+  return /*#__PURE__*/React.createElement("a", {
+    href: "https://github.com/allen-cell-animated/vole-app/issues/new".concat(bug ? "?template=bug_report.md" : "/choose"),
+    target: "_blank",
+    rel: "noreferrer noopener"
+  }, children);
+};
+var UNKNOWN_ERROR_DESCRIPTION = /*#__PURE__*/React.createElement(React.Fragment, null, "An unknown error occurred. Check the browser console (F12) for more details. If this looks like a bug,", " ", /*#__PURE__*/React.createElement(IssueLink, {
+  bug: true
+}, "send us a bug report here"), ".");
+var ERROR_TYPE_DESCRIPTIONS = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, VolumeLoadErrorType.UNKNOWN, /*#__PURE__*/React.createElement(React.Fragment, null, "An unknown error occurred while loading volume data. Check the browser console (F12) for more details. If this looks like a bug, ", /*#__PURE__*/React.createElement(IssueLink, {
+  bug: true
+}, "send us a bug report here"), ".")), VolumeLoadErrorType.NOT_FOUND, /*#__PURE__*/React.createElement(React.Fragment, null, "The viewer was unable to find any volume data at the specified location. Check that the provided URL is correct and try again.")), VolumeLoadErrorType.TOO_LARGE, /*#__PURE__*/React.createElement(React.Fragment, null, "No scale level is available for this volume which fits within our maximum GPU memory footprint. This maximum is tuned to ensure compatibility with the majority of browsers. If you're trying to load your own OME-Zarr dataset, you may be able to open this volume by including a lower scale level.")), VolumeLoadErrorType.LOAD_DATA_FAILED, /*#__PURE__*/React.createElement(React.Fragment, null, "The viewer was able to find a source of volume data at the specified location, but encountered an error while trying to load it. Check that your dataset is complete and properly formatted. You can also check the browser console (F12) for more details about this error. If it looks like a problem on our end,", " ", /*#__PURE__*/React.createElement(IssueLink, {
+  bug: true
+}, "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)) || "Unknown error";
+};
+var getErrorDescription = function getErrorDescription(error) {
+  var _ERROR_TYPE_DESCRIPTI2;
+  var type = error.type;
+  if (!type) {
+    return UNKNOWN_ERROR_DESCRIPTION;
+  }
+  return (_ERROR_TYPE_DESCRIPTI2 = ERROR_TYPE_DESCRIPTIONS[type]) !== null && _ERROR_TYPE_DESCRIPTI2 !== void 0 ? _ERROR_TYPE_DESCRIPTI2 : UNKNOWN_ERROR_DESCRIPTION;
+};
+var ErrorAlert = function ErrorAlert(_ref2) {
+  var errors = _ref2.errors,
+    _ref2$firstErrorCount = _ref2.firstErrorCount,
+    firstErrorCount = _ref2$firstErrorCount === void 0 ? 0 : _ref2$firstErrorCount,
+    _afterClose = _ref2.afterClose,
+    onSkipError = _ref2.onSkipError;
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    showDetails = _React$useState2[0],
+    setShowDetails = _React$useState2[1];
+  var _React$useState3 = React.useState(0),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    errorsSeenCount = _React$useState4[0],
+    setErrorsSeenCount = _React$useState4[1];
+  var error = Array.isArray(errors) ? errors[0] : errors;
+  var errorMessage = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, getErrorTitle(error) + (firstErrorCount > 1 ? " (".concat(firstErrorCount, ")") : ""), " ", /*#__PURE__*/React.createElement(Button, {
+    type: "text",
+    onClick: function onClick() {
+      return setShowDetails(!showDetails);
+    }
+  }, showDetails ? "Show less info" : "Show more info")), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: showDetails ? undefined : "none"
+    }
+  }, getErrorDescription(error)));
+  var skipErrorButton = Array.isArray(errors) && errors.length > 1 && /*#__PURE__*/React.createElement(Button, {
+    type: "text",
+    onClick: function onClick() {
+      setErrorsSeenCount(function (count) {
+        return count + 1;
+      });
+      onSkipError === null || onSkipError === void 0 || onSkipError();
+    }
+  }, "Error ", errorsSeenCount + 1, " of ", errors.length + errorsSeenCount, " ", /*#__PURE__*/React.createElement(RightOutlined, null));
+  return /*#__PURE__*/React.createElement(Alert, {
+    showIcon: true,
+    type: "error",
+    className: "load-error-alert",
+    message: errorMessage,
+    closable: true,
+    afterClose: function afterClose() {
+      setErrorsSeenCount(0);
+      _afterClose === null || _afterClose === void 0 || _afterClose();
+    },
+    action: skipErrorButton
+  });
+};
+export var useErrorAlert = function useErrorAlert() {
+  var _React$useState5 = React.useState([]),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    errorList = _React$useState6[0],
+    setErrorList = _React$useState6[1];
+  // Keep track of which errors have been seen and how many times
+  var seenErrors = useConstructor(function () {
+    return new Map();
+  });
+  var _React$useState7 = React.useState([]),
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    errorCounts = _React$useState8[0],
+    setErrorCounts = _React$useState8[1];
+  var addError = React.useCallback(function (error) {
+    var _seenErrors$get;
+    console.error(error);
+    var errorTitle = getErrorTitle(error);
+    var errorSeenCount = ((_seenErrors$get = seenErrors.get(errorTitle)) !== null && _seenErrors$get !== void 0 ? _seenErrors$get : 0) + 1;
+    setErrorList(function (prev) {
+      return [].concat(_toConsumableArray(prev), [error]);
+    });
+    setErrorCounts(function (prev) {
+      return [].concat(_toConsumableArray(prev), [errorSeenCount]);
+    });
+    seenErrors.set(errorTitle, errorSeenCount);
+  }, []);
+  var onSkipError = React.useCallback(function () {
+    setErrorList(function (prev) {
+      return prev.slice(1);
+    });
+    setErrorCounts(function (prev) {
+      return prev.slice(1);
+    });
+  }, []);
+  var afterClose = React.useCallback(function () {
+    setErrorList([]);
+    setErrorCounts([]);
+  }, []);
+  var errCount = errorCounts[0];
+  var alertComponent = errorList.length > 0 && /*#__PURE__*/React.createElement(ErrorAlert, {
+    errors: errorList,
+    firstErrorCount: errCount,
+    onSkipError: onSkipError,
+    afterClose: afterClose
+  });
+  return [alertComponent, addError];
+};
+export default ErrorAlert;

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

@@ -0,0 +1,22 @@
+.load-error-alert{
+  position:fixed;
+  bottom:30px;
+  left:30px;
+  width:40vw;
+  align-items:start;
+  z-index:5000;
+  border-color:#dc4446;
+  padding:12px 30px;
+}
+  .load-error-alert .ant-alert-icon,
+  .load-error-alert .ant-alert-close-icon,
+  .load-error-alert .ant-alert-message div{
+    min-height:24px;
+  }
+  .load-error-alert .ant-btn-text{
+    color:var(--color-text-link);
+  }
+  .load-error-alert .ant-alert-message div:first-child{
+    color:var(--color-text-section);
+    font-weight:600;
+  }

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

@@ -0,0 +1,38 @@
+import React from "react";
+import { Checkbox } from "antd";
+import SliderRow from "./shared/SliderRow";
+import { connectToViewerState } from "./ViewerStateProvider";
+var GlobalVolumeControls = function GlobalVolumeControls(props) {
+  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);
+    };
+    return /*#__PURE__*/React.createElement(SliderRow, {
+      label: label,
+      start: start,
+      max: max,
+      onUpdate: onUpdate
+    });
+  };
+  var showControls = props.visibleControls,
+    maskAlpha = props.maskAlpha,
+    brightness = props.brightness,
+    density = props.density,
+    levels = props.levels;
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      paddingTop: 18,
+      paddingBottom: 22
+    }
+  }, showControls.alphaMaskSlider && createSliderRow("mask cell", maskAlpha, 100, "maskAlpha"), showControls.brightnessSlider && createSliderRow("brightness", brightness, 100, "brightness"), showControls.densitySlider && createSliderRow("density", density, 100, "density"), showControls.levelsSliders && createSliderRow("levels", levels, 255, "levels"), showControls.interpolationControl && /*#__PURE__*/React.createElement(SliderRow, {
+    label: "interpolate"
+  }, /*#__PURE__*/React.createElement(Checkbox, {
+    checked: props.interpolationEnabled,
+    onChange: function onChange(_ref) {
+      var target = _ref.target;
+      return props.changeViewerSetting("interpolationEnabled", target.checked);
+    }
+  })));
+};
+export default connectToViewerState(GlobalVolumeControls, ["maskAlpha", "brightness", "density", "levels", "interpolationEnabled", "changeViewerSetting"]);