@aics/vole-app 3.3.0 → 3.3.1

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],

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

@@ -108,155 +108,46 @@
     margin-right:6px;
   }
 
+.viewer-toolbar .btn-borderless,
+  .viewer-toolbar .ant-select.ant-select-outlined .ant-select-selector,
+  .viewer-toolbar .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-checked){
+    background-color:var(--color-toolbar-button-bg);
+  }
+
 .viewer-toolbar .ant-btn-icon-only{
     padding-bottom:4px;
     padding-left:1px;
   }
 
 .viewer-toolbar .btn-borderless{
-    background-color:var(--color-toolbar-button-bg);
     border-color:transparent;
     color:var(--color-text-body);
   }
 
 .viewer-toolbar .btn-active{
-    color:var(--color-button-icon-activated-text);
-    background-color:var(--color-button-icon-activated-bg);
-    border:1px solid var(--color-button-icon-activated-outline);
+    color:var(--color-button-icon-active-text);
+    background-color:var(--color-button-icon-active-bg);
+    border:1px solid var(--color-button-icon-active-outline);
   }
 
-.viewer-toolbar .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-disabled){
-    background-color:black;
-    box-shadow:-1px 0px 0px 0px transparent;
-    transition-property:color, background-color, border-color, box-shadow;
-  }
-
-.viewer-toolbar .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-disabled).ant-radio-button-wrapper-checked,
-    .viewer-toolbar .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-disabled):hover{
-      outline:none;
-      color:white;
-      border-color:#aeacae;
-    }
-
-.viewer-toolbar .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-disabled).ant-radio-button-wrapper-checked:not(:first-child), .viewer-toolbar .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-disabled):hover:not(:first-child){
-        box-shadow:-1px 0px 0px 0px #aeacae;
-      }
-
-.viewer-toolbar .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-disabled).ant-radio-button-wrapper-checked{
-      background-color:#4b4b4b;
-    }
-
-.viewer-toolbar .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-disabled):hover{
-      background-color:#aa88ed;
-      color:white;
-    }
+.viewer-toolbar{
+  --color-button-radio-hover-outline:var(--color-button-tertiary-active-outline);
+  --color-button-radio-hover-text:var(--color-button-icon-active-text);
+}
 
-.viewer-toolbar .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-disabled):focus-within{
-      outline:none;
-    }
+.viewer-toolbar .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-disabled):hover,
+  .viewer-toolbar .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-disabled):has(:focus-visible){
+    background-color:var(--color-button-tertiary-hover-text);
+  }
 
-.viewer-toolbar .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-disabled)::before{
-      content:none;
+.viewer-toolbar .ant-select.select-resolution > .ant-select-selector{
+      text-align:left;
     }
 
-.viewer-toolbar.viewer-toolbar .ant-select.select-render-setting{
-    min-width:120px;
-  }
-
-.viewer-toolbar.viewer-toolbar .ant-select.select-render-setting .ant-select-selection-item,
-    .viewer-toolbar.viewer-toolbar .ant-select.select-render-setting .ant-select-arrow{
+.viewer-toolbar .ant-select.select-resolution .ant-select-selection-item{
       color:var(--color-button-tertiary-text);
-      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{
+.viewer-toolbar .ant-select.select-resolution.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;
-      background-color:var(--color-toolbar-button-bg);
-    }
-
-.viewer-toolbar .ant-select.select-render-setting:hover:not(:disabled) .ant-select-selector,
-    .viewer-toolbar .ant-select.select-render-setting:hover:not(:disabled) .ant-select-arrow,
-    .viewer-toolbar .ant-select.select-render-setting:hover:not(:disabled) .ant-select-selection-item,
-    .viewer-toolbar .ant-select.select-render-setting:focus-visible:not(:disabled) .ant-select-selector,
-    .viewer-toolbar .ant-select.select-render-setting:focus-visible:not(:disabled) .ant-select-arrow,
-    .viewer-toolbar .ant-select.select-render-setting:focus-visible:not(:disabled) .ant-select-selection-item,
-    .viewer-toolbar.viewer-toolbar.viewer-toolbar .ant-select-open .ant-select-selector,
-    .viewer-toolbar.viewer-toolbar.viewer-toolbar .ant-select-open .ant-select-arrow,
-    .viewer-toolbar.viewer-toolbar.viewer-toolbar .ant-select-open .ant-select-selection-item{
-      color:var(--color-button-tertiary-hover-text);
-      outline-color:var(--color-button-tertiary-hover-outline);
-    }
-
-.viewer-toolbar-dropdown .ant-select-dropdown-menu-item-active{
-    transition-property:background-color, color;
-  }
-
-.viewer-toolbar-dropdown .ant-select-dropdown-menu-item-disabled,
-  .viewer-toolbar-dropdown .ant-select-dropdown-menu-item-disabled:hover{
-    color:#6e6e6e;
-  }
-
-.viewer-toolbar-dropdown .ant-select-dropdown-menu-item-active:not(.ant-select-dropdown-menu-item-disabled){
-    background-color:transparent;
-    color:white;
-  }
-
-.viewer-toolbar-dropdown .ant-select-dropdown-menu-item-active:not(.ant-select-dropdown-menu-item-disabled).ant-select-dropdown-menu-item-selected{
-      background-color:#4b4b4b;
-    }
-
-.viewer-toolbar-dropdown .ant-select-dropdown-menu-item:hover:not(.ant-select-dropdown-menu-item-disabled){
-    background-color:#f6f0ff;
-    color:#4b4b4b;
-  }
-
-@supports selector(:has(:focus-visible)){
-    .viewer-toolbar .ant-select-selection:focus-visible,
-    .viewer-toolbar .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-disabled):has(:focus-visible),
-    .viewer-toolbar .btn-borderless:focus-visible{
-      background-color:#aa88ed !important;
-      color:white !important;
-    }
-
-    .viewer-toolbar .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-disabled):has(:focus-visible){
-      outline:none;
-      border-color:#aeacae;
-    }
-
-      .viewer-toolbar .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-disabled):has(:focus-visible):not(:first-child){
-        box-shadow:-1px 0px 0px 0px #aeacae;
-      }
-}
-
-@supports not (selector(:has(:focus-visible))){
-    .viewer-toolbar .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-disabled):focus-within{
-      outline:none;
-      border-color:#aeacae;
-    }
-
-      .viewer-toolbar .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-disabled):focus-within:not(:first-child){
-        box-shadow:-1px 0px 0px 0px #aeacae;
-      }
-}

package/es/aics-image-viewer/components/shared/ControlPanelRow/styles.css

@@ -25,7 +25,7 @@
     }
 
   .control-panel-col .control-panel-row .ant-btn-text{
-    color:var(--color-button-icon-activated-text);
+    color:var(--color-button-icon-active-text);
     transition:color 0.3s;
   }
 

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

@@ -110,6 +110,9 @@ var useVolume = function useVolume(scenePaths, options) {
       setPlayingAxis(axis);
       // prioritize prefetching along the playing axis
       sceneLoader.setPrefetchPriority(axis ? [AXIS_TO_LOADER_PRIORITY[axis]] : []);
+      sceneLoader.updateFetchOptions({
+        onlyPriorityDirections: isPlaying
+      });
       // sync multichannel loading so we don't show loaded channels one at a time
       sceneLoader.syncMultichannelLoading(isPlaying);
       if (image) {

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

@@ -31,7 +31,7 @@ export var TFEDITOR_DEFAULT_COLOR = [255, 255, 255];
 export var TFEDITOR_MAX_BIN = 255;
 export var CACHE_MAX_SIZE = 1000000000;
 export var QUEUE_MAX_SIZE = 10;
-export var QUEUE_MAX_LOW_PRIORITY_SIZE = 4;
+export var QUEUE_MAX_LOW_PRIORITY_SIZE = 6;
 
 /** Maps an axis the user can "play" through to the direction to prefetch while playing that axis */
 export var AXIS_TO_LOADER_PRIORITY = {

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

@@ -13,6 +13,7 @@ var PlayControls = /*#__PURE__*/function () {
     _defineProperty(this, "playWaitingForLoad", false);
     _defineProperty(this, "playHolding", false);
     _defineProperty(this, "playTimeoutId", 0);
+    _defineProperty(this, "lastStepTime", 0);
   }
   return _createClass(PlayControls, [{
     key: "setPlayingAxis",
@@ -28,11 +29,18 @@ var PlayControls = /*#__PURE__*/function () {
       if (!this.playingAxis || this.playHolding || !this.stepAxis) {
         return;
       }
-      // If the volume is not loaded, wait for it to load before continuing
       if (!((_this$getVolumeIsLoad = this.getVolumeIsLoaded) !== null && _this$getVolumeIsLoad !== void 0 && _this$getVolumeIsLoad.call(this))) {
         this.playWaitingForLoad = true;
         return;
       }
+
+      // Enforce minimum interval between frame *presentations* (not requests).
+      // lastStepTime is set in onImageLoaded when a frame's data arrives.
+      var delay = PLAY_STEP_INTERVAL_MS - (performance.now() - this.lastStepTime);
+      if (delay > 0) {
+        this.playTimeoutId = window.setTimeout(this.playStep.bind(this), delay);
+        return;
+      }
       this.stepAxis(this.playingAxis);
       this.playTimeoutId = window.setTimeout(this.playStep.bind(this), PLAY_STEP_INTERVAL_MS);
     }
@@ -41,6 +49,9 @@ var PlayControls = /*#__PURE__*/function () {
   }, {
     key: "onImageLoaded",
     value: function onImageLoaded() {
+      // Record when the frame was presented, so scheduleNextStep enforces
+      // PLAY_STEP_INTERVAL_MS between presentations (not between requests).
+      this.lastStepTime = performance.now();
       if (this.playWaitingForLoad) {
         this.playWaitingForLoad = false;
         this.playStep();

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

@@ -158,6 +158,14 @@ var SceneStore = /*#__PURE__*/function () {
         currentLoader.setPrefetchPriority(priority);
       }
     }
+  }, {
+    key: "updateFetchOptions",
+    value: function updateFetchOptions(fetchOptions) {
+      var currentLoader = this.loaders[this.currentScene];
+      if (currentLoader) {
+        currentLoader.updateFetchOptions(fetchOptions);
+      }
+    }
   }]);
 }();
 export { SceneStore as default };

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

@@ -87,12 +87,11 @@ export function findFirstChannelMatch(channel, channelIndex, settings) {
 }
 export function getDisplayName(name, index, settings) {
   if (settings) {
+    var _c$name;
     var c = findFirstChannelMatch(name, index, settings);
-    if (c) {
-      return c.name || name;
-    }
+    return (_c$name = c === null || c === void 0 ? void 0 : c.name) !== null && _c$name !== void 0 ? _c$name : name;
   }
-  return name;
+  return name !== null && name !== void 0 ? name : index.toString();
 }
 export function makeChannelIndexGrouping(channels, settings) {
   if (!channels) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aics/vole-app",
-  "version": "3.3.0",
+  "version": "3.3.1",
   "description": "web view of cell volume images",
   "main": "es/index.js",
   "module": "es/index.js",
@@ -25,6 +25,7 @@
     "gh-build-nightly": "webpack --config webpack.dev.js --env env=production basename=/vole-app/",
     "gh-build-release": "webpack --config webpack.dev.js --env env=production basename=/website-3d-cell-viewer-release/",
     "s3-build": "webpack --config webpack.dev.js --env env=production",
+    "release-build": "webpack --config webpack.dev.js --env env=production",
     "docker-build": "webpack --config webpack.common.js --env env=production",
     "dev": "webpack --config webpack.dev.js --env env=dev",
     "lint": "eslint --config ./.eslintrc --ignore-path ./.eslintignore --ext .jsx --ext .js --ext .ts --ext .tsx ./",
@@ -43,9 +44,9 @@
     "checks": "npm run lint && npm run typeCheck && npm run test"
   },
   "author": "Megan Riel-Mehan",
-  "license": "ISC",
+  "license": "BSD-3-Clause",
   "dependencies": {
-    "@aics/vole-core": "^4.8.2",
+    "@aics/vole-core": "^4.9.1",
     "@ant-design/icons": "^5.2.5",
     "@fortawesome/fontawesome-svg-core": "^6.5.2",
     "@fortawesome/free-solid-svg-icons": "^6.5.2",
@@ -65,8 +66,7 @@
   "peerDependencies": {
     "antd": "^5.16.2",
     "react": "18.x",
-    "react-dom": "18.x",
-    "three": "^0.171.0"
+    "react-dom": "18.x"
   },
   "devDependencies": {
     "@babel/cli": "^7.14.5",

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

@@ -5,7 +5,7 @@ import type { ViewerChannelSettings } from "../../shared/utils/viewerChannelSett
 import type { ViewerState } from "../../state/types";
 /** `typeof useEffect`, but the effect handler takes a `Volume` as an argument */
 export type UseImageEffectType = (effect: (image: Volume) => void | (() => void), deps: React.DependencyList) => void;
-type ControlNames = "alphaMaskSlider" | "autoRotateButton" | "axisClipSliders" | "brightnessSlider" | "backgroundColorPicker" | "boundingBoxColorPicker" | "colorPresetsDropdown" | "densitySlider" | "levelsSliders" | "interpolationControl" | "saveSurfaceButtons" | "fovCellSwitchControls" | "viewModeRadioButtons" | "resetCameraButton" | "showAxesButton" | "showBoundingBoxButton" | "metadataViewer";
+type ControlNames = "alphaMaskSlider" | "autoRotateButton" | "axisClipSliders" | "brightnessSlider" | "backgroundColorPicker" | "boundingBoxColorPicker" | "colorPresetsDropdown" | "densitySlider" | "levelsSliders" | "interpolationControl" | "saveSurfaceButtons" | "fovCellSwitchControls" | "viewModeRadioButtons" | "resetCameraButton" | "showAxesButton" | "showBoundingBoxButton" | "metadataViewer" | "scaleLevelControls";
 /** Show/hide different elements of the UI */
 export type ControlVisibilityFlags = {
     [K in ControlNames]: boolean;
@@ -41,7 +41,7 @@ export interface AppProps {
     view3dRef?: MutableRefObject<View3d | null>;
     metadataFormatter?: (metadata: MetadataRecord) => MetadataRecord;
     onControlPanelToggle?: (collapsed: boolean) => void;
-    showError?: (error: any) => void;
+    showError?: (error: unknown, image?: Volume) => void;
     onImageTitleChange?: (title: string | undefined) => void;
 }
 export {};

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

@@ -1,11 +1,10 @@
 import React from "react";
 import type { MetadataRecord } from "../../shared/types";
-import ChannelsWidget from "../ChannelsWidget";
-import CustomizeWidget, { type CustomizeWidgetProps } from "../CustomizeWidget";
-import GlobalVolumeControls, { type GlobalVolumeControlsProps } from "../GlobalVolumeControls";
+import { type ChannelsWidgetProps } from "../ChannelsWidget";
+import { type CustomizeWidgetProps } from "../CustomizeWidget";
+import { type GlobalVolumeControlsProps } from "../GlobalVolumeControls";
 import "./styles.css";
-type PropsOf<T> = T extends React.ComponentType<infer P> ? P : never;
-interface ControlPanelProps extends PropsOf<typeof ChannelsWidget>, PropsOf<typeof GlobalVolumeControls>, PropsOf<typeof CustomizeWidget> {
+interface ControlPanelProps extends ChannelsWidgetProps, GlobalVolumeControlsProps, CustomizeWidgetProps {
     hasImage: boolean;
     visibleControls: GlobalVolumeControlsProps["visibleControls"] & CustomizeWidgetProps["visibleControls"] & {
         colorPresetsDropdown: boolean;

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

@@ -1,16 +1,19 @@
+import { type Volume } from "@aics/vole-core";
 import React from "react";
 import "./styles.css";
 export type ErrorAlertDescription = {
     title: string;
     description: React.ReactNode;
 };
+type ErrorInfo = {
+    error: unknown;
+    count: number;
+    dims?: [number, number, number, number, number];
+};
 export type ErrorAlertProps = {
-    errors: unknown;
-    /** The number of times we've seen an error of the type that is currently being displayed before */
-    firstErrorCount?: number;
+    errors: ErrorInfo[];
     afterClose?: () => void;
-    onSkipError?: () => void;
 };
 declare const ErrorAlert: React.FC<ErrorAlertProps>;
-export declare const useErrorAlert: () => [React.ReactNode, (error: unknown) => void];
+export declare const useErrorAlert: () => [React.ReactNode, (error: unknown, image?: Volume) => void];
 export default ErrorAlert;

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

@@ -1,4 +1,4 @@
-import type { VolumeDims } from "@aics/vole-core/es/types/VolumeDims";
+import type { VolumeDims } from "@aics/vole-core";
 import React from "react";
 import "./styles.css";
 type ToolbarProps = {
@@ -19,6 +19,7 @@ type ToolbarProps = {
         resetCameraButton: boolean;
         showAxesButton: boolean;
         showBoundingBoxButton: boolean;
+        scaleLevelControls: boolean;
     };
 };
 declare const Toolbar: React.FC<ToolbarProps>;

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

@@ -11,7 +11,7 @@ export type UseVolumeOptions = {
     /** 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. */
-    onError?: (error: unknown) => void;
+    onError?: (error: unknown, image?: Volume) => void;
     /** The name of a channel which should be treated as a mask rather than as viewable data. */
     maskChannelName?: string;
 };

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

@@ -10,7 +10,7 @@ export declare const TFEDITOR_DEFAULT_COLOR: ColorArray;
 export declare const TFEDITOR_MAX_BIN = 255;
 export declare const CACHE_MAX_SIZE = 1000000000;
 export declare const QUEUE_MAX_SIZE = 10;
-export declare const QUEUE_MAX_LOW_PRIORITY_SIZE = 4;
+export declare const QUEUE_MAX_LOW_PRIORITY_SIZE = 6;
 /** Maps an axis the user can "play" through to the direction to prefetch while playing that axis */
 export declare const AXIS_TO_LOADER_PRIORITY: Record<AxisName | "t", PrefetchDirection>;
 /** Maps channel data types to their minimum and maximum values */

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

@@ -5,6 +5,7 @@ export default class PlayControls {
     playWaitingForLoad: boolean;
     playHolding: boolean;
     playTimeoutId: number;
+    private lastStepTime;
     getVolumeIsLoaded?: () => boolean;
     stepAxis?: (axis: PlayAxisName) => void;
     onPlayingAxisChanged?: (axis: PlayAxisName | null) => void;

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

@@ -1,4 +1,4 @@
-import type { LoadSpec, PrefetchDirection, RawArrayLoaderOptions, Volume, VolumeLoaderContext } from "@aics/vole-core";
+import type { LoadSpec, PrefetchDirection, RawArrayLoaderOptions, Volume, VolumeLoaderContext, ZarrLoaderFetchOptions } from "@aics/vole-core";
 import type { ThreadableVolumeLoader } from "@aics/vole-core/es/types/loaders/IVolumeLoader";
 export type LoadSceneOptions = {
     onCreateScene?: (volume: Volume, sceneIndex: number, loadSpec: LoadSpec) => void;
@@ -18,4 +18,5 @@ export default class SceneStore {
     createVolume(scene: number, loadSpec: LoadSpec, onChannelLoaded?: (volume: Volume, channelIndex: number) => void): Promise<Volume>;
     syncMultichannelLoading(sync: boolean): void;
     setPrefetchPriority(priority: PrefetchDirection[]): void;
+    updateFetchOptions(fetchOptions: Partial<ZarrLoaderFetchOptions>): void;
 }

package/LICENSE.txt

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