@aics/vole-app 3.4.4 → 3.6.0

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

@@ -25,12 +25,12 @@ import { LoadSpec, VolumeLoaderContext } from "@aics/vole-core";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Box3, Vector3 } from "three";
 import { AXIS_TO_LOADER_PRIORITY, CACHE_MAX_SIZE, getDefaultViewerChannelSettings, QUEUE_MAX_LOW_PRIORITY_SIZE, QUEUE_MAX_SIZE } from "../shared/constants";
-import { ViewMode } from "../shared/enums";
 import { useConstructor, useRefWithSetter } from "../shared/utils/hooks";
 import PlayControls from "../shared/utils/playControls";
 import SceneStore from "../shared/utils/sceneStore";
 import { makeChannelIndexGrouping } from "../shared/utils/viewerChannelSettings";
 import { select, useViewerState } from "../state/store";
+import { ViewMode } from "../state/types";
 export var ImageLoadStatus = /*#__PURE__*/function (ImageLoadStatus) {
   ImageLoadStatus[ImageLoadStatus["REQUESTED"] = 0] = "REQUESTED";
   ImageLoadStatus[ImageLoadStatus["LOADING"] = 1] = "LOADING";
@@ -39,7 +39,7 @@ export var ImageLoadStatus = /*#__PURE__*/function (ImageLoadStatus) {
   return ImageLoadStatus;
 }({});
 var LoadType = /*#__PURE__*/function (LoadType) {
-  LoadType[LoadType["TIME"] = 0] = "TIME";
+  LoadType[LoadType["RELOAD"] = 0] = "RELOAD";
   LoadType[LoadType["SCENE"] = 1] = "SCENE";
   return LoadType;
 }(LoadType || {}); // Used by `channelVersions` (see below)
@@ -84,6 +84,7 @@ var useVolume = function useVolume(scenePaths, options) {
   var onChannelLoadedRef = useEffectEventRef(options === null || options === void 0 ? void 0 : options.onChannelLoaded);
   var onChangeSceneRef = useEffectEventRef(options === null || options === void 0 ? void 0 : options.onChangeScene);
   var onCreateImageRef = useEffectEventRef(options === null || options === void 0 ? void 0 : options.onCreateImage);
+  var onScrubRef = useEffectEventRef(options === null || options === void 0 ? void 0 : options.onScrub);
   var maskChannelName = options === null || options === void 0 ? void 0 : options.maskChannelName;
 
   // set up our big objects: the image, its loading infrastructure, and controls for playback
@@ -104,6 +105,10 @@ var useVolume = function useVolume(scenePaths, options) {
     _useState4 = _slicedToArray(_useState3, 2),
     playingAxis = _useState4[0],
     setPlayingAxis = _useState4[1];
+  var _useState5 = useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    scrubbingAxis = _useState6[0],
+    setScrubbingAxis = _useState6[1];
   useEffect(function () {
     playControls.onPlayingAxisChanged = function (axis) {
       var isPlaying = axis !== null;
@@ -113,36 +118,24 @@ var useVolume = function useVolume(scenePaths, options) {
       sceneLoader.updateFetchOptions({
         onlyPriorityDirections: isPlaying
       });
-      // sync multichannel loading so we don't show loaded channels one at a time
-      sceneLoader.syncMultichannelLoading(isPlaying);
-      if (image) {
-        // If we're playing and entire axis is not in memory (T always, Z likely), downlevel to speed things up
-        var _image$imageInfo = image.imageInfo,
-          volumeSize = _image$imageInfo.volumeSize,
-          subregionSize = _image$imageInfo.subregionSize;
-        var shouldDownlevel = isPlaying && (axis === "t" || volumeSize[axis] !== subregionSize[axis]);
-        image.updateRequiredData({
-          scaleLevelBias: shouldDownlevel ? 1 : 0
-        });
-      }
     };
   }, [sceneLoader, playControls, image]);
 
   // track which channels have been loaded
-  var _useState5 = useState([]),
-    _useState6 = _slicedToArray(_useState5, 2),
-    channelVersions = _useState6[0],
-    _setChannelVersions = _useState6[1];
+  var _useState7 = useState([]),
+    _useState8 = _slicedToArray(_useState7, 2),
+    channelVersions = _useState8[0],
+    _setChannelVersions = _useState8[1];
   var _useRefWithSetter = useRefWithSetter(_setChannelVersions, channelVersions),
     _useRefWithSetter2 = _slicedToArray(_useRefWithSetter, 2),
     channelVersionsRef = _useRefWithSetter2[0],
     setChannelVersions = _useRefWithSetter2[1];
 
   // Some extra items for tracking load status
-  var _useState7 = useState(false),
-    _useState8 = _slicedToArray(_useState7, 2),
-    loadThrewError = _useState8[0],
-    setLoadThrewError = _useState8[1];
+  var _useState9 = useState(false),
+    _useState0 = _slicedToArray(_useState9, 2),
+    loadThrewError = _useState0[0],
+    setLoadThrewError = _useState0[1];
   var inInitialLoadRef = useRef(true);
 
   // derive whether the image is loaded from whether any and/or all channels are loaded
@@ -178,11 +171,41 @@ var useVolume = function useVolume(scenePaths, options) {
       );
     }));
   }, [channelVersionsRef, setChannelVersions]);
+  useEffect(function () {
+    if (!image) return;
+    var onLoadStart = function onLoadStart() {
+      return setIsLoading(LoadType.RELOAD);
+    };
+    image.addEventListener("loadStart", onLoadStart);
+    return function () {
+      return image.removeEventListener("loadStart", onLoadStart);
+    };
+  }, [image, setIsLoading]);
   var onError = useCallback(function (e) {
     setLoadThrewError(true);
     onErrorRef(e);
     throw e;
   }, [onErrorRef]);
+  var scaleLevelBias = useMemo(function () {
+    if (!image) return 0;
+
+    // If we're playing/scrubbing and entire axis is not in memory, downlevel to speed things up
+    var _image$imageInfo = image.imageInfo,
+      volumeSize = _image$imageInfo.volumeSize,
+      subregionSize = _image$imageInfo.subregionSize,
+      numMultiscaleLevels = _image$imageInfo.numMultiscaleLevels;
+    var axis = scrubbingAxis !== null && scrubbingAxis !== void 0 ? scrubbingAxis : playingAxis;
+    if (axis && (axis === "t" || volumeSize[axis] !== subregionSize[axis])) {
+      var isPlayback = scrubbingAxis !== null;
+      return isPlayback ? numMultiscaleLevels : 1;
+    }
+    return 0;
+  }, [image, playingAxis, scrubbingAxis]);
+  useEffect(function () {
+    image === null || image === void 0 || image.updateRequiredData({
+      scaleLevelBias: scaleLevelBias
+    })["catch"](onError);
+  }, [scaleLevelBias, image, onError]);
 
   // channelGroupedByType groups channel indexes by their category.
   // It depends on `viewerChannelSettings` and the channel names in the current image.
@@ -310,9 +333,8 @@ var useVolume = function useVolume(scenePaths, options) {
   var setTime = useCallback(function (view3d, time) {
     if (image && !inInitialLoadRef.current) {
       view3d.setTime(image, time)["catch"](onError);
-      setIsLoading(LoadType.TIME);
     }
-  }, [image, onError, setIsLoading, inInitialLoadRef]);
+  }, [image, onError, inInitialLoadRef]);
   var setScene = useCallback(function (scene) {
     if (image && !inInitialLoadRef.current) {
       var onCreateScene = function onCreateScene(volume, sceneIndex, loadSpec) {
@@ -335,6 +357,17 @@ var useVolume = function useVolume(scenePaths, options) {
       setIsLoading(LoadType.SCENE);
     }
   }, [image, sceneLoader, onError, setIsLoading, setChannelStateForNewImage, channelVersionsRef, setChannelVersions, onChangeSceneRef]);
+  useEffect(function () {
+    if (image && !inInitialLoadRef.current) {
+      // When playing, wait for all channels to load before displaying
+      // When scrubbing, show channels as they arrive, for speed
+      sceneLoader.syncMultichannelLoading(scrubbingAxis === null && playingAxis !== null);
+    }
+  }, [image, scrubbingAxis, playingAxis, sceneLoader]);
+  useEffect(function () {
+    if (!image) return;
+    onScrubRef(scrubbingAxis !== null, image);
+  }, [onScrubRef, scrubbingAxis, image]);
   return useMemo(function () {
     return {
       image: image,
@@ -342,10 +375,11 @@ var useVolume = function useVolume(scenePaths, options) {
       imageLoadStatus: imageLoadStatus,
       setTime: setTime,
       setScene: setScene,
+      setScrubbingAxis: setScrubbingAxis,
       playControls: playControls,
       playingAxis: playingAxis,
       channelGroupedByType: channelGroupedByType
     };
-  }, [image, channelVersions, imageLoadStatus, setTime, setScene, playControls, playingAxis, channelGroupedByType]);
+  }, [image, channelVersions, imageLoadStatus, setTime, setScene, setScrubbingAxis, playControls, playingAxis, channelGroupedByType]);
 };
 export default useVolume;

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

@@ -3,7 +3,31 @@ function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object
 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 { PrefetchDirection } from "@aics/vole-core";
-import { ImageType, RenderMode, ViewMode } from "./enums";
+import { ImageType, RenderMode, ViewMode } from "../state/types";
+/**
+ * Gets the current vole-app version safely across the different app and library
+ * build environments.
+ */
+function getBuildVersion() {
+  // Defined as global constants when built by Vite as an app
+  if (typeof VITE_VOLEAPP_VERSION === "string" && VITE_VOLEAPP_VERSION.length > 0) {
+    return VITE_VOLEAPP_VERSION;
+  }
+  // Injected at build time when built by Babel as a library
+  try {
+    return "3.6.0";
+  } catch (_unused) {
+    return undefined;
+  }
+}
+var buildVersion = getBuildVersion();
+if (buildVersion === undefined) {
+  console.error("Failed to determine VOLEAPP_VERSION; a default fallback will be used instead. This is likely due to a build environment misconfiguration.");
+}
+// 3.5.0 is the first version where app versions are serialized to channel
+// state, and is used as the fallback.
+export var VOLEAPP_VERSION = buildVersion !== null && buildVersion !== void 0 ? buildVersion : "3.5.0";
+
 // Add all exported constants here to prevent circular dependencies
 export var
   // Control panel will automatically close if viewport is less than this width

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

@@ -2,5 +2,5 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "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); }
-import { ViewMode } from "./enums";
+import { ViewMode } from "../state/types";
 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/controlPointsToLut.js

@@ -40,6 +40,10 @@ export function getDefaultLut(histogram) {
  * 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) {
+  if (typeof value === "number") {
+    return value;
+  }
+
   // look at first char of string.
   var firstChar = value.charAt(0);
   if (firstChar === "m") {

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

@@ -0,0 +1,205 @@
+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 _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+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; }
+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); }
+import { snapshotToChannelState, snapshotToViewerChannelSetting } from "../../state/deserialize";
+import { channelStateToSnapshot } from "../../state/serialize";
+import { cloneChannelState } from "../../state/util";
+import { VOLEAPP_VERSION } from "../constants";
+
+/**
+ * A message sent from an external application after this app was opened,
+ * containing data that was too large to pack into the URL.
+ */
+
+/** A snapshot of app state, containing (optional) global and per-channel settings. */
+
+/**
+ * A complete description of a viewer session, containing image URLs, global
+ * and per-channel settings, and optional image metadata.
+ */
+
+/** Verifies that the given object is (likely) a `StoreSnapshot`. */
+export var isStoreSnapshot = function isStoreSnapshot(settings) {
+  var castSettings = settings;
+  return settings !== null && settings !== undefined && typeof castSettings.version === "string" && _typeof(castSettings.channels) === "object" && !Array.isArray(castSettings.channels) && Object.entries(castSettings.channels).every(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+      key = _ref2[0],
+      value = _ref2[1];
+    return typeof key === "string" && _typeof(value) === "object" && !Array.isArray(value);
+  });
+};
+
+/** Verifies that the given object is (likely) a `SessionSnapshot`. */
+export var isSessionSnapshot = function isSessionSnapshot(settings) {
+  if (!isStoreSnapshot(settings)) {
+    return false;
+  }
+  var _ref3 = settings,
+    scenes = _ref3.scenes;
+  return Array.isArray(scenes) && scenes.every(function (scene) {
+    return typeof scene === "string" || Array.isArray(scene) && scene.every(function (url) {
+      return typeof url === "string";
+    });
+  });
+};
+
+/** Converts an array of `ChannelState`s to a compact JSON representation that can be stringified into the clipboard. */
+export var channelStatesToSnapshot = function channelStatesToSnapshot(channelStates, excludeKeys) {
+  var channels = {};
+  var _iterator = _createForOfIteratorHelper(channelStates),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var ch = _step.value;
+      var setting = cloneChannelState(ch);
+      if (excludeKeys !== undefined) {
+        var _iterator2 = _createForOfIteratorHelper(excludeKeys),
+          _step2;
+        try {
+          for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+            var key = _step2.value;
+            delete setting[key];
+          }
+        } catch (err) {
+          _iterator2.e(err);
+        } finally {
+          _iterator2.f();
+        }
+      }
+      var state = channelStateToSnapshot(setting, false);
+      channels[ch.name] = state;
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return {
+    version: VOLEAPP_VERSION,
+    channels: channels
+  };
+};
+
+/** Converts a single `ChannelState` to a compact JSON representation that can be stringified into the clipboard. */
+export var singleChannelStateToSnapshot = function singleChannelStateToSnapshot(channelState, excludeKeys) {
+  var setting = cloneChannelState(channelState);
+  if (excludeKeys !== undefined) {
+    var _iterator3 = _createForOfIteratorHelper(excludeKeys),
+      _step3;
+    try {
+      for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+        var key = _step3.value;
+        delete setting[key];
+      }
+    } catch (err) {
+      _iterator3.e(err);
+    } finally {
+      _iterator3.f();
+    }
+  }
+  var channels = _defineProperty({}, setting.name, channelStateToSnapshot(setting, false));
+  return {
+    version: VOLEAPP_VERSION,
+    channels: channels
+  };
+};
+
+/** Converts a compacted set of `ChannelState`s from the clipboard into a record of channel names and their states. */
+export var snapshotToChannelStates = function snapshotToChannelStates(serialized) {
+  var result = {};
+  for (var _i = 0, _Object$entries = Object.entries(serialized.channels); _i < _Object$entries.length; _i++) {
+    var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2),
+      name = _Object$entries$_i[0],
+      state = _Object$entries$_i[1];
+    result[name] = _objectSpread(_objectSpread({}, snapshotToChannelState(state)), {}, {
+      name: name
+    });
+  }
+  return result;
+};
+export var snapshotToViewerChannelSettings = function snapshotToViewerChannelSettings(serialized) {
+  var snapshots = Object.entries(serialized.channels);
+  if (snapshots.length === 0) {
+    return undefined;
+  }
+  var channels = snapshots.map(function (_ref4) {
+    var _ref5 = _slicedToArray(_ref4, 2),
+      name = _ref5[0],
+      snap = _ref5[1];
+    return snapshotToViewerChannelSetting(name, snap);
+  });
+  return {
+    groups: [{
+      name: "Channels",
+      channels: channels
+    }]
+  };
+};
+
+/**
+ * Parses a `ViewerMessage` into the relevant entries in `AppProps`.
+ *
+ * Optionally accepts the current value of the `imageUrl` prop, for the case where the message contains only metadata
+ * and the image URLs that correspond to the metadata were passed in by other means.
+ */
+export function viewerMessageToParams(message, propUrl) {
+  var _message$scenes;
+  // get scenes
+  var scenes = (_message$scenes = message.scenes) !== null && _message$scenes !== void 0 ? _message$scenes : propUrl && (typeof propUrl === "string" ? [propUrl] : propUrl.scenes);
+  if (scenes === undefined || scenes === "" || scenes.length === 0 || scenes.length === 1 && scenes[0] === "") {
+    return {};
+  }
+  var firstScene = scenes[0];
+  var imageUrl = scenes.length === 1 && typeof firstScene === "string" ? firstScene : {
+    scenes: scenes
+  };
+
+  // get metadata
+  var meta = message.meta;
+  var metadata = meta && scenes.map(function (scene) {
+    if (Array.isArray(scene) && scene.length > 1) {
+      // can't handle multi-source scenes (yet)
+      console.warn("Can't apply metadata to multi-source scene", scene);
+      return undefined;
+    }
+    var sceneString = Array.isArray(scene) ? scene[0] : scene;
+    return meta[sceneString];
+  });
+  return {
+    imageUrl: imageUrl,
+    metadata: metadata
+  };
+}
+
+/** Formats the values of the `imageUrl` and `metadata` props to `App` as a `ViewerMessage`. */
+export function paramsToViewerMessage(imageUrl, metadata) {
+  var scenes = typeof imageUrl === "string" ? [imageUrl] : imageUrl.scenes;
+  if (metadata === undefined) {
+    return {
+      scenes: scenes
+    };
+  }
+  var meta = {};
+  scenes.forEach(function (scene, index) {
+    var value = metadata[index];
+    // Can't save a metadata record if there isn't any metadata or the image is multi-source
+    if (value === undefined || Array.isArray(scene) && scene.length !== 1) {
+      return;
+    }
+    meta[Array.isArray(scene) ? scene[0] : scene] = value;
+  });
+  return {
+    scenes: scenes,
+    meta: meta
+  };
+}