@aics/vole-app 3.3.0 → 3.4.0

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

@@ -13,7 +13,7 @@ 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";
@@ -40,115 +40,142 @@ 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) {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, "The viewer cannot load this resolution level within memory limits. Try again with a smaller resolution level.");
+    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;
+    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"
   };
-  var errorMessage = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+  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) + (firstErrorCount > 1 ? " (".concat(firstErrorCount, ")") : ""), " ", /*#__PURE__*/React.createElement(Button, {
+  }, 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: infoStyle
-  }, getErrorDescription(error)), error.cause !== undefined && /*#__PURE__*/React.createElement("div", {
+  }, getErrorDescription(error)), cause !== undefined && /*#__PURE__*/React.createElement("div", {
     className: "error-cause",
     style: infoStyle
-  }, "Caused by ", getErrorTitle(error.cause)));
-  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();
+  }, "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)));
     }
-  }, "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,24 +5,53 @@
   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;
-    }
+    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);

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

@@ -1,8 +1,8 @@
-var _templateObject, _templateObject2;
+var _templateObject, _templateObject2, _templateObject3;
 function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
 import { theme as AntTheme, ConfigProvider } from "antd";
 import React from "react";
-import styled, { css } from "styled-components";
+import styled, { createGlobalStyle, css } from "styled-components";
 var palette = {
   black: "#000000",
   white: "#ffffff",
@@ -18,7 +18,7 @@ var palette = {
   darkPurple: "#7e46d4",
   veryDarkPurple: "#5f369f",
   veryLtPurple: "#e7e4f2",
-  brightRed: "#ff4d4d",
+  brightRed: "#dc4446",
   brightYellow: "#e39b0d",
   brightGreen: "#61d900",
   veryBrightGreen: "#61ff00",
@@ -79,10 +79,10 @@ var theme = {
         outline: palette.ltGrey,
         hoverOutline: palette.ltPurple,
         hoverText: palette.ltPurple,
-        activeOutline: palette.medPurple,
-        activatedText: palette.white,
-        activatedBg: palette.medDarkGrey,
-        activatedOutline: palette.purpleGrey,
+        activeText: palette.white,
+        activeBg: palette.medDarkGrey,
+        activeOutline: palette.purpleGrey,
+        disabledOutline: palette.medGrey,
         disabledText: palette.medGrey
       }
     },
@@ -136,7 +136,7 @@ var theme = {
       }
     },
     tooltip: {
-      bg: palette.black
+      bg: palette.medDarkGrey
     },
     modal: {
       maskBg: "#000000cc",
@@ -150,10 +150,11 @@ 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 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      outline: none;\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-outline);\n      color: var(--color-button-tertiary-hover-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:not(.ant-select-item-option-disabled) {\n      border-radius: 0;\n      color: var(--color-button-icon-active-text);\n    }\n  }\n\n  .ant-select {\n    &.ant-select-disabled .ant-select-selector {\n      border-color: var(--color-button-icon-disabled-outline);\n    }\n\n    .ant-select-arrow {\n      transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\n    }\n\n    /* Control response to hover + active menu */\n    &:hover:not(.ant-select-disabled),\n    &:focus-visible:not(.ant-select-disabled),\n    &.ant-select.ant-select-open {\n      .ant-select-selector,\n      .ant-select-arrow,\n      .ant-select-selection-item {\n        color: var(--color-button-tertiary-hover-text);\n        outline-color: var(--color-button-tertiary-hover-outline);\n      }\n    }\n  }\n\n  // Toolbar has special colors for radio buttons and will use these variables to apply them\n  --color-button-radio-hover-outline: var(--color-button-tertiary-hover-outline);\n  --color-button-radio-hover-text: var(--color-button-tertiary-hover-text);\n\n  .ant-radio-button-wrapper {\n    &::before {\n      content: none;\n    }\n\n    &.ant-radio-button-wrapper-checked {\n      color: var(--color-button-icon-active-text);\n\n      &:not(:first-child) {\n        box-shadow: -1px 0px 0px 0px var(--color-button-tertiary-active-outline);\n      }\n    }\n\n    &:hover,\n    &:has(:focus-visible) {\n      color: var(--color-button-radio-hover-text);\n      border-color: var(--color-button-radio-hover-outline);\n      outline: none;\n      z-index: 2;\n\n      &:not(:first-child) {\n        box-shadow: -1px 0px 0px 0px var(--color-button-radio-hover-outline);\n      }\n    }\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-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-alert-warning-text: ", ";\n      --color-alert-warning-bg: ", ";\n      --color-alert-info-text: ", ";\n      --color-alert-info-bg: ", ";\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.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.alert.warning.text, $theme.colors.alert.warning.bg, $theme.colors.alert.info.text, $theme.colors.alert.info.bg, $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-outline: ", ";\n      --color-button-icon-disabled-text: ", ";\n      --color-button-icon-active-text: ", ";\n      --color-button-icon-active-bg: ", ";\n      --color-button-icon-active-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-alert-warning-text: ", ";\n      --color-alert-warning-bg: ", ";\n      --color-alert-info-text: ", ";\n      --color-alert-info-bg: ", ";\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.disabledOutline, $theme.colors.button.tertiary.disabledText, $theme.colors.button.tertiary.activeText, $theme.colors.button.tertiary.activeBg, $theme.colors.button.tertiary.activeOutline, $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.alert.warning.text, $theme.colors.alert.warning.bg, $theme.colors.alert.info.text, $theme.colors.alert.info.bg, $theme.colors.layout.dividers, $theme.colors.modal.border, $theme.colors.menu.hoverText, $theme.colors.menu.selectedText, $theme.colors.checkbox.bg, $theme.fonts.family);
 });
+var GlobalTooltipStyle = createGlobalStyle(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  .ant-tooltip-inner {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    /* !important needed: antd hardcodes text-align: start on tooltip inner */\n    text-align: center !important;\n    line-height: 1.4;\n    font-weight: 400;\n    /* !important needed: antd's CSS-in-JS injects tooltip styles into portals at higher specificity than global stylesheets */\n    box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.30), 0 3px 6px -4px rgba(0, 0, 0, 0.40), 0 9px 28px 8px rgba(0, 0, 0, 0.20) !important;\n  }\n\n"])));
 
 /**
  * Provides CSS variables and global styling for the image viewer.
@@ -192,7 +193,14 @@ export default function StyleProvider(props) {
           primaryColor: theme.colors.button.primary.text,
           defaultHoverBg: theme.colors.button.secondary.bg,
           defaultActiveBg: theme.colors.button.secondary.bg,
-          defaultActiveBorderColor: theme.colors.button.tertiary.activeOutline
+          defaultActiveBorderColor: theme.colors.button.primary.activeOutline
+        },
+        Checkbox: {
+          borderRadiusSM: 2,
+          colorBgContainer: theme.colors.checkbox.bg,
+          colorPrimary: theme.colors.checkbox.bg,
+          colorPrimaryHover: theme.colors.checkbox.hoverBg,
+          colorText: theme.colors.checkbox.text
         },
         Collapse: {
           borderRadiusLG: 0,
@@ -205,26 +213,38 @@ export default function StyleProvider(props) {
         Layout: {
           siderBg: theme.colors.controlPanel.bg
         },
-        Checkbox: {
-          borderRadiusSM: 2,
-          colorBgContainer: theme.colors.checkbox.bg,
-          colorPrimary: theme.colors.checkbox.bg,
-          colorPrimaryHover: theme.colors.checkbox.hoverBg,
-          colorText: theme.colors.checkbox.text
-        },
-        Tooltip: {
-          colorBgSpotlight: theme.colors.tooltip.bg
-        },
         Modal: {
           colorBgMask: theme.colors.modal.maskBg,
           contentBg: theme.colors.modal.bg,
           headerBg: theme.colors.modal.bg,
           footerBg: theme.colors.modal.bg,
           titleFontSize: 19
+        },
+        Radio: {
+          buttonCheckedBg: theme.colors.button.tertiary.activeBg,
+          buttonColor: theme.colors.button.tertiary.text,
+          // can't style borders and text of activated buttons independently within ant's system, so we set border
+          //   colors here and text/bg colors in custom css
+          colorPrimary: theme.colors.button.tertiary.activeOutline
+        },
+        Select: {
+          colorText: theme.colors.button.tertiary.text,
+          colorBorder: theme.colors.button.tertiary.outline,
+          // arrow color
+          colorTextQuaternary: theme.colors.button.tertiary.text,
+          colorTextDisabled: theme.colors.button.tertiary.disabledText,
+          colorTextPlaceholder: theme.colors.button.tertiary.hoverText,
+          colorBgContainerDisabled: "transparent"
+        },
+        // Additional tooltip overrides (font-weight, box-shadow, layout) are in GlobalTooltipStyle below,
+        // which is required because antd renders tooltips in portals outside the scoped CssProvider.
+        Tooltip: {
+          colorBgSpotlight: theme.colors.tooltip.bg,
+          fontSize: 12
         }
       }
     }
-  }, /*#__PURE__*/React.createElement(CssProvider, {
+  }, /*#__PURE__*/React.createElement(GlobalTooltipStyle, null), /*#__PURE__*/React.createElement(CssProvider, {
     $theme: theme
   }, props.children));
 }

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

@@ -317,6 +317,7 @@ var TfEditor = function TfEditor(props) {
     colorPickerPosition = _useState8[0],
     setColorPickerPosition = _useState8[1];
   var lastColorRef = useRef(TFEDITOR_DEFAULT_COLOR);
+  var dropdownContainerRef = useRef(null);
   var svgRef = useRef(null); // need access to SVG element to measure mouse position
 
   var histogram = props.channelData.histogram;
@@ -765,7 +766,9 @@ var TfEditor = function TfEditor(props) {
     }
   })))), props.volumeEnabled && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h4", null, "Volume settings"), /*#__PURE__*/React.createElement("div", {
     className: "tf-editor-control-row"
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Dropdown, {
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: dropdownContainerRef
+  }, /*#__PURE__*/React.createElement(Dropdown, {
     trigger: ["click"],
     menu: {
       items: [{
@@ -785,6 +788,10 @@ var TfEditor = function TfEditor(props) {
         var key = _ref5.key;
         return applyTFGenerator(key);
       }
+    },
+    getPopupContainer: function getPopupContainer() {
+      var _dropdownContainerRef;
+      return (_dropdownContainerRef = dropdownContainerRef.current) !== null && _dropdownContainerRef !== void 0 ? _dropdownContainerRef : document.body;
     }
   }, /*#__PURE__*/React.createElement(Button, {
     size: "small"

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

@@ -4,8 +4,6 @@ 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; }
-// TODO this really ought to be exported at the top level...
-
 import { ReloadOutlined } from "@ant-design/icons";
 import { Button, Radio, Select, Tooltip } from "antd";
 import { debounce } from "lodash";
@@ -35,6 +33,7 @@ var Toolbar = function Toolbar(props) {
   var leftRef = React.useRef(null);
   var rightRef = React.useRef(null);
   var centerRef = React.useRef(null);
+  var resizeObserver = React.useRef();
   var _React$useState = React.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     scrollMode = _React$useState2[0],
@@ -65,7 +64,7 @@ var Toolbar = function Toolbar(props) {
       return;
     }
     setScrollBtnLeft(barEl.scrollLeft > 0);
-    setScrollBtnRight(barEl.scrollLeft < barEl.scrollWidth - barEl.clientWidth);
+    setScrollBtnRight(Math.ceil(barEl.scrollLeft) < barEl.scrollWidth - barEl.clientWidth);
   }, []);
 
   // This is effectively a `useCallback` - it memoizes a function - but since we're feeding the whole function into
@@ -93,15 +92,30 @@ var Toolbar = function Toolbar(props) {
           return leftRect.right > centerRect.left || centerRect.right > rightRect.left;
         }
       });
-      checkScrollBtnVisible();
+      window.setTimeout(checkScrollBtnVisible, 0);
     }, RESIZE_DEBOUNCE_DELAY);
   }, [checkScrollBtnVisible]);
   React.useEffect(function () {
     // Make sure `checkSize` is run once on mount
     checkSize();
+    if (resizeObserver.current !== undefined) {
+      resizeObserver.current.disconnect();
+    }
+    resizeObserver.current = new ResizeObserver(checkSize);
+    if (leftRef.current !== null) {
+      resizeObserver.current.observe(leftRef.current);
+    }
+    if (centerRef.current !== null) {
+      resizeObserver.current.observe(centerRef.current);
+    }
+    if (rightRef.current !== null) {
+      resizeObserver.current.observe(rightRef.current);
+    }
     window.addEventListener("resize", checkSize);
     return function () {
-      return window.removeEventListener("resize", checkSize);
+      var _resizeObserver$curre;
+      (_resizeObserver$curre = resizeObserver.current) === null || _resizeObserver$curre === void 0 || _resizeObserver$curre.disconnect();
+      window.removeEventListener("resize", checkSize);
     };
   }, [checkSize]);
   var scrollX = function scrollX(amount) {
@@ -126,7 +140,8 @@ var Toolbar = function Toolbar(props) {
   var classForToggleBtn = function classForToggleBtn(active) {
     return "ant-btn-icon-only btn-borderless" + (active ? " btn-active" : "");
   };
-  var visibleControls = props.visibleControls;
+  var visibleControls = props.visibleControls,
+    multiscaleDims = props.multiscaleDims;
   var twoDMode = viewMode !== ViewMode.threeD;
   var renderGroup1 = visibleControls.viewModeRadioButtons || visibleControls.resetCameraButton || visibleControls.autoRotateButton;
   var renderGroup4 = visibleControls.showAxesButton || visibleControls.showBoundingBoxButton;
@@ -214,8 +229,9 @@ var Toolbar = function Toolbar(props) {
   }, "Full field"))), /*#__PURE__*/React.createElement("div", {
     className: "viewer-toolbar-group"
   }, /*#__PURE__*/React.createElement(Select, {
-    className: "select-render-setting",
-    popupClassName: "viewer-toolbar-dropdown",
+    style: {
+      minWidth: 120
+    },
     value: renderMode,
     onChange: function onChange(value) {
       return changeViewerSetting("renderMode", value);
@@ -249,9 +265,13 @@ var Toolbar = function Toolbar(props) {
     onClick: toggleBoundingBox
   }, /*#__PURE__*/React.createElement(ViewerIcon, {
     type: "boundingBox"
-  })))), props.multiscaleDims !== undefined && props.multiscaleDims.length > 1 && /*#__PURE__*/React.createElement("div", {
+  })))), multiscaleDims !== undefined && multiscaleDims.length > 1 && visibleControls.scaleLevelControls && /*#__PURE__*/React.createElement("div", {
     className: "viewer-toolbar-group"
-  }, /*#__PURE__*/React.createElement("span", null, "Resolution"), /*#__PURE__*/React.createElement(Radio.Group, {
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: "var(--color-button-tertiary-text)"
+    }
+  }, "Resolution"), /*#__PURE__*/React.createElement(Radio.Group, {
     value: useExactScaleLevel,
     onChange: function onChange(e) {
       return changeViewerSetting("useExactScaleLevel", e.target.value);
@@ -261,7 +281,8 @@ var Toolbar = function Toolbar(props) {
   }, "Auto"), /*#__PURE__*/React.createElement(Radio.Button, {
     value: true
   }, "Manual")), /*#__PURE__*/React.createElement(Select, {
-    className: "select-render-setting",
+    className: "select-resolution",
+    getPopupContainer: getPopupContainer,
     style: {
       minWidth: 150
     },
@@ -270,7 +291,7 @@ var Toolbar = function Toolbar(props) {
       return changeViewerSetting("scaleLevelIndex", value);
     },
     disabled: !useExactScaleLevel
-  }, props.multiscaleDims.map(function (dims, idx) {
+  }, multiscaleDims.map(function (dims, idx) {
     var _dims$shape = _slicedToArray(dims.shape, 5),
       _t = _dims$shape[0],
       _c = _dims$shape[1],