@aics/vole-app 2.11.0 → 2.13.0

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

@@ -1,10 +1,10 @@
 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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
 function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
@@ -20,7 +20,7 @@ import * as d3 from "d3";
 import "nouislider/distribute/nouislider.css";
 import React, { useCallback, useMemo, useRef, useState } from "react";
 import { SketchPicker } from "react-color";
-import { LUT_MAX_PERCENTILE, LUT_MIN_PERCENTILE, TFEDITOR_DEFAULT_COLOR } from "../../shared/constants";
+import { DTYPE_RANGE, LUT_MAX_PERCENTILE, LUT_MIN_PERCENTILE, TFEDITOR_DEFAULT_COLOR } from "../../shared/constants";
 import { colorArrayToObject, colorArrayToString, colorObjectToArray } from "../../shared/utils/colorRepresentations";
 import { controlPointsToRamp, rampToControlPoints } from "../../shared/utils/controlPointsToLut";
 import { useRefWithSetter } from "../../shared/utils/hooks";
@@ -31,8 +31,17 @@ import "./styles.css";
 var TFEDITOR_COLOR_PICKER_MARGIN_X_PX = 2;
 /** If a control point is within this distance of the bottom of the screen, open the color picker upward */
 var TFEDITOR_COLOR_PICKER_OPEN_UPWARD_MARGIN_PX = 310;
-var TFEDITOR_GRADIENT_MAX_OPACITY = 0.9;
+var TFEDITOR_GRADIENT_MAX_OPACITY = 0.75;
 var TFEDITOR_NUM_TICKS = 4;
+/**
+ * If the first or last "round" tick mark is within this ratio of the end of the x axis, remove it to get it out of the
+ * way of the tick mark right at the end.
+ *
+ * For instance, if the x range is [0, 255], the last tick mark d3 generates will likely be at 250. That should be
+ * removed to get it out of the way of the tick mark at 255! But if the range is [0, 390], it may be that the last tick
+ * mark is at 300. It would make no sense to remove that tick mark to make space for one at 390.
+ */
+var TFEDITOR_END_TICK_MARGIN = 0.1;
 var TFEDITOR_MARGINS = {
   top: 18,
   right: 20,
@@ -112,6 +121,82 @@ function controlPointToAbsolute(cp, channel) {
   return u8ToAbsolute(cp.x, channel);
 }
 
+/** For when all control points are outside the plot's range: just fill the plot with the settings from 1 point */
+var coverRangeWithPoint = function coverRangeWithPoint(point, plotMin, plotMax) {
+  return [_objectSpread(_objectSpread({}, point), {}, {
+    x: plotMin
+  }), _objectSpread(_objectSpread({}, point), {}, {
+    x: plotMax
+  })];
+};
+
+/** For when some control points are outside the plot's range: create an intermediate point on the edge of the range */
+var createPointOnRangeBoundary = function createPointOnRangeBoundary(outOfRangePt, inRangePt, x) {
+  var rangeRatio = (x - outOfRangePt.x) / (inRangePt.x - outOfRangePt.x);
+  var opacity = outOfRangePt.opacity + (inRangePt.opacity - outOfRangePt.opacity) * rangeRatio;
+  var color = outOfRangePt.color.map(function (c, i) {
+    return c + (inRangePt.color[i] - c) * rangeRatio;
+  });
+  return {
+    x: x,
+    opacity: opacity,
+    color: color
+  };
+};
+
+/**
+ * Ensures the list of `controlPoints` exactly covers the range from `plotMin` to `plotMax` by removing any
+ * out-of-range points and adding new points right at the edges of the range.
+ */
+var fitControlPointsToRange = function fitControlPointsToRange(controlPoints, plotMin, plotMax) {
+  var points = controlPoints.slice();
+  var firstPoint = points[0];
+  var lastPoint = points[points.length - 1];
+
+  // If all control points are outside the range, just fill the range with the first or last point.
+  if (lastPoint.x < plotMin) {
+    return coverRangeWithPoint(lastPoint, plotMin, plotMax);
+  }
+  if (firstPoint.x > plotMax) {
+    return coverRangeWithPoint(firstPoint, plotMin, plotMax);
+  }
+  if (firstPoint.x > plotMin) {
+    // If the control points don't go all the way to the min, add a new point at the min.
+    points.unshift(_objectSpread(_objectSpread({}, firstPoint), {}, {
+      x: plotMin
+    }));
+  } else {
+    // If some control points are out of range, remove those points...
+    var outOfRangePoint = undefined;
+    while (points[0].x < plotMin && points.length > 1) {
+      outOfRangePoint = points.shift();
+    }
+
+    // ...and create a new point at the edge of the range.
+    if (outOfRangePoint !== undefined) {
+      points.unshift(createPointOnRangeBoundary(outOfRangePoint, points[0], plotMin));
+    }
+  }
+  if (lastPoint.x < plotMax) {
+    // If the control points don't go all the way to the max, add a new point at the max.
+    points.push(_objectSpread(_objectSpread({}, lastPoint), {}, {
+      x: plotMax
+    }));
+  } else {
+    // If some control points are out of range, remove those points...
+    var _outOfRangePoint = undefined;
+    while (points[points.length - 1].x > plotMax && points.length > 1) {
+      _outOfRangePoint = points.pop();
+    }
+
+    // ...and create a new point at the edge of the range.
+    if (_outOfRangePoint !== undefined) {
+      points.push(createPointOnRangeBoundary(_outOfRangePoint, points[points.length - 1], plotMax));
+    }
+  }
+  return points;
+};
+
 /** Defines an SVG gradient with id `id` based on the provided `controlPoints` */
 var ControlPointGradientDef = function ControlPointGradientDef(_ref) {
   var controlPoints = _ref.controlPoints,
@@ -165,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),
@@ -206,11 +293,30 @@ var TfEditor = function TfEditor(props) {
   var lastColorRef = useRef(TFEDITOR_DEFAULT_COLOR);
   var svgRef = useRef(null); // need access to SVG element to measure mouse position
 
+  var _props$channelData = props.channelData,
+    rawMin = _props$channelData.rawMin,
+    rawMax = _props$channelData.rawMax,
+    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 xScale = useMemo(function () {
-    return d3.scaleLinear().domain([props.channelData.rawMin, props.channelData.rawMax]).range([0, innerWidth]);
-  }, [innerWidth, props.channelData.rawMin, props.channelData.rawMax]);
+    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]);
@@ -347,19 +453,23 @@ var TfEditor = function TfEditor(props) {
     }
   };
   var controlPointsToRender = useMemo(function () {
-    return props.useControlPoints ? props.controlPoints : rampToControlPoints(props.ramp);
-  }, [props.controlPoints, props.ramp, props.useControlPoints]);
+    var points = props.useControlPoints ? props.controlPoints.slice() : rampToControlPoints(props.ramp);
+    return fitControlPointsToRange(points, plotMinU8, plotMaxU8);
+  }, [props.controlPoints, props.ramp, props.useControlPoints, plotMinU8, plotMaxU8]);
 
   /** d3-generated svg data string representing both the line between points and the region filled with gradient */
   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 () {
@@ -372,8 +482,27 @@ var TfEditor = function TfEditor(props) {
   // identity changes (i.e. whenever their dependencies change).
 
   var xAxisRef = useCallback(function (el) {
+    // generate tick marks
     var ticks = xScale.ticks(TFEDITOR_NUM_TICKS);
-    ticks[ticks.length - 1] = xScale.domain()[1];
+
+    // make sure we have sensible tick marks right at the min and max of the x axis
+    var _xScale$domain = xScale.domain(),
+      _xScale$domain2 = _slicedToArray(_xScale$domain, 2),
+      min = _xScale$domain2[0],
+      max = _xScale$domain2[1];
+    var domain = max - min;
+    if ((ticks[0] - min) / domain < TFEDITOR_END_TICK_MARGIN) {
+      ticks[0] = min;
+    } else {
+      ticks.unshift(min);
+    }
+    if ((ticks[ticks.length - 1] - min) / domain > 1 - TFEDITOR_END_TICK_MARGIN) {
+      ticks[ticks.length - 1] = max;
+    } else {
+      ticks.push(max);
+    }
+
+    // now make the axis!
     d3.select(el).call(d3.axisBottom(xScale).tickValues(ticks).tickPadding(props.useControlPoints ? 3 : 10) // get tick labels out of the way of sliders in "basic" mode
     );
   }, [xScale, props.useControlPoints]);
@@ -384,30 +513,37 @@ var TfEditor = function TfEditor(props) {
     if (el === null) {
       return;
     }
-    if (props.channelData.histogram.getNumBins() < 1) {
+    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 barWidth = innerWidth / props.channelData.histogram.getNumBins();
+    var start = Math.max(0, Math.ceil(plotMinU8));
+    var end = Math.min(numBins, Math.floor(plotMaxU8));
+    var binLengthsToRender = binLengths.slice(start, end);
+    var barWidth = innerWidth / (plotMaxU8 - plotMinU8);
     var binScale = d3.scaleLog().domain([0.1, max]).range([innerHeight, 0]).base(2).clamp(true);
     d3.select(el).selectAll(".bar") // select all the bars of the histogram
-    .data(binLengths) // bind the histogram bins to this selection
+    .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, 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);
     });
-  }, [props.channelData.histogram, innerWidth, innerHeight]);
+  }, [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), {}, {
@@ -417,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);
       }
@@ -430,7 +567,10 @@ var TfEditor = function TfEditor(props) {
   };
 
   // create one svg circle element for each control point
-  var controlPointCircles = props.useControlPoints ? props.controlPoints.map(function (cp, i) {
+  var controlPointCircles = props.useControlPoints ? props.controlPoints.filter(function (cp) {
+    return plotMinU8 <= cp.x && cp.x <= plotMaxU8;
+  }) // filter out-of-range points
+  .map(function (cp, i) {
     return /*#__PURE__*/React.createElement("circle", {
       key: i,
       className: i === selectedPointIdx ? "selected" : "",
@@ -446,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({
@@ -463,7 +603,29 @@ var TfEditor = function TfEditor(props) {
     style: {
       marginLeft: "auto"
     }
-  }, "Advanced")), colorPickerPosition !== null && /*#__PURE__*/React.createElement("div", {
+  }, "Advanced")), !props.useControlPoints && /*#__PURE__*/React.createElement("div", {
+    className: "tf-editor-control-row ramp-row"
+  }, "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]]);
+    },
+    formatter: numberFormatter,
+    min: typeRange.min,
+    max: Math.min(u8ToAbsolute(props.ramp[1], props.channelData), typeRange.max),
+    size: "small",
+    controls: false
+  }), /*#__PURE__*/React.createElement(InputNumber, {
+    value: u8ToAbsolute(props.ramp[1], props.channelData),
+    onChange: function onChange(v) {
+      return v !== null && setRamp([props.ramp[0], absoluteToU8(v, props.channelData)]);
+    },
+    formatter: numberFormatter,
+    min: Math.max(typeRange.min, u8ToAbsolute(props.ramp[0], props.channelData)),
+    max: typeRange.max,
+    size: "small",
+    controls: false
+  })), colorPickerPosition !== null && /*#__PURE__*/React.createElement("div", {
     className: "tf-editor-popover"
   }, /*#__PURE__*/React.createElement("div", {
     className: "tf-editor-cover",
@@ -504,7 +666,7 @@ var TfEditor = function TfEditor(props) {
     className: "axis"
   }), controlPointCircles, !props.useControlPoints && /*#__PURE__*/React.createElement("g", {
     className: "ramp-sliders"
-  }, /*#__PURE__*/React.createElement("g", {
+  }, plotMinU8 <= props.ramp[0] && props.ramp[0] <= plotMaxU8 && /*#__PURE__*/React.createElement("g", {
     transform: "translate(".concat(xScale(u8ToAbsolute(props.ramp[0], props.channelData)), ")")
   }, /*#__PURE__*/React.createElement("line", {
     y1: innerHeight,
@@ -523,7 +685,7 @@ var TfEditor = function TfEditor(props) {
     onPointerDown: function onPointerDown() {
       return setDraggedPointIdx(TfEditorRampSliderHandle.Min);
     }
-  })), /*#__PURE__*/React.createElement("g", {
+  })), plotMinU8 <= props.ramp[1] && props.ramp[1] <= plotMaxU8 && /*#__PURE__*/React.createElement("g", {
     transform: "translate(".concat(xScale(u8ToAbsolute(props.ramp[1], props.channelData)), ")")
   }, /*#__PURE__*/React.createElement("line", {
     y1: innerHeight,
@@ -541,28 +703,54 @@ var TfEditor = function TfEditor(props) {
     onPointerDown: function onPointerDown() {
       return setDraggedPointIdx(TfEditorRampSliderHandle.Max);
     }
-  }))))), !props.useControlPoints && /*#__PURE__*/React.createElement("div", {
-    className: "tf-editor-numeric-input-row"
-  }, /*#__PURE__*/React.createElement("span", null, "Min", " ", /*#__PURE__*/React.createElement(InputNumber, {
-    value: u8ToAbsolute(props.ramp[0], props.channelData),
+  }))))), /*#__PURE__*/React.createElement("div", {
+    className: "tf-editor-control-row plot-range-row"
+  }, "Plot min/max", /*#__PURE__*/React.createElement(InputNumber, {
+    value: plotMin,
     onChange: function onChange(v) {
-      return v !== null && setRamp([absoluteToU8(v, props.channelData), props.ramp[1]]);
+      return v !== null && changeChannelSetting({
+        plotMin: v,
+        plotMax: Math.max(v + 1, plotMax)
+      });
     },
     formatter: numberFormatter,
-    min: 0,
-    max: Math.min(u8ToAbsolute(props.ramp[1], props.channelData), props.channelData.rawMax),
-    size: "small"
-  })), /*#__PURE__*/React.createElement("span", null, "Max", " ", /*#__PURE__*/React.createElement(InputNumber, {
-    value: u8ToAbsolute(props.ramp[1], props.channelData),
+    min: typeRange.min,
+    max: typeRange.max - 1,
+    size: "small",
+    controls: false
+  }), /*#__PURE__*/React.createElement(InputNumber, {
+    value: plotMax,
     onChange: function onChange(v) {
-      return v !== null && setRamp([props.ramp[0], absoluteToU8(v, props.channelData)]);
+      return v !== null && changeChannelSetting({
+        plotMax: v,
+        plotMin: Math.min(v - 1, plotMin)
+      });
     },
     formatter: numberFormatter,
-    min: Math.max(0, u8ToAbsolute(props.ramp[0], props.channelData)),
-    max: props.channelData.rawMax,
+    min: typeRange.min + 1,
+    max: typeRange.max,
+    size: "small",
+    controls: false
+  }), /*#__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",
-    width: 45
-  }))), /*#__PURE__*/React.createElement(SliderRow, {
+    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

@@ -20,19 +20,31 @@
     bottom:0;
   }
 
-.channel-row .tf-editor-numeric-input-row{
+.channel-row .tf-editor-control-row{
     display:flex;
-    align-items:center;
-    justify-content:space-between;
-    margin-bottom:20px;
     color:var(--color-controlpanel-text);
+    align-items:center;
+    min-height:24px;
+    gap:5px;
   }
 
-.channel-row .tf-editor-numeric-input-row .ant-input-number{
+.channel-row .tf-editor-control-row.ramp-row{
+      margin-top:15px;
+    }
+
+.channel-row .tf-editor-control-row.plot-range-row{
+      margin-bottom:20px;
+    }
+
+.channel-row .tf-editor-control-row .ant-input-number{
       border-color:var(--color-button-tertiary-outline);
-      width:60px;
+      width:64px;
     }
 
+.channel-row .tf-editor-control-row .ant-input-number input{
+        text-align:right;
+      }
+
 .channel-row .tick text{
     fill:var(--color-controlpanel-text);
     user-select:none;
@@ -58,7 +70,7 @@
 
 .channel-row .line{
     stroke:#aeacae;
-    stroke-width:1.5px;
+    stroke-width:1px;
   }
 
 .channel-row .ramp-sliders path{

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);