@aics/vole-app 2.11.0

package/es/aics-image-viewer/components/shared/SliderRow/index.js

@@ -0,0 +1,31 @@
+import React from "react";
+import SmarterSlider from "../SmarterSlider";
+import "./styles.css";
+var INTEGER_FORMATTER = {
+  to: Math.round,
+  from: Number
+};
+
+/** A component to ensure a single unified style across the many labeled slider rows in the control panel */
+var SliderRow = function SliderRow(props) {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "viewer-control-row"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "control-name"
+  }, props.label), /*#__PURE__*/React.createElement("div", {
+    className: "control"
+  }, props.start === undefined ? props.children : !props.hideSlider && /*#__PURE__*/React.createElement(SmarterSlider, {
+    range: {
+      min: 0,
+      max: props.max
+    },
+    start: props.start,
+    connect: true,
+    tooltips: true,
+    behaviour: "drag",
+    format: props.formatInteger ? INTEGER_FORMATTER : undefined,
+    onUpdate: props.onUpdate,
+    onChange: props.onChange
+  })));
+};
+export default SliderRow;

package/es/aics-image-viewer/components/shared/SliderRow/styles.css

@@ -0,0 +1,19 @@
+.viewer-control-row{
+  display:flex;
+  align-items:center;
+  margin-right:10px;
+}
+
+  .viewer-control-row:not(:last-child){
+    margin-bottom:20px;
+  }
+
+  .viewer-control-row .control-name{
+    color:var(--color-controlpanel-text);
+    flex:2;
+    white-space:nowrap;
+  }
+
+  .viewer-control-row .control{
+    flex:5;
+  }

package/es/aics-image-viewer/components/shared/SmarterSlider.js

@@ -0,0 +1,40 @@
+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 _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 React from "react";
+import Nouislider from "nouislider-react";
+var MemoedNouislider = /*#__PURE__*/React.memo(Nouislider, function (_prevProps, _ref) {
+  var noUpdate = _ref.noUpdate;
+  return noUpdate;
+});
+
+/** A wrapper around `Nouislider` that prevents updates while the slider is being dragged. */
+var SmarterSlider = function SmarterSlider(props) {
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    noUpdate = _React$useState2[0],
+    setNoUpdate = _React$useState2[1];
+  var wrapEventHandler = function wrapEventHandler(shouldNotUpdate, handler) {
+    return function () {
+      setNoUpdate(shouldNotUpdate);
+      if (handler) handler.apply(void 0, arguments);
+    };
+  };
+  var onStart = wrapEventHandler(true, props.onStart);
+  var onEnd = wrapEventHandler(false, props.onEnd);
+  return /*#__PURE__*/React.createElement(MemoedNouislider, _objectSpread(_objectSpread({}, props), {}, {
+    noUpdate: noUpdate,
+    onStart: onStart,
+    onEnd: onEnd
+  }));
+};
+export default SmarterSlider;

package/es/aics-image-viewer/components/shared/ViewerIcon.js

@@ -0,0 +1,22 @@
+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 _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+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); }
+import React from "react";
+import Icon from "@ant-design/icons";
+import ICONS from "../../assets/icons";
+var STYLE = {
+  fontSize: "19px"
+};
+/** Wrapper component for easy inclusion of our own custom icons. */
+var ViewerIcon = function ViewerIcon(props) {
+  var newProps = _objectSpread({}, props);
+  newProps.style = _objectSpread(_objectSpread({}, STYLE), props.style);
+  return /*#__PURE__*/React.createElement(Icon, _extends({
+    component: ICONS[props.type]
+  }, newProps));
+};
+export default ViewerIcon;

package/es/aics-image-viewer/shared/colorPalette.js

@@ -0,0 +1,19 @@
+export default {
+  primary1Color: "#0B9AAB",
+  // bright blue
+  primary2Color: "#827AA3",
+  // aics purple
+  primary3Color: "#d8e0e2",
+  // light blue gray
+  accent1Color: "#B8D637",
+  // aics lime green light
+  accent2Color: "#C1F448",
+  // aics lime green bright
+  accent3Color: "#d8e0e2",
+  // light blue gray
+  textColor: "#003057",
+  // dark blue
+  disabledColor: "#D1D1D1",
+  // dull gray
+  pickerHeaderColor: "#316773" // cool blue green
+};

package/es/aics-image-viewer/shared/constants.js

@@ -0,0 +1,164 @@
+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 _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); }
+import { ImageType, RenderMode, ViewMode } from "./enums";
+// Add all exported constants here to prevent circular dependencies
+export var
+  // Control panel will automatically close if viewport is less than this width
+  CONTROL_PANEL_CLOSE_WIDTH = 970,
+  CLIPPING_PANEL_HEIGHT_DEFAULT = 200,
+  CLIPPING_PANEL_HEIGHT_TALL = 235,
+  BACKGROUND_COLOR_DEFAULT = [0, 0, 0],
+  BOUNDING_BOX_COLOR_DEFAULT = [255, 255, 255],
+  AXIS_MARGIN_DEFAULT = [16, 16],
+  SCALE_BAR_MARGIN_DEFAULT = [120, 12],
+  // These settings were chosen to work well with most AICS microscopy pipeline images.
+  // These numbers mean: remap the bottom LUT_MIN_PERCENTILE fraction of pixels to zero intensity,
+  // and linearly increase intensity up to the LUT_MAX_PERCENTILE fraction of pixels.
+  LUT_MIN_PERCENTILE = 0.5,
+  LUT_MAX_PERCENTILE = 0.983,
+  ISOSURFACE_OPACITY_SLIDER_MAX = 255.0,
+  ALPHA_MASK_SLIDER_DEFAULT = 0,
+  BRIGHTNESS_SLIDER_LEVEL_DEFAULT = 70,
+  DENSITY_SLIDER_LEVEL_DEFAULT = 50,
+  LEVELS_SLIDER_DEFAULT = [35.0, 140.0, 255.0],
+  INTERPOLATION_ENABLED_DEFAULT = true,
+  OTHER_CHANNEL_KEY = "Other",
+  SINGLE_GROUP_CHANNEL_KEY = "Channels";
+export var TFEDITOR_DEFAULT_COLOR = [255, 255, 255];
+export var TFEDITOR_MAX_BIN = 255;
+export var CACHE_MAX_SIZE = 1000000000;
+export var QUEUE_MAX_SIZE = 10;
+export var QUEUE_MAX_LOW_PRIORITY_SIZE = 4;
+export var PRESET_COLORS_1 = [[190, 68, 171], [189, 211, 75], [61, 155, 169], [128, 128, 128], [255, 255, 255], [239, 27, 45], [238, 77, 245], [96, 255, 255]];
+export var PRESET_COLORS_2 = [[128, 0, 0], [0, 128, 0], [0, 0, 128], [32, 32, 32], [255, 255, 0], [255, 0, 255], [0, 255, 0], [0, 0, 255]];
+export var PRESET_COLORS_3 = [[128, 0, 128], [128, 128, 128], [0, 128, 128], [128, 128, 0], [255, 255, 255], [255, 0, 0], [255, 0, 255], [0, 255, 255]];
+export var PRESET_COLORS_0 = [[226, 205, 179], [111, 186, 17], [141, 163, 192], [245, 241, 203], [224, 227, 209], [221, 155, 245], [227, 244, 245], [255, 98, 0], [247, 219, 120]];
+export var PRESET_COLOR_MAP = Object.freeze([{
+  colors: PRESET_COLORS_0,
+  name: "Default"
+}, {
+  colors: PRESET_COLORS_1,
+  name: "Thumbnail colors"
+}, {
+  colors: PRESET_COLORS_2,
+  name: "RGB colors"
+}, {
+  colors: PRESET_COLORS_3,
+  name: "White structure"
+}]);
+
+/** Allows the 3D viewer to apply the default camera settings for the view mode. */
+var USE_VIEW_MODE_DEFAULT_CAMERA = undefined;
+var viewModeToDefaultCameraPosition = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ViewMode.threeD, [0, 0, 5]), ViewMode.xy, [0, 0, 2]), ViewMode.xz, [0, 2, 0]), ViewMode.yz, [2, 0, 0]);
+var viewModeToDefaultCameraUp = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ViewMode.threeD, [0, 1, 0]), ViewMode.xy, [0, 1, 0]), ViewMode.xz, [0, 0, 1]), ViewMode.yz, [0, 0, 1]);
+
+/**
+ * Reflects the default camera settings the 3D viewer uses on volume load.
+ * These SHOULD NOT be changed; otherwise, existing shared links that don't specify the
+ * camera settings will use the new defaults and may be in unexpected orientations or positions.
+ */
+export var getDefaultCameraState = function getDefaultCameraState() {
+  var viewMode = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ViewMode.threeD;
+  return {
+    // Default position varies by view mode
+    position: viewModeToDefaultCameraPosition[viewMode],
+    target: [0, 0, 0],
+    up: viewModeToDefaultCameraUp[viewMode],
+    fov: 20,
+    orthoScale: 0.5
+  };
+};
+export var getDefaultViewerChannelSettings = function getDefaultViewerChannelSettings() {
+  return {
+    groups: [{
+      name: "Channels",
+      channels: [{
+        match: [0, 1, 2],
+        enabled: true
+      }, {
+        match: "(.+)",
+        enabled: false
+      }]
+    }]
+  };
+};
+
+/**
+ * Returns the default viewer state as a new object.
+ */
+export var getDefaultViewerState = function getDefaultViewerState() {
+  return {
+    viewMode: ViewMode.threeD,
+    // "XY", "XZ", "YZ"
+    renderMode: RenderMode.volumetric,
+    // "pathtrace", "maxproject"
+    imageType: ImageType.segmentedCell,
+    showAxes: false,
+    showBoundingBox: false,
+    backgroundColor: BACKGROUND_COLOR_DEFAULT,
+    boundingBoxColor: BOUNDING_BOX_COLOR_DEFAULT,
+    autorotate: false,
+    maskAlpha: ALPHA_MASK_SLIDER_DEFAULT,
+    brightness: BRIGHTNESS_SLIDER_LEVEL_DEFAULT,
+    density: DENSITY_SLIDER_LEVEL_DEFAULT,
+    levels: LEVELS_SLIDER_DEFAULT,
+    interpolationEnabled: INTERPOLATION_ENABLED_DEFAULT,
+    region: {
+      x: [0, 1],
+      y: [0, 1],
+      z: [0, 1]
+    },
+    slice: {
+      x: 0.5,
+      y: 0.5,
+      z: 0.5
+    },
+    time: 0,
+    scene: 0,
+    // Do not override camera position, target, etc. by default;
+    // instead, let the viewer apply default camera settings based on the view mode.
+    // This prevents a bug where the camera's position and view mode are set to
+    // incompatible states and the viewport becomes blank.
+    cameraState: USE_VIEW_MODE_DEFAULT_CAMERA
+  };
+};
+var INIT_COLORS = PRESET_COLORS_0;
+
+/** Returns the default color for a channel, by its index. */
+export function getDefaultChannelColor(channelIndex) {
+  return INIT_COLORS[channelIndex % INIT_COLORS.length];
+}
+
+/**
+ * Returns the default channel state as a new object. If an index is provided, uses the default
+ * color preset for that index.
+ * @param index Optional channel index to use for the color preset.
+ * @returns a default ChannelState object.
+ */
+export var getDefaultChannelState = function getDefaultChannelState() {
+  var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+  return {
+    name: "",
+    displayName: "",
+    volumeEnabled: false,
+    isosurfaceEnabled: false,
+    colorizeEnabled: false,
+    colorizeAlpha: 1.0,
+    isovalue: 128,
+    opacity: 1.0,
+    color: getDefaultChannelColor(index),
+    useControlPoints: false,
+    ramp: [0, TFEDITOR_MAX_BIN],
+    controlPoints: [{
+      x: 0,
+      opacity: 0,
+      color: [255, 255, 255]
+    }, {
+      x: 255,
+      opacity: 1,
+      color: [255, 255, 255]
+    }]
+  };
+};

package/es/aics-image-viewer/shared/enums.js

@@ -0,0 +1,18 @@
+export var ViewMode = /*#__PURE__*/function (ViewMode) {
+  ViewMode["threeD"] = "3D";
+  ViewMode["xy"] = "XY";
+  ViewMode["xz"] = "XZ";
+  ViewMode["yz"] = "YZ";
+  return ViewMode;
+}({});
+export var RenderMode = /*#__PURE__*/function (RenderMode) {
+  RenderMode["volumetric"] = "volumetric";
+  RenderMode["maxProject"] = "maxproject";
+  RenderMode["pathTrace"] = "pathtrace";
+  return RenderMode;
+}({});
+export var ImageType = /*#__PURE__*/function (ImageType) {
+  ImageType["segmentedCell"] = "cell";
+  ImageType["fullField"] = "fov";
+  return ImageType;
+}({});

package/es/aics-image-viewer/shared/types.js

@@ -0,0 +1,6 @@
+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 _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); }
+import { ViewMode } from "./enums";
+export var activeAxisMap = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ViewMode.yz, "x"), ViewMode.xz, "y"), ViewMode.xy, "z"), ViewMode.threeD, null);

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

@@ -0,0 +1,16 @@
+export var colorObjectToArray = function colorObjectToArray(obj) {
+  return [obj.r, obj.g, obj.b];
+};
+export var colorArrayToObject = function colorArrayToObject(arr) {
+  return {
+    r: arr[0],
+    g: arr[1],
+    b: arr[2]
+  };
+};
+export var colorArrayToFloats = function colorArrayToFloats(arr) {
+  return [arr[0] / 255, arr[1] / 255, arr[2] / 255];
+};
+export var colorArrayToString = function colorArrayToString(arr) {
+  return "rgb(".concat(arr[0], ", ").concat(arr[1], ", ").concat(arr[2], ")");
+};

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

@@ -0,0 +1,182 @@
+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 _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; }
+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 _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 _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 _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; }
+import { Lut, remapControlPoints } from "@aics/vole-core";
+import { LUT_MAX_PERCENTILE, LUT_MIN_PERCENTILE, TFEDITOR_DEFAULT_COLOR, TFEDITOR_MAX_BIN } from "../constants";
+import { findFirstChannelMatch } from "./viewerChannelSettings";
+
+// @param {Object[]} controlPoints - array of {x:number, opacity:number, color:string}
+// @return {Uint8Array} array of length 256*4 representing the rgba values of the gradient
+export function controlPointsToLut(controlPoints) {
+  var lut = new Lut().createFromControlPoints(controlPoints);
+  return lut;
+}
+
+/** Returns a default lookup table based on a min/max percentile of the current volume's data. */
+export function getDefaultLut(histogram) {
+  var hmin = histogram.findBinOfPercentile(LUT_MIN_PERCENTILE);
+  var hmax = histogram.findBinOfPercentile(LUT_MAX_PERCENTILE);
+  return new Lut().createFromMinMax(hmin, hmax);
+}
+
+/**
+ * Parses a single LUT value from a string, where the value is either a number, a percentile, or a median multiplier.
+ */
+function parseLutValue(value, histogram) {
+  // look at first char of string.
+  var firstChar = value.charAt(0);
+  if (firstChar === "m") {
+    // median
+    var parsedValue = parseFloat(value.substring(1)) / 100.0;
+    return histogram.maxBin * parsedValue;
+  } else if (firstChar === "p") {
+    // percentile
+    var _parsedValue = parseFloat(value.substring(1)) / 100.0;
+    return histogram.findBinOfPercentile(_parsedValue);
+  } else {
+    // plain number
+    return parseFloat(value);
+  }
+}
+
+/**
+ * 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.
+ *
+ * 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.
+ * - `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.
+ *
+ * @example
+ * ```
+ * "0:255"    // min: intensity 0, max: intensity 255.
+ * "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.
+ * ```
+ */
+export function parseLutFromSettings(histogram, initSettings) {
+  if (initSettings.lut === undefined || initSettings.lut.length !== 2) {
+    return undefined;
+  }
+  var lutValues;
+  if (initSettings.lut[0] === "autoij" || initSettings.lut[1] === "autoij") {
+    lutValues = histogram.findAutoIJBins();
+  } else {
+    lutValues = [parseLutValue(initSettings.lut[0], histogram), parseLutValue(initSettings.lut[1], histogram)];
+  }
+  return new Lut().createFromMinMax(Math.min(lutValues[0], lutValues[1]), Math.max(lutValues[0], lutValues[1]));
+}
+
+/**
+ * Initializes the lookup table (LUT) that maps from volume intensity values to color + opacity and applies the LUT to the volume.
+ *
+ * @param aimg The loaded volume data.
+ * @param channelIndex The index of the channel to initialize the LUT for.
+ * @param channelSettings The ViewerChannelSettings object that may contain settings for this channel. If relevant
+ * settings are not found, a default LUT will be used.
+ * @returns an object containing the retrieved ramp control points and "advanced mode" control points.
+ *
+ * LUT values will be determined using the following rules:
+ * - If no `lut` is provided in the `channelSettings`, a default LUT is calculated using min/max percentiles of the data.
+ * - Otherwise, `lut` will be parsed as described in `ViewerChannelSettingParams.lut`.
+ * - The `controlPoints` and `ramp` fields in the `channelSettings` will be used to override the returned "advanced mode"
+ * control points and ramp, respectively.
+ *
+ * If `controlPointsEnabled` is set to true in the `channelSettings`, the "advanced mode" control points will be applied
+ * to the volume; otherwise, the ramp will be applied.
+ */
+export function initializeLut(aimg, channelIndex, channelSettings) {
+  var _initSettings$control;
+  var histogram = aimg.getHistogram(channelIndex);
+  var defaultLut = getDefaultLut(histogram);
+  var ramp = [];
+  var controlPoints = [];
+  var lut = defaultLut;
+  var name = aimg.channelNames[channelIndex];
+  var initSettings = channelSettings && findFirstChannelMatch(name, channelIndex, channelSettings);
+
+  // Attempt to load a LUT from the settings, which will be used to initialize the control points and ramp
+  if (initSettings && initSettings.lut) {
+    var _parseLutFromSettings;
+    lut = (_parseLutFromSettings = parseLutFromSettings(histogram, initSettings)) !== null && _parseLutFromSettings !== void 0 ? _parseLutFromSettings : defaultLut;
+  }
+  // Initialize the control points + ramp using the LUT.
+  // Optionally, override the LUT's control points with the provided control points and/or ramp.
+  controlPoints = (_initSettings$control = initSettings === null || initSettings === void 0 ? void 0 : initSettings.controlPoints) !== null && _initSettings$control !== void 0 ? _initSettings$control : _toConsumableArray(lut.controlPoints);
+  ramp = initSettings !== null && initSettings !== void 0 && initSettings.ramp ? rampToControlPoints(initSettings.ramp) : _toConsumableArray(lut.controlPoints);
+
+  // Apply whatever lut is currently visible
+  var visibleLut;
+  if (initSettings !== null && initSettings !== void 0 && initSettings.controlPointsEnabled) {
+    visibleLut = new Lut().createFromControlPoints(controlPoints);
+  } else {
+    visibleLut = new Lut().createFromControlPoints(ramp);
+  }
+  aimg.setLut(channelIndex, visibleLut);
+  return {
+    ramp: ramp,
+    controlPoints: controlPoints
+  };
+}
+export function controlPointsToRamp(controlPoints) {
+  if (controlPoints.length <= 1) {
+    return [0, TFEDITOR_MAX_BIN];
+  } else if (controlPoints.length === 2) {
+    return [controlPoints[0].x, controlPoints[1].x];
+  } else if (controlPoints.length === 3) {
+    if (controlPoints[0].opacity !== controlPoints[1].opacity && controlPoints[0].opacity !== controlPoints[2].opacity && controlPoints[1].opacity !== controlPoints[2].opacity) {
+      // if all 3 are unequal, assume a ramp from first to last
+      return [controlPoints[0].x, controlPoints[2].x];
+    } else if (controlPoints[0].opacity !== controlPoints[1].opacity) {
+      return [controlPoints[0].x, controlPoints[1].x];
+    } else if (controlPoints[1].opacity !== controlPoints[2].opacity) {
+      return [controlPoints[1].x, controlPoints[2].x];
+    }
+  }
+  return [controlPoints[1].x, controlPoints[controlPoints.length - 2].x];
+}
+export function rampToControlPoints(_ref) {
+  var _ref2 = _slicedToArray(_ref, 2),
+    min = _ref2[0],
+    max = _ref2[1];
+  return [{
+    x: Math.min(min - 1, 0),
+    opacity: 0,
+    color: TFEDITOR_DEFAULT_COLOR
+  }, {
+    x: min,
+    opacity: 0,
+    color: TFEDITOR_DEFAULT_COLOR
+  }, {
+    x: max,
+    opacity: 1,
+    color: TFEDITOR_DEFAULT_COLOR
+  }, {
+    x: Math.max(max + 1, TFEDITOR_MAX_BIN),
+    opacity: 1,
+    color: TFEDITOR_DEFAULT_COLOR
+  }];
+}
+
+/** Remaps an array of control points from an old range (as a 2-tuple) to a new one (extracted from a `Channel`) */
+export function remapControlPointsForChannel(controlPoints, oldRange, _ref3) {
+  var rawMin = _ref3.rawMin,
+    rawMax = _ref3.rawMax;
+  if (oldRange === undefined) {
+    return controlPoints;
+  }
+  return remapControlPoints(controlPoints, oldRange[0], oldRange[1], rawMin, rawMax);
+}

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

@@ -0,0 +1,51 @@
+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 { useState, useRef, useCallback } from "react";
+
+/** A `useState` that also creates a getter function for breaking through closures. */
+export function useStateWithGetter(initialState) {
+  var _useState = useState(initialState),
+    _useState2 = _slicedToArray(_useState, 2),
+    state = _useState2[0],
+    setState = _useState2[1];
+  var stateRef = useRef(state);
+  var wrappedSetState = useCallback(function (value) {
+    stateRef.current = value;
+    setState(value);
+  }, []);
+  var getState = useCallback(function () {
+    return stateRef.current;
+  }, []);
+  return [state, wrappedSetState, getState];
+}
+
+/**
+ * Wraps a setter function and keeps a ref updated to follow the set value. Useful for making the most up-to-date value
+ * of some state accessible to a closure that might be called after the value is updated.
+ */
+// TODO should this replace `useStateWithGetter`?
+
+export function useRefWithSetter(setter, init) {
+  var value = init === undefined ? useRef() : useRef(init);
+  var wrappedSetter = useCallback(function (newValue) {
+    value.current = newValue;
+    setter(newValue);
+  }, [setter]);
+  return [value, wrappedSetter];
+}
+
+/**
+ * For objects which are persistent for the lifetime of the component, not
+ * a member of state, and require a constructor to create. Wraps `useRef`.
+ */
+export function useConstructor(constructor) {
+  var value = useRef(null);
+  if (value.current === null) {
+    value.current = constructor();
+  }
+  return value.current;
+}

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

@@ -0,0 +1,57 @@
+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 _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 _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), 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); }
+var HttpClient = /*#__PURE__*/function () {
+  function HttpClient() {
+    _classCallCheck(this, HttpClient);
+  }
+  return _createClass(HttpClient, [{
+    key: "parseJSON",
+    value:
+    // fetch response.json() is a promise but we want return the json itself
+    function parseJSON(response, _options) {
+      return response.json().then(function (json) {
+        return _objectSpread(_objectSpread({}, response), {}, {
+          locationHeader: response.headers.get("Location"),
+          data: json || {
+            data: [],
+            total_count: 0
+          }
+        });
+      })["catch"](function () {
+        return _objectSpread(_objectSpread({}, response), {}, {
+          data: {
+            error: "unknown_error",
+            message: "error in parsing response json",
+            host: response.headers.get("Location"),
+            time: new Date().toISOString()
+          }
+        });
+      });
+    }
+  }, {
+    key: "getJSON",
+    value: function getJSON(url, options) {
+      var _this = this;
+      return fetch(url, options).then(function (response) {
+        return _this.parseJSON(response, options);
+      }).then(function (response) {
+        if (response.ok) {
+          return response;
+        } else {
+          // fetch will not automatically reject error status codes
+          // however, we want to treat error status codes as failures
+          // so we reject here
+          return Promise.reject(response);
+        }
+      });
+    }
+  }]);
+}();
+export { HttpClient as default };