@aics/vole-app 2.14.0 → 3.1.1

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

@@ -15,7 +15,8 @@ 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 { Lut } from "@aics/vole-core";
-import { Button, Checkbox, InputNumber, Tooltip } from "antd";
+import { PushpinFilled, PushpinOutlined } from "@ant-design/icons";
+import { Button, Checkbox, Dropdown, InputNumber, Tooltip } from "antd";
 import * as d3 from "d3";
 import "nouislider/distribute/nouislider.css";
 import React, { useCallback, useMemo, useRef, useState } from "react";
@@ -25,6 +26,7 @@ import { colorArrayToObject, colorArrayToString, colorObjectToArray } from "../.
 import { controlPointsToRamp, rampToControlPoints } from "../../shared/utils/controlPointsToLut";
 import { useRefWithSetter } from "../../shared/utils/hooks";
 import SliderRow from "../shared/SliderRow";
+import ViewerIcon from "../shared/ViewerIcon";
 import "./styles.css";
 
 /**The color picker opens next to control points like a context menu. This constant gives it a bit of space. */
@@ -50,11 +52,12 @@ var TFEDITOR_MARGINS = {
   left: 25
 };
 var MOUSE_EVENT_BUTTONS_PRIMARY = 1;
-var TfEditorRampSliderHandle = /*#__PURE__*/function (TfEditorRampSliderHandle) {
-  TfEditorRampSliderHandle["Min"] = "min";
-  TfEditorRampSliderHandle["Max"] = "max";
-  return TfEditorRampSliderHandle;
-}(TfEditorRampSliderHandle || {});
+var TfEditorSliderHandle = /*#__PURE__*/function (TfEditorSliderHandle) {
+  TfEditorSliderHandle["Min"] = "min";
+  TfEditorSliderHandle["Max"] = "max";
+  TfEditorSliderHandle["Isosurface"] = "surf";
+  return TfEditorSliderHandle;
+}(TfEditorSliderHandle || {});
 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
@@ -88,6 +91,7 @@ var TF_GENERATORS = {
   }
 };
 
+// RAMP SLIDER HANDLE
 // *---*
 // |   |
 // |   |
@@ -108,18 +112,34 @@ var sliderHandleSymbol = {
     context.closePath();
   }
 };
-function binToAbsolute(value, histogram) {
-  return histogram.getValueFromBinIndex(value);
-}
-function absoluteToBin(value, histogram) {
-  return histogram.findFractionalBinOfValue(value);
-}
-function controlPointToAbsolute(cp, histogram) {
-  // 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 binToAbsolute(cp.x, histogram);
-}
+
+// ISOVALUE SLIDER HANDLE
+//     / \  / \
+//     \  \/  /
+//      \    /
+//       *--*
+// start ^  ^ end
+var LINE_WIDTH = 2;
+// the "base" is the 5-sided area where both lines meet - think of a square with side length
+// `LINE_WIDTH`, rotated 45deg, with the bottom corner cut off where the slider line meets the handle
+var BASE_AREA = Math.pow(LINE_WIDTH, 2) * 0.75;
+var BASE_HEIGHT = (Math.SQRT2 - 0.5) * LINE_WIDTH;
+// how much the base "sticks out" horizontally on either side of the slider line
+var BASE_MARGIN = (Math.SQRT2 - 1) * 0.5 * LINE_WIDTH;
+var isovalueHandleSymbol = {
+  draw: function draw(context, size) {
+    var linesArea = Math.max(size - BASE_AREA, 0);
+    var margin = BASE_MARGIN + linesArea / (2 * Math.SQRT2 * LINE_WIDTH);
+    context.moveTo(1, 0);
+    context.lineTo(margin + 1, -margin);
+    context.lineTo(margin + 1 - Math.SQRT2, -margin - Math.SQRT2);
+    context.lineTo(0, -BASE_HEIGHT);
+    context.lineTo(-margin - 1 + Math.SQRT2, -margin - Math.SQRT2);
+    context.lineTo(-margin - 1, -margin);
+    context.lineTo(-1, 0);
+    context.closePath();
+  }
+};
 
 /** 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) {
@@ -263,9 +283,9 @@ var TfEditor = function TfEditor(props) {
     _useState4 = _slicedToArray(_useState3, 2),
     draggedPointIdx = _useState4[0],
     _setDraggedPointIdx = _useState4[1];
-  var _setCPs = useCallback(function (p) {
+  var _setCPs = useCallback(function (controlPoints) {
     return changeChannelSetting({
-      controlPoints: p
+      controlPoints: controlPoints
     });
   }, [changeChannelSetting]);
   var setRamp = useCallback(function (ramp) {
@@ -274,6 +294,12 @@ var TfEditor = function TfEditor(props) {
     });
   }, [changeChannelSetting]);
 
+  // The temporary isovalue used while dragging the isovalue slider, which we only want to update on slider release
+  var _useState5 = useState(0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    draggedIsovalue = _useState6[0],
+    setDraggedIsovalue = _useState6[1];
+
   // 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),
@@ -286,10 +312,10 @@ var TfEditor = function TfEditor(props) {
 
   // 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 _useState7 = useState(null),
+    _useState8 = _slicedToArray(_useState7, 2),
+    colorPickerPosition = _useState8[0],
+    setColorPickerPosition = _useState8[1];
   var lastColorRef = useRef(TFEDITOR_DEFAULT_COLOR);
   var svgRef = useRef(null); // need access to SVG element to measure mouse position
 
@@ -301,22 +327,16 @@ var TfEditor = function TfEditor(props) {
   var xScale = useMemo(function () {
     return d3.scaleLinear().domain([plotMin, plotMax]).range([0, innerWidth]);
   }, [innerWidth, plotMin, plotMax]);
-  var plotMinU8 = useMemo(function () {
-    return absoluteToBin(plotMin, histogram);
-  }, [plotMin, histogram]);
-  var plotMaxU8 = useMemo(function () {
-    return absoluteToBin(plotMax, histogram);
-  }, [plotMax, histogram]);
   var yScale = useMemo(function () {
     return d3.scaleLinear().domain([0, 1]).range([innerHeight, 0]);
   }, [innerHeight]);
-  var mouseEventToControlPointValues = function mouseEventToControlPointValues(event) {
+  var mouseEventToPlotValues = function mouseEventToPlotValues(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 [absoluteToBin(xScale.invert(clamp(event.clientX - svgRect.x - TFEDITOR_MARGINS.left, 0, innerWidth)), histogram), yScale.invert(clamp(event.clientY - svgRect.y - TFEDITOR_MARGINS.top, 0, innerHeight))];
+    return [xScale.invert(clamp(event.clientX - svgRect.x - TFEDITOR_MARGINS.left, 0, innerWidth)), yScale.invert(clamp(event.clientY - svgRect.y - TFEDITOR_MARGINS.top, 0, innerHeight))];
   };
   var dragControlPoint = function dragControlPoint(draggedIdx, x, opacity) {
     var newControlPoints = _toConsumableArray(controlPointsRef.current);
@@ -341,13 +361,18 @@ var TfEditor = function TfEditor(props) {
     }
     setControlPoints(newControlPoints);
   };
-  var dragRampSlider = function dragRampSlider(handle, x) {
-    if (handle === TfEditorRampSliderHandle.Min) {
+  var dragSlider = function dragSlider(handle, x) {
+    if (handle === TfEditorSliderHandle.Min) {
+      // dragging the min slider
       var max = props.ramp[1];
       setRamp([Math.min(x, max), max]);
-    } else {
+    } else if (handle === TfEditorSliderHandle.Max) {
+      // dragging the max slider
       var min = props.ramp[0];
       setRamp([min, Math.max(x, min)]);
+    } else {
+      // dragging the isosurface slider
+      setDraggedIsovalue(x);
     }
   };
   var handlePlotPointerDown = function handlePlotPointerDown(event) {
@@ -355,10 +380,10 @@ var TfEditor = function TfEditor(props) {
       // 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 _mouseEventToPlotValu = mouseEventToPlotValues(event),
+          _mouseEventToPlotValu2 = _slicedToArray(_mouseEventToPlotValu, 2),
+          x = _mouseEventToPlotValu2[0],
+          opacity = _mouseEventToPlotValu2[1];
         var point = {
           x: x,
           opacity: opacity,
@@ -398,20 +423,25 @@ var TfEditor = function TfEditor(props) {
     }
     event.stopPropagation();
     event.preventDefault();
-    var _mouseEventToControlP3 = mouseEventToControlPointValues(event),
-      _mouseEventToControlP4 = _slicedToArray(_mouseEventToControlP3, 2),
-      x = _mouseEventToControlP4[0],
-      opacity = _mouseEventToControlP4[1];
+    var _mouseEventToPlotValu3 = mouseEventToPlotValues(event),
+      _mouseEventToPlotValu4 = _slicedToArray(_mouseEventToPlotValu3, 2),
+      x = _mouseEventToPlotValu4[0],
+      opacity = _mouseEventToPlotValu4[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);
+      dragSlider(draggedPointIdxRef.current, x);
     }
   };
   var handleDragEnd = function handleDragEnd(event) {
+    if (draggedPointIdx === TfEditorSliderHandle.Isosurface) {
+      changeChannelSetting({
+        isovalue: draggedIsovalue
+      });
+    }
     setDraggedPointIdx(null);
     event.currentTarget.releasePointerCapture(event.pointerId);
   };
@@ -444,25 +474,29 @@ var TfEditor = function TfEditor(props) {
   };
   var controlPointsToRender = useMemo(function () {
     var points = props.useControlPoints ? props.controlPoints.slice() : rampToControlPoints(props.ramp);
-    return fitControlPointsToRange(points, plotMinU8, plotMaxU8);
-  }, [props.controlPoints, props.ramp, props.useControlPoints, plotMinU8, plotMaxU8]);
+    return fitControlPointsToRange(points, plotMin, plotMax);
+  }, [props.controlPoints, props.ramp, props.useControlPoints, plotMin, plotMax]);
 
   /** 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, histogram));
+      return xScale(d.x);
     }).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, histogram]);
+  }, [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;
   }, []);
+  var isovalueHandlePath = useMemo(function () {
+    var _d3$symbol$type$size2;
+    return (_d3$symbol$type$size2 = d3.symbol().type(isovalueHandleSymbol).size(21)()) !== null && _d3$symbol$type$size2 !== void 0 ? _d3$symbol$type$size2 : 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
@@ -504,6 +538,8 @@ var TfEditor = function TfEditor(props) {
     if (numBins < 1) {
       return;
     }
+    var plotMinU8 = histogram.findFractionalBinOfValue(plotMin);
+    var plotMaxU8 = histogram.findFractionalBinOfValue(plotMax);
     var _getHistogramBinLengt = getHistogramBinLengths(histogram),
       binLengths = _getHistogramBinLengt.binLengths,
       max = _getHistogramBinLengt.max;
@@ -516,100 +552,113 @@ 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(binToAbsolute(idx + start, histogram));
+      return xScale(histogram.getValueFromBinIndex(idx + start));
     }) // set position and height from data
     .attr("y", function (len) {
       return binScale(len);
     }).attr("height", function (len) {
       return innerHeight - binScale(len);
     });
-  }, [xScale, histogram, innerWidth, innerHeight, plotMinU8, plotMaxU8]);
+  }, [xScale, histogram, innerWidth, innerHeight, plotMin, plotMax]);
   var applyTFGenerator = useCallback(function (generator) {
     setSelectedPointIdx(null);
     lastColorRef.current = TFEDITOR_DEFAULT_COLOR;
     var lut = TF_GENERATORS[generator](histogram);
+    var valueIndexedControlPoints = lut.controlPoints.map(function (cp) {
+      return _objectSpread(_objectSpread({}, cp), {}, {
+        x: histogram.getValueFromBinIndex(cp.x)
+      });
+    });
     if (props.useControlPoints) {
-      setControlPoints(lut.controlPoints.map(function (cp) {
+      setControlPoints(valueIndexedControlPoints.map(function (cp) {
         return _objectSpread(_objectSpread({}, cp), {}, {
           color: TFEDITOR_DEFAULT_COLOR
         });
       }));
     } else {
-      setRamp(controlPointsToRamp(lut.controlPoints));
+      setRamp(controlPointsToRamp(valueIndexedControlPoints));
     }
   }, [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);
-      }
-    }, name));
-  };
-
-  // create one svg circle element for each control point
-  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" : "",
-      cx: xScale(controlPointToAbsolute(cp, histogram)),
-      cy: yScale(cp.opacity),
-      style: {
-        fill: colorArrayToString(cp.color)
-      },
-      r: 5,
-      onPointerDown: function onPointerDown() {
-        return setDraggedPointIdx(i);
-      },
-      onContextMenu: handleControlPointContextMenu
+  var controlPointCircles = null;
+  if (props.volumeEnabled && props.useControlPoints) {
+    // create one svg circle element for each control point
+    controlPointCircles = props.controlPoints.filter(function (cp) {
+      return plotMin <= cp.x && cp.x <= plotMax;
+    }) // filter out-of-range points
+    .map(function (cp, i) {
+      return /*#__PURE__*/React.createElement("circle", {
+        key: i,
+        className: i === selectedPointIdx ? "selected" : "",
+        cx: xScale(cp.x),
+        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 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("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) {
+  var dragClass = draggedPointIdx === null ? "" : typeof draggedPointIdx === "number" ? " dragging-point" : " dragging-slider";
+  var isovalue = draggedPointIdx === TfEditorSliderHandle.Isosurface ? draggedIsovalue : props.isovalue;
+  var useRamp = props.volumeEnabled && !props.useControlPoints;
+  var _props$channelData = props.channelData,
+    rawMin = _props$channelData.rawMin,
+    rawMax = _props$channelData.rawMax;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "tf-editor"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "tf-editor-control-row"
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
+    size: "small",
+    onClick: function onClick() {
       return changeChannelSetting({
-        useControlPoints: e.target.checked
+        plotMin: rawMin,
+        plotMax: rawMax
       });
-    },
-    style: {
-      marginLeft: "auto"
     }
-  }, "Advanced")), !props.useControlPoints && /*#__PURE__*/React.createElement("div", {
-    className: "tf-editor-control-row ramp-row"
-  }, "Levels min/max", /*#__PURE__*/React.createElement(InputNumber, {
-    value: binToAbsolute(props.ramp[0], histogram),
+  }, "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("div", null, "Plot min/max", /*#__PURE__*/React.createElement(InputNumber, {
+    value: plotMin,
     onChange: function onChange(v) {
-      return v !== null && setRamp([absoluteToBin(v, histogram), props.ramp[1]]);
+      return v !== null && changeChannelSetting({
+        plotMin: v,
+        plotMax: Math.max(v + 1, plotMax)
+      });
     },
     formatter: numberFormatter,
     min: typeRange.min,
-    max: Math.min(binToAbsolute(props.ramp[1], histogram), typeRange.max),
+    max: typeRange.max - 1,
     size: "small",
     controls: false
   }), /*#__PURE__*/React.createElement(InputNumber, {
-    value: binToAbsolute(props.ramp[1], histogram),
+    value: plotMax,
     onChange: function onChange(v) {
-      return v !== null && setRamp([props.ramp[0], absoluteToBin(v, histogram)]);
+      return v !== null && changeChannelSetting({
+        plotMax: v,
+        plotMin: Math.min(v - 1, plotMin)
+      });
     },
     formatter: numberFormatter,
-    min: Math.max(typeRange.min, binToAbsolute(props.ramp[0], histogram)),
+    min: typeRange.min + 1,
     max: typeRange.max,
     size: "small",
     controls: false
-  })), colorPickerPosition !== null && /*#__PURE__*/React.createElement("div", {
+  }))), colorPickerPosition !== null && /*#__PURE__*/React.createElement("div", {
     className: "tf-editor-popover"
   }, /*#__PURE__*/React.createElement("div", {
     className: "tf-editor-cover",
@@ -623,7 +672,7 @@ var TfEditor = function TfEditor(props) {
     onChange: handleChangeColor,
     disableAlpha: true
   }))), /*#__PURE__*/React.createElement("svg", {
-    className: "tf-editor-svg ".concat(viewerModeString).concat(draggedPointIdx !== null ? " dragging" : ""),
+    className: "tf-editor-svg".concat(dragClass),
     ref: svgRef,
     width: props.width,
     height: props.height,
@@ -637,7 +686,7 @@ var TfEditor = function TfEditor(props) {
     transform: "translate(".concat(TFEDITOR_MARGINS.left, ",").concat(TFEDITOR_MARGINS.top, ")")
   }, /*#__PURE__*/React.createElement("g", {
     ref: histogramRef
-  }), /*#__PURE__*/React.createElement("path", {
+  }), props.volumeEnabled && /*#__PURE__*/React.createElement("path", {
     className: "line",
     fill: "url(#tfGradient-".concat(props.id, ")"),
     d: areaPath
@@ -648,109 +697,210 @@ var TfEditor = function TfEditor(props) {
   }), /*#__PURE__*/React.createElement("g", {
     ref: yAxisRef,
     className: "axis"
-  }), controlPointCircles, !props.useControlPoints && /*#__PURE__*/React.createElement("g", {
-    className: "ramp-sliders"
-  }, plotMinU8 <= props.ramp[0] && props.ramp[0] <= plotMaxU8 && /*#__PURE__*/React.createElement("g", {
-    transform: "translate(".concat(xScale(binToAbsolute(props.ramp[0], histogram)), ")")
+  }), controlPointCircles, props.volumeEnabled && !props.useControlPoints && /*#__PURE__*/React.createElement("g", {
+    className: "sliders sliders-ramp"
+  }, plotMin <= props.ramp[0] && props.ramp[0] <= plotMax && /*#__PURE__*/React.createElement("g", {
+    transform: "translate(".concat(xScale(props.ramp[0]), ")")
   }, /*#__PURE__*/React.createElement("line", {
     y1: innerHeight,
     strokeDasharray: "5,5",
     strokeWidth: 2
   }), /*#__PURE__*/React.createElement("line", {
-    className: "ramp-slider-click-target",
+    className: "slider-click-target",
     y1: innerHeight,
     strokeWidth: 6,
     onPointerDown: function onPointerDown() {
-      return setDraggedPointIdx(TfEditorRampSliderHandle.Min);
+      return setDraggedPointIdx(TfEditorSliderHandle.Min);
     }
   }), /*#__PURE__*/React.createElement("path", {
     d: sliderHandlePath,
     transform: "translate(0,".concat(innerHeight, ") rotate(180)"),
     onPointerDown: function onPointerDown() {
-      return setDraggedPointIdx(TfEditorRampSliderHandle.Min);
+      return setDraggedPointIdx(TfEditorSliderHandle.Min);
     }
-  })), plotMinU8 <= props.ramp[1] && props.ramp[1] <= plotMaxU8 && /*#__PURE__*/React.createElement("g", {
-    transform: "translate(".concat(xScale(binToAbsolute(props.ramp[1], histogram)), ")")
+  })), plotMin <= props.ramp[1] && props.ramp[1] <= plotMax && /*#__PURE__*/React.createElement("g", {
+    transform: "translate(".concat(xScale(props.ramp[1]), ")")
   }, /*#__PURE__*/React.createElement("line", {
     y1: innerHeight,
     strokeDasharray: "5,5",
     strokeWidth: 2
   }), /*#__PURE__*/React.createElement("line", {
-    className: "ramp-slider-click-target",
+    className: "slider-click-target",
     y1: innerHeight,
     strokeWidth: 6,
     onPointerDown: function onPointerDown() {
-      return setDraggedPointIdx(TfEditorRampSliderHandle.Max);
+      return setDraggedPointIdx(TfEditorSliderHandle.Max);
     }
   }), /*#__PURE__*/React.createElement("path", {
     d: sliderHandlePath,
     onPointerDown: function onPointerDown() {
-      return setDraggedPointIdx(TfEditorRampSliderHandle.Max);
+      return setDraggedPointIdx(TfEditorSliderHandle.Max);
     }
-  }))))), /*#__PURE__*/React.createElement("div", {
-    className: "tf-editor-control-row plot-range-row"
-  }, "Plot min/max", /*#__PURE__*/React.createElement(InputNumber, {
-    value: plotMin,
+  }))), props.isosurfaceEnabled && plotMin <= isovalue && isovalue <= plotMax && /*#__PURE__*/React.createElement("g", {
+    className: "sliders sliders-isovalue",
+    transform: "translate(".concat(xScale(isovalue), ")")
+  }, /*#__PURE__*/React.createElement("line", {
+    className: "slider-isosurface",
+    y1: innerHeight,
+    strokeDasharray: "4,4",
+    strokeWidth: 2
+  }), /*#__PURE__*/React.createElement("line", {
+    className: "slider-click-target",
+    y1: innerHeight,
+    strokeWidth: 6,
+    onPointerDown: function onPointerDown() {
+      setDraggedIsovalue(props.isovalue);
+      setDraggedPointIdx(TfEditorSliderHandle.Isosurface);
+    }
+  }), /*#__PURE__*/React.createElement("path", {
+    d: isovalueHandlePath,
+    onPointerDown: function onPointerDown() {
+      return setDraggedPointIdx(TfEditorSliderHandle.Isosurface);
+    }
+  }), /*#__PURE__*/React.createElement("path", {
+    d: isovalueHandlePath,
+    transform: "translate(0,".concat(innerHeight, ") rotate(180)"),
+    onPointerDown: function onPointerDown() {
+      return setDraggedPointIdx(TfEditorSliderHandle.Isosurface);
+    }
+  })))), props.volumeEnabled && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h4", null, "Volume settings"), /*#__PURE__*/React.createElement("div", {
+    className: "tf-editor-control-row"
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Dropdown, {
+    trigger: ["click"],
+    menu: {
+      items: [{
+        key: "auto98XF",
+        label: "Default (50% - 98%)"
+      }, {
+        key: "auto2XF",
+        label: "ImageJ Auto"
+      }, {
+        key: "resetXF",
+        label: "Auto 1 (0% - 100%)"
+      }, {
+        key: "bestFitXF",
+        label: "Auto 2 (10% - 90%)"
+      }],
+      onClick: function onClick(_ref5) {
+        var key = _ref5.key;
+        return applyTFGenerator(key);
+      }
+    }
+  }, /*#__PURE__*/React.createElement(Button, {
+    size: "small"
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center",
+      gap: "4px"
+    }
+  }, "Apply ramp", /*#__PURE__*/React.createElement(ViewerIcon, {
+    type: "dropdownArrow",
+    style: {
+      fontSize: "14px"
+    }
+  }))))), /*#__PURE__*/React.createElement("div", null, useRamp && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, "Levels min/max"), /*#__PURE__*/React.createElement(InputNumber, {
+    value: props.ramp[0],
     onChange: function onChange(v) {
-      return v !== null && changeChannelSetting({
-        plotMin: v,
-        plotMax: Math.max(v + 1, plotMax)
-      });
+      return v !== null && setRamp([v, props.ramp[1]]);
     },
     formatter: numberFormatter,
     min: typeRange.min,
-    max: typeRange.max - 1,
+    max: Math.min(props.ramp[1], typeRange.max),
     size: "small",
     controls: false
   }), /*#__PURE__*/React.createElement(InputNumber, {
-    value: plotMax,
+    value: props.ramp[1],
     onChange: function onChange(v) {
-      return v !== null && changeChannelSetting({
-        plotMax: v,
-        plotMin: Math.min(v - 1, plotMin)
-      });
+      return v !== null && setRamp([props.ramp[0], v]);
     },
     formatter: numberFormatter,
-    min: typeRange.min + 1,
+    min: Math.max(typeRange.min, props.ramp[0]),
     max: typeRange.max,
     size: "small",
     controls: false
-  }), /*#__PURE__*/React.createElement(Button, {
-    size: "small",
-    style: {
-      marginLeft: "12px"
-    },
-    onClick: function onClick() {
-      return changeChannelSetting({
-        plotMin: props.channelData.rawMin,
-        plotMax: props.channelData.rawMax
-      });
-    }
-  }, "Fit to data"), /*#__PURE__*/React.createElement(Button, {
-    size: "small",
+  }), /*#__PURE__*/React.createElement(Tooltip, {
+    title: "".concat(props.keepIntensityRange ? "Do not keep" : "Keep", " intensity threshold values when switching volumes.")
+  }, /*#__PURE__*/React.createElement(Button, {
     onClick: function onClick() {
-      return changeChannelSetting({
-        plotMin: typeRange.min,
-        plotMax: typeRange.max
+      return props.changeChannelSetting({
+        keepIntensityRange: !props.keepIntensityRange
       });
+    },
+    style: {
+      height: 24,
+      padding: "0 4px"
+    },
+    type: props.keepIntensityRange ? "default" : "text"
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      margin: 0
     }
-  }, "Full range")), /*#__PURE__*/React.createElement(SliderRow, {
-    label: /*#__PURE__*/React.createElement(Checkbox, {
+  }, props.keepIntensityRange ? /*#__PURE__*/React.createElement(PushpinFilled, null) : /*#__PURE__*/React.createElement(PushpinOutlined, null))))))), /*#__PURE__*/React.createElement(SliderRow, {
+    label: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Checkbox, {
+      checked: props.useControlPoints,
+      onChange: function onChange(e) {
+        return changeChannelSetting({
+          useControlPoints: e.target.checked
+        });
+      }
+    }, "Advanced"), /*#__PURE__*/React.createElement(Checkbox, {
       checked: props.colorizeEnabled,
       onChange: function onChange(e) {
         return changeChannelSetting({
           colorizeEnabled: e.target.checked
         });
+      },
+      style: {
+        marginLeft: "5px"
       }
-    }, "Colorize"),
+    }, "Colorize")),
     max: 1,
     start: props.colorizeAlpha,
-    onUpdate: function onUpdate(values) {
+    onUpdate: function onUpdate(_ref6) {
+      var _ref7 = _slicedToArray(_ref6, 1),
+        colorizeAlpha = _ref7[0];
       return changeChannelSetting({
-        colorizeAlpha: values[0]
+        colorizeAlpha: colorizeAlpha
       });
     },
     hideSlider: !props.colorizeEnabled
-  }));
+  })), props.isosurfaceEnabled && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h4", null, "Isosurface settings"), /*#__PURE__*/React.createElement("div", {
+    className: "tf-editor-control-row"
+  }, /*#__PURE__*/React.createElement("div", null, "Isovalue", /*#__PURE__*/React.createElement(InputNumber, {
+    value: props.isovalue,
+    onChange: function onChange(isovalue) {
+      return isovalue !== null && changeChannelSetting({
+        isovalue: isovalue
+      });
+    },
+    formatter: numberFormatter,
+    min: typeRange.min,
+    max: typeRange.max,
+    size: "small",
+    controls: false
+  })), /*#__PURE__*/React.createElement("div", null, "Export surface", /*#__PURE__*/React.createElement(Button, {
+    size: "small",
+    onClick: function onClick() {
+      return props.saveIsosurface("GLTF");
+    }
+  }, "GLTF"), /*#__PURE__*/React.createElement(Button, {
+    size: "small",
+    onClick: function onClick() {
+      return props.saveIsosurface("STL");
+    }
+  }, "STL"))), /*#__PURE__*/React.createElement(SliderRow, {
+    label: "Opacity",
+    max: 1.0,
+    start: props.opacity,
+    onUpdate: function onUpdate(_ref8) {
+      var _ref9 = _slicedToArray(_ref8, 1),
+        opacity = _ref9[0];
+      return changeChannelSetting({
+        opacity: opacity
+      });
+    }
+  })));
 };
 export default TfEditor;