@aics/vole-app 2.11.0 → 2.12.0

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

@@ -23,7 +23,7 @@ import { Layout } from "antd";
 import { debounce, isEqual } from "lodash";
 import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { Box3, Vector3 } from "three";
-import { AXIS_MARGIN_DEFAULT, CACHE_MAX_SIZE, CLIPPING_PANEL_HEIGHT_DEFAULT, CLIPPING_PANEL_HEIGHT_TALL, CONTROL_PANEL_CLOSE_WIDTH, getDefaultChannelColor, getDefaultViewerState, QUEUE_MAX_LOW_PRIORITY_SIZE, QUEUE_MAX_SIZE, SCALE_BAR_MARGIN_DEFAULT } from "../../shared/constants";
+import { AXIS_MARGIN_DEFAULT, CACHE_MAX_SIZE, CLIPPING_PANEL_HEIGHT_DEFAULT, CLIPPING_PANEL_HEIGHT_TALL, CONTROL_PANEL_CLOSE_WIDTH, DTYPE_RANGE, getDefaultChannelColor, getDefaultViewerState, QUEUE_MAX_LOW_PRIORITY_SIZE, QUEUE_MAX_SIZE, SCALE_BAR_MARGIN_DEFAULT } from "../../shared/constants";
 import { ImageType, RenderMode, ViewMode } from "../../shared/enums";
 import { activeAxisMap } from "../../shared/types";
 import { colorArrayToFloats } from "../../shared/utils/colorRepresentations";
@@ -288,7 +288,9 @@ var App = function App(props) {
         controlPoints = _initializeLut.controlPoints;
       changeChannelSetting(channelIndex, {
         controlPoints: controlPoints,
-        ramp: controlPointsToRamp(ramp)
+        ramp: controlPointsToRamp(ramp),
+        // set the default range of the transfer function editor to cover the full range of the data type
+        plotMax: DTYPE_RANGE[thisChannel.dtype].max
       });
       onResetChannel(channelIndex);
     } else {
@@ -301,8 +303,8 @@ var App = function App(props) {
       var oldRange = channelRangesRef.current[channelIndex];
       if (thisChannelsSettings.useControlPoints) {
         // control points were just automatically remapped - update in state
-        // now manually remap ramp using the channel's old range
         var rampControlPoints = rampToControlPoints(thisChannelsSettings.ramp);
+        // now manually remap ramp using the channel's old range
         var remappedRampControlPoints = remapControlPointsForChannel(rampControlPoints, oldRange, thisChannel);
         changeChannelSetting(channelIndex, {
           ramp: controlPointsToRamp(remappedRampControlPoints),
@@ -572,12 +574,24 @@ var App = function App(props) {
     if (imageMetadata && metadataFormatter) {
       imageMetadata = metadataFormatter(imageMetadata);
     }
+    var sceneMeta;
+    if (Array.isArray(metadata)) {
+      // If metadata is an array, try to index it by scene
+      if (metadata.length >= numScenes) {
+        sceneMeta = metadata[viewerState.current.scene];
+      } else {
+        sceneMeta = metadata[0];
+      }
+    } else {
+      sceneMeta = metadata;
+    }
     if (imageMetadata && Object.keys(imageMetadata).length > 0) {
       return _objectSpread({
         Image: imageMetadata
-      }, metadata);
+      }, sceneMeta);
     } else {
-      return metadata || {};
+      var _sceneMeta;
+      return (_sceneMeta = sceneMeta) !== null && _sceneMeta !== void 0 ? _sceneMeta : {};
     }
   }, [props.metadata, props.metadataFormatter, image]);
 

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

@@ -29,23 +29,30 @@ var SliderRow = function SliderRow(_ref) {
     onStart = _ref.onStart,
     onEnd = _ref.onEnd;
   var isRange = vals.length > 1;
-  // If slider is a range, handles represent slice *edges*: the range around only the max slice is [max-1, max], e.g.
-  // If slider is not a range, handle represents 0-indexed slices: last slice is at max-1
-  var inputMax = isRange ? max : max - 1;
+  // If slider is a range, handles represent slice *edges*: the range around only the 1st slice is [0, 1]; the range
+  // around only the last is [max-1, max].
+  // If slider is not a range, just work with slices, but don't 0-index: 1st slice is 1, last is max
+  var min = isRange ? 0 : 1;
+  var wrappedOnSlide = isRange ? onSlide : function (values) {
+    return onSlide === null || onSlide === void 0 ? void 0 : onSlide([values[0] - 1]);
+  };
+  var wrappedOnChange = isRange ? _onChange : function (values) {
+    return _onChange === null || _onChange === void 0 ? void 0 : _onChange([values[0] - 1]);
+  };
   return /*#__PURE__*/React.createElement("span", {
     className: "axis-slider-container"
   }, /*#__PURE__*/React.createElement("span", {
     className: "slider-name"
-  }, label), inputMax === 0 ? /*#__PURE__*/React.createElement("i", null, "No values to adjust") : /*#__PURE__*/React.createElement("span", {
+  }, label), max === 0 ? /*#__PURE__*/React.createElement("i", null, "No values to adjust") : /*#__PURE__*/React.createElement("span", {
     className: "axis-slider"
   }, /*#__PURE__*/React.createElement(SmarterSlider, {
     className: isRange ? "" : "slider-single-handle",
     connect: true,
     range: {
-      min: 0,
-      max: inputMax
+      min: min,
+      max: max
     },
-    start: vals,
+    start: isRange ? vals : [vals[0] + 1],
     step: 1,
     margin: 1,
     behaviour: "drag",
@@ -66,25 +73,27 @@ var SliderRow = function SliderRow(_ref) {
       to: Math.round,
       from: parseInt
     },
-    onSlide: onSlide,
-    onChange: _onChange,
+    onSlide: wrappedOnSlide,
+    onChange: wrappedOnChange,
     onStart: onStart,
     onEnd: onEnd
-  })), inputMax > 0 && /*#__PURE__*/React.createElement("span", {
+  })), max > 0 && /*#__PURE__*/React.createElement("span", {
     className: "slider-values"
   }, /*#__PURE__*/React.createElement(NumericInput, {
-    max: inputMax,
-    value: valsReadout[0],
+    min: min,
+    max: max,
+    value: valsReadout[0] + (isRange ? 0 : 1),
     onChange: function onChange(value) {
-      return _onChange === null || _onChange === void 0 ? void 0 : _onChange(isRange ? [value, vals[1]] : [value]);
+      return _onChange === null || _onChange === void 0 ? void 0 : _onChange(isRange ? [value, vals[1]] : [value - 1]);
     }
   }), isRange && /*#__PURE__*/React.createElement(React.Fragment, null, " , ", /*#__PURE__*/React.createElement(NumericInput, {
-    max: inputMax,
+    min: min,
+    max: max,
     value: valsReadout[1],
     onChange: function onChange(value) {
       return _onChange === null || _onChange === void 0 ? void 0 : _onChange([vals[0], value]);
     }
-  })), " / ", max - 1));
+  })), " / ", max));
 };
 /** Wrapper around `SliderRow` that adds a play button and accounts for the case where not all of an axis is loaded */
 var PlaySliderRow = function PlaySliderRow(props) {

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

@@ -93,7 +93,9 @@ var ChannelsWidgetRow = function ChannelsWidgetRow(props) {
       colorizeEnabled = channelState.colorizeEnabled,
       colorizeAlpha = channelState.colorizeAlpha,
       useControlPoints = channelState.useControlPoints,
-      ramp = channelState.ramp;
+      ramp = channelState.ramp,
+      lockPlotToDataRange = channelState.lockPlotToDataRange,
+      plotMax = channelState.plotMax;
     return /*#__PURE__*/React.createElement(TfEditor, {
       id: "TFEditor" + index,
       width: 418,
@@ -104,7 +106,9 @@ var ChannelsWidgetRow = function ChannelsWidgetRow(props) {
       colorizeEnabled: colorizeEnabled,
       colorizeAlpha: colorizeAlpha,
       useControlPoints: useControlPoints,
-      ramp: ramp
+      ramp: ramp,
+      lockPlotToDataRange: lockPlotToDataRange,
+      plotMax: plotMax
     });
   };
   var renderSurfaceControls = function renderSurfaceControls() {

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

@@ -16,6 +16,9 @@
   .load-error-alert .ant-btn-text{
     color:var(--color-text-link);
   }
+  .load-error-alert .ant-btn-text:hover{
+      color:#25affe !important;
+    }
   .load-error-alert .ant-alert-message div:first-child{
     color:var(--color-text-section);
     font-weight:600;

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

@@ -134,7 +134,7 @@ var theme = {
   }
 };
 /** Makes theme styling available to child components via CSS variables. */
-var CssProvider = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n\n  ", "\n\n  h1, h2, h3, h4, p {\n    font-family: var(--font-family);\n  }\n\n  h1 {\n    color: var(--color-text-header);\n    font-size: 28px;\n    font-weight: 400;\n  }\n\n  h2 {\n    color: var(--color-text-section);\n    font-size: 19px;\n    font-weight: 400;\n  }\n\n  h3 {\n    color: var(--color-text-header);\n    font-size: 16px;\n    font-weight: 600;\n  }\n\n  h4 {\n    color: var(--color-text-header);\n    font-size: 14px;\n    font-weight: 400;\n  }\n\n  p {\n    color: var(--color-text-body);\n    font-size: 14px;\n    font-weight: 400;\n  }\n\n  a {\n    color: var(--color-text-link);\n    &:not(:focus-visible) {\n      text-decoration: none;\n    }\n\n    &:focus-visible {\n      text-decoration: underline;\n    }\n  }\n\n  & *::selection {\n    background-color: var(--color-text-selection-bg);\n    color: var(--color-text-selection-text);\n  }\n\n  /** TODO: Go through these styles and see if we can use Ant ConfigProvider for them instead. */\n  .ant-btn-link,\n  .ant-btn-text,\n  .ant-btn-primary,\n  .ant-btn-icon-only {\n    box-shadow: none;\n\n    &:hover:not(:disabled),\n    &:focus-visible:not(:disabled) {\n      background-color: var(--color-button-primary-hover-bg);\n      border-color: var(--color-button-primary-hover-bg);\n      color: var(--color-button-primary-text);\n    }\n\n    &:active:not(:disabled) {\n      background-color: var(--color-button-primary-hover-bg);\n      border: 1px solid var(--color-button-primary-active-outline);\n      color: var(--color-button-primary-text);\n    }\n  }\n\n  /* Let us use buttons with type=\"text\" as purely semantic containers - don't bring any styling! */\n  .ant-btn-text {\n    width: unset;\n    height: unset;\n    padding: unset;\n\n    &:hover:not(:disabled),\n    &:focus-visible:not(:disabled) {\n      background-color: unset;\n      border-color: transparent;\n    }\n  }\n\n  .ant-btn-icon-only:disabled {\n    color: var(--color-button-icon-disabled-text);\n  }\n\n  .ant-btn-link:not(:disabled) {\n    // Change from default blue link text\n    color: var(--color-button-link-text);\n  }\n\n  /**\n   * Tertiary style buttons. Grey outline by default, turns to light\n   * purple outline on hover.\n   */\n  .ant-btn-default:not(.ant-btn-icon-only) {\n    background-color: var(--color-button-tertiary-bg);\n    color: var(--color-button-tertiary-text);\n    border-color: var(--color-button-tertiary-outline);\n\n    &:hover:not(:disabled),\n    &:focus-visible:not(:disabled) {\n      background-color: transparent;\n      border-color: var(--color-button-tertiary-hover-bg);\n      color: var(--color-button-tertiary-hover-text);\n    }\n\n    &:active:not(:disabled) {\n      background-color: transparent;\n      border-color: var(--color-button-tertiary-active-outline);\n      color: var(--color-button-tertiary-active-text);\n    }\n  }\n\n  // Overrides for checkbox styling\n  & .ant-checkbox-input {\n    &:hover,\n    &:focus-visible {\n      border: 1px solid white;\n    }\n  }\n\n  & .ant-checkbox.ant-checkbox-checked {\n    background-color: var(--color-checkbox-bg);\n  }\n\n  .ant-checkbox-inner {\n    background-color: transparent;\n  }\n\n  & .ant-checkbox-indeterminate.checked .ant-checkbox-inner {\n    background-color: var(--color-checkbox-bg);\n  }\n\n  // Add outlines to modals and dropdowns\n  & .ant-select-dropdown,\n  & .ant-dropdown-menu,\n  & .ant-modal-content {\n    border: 1px solid var(--color-modal-border);\n  }\n\n  // Force active/hovered text to be white instead of grey for better contrast\n  & .ant-dropdown-menu-item-active {\n    color: var(--color-menu-hover-text);\n  }\n\n  // Remove padding in dropdown menus and make items reactangular + flush with the edge\n  & .ant-dropdown-menu,\n  & .ant-select-dropdown {\n    padding: 0;\n    overflow: hidden;\n\n    & .ant-dropdown-menu-item,\n    & .ant-select-item {\n      border-radius: 0;\n    }\n  }\n"])), function (_ref) {
+var CssProvider = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n\n  ", "\n\n  h1, h2, h3, h4, p {\n    font-family: var(--font-family);\n  }\n\n  h1 {\n    color: var(--color-text-header);\n    font-size: 28px;\n    font-weight: 400;\n  }\n\n  h2 {\n    color: var(--color-text-section);\n    font-size: 19px;\n    font-weight: 400;\n  }\n\n  h3 {\n    color: var(--color-text-header);\n    font-size: 16px;\n    font-weight: 600;\n  }\n\n  h4 {\n    color: var(--color-text-header);\n    font-size: 14px;\n    font-weight: 400;\n  }\n\n  p {\n    color: var(--color-text-body);\n    font-size: 14px;\n    font-weight: 400;\n  }\n\n  a {\n    color: var(--color-text-link);\n  }\n\n  & *::selection {\n    background-color: var(--color-text-selection-bg);\n    color: var(--color-text-selection-text);\n  }\n\n  /** TODO: Go through these styles and see if we can use Ant ConfigProvider for them instead. */\n  .ant-btn-link,\n  .ant-btn-text,\n  .ant-btn-primary,\n  .ant-btn-icon-only {\n    box-shadow: none;\n\n    &:hover:not(:disabled),\n    &:focus-visible:not(:disabled) {\n      background-color: var(--color-button-primary-hover-bg);\n      border-color: var(--color-button-primary-hover-bg);\n      color: var(--color-button-primary-text);\n    }\n\n    &:active:not(:disabled) {\n      background-color: var(--color-button-primary-hover-bg);\n      border: 1px solid var(--color-button-primary-active-outline);\n      color: var(--color-button-primary-text);\n    }\n  }\n\n  /* Let us use buttons with type=\"text\" as purely semantic containers - don't bring any styling! */\n  .ant-btn-text {\n    width: unset;\n    height: unset;\n    padding: unset;\n\n    &:hover:not(:disabled),\n    &:focus-visible:not(:disabled) {\n      background-color: unset;\n      border-color: transparent;\n    }\n  }\n\n  .ant-btn-icon-only:disabled {\n    color: var(--color-button-icon-disabled-text);\n  }\n\n  .ant-btn-link:not(:disabled) {\n    // Change from default blue link text\n    color: var(--color-button-link-text);\n  }\n\n  /**\n   * Tertiary style buttons. Grey outline by default, turns to light\n   * purple outline on hover.\n   */\n  .ant-btn-default:not(.ant-btn-icon-only) {\n    background-color: var(--color-button-tertiary-bg);\n    color: var(--color-button-tertiary-text);\n    border-color: var(--color-button-tertiary-outline);\n\n    &:hover:not(:disabled),\n    &:focus-visible:not(:disabled) {\n      background-color: transparent;\n      border-color: var(--color-button-tertiary-hover-bg);\n      color: var(--color-button-tertiary-hover-text);\n    }\n\n    &:active:not(:disabled) {\n      background-color: transparent;\n      border-color: var(--color-button-tertiary-active-outline);\n      color: var(--color-button-tertiary-active-text);\n    }\n  }\n\n  // Overrides for checkbox styling\n  & .ant-checkbox-input {\n    &:hover,\n    &:focus-visible {\n      border: 1px solid white;\n    }\n  }\n\n  & .ant-checkbox.ant-checkbox-checked {\n    background-color: var(--color-checkbox-bg);\n  }\n\n  .ant-checkbox-inner {\n    background-color: transparent !important;\n  }\n\n  // Add outlines to modals and dropdowns\n  & .ant-select-dropdown,\n  & .ant-dropdown-menu,\n  & .ant-modal-content {\n    border: 1px solid var(--color-modal-border);\n  }\n\n  // Force active/hovered text to be white instead of grey for better contrast\n  & .ant-dropdown-menu-item-active {\n    color: var(--color-menu-hover-text);\n  }\n\n  // Remove padding in dropdown menus and make items reactangular + flush with the edge\n  & .ant-dropdown-menu,\n  & .ant-select-dropdown {\n    padding: 0;\n    overflow: hidden;\n\n    & .ant-dropdown-menu-item,\n    & .ant-select-item {\n      border-radius: 0;\n    }\n  }\n"])), function (_ref) {
   var $theme = _ref.$theme;
   return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      /* Component and color variables. */\n      // TODO: Fix inconsistent use of border vs. outline\n      // TODO: Remove variables that aren't used in other CSS files. These should be set directly\n      // from the $theme object to reduce unnecessary variables.\n      --color-text-link: ", ";\n      --color-text-header: ", ";\n      --color-text-section: ", ";\n      --color-text-body: ", ";\n      --color-text-error: ", ";\n\n      --color-text-selection-bg: ", ";\n      --color-text-selection-text: ", ";\n\n      --color-header-title: ", ";\n      --color-header-hover-title: ", ";\n      --color-header-bg: ", ";\n      --color-header-border: ", ";\n\n      --color-button-primary-bg: ", ";\n      --color-button-primary-text: ", ";\n      --color-button-primary-hover-bg: ", ";\n      --color-button-primary-active-bg: ", ";\n      --color-button-primary-active-outline: ", ";\n      --color-button-primary-disabled-bg: ", ";\n\n      --color-button-link-text: ", ";\n\n      --color-button-secondary-bg: ", ";\n      --color-button-secondary-text: ", ";\n      --color-button-secondary-outline: ", ";\n\n      --color-button-tertiary-bg: transparent;\n      --color-button-tertiary-text: ", ";\n      --color-button-tertiary-outline: ", ";\n      --color-button-tertiary-hover-outline: ", ";\n      --color-button-tertiary-hover-text: ", ";\n      --color-button-tertiary-active-outline: ", ";\n      --color-button-tertiary-active-text: ", ";\n\n      --color-button-icon-disabled-text: ", ";\n      --color-button-icon-disabled-text: ", ";\n      --color-button-icon-activated-text: ", ";\n      --color-button-icon-activated-bg: ", ";\n      --color-button-icon-activated-outline: ", ";\n\n      --color-toolbar-button-bg: ", ";\n\n      --color-controlpanel-bg: ", ";\n      --color-controlpanel-border: ", ";\n      --color-controlpanel-section-text: ", ";\n      --color-controlpanel-text: ", ";\n      --color-controlpanel-section-bg: ", ";\n      --color-controlpanel-drawer-bg: ", ";\n      --color-controlpanel-ramp-slider: ", ";\n\n      --color-landingpage-bg: ", ";\n      --color-landingpage-bg-alt: ", ";\n      --color-landingpage-text: ", ";\n      --color-landingpage-banner-highlight-bg: ", ";\n\n      --color-statusflag-border: ", ";\n      --color-statusflag-text: ", ";\n\n      --color-layout-dividers: ", ";\n\n      --color-modal-border: ", ";\n\n      --color-menu-hover-text: ", ";\n      --color-menu-selected-text: ", ";\n\n      --color-checkbox-bg: ", ";\n\n      --font-family: ", ";\n    "])), $theme.colors.text.link, $theme.colors.text.header, $theme.colors.text.section, $theme.colors.text.body, $theme.colors.text.error, $theme.colors.text.selectionBg, $theme.colors.text.selectionText, $theme.colors.header.title, $theme.colors.header.hoverTitle, $theme.colors.header.bg, $theme.colors.header.border, $theme.colors.button.primary.bg, $theme.colors.button.primary.text, $theme.colors.button.primary.hoverBg, $theme.colors.button.primary.hoverBg, $theme.colors.button.primary.activeOutline, $theme.colors.button.primary.disabledBg, $theme.colors.button.link.text, $theme.colors.button.secondary.bg, $theme.colors.button.secondary.text, $theme.colors.button.secondary.outline, $theme.colors.button.tertiary.text, $theme.colors.button.tertiary.outline, $theme.colors.button.tertiary.hoverOutline, $theme.colors.button.tertiary.hoverText, $theme.colors.button.tertiary.activeOutline, $theme.colors.button.tertiary.hoverText, $theme.colors.button.tertiary.disabledText, $theme.colors.button.tertiary.disabledText, $theme.colors.button.tertiary.activatedText, $theme.colors.button.tertiary.activatedBg, $theme.colors.button.tertiary.activatedOutline, $theme.colors.toolbar.buttonBg, $theme.colors.controlPanel.bg, $theme.colors.controlPanel.border, $theme.colors.controlPanel.sectionText, $theme.colors.controlPanel.text, $theme.colors.controlPanel.sectionBg, $theme.colors.controlPanel.drawerBg, $theme.colors.controlPanel.rampSlider, $theme.colors.landingPage.bg, $theme.colors.landingPage.bgAlt, $theme.colors.landingPage.text, $theme.colors.landingPage.bannerBg, $theme.colors.statusFlag.border, $theme.colors.statusFlag.text, $theme.colors.layout.dividers, $theme.colors.modal.border, $theme.colors.menu.hoverText, $theme.colors.menu.selectedText, $theme.colors.checkbox.bg, $theme.fonts.family);
 });

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

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

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

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

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

@@ -31,6 +31,44 @@ 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;
+
+/** Maps channel data types to their minimum and maximum values */
+export var DTYPE_RANGE = {
+  int8: {
+    min: -Math.pow(2, 7),
+    max: Math.pow(2, 7) - 1
+  },
+  int16: {
+    min: -Math.pow(2, 15),
+    max: Math.pow(2, 15) - 1
+  },
+  int32: {
+    min: -Math.pow(2, 31),
+    max: Math.pow(2, 31) - 1
+  },
+  uint8: {
+    min: 0,
+    max: Math.pow(2, 8) - 1
+  },
+  uint16: {
+    min: 0,
+    max: Math.pow(2, 16) - 1
+  },
+  uint32: {
+    min: 0,
+    max: Math.pow(2, 32) - 1
+  },
+  // These are obviously not the actual min and max representable values for floats, but the actual ones (`-Infinity`
+  // and `Infinity`) would give us nonsense. These may also produce nonsense, but these types should be rare anyways.
+  float32: {
+    min: 0,
+    max: Math.pow(2, 8) - 1
+  },
+  float64: {
+    min: 0,
+    max: Math.pow(2, 8) - 1
+  }
+};
 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]];
@@ -159,6 +197,8 @@ export var getDefaultChannelState = function getDefaultChannelState() {
       x: 255,
       opacity: 1,
       color: [255, 255, 255]
-    }]
+    }],
+    lockPlotToDataRange: true,
+    plotMax: TFEDITOR_MAX_BIN
   };
 };

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

@@ -64,6 +64,8 @@ export function initializeOneChannelSetting(channelName, index, defaultColor, vi
     color: (_colorHexToArray = colorHexToArray((_initSettings$color = initSettings.color) !== null && _initSettings$color !== void 0 ? _initSettings$color : "")) !== null && _colorHexToArray !== void 0 ? _colorHexToArray : defaultColor,
     useControlPoints: (_initSettings$control = initSettings.controlPointsEnabled) !== null && _initSettings$control !== void 0 ? _initSettings$control : defaultChannelState.useControlPoints,
     controlPoints: (_initSettings$control2 = initSettings.controlPoints) !== null && _initSettings$control2 !== void 0 ? _initSettings$control2 : defaultChannelState.controlPoints,
-    ramp: (_initSettings$ramp = initSettings.ramp) !== null && _initSettings$ramp !== void 0 ? _initSettings$ramp : defaultChannelState.ramp
+    ramp: (_initSettings$ramp = initSettings.ramp) !== null && _initSettings$ramp !== void 0 ? _initSettings$ramp : defaultChannelState.ramp,
+    lockPlotToDataRange: defaultChannelState.lockPlotToDataRange,
+    plotMax: defaultChannelState.plotMax
   };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aics/vole-app",
-  "version": "2.11.0",
+  "version": "2.12.0",
   "description": "web view of cell volume images",
   "repository": "github:allen-cell-animated/vole-app",
   "main": "es/index.js",
@@ -41,7 +41,7 @@
   "author": "Megan Riel-Mehan",
   "license": "ISC",
   "dependencies": {
-    "@aics/vole-core": "^3.12.4",
+    "@aics/vole-core": "^3.15.2",
     "@ant-design/icons": "^5.2.5",
     "@fortawesome/fontawesome-svg-core": "^6.5.2",
     "@fortawesome/free-solid-svg-icons": "^6.5.2",

package/type-declarations/aics-image-viewer/components/App/types.d.ts

@@ -37,7 +37,7 @@ export interface AppProps {
         translation: [number, number, number];
         rotation: [number, number, number];
     };
-    metadata?: MetadataRecord;
+    metadata?: MetadataRecord | MetadataRecord[];
     view3dRef?: MutableRefObject<View3d | null>;
     metadataFormatter?: (metadata: MetadataRecord) => MetadataRecord;
     onControlPanelToggle?: (collapsed: boolean) => void;

package/type-declarations/aics-image-viewer/components/TfEditor/index.d.ts

@@ -14,6 +14,8 @@ type TfEditorProps = {
     useControlPoints: boolean;
     controlPoints: ControlPoint[];
     ramp: [number, number];
+    lockPlotToDataRange: boolean;
+    plotMax: number;
 };
 declare const TfEditor: React.FC<TfEditorProps>;
 export default TfEditor;

package/type-declarations/aics-image-viewer/components/ViewerStateProvider/types.d.ts

@@ -58,6 +58,8 @@ export interface ChannelState {
     ramp: [number, number];
     useControlPoints: boolean;
     controlPoints: ControlPoint[];
+    lockPlotToDataRange: boolean;
+    plotMax: number;
 }
 export type ChannelStateKey = keyof ChannelState;
 export type ChannelSettingUpdater = <K extends ChannelStateKey>(index: number | number[], value: Partial<Record<K, ChannelState[K]>>) => void;

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

@@ -1,4 +1,4 @@
-import { CameraState } from "@aics/vole-core";
+import type { CameraState, Channel } from "@aics/vole-core";
 import { ChannelState, ViewerState } from "../components/ViewerStateProvider/types";
 import { ViewMode } from "./enums";
 import { ColorArray } from "./utils/colorRepresentations";
@@ -10,6 +10,13 @@ export declare const TFEDITOR_MAX_BIN = 255;
 export declare const CACHE_MAX_SIZE = 1000000000;
 export declare const QUEUE_MAX_SIZE = 10;
 export declare const QUEUE_MAX_LOW_PRIORITY_SIZE = 4;
+/** Maps channel data types to their minimum and maximum values */
+export declare const DTYPE_RANGE: {
+    [T in Channel["dtype"]]: {
+        min: number;
+        max: number;
+    };
+};
 export declare const PRESET_COLORS_1: ColorArray[];
 export declare const PRESET_COLORS_2: ColorArray[];
 export declare const PRESET_COLORS_3: ColorArray[];

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

@@ -9,7 +9,7 @@ export type IsosurfaceFormat = "GLTF" | "STL";
 export type Styles = {
     [key: string]: CSSProperties;
 };
-export type MetadataEntry = string | number | boolean | MetadataRecord | null | undefined;
+export type MetadataEntry = string | number | boolean | MetadataRecord | MetadataEntry[] | null | undefined;
 export type MetadataRecord = {
     [key: string]: MetadataEntry;
-} | MetadataEntry[];
+};