@aics/vole-app 2.13.4 → 2.13.5

package/README.md

@@ -15,7 +15,7 @@ The volume shader itself is a heavily modified version of one that has distant o
 ## to use
 
 - `https://vole.allencell.org/?url=path/to/ZARR`
-- for more url parameters, see [`URL_SPEC.md`](documentation\URL_SPEC.md)
+- for more url parameters, see [`URL_SPEC.md`](documentation/URL_SPEC.md)
 
 or as React component:
 

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

@@ -108,17 +108,17 @@ var sliderHandleSymbol = {
     context.closePath();
   }
 };
-function u8ToAbsolute(value, channel) {
-  return channel.rawMin + value / 255 * (channel.rawMax - channel.rawMin);
+function binToAbsolute(value, histogram) {
+  return histogram.getValueFromBinIndex(value);
 }
-function absoluteToU8(value, channel) {
-  return (value - channel.rawMin) / (channel.rawMax - channel.rawMin) * 255;
+function absoluteToBin(value, histogram) {
+  return histogram.findFractionalBinOfValue(value);
 }
-function controlPointToAbsolute(cp, channel) {
+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 u8ToAbsolute(cp.x, channel);
+  return binToAbsolute(cp.x, histogram);
 }
 
 /** For when all control points are outside the plot's range: just fill the plot with the settings from 1 point */
@@ -293,12 +293,8 @@ 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];
+  var histogram = props.channelData.histogram;
+  var typeRange = DTYPE_RANGE[props.channelData.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. */
@@ -306,17 +302,11 @@ var TfEditor = function TfEditor(props) {
     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]);
+    return absoluteToBin(plotMin, histogram);
+  }, [plotMin, histogram]);
   var plotMaxU8 = useMemo(function () {
-    return absoluteToU8(plotMax, {
-      rawMin: rawMin,
-      rawMax: rawMax
-    });
-  }, [plotMax, rawMin, rawMax]);
+    return absoluteToBin(plotMax, histogram);
+  }, [plotMax, histogram]);
   var yScale = useMemo(function () {
     return d3.scaleLinear().domain([0, 1]).range([innerHeight, 0]);
   }, [innerHeight]);
@@ -326,7 +316,7 @@ var TfEditor = function TfEditor(props) {
       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))];
+    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))];
   };
   var dragControlPoint = function dragControlPoint(draggedIdx, x, opacity) {
     var newControlPoints = _toConsumableArray(controlPointsRef.current);
@@ -461,15 +451,12 @@ var TfEditor = function TfEditor(props) {
   var areaPath = useMemo(function () {
     var _areaGenerator;
     var areaGenerator = d3.area().x(function (d) {
-      return xScale(controlPointToAbsolute(d, {
-        rawMin: rawMin,
-        rawMax: rawMax
-      }));
+      return xScale(controlPointToAbsolute(d, histogram));
     }).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, rawMin, rawMax]);
+  }, [controlPointsToRender, xScale, yScale, innerHeight, histogram]);
 
   /** d3-generated svg data string representing the "basic mode" min/max slider handles */
   var sliderHandlePath = useMemo(function () {
@@ -529,17 +516,14 @@ var TfEditor = function TfEditor(props) {
     .data(binLengthsToRender) // bind the histogram bins to this selection
     .join("rect") // ensure we have exactly as many bound `rect` elements in the DOM as we have histogram bins
     .attr("class", "bar").attr("width", barWidth).attr("x", function (_len, idx) {
-      return xScale(u8ToAbsolute(idx + start, {
-        rawMin: rawMin,
-        rawMax: rawMax
-      }));
+      return xScale(binToAbsolute(idx + start, histogram));
     }) // set position and height from data
     .attr("y", function (len) {
       return binScale(len);
     }).attr("height", function (len) {
       return innerHeight - binScale(len);
     });
-  }, [xScale, rawMin, rawMax, histogram, innerWidth, innerHeight, plotMinU8, plotMaxU8]);
+  }, [xScale, histogram, innerWidth, innerHeight, plotMinU8, plotMaxU8]);
   var applyTFGenerator = useCallback(function (generator) {
     setSelectedPointIdx(null);
     lastColorRef.current = TFEDITOR_DEFAULT_COLOR;
@@ -574,7 +558,7 @@ var TfEditor = function TfEditor(props) {
     return /*#__PURE__*/React.createElement("circle", {
       key: i,
       className: i === selectedPointIdx ? "selected" : "",
-      cx: xScale(controlPointToAbsolute(cp, props.channelData)),
+      cx: xScale(controlPointToAbsolute(cp, histogram)),
       cy: yScale(cp.opacity),
       style: {
         fill: colorArrayToString(cp.color)
@@ -606,22 +590,22 @@ var TfEditor = function TfEditor(props) {
   }, "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),
+    value: binToAbsolute(props.ramp[0], histogram),
     onChange: function onChange(v) {
-      return v !== null && setRamp([absoluteToU8(v, props.channelData), props.ramp[1]]);
+      return v !== null && setRamp([absoluteToBin(v, histogram), props.ramp[1]]);
     },
     formatter: numberFormatter,
     min: typeRange.min,
-    max: Math.min(u8ToAbsolute(props.ramp[1], props.channelData), typeRange.max),
+    max: Math.min(binToAbsolute(props.ramp[1], histogram), typeRange.max),
     size: "small",
     controls: false
   }), /*#__PURE__*/React.createElement(InputNumber, {
-    value: u8ToAbsolute(props.ramp[1], props.channelData),
+    value: binToAbsolute(props.ramp[1], histogram),
     onChange: function onChange(v) {
-      return v !== null && setRamp([props.ramp[0], absoluteToU8(v, props.channelData)]);
+      return v !== null && setRamp([props.ramp[0], absoluteToBin(v, histogram)]);
     },
     formatter: numberFormatter,
-    min: Math.max(typeRange.min, u8ToAbsolute(props.ramp[0], props.channelData)),
+    min: Math.max(typeRange.min, binToAbsolute(props.ramp[0], histogram)),
     max: typeRange.max,
     size: "small",
     controls: false
@@ -667,7 +651,7 @@ var TfEditor = function TfEditor(props) {
   }), 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(u8ToAbsolute(props.ramp[0], props.channelData)), ")")
+    transform: "translate(".concat(xScale(binToAbsolute(props.ramp[0], histogram)), ")")
   }, /*#__PURE__*/React.createElement("line", {
     y1: innerHeight,
     strokeDasharray: "5,5",
@@ -686,7 +670,7 @@ var TfEditor = function TfEditor(props) {
       return setDraggedPointIdx(TfEditorRampSliderHandle.Min);
     }
   })), plotMinU8 <= props.ramp[1] && props.ramp[1] <= plotMaxU8 && /*#__PURE__*/React.createElement("g", {
-    transform: "translate(".concat(xScale(u8ToAbsolute(props.ramp[1], props.channelData)), ")")
+    transform: "translate(".concat(xScale(binToAbsolute(props.ramp[1], histogram)), ")")
   }, /*#__PURE__*/React.createElement("line", {
     y1: innerHeight,
     strokeDasharray: "5,5",
@@ -738,8 +722,8 @@ var TfEditor = function TfEditor(props) {
     },
     onClick: function onClick() {
       return changeChannelSetting({
-        plotMin: rawMin,
-        plotMax: rawMax
+        plotMin: props.channelData.rawMin,
+        plotMax: props.channelData.rawMax
       });
     }
   }, "Fit to data"), /*#__PURE__*/React.createElement(Button, {

package/es/aics-image-viewer/shared/utils/controlPointsToLut.js

@@ -40,6 +40,10 @@ function parseLutValue(value, histogram) {
     // percentile
     var _parsedValue = parseFloat(value.substring(1)) / 100.0;
     return histogram.findBinOfPercentile(_parsedValue);
+  } else if (firstChar === "v") {
+    // value
+    var _parsedValue2 = parseFloat(value.substring(1));
+    return histogram.findFractionalBinOfValue(_parsedValue2);
   } else {
     // plain number
     return parseFloat(value);
@@ -47,21 +51,26 @@ function parseLutValue(value, histogram) {
 }
 
 /**
- * Parses a lookup table (LUT) from a `ViewerChannelSetting` object, where the `lut` field is an
- * array of two alphanumeric strings.
+ * Parses a lookup table (LUT) from a `ViewerChannelSetting` object, where the
+ * `lut` field is an array of two alphanumeric strings.
  *
- * @returns a Lut object if the `lut` field is valid; otherwise, returns undefined.
+ * @returns a Lut object if the `lut` field is valid; otherwise, returns
+ * undefined.
  *
  * Min and max values are determined as following:
- * - Plain numbers are direct intensity values.
- * - `p{n}` represents a percentile, where `n` is a percentile in the [0, 100] range.
+ * - Plain numbers are indices of histogram bins, typically in the range [0,
+ *   255].
+ * - `v{n}` represents a raw intensity value, where `n` is a number.
+ * - `p{n}` represents a percentile, where `n` is a percentile in the [0, 100]
+ *   range.
  * - `m{n}` represents the median multiplied by `n / 100`.
- * - `autoij` in either the min or max fields will use the "auto" algorithm
- * from ImageJ to select the min AND max.
+ * - `autoij` in either the min or max fields will use the "auto" algorithm from
+ *   ImageJ to select the min and max.
  *
  * @example
  * ```
- * "0:255"    // min: intensity 0, max: intensity 255.
+ * "0:255"    // min: bin 0, max: bin 255.
+ * "v100:v150" // min: intensity 100, max: intensity 150.
  * "p50:p90"  // min: 50th percentile, max: 90th percentile.
  * "m1:p75"   // min: median, max: 75th percentile.
  * "autoij:0" // use Auto-IJ to calculate min and max.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aics/vole-app",
-  "version": "2.13.4",
+  "version": "2.13.5",
   "description": "web view of cell volume images",
   "repository": "github:allen-cell-animated/vole-app",
   "main": "es/index.js",

package/type-declarations/aics-image-viewer/shared/utils/controlPointsToLut.d.ts

@@ -4,21 +4,26 @@ export declare function controlPointsToLut(controlPoints: ControlPoint[]): Lut;
 /** Returns a default lookup table based on a min/max percentile of the current volume's data. */
 export declare function getDefaultLut(histogram: Histogram): Lut;
 /**
- * Parses a lookup table (LUT) from a `ViewerChannelSetting` object, where the `lut` field is an
- * array of two alphanumeric strings.
+ * Parses a lookup table (LUT) from a `ViewerChannelSetting` object, where the
+ * `lut` field is an array of two alphanumeric strings.
  *
- * @returns a Lut object if the `lut` field is valid; otherwise, returns undefined.
+ * @returns a Lut object if the `lut` field is valid; otherwise, returns
+ * undefined.
  *
  * Min and max values are determined as following:
- * - Plain numbers are direct intensity values.
- * - `p{n}` represents a percentile, where `n` is a percentile in the [0, 100] range.
+ * - Plain numbers are indices of histogram bins, typically in the range [0,
+ *   255].
+ * - `v{n}` represents a raw intensity value, where `n` is a number.
+ * - `p{n}` represents a percentile, where `n` is a percentile in the [0, 100]
+ *   range.
  * - `m{n}` represents the median multiplied by `n / 100`.
- * - `autoij` in either the min or max fields will use the "auto" algorithm
- * from ImageJ to select the min AND max.
+ * - `autoij` in either the min or max fields will use the "auto" algorithm from
+ *   ImageJ to select the min and max.
  *
  * @example
  * ```
- * "0:255"    // min: intensity 0, max: intensity 255.
+ * "0:255"    // min: bin 0, max: bin 255.
+ * "v100:v150" // min: intensity 100, max: intensity 150.
  * "p50:p90"  // min: 50th percentile, max: 90th percentile.
  * "m1:p75"   // min: median, max: 75th percentile.
  * "autoij:0" // use Auto-IJ to calculate min and max.

package/type-declarations/aics-image-viewer/shared/utils/viewerChannelSettings.d.ts

@@ -10,7 +10,8 @@ export interface ViewerChannelSetting {
      * Min and max values for the intensity lookup table, which maps from raw intensity values
      * in the volume to opacity and color. Defaults to [0, 255].
      *
-     * - Plain numbers are treated as direct intensity values.
+     * - Plain numbers are indices of histogram bins, in the range [0, 255].
+     * - `v{n}` represents a raw intensity value, where `n` is an integer.
      * - `p{n}` represents a percentile, where `n` is a percentile in the [0, 100] range.
      * - `m{n}` represents the median multiplied by `n / 100`.
      * - `autoij` in either the min or max fields will use the "auto" algorithm