@aics/vole-app 3.2.3 → 3.3.0

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

@@ -113,6 +113,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"));
@@ -264,10 +265,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?
@@ -585,7 +588,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/ErrorAlert/index.js

@@ -17,6 +17,7 @@ import { RightOutlined } 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,7 +33,7 @@ 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) {
@@ -45,6 +46,9 @@ var getErrorDescription = function getErrorDescription(error) {
   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.");
+  }
   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) {
@@ -62,16 +66,22 @@ var ErrorAlert = function ErrorAlert(_ref2) {
     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, {
+  var infoStyle = {
+    display: showDetails ? undefined : "none"
+  };
+  var errorMessage = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "error-title"
+  }, 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)));
+    style: infoStyle
+  }, getErrorDescription(error)), 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() {

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

@@ -7,6 +7,7 @@
   z-index:5000;
   border-color:#dc4446;
   padding:12px 30px;
+  color:var(--color-text-section);
 }
   .load-error-alert .ant-alert-icon,
   .load-error-alert .ant-alert-close-icon,
@@ -19,7 +20,10 @@
   .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;
-  }
+  .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

@@ -19,9 +19,13 @@ var palette = {
   veryDarkPurple: "#5f369f",
   veryLtPurple: "#e7e4f2",
   brightRed: "#ff4d4d",
+  brightYellow: "#e39b0d",
   brightGreen: "#61d900",
   veryBrightGreen: "#61ff00",
-  brightBlue: "#0099ff"
+  brightBlue: "#0099ff",
+  veryBrightBlue: "#0dc4d9",
+  darkBlue: "#29484c",
+  darkYellow: "#4c3c29"
 };
 var theme = {
   colors: {
@@ -31,7 +35,7 @@ var theme = {
       primaryDk: palette.darkPurple,
       success: palette.brightGreen,
       error: palette.brightRed,
-      warning: palette.brightRed,
+      warning: palette.brightYellow,
       info: palette.brightBlue
     },
     text: {
@@ -121,6 +125,16 @@ var theme = {
       selectedBg: palette.medGrey,
       textPlaceholder: palette.ltPurple
     },
+    alert: {
+      warning: {
+        text: palette.brightYellow,
+        bg: palette.darkYellow
+      },
+      info: {
+        text: palette.veryBrightBlue,
+        bg: palette.darkBlue
+      }
+    },
     tooltip: {
       bg: palette.black
     },
@@ -138,7 +152,7 @@ var theme = {
 /** Makes theme styling available to child components via CSS variables. */
 var CssProvider = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n\n  ", "\n\n  h1, h2, h3, h4, p {\n    font-family: var(--font-family);\n  }\n\n  h1 {\n    color: var(--color-text-header);\n    font-size: 28px;\n    font-weight: 400;\n  }\n\n  h2 {\n    color: var(--color-text-section);\n    font-size: 19px;\n    font-weight: 400;\n  }\n\n  h3 {\n    color: var(--color-text-header);\n    font-size: 16px;\n    font-weight: 600;\n  }\n\n  h4 {\n    color: var(--color-text-header);\n    font-size: 14px;\n    font-weight: 400;\n  }\n\n  p {\n    color: var(--color-text-body);\n    font-size: 14px;\n    font-weight: 400;\n  }\n\n  a {\n    color: var(--color-text-link);\n  }\n\n  & *::selection {\n    background-color: var(--color-text-selection-bg);\n    color: var(--color-text-selection-text);\n  }\n\n  /** TODO: Go through these styles and see if we can use Ant ConfigProvider for them instead. */\n  .ant-btn-link,\n  .ant-btn-text,\n  .ant-btn-primary,\n  .ant-btn-icon-only {\n    box-shadow: none;\n\n    &:hover:not(:disabled),\n    &:focus-visible:not(:disabled) {\n      background-color: var(--color-button-primary-hover-bg);\n      border-color: var(--color-button-primary-hover-bg);\n      color: var(--color-button-primary-text);\n    }\n\n    &:active:not(:disabled) {\n      background-color: var(--color-button-primary-hover-bg);\n      border: 1px solid var(--color-button-primary-active-outline);\n      color: var(--color-button-primary-text);\n    }\n  }\n\n  /* Let us use buttons with type=\"text\" as purely semantic containers - don't bring any styling! */\n  .ant-btn-text {\n    width: unset;\n    height: unset;\n    padding: unset;\n\n    &:hover:not(:disabled),\n    &:focus-visible:not(:disabled) {\n      background-color: unset;\n      border-color: transparent;\n    }\n  }\n\n  .ant-btn-icon-only:disabled {\n    color: var(--color-button-icon-disabled-text);\n  }\n\n  .ant-btn-link:not(:disabled) {\n    // Change from default blue link text\n    color: var(--color-button-link-text);\n  }\n\n  /**\n   * Tertiary style buttons. Grey outline by default, turns to light\n   * purple outline on hover.\n   */\n  .ant-btn-default:not(.ant-btn-icon-only) {\n    background-color: var(--color-button-tertiary-bg);\n    color: var(--color-button-tertiary-text);\n    border-color: var(--color-button-tertiary-outline);\n\n    &:hover:not(:disabled),\n    &:focus-visible:not(:disabled) {\n      background-color: transparent;\n      border-color: var(--color-button-tertiary-hover-bg);\n      color: var(--color-button-tertiary-hover-text);\n    }\n\n    &:active:not(:disabled) {\n      background-color: transparent;\n      border-color: var(--color-button-tertiary-active-outline);\n      color: var(--color-button-tertiary-active-text);\n    }\n  }\n\n  // Overrides for checkbox styling\n  & .ant-checkbox-input {\n    &:hover,\n    &:focus-visible {\n      border: 1px solid white;\n    }\n  }\n\n  & .ant-checkbox.ant-checkbox-checked {\n    background-color: var(--color-checkbox-bg);\n  }\n\n  .ant-checkbox-inner {\n    background-color: transparent !important;\n  }\n\n  // Add outlines to modals and dropdowns\n  & .ant-select-dropdown,\n  & .ant-dropdown-menu,\n  & .ant-modal-content {\n    border: 1px solid var(--color-modal-border);\n  }\n\n  // Force active/hovered text to be white instead of grey for better contrast\n  & .ant-dropdown-menu-item-active {\n    color: var(--color-menu-hover-text);\n  }\n\n  // Remove padding in dropdown menus and make items reactangular + flush with the edge\n  & .ant-dropdown-menu,\n  & .ant-select-dropdown {\n    padding: 0;\n    overflow: hidden;\n\n    & .ant-dropdown-menu-item,\n    & .ant-select-item {\n      border-radius: 0;\n    }\n  }\n"])), function (_ref) {
   var $theme = _ref.$theme;
-  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      /* Component and color variables. */\n      // TODO: Fix inconsistent use of border vs. outline\n      // TODO: Remove variables that aren't used in other CSS files. These should be set directly\n      // from the $theme object to reduce unnecessary variables.\n      --color-text-link: ", ";\n      --color-text-header: ", ";\n      --color-text-section: ", ";\n      --color-text-body: ", ";\n      --color-text-error: ", ";\n\n      --color-text-selection-bg: ", ";\n      --color-text-selection-text: ", ";\n\n      --color-header-title: ", ";\n      --color-header-hover-title: ", ";\n      --color-header-bg: ", ";\n      --color-header-border: ", ";\n\n      --color-button-primary-bg: ", ";\n      --color-button-primary-text: ", ";\n      --color-button-primary-hover-bg: ", ";\n      --color-button-primary-active-bg: ", ";\n      --color-button-primary-active-outline: ", ";\n      --color-button-primary-disabled-bg: ", ";\n\n      --color-button-link-text: ", ";\n\n      --color-button-secondary-bg: ", ";\n      --color-button-secondary-text: ", ";\n      --color-button-secondary-outline: ", ";\n\n      --color-button-tertiary-bg: transparent;\n      --color-button-tertiary-text: ", ";\n      --color-button-tertiary-outline: ", ";\n      --color-button-tertiary-hover-outline: ", ";\n      --color-button-tertiary-hover-text: ", ";\n      --color-button-tertiary-active-outline: ", ";\n      --color-button-tertiary-active-text: ", ";\n\n      --color-button-icon-disabled-text: ", ";\n      --color-button-icon-disabled-text: ", ";\n      --color-button-icon-activated-text: ", ";\n      --color-button-icon-activated-bg: ", ";\n      --color-button-icon-activated-outline: ", ";\n\n      --color-toolbar-button-bg: ", ";\n\n      --color-controlpanel-bg: ", ";\n      --color-controlpanel-border: ", ";\n      --color-controlpanel-section-text: ", ";\n      --color-controlpanel-text: ", ";\n      --color-controlpanel-section-bg: ", ";\n      --color-controlpanel-drawer-bg: ", ";\n      --color-controlpanel-ramp-slider: ", ";\n      --color-controlpanel-isovalue-slider: ", ";\n\n      --color-landingpage-bg: ", ";\n      --color-landingpage-bg-alt: ", ";\n      --color-landingpage-text: ", ";\n      --color-landingpage-banner-highlight-bg: ", ";\n\n      --color-statusflag-border: ", ";\n      --color-statusflag-text: ", ";\n\n      --color-layout-dividers: ", ";\n\n      --color-modal-border: ", ";\n\n      --color-menu-hover-text: ", ";\n      --color-menu-selected-text: ", ";\n\n      --color-checkbox-bg: ", ";\n\n      --font-family: ", ";\n    "])), $theme.colors.text.link, $theme.colors.text.header, $theme.colors.text.section, $theme.colors.text.body, $theme.colors.text.error, $theme.colors.text.selectionBg, $theme.colors.text.selectionText, $theme.colors.header.title, $theme.colors.header.hoverTitle, $theme.colors.header.bg, $theme.colors.header.border, $theme.colors.button.primary.bg, $theme.colors.button.primary.text, $theme.colors.button.primary.hoverBg, $theme.colors.button.primary.hoverBg, $theme.colors.button.primary.activeOutline, $theme.colors.button.primary.disabledBg, $theme.colors.button.link.text, $theme.colors.button.secondary.bg, $theme.colors.button.secondary.text, $theme.colors.button.secondary.outline, $theme.colors.button.tertiary.text, $theme.colors.button.tertiary.outline, $theme.colors.button.tertiary.hoverOutline, $theme.colors.button.tertiary.hoverText, $theme.colors.button.tertiary.activeOutline, $theme.colors.button.tertiary.hoverText, $theme.colors.button.tertiary.disabledText, $theme.colors.button.tertiary.disabledText, $theme.colors.button.tertiary.activatedText, $theme.colors.button.tertiary.activatedBg, $theme.colors.button.tertiary.activatedOutline, $theme.colors.toolbar.buttonBg, $theme.colors.controlPanel.bg, $theme.colors.controlPanel.border, $theme.colors.controlPanel.sectionText, $theme.colors.controlPanel.text, $theme.colors.controlPanel.sectionBg, $theme.colors.controlPanel.drawerBg, $theme.colors.controlPanel.rampSlider, $theme.colors.controlPanel.isovalueSlider, $theme.colors.landingPage.bg, $theme.colors.landingPage.bgAlt, $theme.colors.landingPage.text, $theme.colors.landingPage.bannerBg, $theme.colors.statusFlag.border, $theme.colors.statusFlag.text, $theme.colors.layout.dividers, $theme.colors.modal.border, $theme.colors.menu.hoverText, $theme.colors.menu.selectedText, $theme.colors.checkbox.bg, $theme.fonts.family);
+  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);
 });
 
 /**
@@ -157,6 +171,14 @@ export default function StyleProvider(props) {
         colorBgContainer: "transparent",
         colorSplit: theme.colors.layout.split,
         colorPrimaryTextHover: theme.colors.text.selectionText,
+        colorWarning: theme.colors.alert.warning.text,
+        colorWarningBg: theme.colors.alert.warning.bg,
+        colorWarningBorder: theme.colors.alert.warning.text,
+        colorWarningText: theme.colors.alert.warning.text,
+        colorInfo: theme.colors.alert.info.text,
+        colorInfoBg: theme.colors.alert.info.bg,
+        colorInfoBorder: theme.colors.alert.info.text,
+        colorInfoText: theme.colors.alert.info.text,
         fontWeightStrong: 400,
         colorBgElevated: palette.darkGrey,
         controlItemBgHover: theme.colors.menu.hoverBg,
@@ -172,10 +194,6 @@ export default function StyleProvider(props) {
           defaultActiveBg: theme.colors.button.secondary.bg,
           defaultActiveBorderColor: theme.colors.button.tertiary.activeOutline
         },
-        Card: {
-          borderRadiusLG: 0,
-          headerHeight: 48
-        },
         Collapse: {
           borderRadiusLG: 0,
           colorTextHeading: theme.colors.text.section

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

@@ -4,6 +4,8 @@ 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";
@@ -27,6 +29,7 @@ var visuallyHiddenStyle = {
   borderWidth: "0"
 };
 var Toolbar = function Toolbar(props) {
+  var _props$multiscaleInde;
   var containerRef = React.useRef(null);
   var barRef = React.useRef(null);
   var leftRef = React.useRef(null);
@@ -50,6 +53,8 @@ var Toolbar = function Toolbar(props) {
   var autorotate = useViewerState(select("autorotate"));
   var showAxes = useViewerState(select("showAxes"));
   var showBoundingBox = useViewerState(select("showBoundingBox"));
+  var useExactScaleLevel = useViewerState(select("useExactScaleLevel"));
+  var scaleLevelIndex = useViewerState(select("scaleLevelIndex"));
   var changeViewerSetting = useViewerState(select("changeViewerSetting"));
 
   // Scroll buttons are only visible when toolbar can be scrolled in that direction.
@@ -244,7 +249,39 @@ var Toolbar = function Toolbar(props) {
     onClick: toggleBoundingBox
   }, /*#__PURE__*/React.createElement(ViewerIcon, {
     type: "boundingBox"
-  }))))), /*#__PURE__*/React.createElement("div", {
+  })))), props.multiscaleDims !== undefined && props.multiscaleDims.length > 1 && /*#__PURE__*/React.createElement("div", {
+    className: "viewer-toolbar-group"
+  }, /*#__PURE__*/React.createElement("span", null, "Resolution"), /*#__PURE__*/React.createElement(Radio.Group, {
+    value: useExactScaleLevel,
+    onChange: function onChange(e) {
+      return changeViewerSetting("useExactScaleLevel", e.target.value);
+    }
+  }, /*#__PURE__*/React.createElement(Radio.Button, {
+    value: false
+  }, "Auto"), /*#__PURE__*/React.createElement(Radio.Button, {
+    value: true
+  }, "Manual")), /*#__PURE__*/React.createElement(Select, {
+    className: "select-render-setting",
+    style: {
+      minWidth: 150
+    },
+    value: useExactScaleLevel ? scaleLevelIndex : (_props$multiscaleInde = props.multiscaleIndex) !== null && _props$multiscaleInde !== void 0 ? _props$multiscaleInde : scaleLevelIndex,
+    onChange: function onChange(value) {
+      return changeViewerSetting("scaleLevelIndex", value);
+    },
+    disabled: !useExactScaleLevel
+  }, props.multiscaleDims.map(function (dims, idx) {
+    var _dims$shape = _slicedToArray(dims.shape, 5),
+      _t = _dims$shape[0],
+      _c = _dims$shape[1],
+      z = _dims$shape[2],
+      y = _dims$shape[3],
+      x = _dims$shape[4];
+    return /*#__PURE__*/React.createElement(Select.Option, {
+      key: idx,
+      value: idx
+    }, x, " x ", y, " x ", z);
+  })))), /*#__PURE__*/React.createElement("div", {
     className: "viewer-toolbar-right viewer-toolbar-group",
     ref: rightRef
   }, /*#__PURE__*/React.createElement(Tooltip, {

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

@@ -169,6 +169,27 @@
       transition:all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
     }
 
+.viewer-toolbar.viewer-toolbar .ant-select.select-render-setting.ant-select-disabled .ant-select-selection-item,
+      .viewer-toolbar.viewer-toolbar .ant-select.select-render-setting.ant-select-disabled .ant-select-selection-search{
+        padding-inline-end:0;
+      }
+
+.viewer-toolbar.viewer-toolbar .ant-select.select-render-setting.ant-select-disabled .ant-select-selection-item{
+        color:var(--color-button-icon-disabled-text);
+      }
+
+.viewer-toolbar.viewer-toolbar .ant-select.select-render-setting.ant-select-disabled .ant-select-selection-item:hover{
+          color:var(--color-button-icon-disabled-text);
+        }
+
+.viewer-toolbar.viewer-toolbar .ant-select.select-render-setting.ant-select-disabled .ant-select-selector{
+        border-color:var(--color-button-icon-disabled-text);
+      }
+
+.viewer-toolbar.viewer-toolbar .ant-select.select-render-setting.ant-select-disabled .ant-select-arrow{
+        display:none;
+      }
+
 .viewer-toolbar.viewer-toolbar .ant-select.select-render-setting .ant-select-selector{
       border-color:#aeacae;
       box-shadow:none;

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

@@ -8,13 +8,13 @@ function _regeneratorAsyncIterator(t, e) { function n(r, o, i, f) { try { var c
 function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof Symbol ? Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = Object.create(c.prototype); return _regeneratorDefine2(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = !1, G = { p: 0, n: 0, v: e, a: d, f: d.bind(e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = !0, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i["return"]) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), !0), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = Object.getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c); function f(e) { return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, "Generator"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, "toString", function () { return "[object Generator]"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }
 function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); }
 function _OverloadYield(e, d) { this.v = e, this.k = d; }
-function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
-function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
+function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
 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; } }
@@ -24,13 +24,12 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 import { LoadSpec, VolumeLoaderContext } from "@aics/vole-core";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Box3, Vector3 } from "three";
-import { AXIS_TO_LOADER_PRIORITY, CACHE_MAX_SIZE, getDefaultChannelColor, getDefaultViewerChannelSettings, QUEUE_MAX_LOW_PRIORITY_SIZE, QUEUE_MAX_SIZE } from "../shared/constants";
+import { AXIS_TO_LOADER_PRIORITY, CACHE_MAX_SIZE, getDefaultViewerChannelSettings, QUEUE_MAX_LOW_PRIORITY_SIZE, QUEUE_MAX_SIZE } from "../shared/constants";
 import { ViewMode } from "../shared/enums";
 import { useConstructor, useRefWithSetter } from "../shared/utils/hooks";
 import PlayControls from "../shared/utils/playControls";
 import SceneStore from "../shared/utils/sceneStore";
 import { makeChannelIndexGrouping } from "../shared/utils/viewerChannelSettings";
-import { initializeOneChannelSetting } from "../shared/utils/viewerState";
 import { select, useViewerState } from "../state/store";
 export var ImageLoadStatus = /*#__PURE__*/function (ImageLoadStatus) {
   ImageLoadStatus[ImageLoadStatus["REQUESTED"] = 0] = "REQUESTED";
@@ -57,10 +56,14 @@ var CHANNEL_RELOAD = 0;
  */
 var useEffectEventRef = function useEffectEventRef(callback) {
   var callbackRef = useRef(callback);
-  useEffect(function () {
-    callbackRef.current = callback;
-  }, [callback]);
-  return callbackRef;
+  callbackRef.current = callback;
+  return useCallback(function () {
+    var _callbackRef$current;
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    return (_callbackRef$current = callbackRef.current) === null || _callbackRef$current === void 0 ? void 0 : _callbackRef$current.call.apply(_callbackRef$current, [callbackRef].concat(args));
+  }, [callbackRef]);
 };
 
 /**
@@ -76,7 +79,7 @@ var useEffectEventRef = function useEffectEventRef(callback) {
 var useVolume = function useVolume(scenePaths, options) {
   var channelSettings = useViewerState(select("channelSettings"));
   var changeViewerSetting = useViewerState(select("changeViewerSetting"));
-  var replaceAllChannelSettings = useViewerState(select("replaceAllChannelSettings"));
+  var initChannelSettings = useViewerState(select("initChannelSettings"));
   var onErrorRef = useEffectEventRef(options === null || options === void 0 ? void 0 : options.onError);
   var onChannelLoadedRef = useEffectEventRef(options === null || options === void 0 ? void 0 : options.onChannelLoaded);
   var onChangeSceneRef = useEffectEventRef(options === null || options === void 0 ? void 0 : options.onChangeScene);
@@ -173,9 +176,8 @@ var useVolume = function useVolume(scenePaths, options) {
     }));
   }, [channelVersionsRef, setChannelVersions]);
   var onError = useCallback(function (e) {
-    var _onErrorRef$current;
     setLoadThrewError(true);
-    (_onErrorRef$current = onErrorRef.current) === null || _onErrorRef$current === void 0 || _onErrorRef$current.call(onErrorRef, e);
+    onErrorRef(e);
     throw e;
   }, [onErrorRef]);
 
@@ -185,10 +187,9 @@ var useVolume = function useVolume(scenePaths, options) {
     channelGroupedByType = _useState10[0],
     setChannelGroupedByType = _useState10[1];
   var onChannelDataLoaded = useCallback(function (aimg, channelIndex) {
-    var _onChannelLoadedRef$c;
     // let the hook caller know that this channel has loaded
     var isInitialLoad = channelVersionsRef.current[channelIndex] === CHANNEL_INITIAL_LOAD;
-    (_onChannelLoadedRef$c = onChannelLoadedRef.current) === null || _onChannelLoadedRef$c === void 0 || _onChannelLoadedRef$c.call(onChannelLoadedRef, aimg, channelIndex, isInitialLoad);
+    onChannelLoadedRef(aimg, channelIndex, isInitialLoad);
 
     // set this channel as loaded
     var newVersions = channelVersionsRef.current.slice();
@@ -200,34 +201,23 @@ var useVolume = function useVolume(scenePaths, options) {
       playControls.onImageLoaded();
     }
   }, [channelVersionsRef, onChannelLoadedRef, playControls, setChannelVersions]);
+  var setChannelStateForNewImage = useCallback(function (channelNames) {
+    var _useViewerState$getSt = useViewerState.getState(),
+      useDefaultViewerChannelSettings = _useViewerState$getSt.useDefaultViewerChannelSettings;
+    var viewerChannelSettings = useDefaultViewerChannelSettings ? getDefaultViewerChannelSettings() : options === null || options === void 0 ? void 0 : options.viewerChannelSettings;
+    var grouping = makeChannelIndexGrouping(channelNames, viewerChannelSettings);
+    setChannelGroupedByType(grouping);
+    return initChannelSettings(channelNames, viewerChannelSettings);
+  }, [initChannelSettings, options === null || options === void 0 ? void 0 : options.viewerChannelSettings]);
 
   // effect to start the initial load of the image
   useEffect(function () {
-    var channelSettings = useViewerState.getState().channelSettings;
     setChannelVersions(new Array(channelVersionsRef.current.length).fill(CHANNEL_INITIAL_LOAD));
     setLoadThrewError(false);
     inInitialLoadRef.current = true;
-    var setChannelStateForNewImage = function setChannelStateForNewImage(channelNames) {
-      var _useViewerState$getSt = useViewerState.getState(),
-        useDefaultViewerChannelSettings = _useViewerState$getSt.useDefaultViewerChannelSettings;
-      var viewerChannelSettings = useDefaultViewerChannelSettings ? getDefaultViewerChannelSettings() : options === null || options === void 0 ? void 0 : options.viewerChannelSettings;
-      var grouping = makeChannelIndexGrouping(channelNames, viewerChannelSettings);
-      setChannelGroupedByType(grouping);
-      var newChannelSettings = channelNames.map(function (name, index) {
-        var _channelSettings$inde;
-        var color = getDefaultChannelColor(index);
-        var channelSetting = (_channelSettings$inde = channelSettings[index]) !== null && _channelSettings$inde !== void 0 ? _channelSettings$inde : initializeOneChannelSetting(name, index, color, viewerChannelSettings);
-        return _objectSpread(_objectSpread({}, channelSetting), {}, {
-          name: name
-        });
-      });
-      replaceAllChannelSettings(newChannelSettings);
-      return newChannelSettings;
-    };
     var openImage = /*#__PURE__*/function () {
       var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-        var _onCreateImageRef$cur;
-        var scene, time, loadSpec, aimg, channelNames, newChannelSettings, requiredLoadSpec, requiredChannelsToLoad, _useViewerState$getSt2, useDefaultViewerChannelSettings, viewerChannelSettings, maskChannelName, maskChannelIndex, viewMode, slice, onCreateScene;
+        var scene, time, loadSpec, aimg, channelNames, newChannelSettings, requiredLoadSpec, requiredChannelsToLoad, _useViewerState$getSt2, useDefaultViewerChannelSettings, viewerChannelSettings, maskChannelName, maskChannelIndex, viewMode, slice;
         return _regeneratorRuntime().wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
@@ -243,7 +233,7 @@ var useVolume = function useVolume(scenePaths, options) {
               newChannelSettings = setChannelStateForNewImage(channelNames);
               setChannelVersions(new Array(channelNames.length).fill(CHANNEL_INITIAL_LOAD));
               setImage(aimg);
-              (_onCreateImageRef$cur = onCreateImageRef.current) === null || _onCreateImageRef$cur === void 0 || _onCreateImageRef$cur.call(onCreateImageRef, aimg);
+              onCreateImageRef(aimg);
               playControls.stepAxis = function (axis) {
                 var time = useViewerState.getState().time;
                 var slice = useViewerState.getState().slice;
@@ -289,11 +279,10 @@ var useVolume = function useVolume(scenePaths, options) {
 
               // initiate loading only after setting up new channel settings,
               // in case the loader callback fires before the state is set
-              onCreateScene = onChangeSceneRef.current;
               sceneLoader.loadScene(scene, aimg, requiredLoadSpec, {
-                onCreateScene: onCreateScene
+                onCreateScene: onChangeSceneRef
               })["catch"](onError);
-            case 27:
+            case 26:
             case "end":
               return _context.stop();
           }
@@ -304,7 +293,7 @@ var useVolume = function useVolume(scenePaths, options) {
       };
     }();
     openImage();
-  }, [sceneLoader, onError, onCreateImageRef, onChangeSceneRef, onChannelLoadedRef, channelVersionsRef, setChannelVersions, playControls, setIsLoading, onChannelDataLoaded, changeViewerSetting, replaceAllChannelSettings, options === null || options === void 0 ? void 0 : options.viewerChannelSettings]);
+  }, [sceneLoader, onError, onCreateImageRef, onChangeSceneRef, onChannelLoadedRef, channelVersionsRef, setChannelVersions, playControls, setIsLoading, onChannelDataLoaded, changeViewerSetting, initChannelSettings, setChannelStateForNewImage, options === null || options === void 0 ? void 0 : options.viewerChannelSettings]);
   // of the above dependencies, we expect only `sceneLoader` to change.
 
   var setTime = useCallback(function (view3d, time) {
@@ -315,13 +304,26 @@ var useVolume = function useVolume(scenePaths, options) {
   }, [image, onError, setIsLoading, inInitialLoadRef]);
   var setScene = useCallback(function (scene) {
     if (image && !inInitialLoadRef.current) {
-      var onCreateScene = onChangeSceneRef.current;
+      var onCreateScene = function onCreateScene(volume, sceneIndex, loadSpec) {
+        setChannelStateForNewImage(volume.imageInfo.channelNames);
+        volume.updateChannelCount();
+        var prevChannelVersions = channelVersionsRef.current;
+        var newChannelVersions;
+        var addedChannelCount = volume.imageInfo.numChannels - prevChannelVersions.length;
+        if (addedChannelCount > 0) {
+          newChannelVersions = prevChannelVersions.concat(Array(addedChannelCount).fill(CHANNEL_INITIAL_LOAD));
+        } else {
+          newChannelVersions = prevChannelVersions.slice(0, volume.imageInfo.numChannels);
+        }
+        setChannelVersions(newChannelVersions);
+        onChangeSceneRef(volume, sceneIndex, loadSpec);
+      };
       sceneLoader.loadScene(scene, image, undefined, {
         onCreateScene: onCreateScene
       })["catch"](onError);
       setIsLoading(LoadType.SCENE);
     }
-  }, [image, onError, sceneLoader, setIsLoading, inInitialLoadRef, onChangeSceneRef]);
+  }, [image, sceneLoader, onError, setIsLoading, setChannelStateForNewImage, channelVersionsRef, setChannelVersions, onChangeSceneRef]);
   return useMemo(function () {
     return {
       image: image,

package/es/aics-image-viewer/shared/constants.js

@@ -166,6 +166,8 @@ export var getDefaultViewerState = function getDefaultViewerState() {
     scene: 0,
     singleChannelMode: false,
     singleChannelIndex: 0,
+    useExactScaleLevel: false,
+    scaleLevelIndex: 0,
     // Do not override camera position, target, etc. by default;
     // instead, let the viewer apply default camera settings based on the view mode.
     // This prevents a bug where the camera's position and view mode are set to

package/es/aics-image-viewer/shared/utils/sceneStore.js

@@ -1,3 +1,5 @@
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _regeneratorRuntime() { "use strict"; var r = _regenerator(), e = r.m(_regeneratorRuntime), t = (Object.getPrototypeOf ? Object.getPrototypeOf(e) : e.__proto__).constructor; function n(r) { var e = "function" == typeof r && r.constructor; return !!e && (e === t || "GeneratorFunction" === (e.displayName || e.name)); } var o = { "throw": 1, "return": 2, "break": 3, "continue": 3 }; function a(r) { var e, t; return function (n) { e || (e = { stop: function stop() { return t(n.a, 2); }, "catch": function _catch() { return n.v; }, abrupt: function abrupt(r, e) { return t(n.a, o[r], e); }, delegateYield: function delegateYield(r, o, a) { return e.resultName = o, t(n.d, _regeneratorValues(r), a); }, finish: function finish(r) { return t(n.f, r); } }, t = function t(r, _t, o) { n.p = e.prev, n.n = e.next; try { return r(_t, o); } finally { e.next = n.n; } }), e.resultName && (e[e.resultName] = n.v, e.resultName = void 0), e.sent = n.v, e.next = n.n; try { return r.call(this, e); } finally { n.p = e.prev, n.n = e.next; } }; } return (_regeneratorRuntime = function _regeneratorRuntime() { return { wrap: function wrap(e, t, n, o) { return r.w(a(e), t, n, o && o.reverse()); }, isGeneratorFunction: n, mark: r.m, awrap: function awrap(r, e) { return new _OverloadYield(r, e); }, AsyncIterator: _regeneratorAsyncIterator, async: function async(r, e, t, o, u) { return (n(e) ? _regeneratorAsyncGen : _regeneratorAsync)(a(r), e, t, o, u); }, keys: _regeneratorKeys, values: _regeneratorValues }; })(); }
 function _regeneratorValues(e) { if (null != e) { var t = e["function" == typeof Symbol && Symbol.iterator || "@@iterator"], r = 0; if (t) return t.call(e); if ("function" == typeof e.next) return e; if (!isNaN(e.length)) return { next: function next() { return e && r >= e.length && (e = void 0), { value: e && e[r++], done: !e }; } }; } throw new TypeError(_typeof(e) + " is not iterable"); }
 function _regeneratorKeys(e) { var n = Object(e), r = []; for (var t in n) r.unshift(t); return function e() { for (; r.length;) if ((t = r.pop()) in n) return e.value = t, e.done = !1, e; return e.done = !0, e; }; }
@@ -16,7 +18,7 @@ function _createClass(e, r, t) { return r && _defineProperties(e.prototype, 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 { VolumeFileFormat } from "@aics/vole-core";
+import { createDefaultMetadata, VolumeFileFormat } from "@aics/vole-core";
 var SceneStore = /*#__PURE__*/function () {
   function SceneStore(context, paths) {
     _classCallCheck(this, SceneStore);
@@ -77,8 +79,8 @@ var SceneStore = /*#__PURE__*/function () {
     key: "loadScene",
     value: function () {
       var _loadScene = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2(scene, image, loadSpec, options) {
-        var _options$onCreateScen;
-        var loader, spec;
+        var _spec$channels, _options$onCreateScen;
+        var loader, spec, imageInfo, maxTime, adjustedSpec;
         return _regeneratorRuntime().wrap(function _callee2$(_context2) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
@@ -91,10 +93,19 @@ var SceneStore = /*#__PURE__*/function () {
               _context2.next = 7;
               return loader.createImageInfo(spec);
             case 7:
-              image.imageInfo.imageInfo = _context2.sent.imageInfo;
-              options === null || options === void 0 || (_options$onCreateScen = options.onCreateScene) === null || _options$onCreateScen === void 0 || _options$onCreateScen.call(options, image, scene);
-              loader.loadVolumeData(image, spec, options === null || options === void 0 ? void 0 : options.onChannelLoaded);
-            case 10:
+              imageInfo = _context2.sent.imageInfo;
+              image.imageInfo.imageInfo = imageInfo;
+              image.imageMetadata = createDefaultMetadata(imageInfo);
+              maxTime = imageInfo.multiscaleLevelDims[imageInfo.multiscaleLevel].shape[0] - 1;
+              adjustedSpec = _objectSpread(_objectSpread({}, spec), {}, {
+                channels: (_spec$channels = spec.channels) === null || _spec$channels === void 0 ? void 0 : _spec$channels.filter(function (channelIndex) {
+                  return channelIndex < imageInfo.channelNames.length;
+                }),
+                time: Math.min(spec.time, maxTime)
+              });
+              options === null || options === void 0 || (_options$onCreateScen = options.onCreateScene) === null || _options$onCreateScen === void 0 || _options$onCreateScen.call(options, image, scene, adjustedSpec);
+              loader.loadVolumeData(image, adjustedSpec, options === null || options === void 0 ? void 0 : options.onChannelLoaded);
+            case 14:
             case "end":
               return _context2.stop();
           }

package/es/aics-image-viewer/shared/utils/test/urlParsing.test.js

@@ -438,7 +438,9 @@ describe("Viewer state", function () {
     scene: 0,
     cameraState: undefined,
     singleChannelMode: false,
-    singleChannelIndex: 0
+    singleChannelIndex: 0,
+    useExactScaleLevel: false,
+    scaleLevelIndex: 0
   };
   var SERIALIZED_DEFAULT_VIEWER_STATE = {
     mode: "volumetric",
@@ -459,7 +461,9 @@ describe("Viewer state", function () {
     t: "0",
     scene: "0",
     scm: "0",
-    sci: "0"
+    sci: "0",
+    esl: "0",
+    scl: "0"
   };
   var CUSTOM_VIEWER_STATE = {
     renderMode: RenderMode.pathTrace,
@@ -489,6 +493,8 @@ describe("Viewer state", function () {
     scene: 3,
     singleChannelMode: true,
     singleChannelIndex: 3,
+    useExactScaleLevel: true,
+    scaleLevelIndex: 3,
     cameraState: {
       position: [-1.05, -4, 45],
       target: [0, 0, 0],
@@ -517,6 +523,8 @@ describe("Viewer state", function () {
     scene: "3",
     scm: "1",
     sci: "3",
+    esl: "1",
+    scl: "3",
     cam: "pos:-1.05:-4:45,tar:0:0:0,up:0:1:0,ort:3.534,fov:43.5"
   };
   describe("serializeViewerState", function () {

package/es/aics-image-viewer/shared/utils/urlParsing.js

@@ -1,5 +1,5 @@
 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); }
-var _ViewerChannelSetting, _ViewerChannelSetting2, _ViewerChannelSetting3, _ViewerChannelSetting4, _ViewerChannelSetting5, _ViewerChannelSetting6, _ViewerChannelSetting7, _ViewerChannelSetting8, _ViewerChannelSetting9, _ViewerChannelSetting10, _ViewerChannelSetting11, _ViewerChannelSetting12, _ViewerChannelSetting13, _ViewerChannelSetting14, _ViewerStateKeys$View, _ViewerStateKeys$Mode, _ViewerStateKeys$Mask, _ViewerStateKeys$Imag, _ViewerStateKeys$Axes, _ViewerStateKeys$Boun, _ViewerStateKeys$Sing, _ViewerStateKeys$Sing2, _ViewerStateKeys$Boun2, _ViewerStateKeys$Back, _ViewerStateKeys$Auto, _ViewerStateKeys$Brig, _ViewerStateKeys$Dens, _ViewerStateKeys$Leve, _ViewerStateKeys$Inte, _ViewerStateKeys$Regi, _ViewerStateKeys$Slic, _ViewerStateKeys$Time, _ViewerStateKeys$Scen, _ViewerStateKeys$Came;
+var _ViewerChannelSetting, _ViewerChannelSetting2, _ViewerChannelSetting3, _ViewerChannelSetting4, _ViewerChannelSetting5, _ViewerChannelSetting6, _ViewerChannelSetting7, _ViewerChannelSetting8, _ViewerChannelSetting9, _ViewerChannelSetting10, _ViewerChannelSetting11, _ViewerChannelSetting12, _ViewerChannelSetting13, _ViewerChannelSetting14, _ViewerStateKeys$View, _ViewerStateKeys$Mode, _ViewerStateKeys$Mask, _ViewerStateKeys$Imag, _ViewerStateKeys$Axes, _ViewerStateKeys$Boun, _ViewerStateKeys$Sing, _ViewerStateKeys$Sing2, _ViewerStateKeys$Boun2, _ViewerStateKeys$Back, _ViewerStateKeys$Auto, _ViewerStateKeys$Brig, _ViewerStateKeys$Dens, _ViewerStateKeys$Leve, _ViewerStateKeys$Inte, _ViewerStateKeys$Regi, _ViewerStateKeys$Slic, _ViewerStateKeys$Time, _ViewerStateKeys$Scen, _ViewerStateKeys$UseE, _ViewerStateKeys$Scal, _ViewerStateKeys$Came;
 function _regeneratorRuntime() { "use strict"; var r = _regenerator(), e = r.m(_regeneratorRuntime), t = (Object.getPrototypeOf ? Object.getPrototypeOf(e) : e.__proto__).constructor; function n(r) { var e = "function" == typeof r && r.constructor; return !!e && (e === t || "GeneratorFunction" === (e.displayName || e.name)); } var o = { "throw": 1, "return": 2, "break": 3, "continue": 3 }; function a(r) { var e, t; return function (n) { e || (e = { stop: function stop() { return t(n.a, 2); }, "catch": function _catch() { return n.v; }, abrupt: function abrupt(r, e) { return t(n.a, o[r], e); }, delegateYield: function delegateYield(r, o, a) { return e.resultName = o, t(n.d, _regeneratorValues(r), a); }, finish: function finish(r) { return t(n.f, r); } }, t = function t(r, _t, o) { n.p = e.prev, n.n = e.next; try { return r(_t, o); } finally { e.next = n.n; } }), e.resultName && (e[e.resultName] = n.v, e.resultName = void 0), e.sent = n.v, e.next = n.n; try { return r.call(this, e); } finally { n.p = e.prev, n.n = e.next; } }; } return (_regeneratorRuntime = function _regeneratorRuntime() { return { wrap: function wrap(e, t, n, o) { return r.w(a(e), t, n, o && o.reverse()); }, isGeneratorFunction: n, mark: r.m, awrap: function awrap(r, e) { return new _OverloadYield(r, e); }, AsyncIterator: _regeneratorAsyncIterator, async: function async(r, e, t, o, u) { return (n(e) ? _regeneratorAsyncGen : _regeneratorAsync)(a(r), e, t, o, u); }, keys: _regeneratorKeys, values: _regeneratorValues }; })(); }
 function _regeneratorValues(e) { if (null != e) { var t = e["function" == typeof Symbol && Symbol.iterator || "@@iterator"], r = 0; if (t) return t.call(e); if ("function" == typeof e.next) return e; if (!isNaN(e.length)) return { next: function next() { return e && r >= e.length && (e = void 0), { value: e && e[r++], done: !e }; } }; } throw new TypeError(_typeof(e) + " is not iterable"); }
 function _regeneratorKeys(e) { var n = Object(e), r = []; for (var t in n) r.unshift(t); return function e() { for (; r.length;) if ((t = r.pop()) in n) return e.value = t, e.done = !1, e; return e.done = !0, e; }; }
@@ -113,6 +113,8 @@ export var ViewerStateKeys = /*#__PURE__*/function (ViewerStateKeys) {
   ViewerStateKeys["CameraState"] = "cam";
   ViewerStateKeys["SingleChannelMode"] = "scm";
   ViewerStateKeys["SingleChannelIndex"] = "sci";
+  ViewerStateKeys["UseExactScaleLevel"] = "esl";
+  ViewerStateKeys["ScaleLevelIndex"] = "scl";
   return ViewerStateKeys;
 }({});
 export var CameraTransformKeys = /*#__PURE__*/function (CameraTransformKeys) {
@@ -272,6 +274,8 @@ _ViewerStateKeys$Regi = ViewerStateKeys.Region;
 _ViewerStateKeys$Slic = ViewerStateKeys.Slice;
 _ViewerStateKeys$Time = ViewerStateKeys.Time;
 _ViewerStateKeys$Scen = ViewerStateKeys.Scene;
+_ViewerStateKeys$UseE = ViewerStateKeys.UseExactScaleLevel;
+_ViewerStateKeys$Scal = ViewerStateKeys.ScaleLevelIndex;
 _ViewerStateKeys$Came = ViewerStateKeys.CameraState;
 /** Serialized version of `ViewerState`. */
 export var ViewerStateParams = /*#__PURE__*/_createClass(function ViewerStateParams() {
@@ -325,6 +329,10 @@ export var ViewerStateParams = /*#__PURE__*/_createClass(function ViewerStatePar
   _defineProperty(this, _ViewerStateKeys$Time, undefined);
   /** Scene number, for multiscene images. 0 by default. */
   _defineProperty(this, _ViewerStateKeys$Scen, undefined);
+  /** Whether to use an exact scale level index. 0 by default. */
+  _defineProperty(this, _ViewerStateKeys$UseE, undefined);
+  /** The exact scale level index to use, if `UseExactScaleLevel` is 1. 0 by default. */
+  _defineProperty(this, _ViewerStateKeys$Scal, undefined);
   /**
    * Camera transform settings, as a list of `key:value` pairs separated by commas.
    * Valid keys are defined in `CameraTransformKeys`:
@@ -952,6 +960,8 @@ export function deserializeViewerState(params) {
     renderMode: parseStringEnum(params[ViewerStateKeys.Mode], RenderMode),
     singleChannelMode: parseStringBoolean(params[ViewerStateKeys.SingleChannelMode]),
     singleChannelIndex: parseStringInt(params[ViewerStateKeys.SingleChannelIndex], 0, Number.POSITIVE_INFINITY),
+    useExactScaleLevel: parseStringBoolean(params[ViewerStateKeys.UseExactScaleLevel]),
+    scaleLevelIndex: parseStringInt(params[ViewerStateKeys.ScaleLevelIndex], 0, Number.MAX_SAFE_INTEGER),
     cameraState: parseCameraState(params[ViewerStateKeys.CameraState])
   };
 
@@ -983,11 +993,15 @@ export function deserializeViewerState(params) {
  * @returns A `ViewerStateParams` object with the serialized parameters. Undefined values are removed.
  */
 export function serializeViewerState(state, removeDefaults) {
-  var _state$maskAlpha, _state$brightness, _state$density, _state$levels, _state$time, _state$scene, _state$singleChannelI, _result;
+  var _state$maskAlpha, _state$brightness, _state$density, _state$levels, _state$time, _state$scene, _state$singleChannelI, _state$scaleLevelInde, _result;
   if (removeDefaults) {
     state = removeMatchingProperties(state, getDefaultViewerState());
+    // special case: if there's an explicit scale level but it's not being used, no reason to include it
+    if (state.scaleLevelIndex !== undefined && state.useExactScaleLevel === undefined) {
+      delete state.scaleLevelIndex;
+    }
   }
-  var result = (_result = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_result, ViewerStateKeys.Mode, state.renderMode), ViewerStateKeys.Mask, (_state$maskAlpha = state.maskAlpha) === null || _state$maskAlpha === void 0 ? void 0 : _state$maskAlpha.toString()), ViewerStateKeys.Image, state.imageType), ViewerStateKeys.Axes, serializeBoolean(state.showAxes)), ViewerStateKeys.BoundingBox, serializeBoolean(state.showBoundingBox)), ViewerStateKeys.BoundingBoxColor, state.boundingBoxColor && colorArrayToHex(state.boundingBoxColor)), ViewerStateKeys.BackgroundColor, state.backgroundColor && colorArrayToHex(state.backgroundColor)), ViewerStateKeys.Autorotate, serializeBoolean(state.autorotate)), ViewerStateKeys.Brightness, (_state$brightness = state.brightness) === null || _state$brightness === void 0 ? void 0 : _state$brightness.toString()), ViewerStateKeys.Density, (_state$density = state.density) === null || _state$density === void 0 ? void 0 : _state$density.toString()), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_result, ViewerStateKeys.Interpolation, serializeBoolean(state.interpolationEnabled)), ViewerStateKeys.Region, state.region && serializeRegion(state.region)), ViewerStateKeys.Slice, state.slice && serializeSlice(state.slice)), ViewerStateKeys.Levels, (_state$levels = state.levels) === null || _state$levels === void 0 ? void 0 : _state$levels.join(",")), ViewerStateKeys.Time, (_state$time = state.time) === null || _state$time === void 0 ? void 0 : _state$time.toString()), ViewerStateKeys.Scene, (_state$scene = state.scene) === null || _state$scene === void 0 ? void 0 : _state$scene.toString()), ViewerStateKeys.SingleChannelMode, serializeBoolean(state.singleChannelMode)), ViewerStateKeys.SingleChannelIndex, (_state$singleChannelI = state.singleChannelIndex) === null || _state$singleChannelI === void 0 ? void 0 : _state$singleChannelI.toString()), ViewerStateKeys.CameraState, state.cameraState && serializeCameraState(state.cameraState, removeDefaults, state.viewMode)));
+  var result = (_result = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_result, ViewerStateKeys.Mode, state.renderMode), ViewerStateKeys.Mask, (_state$maskAlpha = state.maskAlpha) === null || _state$maskAlpha === void 0 ? void 0 : _state$maskAlpha.toString()), ViewerStateKeys.Image, state.imageType), ViewerStateKeys.Axes, serializeBoolean(state.showAxes)), ViewerStateKeys.BoundingBox, serializeBoolean(state.showBoundingBox)), ViewerStateKeys.BoundingBoxColor, state.boundingBoxColor && colorArrayToHex(state.boundingBoxColor)), ViewerStateKeys.BackgroundColor, state.backgroundColor && colorArrayToHex(state.backgroundColor)), ViewerStateKeys.Autorotate, serializeBoolean(state.autorotate)), ViewerStateKeys.Brightness, (_state$brightness = state.brightness) === null || _state$brightness === void 0 ? void 0 : _state$brightness.toString()), ViewerStateKeys.Density, (_state$density = state.density) === null || _state$density === void 0 ? void 0 : _state$density.toString()), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_result, ViewerStateKeys.Interpolation, serializeBoolean(state.interpolationEnabled)), ViewerStateKeys.Region, state.region && serializeRegion(state.region)), ViewerStateKeys.Slice, state.slice && serializeSlice(state.slice)), ViewerStateKeys.Levels, (_state$levels = state.levels) === null || _state$levels === void 0 ? void 0 : _state$levels.join(",")), ViewerStateKeys.Time, (_state$time = state.time) === null || _state$time === void 0 ? void 0 : _state$time.toString()), ViewerStateKeys.Scene, (_state$scene = state.scene) === null || _state$scene === void 0 ? void 0 : _state$scene.toString()), ViewerStateKeys.SingleChannelMode, serializeBoolean(state.singleChannelMode)), ViewerStateKeys.SingleChannelIndex, (_state$singleChannelI = state.singleChannelIndex) === null || _state$singleChannelI === void 0 ? void 0 : _state$singleChannelI.toString()), ViewerStateKeys.UseExactScaleLevel, serializeBoolean(state.useExactScaleLevel)), ViewerStateKeys.ScaleLevelIndex, (_state$scaleLevelInde = state.scaleLevelIndex) === null || _state$scaleLevelInde === void 0 ? void 0 : _state$scaleLevelInde.toString()), _defineProperty(_result, ViewerStateKeys.CameraState, state.cameraState && serializeCameraState(state.cameraState, removeDefaults, state.viewMode)));
   var viewModeToViewParam = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ViewMode.threeD, "3D"), ViewMode.xy, "Z"), ViewMode.xz, "Y"), ViewMode.yz, "X");
   result[ViewerStateKeys.View] = state.viewMode && viewModeToViewParam[state.viewMode];
   return removeUndefinedProperties(result);

package/es/aics-image-viewer/state/store.js

@@ -6,14 +6,15 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import { create } from "zustand";
 import { subscribeWithSelector } from "zustand/middleware";
-import { getDefaultViewerState } from "../shared/constants";
+import { getDefaultChannelColor, getDefaultViewerState } from "../shared/constants";
+import { initializeOneChannelSetting } from "../shared/utils/viewerState";
 import { createResetSlice } from "./reset";
 import { validateState, validateStateValue } from "./util";
-var createViewerStateStore = function createViewerStateStore(set) {
-  for (var _len = arguments.length, etc = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-    etc[_key - 1] = arguments[_key];
+var createViewerStateStore = function createViewerStateStore(set, get) {
+  for (var _len = arguments.length, etc = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
+    etc[_key - 2] = arguments[_key];
   }
-  return _objectSpread(_objectSpread(_objectSpread({}, createResetSlice.apply(void 0, [set].concat(etc))), getDefaultViewerState()), {}, {
+  return _objectSpread(_objectSpread(_objectSpread({}, createResetSlice.apply(void 0, [set, get].concat(etc))), getDefaultViewerState()), {}, {
     channelSettings: [],
     changeViewerSetting: function changeViewerSetting(key, value) {
       return set(function (state) {
@@ -41,6 +42,21 @@ var createViewerStateStore = function createViewerStateStore(set) {
         channelSettings: channelSettings
       });
     },
+    initChannelSettings: function initChannelSettings(names, settings) {
+      var currentSettings = get().channelSettings;
+      var channelSettings = names.map(function (name, index) {
+        var _currentSettings$inde;
+        var color = getDefaultChannelColor(index);
+        var channelSetting = (_currentSettings$inde = currentSettings[index]) !== null && _currentSettings$inde !== void 0 ? _currentSettings$inde : initializeOneChannelSetting(name, index, color, settings);
+        return _objectSpread(_objectSpread({}, channelSetting), {}, {
+          name: name
+        });
+      });
+      set({
+        channelSettings: channelSettings
+      });
+      return channelSettings;
+    },
     applyColorPresets: function applyColorPresets(colors) {
       set(function (_ref2) {
         var channelSettings = _ref2.channelSettings;
@@ -77,7 +93,9 @@ export var selectViewerSettings = function selectViewerSettings(store) {
     scene: store.scene,
     cameraState: store.cameraState,
     singleChannelMode: store.singleChannelMode,
-    singleChannelIndex: store.singleChannelIndex
+    singleChannelIndex: store.singleChannelIndex,
+    useExactScaleLevel: store.useExactScaleLevel,
+    scaleLevelIndex: store.scaleLevelIndex
   };
 };
 

package/es/aics-image-viewer/state/subscribers.js

@@ -139,7 +139,28 @@ export var subscribeImageToState = function subscribeImageToState(store, view3d,
   // interpolation
   store.subscribe(select("interpolationEnabled"), function (enabled) {
     return view3d.setInterpolationEnabled(image, enabled);
-  }, REF_EQ),
+  }, REF_EQ), store.subscribe(function (_ref3) {
+    var useExactScaleLevel = _ref3.useExactScaleLevel,
+      scaleLevelIndex = _ref3.scaleLevelIndex;
+    return {
+      useExactScaleLevel: useExactScaleLevel,
+      scaleLevelIndex: scaleLevelIndex
+    };
+  }, function (_ref4) {
+    var useExactScaleLevel = _ref4.useExactScaleLevel,
+      scaleLevelIndex = _ref4.scaleLevelIndex;
+    if (useExactScaleLevel) {
+      image.updateRequiredData({
+        useExplicitLevel: true,
+        multiscaleLevel: scaleLevelIndex
+      });
+    } else {
+      image.updateRequiredData({
+        useExplicitLevel: false,
+        multiscaleLevel: undefined
+      });
+    }
+  }, DEEP_EQ),
   // clipping
   store.subscribe(selectAxisClipUpdateInfo("x"), axisClipUpdater("x"), DEEP_EQ), store.subscribe(selectAxisClipUpdateInfo("y"), axisClipUpdater("y"), DEEP_EQ), store.subscribe(selectAxisClipUpdateInfo("z"), axisClipUpdater("z"), DEEP_EQ)
 

package/es/aics-image-viewer/state/test/reset.test.js

@@ -40,7 +40,9 @@ var arbitraryViewerState = function arbitraryViewerState() {
     scene: 3,
     singleChannelMode: true,
     singleChannelIndex: 3,
-    cameraState: undefined
+    cameraState: undefined,
+    useExactScaleLevel: true,
+    scaleLevelIndex: 3
   };
 };
 var arbitraryChannelState = function arbitraryChannelState() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aics/vole-app",
-  "version": "3.2.3",
+  "version": "3.3.0",
   "description": "web view of cell volume images",
   "main": "es/index.js",
   "module": "es/index.js",
@@ -45,7 +45,7 @@
   "author": "Megan Riel-Mehan",
   "license": "ISC",
   "dependencies": {
-    "@aics/vole-core": "^4.6.4",
+    "@aics/vole-core": "^4.8.2",
     "@ant-design/icons": "^5.2.5",
     "@fortawesome/fontawesome-svg-core": "^6.5.2",
     "@fortawesome/free-solid-svg-icons": "^6.5.2",

package/type-declarations/aics-image-viewer/components/Toolbar/index.d.ts

@@ -1,3 +1,4 @@
+import type { VolumeDims } from "@aics/vole-core/es/types/VolumeDims";
 import React from "react";
 import "./styles.css";
 type ToolbarProps = {
@@ -6,6 +7,8 @@ type ToolbarProps = {
     hasCellId: boolean;
     hasParentImage: boolean;
     canPathTrace: boolean;
+    multiscaleDims?: VolumeDims[];
+    multiscaleIndex?: number;
     resetCamera: () => void;
     downloadScreenshot: () => void;
     resetToSavedViewerState: () => void;

package/type-declarations/aics-image-viewer/components/useVolume.d.ts

@@ -1,4 +1,4 @@
-import { type RawArrayLoaderOptions, type View3d, type Volume } from "@aics/vole-core";
+import { LoadSpec, type RawArrayLoaderOptions, type View3d, type Volume } from "@aics/vole-core";
 import type { AxisName } from "../shared/types";
 import PlayControls from "../shared/utils/playControls";
 import type { ChannelGrouping, ViewerChannelSettings } from "../shared/utils/viewerChannelSettings";
@@ -7,7 +7,7 @@ export type UseVolumeOptions = {
     /** Callback called just once when the volume is created. */
     onCreateImage?: (image: Volume) => void;
     /** Callback called on any scene change, including the initial image load. */
-    onChangeScene?: (image: Volume, sceneIndex: number) => void;
+    onChangeScene?: (image: Volume, sceneIndex: number, loadSpec: LoadSpec) => void;
     /** Callback for when a single channel of the volume has loaded. */
     onChannelLoaded?: (image: Volume, channelIndex: number, isInitialLoad: boolean) => void;
     /** Callback for when image loading encounters an error. */

package/type-declarations/aics-image-viewer/shared/utils/sceneStore.d.ts

@@ -1,7 +1,7 @@
 import type { LoadSpec, PrefetchDirection, RawArrayLoaderOptions, Volume, VolumeLoaderContext } from "@aics/vole-core";
 import type { ThreadableVolumeLoader } from "@aics/vole-core/es/types/loaders/IVolumeLoader";
 export type LoadSceneOptions = {
-    onCreateScene?: (volume: Volume, sceneIndex: number) => void;
+    onCreateScene?: (volume: Volume, sceneIndex: number, loadSpec: LoadSpec) => void;
     onChannelLoaded?: (volume: Volume, channelIndex: number) => void;
 };
 export default class SceneStore {

package/type-declarations/aics-image-viewer/shared/utils/urlParsing.d.ts

@@ -50,7 +50,9 @@ export declare enum ViewerStateKeys {
     Scene = "scene",
     CameraState = "cam",
     SingleChannelMode = "scm",
-    SingleChannelIndex = "sci"
+    SingleChannelIndex = "sci",
+    UseExactScaleLevel = "esl",
+    ScaleLevelIndex = "scl"
 }
 export declare enum CameraTransformKeys {
     /** Camera position in 3D coordinates. */
@@ -230,6 +232,10 @@ export declare class ViewerStateParams {
     [ViewerStateKeys.Time]?: string;
     /** Scene number, for multiscene images. 0 by default. */
     [ViewerStateKeys.Scene]?: string;
+    /** Whether to use an exact scale level index. 0 by default. */
+    [ViewerStateKeys.UseExactScaleLevel]?: string;
+    /** The exact scale level index to use, if `UseExactScaleLevel` is 1. 0 by default. */
+    [ViewerStateKeys.ScaleLevelIndex]?: string;
     /**
      * Camera transform settings, as a list of `key:value` pairs separated by commas.
      * Valid keys are defined in `CameraTransformKeys`:

package/type-declarations/aics-image-viewer/state/store.d.ts

@@ -1,4 +1,5 @@
 import type { ColorArray } from "../shared/utils/colorRepresentations";
+import type { ViewerChannelSettings } from "../shared/utils/viewerChannelSettings";
 import { type ResetStateSlice } from "./reset";
 import type { ChannelState, ViewerState } from "./types";
 export type ViewerStateActions = {
@@ -8,6 +9,7 @@ export type ViewerStateActions = {
     }>) => void;
     changeChannelSetting: <K extends keyof ChannelState>(index: number | number[], value: Partial<Record<K, ChannelState[K]>>) => void;
     replaceAllChannelSettings: (channelSettings: ChannelState[]) => void;
+    initChannelSettings: (names: string[], settings?: ViewerChannelSettings) => ChannelState[];
     applyColorPresets: (colors: ColorArray[]) => void;
 };
 export type ViewerStore = ViewerState & ViewerStateActions & ResetStateSlice & {

package/type-declarations/aics-image-viewer/state/types.d.ts

@@ -24,6 +24,8 @@ export type ViewerState = {
     cameraState: Partial<CameraState> | undefined;
     singleChannelMode: boolean;
     singleChannelIndex: number;
+    useExactScaleLevel: boolean;
+    scaleLevelIndex: number;
 };
 export type ChannelState = {
     name: string;