@aics/vole-app 3.2.3 → 3.3.1

package/LICENSE

@@ -1,33 +1,29 @@
-Allen Institute Software License – This software license is the 2-clause BSD 
-license plus clause a third clause that prohibits redistribution and use for 
-commercial purposes without further permission. 
+BSD 3-Clause License
 
-Copyright © 2020. Allen Institute.  All rights reserved.
+Copyright (c) 2017-2026, Allen Institute
+All rights reserved.
 
-Redistribution and use in source and binary forms, with or without 
+Redistribution and use in source and binary forms, with or without
 modification, are permitted provided that the following conditions are met:
 
-1. Redistributions of source code must retain the above copyright notice, this 
-list of conditions and the following disclaimer.
+1. Redistributions of source code must retain the above copyright notice, this
+   list of conditions and the following disclaimer.
 
-2. Redistributions in binary form must reproduce the above copyright notice, 
-this list of conditions and the following disclaimer in the documentation 
-and/or other materials provided with the distribution.
+2. Redistributions in binary form must reproduce the above copyright notice,
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
 
-3. Redistributions and use for commercial purposes are not permitted without 
-the Allen Institute’s written permission. For purposes of this license, 
-commercial purposes are the incorporation of the Allen Institute's software 
-into anything for which you will charge fees or other compensation or use of 
-the software to perform a commercial service for a third party. Contact 
-terms@alleninstitute.org for commercial licensing opportunities.
+3. Neither the name of the copyright holder nor the names of its
+   contributors may be used to endorse or promote products derived from
+   this software without specific prior written permission.
 
-THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND 
-ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 
-WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 
-DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE 
-FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL 
-DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR 
-SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER 
-CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, 
-OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE 
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
 OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

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

@@ -54,7 +54,8 @@ var defaultVisibleControls = {
   resetCameraButton: true,
   showAxesButton: true,
   showBoundingBoxButton: true,
-  metadataViewer: true
+  metadataViewer: true,
+  scaleLevelControls: true
 };
 var defaultProps = {
   // rawData has a "dtype" which is expected to be "uint8", a "shape":[c,z,y,x] and a "buffer" which is a DataView
@@ -113,6 +114,7 @@ var App = function App(props) {
   var time = useViewerState(select("time"));
   var showAxes = useViewerState(select("showAxes"));
   var channelSettings = useViewerState(select("channelSettings"));
+  var changeViewerSetting = useViewerState(select("changeViewerSetting"));
   var changeChannelSetting = useViewerState(select("changeChannelSetting"));
   var applyColorPresets = useViewerState(select("applyColorPresets"));
   var resetToSavedState = useViewerState(select("resetToSavedViewerState"));
@@ -150,8 +152,8 @@ var App = function App(props) {
   var showError = (_props$showError = props.showError) !== null && _props$showError !== void 0 ? _props$showError : _showError;
   useEffect(function () {
     // Get notifications of loading errors which occur after the initial load, e.g. on time change or new channel load
-    view3d.setLoadErrorHandler(function (_vol, e) {
-      return showError(e);
+    view3d.setLoadErrorHandler(function (vol, e) {
+      return showError(e, vol);
     });
     return function () {
       return view3d.setLoadErrorHandler(undefined);
@@ -264,10 +266,12 @@ var App = function App(props) {
     _useState2 = _slicedToArray(_useState, 2),
     loadedScene = _useState2[0],
     setLoadedScene = _useState2[1];
-  var onChangeScene = useCallback(function (image, sceneIndex) {
+  var onChangeScene = useCallback(function (image, sceneIndex, loadSpec) {
+    changeViewerSetting("time", loadSpec.time);
     onImageTitleChange === null || onImageTitleChange === void 0 || onImageTitleChange(image.imageInfo.imageInfo.name);
     setLoadedScene(sceneIndex);
-  }, [onImageTitleChange]);
+    changeViewerSetting("scaleLevelIndex", image.imageInfo.multiscaleLevel);
+  }, [onImageTitleChange, changeViewerSetting]);
   var onChannelLoaded = useCallback(function (image, channelIndex, isInitialLoad) {
     // TODO this was once a search by name - is that still necessary or will
     // the index always be correct?
@@ -320,17 +324,17 @@ var App = function App(props) {
 
     // save the channel's new range for remapping next time
     channelRangesRef.current[channelIndex] = [thisChannel.rawMin, thisChannel.rawMax];
-    view3d.updateLuts(image);
+
+    // Note: updateLuts and updateActiveChannels are not called here because the
+    // channelVersion bump (via onChannelDataLoaded) will trigger ChannelUpdater
+    // effects that apply LUT/color settings and call updateLuts with the final state.
     view3d.onVolumeData(image, [channelIndex]);
     if (image.channelNames[channelIndex] === maskChannelName) {
       view3d.setVolumeChannelAsMask(image, channelIndex);
     }
-    if (image.isLoaded()) {
-      view3d.updateActiveChannels(image);
-    }
   }, [view3d, changeChannelSetting, maskChannelName, props.viewerChannelSettings]);
-  var onError = useCallback(function (error) {
-    showError(error);
+  var onError = useCallback(function (error, image) {
+    showError(error, image);
     onImageTitleChange === null || onImageTitleChange === void 0 || onImageTitleChange(undefined);
   }, [showError, onImageTitleChange]);
   var volume = useVolume(scenes, {
@@ -585,7 +589,9 @@ var App = function App(props) {
     resetCamera: resetCamera,
     downloadScreenshot: saveScreenshot,
     resetToSavedViewerState: resetToSavedViewerState,
-    visibleControls: visibleControls
+    visibleControls: visibleControls,
+    multiscaleDims: image === null || image === void 0 ? void 0 : image.imageInfo.imageInfo.multiscaleLevelDims,
+    multiscaleIndex: image === null || image === void 0 ? void 0 : image.imageInfo.multiscaleLevel
   }), /*#__PURE__*/React.createElement(CellViewerCanvasWrapper, {
     view3d: view3d,
     image: image,

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

@@ -287,7 +287,8 @@ var AxisClipSliders = function AxisClipSliders(props) {
     onChange: function onChange(_ref6) {
       var _ref7 = _slicedToArray(_ref6, 1),
         scene = _ref7[0];
-      return props.changeViewerSetting("scene", scene);
+      props.changeViewerSetting("scene", scene);
+      props.changeViewerSetting("useExactScaleLevel", false);
     }
   })))));
 };

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

@@ -139,14 +139,14 @@ var ChannelsWidget = function ChannelsWidget(props) {
   };
   var renderChannelRow = function renderChannelRow(channelIndex) {
     var channelName = channelNames[channelIndex];
-    return channelName ? /*#__PURE__*/React.createElement(ChannelsWidgetRow, {
+    return /*#__PURE__*/React.createElement(ChannelsWidgetRow, {
       key: channelIndex,
       index: channelIndex,
       channelDataForChannel: channelDataChannels[channelIndex],
       name: getDisplayName(channelName, channelIndex, viewerChannelSettings),
       onColorChangeComplete: props.onColorChangeComplete,
       saveIsosurface: props.saveIsosurface
-    }) : null;
+    });
   };
   var rows = channelDataChannels && Object.entries(channelGroupedByType).filter(function (_ref3) {
     var _ref4 = _slicedToArray(_ref3, 2),

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

@@ -1,4 +1,3 @@
-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."); }
@@ -38,10 +37,11 @@ function ControlPanel(props) {
   var resetToDefaultViewerState = useViewerState(select("resetToDefaultViewerState"));
   var singleChannelMode = useViewerState(select("singleChannelMode"));
   var changeViewerSetting = useViewerState(select("changeViewerSetting"));
-  var controlPanelContainerRef = React.useRef(null);
-  var getDropdownContainer = controlPanelContainerRef.current ? function () {
-    return controlPanelContainerRef.current;
-  } : undefined;
+  var containerRef = React.useRef(null);
+  var getDropdownContainer = function getDropdownContainer() {
+    var _containerRef$current;
+    return (_containerRef$current = containerRef.current) !== null && _containerRef$current !== void 0 ? _containerRef$current : document.body;
+  };
   var viewerChannelSettings = props.viewerChannelSettings,
     visibleControls = props.visibleControls,
     hasImage = props.hasImage;
@@ -98,12 +98,11 @@ function ControlPanel(props) {
     }, "Single channel mode"))));
   };
   var renderTab = function renderTab(thisTab, icon) {
-    return /*#__PURE__*/React.createElement(Tooltip, _extends({
+    return /*#__PURE__*/React.createElement(Tooltip, {
       title: ControlTabNames[thisTab],
       placement: "right"
-    }, !props.collapsed && {
-      open: false
-    }), /*#__PURE__*/React.createElement(Button, {
+    }, /*#__PURE__*/React.createElement(Button, {
+      "aria-label": ControlTabNames[thisTab],
       className: tab === thisTab ? "ant-btn-icon-only btn-tabactive" : "ant-btn-icon-only",
       onClick: function onClick() {
         return setTab(thisTab);
@@ -151,22 +150,27 @@ function ControlPanel(props) {
       onClick: resetToDefaultViewerState
     }, "Clear all settings"))));
   };
+  var collapseLabel = props.collapsed ? "Show panel" : "Hide panel";
   return /*#__PURE__*/React.createElement("div", {
     className: "control-panel-col-container",
-    ref: controlPanelContainerRef
+    ref: containerRef
   }, /*#__PURE__*/React.createElement("div", {
     className: "control-panel-tab-col",
     style: {
       flex: "0 0 50px"
     }
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    title: collapseLabel,
+    placement: "right"
   }, /*#__PURE__*/React.createElement(Button, {
+    "aria-label": collapseLabel,
     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", {
+  }))), /*#__PURE__*/React.createElement("div", {
     className: "tab-divider"
   }), renderTab(ControlTab.Channels, /*#__PURE__*/React.createElement(ViewerIcon, {
     type: "channels"

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

@@ -20,16 +20,16 @@
     }
 
 .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);
+          color:var(--color-button-icon-active-text);
+          background-color:var(--color-button-icon-active-bg);
+          border-color:var(--color-button-icon-active-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);
+          color:var(--color-button-icon-active-text);
           background-color:var(--color-button-primary-hover-bg);
-          border-color:var(--color-button-icon-activated-outline);
+          border-color:var(--color-button-icon-active-outline);
         }
 
 .control-panel-col-container .control-panel-tab-col .btn-collapse svg{

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

@@ -13,10 +13,11 @@ function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object
 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 { LeftOutlined, RightOutlined, WarningOutlined } from "@ant-design/icons";
 import { Alert, Button } from "antd";
 import React from "react";
 import { useConstructor } from "../../shared/utils/hooks";
+import { useViewerState } from "../../state/store";
 import "./styles.css";
 var IssueLink = function IssueLink(_ref) {
   var bug = _ref.bug,
@@ -32,113 +33,149 @@ var UNKNOWN_ERROR_DESCRIPTION = /*#__PURE__*/React.createElement(React.Fragment,
 }, "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, {
+}, "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 resolution level is available for this volume which fits within our maximum 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 resolution 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)) || typeof error === "string" && error || _typeof(error) === "object" && error !== null && error.title || "Unknown error";
 };
-var getErrorDescription = function getErrorDescription(error) {
+var getErrorDescription = function getErrorDescription(_ref2) {
   var _ERROR_TYPE_DESCRIPTI2;
+  var error = _ref2.error,
+    dims = _ref2.dims;
   var type = error.type;
   if (!type) {
     return _typeof(error) === "object" && error !== null && error.description || UNKNOWN_ERROR_DESCRIPTION;
   }
+  if (type === VolumeLoadErrorType.TOO_LARGE && useViewerState.getState().useExactScaleLevel) {
+    var dimsDetail = "";
+    if (Array.isArray(dims)) {
+      var _dims = _slicedToArray(dims, 5),
+        _t = _dims[0],
+        _c = _dims[1],
+        z = _dims[2],
+        y = _dims[3],
+        x = _dims[4];
+      dimsDetail = " (".concat(x, " x ").concat(y, " x ").concat(z, ")");
+    }
+    return /*#__PURE__*/React.createElement(React.Fragment, null, "The viewer cannot load this resolution level", dimsDetail, " within memory limits. Try again with a smaller resolution level.");
+  }
   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 ErrorAlert = function ErrorAlert(_ref3) {
+  var errors = _ref3.errors,
+    afterClose = _ref3.afterClose;
   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, {
+    errorIndex = _React$useState4[0],
+    setErrorIndex = _React$useState4[1];
+  var _React$useState5 = React.useState(false),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    flash = _React$useState6[0],
+    setFlash = _React$useState6[1];
+  var error = errors[errorIndex];
+  var infoStyle = {
+    display: showDetails ? undefined : "none"
+  };
+  React.useEffect(function () {
+    setErrorIndex(errors.length - 1);
+    setFlash(errors.length > 1);
+    window.setTimeout(function () {
+      return setFlash(false);
+    }, 100);
+  }, [errors]);
+  var cause = error.error.cause;
+  var msg = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "error-title"
+  }, getErrorTitle(error.error) + (error.count > 1 ? " (".concat(error.count, ")") : ""), " ", /*#__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"
+    style: infoStyle
+  }, getErrorDescription(error)), cause !== undefined && /*#__PURE__*/React.createElement("div", {
+    className: "error-cause",
+    style: infoStyle
+  }, "Caused by ", getErrorTitle(cause)));
+  var pageButton = undefined;
+  if (errors.length > 1) {
+    if (errorIndex === errors.length - 1) {
+      pageButton = /*#__PURE__*/React.createElement(Button, {
+        type: "text",
+        onClick: function onClick() {
+          return setErrorIndex(function (i) {
+            return i - 1;
+          });
+        }
+      }, /*#__PURE__*/React.createElement(LeftOutlined, null), " ", errors.length - 1, " previous error", errors.length > 2 ? "s" : "");
+    } else {
+      pageButton = /*#__PURE__*/React.createElement(React.Fragment, null, errorIndex > 0 && /*#__PURE__*/React.createElement(Button, {
+        type: "text",
+        onClick: function onClick() {
+          return setErrorIndex(function (i) {
+            return i - 1;
+          });
+        }
+      }, /*#__PURE__*/React.createElement(LeftOutlined, null)), "Error ", errorIndex + 1, " of ", errors.length, /*#__PURE__*/React.createElement(Button, {
+        type: "text",
+        onClick: function onClick() {
+          return setErrorIndex(function (i) {
+            return i + 1;
+          });
+        }
+      }, /*#__PURE__*/React.createElement(RightOutlined, null)));
     }
-  }, 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));
+  }
+  var alertClass = flash ? "load-error-alert error-flash" : "load-error-alert";
   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
+    type: "error",
+    icon: /*#__PURE__*/React.createElement(WarningOutlined, null),
+    className: alertClass,
+    message: msg,
+    afterClose: afterClose,
+    action: pageButton
   });
 };
 export var useErrorAlert = function useErrorAlert() {
-  var _React$useState5 = React.useState([]),
-    _React$useState6 = _slicedToArray(_React$useState5, 2),
-    errorList = _React$useState6[0],
-    setErrorList = _React$useState6[1];
+  var _React$useState7 = React.useState([]),
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    errors = _React$useState8[0],
+    setErrors = _React$useState8[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 addError = React.useCallback(function (error, image) {
     var _seenErrors$get;
     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]);
+    var count = ((_seenErrors$get = seenErrors.get(errorTitle)) !== null && _seenErrors$get !== void 0 ? _seenErrors$get : 0) + 1;
+    var imageInfo = image === null || image === void 0 ? void 0 : image.imageInfo.imageInfo;
+    var dims = imageInfo && imageInfo.multiscaleLevelDims[imageInfo.multiscaleLevel].shape;
+    setErrors(function (prev) {
+      return [].concat(_toConsumableArray(prev), [{
+        error: error,
+        count: count,
+        dims: dims
+      }]);
     });
-    setErrorCounts(function (prev) {
-      return [].concat(_toConsumableArray(prev), [errorSeenCount]);
-    });
-    seenErrors.set(errorTitle, errorSeenCount);
+    seenErrors.set(errorTitle, count);
   }, [seenErrors]);
-  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([]);
+    return setErrors([]);
   }, []);
-  var errCount = errorCounts[0];
-  var alertComponent = errorList.length > 0 && /*#__PURE__*/React.createElement(ErrorAlert, {
-    errors: errorList,
-    firstErrorCount: errCount,
-    onSkipError: onSkipError,
+  var alertNode = errors.length > 0 && /*#__PURE__*/React.createElement(ErrorAlert, {
+    errors: errors,
     afterClose: afterClose
   });
-  return [alertComponent, addError];
+  return [alertNode, addError];
 };
 export default ErrorAlert;

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

@@ -5,21 +5,54 @@
   width:40vw;
   align-items:start;
   z-index:5000;
-  border-color:#dc4446;
+  border-color:var(--color-text-error);
   padding:12px 30px;
+  color:var(--color-text-section);
 }
+
+  .load-error-alert.error-flash{
+    background-color:var(--color-text-error);
+  }
+
   .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{
+
+  .load-error-alert .ant-alert-close-icon{
+    margin-inline-start:14px;
+  }
+
+  .load-error-alert .ant-alert-action{
+    display:inline-flex;
+    align-items:center;
+    gap:4px;
+  }
+
+  .load-error-alert .ant-alert-action > button{
+      gap:4px;
+      border:none !important;
+    }
+
+  .load-error-alert .ant-btn-text,
+  .load-error-alert .ant-alert-action{
     color:var(--color-text-link);
   }
+
   .load-error-alert .ant-btn-text:hover{
-      color:#25affe !important;
-    }
-  .load-error-alert .ant-alert-message div:first-child{
-    color:var(--color-text-section);
-    font-weight:600;
+    color:#25affe !important;
+  }
+
+  .load-error-alert .anticon{
+    font-size:21px;
   }
+
+  .load-error-alert .ant-alert-message > div.error-title{
+      font-weight:600;
+    }
+
+  .load-error-alert .ant-alert-message > div.error-cause{
+      font-style:italic;
+      color:var(--color-text-body);
+    }