@aics/vole-app 2.11.0

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

@@ -0,0 +1,584 @@
+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 _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); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+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 { Lut } from "@aics/vole-core";
+import { Button, Checkbox, InputNumber, Tooltip } from "antd";
+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 { colorArrayToObject, colorArrayToString, colorObjectToArray } from "../../shared/utils/colorRepresentations";
+import { controlPointsToRamp, rampToControlPoints } from "../../shared/utils/controlPointsToLut";
+import { useRefWithSetter } from "../../shared/utils/hooks";
+import SliderRow from "../shared/SliderRow";
+import "./styles.css";
+
+/**The color picker opens next to control points like a context menu. This constant gives it a bit of space. */
+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_NUM_TICKS = 4;
+var TFEDITOR_MARGINS = {
+  top: 18,
+  right: 20,
+  bottom: 30,
+  // includes space for x-axis
+  left: 25
+};
+var MOUSE_EVENT_BUTTONS_PRIMARY = 1;
+var TfEditorRampSliderHandle = /*#__PURE__*/function (TfEditorRampSliderHandle) {
+  TfEditorRampSliderHandle["Min"] = "min";
+  TfEditorRampSliderHandle["Max"] = "max";
+  return TfEditorRampSliderHandle;
+}(TfEditorRampSliderHandle || {});
+var TF_GENERATORS = {
+  autoXF: function autoXF(histo) {
+    // Currently unused. min and max are the first and last bins whose values are >=10% that of the max bin
+    var _histo$findAutoMinMax = histo.findAutoMinMax(),
+      _histo$findAutoMinMax2 = _slicedToArray(_histo$findAutoMinMax, 2),
+      hmin = _histo$findAutoMinMax2[0],
+      hmax = _histo$findAutoMinMax2[1];
+    return new Lut().createFromMinMax(hmin, hmax);
+  },
+  auto2XF: function auto2XF(histo) {
+    var _histo$findAutoIJBins = histo.findAutoIJBins(),
+      _histo$findAutoIJBins2 = _slicedToArray(_histo$findAutoIJBins, 2),
+      hmin = _histo$findAutoIJBins2[0],
+      hmax = _histo$findAutoIJBins2[1];
+    return new Lut().createFromMinMax(hmin, hmax);
+  },
+  auto98XF: function auto98XF(histo) {
+    var hmin = histo.findBinOfPercentile(LUT_MIN_PERCENTILE);
+    var hmax = histo.findBinOfPercentile(LUT_MAX_PERCENTILE);
+    return new Lut().createFromMinMax(hmin, hmax);
+  },
+  bestFitXF: function bestFitXF(histo) {
+    var _histo$findBestFitBin = histo.findBestFitBins(),
+      _histo$findBestFitBin2 = _slicedToArray(_histo$findBestFitBin, 2),
+      hmin = _histo$findBestFitBin2[0],
+      hmax = _histo$findBestFitBin2[1];
+    return new Lut().createFromMinMax(hmin, hmax);
+  },
+  resetXF: function resetXF(_histo) {
+    return new Lut().createFullRange();
+  }
+};
+
+// *---*
+// |   |
+// |   |
+//  \ /
+//   *
+// width: 0.65 * height; height of rectangle: 0.6 * height; height of triangle: 0.4 * height
+var sliderHandleSymbol = {
+  draw: function draw(context, size) {
+    // size is symbol area in px^2
+    var height = Math.sqrt(size * 1.9);
+    var triangleHeight = height * 0.4;
+    var halfWidth = height * 0.325;
+    context.moveTo(-halfWidth, -height);
+    context.lineTo(halfWidth, -height);
+    context.lineTo(halfWidth, -triangleHeight);
+    context.lineTo(0, 0);
+    context.lineTo(-halfWidth, -triangleHeight);
+    context.closePath();
+  }
+};
+function u8ToAbsolute(value, channel) {
+  return channel.rawMin + value / 255 * (channel.rawMax - channel.rawMin);
+}
+function absoluteToU8(value, channel) {
+  return (value - channel.rawMin) / (channel.rawMax - channel.rawMin) * 255;
+}
+function controlPointToAbsolute(cp, channel) {
+  // the x value of the control point is in the range [0, 255]
+  // because of the way the histogram is generated
+  // (see LUT_ENTRIES and the fact that we use Uint8Array)
+  return u8ToAbsolute(cp.x, channel);
+}
+
+/** Defines an SVG gradient with id `id` based on the provided `controlPoints` */
+var ControlPointGradientDef = function ControlPointGradientDef(_ref) {
+  var controlPoints = _ref.controlPoints,
+    id = _ref.id;
+  var range = controlPoints[controlPoints.length - 1].x - controlPoints[0].x;
+  return /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
+    id: id,
+    gradientUnits: "objectBoundingBox",
+    spreadMethod: "pad",
+    x2: "100%"
+  }, controlPoints.map(function (cp, i) {
+    var offset = "".concat((cp.x - controlPoints[0].x) / range * 100, "%");
+    var opacity = Math.min(cp.opacity, TFEDITOR_GRADIENT_MAX_OPACITY);
+    return /*#__PURE__*/React.createElement("stop", {
+      key: i,
+      stopColor: colorArrayToString(cp.color),
+      stopOpacity: opacity,
+      offset: offset
+    });
+  })));
+};
+
+/** Retrieves the bin contents and max bin value from `histogram` */
+function getHistogramBinLengths(histogram) {
+  var binLengths = [];
+  // TODO: Change `histogram.bins` to be readable/readonly
+  // so we don't have to copy it here!
+  var max = Number.NEGATIVE_INFINITY;
+  for (var i = 0; i < histogram.getNumBins(); i++) {
+    var binLength = histogram.getBin(i);
+    binLengths.push(binLength);
+    max = Math.max(max, binLength);
+  }
+  return {
+    binLengths: binLengths,
+    max: max
+  };
+}
+var colorPickerPositionToStyle = function colorPickerPositionToStyle(_ref2) {
+  var _ref3 = _slicedToArray(_ref2, 2),
+    x = _ref3[0],
+    y = _ref3[1];
+  return _defineProperty(_defineProperty({
+    position: "absolute"
+  }, x < 0 ? "right" : "left", Math.abs(x)), y < 0 ? "bottom" : "top", y);
+};
+var numberFormatter = function numberFormatter(v) {
+  return v === undefined ? "" : Number(v).toFixed(0);
+};
+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 innerWidth = props.width - TFEDITOR_MARGINS.left - TFEDITOR_MARGINS.right;
+  var innerHeight = props.height - TFEDITOR_MARGINS.top - TFEDITOR_MARGINS.bottom;
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedPointIdx = _useState2[0],
+    setSelectedPointIdx = _useState2[1];
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    draggedPointIdx = _useState4[0],
+    _setDraggedPointIdx = _useState4[1];
+  var _setCPs = useCallback(function (p) {
+    return changeChannelSetting({
+      controlPoints: p
+    });
+  }, [changeChannelSetting]);
+  var setRamp = useCallback(function (ramp) {
+    return changeChannelSetting({
+      ramp: ramp
+    });
+  }, [changeChannelSetting]);
+
+  // these bits of state need their freshest, most up-to-date values available in mouse event handlers. make refs!
+  var _useRefWithSetter = useRefWithSetter(_setCPs, props.controlPoints),
+    _useRefWithSetter2 = _slicedToArray(_useRefWithSetter, 2),
+    controlPointsRef = _useRefWithSetter2[0],
+    setControlPoints = _useRefWithSetter2[1];
+  var _useRefWithSetter3 = useRefWithSetter(_setDraggedPointIdx, draggedPointIdx),
+    _useRefWithSetter4 = _slicedToArray(_useRefWithSetter3, 2),
+    draggedPointIdxRef = _useRefWithSetter4[0],
+    setDraggedPointIdx = _useRefWithSetter4[1];
+
+  // Either `null` when the control panel is closed, or an x offset into the plot to position the color picker.
+  // Positive: offset right from the left edge of the plot; negative: offset left from the right edge of the plot.
+  var _useState5 = useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    colorPickerPosition = _useState6[0],
+    setColorPickerPosition = _useState6[1];
+  var lastColorRef = useRef(TFEDITOR_DEFAULT_COLOR);
+  var svgRef = useRef(null); // need access to SVG element to measure mouse position
+
+  // 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]);
+  var yScale = useMemo(function () {
+    return d3.scaleLinear().domain([0, 1]).range([innerHeight, 0]);
+  }, [innerHeight]);
+  var mouseEventToControlPointValues = function mouseEventToControlPointValues(event) {
+    var _svgRef$current$getBo, _svgRef$current;
+    var svgRect = (_svgRef$current$getBo = (_svgRef$current = svgRef.current) === null || _svgRef$current === void 0 ? void 0 : _svgRef$current.getBoundingClientRect()) !== null && _svgRef$current$getBo !== void 0 ? _svgRef$current$getBo : {
+      x: 0,
+      y: 0
+    };
+    return [absoluteToU8(xScale.invert(clamp(event.clientX - svgRect.x - TFEDITOR_MARGINS.left, 0, innerWidth)), props.channelData), yScale.invert(clamp(event.clientY - svgRect.y - TFEDITOR_MARGINS.top, 0, innerHeight))];
+  };
+  var dragControlPoint = function dragControlPoint(draggedIdx, x, opacity) {
+    var newControlPoints = _toConsumableArray(controlPointsRef.current);
+    var draggedPoint = newControlPoints[draggedIdx];
+    draggedPoint.x = x;
+    draggedPoint.opacity = opacity;
+
+    // Remove control points to keep the list sorted by x value
+    var bisector = d3.bisector(function (a, b) {
+      return a.x - b.x;
+    });
+    var idxLeft = bisector.left(newControlPoints, draggedPoint);
+    var idxRight = bisector.right(newControlPoints, draggedPoint);
+    if (idxLeft < draggedIdx) {
+      var numPointsToRemove = draggedIdx - idxLeft; // should almost always be 1
+      newControlPoints.splice(idxLeft, numPointsToRemove);
+      var newIdx = draggedIdx - numPointsToRemove;
+      setDraggedPointIdx(newIdx);
+      setSelectedPointIdx(newIdx);
+    } else if (idxRight > draggedIdx + 1) {
+      newControlPoints.splice(draggedIdx + 1, idxRight - draggedIdx - 1);
+    }
+    setControlPoints(newControlPoints);
+  };
+  var dragRampSlider = function dragRampSlider(handle, x) {
+    if (handle === TfEditorRampSliderHandle.Min) {
+      var max = props.ramp[1];
+      setRamp([Math.min(x, max), max]);
+    } else {
+      var min = props.ramp[0];
+      setRamp([min, Math.max(x, min)]);
+    }
+  };
+  var handlePlotPointerDown = function handlePlotPointerDown(event) {
+    if (props.useControlPoints) {
+      // Advanced mode - we're either creating a new control point or selecting/dragging an existing one
+      if (draggedPointIdxRef.current === null && event.button === 0) {
+        // this click is not on an existing point - create a new one
+        var _mouseEventToControlP = mouseEventToControlPointValues(event),
+          _mouseEventToControlP2 = _slicedToArray(_mouseEventToControlP, 2),
+          x = _mouseEventToControlP2[0],
+          opacity = _mouseEventToControlP2[1];
+        var point = {
+          x: x,
+          opacity: opacity,
+          color: lastColorRef.current
+        };
+
+        // add new control point to controlPoints
+        var index = d3.bisector(function (a, b) {
+          return a.x - b.x;
+        }).left(props.controlPoints, point);
+        setDraggedPointIdx(index);
+        var newControlPoints = _toConsumableArray(props.controlPoints);
+        newControlPoints.splice(index, 0, point);
+        setControlPoints(newControlPoints);
+      } else {
+        // this click is on an existing point - update current points to ref (may have been remapped since last edit)
+        controlPointsRef.current = props.controlPoints;
+      }
+      if (typeof draggedPointIdxRef.current !== "string") {
+        setSelectedPointIdx(draggedPointIdxRef.current);
+      }
+    }
+    if (event.button === 0 && draggedPointIdxRef.current !== null) {
+      // get set up to drag the point around, even if the mouse leaves the SVG element
+      event.currentTarget.setPointerCapture(event.nativeEvent.pointerId);
+    } else {
+      setDraggedPointIdx(null);
+    }
+  };
+  var handlePlotPointerMove = function handlePlotPointerMove(event) {
+    if (draggedPointIdxRef.current === null) {
+      return;
+    }
+    if ((event.buttons & MOUSE_EVENT_BUTTONS_PRIMARY) === 0) {
+      handleDragEnd(event);
+      return;
+    }
+    event.stopPropagation();
+    event.preventDefault();
+    var _mouseEventToControlP3 = mouseEventToControlPointValues(event),
+      _mouseEventToControlP4 = _slicedToArray(_mouseEventToControlP3, 2),
+      x = _mouseEventToControlP4[0],
+      opacity = _mouseEventToControlP4[1];
+
+    // `draggedPointIdxRef` may either be a number (control point index) or a string (ramp slider handle).
+    // The result of this check should always be the same as `props.useControlPoints`, but this narrows the type for TS
+    if (typeof draggedPointIdxRef.current === "number") {
+      dragControlPoint(draggedPointIdxRef.current, x, opacity);
+    } else {
+      dragRampSlider(draggedPointIdxRef.current, x);
+    }
+  };
+  var handleDragEnd = function handleDragEnd(event) {
+    setDraggedPointIdx(null);
+    event.currentTarget.releasePointerCapture(event.pointerId);
+  };
+  var handleControlPointContextMenu = function handleControlPointContextMenu(event) {
+    event.preventDefault();
+    if (!event.target || !svgRef.current) {
+      setColorPickerPosition(null);
+      return;
+    }
+    var svgRect = svgRef.current.getBoundingClientRect();
+    var cpRect = event.target.getBoundingClientRect();
+    var cpRectCenter = cpRect.left + cpRect.width / 2;
+
+    // If the control point is closer to the left edge of the SVG, open the color picker to the right
+    var openLeft = cpRectCenter - svgRect.left < svgRect.width / 2;
+    var xPosition = openLeft ? cpRect.right - svgRect.left + TFEDITOR_COLOR_PICKER_MARGIN_X_PX : cpRect.left - svgRect.right - TFEDITOR_COLOR_PICKER_MARGIN_X_PX;
+
+    // If the control point is too close to the bottom of the screen, open the color picker upward
+    var openUp = window.innerHeight - cpRect.bottom < TFEDITOR_COLOR_PICKER_OPEN_UPWARD_MARGIN_PX;
+    var yPosition = openUp ? svgRect.top - cpRect.bottom : cpRect.top - svgRect.top;
+    setColorPickerPosition([xPosition, yPosition]);
+  };
+  var handleChangeColor = function handleChangeColor(color) {
+    lastColorRef.current = colorObjectToArray(color.rgb);
+    if (selectedPointIdx !== null) {
+      var newControlPoints = _toConsumableArray(props.controlPoints);
+      newControlPoints[selectedPointIdx].color = lastColorRef.current;
+      setControlPoints(newControlPoints);
+    }
+  };
+  var controlPointsToRender = useMemo(function () {
+    return props.useControlPoints ? props.controlPoints : rampToControlPoints(props.ramp);
+  }, [props.controlPoints, props.ramp, props.useControlPoints]);
+
+  /** 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));
+    }).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]);
+
+  /** d3-generated svg data string representing the "basic mode" min/max slider handles */
+  var sliderHandlePath = useMemo(function () {
+    var _d3$symbol$type$size;
+    return (_d3$symbol$type$size = d3.symbol().type(sliderHandleSymbol).size(80)()) !== null && _d3$symbol$type$size !== void 0 ? _d3$symbol$type$size : undefined;
+  }, []);
+
+  // The below `useCallback`s are used as "ref callbacks" - passed as the `ref` prop of SVG elements in order to render
+  // these elements' content using D3. They are called when the ref'd component mounts and unmounts, and whenever their
+  // identity changes (i.e. whenever their dependencies change).
+
+  var xAxisRef = useCallback(function (el) {
+    var ticks = xScale.ticks(TFEDITOR_NUM_TICKS);
+    ticks[ticks.length - 1] = xScale.domain()[1];
+    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]);
+  var yAxisRef = useCallback(function (el) {
+    return d3.select(el).call(d3.axisLeft(yScale).ticks(TFEDITOR_NUM_TICKS));
+  }, [yScale]);
+  var histogramRef = useCallback(function (el) {
+    if (el === null) {
+      return;
+    }
+    if (props.channelData.histogram.getNumBins() < 1) {
+      return;
+    }
+    var _getHistogramBinLengt = getHistogramBinLengths(props.channelData.histogram),
+      binLengths = _getHistogramBinLengt.binLengths,
+      max = _getHistogramBinLengt.max;
+    var barWidth = innerWidth / props.channelData.histogram.getNumBins();
+    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
+    .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));
+    }) // 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]);
+  var applyTFGenerator = useCallback(function (generator) {
+    setSelectedPointIdx(null);
+    lastColorRef.current = TFEDITOR_DEFAULT_COLOR;
+    var lut = TF_GENERATORS[generator](props.channelData.histogram);
+    if (props.useControlPoints) {
+      setControlPoints(lut.controlPoints.map(function (cp) {
+        return _objectSpread(_objectSpread({}, cp), {}, {
+          color: TFEDITOR_DEFAULT_COLOR
+        });
+      }));
+    } else {
+      setRamp(controlPointsToRamp(lut.controlPoints));
+    }
+  }, [props.channelData.histogram, props.useControlPoints]);
+  var createTFGeneratorButton = function createTFGeneratorButton(generator, name, description) {
+    return /*#__PURE__*/React.createElement(Tooltip, {
+      title: description,
+      placement: "top"
+    }, /*#__PURE__*/React.createElement(Button, {
+      onClick: function onClick() {
+        return applyTFGenerator(generator);
+      }
+    }, name));
+  };
+
+  // create one svg circle element for each control point
+  var controlPointCircles = props.useControlPoints ? props.controlPoints.map(function (cp, i) {
+    return /*#__PURE__*/React.createElement("circle", {
+      key: i,
+      className: i === selectedPointIdx ? "selected" : "",
+      cx: xScale(controlPointToAbsolute(cp, props.channelData)),
+      cy: yScale(cp.opacity),
+      style: {
+        fill: colorArrayToString(cp.color)
+      },
+      r: 5,
+      onPointerDown: function onPointerDown() {
+        return setDraggedPointIdx(i);
+      },
+      onContextMenu: handleControlPointContextMenu
+    });
+  }) : null;
+  // move selected control point to the end so it's 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, {
+    checked: props.useControlPoints,
+    onChange: function onChange(e) {
+      return changeChannelSetting({
+        useControlPoints: e.target.checked
+      });
+    },
+    style: {
+      marginLeft: "auto"
+    }
+  }, "Advanced")), colorPickerPosition !== null && /*#__PURE__*/React.createElement("div", {
+    className: "tf-editor-popover"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "tf-editor-cover",
+    onClick: function onClick() {
+      return setColorPickerPosition(null);
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    style: colorPickerPositionToStyle(colorPickerPosition)
+  }, /*#__PURE__*/React.createElement(SketchPicker, {
+    color: colorArrayToObject(lastColorRef.current),
+    onChange: handleChangeColor,
+    disableAlpha: true
+  }))), /*#__PURE__*/React.createElement("svg", {
+    className: "tf-editor-svg ".concat(viewerModeString).concat(draggedPointIdx !== null ? " dragging" : ""),
+    ref: svgRef,
+    width: props.width,
+    height: props.height,
+    onPointerDown: handlePlotPointerDown,
+    onPointerMove: handlePlotPointerMove,
+    onPointerUp: handleDragEnd
+  }, /*#__PURE__*/React.createElement(ControlPointGradientDef, {
+    controlPoints: controlPointsToRender,
+    id: "tfGradient-".concat(props.id)
+  }), /*#__PURE__*/React.createElement("g", {
+    transform: "translate(".concat(TFEDITOR_MARGINS.left, ",").concat(TFEDITOR_MARGINS.top, ")")
+  }, /*#__PURE__*/React.createElement("g", {
+    ref: histogramRef
+  }), /*#__PURE__*/React.createElement("path", {
+    className: "line",
+    fill: "url(#tfGradient-".concat(props.id, ")"),
+    d: areaPath
+  }), /*#__PURE__*/React.createElement("g", {
+    ref: xAxisRef,
+    className: "axis",
+    transform: "translate(0,".concat(innerHeight, ")")
+  }), /*#__PURE__*/React.createElement("g", {
+    ref: yAxisRef,
+    className: "axis"
+  }), controlPointCircles, !props.useControlPoints && /*#__PURE__*/React.createElement("g", {
+    className: "ramp-sliders"
+  }, /*#__PURE__*/React.createElement("g", {
+    transform: "translate(".concat(xScale(u8ToAbsolute(props.ramp[0], props.channelData)), ")")
+  }, /*#__PURE__*/React.createElement("line", {
+    y1: innerHeight,
+    strokeDasharray: "5,5",
+    strokeWidth: 2
+  }), /*#__PURE__*/React.createElement("line", {
+    className: "ramp-slider-click-target",
+    y1: innerHeight,
+    strokeWidth: 6,
+    onPointerDown: function onPointerDown() {
+      return setDraggedPointIdx(TfEditorRampSliderHandle.Min);
+    }
+  }), /*#__PURE__*/React.createElement("path", {
+    d: sliderHandlePath,
+    transform: "translate(0,".concat(innerHeight, ") rotate(180)"),
+    onPointerDown: function onPointerDown() {
+      return setDraggedPointIdx(TfEditorRampSliderHandle.Min);
+    }
+  })), /*#__PURE__*/React.createElement("g", {
+    transform: "translate(".concat(xScale(u8ToAbsolute(props.ramp[1], props.channelData)), ")")
+  }, /*#__PURE__*/React.createElement("line", {
+    y1: innerHeight,
+    strokeDasharray: "5,5",
+    strokeWidth: 2
+  }), /*#__PURE__*/React.createElement("line", {
+    className: "ramp-slider-click-target",
+    y1: innerHeight,
+    strokeWidth: 6,
+    onPointerDown: function onPointerDown() {
+      return setDraggedPointIdx(TfEditorRampSliderHandle.Max);
+    }
+  }), /*#__PURE__*/React.createElement("path", {
+    d: sliderHandlePath,
+    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),
+    onChange: function onChange(v) {
+      return v !== null && setRamp([absoluteToU8(v, props.channelData), props.ramp[1]]);
+    },
+    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),
+    onChange: function onChange(v) {
+      return v !== null && setRamp([props.ramp[0], absoluteToU8(v, props.channelData)]);
+    },
+    formatter: numberFormatter,
+    min: Math.max(0, u8ToAbsolute(props.ramp[0], props.channelData)),
+    max: props.channelData.rawMax,
+    size: "small",
+    width: 45
+  }))), /*#__PURE__*/React.createElement(SliderRow, {
+    label: /*#__PURE__*/React.createElement(Checkbox, {
+      checked: props.colorizeEnabled,
+      onChange: function onChange(e) {
+        return changeChannelSetting({
+          colorizeEnabled: e.target.checked
+        });
+      }
+    }, "Colorize"),
+    max: 1,
+    start: props.colorizeAlpha,
+    onUpdate: function onUpdate(values) {
+      return changeChannelSetting({
+        colorizeAlpha: values[0]
+      });
+    },
+    hideSlider: !props.colorizeEnabled
+  }));
+};
+export default TfEditor;

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

@@ -0,0 +1,88 @@
+.channel-row .tf-editor-svg.dragging.basic{
+      cursor:ew-resize;
+    }
+
+.channel-row .tf-editor-svg.dragging.advanced{
+      cursor:move;
+    }
+
+.channel-row .tf-editor-popover{
+    position:absolute;
+    z-index:9999;
+    width:100%;
+  }
+
+.channel-row .tf-editor-cover{
+    position:fixed;
+    top:0;
+    left:0;
+    right:0;
+    bottom:0;
+  }
+
+.channel-row .tf-editor-numeric-input-row{
+    display:flex;
+    align-items:center;
+    justify-content:space-between;
+    margin-bottom:20px;
+    color:var(--color-controlpanel-text);
+  }
+
+.channel-row .tf-editor-numeric-input-row .ant-input-number{
+      border-color:var(--color-button-tertiary-outline);
+      width:60px;
+    }
+
+.channel-row .tick text{
+    fill:var(--color-controlpanel-text);
+    user-select:none;
+    -o-user-select:none;
+    -moz-user-select:none;
+    -khtml-user-select:none;
+    -webkit-user-select:none;
+  }
+
+.channel-row rect.bar{
+    fill:var(--color-controlpanel-border);
+  }
+
+.channel-row .axis path,
+  .channel-row .axis line{
+    stroke:var(--color-controlpanel-border);
+  }
+
+.channel-row rect{
+    fill:none;
+    pointer-events:all;
+  }
+
+.channel-row .line{
+    stroke:#aeacae;
+    stroke-width:1.5px;
+  }
+
+.channel-row .ramp-sliders path{
+      fill:var(--color-controlpanel-ramp-slider);
+      cursor:ew-resize;
+    }
+
+.channel-row .ramp-sliders line{
+      stroke:var(--color-controlpanel-ramp-slider);
+      cursor:ew-resize;
+    }
+
+.channel-row .ramp-sliders line.ramp-slider-click-target{
+        stroke:transparent;
+      }
+
+.channel-row circle{
+    fill-opacity:0.6;
+    cursor:move;
+    stroke:#aeacae;
+    stroke-width:1.5px;
+  }
+
+.channel-row circle.selected{
+      fill:white;
+      stroke:white;
+    }