@aics/vole-app 2.12.0 → 2.13.1

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

@@ -43,7 +43,7 @@ var SliderRow = function SliderRow(_ref) {
     className: "axis-slider-container"
   }, /*#__PURE__*/React.createElement("span", {
     className: "slider-name"
-  }, label), max === 0 ? /*#__PURE__*/React.createElement("i", null, "No values to adjust") : /*#__PURE__*/React.createElement("span", {
+  }, label), max <= min ? /*#__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",
@@ -77,7 +77,7 @@ var SliderRow = function SliderRow(_ref) {
     onChange: wrappedOnChange,
     onStart: onStart,
     onEnd: onEnd
-  })), max > 0 && /*#__PURE__*/React.createElement("span", {
+  })), max > min && /*#__PURE__*/React.createElement("span", {
     className: "slider-values"
   }, /*#__PURE__*/React.createElement(NumericInput, {
     min: min,
@@ -97,6 +97,9 @@ var SliderRow = function SliderRow(_ref) {
 };
 /** 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),
@@ -108,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],
@@ -181,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

@@ -94,7 +94,7 @@ var ChannelsWidgetRow = function ChannelsWidgetRow(props) {
       colorizeAlpha = channelState.colorizeAlpha,
       useControlPoints = channelState.useControlPoints,
       ramp = channelState.ramp,
-      lockPlotToDataRange = channelState.lockPlotToDataRange,
+      plotMin = channelState.plotMin,
       plotMax = channelState.plotMax;
     return /*#__PURE__*/React.createElement(TfEditor, {
       id: "TFEditor" + index,
@@ -107,7 +107,7 @@ var ChannelsWidgetRow = function ChannelsWidgetRow(props) {
       colorizeAlpha: colorizeAlpha,
       useControlPoints: useControlPoints,
       ramp: ramp,
-      lockPlotToDataRange: lockPlotToDataRange,
+      plotMin: plotMin,
       plotMax: plotMax
     });
   };

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/TfEditor/index.js

@@ -250,7 +250,9 @@ var clamp = function clamp(value, min, max) {
   return Math.min(Math.max(value, min), max);
 };
 var TfEditor = function TfEditor(props) {
-  var changeChannelSetting = props.changeChannelSetting;
+  var changeChannelSetting = props.changeChannelSetting,
+    plotMin = props.plotMin,
+    plotMax = props.plotMax;
   var innerWidth = props.width - TFEDITOR_MARGINS.left - TFEDITOR_MARGINS.right;
   var innerHeight = props.height - TFEDITOR_MARGINS.top - TFEDITOR_MARGINS.bottom;
   var _useState = useState(null),
@@ -294,22 +296,27 @@ var TfEditor = function TfEditor(props) {
   var _props$channelData = props.channelData,
     rawMin = _props$channelData.rawMin,
     rawMax = _props$channelData.rawMax,
-    dtype = _props$channelData.dtype;
+    dtype = _props$channelData.dtype,
+    histogram = _props$channelData.histogram;
   var typeRange = DTYPE_RANGE[dtype];
 
   // d3 scales define the mapping between data and screen space (and do the heavy lifting of generating plot axes)
   /** `xScale` is in raw intensity range, not U8 range. We use `u8ToAbsolute` and `absoluteToU8` to translate to U8. */
-  var _useMemo = useMemo(function () {
-      var domain = props.lockPlotToDataRange ? [rawMin, rawMax] : [typeRange.min, props.plotMax];
-      var scale = d3.scaleLinear().domain(domain).range([0, innerWidth]);
-      var plotMinU8 = absoluteToU8(domain[0], props.channelData);
-      var plotMaxU8 = absoluteToU8(domain[1], props.channelData);
-      return [scale, plotMinU8, plotMaxU8];
-    }, [innerWidth, rawMin, rawMax, typeRange, props.lockPlotToDataRange, props.plotMax]),
-    _useMemo2 = _slicedToArray(_useMemo, 3),
-    xScale = _useMemo2[0],
-    plotMinU8 = _useMemo2[1],
-    plotMaxU8 = _useMemo2[2];
+  var xScale = useMemo(function () {
+    return d3.scaleLinear().domain([plotMin, plotMax]).range([0, innerWidth]);
+  }, [innerWidth, plotMin, plotMax]);
+  var plotMinU8 = useMemo(function () {
+    return absoluteToU8(plotMin, {
+      rawMin: rawMin,
+      rawMax: rawMax
+    });
+  }, [plotMin, rawMin, rawMax]);
+  var plotMaxU8 = useMemo(function () {
+    return absoluteToU8(plotMax, {
+      rawMin: rawMin,
+      rawMax: rawMax
+    });
+  }, [plotMax, rawMin, rawMax]);
   var yScale = useMemo(function () {
     return d3.scaleLinear().domain([0, 1]).range([innerHeight, 0]);
   }, [innerHeight]);
@@ -454,12 +461,15 @@ var TfEditor = function TfEditor(props) {
   var areaPath = useMemo(function () {
     var _areaGenerator;
     var areaGenerator = d3.area().x(function (d) {
-      return xScale(controlPointToAbsolute(d, props.channelData));
+      return xScale(controlPointToAbsolute(d, {
+        rawMin: rawMin,
+        rawMax: rawMax
+      }));
     }).y0(function (d) {
       return yScale(d.opacity);
     }).y1(innerHeight).curve(d3.curveLinear);
     return (_areaGenerator = areaGenerator(controlPointsToRender)) !== null && _areaGenerator !== void 0 ? _areaGenerator : undefined;
-  }, [controlPointsToRender, xScale, yScale, innerHeight]);
+  }, [controlPointsToRender, xScale, yScale, innerHeight, rawMin, rawMax]);
 
   /** d3-generated svg data string representing the "basic mode" min/max slider handles */
   var sliderHandlePath = useMemo(function () {
@@ -503,11 +513,11 @@ var TfEditor = function TfEditor(props) {
     if (el === null) {
       return;
     }
-    var numBins = props.channelData.histogram.getNumBins();
+    var numBins = histogram.getNumBins();
     if (numBins < 1) {
       return;
     }
-    var _getHistogramBinLengt = getHistogramBinLengths(props.channelData.histogram),
+    var _getHistogramBinLengt = getHistogramBinLengths(histogram),
       binLengths = _getHistogramBinLengt.binLengths,
       max = _getHistogramBinLengt.max;
     var start = Math.max(0, Math.ceil(plotMinU8));
@@ -519,18 +529,21 @@ var TfEditor = function TfEditor(props) {
     .data(binLengthsToRender) // bind the histogram bins to this selection
     .join("rect") // ensure we have exactly as many bound `rect` elements in the DOM as we have histogram bins
     .attr("class", "bar").attr("width", barWidth).attr("x", function (_len, idx) {
-      return xScale(u8ToAbsolute(idx + start, props.channelData));
+      return xScale(u8ToAbsolute(idx + start, {
+        rawMin: rawMin,
+        rawMax: rawMax
+      }));
     }) // set position and height from data
     .attr("y", function (len) {
       return binScale(len);
     }).attr("height", function (len) {
       return innerHeight - binScale(len);
     });
-  }, [xScale, props.channelData, props.channelData.histogram, innerWidth, innerHeight, plotMinU8, plotMaxU8]);
+  }, [xScale, rawMin, rawMax, histogram, innerWidth, innerHeight, plotMinU8, plotMaxU8]);
   var applyTFGenerator = useCallback(function (generator) {
     setSelectedPointIdx(null);
     lastColorRef.current = TFEDITOR_DEFAULT_COLOR;
-    var lut = TF_GENERATORS[generator](props.channelData.histogram);
+    var lut = TF_GENERATORS[generator](histogram);
     if (props.useControlPoints) {
       setControlPoints(lut.controlPoints.map(function (cp) {
         return _objectSpread(_objectSpread({}, cp), {}, {
@@ -540,12 +553,13 @@ var TfEditor = function TfEditor(props) {
     } else {
       setRamp(controlPointsToRamp(lut.controlPoints));
     }
-  }, [props.channelData.histogram, props.useControlPoints]);
+  }, [histogram, props.useControlPoints, setControlPoints, setRamp]);
   var createTFGeneratorButton = function createTFGeneratorButton(generator, name, description) {
     return /*#__PURE__*/React.createElement(Tooltip, {
       title: description,
       placement: "top"
     }, /*#__PURE__*/React.createElement(Button, {
+      size: "small",
       onClick: function onClick() {
         return applyTFGenerator(generator);
       }
@@ -572,14 +586,14 @@ var TfEditor = function TfEditor(props) {
       onContextMenu: handleControlPointContextMenu
     });
   }) : null;
-  // move selected control point to the end so it's not occluded by other nearby points
+  // move selected control point to the end so it's drawn last and not occluded by other nearby points
   if (controlPointCircles !== null && selectedPointIdx !== null) {
     controlPointCircles.push(controlPointCircles.splice(selectedPointIdx, 1)[0]);
   }
   var viewerModeString = props.useControlPoints ? "advanced" : "basic";
   return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
     className: "button-row"
-  }, createTFGeneratorButton("resetXF", "None", "Reset transfer function to full range."), createTFGeneratorButton("auto98XF", "Default", "Ramp from 50th percentile to 98th."), createTFGeneratorButton("auto2XF", "IJ Auto", "Emulates ImageJ's \"auto\" button."), createTFGeneratorButton("bestFitXF", "Auto 2", "Ramp over the middle 80% of data."), /*#__PURE__*/React.createElement(Checkbox, {
+  }, createTFGeneratorButton("auto98XF", "Default", "Ramp from 50th percentile to 98th"), createTFGeneratorButton("auto2XF", "IJ Auto", "Emulates ImageJ's \"auto\" button"), createTFGeneratorButton("resetXF", "Auto 1", "Ramp over the full data range (0% to 100%)"), createTFGeneratorButton("bestFitXF", "Auto 2", "Ramp over the middle 80% of data"), /*#__PURE__*/React.createElement(Checkbox, {
     checked: props.useControlPoints,
     onChange: function onChange(e) {
       return changeChannelSetting({
@@ -591,7 +605,7 @@ var TfEditor = function TfEditor(props) {
     }
   }, "Advanced")), !props.useControlPoints && /*#__PURE__*/React.createElement("div", {
     className: "tf-editor-control-row ramp-row"
-  }, "Ramp min/max", /*#__PURE__*/React.createElement(InputNumber, {
+  }, "Levels min/max", /*#__PURE__*/React.createElement(InputNumber, {
     value: u8ToAbsolute(props.ramp[0], props.channelData),
     onChange: function onChange(v) {
       return v !== null && setRamp([absoluteToU8(v, props.channelData), props.ramp[1]]);
@@ -691,26 +705,52 @@ var TfEditor = function TfEditor(props) {
     }
   }))))), /*#__PURE__*/React.createElement("div", {
     className: "tf-editor-control-row plot-range-row"
-  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Checkbox, {
-    checked: props.lockPlotToDataRange,
-    onChange: function onChange(e) {
-      return changeChannelSetting({
-        lockPlotToDataRange: e.target.checked
-      });
-    }
-  }, "Lock to data range")), !props.lockPlotToDataRange && /*#__PURE__*/React.createElement("span", null, "Plot max", " ", /*#__PURE__*/React.createElement(InputNumber, {
-    value: props.plotMax,
+  }, "Plot min/max", /*#__PURE__*/React.createElement(InputNumber, {
+    value: plotMin,
     onChange: function onChange(v) {
       return v !== null && changeChannelSetting({
-        plotMax: v
+        plotMin: v,
+        plotMax: Math.max(v + 1, plotMax)
       });
     },
     formatter: numberFormatter,
     min: typeRange.min,
+    max: typeRange.max - 1,
+    size: "small",
+    controls: false
+  }), /*#__PURE__*/React.createElement(InputNumber, {
+    value: plotMax,
+    onChange: function onChange(v) {
+      return v !== null && changeChannelSetting({
+        plotMax: v,
+        plotMin: Math.min(v - 1, plotMin)
+      });
+    },
+    formatter: numberFormatter,
+    min: typeRange.min + 1,
     max: typeRange.max,
     size: "small",
     controls: false
-  }))), /*#__PURE__*/React.createElement(SliderRow, {
+  }), /*#__PURE__*/React.createElement(Button, {
+    size: "small",
+    style: {
+      marginLeft: "12px"
+    },
+    onClick: function onClick() {
+      return changeChannelSetting({
+        plotMin: rawMin,
+        plotMax: rawMax
+      });
+    }
+  }, "Fit to data"), /*#__PURE__*/React.createElement(Button, {
+    size: "small",
+    onClick: function onClick() {
+      return changeChannelSetting({
+        plotMin: typeRange.min,
+        plotMax: typeRange.max
+      });
+    }
+  }, "Full range")), /*#__PURE__*/React.createElement(SliderRow, {
     label: /*#__PURE__*/React.createElement(Checkbox, {
       checked: props.colorizeEnabled,
       onChange: function onChange(e) {

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

@@ -25,21 +25,20 @@
     color:var(--color-controlpanel-text);
     align-items:center;
     min-height:24px;
+    gap:5px;
   }
 
 .channel-row .tf-editor-control-row.ramp-row{
-      gap:6px;
       margin-top:15px;
     }
 
 .channel-row .tf-editor-control-row.plot-range-row{
-      justify-content:space-between;
       margin-bottom:20px;
     }
 
 .channel-row .tf-editor-control-row .ant-input-number{
       border-color:var(--color-button-tertiary-outline);
-      width:72px;
+      width:64px;
     }
 
 .channel-row .tf-editor-control-row .ant-input-number input{

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

@@ -1,5 +1,5 @@
-import React from "react";
 import { Radio } from "antd";
+import React from "react";
 import { ViewMode } from "../../shared/enums";
 var viewModes = [ViewMode.threeD, ViewMode.xy, ViewMode.xz, ViewMode.yz];
 var ViewModeRadioButtons = function ViewModeRadioButtons(props) {

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

@@ -4,15 +4,15 @@ 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; }
-import { UndoOutlined } from "@ant-design/icons";
+import { ReloadOutlined } from "@ant-design/icons";
 import { Button, Radio, Select, Tooltip } from "antd";
 import { debounce } from "lodash";
 import React from "react";
-import ViewModeRadioButtons from "./ViewModeRadioButtons";
-import DownloadButton from "./DownloadButton";
-import { connectToViewerState } from "../ViewerStateProvider";
 import { ImageType, RenderMode, ViewMode } from "../../shared/enums";
 import ViewerIcon from "../shared/ViewerIcon";
+import { connectToViewerState } from "../ViewerStateProvider";
+import DownloadButton from "./DownloadButton";
+import ViewModeRadioButtons from "./ViewModeRadioButtons";
 import "./styles.css";
 var RESIZE_DEBOUNCE_DELAY = 50;
 var visuallyHiddenStyle = {
@@ -55,34 +55,38 @@ var Toolbar = function Toolbar(props) {
     setScrollBtnLeft(barEl.scrollLeft > 0);
     setScrollBtnRight(barEl.scrollLeft < barEl.scrollWidth - barEl.clientWidth);
   }, []);
-  var checkSize = React.useCallback(debounce(function () {
-    if (!leftRef.current || !centerRef.current || !rightRef.current || !barRef.current) {
-      return;
-    }
-    var leftRect = leftRef.current.getBoundingClientRect();
-    var centerRect = centerRef.current.getBoundingClientRect();
-    var rightRect = rightRef.current.getBoundingClientRect();
 
-    // when calculating width required to leave scroll mode, add a bit of extra width to ensure that triggers
-    // for entering and leaving scroll mode never overlap (causing toolbar to rapidly switch when resizing)
-    var SCROLL_OFF_EXTRA_WIDTH = 15;
-    if (scrollMode) {
-      // Leave scroll mode if there is enough space for centered controls not to overlap left/right-aligned ones
-      var barWidth = barRef.current.getBoundingClientRect().width;
-      var requiredWidth = Math.max(leftRect.width, rightRect.width) * 2 + centerRect.width + SCROLL_OFF_EXTRA_WIDTH;
-      if (barWidth > requiredWidth) {
-        setScrollMode(false);
-      }
-    } else {
-      // Enter scroll mode if centered controls are overlapping either left/right-aligned ones
-      if (leftRect.right > centerRect.left || centerRect.right > rightRect.left) {
-        setScrollMode(true);
+  // This is effectively a `useCallback` - it memoizes a function - but since we're feeding the whole function into
+  // lodash's `debounce`, using `useMemo` memoizes the transformation done by `debounce` as well.
+  var checkSize = React.useMemo(function () {
+    return debounce(function () {
+      if (!leftRef.current || !centerRef.current || !rightRef.current || !barRef.current) {
+        return;
       }
-    }
-    checkScrollBtnVisible();
-  }, RESIZE_DEBOUNCE_DELAY), [scrollMode, checkScrollBtnVisible]);
-  React.useEffect(checkSize, []);
+      var leftRect = leftRef.current.getBoundingClientRect();
+      var centerRect = centerRef.current.getBoundingClientRect();
+      var rightRect = rightRef.current.getBoundingClientRect();
+
+      // when calculating width required to leave scroll mode, add a bit of extra width to ensure that triggers
+      // for entering and leaving scroll mode never overlap (causing toolbar to rapidly switch when resizing)
+      var SCROLL_OFF_EXTRA_WIDTH = 15;
+      setScrollMode(function (mode) {
+        if (mode) {
+          // Leave scroll mode if there is enough space for centered controls not to overlap left/right-aligned ones
+          var barWidth = barRef.current.getBoundingClientRect().width;
+          var requiredWidth = Math.max(leftRect.width, rightRect.width) * 2 + centerRect.width + SCROLL_OFF_EXTRA_WIDTH;
+          return barWidth <= requiredWidth;
+        } else {
+          // Enter scroll mode if centered controls are overlapping either left/right-aligned ones
+          return leftRect.right > centerRect.left || centerRect.right > rightRect.left;
+        }
+      });
+      checkScrollBtnVisible();
+    }, RESIZE_DEBOUNCE_DELAY);
+  }, [checkScrollBtnVisible]);
   React.useEffect(function () {
+    // Make sure `checkSize` is run once on mount
+    checkSize();
     window.addEventListener("resize", checkSize);
     return function () {
       return window.removeEventListener("resize", checkSize);
@@ -157,7 +161,7 @@ var Toolbar = function Toolbar(props) {
   }, /*#__PURE__*/React.createElement(Button, {
     className: "ant-btn-icon-only btn-borderless",
     onClick: resetToSavedViewerState
-  }, /*#__PURE__*/React.createElement(UndoOutlined, null), /*#__PURE__*/React.createElement("span", {
+  }, /*#__PURE__*/React.createElement(ReloadOutlined, null), /*#__PURE__*/React.createElement("span", {
     style: visuallyHiddenStyle
   }, "Reset to initial settings")))), /*#__PURE__*/React.createElement("div", {
     className: "viewer-toolbar-center",

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

@@ -11,6 +11,7 @@ function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 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); }
+import { isEqual } from "lodash";
 import React, { useCallback, useContext, useEffect, useMemo, useReducer, useRef } from "react";
 import { getDefaultViewerChannelSettings, getDefaultViewerState } from "../../shared/constants";
 import { RenderMode, ViewMode } from "../../shared/enums";
@@ -150,7 +151,7 @@ var ViewerStateProvider = function ViewerStateProvider(props) {
   });
   useEffect(function () {
     resetProvider.setSavedViewerState(props.viewerSettings || {});
-  }, [props.viewerSettings]);
+  }, [props.viewerSettings, resetProvider]);
   var changeViewerSetting = useCallback(function (key, value) {
     return viewerDispatch({
       key: key,
@@ -178,20 +179,17 @@ var ViewerStateProvider = function ViewerStateProvider(props) {
     });
   }, []);
 
-  // Sync viewer settings prop with state
-  // React docs seem to be fine with syncing state with props directly in the render function, but that caused an
-  // infinite render loop, so now it's in a `useMemo`:
   // https://react.dev/learn/you-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes
-  useMemo(function () {
-    if (props.viewerSettings) {
-      for (var _i = 0, _arr = Object.keys(props.viewerSettings); _i < _arr.length; _i++) {
-        var key = _arr[_i];
-        if (viewerSettings[key] !== props.viewerSettings[key]) {
-          changeViewerSetting(key, props.viewerSettings[key]);
-        }
+  var prevViewerSettingsPropsRef = useRef(undefined);
+  if (props.viewerSettings && !isEqual(props.viewerSettings, prevViewerSettingsPropsRef.current)) {
+    for (var _i = 0, _arr = Object.keys(props.viewerSettings); _i < _arr.length; _i++) {
+      var key = _arr[_i];
+      if (viewerSettings[key] !== props.viewerSettings[key]) {
+        changeViewerSetting(key, props.viewerSettings[key]);
       }
     }
-  }, [props.viewerSettings]);
+    prevViewerSettingsPropsRef.current = props.viewerSettings;
+  }
   var context = useMemo(function () {
     ref.current = _objectSpread(_objectSpread({}, viewerSettings), {}, {
       channelSettings: channelSettings,
@@ -214,7 +212,7 @@ var ViewerStateProvider = function ViewerStateProvider(props) {
     return {
       ref: ref
     };
-  }, [viewerSettings, channelSettings]);
+  }, [viewerSettings, channelSettings, applyColorPresets, changeViewerSetting, changeChannelSetting, setChannelSettings, resetProvider]);
   return /*#__PURE__*/React.createElement(ViewerStateContext.Provider, {
     value: context
   }, props.children);