@aics/vole-app 2.11.0 → 2.13.0

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

@@ -31,6 +31,8 @@ var ChannelUpdater = function ChannelUpdater(_ref) {
       if (image && version > 0) {
         return effect(image);
       }
+      // react-hooks will check that `deps` match `effect`'s dependencies, so we can safely exclude `effect` here
+      // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [].concat(_toConsumableArray(deps), [image, version]));
   };
 
@@ -40,30 +42,30 @@ var ChannelUpdater = function ChannelUpdater(_ref) {
       view3d.setVolumeChannelEnabled(image, index, volumeEnabled);
       view3d.updateLuts(image);
     }
-  }, [image, volumeEnabled]);
+  }, [image, volumeEnabled, index, view3d]);
   useEffect(function () {
     if (image) {
       view3d.setVolumeChannelOptions(image, index, {
         isosurfaceEnabled: isosurfaceEnabled
       });
     }
-  }, [image, isosurfaceEnabled]);
+  }, [image, isosurfaceEnabled, index, view3d]);
   useImageEffect(function (currentImage) {
     return view3d.setVolumeChannelOptions(currentImage, index, {
       isovalue: isovalue
     });
-  }, [isovalue]);
+  }, [isovalue, index, view3d]);
   useImageEffect(function (currentImage) {
     return view3d.setVolumeChannelOptions(currentImage, index, {
       isosurfaceOpacity: opacity
     });
-  }, [opacity]);
+  }, [opacity, index, view3d]);
   useImageEffect(function (currentImage) {
     view3d.setVolumeChannelOptions(currentImage, index, {
       color: color
     });
     view3d.updateLuts(currentImage);
-  }, [color]);
+  }, [color, index, view3d]);
   var controlPoints = channelState.controlPoints,
     ramp = channelState.ramp,
     useControlPoints = channelState.useControlPoints;
@@ -75,22 +77,19 @@ var ChannelUpdater = function ChannelUpdater(_ref) {
     var gradient = controlPointsToLut(controlPointsToUse);
     currentImage.setLut(index, gradient);
     view3d.updateLuts(currentImage);
-  }, [controlPoints, ramp, useControlPoints]);
+  }, [controlPoints, ramp, useControlPoints, index, view3d]);
   useImageEffect(function (currentImage) {
     if (colorizeEnabled) {
       // TODO get the labelColors from the tf editor component
       var lut = new Lut().createLabelColors(currentImage.getHistogram(index));
       currentImage.setColorPalette(index, lut.lut);
-      currentImage.setColorPaletteAlpha(index, colorizeAlpha);
-    } else {
-      currentImage.setColorPaletteAlpha(index, 0);
+      // following effect will also run and call `updateLuts`
     }
-    view3d.updateLuts(currentImage);
-  }, [colorizeEnabled]);
+  }, [colorizeEnabled, index, view3d]);
   useImageEffect(function (currentImage) {
     currentImage.setColorPaletteAlpha(index, colorizeEnabled ? colorizeAlpha : 0);
     view3d.updateLuts(currentImage);
-  }, [colorizeAlpha]);
+  }, [colorizeEnabled, colorizeAlpha, index, view3d]);
   return null;
 };
 export default ChannelUpdater;

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

@@ -23,7 +23,7 @@ import { Layout } from "antd";
 import { debounce, isEqual } from "lodash";
 import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { Box3, Vector3 } from "three";
-import { AXIS_MARGIN_DEFAULT, CACHE_MAX_SIZE, CLIPPING_PANEL_HEIGHT_DEFAULT, CLIPPING_PANEL_HEIGHT_TALL, CONTROL_PANEL_CLOSE_WIDTH, getDefaultChannelColor, getDefaultViewerState, QUEUE_MAX_LOW_PRIORITY_SIZE, QUEUE_MAX_SIZE, SCALE_BAR_MARGIN_DEFAULT } from "../../shared/constants";
+import { AXIS_MARGIN_DEFAULT, CACHE_MAX_SIZE, CLIPPING_PANEL_HEIGHT_DEFAULT, CLIPPING_PANEL_HEIGHT_TALL, CONTROL_PANEL_CLOSE_WIDTH, DTYPE_RANGE, getDefaultChannelColor, getDefaultViewerState, QUEUE_MAX_LOW_PRIORITY_SIZE, QUEUE_MAX_SIZE, SCALE_BAR_MARGIN_DEFAULT } from "../../shared/constants";
 import { ImageType, RenderMode, ViewMode } from "../../shared/enums";
 import { activeAxisMap } from "../../shared/types";
 import { colorArrayToFloats } from "../../shared/utils/colorRepresentations";
@@ -87,6 +87,7 @@ var axisToLoaderPriority = {
   y: PrefetchDirection.Y_PLUS,
   x: PrefetchDirection.X_PLUS
 };
+var CLIPPING_PANEL_ANIMATION_DURATION_MS = 300;
 var setIndicatorPositions = function setIndicatorPositions(view3d, panelOpen, hasTime, hasScenes, isMode3d) {
   // The height of the clipping panel includes the button, but we're trying to put these elements next to the button
   var CLIPPING_PANEL_BUTTON_HEIGHT = 40;
@@ -115,6 +116,11 @@ var setIndicatorPositions = function setIndicatorPositions(view3d, panelOpen, ha
   view3d.setTimestepIndicatorPosition(SCALE_BAR_MARGIN_DEFAULT[0], scaleBarY);
   view3d.setScaleBarPosition(scaleBarX, scaleBarY);
 };
+
+// TODO this component, specifically its volume loading behavior, is way out of compliance with react-hooks lints
+//   and will need a larger refactoring pass to fix that.
+/* eslint-disable react-hooks/exhaustive-deps */
+/* eslint-disable react-hooks/rules-of-hooks */
 var App = function App(props) {
   var _scenes$length, _scenes, _image$imageInfo$volu, _image$imageInfo$subr, _image$imageInfo$time, _props$transform2, _props$transform4;
   props = _objectSpread(_objectSpread({}, defaultProps), props);
@@ -223,19 +229,21 @@ var App = function App(props) {
     _useState12 = _slicedToArray(_useState11, 2),
     hasAutoClosedControlPanel = _useState12[0],
     setHasAutoClosedControlPanel = _useState12[1];
-
-  // Clipping panel state doesn't need to trigger renders on change, so it can go in a ref
-  var clippingPanelOpenRef = useRef(true);
+  var _useState13 = useState(true),
+    _useState14 = _slicedToArray(_useState13, 2),
+    clippingPanelOpen = _useState14[0],
+    setClippingPanelOpen = _useState14[1];
+  var clippingPanelOpenTimeout = useRef(0);
 
   // `PlayControls` manages playing through time and spatial axes, which isn't practical with "pure" React
   // Playback state goes here, but the play/pause buttons that mainly control this class are down in `AxisClipSliders`
   var playControls = useConstructor(function () {
     return new PlayControls();
   });
-  var _useState13 = useState(null),
-    _useState14 = _slicedToArray(_useState13, 2),
-    playingAxis = _useState14[0],
-    setPlayingAxis = _useState14[1];
+  var _useState15 = useState(null),
+    _useState16 = _slicedToArray(_useState15, 2),
+    playingAxis = _useState16[0],
+    setPlayingAxis = _useState16[1];
   playControls.onPlayingAxisChanged = function (axis) {
     var _loader$current, _loader$current2;
     (_loader$current = loader.current) === null || _loader$current === void 0 || _loader$current.setPrefetchPriority(axis ? [axisToLoaderPriority[axis]] : []);
@@ -288,7 +296,10 @@ var App = function App(props) {
         controlPoints = _initializeLut.controlPoints;
       changeChannelSetting(channelIndex, {
         controlPoints: controlPoints,
-        ramp: controlPointsToRamp(ramp)
+        ramp: controlPointsToRamp(ramp),
+        // set the default range of the transfer function editor to cover the full range of the data type
+        plotMin: DTYPE_RANGE[thisChannel.dtype].min,
+        plotMax: DTYPE_RANGE[thisChannel.dtype].max
       });
       onResetChannel(channelIndex);
     } else {
@@ -301,8 +312,8 @@ var App = function App(props) {
       var oldRange = channelRangesRef.current[channelIndex];
       if (thisChannelsSettings.useControlPoints) {
         // control points were just automatically remapped - update in state
-        // now manually remap ramp using the channel's old range
         var rampControlPoints = rampToControlPoints(thisChannelsSettings.ramp);
+        // now manually remap ramp using the channel's old range
         var remappedRampControlPoints = remapControlPointsForChannel(rampControlPoints, oldRange, thisChannel);
         changeChannelSetting(channelIndex, {
           ramp: controlPointsToRamp(remappedRampControlPoints),
@@ -393,7 +404,7 @@ var App = function App(props) {
       })
     });
     var mode3d = viewerSettings.viewMode === ViewMode.threeD;
-    setIndicatorPositions(view3d, clippingPanelOpenRef.current, aimg.imageInfo.times > 1, numScenes > 1, mode3d);
+    setIndicatorPositions(view3d, clippingPanelOpen, aimg.imageInfo.times > 1, numScenes > 1, mode3d);
     imageLoadHandlers.current.forEach(function (effect) {
       return effect(aimg);
     });
@@ -545,25 +556,31 @@ var App = function App(props) {
       anchor.click();
     });
   }, []);
-  var resetCamera = useCallback(function () {
-    return view3d.resetCamera();
-  }, []);
-  var onClippingPanelVisibleChange = useCallback(function (panelOpen, hasTime, hasScenes, mode3d) {
-    clippingPanelOpenRef.current = panelOpen;
+  var onClippingPanelOpenChange = useCallback(function (panelOpen) {
+    if (panelOpen === clippingPanelOpen) {
+      return;
+    }
+    var hasTime = numTimesteps > 1;
+    var hasScenes = numScenes > 1;
+    var mode3d = viewerSettings.viewMode === ViewMode.threeD;
+    setClippingPanelOpen(panelOpen);
     setIndicatorPositions(view3d, panelOpen, hasTime, hasScenes, mode3d);
 
     // Hide indicators while clipping panel is in motion - otherwise they pop to the right place prematurely
-    view3d.setShowScaleBar(false);
-    view3d.setShowTimestepIndicator(false);
-    view3d.setShowAxis(false);
-  }, [viewerSettings.showAxes]);
-  var onClippingPanelVisibleChangeEnd = useCallback(function () {
-    view3d.setShowScaleBar(true);
-    view3d.setShowTimestepIndicator(true);
-    if (viewerSettings.showAxes) {
-      view3d.setShowAxis(true);
+    if (panelOpen) {
+      view3d.setShowScaleBar(false);
+      view3d.setShowTimestepIndicator(false);
+      view3d.setShowAxis(false);
+      window.clearTimeout(clippingPanelOpenTimeout.current);
+      clippingPanelOpenTimeout.current = window.setTimeout(function () {
+        view3d.setShowScaleBar(true);
+        view3d.setShowTimestepIndicator(true);
+        if (viewerSettings.showAxes) {
+          view3d.setShowAxis(true);
+        }
+      }, CLIPPING_PANEL_ANIMATION_DURATION_MS);
     }
-  }, [viewerSettings.showAxes]);
+  }, [view3d, numTimesteps, numScenes, viewerSettings.viewMode, viewerSettings.showAxes, clippingPanelOpen]);
   var getMetadata = useCallback(function () {
     var _props2 = props,
       metadata = _props2.metadata,
@@ -572,12 +589,24 @@ var App = function App(props) {
     if (imageMetadata && metadataFormatter) {
       imageMetadata = metadataFormatter(imageMetadata);
     }
+    var sceneMeta;
+    if (Array.isArray(metadata)) {
+      // If metadata is an array, try to index it by scene
+      if (metadata.length >= numScenes) {
+        sceneMeta = metadata[viewerState.current.scene];
+      } else {
+        sceneMeta = metadata[0];
+      }
+    } else {
+      sceneMeta = metadata;
+    }
     if (imageMetadata && Object.keys(imageMetadata).length > 0) {
       return _objectSpread({
         Image: imageMetadata
-      }, metadata);
+      }, sceneMeta);
     } else {
-      return metadata || {};
+      var _sceneMeta;
+      return (_sceneMeta = sceneMeta) !== null && _sceneMeta !== void 0 ? _sceneMeta : {};
     }
   }, [props.metadata, props.metadataFormatter, image]);
 
@@ -777,6 +806,9 @@ var App = function App(props) {
   var pixelSize = useMemo(function () {
     return image ? image.imageInfo.physicalPixelSize.toArray() : [1, 1, 1];
   }, [image === null || image === void 0 ? void 0 : image.imageInfo.physicalPixelSize]);
+  var resetCamera = useMemo(function () {
+    return view3d.resetCamera.bind(view3d);
+  }, [view3d]);
   return /*#__PURE__*/React.createElement(StyleProvider, null, errorAlert, /*#__PURE__*/React.createElement(Layout, {
     className: "cell-viewer-app",
     style: {
@@ -842,8 +874,8 @@ var App = function App(props) {
     playingAxis: playingAxis,
     appHeight: props.appHeight,
     visibleControls: visibleControls,
-    onClippingPanelVisibleChange: onClippingPanelVisibleChange,
-    onClippingPanelVisibleChangeEnd: onClippingPanelVisibleChangeEnd
+    clippingPanelOpen: clippingPanelOpen,
+    onClippingPanelOpenChange: onClippingPanelOpenChange
   })))));
 };
 export default App;

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

@@ -29,23 +29,30 @@ var SliderRow = function SliderRow(_ref) {
     onStart = _ref.onStart,
     onEnd = _ref.onEnd;
   var isRange = vals.length > 1;
-  // If slider is a range, handles represent slice *edges*: the range around only the max slice is [max-1, max], e.g.
-  // If slider is not a range, handle represents 0-indexed slices: last slice is at max-1
-  var inputMax = isRange ? max : max - 1;
+  // If slider is a range, handles represent slice *edges*: the range around only the 1st slice is [0, 1]; the range
+  // around only the last is [max-1, max].
+  // If slider is not a range, just work with slices, but don't 0-index: 1st slice is 1, last is max
+  var min = isRange ? 0 : 1;
+  var wrappedOnSlide = isRange ? onSlide : function (values) {
+    return onSlide === null || onSlide === void 0 ? void 0 : onSlide([values[0] - 1]);
+  };
+  var wrappedOnChange = isRange ? _onChange : function (values) {
+    return _onChange === null || _onChange === void 0 ? void 0 : _onChange([values[0] - 1]);
+  };
   return /*#__PURE__*/React.createElement("span", {
     className: "axis-slider-container"
   }, /*#__PURE__*/React.createElement("span", {
     className: "slider-name"
-  }, label), inputMax === 0 ? /*#__PURE__*/React.createElement("i", null, "No values to adjust") : /*#__PURE__*/React.createElement("span", {
+  }, label), max === 0 ? /*#__PURE__*/React.createElement("i", null, "No values to adjust") : /*#__PURE__*/React.createElement("span", {
     className: "axis-slider"
   }, /*#__PURE__*/React.createElement(SmarterSlider, {
     className: isRange ? "" : "slider-single-handle",
     connect: true,
     range: {
-      min: 0,
-      max: inputMax
+      min: min,
+      max: max
     },
-    start: vals,
+    start: isRange ? vals : [vals[0] + 1],
     step: 1,
     margin: 1,
     behaviour: "drag",
@@ -66,28 +73,33 @@ var SliderRow = function SliderRow(_ref) {
       to: Math.round,
       from: parseInt
     },
-    onSlide: onSlide,
-    onChange: _onChange,
+    onSlide: wrappedOnSlide,
+    onChange: wrappedOnChange,
     onStart: onStart,
     onEnd: onEnd
-  })), inputMax > 0 && /*#__PURE__*/React.createElement("span", {
+  })), max > 0 && /*#__PURE__*/React.createElement("span", {
     className: "slider-values"
   }, /*#__PURE__*/React.createElement(NumericInput, {
-    max: inputMax,
-    value: valsReadout[0],
+    min: min,
+    max: max,
+    value: valsReadout[0] + (isRange ? 0 : 1),
     onChange: function onChange(value) {
-      return _onChange === null || _onChange === void 0 ? void 0 : _onChange(isRange ? [value, vals[1]] : [value]);
+      return _onChange === null || _onChange === void 0 ? void 0 : _onChange(isRange ? [value, vals[1]] : [value - 1]);
     }
   }), isRange && /*#__PURE__*/React.createElement(React.Fragment, null, " , ", /*#__PURE__*/React.createElement(NumericInput, {
-    max: inputMax,
+    min: min,
+    max: max,
     value: valsReadout[1],
     onChange: function onChange(value) {
       return _onChange === null || _onChange === void 0 ? void 0 : _onChange([vals[0], value]);
     }
-  })), " / ", max - 1));
+  })), " / ", max));
 };
 /** Wrapper around `SliderRow` that adds a play button and accounts for the case where not all of an axis is loaded */
 var PlaySliderRow = function PlaySliderRow(props) {
+  var onChange = props.onChange,
+    onStart = props.onStart,
+    onEnd = props.onEnd;
   // In partially-loaded axes, stores the displayed value of the slider while the user is sliding it
   var _useState = useState(props.val),
     _useState2 = _slicedToArray(_useState, 2),
@@ -99,27 +111,24 @@ var PlaySliderRow = function PlaySliderRow(props) {
     sliderHeld = _useState4[0],
     setSliderHeld = _useState4[1];
   var wrappedOnChange = useCallback(function (_ref2) {
-    var _props$onChange;
     var _ref3 = _slicedToArray(_ref2, 1),
       val = _ref3[0];
-    return (_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.call(props, val);
-  }, [props.onChange]);
+    return onChange === null || onChange === void 0 ? void 0 : onChange(val);
+  }, [onChange]);
   var wrappedSetValReadout = useCallback(function (_ref4) {
     var _ref5 = _slicedToArray(_ref4, 1),
       val = _ref5[0];
     return setValReadout(val);
   }, []);
   var wrappedOnStart = useCallback(function () {
-    var _props$onStart;
     setValReadout(props.val);
     setSliderHeld(true);
-    (_props$onStart = props.onStart) === null || _props$onStart === void 0 || _props$onStart.call(props);
-  }, [props.onStart]);
+    onStart === null || onStart === void 0 || onStart();
+  }, [onStart, props.val]);
   var wrappedOnEnd = useCallback(function () {
-    var _props$onEnd;
     setSliderHeld(false);
-    (_props$onEnd = props.onEnd) === null || _props$onEnd === void 0 || _props$onEnd.call(props);
-  }, [props.onEnd]);
+    onEnd === null || onEnd === void 0 || onEnd();
+  }, [onEnd]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SliderRow, {
     label: props.label,
     vals: [props.val],
@@ -172,7 +181,7 @@ var AxisClipSliders = function AxisClipSliders(props) {
   // Pause when view mode or volume size has changed
   useEffect(function () {
     return props.playControls.pause();
-  }, [props.mode, props.image]);
+  }, [props.mode, props.image, props.playControls]);
   var handlePlayPause = function handlePlayPause(axis, willPlay) {
     if (willPlay) {
       props.playControls.play(axis);

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

@@ -5,41 +5,26 @@ 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, { useEffect, useState } from "react";
+import React, { useCallback, useState } from "react";
 import ViewerIcon from "../shared/ViewerIcon";
 import "./styles.css";
 var BottomPanel = function BottomPanel(_ref) {
   var children = _ref.children,
+    openProp = _ref.open,
     title = _ref.title,
     height = _ref.height,
-    onVisibleChange = _ref.onVisibleChange,
-    onVisibleChangeEnd = _ref.onVisibleChangeEnd;
+    onOpenChange = _ref.onOpenChange;
   var _useState = useState(true),
     _useState2 = _slicedToArray(_useState, 2),
-    isVisible = _useState2[0],
-    setIsVisible = _useState2[1];
-
-  // Call `onVisibleChange` on mount
-  useEffect(function () {
-    onVisibleChange === null || onVisibleChange === void 0 || onVisibleChange(isVisible);
-    if (!isVisible) {
-      onVisibleChangeEnd === null || onVisibleChangeEnd === void 0 || onVisibleChangeEnd(isVisible);
+    openState = _useState2[0],
+    setOpenState = _useState2[1];
+  var open = openProp !== null && openProp !== void 0 ? openProp : openState;
+  var toggleDrawer = useCallback(function () {
+    if (openProp === undefined) {
+      setOpenState(!open);
     }
-  }, []);
-
-  // Treat changes in height as a change in visibility if the panel is open
-  useEffect(function () {
-    onVisibleChange === null || onVisibleChange === void 0 || onVisibleChange(isVisible);
-    window.setTimeout(function () {
-      return onVisibleChangeEnd === null || onVisibleChangeEnd === void 0 ? void 0 : onVisibleChangeEnd(isVisible);
-    }, 300);
-  }, [height]);
-  var toggleDrawer = function toggleDrawer() {
-    setIsVisible(!isVisible);
-    if (onVisibleChange) {
-      onVisibleChange(!isVisible);
-    }
-  };
+    onOpenChange === null || onOpenChange === void 0 || onOpenChange(!open);
+  }, [open, openProp, onOpenChange]);
   var optionsButton = /*#__PURE__*/React.createElement(Button, {
     className: "options-button",
     size: "small",
@@ -58,10 +43,9 @@ var BottomPanel = function BottomPanel(_ref) {
     placement: "bottom",
     closable: false,
     getContainer: false,
-    open: isVisible,
+    open: open,
     mask: false,
     title: optionsButton,
-    afterOpenChange: onVisibleChangeEnd,
     height: height !== null && height !== void 0 ? height : 190
   }, /*#__PURE__*/React.createElement("div", {
     className: "drawer-body-wrapper"

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

@@ -16,13 +16,7 @@ var ViewerWrapper = function ViewerWrapper(props) {
   var view3dviewerRef = /*#__PURE__*/React.createRef();
   React.useEffect(function () {
     view3dviewerRef.current.appendChild(props.view3d.getDOMElement());
-    props.view3d.setAutoRotate(props.autorotate);
-  }, []);
-
-  // TODO necessary?
-  React.useEffect(function () {
-    props.view3d.resize(null);
-  });
+  }, [props.view3d, view3dviewerRef]);
   var renderOverlay = function renderOverlay() {
     // Don't show spinner during playback - we may be constantly loading new data, it'll block the view!
     var showSpinner = props.loadingImage && !props.playingAxis;
@@ -62,11 +56,8 @@ var ViewerWrapper = function ViewerWrapper(props) {
     style: STYLES.view3d
   }), /*#__PURE__*/React.createElement(BottomPanel, {
     title: "Clipping",
-    onVisibleChange: function onVisibleChange(visible) {
-      var _props$onClippingPane;
-      (_props$onClippingPane = props.onClippingPanelVisibleChange) === null || _props$onClippingPane === void 0 || _props$onClippingPane.call(props, visible, numTimesteps > 1, numScenes > 1, viewMode === ViewMode.threeD);
-    },
-    onVisibleChangeEnd: props.onClippingPanelVisibleChangeEnd,
+    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,

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

@@ -93,7 +93,9 @@ var ChannelsWidgetRow = function ChannelsWidgetRow(props) {
       colorizeEnabled = channelState.colorizeEnabled,
       colorizeAlpha = channelState.colorizeAlpha,
       useControlPoints = channelState.useControlPoints,
-      ramp = channelState.ramp;
+      ramp = channelState.ramp,
+      plotMin = channelState.plotMin,
+      plotMax = channelState.plotMax;
     return /*#__PURE__*/React.createElement(TfEditor, {
       id: "TFEditor" + index,
       width: 418,
@@ -104,7 +106,9 @@ var ChannelsWidgetRow = function ChannelsWidgetRow(props) {
       colorizeEnabled: colorizeEnabled,
       colorizeAlpha: colorizeAlpha,
       useControlPoints: useControlPoints,
-      ramp: ramp
+      ramp: ramp,
+      plotMin: plotMin,
+      plotMax: plotMax
     });
   };
   var renderSurfaceControls = function renderSurfaceControls() {

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

@@ -30,9 +30,13 @@
     display:flex;
     justify-content:start;
     align-items:end;
-    gap:6px;
+    gap:5px;
   }
 
+.channel-rows-list .ant-list-item.channel-row .button-row .ant-btn.ant-btn-sm{
+      padding:12px 8px;
+    }
+
 .channel-rows-list .ant-list-item.channel-row.controls-closed .ant-btn-text:not(:focus-visible){
     color:var(--color-controlpanel-text);
   }

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

@@ -119,7 +119,7 @@ export var useErrorAlert = function useErrorAlert() {
       return [].concat(_toConsumableArray(prev), [errorSeenCount]);
     });
     seenErrors.set(errorTitle, errorSeenCount);
-  }, []);
+  }, [seenErrors]);
   var onSkipError = React.useCallback(function () {
     setErrorList(function (prev) {
       return prev.slice(1);

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

@@ -16,6 +16,9 @@
   .load-error-alert .ant-btn-text{
     color:var(--color-text-link);
   }
+  .load-error-alert .ant-btn-text:hover{
+      color:#25affe !important;
+    }
   .load-error-alert .ant-alert-message div:first-child{
     color:var(--color-text-section);
     font-weight:600;

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

@@ -134,7 +134,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    &:not(:focus-visible) {\n      text-decoration: none;\n    }\n\n    &:focus-visible {\n      text-decoration: underline;\n    }\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;\n  }\n\n  & .ant-checkbox-indeterminate.checked .ant-checkbox-inner {\n    background-color: var(--color-checkbox-bg);\n  }\n\n  // Add outlines to modals and dropdowns\n  & .ant-select-dropdown,\n  & .ant-dropdown-menu,\n  & .ant-modal-content {\n    border: 1px solid var(--color-modal-border);\n  }\n\n  // Force active/hovered text to be white instead of grey for better contrast\n  & .ant-dropdown-menu-item-active {\n    color: var(--color-menu-hover-text);\n  }\n\n  // Remove padding in dropdown menus and make items reactangular + flush with the edge\n  & .ant-dropdown-menu,\n  & .ant-select-dropdown {\n    padding: 0;\n    overflow: hidden;\n\n    & .ant-dropdown-menu-item,\n    & .ant-select-item {\n      border-radius: 0;\n    }\n  }\n"])), function (_ref) {
+var CssProvider = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n\n  ", "\n\n  h1, h2, h3, h4, p {\n    font-family: var(--font-family);\n  }\n\n  h1 {\n    color: var(--color-text-header);\n    font-size: 28px;\n    font-weight: 400;\n  }\n\n  h2 {\n    color: var(--color-text-section);\n    font-size: 19px;\n    font-weight: 400;\n  }\n\n  h3 {\n    color: var(--color-text-header);\n    font-size: 16px;\n    font-weight: 600;\n  }\n\n  h4 {\n    color: var(--color-text-header);\n    font-size: 14px;\n    font-weight: 400;\n  }\n\n  p {\n    color: var(--color-text-body);\n    font-size: 14px;\n    font-weight: 400;\n  }\n\n  a {\n    color: var(--color-text-link);\n  }\n\n  & *::selection {\n    background-color: var(--color-text-selection-bg);\n    color: var(--color-text-selection-text);\n  }\n\n  /** TODO: Go through these styles and see if we can use Ant ConfigProvider for them instead. */\n  .ant-btn-link,\n  .ant-btn-text,\n  .ant-btn-primary,\n  .ant-btn-icon-only {\n    box-shadow: none;\n\n    &:hover:not(:disabled),\n    &:focus-visible:not(:disabled) {\n      background-color: var(--color-button-primary-hover-bg);\n      border-color: var(--color-button-primary-hover-bg);\n      color: var(--color-button-primary-text);\n    }\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\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.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);
 });