@aics/vole-app 2.14.0 → 2.15.0

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

@@ -26,6 +26,7 @@ import { colorArrayToFloats } from "../../shared/utils/colorRepresentations";
 import { controlPointsToRamp, initializeLut, rampToControlPoints, remapControlPointsForChannel } from "../../shared/utils/controlPointsToLut";
 import { useConstructor } from "../../shared/utils/hooks";
 import { alphaSliderToImageValue, brightnessSliderToImageValue, densitySliderToImageValue, gammaSliderToImageValues } from "../../shared/utils/sliderValuesToImageValues";
+import { findFirstChannelMatch } from "../../shared/utils/viewerChannelSettings";
 import useVolume, { ImageLoadStatus } from "../useVolume";
 import CellViewerCanvasWrapper from "../CellViewerCanvasWrapper";
 import ControlPanel from "../ControlPanel";
@@ -185,14 +186,41 @@ var App = function App(props) {
   // we need to keep track of channel ranges for remapping control points
   var channelRangesRef = useRef([]);
   var onCreateImage = useCallback(function (newImage) {
+    var _newImage$imageInfo$c;
     if (newImage === null) {
       return;
     }
-    channelRangesRef.current = new Array(newImage.channelNames.length).fill(undefined);
+    var channelNames = newImage.channelNames;
+    channelRangesRef.current = new Array(channelNames.length).fill(undefined);
     var channelSettings = viewerState.current.channelSettings;
+
+    // If the image has channel color metadata, apply those colors now
+    var viewerChannelSettings = getCurrentViewerChannelSettings();
+    var channelColorMeta = (_newImage$imageInfo$c = newImage.imageInfo.channelColors) === null || _newImage$imageInfo$c === void 0 ? void 0 : _newImage$imageInfo$c.map(function (color, index) {
+      // Filter out channels that have colors in `viewerChannelSettings`
+      if (viewerChannelSettings === undefined) {
+        return color;
+      }
+      var settings = findFirstChannelMatch(channelNames[index], index, viewerChannelSettings);
+      if ((settings === null || settings === void 0 ? void 0 : settings.color) !== undefined) {
+        return undefined;
+      } else {
+        return color;
+      }
+    });
+    if (Array.isArray(channelColorMeta)) {
+      channelColorMeta.forEach(function (color, index) {
+        if (Array.isArray(color) && index < channelNames.length) {
+          changeChannelSetting(index, {
+            color: color
+          });
+        }
+      });
+    }
     view3d.addVolume(newImage, {
       // Immediately passing down channel parameters isn't strictly necessary, but keeps things looking consistent on load
-      channels: newImage.channelNames.map(function (name) {
+      channels: newImage.channelNames.map(function (name, index) {
+        var _channelColorMeta$ind;
         // TODO do we really need to be searching by name here?
         var ch = channelSettings.find(function (channel) {
           return channel.name === name;
@@ -205,13 +233,13 @@ var App = function App(props) {
           isosurfaceEnabled: ch.isosurfaceEnabled,
           isovalue: ch.isovalue,
           isosurfaceOpacity: ch.opacity,
-          color: ch.color
+          color: (_channelColorMeta$ind = channelColorMeta === null || channelColorMeta === void 0 ? void 0 : channelColorMeta[index]) !== null && _channelColorMeta$ind !== void 0 ? _channelColorMeta$ind : ch.color
         };
       })
     });
     onImageTitleChange === null || onImageTitleChange === void 0 || onImageTitleChange(newImage.imageInfo.imageInfo.name);
     view3d.updateActiveChannels(newImage);
-  }, [view3d, viewerState, onImageTitleChange]);
+  }, [view3d, viewerState, onImageTitleChange, changeChannelSetting, getCurrentViewerChannelSettings]);
   var onChannelLoaded = useCallback(function (image, channelIndex, isInitialLoad) {
     // TODO this was once a search by name - is that still necessary or will the index always be correct?
     var thisChannelSettings = channelSettings[channelIndex];
@@ -226,13 +254,14 @@ var App = function App(props) {
       var _initializeLut = initializeLut(image, channelIndex, getCurrentViewerChannelSettings()),
         ramp = _initializeLut.ramp,
         controlPoints = _initializeLut.controlPoints;
-      var dtype = thisChannel.dtype;
+      var range = DTYPE_RANGE[thisChannel.dtype];
       changeChannelSetting(channelIndex, {
         controlPoints: controlPoints,
         ramp: controlPointsToRamp(ramp),
         // set the default range of the transfer function editor to cover the full range of the data type
-        plotMin: DTYPE_RANGE[dtype].min,
-        plotMax: DTYPE_RANGE[dtype].max
+        plotMin: range.min,
+        plotMax: range.max,
+        isovalue: range.min + (range.max - range.min) / 2
       });
     } else {
       // This channel has already been initialized, but its LUT was just remapped and we need to update some things

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

@@ -4,9 +4,9 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof 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; }
 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 { Button, Checkbox, List } from "antd";
+import { Button, Checkbox, InputNumber, List } from "antd";
 import React, { useCallback, useState } from "react";
-import { ISOSURFACE_OPACITY_SLIDER_MAX } from "../../shared/constants";
+import { DTYPE_RANGE, ISOSURFACE_OPACITY_SLIDER_MAX } from "../../shared/constants";
 import { colorArrayToObject, colorObjectToArray } from "../../shared/utils/colorRepresentations";
 import ColorPicker from "../ColorPicker";
 import SliderRow from "../shared/SliderRow";
@@ -37,20 +37,6 @@ var ChannelsWidgetRow = function ChannelsWidgetRow(props) {
       isosurfaceEnabled: target.checked
     });
   };
-  var onIsovalueChange = function onIsovalueChange(_ref3) {
-    var _ref4 = _slicedToArray(_ref3, 1),
-      newValue = _ref4[0];
-    return changeSettingForThisChannel({
-      isovalue: newValue
-    });
-  };
-  var onOpacityChange = function onOpacityChange(_ref5) {
-    var _ref6 = _slicedToArray(_ref5, 1),
-      newValue = _ref6[0];
-    return changeSettingForThisChannel({
-      opacity: newValue / ISOSURFACE_OPACITY_SLIDER_MAX
-    });
-  };
   var onColorChange = function onColorChange(newRGB, _oldRGB, index) {
     var color = colorObjectToArray(newRGB);
     props.changeChannelSetting(index, {
@@ -112,17 +98,49 @@ var ChannelsWidgetRow = function ChannelsWidgetRow(props) {
     });
   };
   var renderSurfaceControls = function renderSurfaceControls() {
+    var range = DTYPE_RANGE[props.channelDataForChannel.dtype];
     return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(SliderRow, {
       label: "Isovalue",
-      max: 255,
+      min: range.min,
+      max: range.max,
       start: channelState.isovalue,
-      onChange: onIsovalueChange,
+      onChange: function onChange(_ref3) {
+        var _ref4 = _slicedToArray(_ref3, 1),
+          isovalue = _ref4[0];
+        return changeSettingForThisChannel({
+          isovalue: isovalue
+        });
+      },
       formatInteger: true
-    }), /*#__PURE__*/React.createElement(SliderRow, {
+    }, /*#__PURE__*/React.createElement(InputNumber, {
+      value: channelState.isovalue,
+      onChange: function onChange(isovalue) {
+        return isovalue !== null && changeSettingForThisChannel({
+          isovalue: isovalue
+        });
+      },
+      formatter: function formatter(v) {
+        return v === undefined ? "" : Number(v).toFixed(0);
+      },
+      min: range.min,
+      max: range.max,
+      size: "small",
+      controls: false,
+      style: {
+        width: "64px",
+        marginLeft: "8px"
+      }
+    })), /*#__PURE__*/React.createElement(SliderRow, {
       label: "Opacity",
       max: ISOSURFACE_OPACITY_SLIDER_MAX,
       start: channelState.opacity * ISOSURFACE_OPACITY_SLIDER_MAX,
-      onChange: onOpacityChange,
+      onChange: function onChange(_ref5) {
+        var _ref6 = _slicedToArray(_ref5, 1),
+          opacity = _ref6[0];
+        return changeSettingForThisChannel({
+          opacity: opacity / ISOSURFACE_OPACITY_SLIDER_MAX
+        });
+      },
       formatInteger: true
     }), /*#__PURE__*/React.createElement("div", {
       className: "button-row"

package/es/aics-image-viewer/components/GlobalVolumeControls.js

@@ -1,5 +1,5 @@
-import React from "react";
 import { Checkbox } from "antd";
+import React from "react";
 import SliderRow from "./shared/SliderRow";
 import { connectToViewerState } from "./ViewerStateProvider";
 var GlobalVolumeControls = function GlobalVolumeControls(props) {
@@ -26,7 +26,8 @@ var GlobalVolumeControls = function GlobalVolumeControls(props) {
       paddingBottom: 22
     }
   }, showControls.alphaMaskSlider && createSliderRow("mask cell", maskAlpha, 100, "maskAlpha"), showControls.brightnessSlider && createSliderRow("brightness", brightness, 100, "brightness"), showControls.densitySlider && createSliderRow("density", density, 100, "density"), showControls.levelsSliders && createSliderRow("levels", levels, 255, "levels"), showControls.interpolationControl && /*#__PURE__*/React.createElement(SliderRow, {
-    label: "interpolate"
+    label: "interpolate",
+    hideSlider: true
   }, /*#__PURE__*/React.createElement(Checkbox, {
     checked: props.interpolationEnabled,
     onChange: function onChange(_ref) {

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

@@ -8,15 +8,18 @@ var INTEGER_FORMATTER = {
 
 /** A component to ensure a single unified style across the many labeled slider rows in the control panel */
 var SliderRow = function SliderRow(props) {
+  var _props$min;
   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, {
+  }, props.start !== undefined && !props.hideSlider && /*#__PURE__*/React.createElement("div", {
+    className: "control-slider"
+  }, /*#__PURE__*/React.createElement(SmarterSlider, {
     range: {
-      min: 0,
+      min: (_props$min = props.min) !== null && _props$min !== void 0 ? _props$min : 0,
       max: props.max
     },
     start: props.start,
@@ -26,6 +29,8 @@ var SliderRow = function SliderRow(props) {
     format: props.formatInteger ? INTEGER_FORMATTER : undefined,
     onUpdate: props.onUpdate,
     onChange: props.onChange
-  })));
+  })), props.children && /*#__PURE__*/React.createElement("div", {
+    className: "control-extra"
+  }, props.children)));
 };
 export default SliderRow;

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

@@ -16,4 +16,10 @@
 
   .viewer-control-row .control{
     flex:5;
+    display:flex;
+    align-items:center;
   }
+
+  .viewer-control-row .control .control-slider{
+      flex-grow:1;
+    }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aics/vole-app",
-  "version": "2.14.0",
+  "version": "2.15.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": "^4.1.0",
+    "@aics/vole-core": "^4.3.1",
     "@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/shared/SliderRow/index.d.ts

@@ -1,11 +1,12 @@
-import React from "react";
 import { NouisliderProps } from "nouislider-react";
+import React from "react";
 import "./styles.css";
 type SliderRowProps = {
     label: React.ReactNode;
     start?: number | number[];
     step?: number;
     formatInteger?: boolean;
+    min?: number;
     max?: number;
     onUpdate?: NouisliderProps["onUpdate"];
     onChange?: NouisliderProps["onChange"];