@aics/vole-app 3.3.0 → 3.4.0

package/es/aics-image-viewer/components/Toolbar/styles.css

@@ -108,155 +108,46 @@
     margin-right:6px;
   }
 
+.viewer-toolbar .btn-borderless,
+  .viewer-toolbar .ant-select.ant-select-outlined .ant-select-selector,
+  .viewer-toolbar .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-checked){
+    background-color:var(--color-toolbar-button-bg);
+  }
+
 .viewer-toolbar .ant-btn-icon-only{
     padding-bottom:4px;
     padding-left:1px;
   }
 
 .viewer-toolbar .btn-borderless{
-    background-color:var(--color-toolbar-button-bg);
     border-color:transparent;
     color:var(--color-text-body);
   }
 
 .viewer-toolbar .btn-active{
-    color:var(--color-button-icon-activated-text);
-    background-color:var(--color-button-icon-activated-bg);
-    border:1px solid var(--color-button-icon-activated-outline);
+    color:var(--color-button-icon-active-text);
+    background-color:var(--color-button-icon-active-bg);
+    border:1px solid var(--color-button-icon-active-outline);
   }
 
-.viewer-toolbar .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-disabled){
-    background-color:black;
-    box-shadow:-1px 0px 0px 0px transparent;
-    transition-property:color, background-color, border-color, box-shadow;
-  }
-
-.viewer-toolbar .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-disabled).ant-radio-button-wrapper-checked,
-    .viewer-toolbar .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-disabled):hover{
-      outline:none;
-      color:white;
-      border-color:#aeacae;
-    }
-
-.viewer-toolbar .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-disabled).ant-radio-button-wrapper-checked:not(:first-child), .viewer-toolbar .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-disabled):hover:not(:first-child){
-        box-shadow:-1px 0px 0px 0px #aeacae;
-      }
-
-.viewer-toolbar .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-disabled).ant-radio-button-wrapper-checked{
-      background-color:#4b4b4b;
-    }
-
-.viewer-toolbar .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-disabled):hover{
-      background-color:#aa88ed;
-      color:white;
-    }
+.viewer-toolbar{
+  --color-button-radio-hover-outline:var(--color-button-tertiary-active-outline);
+  --color-button-radio-hover-text:var(--color-button-icon-active-text);
+}
 
-.viewer-toolbar .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-disabled):focus-within{
-      outline:none;
-    }
+.viewer-toolbar .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-disabled):hover,
+  .viewer-toolbar .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-disabled):has(:focus-visible){
+    background-color:var(--color-button-tertiary-hover-text);
+  }
 
-.viewer-toolbar .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-disabled)::before{
-      content:none;
+.viewer-toolbar .ant-select.select-resolution > .ant-select-selector{
+      text-align:left;
     }
 
-.viewer-toolbar.viewer-toolbar .ant-select.select-render-setting{
-    min-width:120px;
-  }
-
-.viewer-toolbar.viewer-toolbar .ant-select.select-render-setting .ant-select-selection-item,
-    .viewer-toolbar.viewer-toolbar .ant-select.select-render-setting .ant-select-arrow{
+.viewer-toolbar .ant-select.select-resolution .ant-select-selection-item{
       color:var(--color-button-tertiary-text);
-      transition:all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
     }
 
-.viewer-toolbar.viewer-toolbar .ant-select.select-render-setting.ant-select-disabled .ant-select-selection-item,
-      .viewer-toolbar.viewer-toolbar .ant-select.select-render-setting.ant-select-disabled .ant-select-selection-search{
-        padding-inline-end:0;
-      }
-
-.viewer-toolbar.viewer-toolbar .ant-select.select-render-setting.ant-select-disabled .ant-select-selection-item{
-        color:var(--color-button-icon-disabled-text);
-      }
-
-.viewer-toolbar.viewer-toolbar .ant-select.select-render-setting.ant-select-disabled .ant-select-selection-item:hover{
-          color:var(--color-button-icon-disabled-text);
-        }
-
-.viewer-toolbar.viewer-toolbar .ant-select.select-render-setting.ant-select-disabled .ant-select-selector{
-        border-color:var(--color-button-icon-disabled-text);
-      }
-
-.viewer-toolbar.viewer-toolbar .ant-select.select-render-setting.ant-select-disabled .ant-select-arrow{
+.viewer-toolbar .ant-select.select-resolution.ant-select-disabled .ant-select-arrow{
         display:none;
       }
-
-.viewer-toolbar.viewer-toolbar .ant-select.select-render-setting .ant-select-selector{
-      border-color:#aeacae;
-      box-shadow:none;
-      background-color:var(--color-toolbar-button-bg);
-    }
-
-.viewer-toolbar .ant-select.select-render-setting:hover:not(:disabled) .ant-select-selector,
-    .viewer-toolbar .ant-select.select-render-setting:hover:not(:disabled) .ant-select-arrow,
-    .viewer-toolbar .ant-select.select-render-setting:hover:not(:disabled) .ant-select-selection-item,
-    .viewer-toolbar .ant-select.select-render-setting:focus-visible:not(:disabled) .ant-select-selector,
-    .viewer-toolbar .ant-select.select-render-setting:focus-visible:not(:disabled) .ant-select-arrow,
-    .viewer-toolbar .ant-select.select-render-setting:focus-visible:not(:disabled) .ant-select-selection-item,
-    .viewer-toolbar.viewer-toolbar.viewer-toolbar .ant-select-open .ant-select-selector,
-    .viewer-toolbar.viewer-toolbar.viewer-toolbar .ant-select-open .ant-select-arrow,
-    .viewer-toolbar.viewer-toolbar.viewer-toolbar .ant-select-open .ant-select-selection-item{
-      color:var(--color-button-tertiary-hover-text);
-      outline-color:var(--color-button-tertiary-hover-outline);
-    }
-
-.viewer-toolbar-dropdown .ant-select-dropdown-menu-item-active{
-    transition-property:background-color, color;
-  }
-
-.viewer-toolbar-dropdown .ant-select-dropdown-menu-item-disabled,
-  .viewer-toolbar-dropdown .ant-select-dropdown-menu-item-disabled:hover{
-    color:#6e6e6e;
-  }
-
-.viewer-toolbar-dropdown .ant-select-dropdown-menu-item-active:not(.ant-select-dropdown-menu-item-disabled){
-    background-color:transparent;
-    color:white;
-  }
-
-.viewer-toolbar-dropdown .ant-select-dropdown-menu-item-active:not(.ant-select-dropdown-menu-item-disabled).ant-select-dropdown-menu-item-selected{
-      background-color:#4b4b4b;
-    }
-
-.viewer-toolbar-dropdown .ant-select-dropdown-menu-item:hover:not(.ant-select-dropdown-menu-item-disabled){
-    background-color:#f6f0ff;
-    color:#4b4b4b;
-  }
-
-@supports selector(:has(:focus-visible)){
-    .viewer-toolbar .ant-select-selection:focus-visible,
-    .viewer-toolbar .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-disabled):has(:focus-visible),
-    .viewer-toolbar .btn-borderless:focus-visible{
-      background-color:#aa88ed !important;
-      color:white !important;
-    }
-
-    .viewer-toolbar .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-disabled):has(:focus-visible){
-      outline:none;
-      border-color:#aeacae;
-    }
-
-      .viewer-toolbar .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-disabled):has(:focus-visible):not(:first-child){
-        box-shadow:-1px 0px 0px 0px #aeacae;
-      }
-}
-
-@supports not (selector(:has(:focus-visible))){
-    .viewer-toolbar .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-disabled):focus-within{
-      outline:none;
-      border-color:#aeacae;
-    }
-
-      .viewer-toolbar .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-disabled):focus-within:not(:first-child){
-        box-shadow:-1px 0px 0px 0px #aeacae;
-      }
-}

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

@@ -0,0 +1,148 @@
+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 _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 React, { useEffect } from "react";
+import { activeAxisMap } from "../../shared/types";
+import { DimensionSliderRow, IndexSliderRow, PlaySliderRow } from "./SliderRows";
+var AXES = ["x", "y", "z"];
+export var AxisClipSliders = function AxisClipSliders(props) {
+  var activeAxis = activeAxisMap[props.mode];
+  var pauseOnInput = function pauseOnInput(axis) {
+    // Pause on slider input unless user is scrubbing along the playing axis (playback is held while this is happening)
+    if (!props.playControls.playHolding || props.playingAxis !== axis) {
+      props.playControls.pause();
+    }
+  };
+  var updateRegion = function updateRegion(axis, minval, maxval) {
+    pauseOnInput(axis);
+    var changeViewerSetting = props.changeViewerSetting,
+      numSlices = props.numSlices;
+    // get a value from 0-1
+    var max = numSlices[axis];
+    var start = minval / max;
+    var end = maxval / max;
+    changeViewerSetting("region", _defineProperty({}, axis, [start, end]));
+  };
+  var updateSlice = function updateSlice(axis, slice) {
+    pauseOnInput(axis);
+    props.changeViewerSetting("slice", _defineProperty({}, axis, slice / props.numSlices[axis]));
+  };
+  var updateTime = function updateTime(time) {
+    pauseOnInput("t");
+    props.changeViewerSetting("time", time);
+  };
+
+  // Pause when view mode or volume size has changed
+  useEffect(function () {
+    return props.playControls.pause();
+  }, [props.mode, props.image, props.playControls]);
+  var handlePlayPause = function handlePlayPause(axis, willPlay) {
+    if (willPlay) {
+      props.playControls.play(axis);
+    } else {
+      props.playControls.pause();
+    }
+  };
+  var create2dAxisSlider = function create2dAxisSlider(axis) {
+    var numSlices = props.numSlices[axis];
+    var numSlicesLoaded = props.numSlicesLoaded[axis];
+    return /*#__PURE__*/React.createElement("div", {
+      key: axis + numSlices + numSlicesLoaded,
+      className: "slider-row slider-".concat(axis)
+    }, /*#__PURE__*/React.createElement(PlaySliderRow, {
+      label: axis.toUpperCase(),
+      val: Math.round(props.slices[axis] * numSlices),
+      max: numSlices,
+      onChange: function onChange(val) {
+        return updateSlice(axis, val);
+      },
+      onStart: function onStart() {
+        return props.playControls.startHold(axis);
+      },
+      onEnd: function onEnd() {
+        return props.playControls.endHold();
+      },
+      playing: props.playingAxis === axis,
+      onTogglePlayback: function onTogglePlayback(willPlay) {
+        return handlePlayPause(axis, willPlay);
+      },
+      updateWhileSliding: numSlices === numSlicesLoaded
+    }));
+  };
+  var create3dAxisSlider = function create3dAxisSlider(axis) {
+    var numSlices = props.numSlices[axis];
+    if (numSlices === 1) {
+      return null;
+    }
+    var region = props.region[axis];
+    return /*#__PURE__*/React.createElement("div", {
+      key: axis + numSlices + "3d",
+      className: "slider-row slider-".concat(axis)
+    }, /*#__PURE__*/React.createElement(DimensionSliderRow, {
+      label: axis.toUpperCase(),
+      val: [Math.round(region[0] * numSlices), Math.round(region[1] * numSlices)],
+      min: 0,
+      max: numSlices,
+      onSlide: function onSlide(values) {
+        return updateRegion(axis, values[0], values[1]);
+      },
+      onStart: function onStart() {
+        return props.playControls.startHold(axis);
+      },
+      onEnd: function onEnd() {
+        return props.playControls.endHold();
+      }
+    }));
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: activeAxis ? "clip-sliders clip-sliders-2d" : "clip-sliders"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "slider-group"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "slider-group-title"
+  }, "ROI"), /*#__PURE__*/React.createElement("span", {
+    className: "slider-group-rows"
+  }, activeAxis ? create2dAxisSlider(activeAxis) : AXES.map(create3dAxisSlider))), props.numTimesteps > 1 && /*#__PURE__*/React.createElement("span", {
+    className: "slider-group"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "slider-group-title"
+  }, "Time"), /*#__PURE__*/React.createElement("span", {
+    className: "slider-group-rows"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "slider-row slider-t"
+  }, /*#__PURE__*/React.createElement(PlaySliderRow, {
+    label: "",
+    val: props.time,
+    max: props.numTimesteps,
+    playing: props.playingAxis === "t",
+    onTogglePlayback: function onTogglePlayback(willPlay) {
+      return handlePlayPause("t", willPlay);
+    },
+    onChange: function onChange(time) {
+      return updateTime(time);
+    },
+    onStart: function onStart() {
+      return props.playControls.startHold("t");
+    },
+    onEnd: function onEnd() {
+      return props.playControls.endHold();
+    }
+  })))), props.numScenes > 1 && /*#__PURE__*/React.createElement("span", {
+    className: "slider-group"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "slider-group-title"
+  }, "Scene"), /*#__PURE__*/React.createElement("span", {
+    className: "slider-group-rows"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "slider-row slider-scene"
+  }, /*#__PURE__*/React.createElement(IndexSliderRow, {
+    label: "",
+    val: props.scene,
+    max: props.numScenes,
+    onChange: function onChange(scene) {
+      props.changeViewerSetting("scene", scene);
+      props.changeViewerSetting("useExactScaleLevel", false);
+    }
+  })))));
+};

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

@@ -0,0 +1,165 @@
+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); }
+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 { Button, Space } from "antd";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { applyMatrix, defaultOrientedCamera, getRotationAngles, rotationMatrix, useCameraCallback } from "../../shared/utils/camera";
+import { select, useViewerState } from "../../state/store";
+import { DimensionSliderRow } from "./SliderRows";
+
+/** Convert an angle from degrees to radians */
+var toRadians = function toRadians(deg) {
+  return deg * (Math.PI / 180);
+};
+/** Convert an angle from radians to degrees */
+var toDegrees = function toDegrees(rad) {
+  return rad * (180 / Math.PI);
+};
+export var RotationSliders = function RotationSliders(_ref) {
+  var view3d = _ref.view3d,
+    disable = _ref.disable;
+  var _useState = useState(function () {
+      return getRotationAngles(view3d.getCameraState());
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    rotation = _useState2[0],
+    setRotation = _useState2[1];
+  var autorotate = useViewerState(select("autorotate"));
+  var changeViewerSetting = useViewerState(select("changeViewerSetting"));
+
+  // Set to `true` when user interacts with this component, `false` when they click on the canvas or start autorotate.
+  // While `hasControlRef.current === true`, this component's state propagates *down* to `view3d`
+  // While `hasControlRef.current === false`, `view3d`'s camera state is synced *up* to this component.
+  // TODO are there any other events besides the above that cause the volume to rotate? Ideally this would be an event
+  //   that `View3d` would let us track directly.
+  var hasControlRef = useRef(false);
+  var handleRotate = useCallback(function (axis, deg) {
+    hasControlRef.current = true;
+    if (autorotate) {
+      changeViewerSetting("autorotate", false);
+    }
+    setRotation(function (current) {
+      return _objectSpread(_objectSpread({}, current), {}, _defineProperty({}, axis, toRadians(deg)));
+    });
+  }, [autorotate, changeViewerSetting]);
+  var handleJump = useCallback(function (x, y, z) {
+    hasControlRef.current = true;
+    setRotation({
+      x: x,
+      y: y,
+      z: z
+    });
+  }, []);
+  var jumpXMinus = useCallback(function () {
+    return handleJump(0, -Math.PI / 2, 0);
+  }, [handleJump]);
+  var jumpXPlus = useCallback(function () {
+    return handleJump(0, Math.PI / 2, 0);
+  }, [handleJump]);
+  var jumpYMinus = useCallback(function () {
+    return handleJump(Math.PI / 2, 0, -Math.PI / 2);
+  }, [handleJump]);
+  var jumpYPlus = useCallback(function () {
+    return handleJump(-Math.PI / 2, 0, -Math.PI / 2);
+  }, [handleJump]);
+  var jumpZMinus = useCallback(function () {
+    return handleJump(Math.PI, 0, -Math.PI);
+  }, [handleJump]);
+  var jumpZPlus = useCallback(function () {
+    return handleJump(0, 0, 0);
+  }, [handleJump]);
+
+  // Take away control when autorotate is enabled
+  useEffect(function () {
+    if (autorotate) {
+      hasControlRef.current = false;
+    }
+  }, [autorotate]);
+  var rotateCameraTo = useCameraCallback(function (state, rotation) {
+    var matrix = rotationMatrix(rotation.x, rotation.y, rotation.z);
+    return applyMatrix(defaultOrientedCamera(state), matrix);
+  }, view3d);
+
+  // Sync down rotation state while this component is "in control."
+  useEffect(function () {
+    if (hasControlRef.current) {
+      rotateCameraTo(rotation);
+    }
+  }, [rotateCameraTo, rotation]);
+
+  // 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 () {
+      if (!hasControlRef.current) {
+        setRotation(getRotationAngles(view3d.getCameraState()));
+      }
+    });
+    var clickListener = function clickListener() {
+      return hasControlRef.current = false;
+    };
+    view3d.getDOMElement().addEventListener("mousedown", clickListener);
+    return function () {
+      return view3d.getDOMElement().removeEventListener("mousedown", clickListener);
+    };
+  }, [view3d]);
+  var createRotateSlider = function createRotateSlider(axis) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: "".concat(axis, "-rotate"),
+      className: "slider-row slider-".concat(axis)
+    }, /*#__PURE__*/React.createElement(DimensionSliderRow, {
+      label: axis.toUpperCase(),
+      val: [toDegrees(rotation[axis])],
+      min: -180,
+      max: 180,
+      hideMax: true,
+      onSlide: function onSlide(_ref2) {
+        var _ref3 = _slicedToArray(_ref2, 1),
+          deg = _ref3[0];
+        return handleRotate(axis, deg);
+      },
+      unitSymbol: "\xB0"
+    }));
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "clip-sliders clip-sliders-2d"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "slider-group"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "slider-group-title"
+  }, "Rotate"), disable ? /*#__PURE__*/React.createElement("span", {
+    className: "axis-slider-container"
+  }, /*#__PURE__*/React.createElement("i", null, "Unavailable in 2d mode")) : /*#__PURE__*/React.createElement("span", {
+    className: "slider-group-rows"
+  }, createRotateSlider("x"), createRotateSlider("y"), createRotateSlider("z"))), !disable && /*#__PURE__*/React.createElement("span", {
+    className: "slider-group"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "slider-group-title group-title-extra"
+  }, "Jump to"), /*#__PURE__*/React.createElement("span", {
+    className: "slider-group-rows"
+  }, /*#__PURE__*/React.createElement(Space.Compact, null, /*#__PURE__*/React.createElement(Button, {
+    onClick: jumpXMinus
+  }, "-X"), /*#__PURE__*/React.createElement(Button, {
+    onClick: jumpXPlus
+  }, "+X"), /*#__PURE__*/React.createElement(Button, {
+    onClick: jumpYMinus
+  }, "-Y"), /*#__PURE__*/React.createElement(Button, {
+    onClick: jumpYPlus
+  }, "+Y"), /*#__PURE__*/React.createElement(Button, {
+    onClick: jumpZMinus
+  }, "-Z"), /*#__PURE__*/React.createElement(Button, {
+    onClick: jumpZPlus
+  }, "+Z")))));
+};

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

@@ -0,0 +1,167 @@
+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 _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 _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread 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 _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(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; }
+import { CaretRightOutlined, PauseOutlined } from "@ant-design/icons";
+import { Button, Tooltip } from "antd";
+import React, { useCallback, useState } from "react";
+import NumericInput from "../shared/NumericInput";
+import SmarterSlider from "../shared/SmarterSlider";
+import "./styles.css";
+/** A single slider row, with a slider, one or two spinbox inputs, and a max value. */
+export var DimensionSliderRow = function DimensionSliderRow(_ref) {
+  var label = _ref.label,
+    val = _ref.val,
+    _ref$valReadout = _ref.valReadout,
+    valReadout = _ref$valReadout === void 0 ? val : _ref$valReadout,
+    min = _ref.min,
+    max = _ref.max,
+    hideMax = _ref.hideMax,
+    unitSymbol = _ref.unitSymbol,
+    onSlide = _ref.onSlide,
+    _ref$onChange = _ref.onChange,
+    _onChange = _ref$onChange === void 0 ? onSlide : _ref$onChange,
+    onStart = _ref.onStart,
+    onEnd = _ref.onEnd;
+  return /*#__PURE__*/React.createElement("span", {
+    className: "axis-slider-container"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "slider-name"
+  }, label), max <= min ? /*#__PURE__*/React.createElement("i", null, "No values to adjust") : /*#__PURE__*/React.createElement("span", {
+    className: "axis-slider"
+  }, /*#__PURE__*/React.createElement(SmarterSlider, {
+    className: val.length <= 1 ? "slider-single-handle" : "",
+    connect: true,
+    range: {
+      min: min,
+      max: max
+    },
+    start: val,
+    step: 1,
+    margin: 1,
+    behaviour: "drag",
+    pips: {
+      mode: "positions",
+      values: [25, 50, 75],
+      density: 25,
+      format: {
+        // remove labels from pips
+        to: function to() {
+          return "";
+        }
+      }
+    }
+    // round slider output to nearest slice; assume any string inputs represent ints
+    ,
+    format: {
+      to: Math.round,
+      from: parseInt
+    },
+    onSlide: onSlide,
+    onChange: _onChange,
+    onStart: onStart,
+    onEnd: onEnd
+  })), max > min && /*#__PURE__*/React.createElement("span", {
+    className: "slider-values"
+  }, /*#__PURE__*/React.createElement(NumericInput, {
+    min: min,
+    max: max,
+    value: valReadout[0],
+    onChange: function onChange(value) {
+      return _onChange === null || _onChange === void 0 ? void 0 : _onChange([value].concat(_toConsumableArray(val.slice(1))));
+    },
+    unitSymbol: unitSymbol
+  }), val.length > 1 && /*#__PURE__*/React.createElement(React.Fragment, null, " , ", /*#__PURE__*/React.createElement(NumericInput, {
+    min: min,
+    max: max,
+    value: valReadout[1],
+    onChange: function onChange(value) {
+      return _onChange === null || _onChange === void 0 ? void 0 : _onChange([val[0], value].concat(_toConsumableArray(val.slice(2))));
+    },
+    unitSymbol: unitSymbol
+  })), !hideMax && /*#__PURE__*/React.createElement(React.Fragment, null, " / ", max)));
+};
+
+/** Extremely thin wrapper around `SliderRow` for adjusting 0-indexed values that the user should see as 1-indexed. */
+export var IndexSliderRow = function IndexSliderRow(props) {
+  return /*#__PURE__*/React.createElement(DimensionSliderRow, {
+    label: props.label,
+    val: [props.val + 1],
+    valReadout: props.valReadout === undefined ? undefined : [props.valReadout + 1],
+    min: 1,
+    max: props.max,
+    onSlide: function onSlide(_ref2) {
+      var _props$onSlide;
+      var _ref3 = _slicedToArray(_ref2, 1),
+        value = _ref3[0];
+      return (_props$onSlide = props.onSlide) === null || _props$onSlide === void 0 ? void 0 : _props$onSlide.call(props, value - 1);
+    },
+    onChange: function onChange(_ref4) {
+      var _props$onChange;
+      var _ref5 = _slicedToArray(_ref4, 1),
+        value = _ref5[0];
+      return (_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.call(props, value - 1);
+    },
+    onStart: props.onStart,
+    onEnd: props.onEnd
+  });
+};
+
+/** 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,
+    onStart = props.onStart,
+    onEnd = props.onEnd;
+  // In partially-loaded axes, stores the displayed value of the slider while the user is sliding it
+  var _useState = useState(props.val),
+    _useState2 = _slicedToArray(_useState, 2),
+    valReadout = _useState2[0],
+    setValReadout = _useState2[1];
+  // Tracks when the user is sliding the slider and `valReadout` may have to sub in for props
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    sliderHeld = _useState4[0],
+    setSliderHeld = _useState4[1];
+  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 wrappedOnStart = useCallback(function () {
+    setValReadout(props.val);
+    setSliderHeld(true);
+    onStart === null || onStart === void 0 || onStart();
+  }, [onStart, props.val]);
+  var wrappedOnEnd = useCallback(function () {
+    setSliderHeld(false);
+    onEnd === null || onEnd === void 0 || onEnd();
+  }, [onEnd]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IndexSliderRow, {
+    label: props.label,
+    val: props.val,
+    valReadout: props.updateWhileSliding || !sliderHeld ? undefined : valReadout,
+    max: props.max,
+    onSlide: props.updateWhileSliding ? wrappedOnChange : wrappedSetValReadout,
+    onChange: props.updateWhileSliding ? undefined : wrappedOnChange,
+    onStart: wrappedOnStart,
+    onEnd: wrappedOnEnd
+  }), props.max > 1 && /*#__PURE__*/React.createElement(Tooltip, {
+    placement: "top",
+    title: "Play through sequence",
+    trigger: ["hover", "focus"]
+  }, /*#__PURE__*/React.createElement(Button, {
+    className: "slider-play-button",
+    onClick: function onClick() {
+      return props.onTogglePlayback(!props.playing);
+    },
+    icon: props.playing ? /*#__PURE__*/React.createElement(PauseOutlined, null) : /*#__PURE__*/React.createElement(CaretRightOutlined, null),
+    "aria-label": (props.playing ? "Pause " : "Play ") + props.label
+  })));
+};