@aics/vole-app 3.3.0 → 3.4.0

package/LICENSE

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

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

@@ -41,6 +41,7 @@ var defaultVisibleControls = {
   alphaMaskSlider: true,
   autoRotateButton: true,
   axisClipSliders: true,
+  rotationSliders: true,
   brightnessSlider: true,
   backgroundColorPicker: true,
   boundingBoxColorPicker: true,
@@ -54,7 +55,8 @@ var defaultVisibleControls = {
   resetCameraButton: true,
   showAxesButton: true,
   showBoundingBoxButton: true,
-  metadataViewer: true
+  metadataViewer: true,
+  scaleLevelControls: true
 };
 var defaultProps = {
   // rawData has a "dtype" which is expected to be "uint8", a "shape":[c,z,y,x] and a "buffer" which is a DataView
@@ -151,8 +153,8 @@ var App = function App(props) {
   var showError = (_props$showError = props.showError) !== null && _props$showError !== void 0 ? _props$showError : _showError;
   useEffect(function () {
     // Get notifications of loading errors which occur after the initial load, e.g. on time change or new channel load
-    view3d.setLoadErrorHandler(function (_vol, e) {
-      return showError(e);
+    view3d.setLoadErrorHandler(function (vol, e) {
+      return showError(e, vol);
     });
     return function () {
       return view3d.setLoadErrorHandler(undefined);
@@ -323,17 +325,17 @@ var App = function App(props) {
 
     // save the channel's new range for remapping next time
     channelRangesRef.current[channelIndex] = [thisChannel.rawMin, thisChannel.rawMax];
-    view3d.updateLuts(image);
+
+    // Note: updateLuts and updateActiveChannels are not called here because the
+    // channelVersion bump (via onChannelDataLoaded) will trigger ChannelUpdater
+    // effects that apply LUT/color settings and call updateLuts with the final state.
     view3d.onVolumeData(image, [channelIndex]);
     if (image.channelNames[channelIndex] === maskChannelName) {
       view3d.setVolumeChannelAsMask(image, channelIndex);
     }
-    if (image.isLoaded()) {
-      view3d.updateActiveChannels(image);
-    }
   }, [view3d, changeChannelSetting, maskChannelName, props.viewerChannelSettings]);
-  var onError = useCallback(function (error) {
-    showError(error);
+  var onError = useCallback(function (error, image) {
+    showError(error, image);
     onImageTitleChange === null || onImageTitleChange === void 0 || onImageTitleChange(undefined);
   }, [showError, onImageTitleChange]);
   var volume = useVolume(scenes, {

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

@@ -5,37 +5,66 @@ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length)
 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; }
 import { Button, Drawer } from "antd";
-import React, { useCallback, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import ViewerIcon from "../shared/ViewerIcon";
 import "./styles.css";
 var BottomPanel = function BottomPanel(_ref) {
-  var children = _ref.children,
+  var _contents$page;
+  var contents = _ref.contents,
     openProp = _ref.open,
-    title = _ref.title,
+    pageProp = _ref.pageIndex,
     height = _ref.height,
-    onOpenChange = _ref.onOpenChange;
+    onPageChange = _ref.onPageChange;
   var _useState = useState(true),
     _useState2 = _slicedToArray(_useState, 2),
     openState = _useState2[0],
     setOpenState = _useState2[1];
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    pageState = _useState4[0],
+    setPageState = _useState4[1];
   var open = openProp !== null && openProp !== void 0 ? openProp : openState;
-  var toggleDrawer = useCallback(function () {
+  var page = pageProp !== null && pageProp !== void 0 ? pageProp : pageState;
+  var setPage = useCallback(function (index) {
+    var nextOpen = !open || index !== page;
     if (openProp === undefined) {
-      setOpenState(!open);
+      setOpenState(nextOpen);
     }
-    onOpenChange === null || onOpenChange === void 0 || onOpenChange(!open);
-  }, [open, openProp, onOpenChange]);
-  var optionsButton = /*#__PURE__*/React.createElement(Button, {
-    className: "options-button",
-    size: "small",
-    onClick: toggleDrawer
-  }, title || "Options", /*#__PURE__*/React.createElement(ViewerIcon, {
-    type: "closePanel",
-    className: "button-arrow",
-    style: {
-      fontSize: "15px"
+    if (pageProp === undefined) {
+      setPageState(index);
     }
-  }));
+    onPageChange === null || onPageChange === void 0 || onPageChange(nextOpen ? index : null);
+  }, [open, openProp, page, pageProp, onPageChange]);
+
+  // If length of `contents` decreases, ensure we're still on a valid page
+  useEffect(function () {
+    if (page >= contents.length && contents.length > 0) {
+      var nextPage = contents.length - 1;
+      if (pageProp === undefined) {
+        setPageState(nextPage);
+      }
+      onPageChange === null || onPageChange === void 0 || onPageChange(open ? nextPage : null);
+    }
+  }, [contents.length, onPageChange, open, page, pageProp]);
+  var optionsButton = /*#__PURE__*/React.createElement("div", {
+    className: "options-button-container"
+  }, contents.map(function (_ref2, index) {
+    var title = _ref2.title;
+    return /*#__PURE__*/React.createElement(Button, {
+      key: index,
+      className: open && page === index ? "options-button button-open" : "options-button",
+      size: "small",
+      onClick: function onClick() {
+        return setPage(index);
+      }
+    }, title, /*#__PURE__*/React.createElement(ViewerIcon, {
+      type: "closePanel",
+      className: "button-arrow",
+      style: {
+        fontSize: "15px"
+      }
+    }));
+  }).reverse());
   return /*#__PURE__*/React.createElement("div", {
     className: "bottom-panel"
   }, /*#__PURE__*/React.createElement(Drawer, {
@@ -49,6 +78,6 @@ var BottomPanel = function BottomPanel(_ref) {
     height: height !== null && height !== void 0 ? height : 190
   }, /*#__PURE__*/React.createElement("div", {
     className: "drawer-body-wrapper"
-  }, children)));
+  }, open !== null && ((_contents$page = contents[page]) === null || _contents$page === void 0 ? void 0 : _contents$page.children))));
 };
 export default BottomPanel;

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

@@ -46,18 +46,27 @@
       color:white;
     }
 
+  .bottom-panel .options-button-container{
+    position:absolute;
+    right:0;
+  }
+
   .bottom-panel .options-button{
+    bottom:0;
+    transition:bottom 0.1s linear;
     border:none;
     box-shadow:none;
     margin-right:0.8em;
     margin-bottom:0.2em;
-    position:absolute;
-    right:0;
   }
 
   .bottom-panel .button-arrow{
     transform:rotate(270deg);
-    transition:transform 0.2s linear !important;
+    transition:transform 0.1s linear !important;
+  }
+
+  .bottom-panel .options-button.button-open .button-arrow{
+    transform:rotate(90deg);
   }
 
   .bottom-panel .drawer-body-wrapper{
@@ -65,6 +74,10 @@
     width:100%;
   }
 
+  .bottom-panel .ant-drawer.ant-drawer-open .options-button:not(.button-open){
+      bottom:0.8em;
+    }
+
   .bottom-panel .ant-drawer.ant-drawer-open .ant-drawer-content-wrapper{
       transform:none;
       box-shadow:none;
@@ -79,7 +92,3 @@
     .bottom-panel .ant-drawer.ant-drawer-open .ant-drawer-title .ant-btn.ant-btn-default{
       background-color:var(--color-controlpanel-drawer-bg);
     }
-
-  .bottom-panel .ant-drawer.ant-drawer-open .button-arrow{
-      transform:rotate(90deg);
-    }

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

@@ -9,8 +9,9 @@ import React from "react";
 import { CLIPPING_PANEL_HEIGHT_DEFAULT, CLIPPING_PANEL_HEIGHT_TALL } from "../../shared/constants";
 import { ViewMode } from "../../shared/enums";
 import { select, useViewerState } from "../../state/store";
-import AxisClipSliders from "../AxisClipSliders";
 import BottomPanel from "../BottomPanel";
+import { AxisClipSliders } from "../dimension_sliders/AxisClipSliders";
+import { RotationSliders } from "../dimension_sliders/RotationSliders";
 import "./styles.css";
 var ViewerWrapper = function ViewerWrapper(props) {
   var view3dviewerRef = /*#__PURE__*/React.createRef();
@@ -47,6 +48,36 @@ var ViewerWrapper = function ViewerWrapper(props) {
   var time = useViewerState(select("time"));
   var scene = useViewerState(select("scene"));
   var clippingPanelTall = numTimesteps > 1 && numScenes > 1 && viewMode === ViewMode.threeD;
+  var bottomPanelContents = [];
+  if (visibleControls.axisClipSliders && !!props.image) {
+    bottomPanelContents.push({
+      title: "Clipping",
+      children: /*#__PURE__*/React.createElement(AxisClipSliders, {
+        mode: viewMode,
+        image: props.image,
+        changeViewerSetting: changeViewerSetting,
+        numSlices: props.numSlices,
+        numSlicesLoaded: props.numSlicesLoaded,
+        numScenes: numScenes,
+        region: region,
+        slices: slice,
+        numTimesteps: numTimesteps,
+        time: time,
+        scene: scene,
+        playControls: props.playControls,
+        playingAxis: props.playingAxis
+      })
+    });
+  }
+  if (visibleControls.rotationSliders) {
+    bottomPanelContents.push({
+      title: "Rotation",
+      children: /*#__PURE__*/React.createElement(RotationSliders, {
+        view3d: props.view3d,
+        disable: viewMode !== ViewMode.threeD
+      })
+    });
+  }
   return /*#__PURE__*/React.createElement("div", {
     className: "cell-canvas",
     style: _objectSpread(_objectSpread({}, STYLES.viewer), {}, {
@@ -56,25 +87,14 @@ var ViewerWrapper = function ViewerWrapper(props) {
     ref: view3dviewerRef,
     style: STYLES.view3d
   }), /*#__PURE__*/React.createElement(BottomPanel, {
-    title: "Clipping",
     open: props.clippingPanelOpen,
-    onOpenChange: props.onClippingPanelOpenChange,
-    height: clippingPanelTall ? CLIPPING_PANEL_HEIGHT_TALL : CLIPPING_PANEL_HEIGHT_DEFAULT
-  }, visibleControls.axisClipSliders && !!props.image && /*#__PURE__*/React.createElement(AxisClipSliders, {
-    mode: viewMode,
-    image: props.image,
-    changeViewerSetting: changeViewerSetting,
-    numSlices: props.numSlices,
-    numSlicesLoaded: props.numSlicesLoaded,
-    numScenes: numScenes,
-    region: region,
-    slices: slice,
-    numTimesteps: numTimesteps,
-    time: time,
-    scene: scene,
-    playControls: props.playControls,
-    playingAxis: props.playingAxis
-  })), renderOverlay());
+    onPageChange: function onPageChange(open) {
+      var _props$onClippingPane;
+      return (_props$onClippingPane = props.onClippingPanelOpenChange) === null || _props$onClippingPane === void 0 ? void 0 : _props$onClippingPane.call(props, open !== null);
+    },
+    height: clippingPanelTall ? CLIPPING_PANEL_HEIGHT_TALL : CLIPPING_PANEL_HEIGHT_DEFAULT,
+    contents: bottomPanelContents
+  }), renderOverlay());
 };
 export default ViewerWrapper;
 var STYLES = {

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

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

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

@@ -1,4 +1,3 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -38,10 +37,11 @@ function ControlPanel(props) {
   var resetToDefaultViewerState = useViewerState(select("resetToDefaultViewerState"));
   var singleChannelMode = useViewerState(select("singleChannelMode"));
   var changeViewerSetting = useViewerState(select("changeViewerSetting"));
-  var controlPanelContainerRef = React.useRef(null);
-  var getDropdownContainer = controlPanelContainerRef.current ? function () {
-    return controlPanelContainerRef.current;
-  } : undefined;
+  var containerRef = React.useRef(null);
+  var getDropdownContainer = function getDropdownContainer() {
+    var _containerRef$current;
+    return (_containerRef$current = containerRef.current) !== null && _containerRef$current !== void 0 ? _containerRef$current : document.body;
+  };
   var viewerChannelSettings = props.viewerChannelSettings,
     visibleControls = props.visibleControls,
     hasImage = props.hasImage;
@@ -98,12 +98,11 @@ function ControlPanel(props) {
     }, "Single channel mode"))));
   };
   var renderTab = function renderTab(thisTab, icon) {
-    return /*#__PURE__*/React.createElement(Tooltip, _extends({
+    return /*#__PURE__*/React.createElement(Tooltip, {
       title: ControlTabNames[thisTab],
       placement: "right"
-    }, !props.collapsed && {
-      open: false
-    }), /*#__PURE__*/React.createElement(Button, {
+    }, /*#__PURE__*/React.createElement(Button, {
+      "aria-label": ControlTabNames[thisTab],
       className: tab === thisTab ? "ant-btn-icon-only btn-tabactive" : "ant-btn-icon-only",
       onClick: function onClick() {
         return setTab(thisTab);
@@ -111,6 +110,8 @@ function ControlPanel(props) {
       icon: typeof icon === "string" ? icon : undefined
     }, _typeof(icon) === "object" && icon));
   };
+
+  // TODO this can just be a component...?
   var renderAdvancedSettings = function renderAdvancedSettings() {
     var items = [{
       key: 0,
@@ -151,22 +152,27 @@ function ControlPanel(props) {
       onClick: resetToDefaultViewerState
     }, "Clear all settings"))));
   };
+  var collapseLabel = props.collapsed ? "Show panel" : "Hide panel";
   return /*#__PURE__*/React.createElement("div", {
     className: "control-panel-col-container",
-    ref: controlPanelContainerRef
+    ref: containerRef
   }, /*#__PURE__*/React.createElement("div", {
     className: "control-panel-tab-col",
     style: {
       flex: "0 0 50px"
     }
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    title: collapseLabel,
+    placement: "right"
   }, /*#__PURE__*/React.createElement(Button, {
+    "aria-label": collapseLabel,
     className: "ant-btn-icon-only btn-collapse" + (props.collapsed ? " btn-collapse-collapsed" : ""),
     onClick: function onClick() {
       return props.setCollapsed(!props.collapsed);
     }
   }, /*#__PURE__*/React.createElement(ViewerIcon, {
     type: "closePanel"
-  })), /*#__PURE__*/React.createElement("div", {
+  }))), /*#__PURE__*/React.createElement("div", {
     className: "tab-divider"
   }), renderTab(ControlTab.Channels, /*#__PURE__*/React.createElement(ViewerIcon, {
     type: "channels"

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

@@ -20,16 +20,16 @@
     }
 
 .control-panel-col-container .control-panel-tab-col .ant-btn:not([disabled]).btn-tabactive{
-          color:var(--color-button-icon-activated-text);
-          background-color:var(--color-button-icon-activated-bg);
-          border-color:var(--color-button-icon-activated-outline);
+          color:var(--color-button-icon-active-text);
+          background-color:var(--color-button-icon-active-bg);
+          border-color:var(--color-button-icon-active-outline);
         }
 
 .control-panel-col-container .control-panel-tab-col .ant-btn:not([disabled]):hover,
         .control-panel-col-container .control-panel-tab-col .ant-btn:not([disabled]):focus-visible{
-          color:var(--color-button-icon-activated-text);
+          color:var(--color-button-icon-active-text);
           background-color:var(--color-button-primary-hover-bg);
-          border-color:var(--color-button-icon-activated-outline);
+          border-color:var(--color-button-icon-active-outline);
         }
 
 .control-panel-col-container .control-panel-tab-col .btn-collapse svg{