@aics/vole-app 3.3.0 → 3.4.0

package/es/aics-image-viewer/components/{AxisClipSliders → dimension_sliders}/styles.css

@@ -1,5 +1,5 @@
 .clip-sliders{
-  --w-group-title:50px;
+  --w-group-title:60px;
   --w-axis-slider:480px;
   --w-name:10px;
   --w-values-3d:160px;
@@ -93,8 +93,14 @@
 .clip-sliders .slider-group .slider-group-title{
       flex:0 0 var(--w-group-title);
       margin:0;
+      font-family:var(--font-family);
+      color:var(--color-text-header);
     }
 
+.clip-sliders .slider-group .slider-group-title.group-title-extra{
+        flex-basis:calc(var(--w-group-title) + var(--w-name) + 14px);
+      }
+
 .clip-sliders .slider-group .slider-group-rows{
       flex:1 1 auto;
     }

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

@@ -25,7 +25,7 @@
     }
 
   .control-panel-col .control-panel-row .ant-btn-text{
-    color:var(--color-button-icon-activated-text);
+    color:var(--color-button-icon-active-text);
     transition:color 0.3s;
   }
 

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

@@ -4,8 +4,8 @@ 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 React from "react";
 import { CaretDownOutlined, CaretUpOutlined } from "@ant-design/icons";
+import React from "react";
 import { useRefWithSetter } from "../../../shared/utils/hooks";
 import "./styles.css";
 /**
@@ -27,6 +27,8 @@ var NumericInput = function NumericInput(_ref) {
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? "" : _ref$className,
+    _ref$unitSymbol = _ref.unitSymbol,
+    unitSymbol = _ref$unitSymbol === void 0 ? "" : _ref$unitSymbol,
     onChange = _ref.onChange;
   // While the input has focus, allow invalid input, just don't call `onChange` with it
   var _React$useState = React.useState(false),
@@ -100,7 +102,7 @@ var NumericInput = function NumericInput(_ref) {
     className: fullClassName,
     onKeyDown: onKeyDown
   }, /*#__PURE__*/React.createElement("input", {
-    value: hasFocus ? textContent : displayedValue,
+    value: hasFocus ? textContent : displayedValue + unitSymbol,
     step: step,
     min: min,
     max: max,

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

@@ -23,10 +23,12 @@ var SliderRow = function SliderRow(props) {
       max: props.max
     },
     start: props.start,
+    disabled: props.disabled,
     connect: true,
     tooltips: true,
     behaviour: "drag",
     format: props.formatInteger ? INTEGER_FORMATTER : undefined,
+    onSlide: props.onSlide,
     onUpdate: props.onUpdate,
     onChange: props.onChange
   })), props.children && /*#__PURE__*/React.createElement("div", {

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

@@ -21,6 +21,7 @@
     align-items:center;
   }
 
-  .viewer-control-row .control .control-slider{
+  .viewer-control-row .control .control-slider,
+    .viewer-control-row .control .control-extra:first-child{
       flex-grow:1;
     }

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

@@ -110,6 +110,9 @@ var useVolume = function useVolume(scenePaths, options) {
       setPlayingAxis(axis);
       // prioritize prefetching along the playing axis
       sceneLoader.setPrefetchPriority(axis ? [AXIS_TO_LOADER_PRIORITY[axis]] : []);
+      sceneLoader.updateFetchOptions({
+        onlyPriorityDirections: isPlaying
+      });
       // sync multichannel loading so we don't show loaded channels one at a time
       sceneLoader.syncMultichannelLoading(isPlaying);
       if (image) {

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

@@ -13,7 +13,7 @@ export var
   BACKGROUND_COLOR_DEFAULT = [0, 0, 0],
   BOUNDING_BOX_COLOR_DEFAULT = [255, 255, 255],
   AXIS_MARGIN_DEFAULT = [16, 16],
-  SCALE_BAR_MARGIN_DEFAULT = [120, 12],
+  SCALE_BAR_MARGIN_DEFAULT = [220, 12],
   // These settings were chosen to work well with most AICS microscopy pipeline images.
   // These numbers mean: remap the bottom LUT_MIN_PERCENTILE fraction of pixels to zero intensity,
   // and linearly increase intensity up to the LUT_MAX_PERCENTILE fraction of pixels.
@@ -31,7 +31,7 @@ export var TFEDITOR_DEFAULT_COLOR = [255, 255, 255];
 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;
+export var QUEUE_MAX_LOW_PRIORITY_SIZE = 6;
 
 /** Maps an axis the user can "play" through to the direction to prefetch while playing that axis */
 export var AXIS_TO_LOADER_PRIORITY = {

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

@@ -0,0 +1,122 @@
+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 _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 { mat3, quat, vec3 } from "gl-matrix";
+import React from "react";
+
+/**
+ * Converts a `vec3` to a `[number, number, number]`.
+ *
+ * Technically, these are already equivalent types for all the math we do here, but the `vec3` type also includes any
+ * other indexable collection of `number`s, so this keeps the type checker happy.
+ */
+var toArray = function toArray(v) {
+  return [v[0], v[1], v[2]];
+};
+var vecToTarget = function vecToTarget(state) {
+  return vec3.subtract(vec3.create(), state.target, state.position);
+};
+
+/** Transpose a 3x3 matrix */
+var transpose = function transpose(matrix) {
+  var out = mat3.create();
+  mat3.transpose(out, matrix);
+  return out;
+};
+
+/** Multiply every vector in `state` by `matrix` */
+export var applyMatrix = function applyMatrix(state, matrix) {
+  var position = toArray(vec3.transformMat3(vec3.create(), state.position, matrix));
+  var up = toArray(vec3.transformMat3(vec3.create(), state.up, matrix));
+  var target = toArray(vec3.transformMat3(vec3.create(), state.target, matrix));
+  return {
+    position: position,
+    up: up,
+    target: target
+  };
+};
+/** Orthonormal camera basis derived from `state`. */
+var getBasis = function getBasis(state) {
+  var toTarget = vecToTarget(state);
+  var distance = vec3.length(toTarget);
+  var forward = vec3.scale(vec3.create(), toTarget, 1 / distance);
+  var right = vec3.cross(vec3.create(), forward, state.up);
+  vec3.normalize(right, right);
+  var up = vec3.cross(vec3.create(), right, forward);
+  return {
+    forward: forward,
+    right: right,
+    up: up,
+    distance: distance
+  };
+};
+
+/** Creates a XYZ rotation matrix with the given angles */
+export var rotationMatrix = function rotationMatrix(x, y, z) {
+  var rotationQuat = quat.create();
+  quat.rotateX(rotationQuat, rotationQuat, x);
+  quat.rotateY(rotationQuat, rotationQuat, y);
+  quat.rotateZ(rotationQuat, rotationQuat, z);
+  var rotation = mat3.fromQuat(mat3.create(), rotationQuat);
+  return rotation;
+};
+
+/** Extract Tait-Bryan angles from a `CameraState` */
+export var getRotationAngles = function getRotationAngles(state) {
+  var _getBasis = getBasis(state),
+    forward = _getBasis.forward,
+    right = _getBasis.right,
+    up = _getBasis.up;
+  var sy = Math.max(-1, Math.min(1, -forward[0]));
+  var y = Math.asin(sy);
+  if (Math.abs(sy) < 1 - 1e-6) {
+    return {
+      x: Math.atan2(forward[1], -forward[2]),
+      y: y,
+      z: Math.atan2(-up[0], right[0])
+    };
+  }
+  // Gimbal lock: y = ±90°, fold combined rotation into x.
+  return {
+    x: Math.atan2(up[2], up[1]),
+    y: y,
+    z: 0
+  };
+};
+
+/**
+ * Constructs a new `CameraState` equivalent to rotating `state` about the origin such that the camera returns to its
+ * default *orientation* (looking towards -Z, +Y up), though not necessarily its default *position*.
+ */
+export var defaultOrientedCamera = function defaultOrientedCamera(state) {
+  var distance = vec3.length(vecToTarget(state));
+  // Rotate `target` about the origin, then derive `position` from `target`
+  var _getRotationAngles = getRotationAngles(state),
+    x = _getRotationAngles.x,
+    y = _getRotationAngles.y,
+    z = _getRotationAngles.z;
+  var matrix = transpose(rotationMatrix(x, y, z));
+  var target = toArray(vec3.transformMat3(vec3.create(), state.target, matrix));
+  var position = toArray(vec3.add(vec3.create(), target, vec3.fromValues(0, 0, distance)));
+  return {
+    target: target,
+    position: position,
+    up: [0, 1, 0]
+  };
+};
+
+/** Creates a callback that performs some action on the camera, by applying `transform` to the current camera state. */
+export var useCameraCallback = function useCameraCallback(transform, view3d) {
+  return React.useCallback(function () {
+    var state = view3d.getCameraState();
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    var nextState = transform.apply(void 0, [state].concat(args));
+    view3d.setCameraState(nextState);
+    return _objectSpread(_objectSpread({}, state), nextState);
+  }, [view3d, transform]);
+};

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

@@ -13,6 +13,7 @@ var PlayControls = /*#__PURE__*/function () {
     _defineProperty(this, "playWaitingForLoad", false);
     _defineProperty(this, "playHolding", false);
     _defineProperty(this, "playTimeoutId", 0);
+    _defineProperty(this, "lastStepTime", 0);
   }
   return _createClass(PlayControls, [{
     key: "setPlayingAxis",
@@ -28,11 +29,18 @@ var PlayControls = /*#__PURE__*/function () {
       if (!this.playingAxis || this.playHolding || !this.stepAxis) {
         return;
       }
-      // If the volume is not loaded, wait for it to load before continuing
       if (!((_this$getVolumeIsLoad = this.getVolumeIsLoaded) !== null && _this$getVolumeIsLoad !== void 0 && _this$getVolumeIsLoad.call(this))) {
         this.playWaitingForLoad = true;
         return;
       }
+
+      // Enforce minimum interval between frame *presentations* (not requests).
+      // lastStepTime is set in onImageLoaded when a frame's data arrives.
+      var delay = PLAY_STEP_INTERVAL_MS - (performance.now() - this.lastStepTime);
+      if (delay > 0) {
+        this.playTimeoutId = window.setTimeout(this.playStep.bind(this), delay);
+        return;
+      }
       this.stepAxis(this.playingAxis);
       this.playTimeoutId = window.setTimeout(this.playStep.bind(this), PLAY_STEP_INTERVAL_MS);
     }
@@ -41,6 +49,9 @@ var PlayControls = /*#__PURE__*/function () {
   }, {
     key: "onImageLoaded",
     value: function onImageLoaded() {
+      // Record when the frame was presented, so scheduleNextStep enforces
+      // PLAY_STEP_INTERVAL_MS between presentations (not between requests).
+      this.lastStepTime = performance.now();
       if (this.playWaitingForLoad) {
         this.playWaitingForLoad = false;
         this.playStep();

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

@@ -158,6 +158,14 @@ var SceneStore = /*#__PURE__*/function () {
         currentLoader.setPrefetchPriority(priority);
       }
     }
+  }, {
+    key: "updateFetchOptions",
+    value: function updateFetchOptions(fetchOptions) {
+      var currentLoader = this.loaders[this.currentScene];
+      if (currentLoader) {
+        currentLoader.updateFetchOptions(fetchOptions);
+      }
+    }
   }]);
 }();
 export { SceneStore as default };

package/es/aics-image-viewer/shared/utils/test/camera.test.js

@@ -0,0 +1,127 @@
+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; }
+import { describe, expect, it } from "@jest/globals";
+import { mat3 } from "gl-matrix";
+import { applyMatrix, defaultOrientedCamera, getRotationAngles, rotationMatrix } from "../camera";
+var expectCameraStateToBe = function expectCameraStateToBe(actual, expected, precision) {
+  console.log(actual.up, expected.up);
+  var _actual$position = _slicedToArray(actual.position, 3),
+    apx = _actual$position[0],
+    apy = _actual$position[1],
+    apz = _actual$position[2];
+  var _expected$position = _slicedToArray(expected.position, 3),
+    epx = _expected$position[0],
+    epy = _expected$position[1],
+    epz = _expected$position[2];
+  expect(apx).toBeCloseTo(epx, precision);
+  expect(apy).toBeCloseTo(epy, precision);
+  expect(apz).toBeCloseTo(epz, precision);
+  var _actual$target = _slicedToArray(actual.target, 3),
+    atx = _actual$target[0],
+    aty = _actual$target[1],
+    atz = _actual$target[2];
+  var _expected$target = _slicedToArray(expected.target, 3),
+    etx = _expected$target[0],
+    ety = _expected$target[1],
+    etz = _expected$target[2];
+  expect(atx).toBeCloseTo(etx, precision);
+  expect(aty).toBeCloseTo(ety, precision);
+  expect(atz).toBeCloseTo(etz, precision);
+  var _actual$up = _slicedToArray(actual.up, 3),
+    aux = _actual$up[0],
+    auy = _actual$up[1],
+    auz = _actual$up[2];
+  var _expected$up = _slicedToArray(expected.up, 3),
+    eux = _expected$up[0],
+    euy = _expected$up[1],
+    euz = _expected$up[2];
+  expect(aux).toBeCloseTo(eux, precision);
+  expect(auy).toBeCloseTo(euy, precision);
+  expect(auz).toBeCloseTo(euz, precision);
+};
+describe("applyMatrix", function () {
+  it("multiplies every vector in a `CameraState` by a matrix", function () {
+    var INPUT = {
+      position: [3, 0, 0],
+      up: [0, 1, 0],
+      target: [0, 0, 1]
+    };
+    var EXPECTED = {
+      position: [0, 0, 3],
+      up: [0, 2, 0],
+      target: [3, 0, 0]
+    };
+    var actual = applyMatrix(INPUT, mat3.fromValues(0, 0, 1, 0, 2, 0, 3, 0, 0));
+    expectCameraStateToBe(actual, EXPECTED);
+  });
+  it("properly handles the matrix in column-major order", function () {
+    var INPUT = {
+      position: [7, 11, 3],
+      up: [0, 0, 1],
+      target: [2, 3, 5]
+    };
+    var EXPECTED = {
+      position: [38, 31, 57],
+      up: [3, 2, 1],
+      target: [23, 17, 20]
+    };
+    var actual = applyMatrix(INPUT, mat3.fromValues(1, 2, 3, 2, 1, 3, 3, 2, 1));
+    expectCameraStateToBe(actual, EXPECTED);
+  });
+});
+describe("defaultOrientedCamera", function () {
+  var testDefaultOrientedCamera = function testDefaultOrientedCamera(input, position, target) {
+    var result = defaultOrientedCamera(input);
+    expectCameraStateToBe(result, {
+      position: position,
+      target: target,
+      up: [0, 1, 0]
+    });
+  };
+  it("returns the camera to its default orientation (towards -Z, with +Y up)", function () {
+    testDefaultOrientedCamera({
+      position: [Math.SQRT2 / 2, 0, Math.SQRT2 / 2],
+      target: [0, 0, 0],
+      up: [-1, 0, 0]
+    }, [0, 0, 1], [0, 0, 0]);
+  });
+  it("preserves the distance from `position` to `target`", function () {
+    testDefaultOrientedCamera({
+      position: [0, 1, 1],
+      target: [0, 0, 0],
+      up: [-1, 0, 0]
+    }, [0, 0, Math.SQRT2], [0, 0, 0]);
+  });
+  it("rotates both `target` and `position` about the origin", function () {
+    testDefaultOrientedCamera({
+      position: [-1, -2, 1],
+      target: [-1, -1, 1],
+      up: [-1, 0, 0]
+    }, [1, 1, 2], [1, 1, 1]);
+  });
+});
+describe("getRotationAngles", function () {
+  it("is the inverse of applying a rotation matrix to a default-oriented camera when -PI/2 < Y < PI/2", function () {
+    var testRotationAnglesInverse = function testRotationAnglesInverse(x, y, z, target) {
+      var state = {
+        position: [target[0], target[1], target[2] - 1],
+        target: target,
+        up: [0, 1, 0]
+      };
+      var rotated = applyMatrix(defaultOrientedCamera(state), rotationMatrix(x, y, z));
+      var result = getRotationAngles(rotated);
+      expect(result.x).toBeCloseTo(x);
+      expect(result.y).toBeCloseTo(y);
+      expect(result.z).toBeCloseTo(z);
+    };
+    testRotationAnglesInverse(Math.PI / 2, 0, 0, [0, 0, 0]);
+    testRotationAnglesInverse(Math.PI / 2, 0, 0, [1, 2, 3]);
+    testRotationAnglesInverse(Math.PI / 3, Math.PI / 3, Math.PI / 3, [3, 3, 3]);
+    testRotationAnglesInverse(Math.PI, Math.PI / 4, -Math.PI, [3, 3, 3]);
+    testRotationAnglesInverse(1, -0.8, 3, [0.5, 0.8, 1.2]);
+  });
+});