@aics/vole-app 3.5.0 → 3.6.0

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

@@ -25,13 +25,25 @@ export var AxisClipSliders = function AxisClipSliders(props) {
     changeViewerSetting("region", _defineProperty({}, axis, [start, end]));
   };
   var updateSlice = function updateSlice(axis, slice) {
+    var isScrubbing = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
     pauseOnInput(axis);
+    if (isScrubbing) {
+      props.setScrubbingAxis(axis);
+    }
     props.changeViewerSetting("slice", _defineProperty({}, axis, slice / props.numSlices[axis]));
   };
   var updateTime = function updateTime(time) {
+    var isScrubbing = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     pauseOnInput("t");
+    if (isScrubbing) {
+      props.setScrubbingAxis("t");
+    }
     props.changeViewerSetting("time", time);
   };
+  var endScrub = function endScrub() {
+    props.setScrubbingAxis(null);
+    props.playControls.endHold();
+  };
 
   // Pause when view mode or volume size has changed
   useEffect(function () {
@@ -54,20 +66,20 @@ export var AxisClipSliders = function AxisClipSliders(props) {
       label: axis.toUpperCase(),
       val: Math.round(props.slices[axis] * numSlices),
       max: numSlices,
+      onSlide: function onSlide(val) {
+        return updateSlice(axis, val, true);
+      },
       onChange: function onChange(val) {
         return updateSlice(axis, val);
       },
       onStart: function onStart() {
         return props.playControls.startHold(axis);
       },
-      onEnd: function onEnd() {
-        return props.playControls.endHold();
-      },
+      onEnd: endScrub,
       playing: props.playingAxis === axis,
       onTogglePlayback: function onTogglePlayback(willPlay) {
         return handlePlayPause(axis, willPlay);
-      },
-      updateWhileSliding: numSlices === numSlicesLoaded
+      }
     }));
   };
   var create3dAxisSlider = function create3dAxisSlider(axis) {
@@ -119,15 +131,16 @@ export var AxisClipSliders = function AxisClipSliders(props) {
     onTogglePlayback: function onTogglePlayback(willPlay) {
       return handlePlayPause("t", willPlay);
     },
+    onSlide: function onSlide(time) {
+      return updateTime(time, true);
+    },
     onChange: function onChange(time) {
       return updateTime(time);
     },
     onStart: function onStart() {
       return props.playControls.startHold("t");
     },
-    onEnd: function onEnd() {
-      return props.playControls.endHold();
-    }
+    onEnd: endScrub
   })))), props.numScenes > 1 && /*#__PURE__*/React.createElement("span", {
     className: "slider-group"
   }, /*#__PURE__*/React.createElement("span", {

package/es/aics-image-viewer/components/dimension_sliders/RotationSliders.js

@@ -100,21 +100,19 @@ export var RotationSliders = function RotationSliders(_ref) {
 
   // Set up event listeners on mount.
   useEffect(function () {
-    // TODO this is *extremely brittle*: setting this clears away any other listener for render events.
-    //   At time of writing, `setOnRenderCallback` appears not to be used anywhere else in either this package or
-    //   vole-core, but that could change at any time.
-    //   Ideally `View3d` would have an `addEventListener`/`removeEventListener` model.
-    view3d.setOnRenderCallback(function () {
+    var renderListener = function renderListener() {
       if (!hasControlRef.current) {
         setRotation(getRotationAngles(view3d.getCameraState()));
       }
-    });
+    };
+    view3d.addEventListener("render", renderListener);
     var clickListener = function clickListener() {
       return hasControlRef.current = false;
     };
     view3d.getDOMElement().addEventListener("mousedown", clickListener);
     return function () {
-      return view3d.getDOMElement().removeEventListener("mousedown", clickListener);
+      view3d.removeEventListener("render", renderListener);
+      view3d.getDOMElement().removeEventListener("mousedown", clickListener);
     };
   }, [view3d]);
   var createRotateSlider = function createRotateSlider(axis) {

package/es/aics-image-viewer/components/dimension_sliders/SliderRows.js

@@ -116,6 +116,7 @@ export var IndexSliderRow = function IndexSliderRow(props) {
 /** Wrapper around `SliderRow` that adds a play button and accounts for the case where not all of an axis is loaded. */
 export var PlaySliderRow = function PlaySliderRow(props) {
   var onChange = props.onChange,
+    onSlide = props.onSlide,
     onStart = props.onStart,
     onEnd = props.onEnd;
   // In partially-loaded axes, stores the displayed value of the slider while the user is sliding it
@@ -131,9 +132,10 @@ export var PlaySliderRow = function PlaySliderRow(props) {
   var wrappedOnChange = useCallback(function (val) {
     return onChange === null || onChange === void 0 ? void 0 : onChange(val);
   }, [onChange]);
-  var wrappedSetValReadout = useCallback(function (val) {
-    return setValReadout(val);
-  }, []);
+  var wrappedOnSlide = useCallback(function (val) {
+    setValReadout(val);
+    onSlide === null || onSlide === void 0 || onSlide(val);
+  }, [onSlide]);
   var wrappedOnStart = useCallback(function () {
     setValReadout(props.val);
     setSliderHeld(true);
@@ -146,10 +148,10 @@ export var PlaySliderRow = function PlaySliderRow(props) {
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IndexSliderRow, {
     label: props.label,
     val: props.val,
-    valReadout: props.updateWhileSliding || !sliderHeld ? undefined : valReadout,
+    valReadout: !sliderHeld ? undefined : valReadout,
     max: props.max,
-    onSlide: props.updateWhileSliding ? wrappedOnChange : wrappedSetValReadout,
-    onChange: props.updateWhileSliding ? undefined : wrappedOnChange,
+    onSlide: wrappedOnSlide,
+    onChange: wrappedOnChange,
     onStart: wrappedOnStart,
     onEnd: wrappedOnEnd
   }), props.max > 1 && /*#__PURE__*/React.createElement(Tooltip, {

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

@@ -31,7 +31,7 @@ var ControlPanelRow = function ControlPanelRow(inputProps) {
   var style = {
     "--control-panel-row-vertical-margin": props.verticalMargin + "px"
   };
-  var createTitle = props.title !== undefined || props.showColorPicker;
+  var createTitle = props.title !== undefined || props.icon !== undefined || props.showColorPicker;
   var baseClass = "control-panel-row".concat(props.highlight ? " control-panel-row-highlight" : "");
   var className = props.className ? "".concat(baseClass, " ").concat(props.className) : baseClass;
   return /*#__PURE__*/React.createElement("div", {
@@ -40,7 +40,9 @@ var ControlPanelRow = function ControlPanelRow(inputProps) {
     onClick: props.onClick
   }, createTitle && /*#__PURE__*/React.createElement("div", {
     className: "control-panel-row-title"
-  }, props.showColorPicker && /*#__PURE__*/React.createElement(ColorPicker, _extends({
+  }, props.icon && /*#__PURE__*/React.createElement("div", {
+    className: "control-panel-row-icon"
+  }, props.icon), props.showColorPicker && /*#__PURE__*/React.createElement(ColorPicker, _extends({
     disableAlpha: true,
     width: 18
   }, colorPickerProps)), props.title && /*#__PURE__*/React.createElement("h4", null, props.title)), props.children);

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

@@ -16,8 +16,10 @@
     flex-grow:1;
   }
 
-  .control-panel-col .control-panel-row .control-panel-row-title .color-picker{
-      margin-right:16px;
+  .control-panel-col .control-panel-row .control-panel-row-title .color-picker,
+    .control-panel-col .control-panel-row .control-panel-row-title .control-panel-row-icon{
+      margin-right:10px;
+      font-size:12px;
     }
 
   .control-panel-col .control-panel-row .control-panel-row-title h4{
@@ -58,7 +60,6 @@
     width:100%;
     border-bottom:1px solid var(--color-controlpanel-border);
   }
-
 .control-panel-col .ant-collapse-item:not(:last-child) .control-panel-row:last-child::after{
   border-bottom:none;
 }

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

@@ -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

@@ -4,6 +4,30 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 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 "../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/utils/parseSnapshot.js

@@ -14,6 +14,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 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,
@@ -89,6 +90,30 @@ export var channelStatesToSnapshot = function channelStatesToSnapshot(channelSta
   };
 };
 
+/** 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 = {};
@@ -142,12 +167,13 @@ export function viewerMessageToParams(message, propUrl) {
   // get metadata
   var meta = message.meta;
   var metadata = meta && scenes.map(function (scene) {
-    if (Array.isArray(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;
     }
-    return meta[scene];
+    var sceneString = Array.isArray(scene) ? scene[0] : scene;
+    return meta[sceneString];
   });
   return {
     imageUrl: imageUrl,