@aics/vole-app 2.13.7 → 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";
@@ -122,6 +123,7 @@ var App = function App(props) {
     onResetChannel = _viewerState$current.onResetChannel;
   var _props = props,
     onControlPanelToggle = _props.onControlPanelToggle,
+    onImageTitleChange = _props.onImageTitleChange,
     metadata = _props.metadata,
     metadataFormatter = _props.metadataFormatter;
   useMemo(function () {
@@ -184,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;
@@ -204,12 +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]);
+  }, [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];
@@ -224,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
@@ -268,10 +299,14 @@ var App = function App(props) {
       view3d.updateActiveChannels(image);
     }
   }, [view3d, channelSettings, maskChannelName, viewerState]);
+  var onError = useCallback(function (error) {
+    showError(error);
+    onImageTitleChange === null || onImageTitleChange === void 0 || onImageTitleChange(undefined);
+  }, [showError, onImageTitleChange]);
   var volume = useVolume(scenes, {
     onCreateImage: onCreateImage,
     onChannelLoaded: onChannelLoaded,
-    onError: showError,
+    onError: onError,
     maskChannelName: maskChannelName
   });
   var image = volume.image,

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/ViewerStateProvider/ResetStateProvider.js

@@ -132,7 +132,10 @@ var ResetStateProvider = /*#__PURE__*/function () {
       }, this.savedViewerState);
       var newChannelSettings = channelSettings.map(function (_, index) {
         var initialChannelSetting = initializeOneChannelSetting(channelSettings[index].name, index, getDefaultChannelColor(index), _this.savedViewerChannelSettings);
-        return initialChannelSetting;
+        return _objectSpread(_objectSpread({}, initialChannelSetting), {}, {
+          plotMin: channelSettings[index].plotMin,
+          plotMax: channelSettings[index].plotMax
+        });
       });
       this.resetToState(newViewerState, newChannelSettings);
       this.useDefaultViewerChannelSettings = false;

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/es/aics-image-viewer/shared/utils/datatypes.js

@@ -0,0 +1,29 @@
+import { isEqual } from "lodash";
+
+/**
+ * Returns a (shallow) copy of an object with all properties that are
+ * `undefined` removed.
+ */
+export function removeUndefinedProperties(obj) {
+  var result = {};
+  for (var key in obj) {
+    if (obj[key] !== undefined) {
+      result[key] = obj[key];
+    }
+  }
+  return result;
+}
+
+/**
+ * Returns a copy of `obj` where all properties with values that match the properties of `match`
+ * are removed. Matching is determined by deep equality (see `isDeepEqual()`).
+ */
+export function removeMatchingProperties(obj, match) {
+  var result = {};
+  for (var key in obj) {
+    if (!isEqual(obj[key], match[key])) {
+      result[key] = obj[key];
+    }
+  }
+  return result;
+}

package/es/aics-image-viewer/shared/utils/firebase/index.js

@@ -0,0 +1,109 @@
+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 _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 _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+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); }
+// TODO: These types are shared with Cell Feature Explorer. Can they be moved to
+// a shared package?
+
+function isDevOrStagingSite(host) {
+  // first condition is for testing with no client
+  return !host || host.includes("localhost") || host.includes("staging") || host.includes("stg");
+}
+var FirebaseRequest = /*#__PURE__*/_createClass(
+// TODO: These properties are private and unused. Remove?
+
+function FirebaseRequest(firestore) {
+  var _this = this;
+  _classCallCheck(this, FirebaseRequest);
+  _defineProperty(this, "getDoc", function (docPath) {
+    return _this.firestore.doc(docPath).get();
+  });
+  _defineProperty(this, "getAvailableDatasets", function () {
+    return _this.firestore.collection("dataset-descriptions").get().then(function (snapShot) {
+      var datasets = [];
+      snapShot.forEach(function (doc) {
+        var metadata = doc.data();
+        /** if running the site in a local development env or on staging.cfe.allencell.org
+         * include all cards, otherwise, only include cards with a production flag.
+         * this is based on hostname instead of a build time variable so we don't
+         * need a separate build for staging and production
+         */
+
+        if (isDevOrStagingSite(location.hostname)) {
+          datasets.push(metadata);
+        } else if (metadata.production) {
+          datasets.push(metadata);
+        }
+      });
+      return datasets;
+    });
+  });
+  _defineProperty(this, "setCollectionRef", function (id) {
+    _this.collectionRef = _this.firestore.collection("cfe-datasets").doc(id);
+  });
+  _defineProperty(this, "getManifest", function (ref) {
+    return _this.firestore.doc(ref).get().then(function (manifestDoc) {
+      return manifestDoc.data();
+    });
+  });
+  _defineProperty(this, "selectDataset", function (ref) {
+    return _this.getManifest(ref).then(function (data) {
+      _this.featuresDataPath = data.featuresDataPath;
+      _this.thumbnailRoot = data.thumbnailRoot;
+      _this.downloadRoot = data.downloadRoot;
+      _this.volumeViewerDataRoot = data.volumeViewerDataRoot;
+      _this.featuresDisplayOrder = data.featuresDisplayOrder;
+      _this.cellLineDataPath = data.cellLineDataPath;
+      _this.fileInfoPath = data.fileInfoPath;
+      _this.featuresDataOrder = data.featuresDataOrder;
+      _this.featureDefsPath = data.featureDefsPath;
+      _this.albumPath = data.albumPath;
+      return _objectSpread({}, data);
+    });
+  });
+  _defineProperty(this, "getFileInfoByCellId", function (cellId) {
+    return _this.getDoc("".concat(_this.fileInfoPath, "/").concat(cellId)).then(function (doc) {
+      var data = doc.data();
+      if (!data) {
+        return;
+      }
+      return _objectSpread(_objectSpread({}, data), {}, {
+        CellId: data.CellId.toString(),
+        FOVId: data.FOVId.toString()
+      });
+    });
+  });
+  _defineProperty(this, "getFileInfoByArrayOfCellIds", function (cellIds) {
+    return Promise.all(cellIds.map(function (id) {
+      return _this.getDoc("".concat(_this.fileInfoPath, "/").concat(id)).then(function (doc) {
+        var data = doc.data();
+        if (!data) {
+          return;
+        }
+        return _objectSpread(_objectSpread({}, data), {}, {
+          CellId: data.CellId.toString(),
+          FOVId: data.FOVId.toString()
+        });
+      });
+    }));
+  });
+  this.firestore = firestore;
+  this.featuresDataPath = "";
+  this.cellLineDataPath = "";
+  this.thumbnailRoot = "";
+  this.downloadRoot = "";
+  this.volumeViewerDataRoot = "";
+  this.featuresDisplayOrder = [];
+  this.fileInfoPath = "";
+  this.datasetId = "";
+  this.featuresDataOrder = [];
+  this.albumPath = "";
+  this.featureDefsPath = "";
+  this.collectionRef = firestore.collection("cfe-datasets").doc("v1");
+});
+export default FirebaseRequest;

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

@@ -0,0 +1,3 @@
+export function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}