@vitessce/all 3.2.0 → 3.2.2

package/dist/{deflate-6b735acc.js → deflate-432aacfa.js}

@@ -1,5 +1,5 @@
 import { i as inflate_1 } from "./pako.esm-68f84e2a.js";
-import { B as BaseDecoder } from "./index-d4cd1fef.js";
+import { B as BaseDecoder } from "./index-f665a5d4.js";
 import "react";
 import "@vitessce/vit-s";
 import "react-dom";

package/dist/{hglib-2b8cd9d8.js → hglib-1bae5754.js}

@@ -1,6 +1,6 @@
 import React__default from "react";
 import ReactDOM__default from "react-dom";
-import { c as commonjsGlobal, o as objectAssign, g as getDefaultExportFromCjs, e as earcut, b as getAugmentedNamespace } from "./index-d4cd1fef.js";
+import { c as commonjsGlobal, o as objectAssign, g as getDefaultExportFromCjs, e as earcut, b as getAugmentedNamespace } from "./index-f665a5d4.js";
 function _mergeNamespaces(n, m) {
   for (var i = 0; i < m.length; i++) {
     const e = m[i];

package/dist/{index-d4cd1fef.js → index-f665a5d4.js}

@@ -5,7 +5,7 @@ var __publicField = (obj, key2, value2) => {
   return value2;
 };
 import * as React from "react";
-import React__default, { Children, isValidElement, cloneElement, useMemo, forwardRef, useRef, useImperativeHandle, useEffect, useLayoutEffect as useLayoutEffect$1, useState, PureComponent, Component as Component$1, useCallback, createElement, useId, useReducer, Suspense } from "react";
+import React__default, { Children, isValidElement, cloneElement, useMemo, forwardRef, useRef, useImperativeHandle, useEffect, useLayoutEffect as useLayoutEffect$1, useState, PureComponent, Component as Component$1, useCallback, createElement, useContext, useReducer, Suspense } from "react";
 import { useLoaders, useCoordination, useDescription, useImageData, useReady, TitleInfo, useVitessceContainer, useSetWarning, useObsSetsData, useUrls, usePlotOptionsStyles, OptionsContainer, CellColorEncodingOption, OptionSelect, useComponentHover, useComponentViewInfo, useSetComponentHover, useSetComponentViewInfo, useInitialCoordination, useDeckCanvasSize, useMultiObsLabels, useObsEmbeddingData, useFeatureSelection, useObsFeatureMatrixIndices, useFeatureLabelsData, useGetObsInfo, useUint8FeatureSelection, useExpressionValueGetter, useAuxiliaryCoordination, useHasLoader, useObsLocationsData, useObsLabelsData, useObsSegmentationsData, useNeighborhoodsData, useCoordinationScopes, useCoordinationScopesBy, useMultiCoordinationScopesSecondaryNonNull, useMultiCoordinationScopesNonNull, useComplexCoordination, useComplexCoordinationSecondary, useMultiObsPoints, usePointMultiObsLabels, useMultiObsSpots, useSpotMultiObsSets, useSpotMultiFeatureSelection, useSpotMultiObsFeatureMatrixIndices, useSegmentationMultiObsLocations, useMultiObsSegmentations, useSegmentationMultiObsSets, useSegmentationMultiFeatureSelection, useSegmentationMultiObsFeatureMatrixIndices, useMultiImages, useObsFeatureMatrixData, useUint8ObsFeatureMatrix, useGetObsMembership, PopperMenu, useComponentLayout, useClosestVitessceContainerSize, useWindowDimensions, useRemoveImageChannelInMetaCoordinationScopes, useAddImageChannelInMetaCoordinationScopes, useWarning, useGridItemSize, useGenomicProfilesData, DataSourceFetchError, AbstractLoaderError, AbstractTwoStepLoader, LoaderResult, LoaderValidationError, logConfig, VitS } from "@vitessce/vit-s";
 import * as ReactDOM from "react-dom";
 import ReactDOM__default from "react-dom";
@@ -155975,16 +155975,16 @@ async function getDecoder(fileDirectory) {
   const Decoder = await importFn();
   return new Decoder(fileDirectory);
 }
-addDecoder([void 0, 1], () => import("./raw-ed9deb25.js").then((m2) => m2.default));
-addDecoder(5, () => import("./lzw-2b4715b3.js").then((m2) => m2.default));
+addDecoder([void 0, 1], () => import("./raw-8dc223b5.js").then((m2) => m2.default));
+addDecoder(5, () => import("./lzw-b35f334d.js").then((m2) => m2.default));
 addDecoder(6, () => {
   throw new Error("old style JPEG compression is not supported.");
 });
-addDecoder(7, () => import("./jpeg-3b40fe93.js").then((m2) => m2.default));
-addDecoder([8, 32946], () => import("./deflate-6b735acc.js").then((m2) => m2.default));
-addDecoder(32773, () => import("./packbits-494352d8.js").then((m2) => m2.default));
-addDecoder(34887, () => import("./lerc-e0d6f9e6.js").then((m2) => m2.default));
-addDecoder(50001, () => import("./webimage-f9e0ebc3.js").then((m2) => m2.default));
+addDecoder(7, () => import("./jpeg-b55e77c5.js").then((m2) => m2.default));
+addDecoder([8, 32946], () => import("./deflate-432aacfa.js").then((m2) => m2.default));
+addDecoder(32773, () => import("./packbits-6e275aa4.js").then((m2) => m2.default));
+addDecoder(34887, () => import("./lerc-2523b21e.js").then((m2) => m2.default));
+addDecoder(50001, () => import("./webimage-917679ff.js").then((m2) => m2.default));
 function copyNewSize(array2, width2, height2, samplesPerPixel = 1) {
   return new (Object.getPrototypeOf(array2)).constructor(width2 * height2 * samplesPerPixel);
 }
@@ -170522,6 +170522,67 @@ function makeBoundingBox(viewState) {
     viewport.unproject([0, viewport.height])
   ];
 }
+const TARGETS = [1, 2, 3, 4, 5, 10, 20, 25, 50, 100, 200, 250, 500, 1e3];
+const MIN_TARGET = TARGETS[0];
+const MAX_TARGET = TARGETS[TARGETS.length - 1];
+const SI_PREFIXES = [
+  { symbol: "Y", exponent: 24 },
+  { symbol: "Z", exponent: 21 },
+  { symbol: "E", exponent: 18 },
+  { symbol: "P", exponent: 15 },
+  { symbol: "T", exponent: 12 },
+  { symbol: "G", exponent: 9 },
+  { symbol: "M", exponent: 6 },
+  { symbol: "k", exponent: 3 },
+  { symbol: "h", exponent: 2 },
+  { symbol: "da", exponent: 1 },
+  { symbol: "", exponent: 0 },
+  { symbol: "d", exponent: -1 },
+  { symbol: "c", exponent: -2 },
+  { symbol: "m", exponent: -3 },
+  { symbol: "µ", exponent: -6 },
+  { symbol: "n", exponent: -9 },
+  { symbol: "p", exponent: -12 },
+  { symbol: "f", exponent: -15 },
+  { symbol: "a", exponent: -18 },
+  { symbol: "z", exponent: -21 },
+  { symbol: "y", exponent: -24 }
+];
+function sizeToMeters(size2, unit2) {
+  if (!unit2 || unit2 === "m") {
+    return size2;
+  }
+  if (unit2.length > 1) {
+    let unitPrefix = unit2.substring(0, unit2.length - 1);
+    if (unitPrefix === "u") {
+      unitPrefix = "µ";
+    }
+    const unitObj = SI_PREFIXES.find((p) => p.symbol === unitPrefix);
+    if (unitObj) {
+      return size2 * 10 ** unitObj.exponent;
+    }
+  }
+  throw new Error("Received unknown unit");
+}
+function snapValue(value2) {
+  let magnitude = 0;
+  if (value2 < MIN_TARGET || value2 > MAX_TARGET) {
+    magnitude = Math.floor(Math.log10(value2));
+  }
+  let snappedUnit = SI_PREFIXES.find(
+    (p) => p.exponent % 3 === 0 && p.exponent <= magnitude
+  );
+  let adjustedValue = value2 / 10 ** snappedUnit.exponent;
+  if (adjustedValue > 500 && adjustedValue <= 1e3) {
+    snappedUnit = SI_PREFIXES.find(
+      (p) => p.exponent % 3 === 0 && p.exponent <= magnitude + 3
+    );
+    adjustedValue = value2 / 10 ** snappedUnit.exponent;
+  }
+  const targetNewUnits = TARGETS.find((t4) => t4 > adjustedValue);
+  const targetOrigUnits = targetNewUnits * 10 ** snappedUnit.exponent;
+  return [targetOrigUnits, targetNewUnits, snappedUnit.symbol];
+}
 const fs$1$1 = `#define SHADER_NAME xr-layer-fragment-shader
 
 precision highp float;
@@ -171289,26 +171350,27 @@ const OverviewLayer = class extends CompositeLayer {
 OverviewLayer.layerName = "OverviewLayer";
 OverviewLayer.defaultProps = defaultProps$3;
 function getPosition$1(boundingBox, position2, length2) {
-  const viewLength = boundingBox[2][0] - boundingBox[0][0];
+  const viewWidth2 = boundingBox[2][0] - boundingBox[0][0];
+  const viewHeight2 = boundingBox[2][1] - boundingBox[0][1];
   switch (position2) {
     case "bottom-right": {
-      const yCoord = boundingBox[2][1] - (boundingBox[2][1] - boundingBox[0][1]) * length2;
-      const xLeftCoord = boundingBox[2][0] - viewLength * length2;
+      const yCoord = boundingBox[2][1] - viewHeight2 * length2;
+      const xLeftCoord = boundingBox[2][0] - viewWidth2 * length2;
       return [yCoord, xLeftCoord];
     }
     case "top-right": {
-      const yCoord = (boundingBox[2][1] - boundingBox[0][1]) * length2;
-      const xLeftCoord = boundingBox[2][0] - viewLength * length2;
+      const yCoord = boundingBox[0][1] + viewHeight2 * length2;
+      const xLeftCoord = boundingBox[2][0] - viewWidth2 * length2;
       return [yCoord, xLeftCoord];
     }
     case "top-left": {
-      const yCoord = (boundingBox[2][1] - boundingBox[0][1]) * length2;
-      const xLeftCoord = viewLength * length2;
+      const yCoord = boundingBox[0][1] + viewHeight2 * length2;
+      const xLeftCoord = boundingBox[0][0] + viewWidth2 * length2;
       return [yCoord, xLeftCoord];
     }
     case "bottom-left": {
-      const yCoord = boundingBox[2][1] - (boundingBox[2][1] - boundingBox[0][1]) * length2;
-      const xLeftCoord = viewLength * length2;
+      const yCoord = boundingBox[2][1] - viewHeight2 * length2;
+      const xLeftCoord = boundingBox[0][0] + viewWidth2 * length2;
       return [yCoord, xLeftCoord];
     }
     default: {
@@ -171326,11 +171388,12 @@ const defaultProps$2 = {
   unit: { type: "string", value: "", compare: true },
   size: { type: "number", value: 1, compare: true },
   position: { type: "string", value: "bottom-right", compare: true },
-  length: { type: "number", value: 0.085, compare: true }
+  length: { type: "number", value: 0.085, compare: true },
+  snap: { type: "boolean", value: false, compare: true }
 };
 const ScaleBarLayer = class extends CompositeLayer {
   renderLayers() {
-    const { id: id2, unit: unit2, size: size2, position: position2, viewState, length: length2 } = this.props;
+    const { id: id2, unit: unit2, size: size2, position: position2, viewState, length: length2, snap } = this.props;
     const boundingBox = makeBoundingBox(viewState);
     const { zoom: zoom2 } = viewState;
     const viewLength = boundingBox[2][0] - boundingBox[0][0];
@@ -171339,15 +171402,27 @@ const ScaleBarLayer = class extends CompositeLayer {
       2 ** (-zoom2 + 1.5),
       (boundingBox[2][1] - boundingBox[0][1]) * 7e-3
     );
-    const numUnits = barLength * size2;
+    let adjustedBarLength = barLength;
+    let displayNumber = (barLength * size2).toPrecision(5);
+    let displayUnit = unit2;
+    if (snap) {
+      const meterSize = sizeToMeters(size2, unit2);
+      const numUnits = barLength * meterSize;
+      const [snappedOrigUnits, snappedNewUnits, snappedUnitPrefix] = snapValue(numUnits);
+      adjustedBarLength = snappedOrigUnits / meterSize;
+      displayNumber = snappedNewUnits;
+      displayUnit = `${snappedUnitPrefix}m`;
+    }
     const [yCoord, xLeftCoord] = getPosition$1(boundingBox, position2, length2);
+    const xRightCoord = xLeftCoord + barLength;
+    const isLeft = position2.endsWith("-left");
     const lengthBar = new LineLayer({
       id: `scale-bar-length-${id2}`,
       coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
       data: [
         [
-          [xLeftCoord, yCoord],
-          [xLeftCoord + barLength, yCoord]
+          [isLeft ? xLeftCoord : xRightCoord - adjustedBarLength, yCoord],
+          [isLeft ? xLeftCoord + adjustedBarLength : xRightCoord, yCoord]
         ]
       ],
       getSourcePosition: (d) => d[0],
@@ -171360,8 +171435,14 @@ const ScaleBarLayer = class extends CompositeLayer {
       coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
       data: [
         [
-          [xLeftCoord, yCoord - barHeight],
-          [xLeftCoord, yCoord + barHeight]
+          [
+            isLeft ? xLeftCoord : xRightCoord - adjustedBarLength,
+            yCoord - barHeight
+          ],
+          [
+            isLeft ? xLeftCoord : xRightCoord - adjustedBarLength,
+            yCoord + barHeight
+          ]
         ]
       ],
       getSourcePosition: (d) => d[0],
@@ -171374,8 +171455,14 @@ const ScaleBarLayer = class extends CompositeLayer {
       coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
       data: [
         [
-          [xLeftCoord + barLength, yCoord - barHeight],
-          [xLeftCoord + barLength, yCoord + barHeight]
+          [
+            isLeft ? xLeftCoord + adjustedBarLength : xRightCoord,
+            yCoord - barHeight
+          ],
+          [
+            isLeft ? xLeftCoord + adjustedBarLength : xRightCoord,
+            yCoord + barHeight
+          ]
         ]
       ],
       getSourcePosition: (d) => d[0],
@@ -171388,8 +171475,11 @@ const ScaleBarLayer = class extends CompositeLayer {
       coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
       data: [
         {
-          text: numUnits.toPrecision(5) + unit2,
-          position: [xLeftCoord + barLength * 0.5, yCoord + barHeight * 4]
+          text: `${displayNumber}${displayUnit}`,
+          position: [
+            isLeft ? xLeftCoord + barLength * 0.5 : xRightCoord - barLength * 0.5,
+            yCoord + barHeight * 4
+          ]
         }
       ],
       getColor: [220, 220, 220, 255],
@@ -171398,7 +171488,7 @@ const ScaleBarLayer = class extends CompositeLayer {
       sizeUnits: "meters",
       sizeScale: 2 ** -zoom2,
       characterSet: [
-        ...unit2.split(""),
+        ...displayUnit.split(""),
         ...range$5(10).map((i2) => String(i2)),
         ".",
         "e",
@@ -173717,9 +173807,135 @@ class Scatterplot extends AbstractSpatialOrScatterplot {
 }
 const ScatterplotWrapper = forwardRef((props2, deckRef) => jsxRuntimeExports.jsx(Scatterplot, { ...props2, deckRef }));
 ScatterplotWrapper.displayName = "ScatterplotWrapper";
+const $b5e257d569688ac6$var$defaultContext = {
+  prefix: String(Math.round(Math.random() * 1e10)),
+  current: 0
+};
+const $b5e257d569688ac6$var$SSRContext = /* @__PURE__ */ React__default.createContext($b5e257d569688ac6$var$defaultContext);
+const $b5e257d569688ac6$var$IsSSRContext = /* @__PURE__ */ React__default.createContext(false);
+let $b5e257d569688ac6$var$canUseDOM = Boolean(typeof window !== "undefined" && window.document && window.document.createElement);
+let $b5e257d569688ac6$var$componentIds = /* @__PURE__ */ new WeakMap();
+function $b5e257d569688ac6$var$useCounter(isDisabled = false) {
+  let ctx2 = useContext($b5e257d569688ac6$var$SSRContext);
+  let ref2 = useRef(null);
+  if (ref2.current === null && !isDisabled) {
+    var _React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, _React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED_ReactCurrentOwner;
+    let currentOwner = (_React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = React__default.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED) === null || _React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED === void 0 ? void 0 : (_React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED_ReactCurrentOwner = _React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner) === null || _React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED_ReactCurrentOwner === void 0 ? void 0 : _React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED_ReactCurrentOwner.current;
+    if (currentOwner) {
+      let prevComponentValue = $b5e257d569688ac6$var$componentIds.get(currentOwner);
+      if (prevComponentValue == null)
+        $b5e257d569688ac6$var$componentIds.set(currentOwner, {
+          id: ctx2.current,
+          state: currentOwner.memoizedState
+        });
+      else if (currentOwner.memoizedState !== prevComponentValue.state) {
+        ctx2.current = prevComponentValue.id;
+        $b5e257d569688ac6$var$componentIds.delete(currentOwner);
+      }
+    }
+    ref2.current = ++ctx2.current;
+  }
+  return ref2.current;
+}
+function $b5e257d569688ac6$var$useLegacySSRSafeId(defaultId2) {
+  let ctx2 = useContext($b5e257d569688ac6$var$SSRContext);
+  if (ctx2 === $b5e257d569688ac6$var$defaultContext && !$b5e257d569688ac6$var$canUseDOM)
+    console.warn("When server rendering, you must wrap your application in an <SSRProvider> to ensure consistent ids are generated between the client and server.");
+  let counter2 = $b5e257d569688ac6$var$useCounter(!!defaultId2);
+  let prefix2 = ctx2 === $b5e257d569688ac6$var$defaultContext && false ? "react-aria" : `react-aria${ctx2.prefix}`;
+  return defaultId2 || `${prefix2}-${counter2}`;
+}
+function $b5e257d569688ac6$var$useModernSSRSafeId(defaultId2) {
+  let id2 = React__default.useId();
+  let [didSSR] = useState($b5e257d569688ac6$export$535bd6ca7f90a273());
+  let prefix2 = didSSR || false ? "react-aria" : `react-aria${$b5e257d569688ac6$var$defaultContext.prefix}`;
+  return defaultId2 || `${prefix2}-${id2}`;
+}
+const $b5e257d569688ac6$export$619500959fc48b26 = typeof React__default["useId"] === "function" ? $b5e257d569688ac6$var$useModernSSRSafeId : $b5e257d569688ac6$var$useLegacySSRSafeId;
+function $b5e257d569688ac6$var$getSnapshot() {
+  return false;
+}
+function $b5e257d569688ac6$var$getServerSnapshot() {
+  return true;
+}
+function $b5e257d569688ac6$var$subscribe(onStoreChange) {
+  return () => {
+  };
+}
+function $b5e257d569688ac6$export$535bd6ca7f90a273() {
+  if (typeof React__default["useSyncExternalStore"] === "function")
+    return React__default["useSyncExternalStore"]($b5e257d569688ac6$var$subscribe, $b5e257d569688ac6$var$getSnapshot, $b5e257d569688ac6$var$getServerSnapshot);
+  return useContext($b5e257d569688ac6$var$IsSSRContext);
+}
+const $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c = typeof document !== "undefined" ? React__default.useLayoutEffect : () => {
+};
+let $bdb11010cef70236$var$idsUpdaterMap = /* @__PURE__ */ new Map();
+function $bdb11010cef70236$export$f680877a34711e37(defaultId2) {
+  let [value2, setValue] = useState(defaultId2);
+  let nextId = useRef(null);
+  let res = $b5e257d569688ac6$export$619500959fc48b26(value2);
+  let updateValue = useCallback((val) => {
+    nextId.current = val;
+  }, []);
+  $bdb11010cef70236$var$idsUpdaterMap.set(res, updateValue);
+  $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c(() => {
+    let r3 = res;
+    return () => {
+      $bdb11010cef70236$var$idsUpdaterMap.delete(r3);
+    };
+  }, [
+    res
+  ]);
+  useEffect(() => {
+    let newId = nextId.current;
+    if (newId) {
+      nextId.current = null;
+      setValue(newId);
+    }
+  });
+  return res;
+}
+let $bbed8b41f857bcc0$var$transitionsByElement = /* @__PURE__ */ new Map();
+let $bbed8b41f857bcc0$var$transitionCallbacks = /* @__PURE__ */ new Set();
+function $bbed8b41f857bcc0$var$setupGlobalEvents() {
+  if (typeof window === "undefined")
+    return;
+  let onTransitionStart = (e3) => {
+    let transitions2 = $bbed8b41f857bcc0$var$transitionsByElement.get(e3.target);
+    if (!transitions2) {
+      transitions2 = /* @__PURE__ */ new Set();
+      $bbed8b41f857bcc0$var$transitionsByElement.set(e3.target, transitions2);
+      e3.target.addEventListener("transitioncancel", onTransitionEnd);
+    }
+    transitions2.add(e3.propertyName);
+  };
+  let onTransitionEnd = (e3) => {
+    let properties = $bbed8b41f857bcc0$var$transitionsByElement.get(e3.target);
+    if (!properties)
+      return;
+    properties.delete(e3.propertyName);
+    if (properties.size === 0) {
+      e3.target.removeEventListener("transitioncancel", onTransitionEnd);
+      $bbed8b41f857bcc0$var$transitionsByElement.delete(e3.target);
+    }
+    if ($bbed8b41f857bcc0$var$transitionsByElement.size === 0) {
+      for (let cb of $bbed8b41f857bcc0$var$transitionCallbacks)
+        cb();
+      $bbed8b41f857bcc0$var$transitionCallbacks.clear();
+    }
+  };
+  document.body.addEventListener("transitionrun", onTransitionStart);
+  document.body.addEventListener("transitionend", onTransitionEnd);
+}
+if (typeof document !== "undefined") {
+  if (document.readyState !== "loading")
+    $bbed8b41f857bcc0$var$setupGlobalEvents();
+  else
+    document.addEventListener("DOMContentLoaded", $bbed8b41f857bcc0$var$setupGlobalEvents);
+}
 function ScatterplotOptions(props2) {
   const { children: children2, observationsLabel, cellRadius, setCellRadius, cellRadiusMode, setCellRadiusMode, cellOpacity, setCellOpacity, cellOpacityMode, setCellOpacityMode, cellSetLabelsVisible, setCellSetLabelsVisible, tooltipsVisible, setTooltipsVisible, cellSetLabelSize, setCellSetLabelSize, cellSetPolygonsVisible, setCellSetPolygonsVisible, cellColorEncoding, setCellColorEncoding, geneExpressionColormap, setGeneExpressionColormap, geneExpressionColormapRange, setGeneExpressionColormapRange } = props2;
-  const scatterplotOptionsId = useId();
+  const scatterplotOptionsId = $bdb11010cef70236$export$f680877a34711e37();
   const observationsLabelNice = capitalize$2(observationsLabel);
   const classes = usePlotOptionsStyles();
   function handleCellRadiusModeChange(event2) {
@@ -176244,7 +176460,7 @@ function EmbeddingScatterplotSubscriber(props2) {
 }
 function GatingScatterplotOptions(props2) {
   const { featureType, gatingFeatureSelectionX, setGatingFeatureSelectionX, gatingFeatureSelectionY, setGatingFeatureSelectionY, gatingFeatureValueTransform, setGatingFeatureValueTransform, gatingFeatureValueTransformCoefficient, setGatingFeatureValueTransformCoefficient, geneSelectOptions, transformOptions } = props2;
-  const gatingScatterplotOptionsId = useId();
+  const gatingScatterplotOptionsId = $bdb11010cef70236$export$f680877a34711e37();
   const classes = usePlotOptionsStyles();
   const handleGeneSelectChange = (event2) => {
     const { options } = event2.target;
@@ -192388,6 +192604,7 @@ let Spatial$1 = class Spatial extends AbstractSpatialOrScatterplot {
           id: "scalebar-layer",
           unit: unit2,
           size: size2,
+          snap: true,
           viewState: { ...viewState, width: width2, height: height2 }
         });
       }
@@ -192735,7 +192952,7 @@ const useToggleStyles = makeStyles(() => ({
   }
 }));
 const ToggleFixedAxisButton = ({ setSpatialAxisFixed, spatialAxisFixed, use3d }) => {
-  const toggleAxisId = useId();
+  const toggleAxisId = $bdb11010cef70236$export$f680877a34711e37();
   const classes = useToggleStyles();
   return jsxRuntimeExports.jsxs(TableRow$1, { children: [jsxRuntimeExports.jsx(TableCell$1, { className: classes.cameraLabel, variant: "head", scope: "row", children: jsxRuntimeExports.jsx("label", { htmlFor: `spatial-camera-axis-${toggleAxisId}`, children: "Fix Camera Axis" }) }), jsxRuntimeExports.jsx(TableCell$1, { className: classes.toggleBox, variant: "body", children: jsxRuntimeExports.jsx(Checkbox$1, { onClick: () => setSpatialAxisFixed(!spatialAxisFixed), disabled: !use3d, checked: Boolean(spatialAxisFixed), inputProps: {
     "aria-label": "Fix or not fix spatial camera axis",
@@ -192744,7 +192961,7 @@ const ToggleFixedAxisButton = ({ setSpatialAxisFixed, spatialAxisFixed, use3d })
 };
 function SpatialOptions(props2) {
   const { observationsLabel, cellColorEncoding, setCellColorEncoding, setSpatialAxisFixed, spatialAxisFixed, use3d, tooltipsVisible, setTooltipsVisible, geneExpressionColormap, setGeneExpressionColormap, geneExpressionColormapRange, setGeneExpressionColormapRange, canShowExpressionOptions, canShowColorEncodingOption, canShow3DOptions } = props2;
-  const spatialOptionsId = useId();
+  const spatialOptionsId = $bdb11010cef70236$export$f680877a34711e37();
   function handleGeneExpressionColormapChange(event2) {
     setGeneExpressionColormap(event2.target.value);
   }
@@ -193585,6 +193802,7 @@ class Spatial2 extends AbstractSpatialOrScatterplot {
       id: "scalebar-layer",
       unit: "um",
       size: 1,
+      snap: true,
       viewState: { ...viewState, width: width2, height: height2 }
     });
   }
@@ -195730,7 +195948,7 @@ function HeatmapTooltipSubscriber(props2) {
 function HeatmapOptions(props2) {
   const { geneExpressionColormap, setGeneExpressionColormap, geneExpressionColormapRange, setGeneExpressionColormapRange, tooltipsVisible, setTooltipsVisible } = props2;
   const classes = usePlotOptionsStyles();
-  const heatmapOptionsId = useId();
+  const heatmapOptionsId = $bdb11010cef70236$export$f680877a34711e37();
   function handleGeneExpressionColormapChange(event2) {
     setGeneExpressionColormap(event2.target.value);
   }
@@ -200222,7 +200440,7 @@ function FeatureList(props2) {
 }
 function FeatureListOptions(props2) {
   const { children: children2, featureListSort, setFeatureListSort, featureListSortKey, setFeatureListSortKey, showFeatureTable, setShowFeatureTable, hasFeatureLabels, primaryColumnName } = props2;
-  const featureListId = useId();
+  const featureListId = $bdb11010cef70236$export$f680877a34711e37();
   function handleFeatureListSortChange(event2) {
     setFeatureListSort(event2.target.value);
   }
@@ -200672,11 +200890,11 @@ function LayerOptions({ colormap, opacity: opacity2, handleColormapChange, handl
   const hasViewableResolutions = Boolean(Array.from({
     length: loader2.data.length
   }).filter((_, res) => canLoadResolution(loader2.data, res)).length);
-  const globalSelectionSliderId = useId();
-  const colormapSelectId = useId();
-  const domainSelectorId = useId();
-  const opacitySliderId = useId();
-  const zeroTransparentId = useId();
+  const globalSelectionSliderId = $bdb11010cef70236$export$f680877a34711e37();
+  const colormapSelectId = $bdb11010cef70236$export$f680877a34711e37();
+  const domainSelectorId = $bdb11010cef70236$export$f680877a34711e37();
+  const opacitySliderId = $bdb11010cef70236$export$f680877a34711e37();
+  const zeroTransparentId = $bdb11010cef70236$export$f680877a34711e37();
   return jsxRuntimeExports.jsxs(Grid$3, { container: true, direction: "column", style: { width: "100%" }, children: [hasZStack && !disable3d && hasViewableResolutions && jsxRuntimeExports.jsx(VolumeDropdown, { loader: loader2, handleSliderChange, handleDomainChange, channels: channels2, handleMultiPropertyChange, resolution, disable3d, setRasterLayerCallback, setAreAllChannelsLoading, setViewState, spatialHeight, spatialWidth, use3d, modelMatrix: modelMatrix2 }), hasDimensionsAndChannels && !use3d && globalControlLabels.map((field2) => shape2[labels2.indexOf(field2)] > 1 && jsxRuntimeExports.jsx(LayerOption, { name: field2, inputId: `${field2}-${globalSelectionSliderId}`, children: jsxRuntimeExports.jsx(GlobalSelectionSlider, { field: field2, inputId: `${field2}-${globalSelectionSliderId}`, value: globalLabelValues[field2], handleChange: handleGlobalChannelsSelectionChange, possibleValues: range$b(shape2[labels2.indexOf(field2)]) }) }, field2)), !disableChannelsIfRgbDetected ? jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [shouldShowColormap && jsxRuntimeExports.jsx(Grid$3, { item: true, children: jsxRuntimeExports.jsx(LayerOption, { name: "Colormap", inputId: colormapSelectId, children: jsxRuntimeExports.jsx(ColormapSelect, { value: colormap || "", inputId: colormapSelectId, handleChange: handleColormapChange }) }) }), shouldShowDomain && jsxRuntimeExports.jsx(Grid$3, { item: true, children: jsxRuntimeExports.jsx(LayerOption, { name: "Domain", inputId: domainSelectorId, children: jsxRuntimeExports.jsx(SliderDomainSelector, { value: domainType || DEFAULT_RASTER_DOMAIN_TYPE, inputId: domainSelectorId, handleChange: (value2) => {
     handleDomainChange(value2);
   } }) }) })] }) : null, !use3d && jsxRuntimeExports.jsx(Grid$3, { item: true, children: jsxRuntimeExports.jsx(LayerOption, { name: "Opacity", inputId: opacitySliderId, children: jsxRuntimeExports.jsx(OpacitySlider, { value: opacity2, handleChange: handleOpacityChange, inputId: opacitySliderId }) }) }), shouldShowTransparentColor && !use3d && jsxRuntimeExports.jsx(Grid$3, { item: true, children: jsxRuntimeExports.jsx(LayerOption, { name: "Zero Transparent", inputId: zeroTransparentId, children: jsxRuntimeExports.jsx(TransparentColorCheckbox, { value: transparentColor, handleChange: handleTransparentColorChange, inputId: zeroTransparentId }) }) })] });
@@ -200779,7 +200997,7 @@ function LayerController$1(props2) {
     channelRef.current = channels2;
     return void 0;
   }, [channels2]);
-  const layerControlsId = useId();
+  const layerControlsId = $bdb11010cef70236$export$f680877a34711e37();
   const firstSelection = ((_a2 = channels2[0]) == null ? void 0 : _a2.selection) || {};
   const { data: data2, channels: channelOptions } = loader2;
   const [tab, setTab] = useState(0);
@@ -201419,13 +201637,13 @@ function SpotLayerEllipsisMenu(props2) {
   useStyles$c();
   const selectClasses = useSelectStyles();
   const menuClasses = useEllipsisMenuStyles();
-  const filledId = useId();
-  const strokeWidthId = useId();
-  const quantitativeColormapId = useId();
-  const colormapRangeId = useId();
-  const tooltipsVisibleId = useId();
-  const crosshairsVisibleId = useId();
-  const legendVisibleId = useId();
+  const filledId = $bdb11010cef70236$export$f680877a34711e37();
+  const strokeWidthId = $bdb11010cef70236$export$f680877a34711e37();
+  const quantitativeColormapId = $bdb11010cef70236$export$f680877a34711e37();
+  const colormapRangeId = $bdb11010cef70236$export$f680877a34711e37();
+  const tooltipsVisibleId = $bdb11010cef70236$export$f680877a34711e37();
+  const crosshairsVisibleId = $bdb11010cef70236$export$f680877a34711e37();
+  const legendVisibleId = $bdb11010cef70236$export$f680877a34711e37();
   return jsxRuntimeExports.jsxs(PopperMenu, { open, setOpen, buttonIcon: jsxRuntimeExports.jsx(MoreVertIcon, {}), buttonClassName: menuClasses.imageLayerMenuButton, containerClassName: menuClasses.imageLayerPopperContainer, withPaper: true, "aria-label": "Open spot layer options menu", children: [jsxRuntimeExports.jsxs(MenuItem$1, { dense: true, disableGutters: true, children: [jsxRuntimeExports.jsx("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: filledId, children: "Filled: " }), jsxRuntimeExports.jsx(Checkbox$1, { color: "primary", checked: filled, onChange: (e3, v) => setFilled(v), inputProps: { id: filledId, "aria-label": "Toggle between filled and stroked spots" } })] }), jsxRuntimeExports.jsxs(MenuItem$1, { dense: true, disableGutters: true, children: [jsxRuntimeExports.jsx("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: strokeWidthId, children: "Stroke Width:" }), jsxRuntimeExports.jsx(Slider$1, { disabled: filled, value: strokeWidth, min: 0.01, max: 5, step: 0.01, onChange: (e3, v) => setStrokeWidth(v), className: menuClasses.menuItemSlider, orientation: "horizontal", id: strokeWidthId, "aria-label": "Stroke width slider" })] }), jsxRuntimeExports.jsxs(MenuItem$1, { dense: true, disableGutters: true, children: [jsxRuntimeExports.jsx("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: quantitativeColormapId, children: "Color Encoding: " }), jsxRuntimeExports.jsxs(Select$1, { native: true, onChange: (e3) => setObsColorEncoding(e3.target.value), value: obsColorEncoding, inputProps: { id: quantitativeColormapId, "aria-label": "Color encoding selector" }, classes: { root: selectClasses.selectRoot }, children: [jsxRuntimeExports.jsx("option", { value: "spatialLayerColor", children: "Static Color" }), jsxRuntimeExports.jsx("option", { value: "geneSelection", children: "Feature Value" }), jsxRuntimeExports.jsx("option", { value: "cellSetSelection", children: "Set Selection" })] })] }), jsxRuntimeExports.jsxs(MenuItem$1, { dense: true, disableGutters: true, children: [jsxRuntimeExports.jsx("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: colormapRangeId, children: "Colormap Range: " }), jsxRuntimeExports.jsx(Slider$1, { disabled: obsColorEncoding !== "geneSelection", value: featureValueColormapRange, min: 0, max: 1, step: 0.01, onChange: (e3, v) => setFeatureValueColormapRange(v), className: menuClasses.menuItemSlider, orientation: "horizontal", id: colormapRangeId, getAriaLabel: (index2) => index2 === 0 ? "Low value colormap range slider" : "High value colormap range slider" })] }), jsxRuntimeExports.jsxs(MenuItem$1, { dense: true, disableGutters: true, children: [jsxRuntimeExports.jsx("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: tooltipsVisibleId, children: "Tooltips Visible: " }), jsxRuntimeExports.jsx(Checkbox$1, { color: "primary", checked: tooltipsVisible, onChange: (e3, v) => setTooltipsVisible(v), inputProps: { id: tooltipsVisibleId, "aria-label": "Toggle tooltip visibility" } })] }), jsxRuntimeExports.jsxs(MenuItem$1, { dense: true, disableGutters: true, children: [jsxRuntimeExports.jsx("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: crosshairsVisibleId, children: "Tooltip Crosshairs Visible: " }), jsxRuntimeExports.jsx(Checkbox$1, { color: "primary", checked: tooltipCrosshairsVisible, onChange: (e3, v) => setTooltipCrosshairsVisible(v), inputProps: { id: crosshairsVisibleId, "aria-label": "Toggle tooltip crosshair visibility" } })] }), jsxRuntimeExports.jsxs(MenuItem$1, { dense: true, disableGutters: true, children: [jsxRuntimeExports.jsx("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: legendVisibleId, children: "Legend Visible: " }), jsxRuntimeExports.jsx(Checkbox$1, { color: "primary", checked: legendVisible, onChange: (e3, v) => setLegendVisible(v), inputProps: { id: legendVisibleId, "aria-label": "Toggle legend visibility" } })] })] });
 }
 function SpotLayerController(props2) {
@@ -201462,11 +201680,11 @@ function PointLayerEllipsisMenu(props2) {
   const [open, setOpen] = useState(false);
   const selectClasses = useSelectStyles();
   const menuClasses = useEllipsisMenuStyles();
-  const quantitativeColormapId = useId();
-  const colormapRangeId = useId();
-  const tooltipsVisibleId = useId();
-  const crosshairsVisibleId = useId();
-  const legendVisibleId = useId();
+  const quantitativeColormapId = $bdb11010cef70236$export$f680877a34711e37();
+  const colormapRangeId = $bdb11010cef70236$export$f680877a34711e37();
+  const tooltipsVisibleId = $bdb11010cef70236$export$f680877a34711e37();
+  const crosshairsVisibleId = $bdb11010cef70236$export$f680877a34711e37();
+  const legendVisibleId = $bdb11010cef70236$export$f680877a34711e37();
   return jsxRuntimeExports.jsxs(PopperMenu, { open, setOpen, buttonIcon: jsxRuntimeExports.jsx(MoreVertIcon, {}), buttonClassName: menuClasses.imageLayerMenuButton, containerClassName: menuClasses.imageLayerPopperContainer, withPaper: true, "aria-label": "Open point layer options menu", children: [jsxRuntimeExports.jsxs(MenuItem$1, { dense: true, disableGutters: true, children: [jsxRuntimeExports.jsx("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: quantitativeColormapId, children: "Color Encoding: " }), jsxRuntimeExports.jsxs(Select$1, { native: true, onChange: (e3) => setObsColorEncoding(e3.target.value), value: obsColorEncoding, inputProps: { id: quantitativeColormapId, "aria-label": "Color encoding selector" }, classes: { root: selectClasses.selectRoot }, children: [jsxRuntimeExports.jsx("option", { value: "spatialLayerColor", children: "Static Color" }), jsxRuntimeExports.jsx("option", { value: "obsLabels", children: "Label Value" })] })] }), jsxRuntimeExports.jsxs(MenuItem$1, { dense: true, disableGutters: true, children: [jsxRuntimeExports.jsx("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: colormapRangeId, children: "Colormap Range: " }), jsxRuntimeExports.jsx(Slider$1, { disabled: obsColorEncoding !== "geneSelection", value: featureValueColormapRange, min: 0, max: 1, step: 0.01, onChange: (e3, v) => setFeatureValueColormapRange(v), className: menuClasses.menuItemSlider, orientation: "horizontal", id: colormapRangeId, getAriaLabel: (index2) => index2 === 0 ? "Low value colormap range slider" : "High value colormap range slider" })] }), jsxRuntimeExports.jsxs(MenuItem$1, { dense: true, disableGutters: true, children: [jsxRuntimeExports.jsx("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: tooltipsVisibleId, children: "Tooltips Visible: " }), jsxRuntimeExports.jsx(Checkbox$1, { color: "primary", checked: tooltipsVisible, onChange: (e3, v) => setTooltipsVisible(v), inputProps: { id: tooltipsVisibleId, "aria-label": "Toggle tooltip visibility" } })] }), jsxRuntimeExports.jsxs(MenuItem$1, { dense: true, disableGutters: true, children: [jsxRuntimeExports.jsx("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: crosshairsVisibleId, children: "Tooltip Crosshairs Visible: " }), jsxRuntimeExports.jsx(Checkbox$1, { color: "primary", checked: tooltipCrosshairsVisible, onChange: (e3, v) => setTooltipCrosshairsVisible(v), inputProps: { id: crosshairsVisibleId, "aria-label": "Toggle tooltip crosshair visibility" } })] }), jsxRuntimeExports.jsxs(MenuItem$1, { dense: true, disableGutters: true, children: [jsxRuntimeExports.jsx("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: legendVisibleId, children: "Legend Visible: " }), jsxRuntimeExports.jsx(Checkbox$1, { color: "primary", checked: legendVisible, onChange: (e3, v) => setLegendVisible(v), inputProps: { id: legendVisibleId, "aria-label": "Toggle legend visibility" } })] })] });
 }
 function PointLayerController(props2) {
@@ -201504,13 +201722,13 @@ function SegmentationChannelEllipsisMenu(props2) {
   useStyles$a();
   const selectClasses = useSelectStyles();
   const menuClasses = useEllipsisMenuStyles();
-  const filledId = useId();
-  const strokeWidthId = useId();
-  const quantitativeColormapId = useId();
-  const colormapRangeId = useId();
-  const tooltipsVisibleId = useId();
-  const crosshairsVisibleId = useId();
-  const legendVisibleId = useId();
+  const filledId = $bdb11010cef70236$export$f680877a34711e37();
+  const strokeWidthId = $bdb11010cef70236$export$f680877a34711e37();
+  const quantitativeColormapId = $bdb11010cef70236$export$f680877a34711e37();
+  const colormapRangeId = $bdb11010cef70236$export$f680877a34711e37();
+  const tooltipsVisibleId = $bdb11010cef70236$export$f680877a34711e37();
+  const crosshairsVisibleId = $bdb11010cef70236$export$f680877a34711e37();
+  const legendVisibleId = $bdb11010cef70236$export$f680877a34711e37();
   return jsxRuntimeExports.jsxs(PopperMenu, { open, setOpen, buttonIcon: jsxRuntimeExports.jsx(MoreVertIcon, {}), buttonClassName: menuClasses.imageLayerMenuButton, containerClassName: menuClasses.imageLayerPopperContainer, withPaper: true, "aria-label": "Open segmentation channel options menu", children: [jsxRuntimeExports.jsxs(MenuItem$1, { dense: true, disableGutters: true, children: [jsxRuntimeExports.jsx("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: filledId, children: "Filled: " }), jsxRuntimeExports.jsx(Checkbox$1, { color: "primary", checked: filled, onChange: (e3, v) => setFilled(v), inputProps: { id: filledId, "aria-label": "Toggle between filled and stroked segmentations" } })] }), jsxRuntimeExports.jsxs(MenuItem$1, { dense: true, disableGutters: true, children: [jsxRuntimeExports.jsx("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: strokeWidthId, children: "Stroke Width:" }), jsxRuntimeExports.jsx(Slider$1, { disabled: filled, value: strokeWidth, min: 0.01, max: 5, step: 0.01, onChange: (e3, v) => setStrokeWidth(v), className: menuClasses.menuItemSlider, orientation: "horizontal", id: strokeWidthId, "aria-label": "Stroke width slider" })] }), jsxRuntimeExports.jsxs(MenuItem$1, { dense: true, disableGutters: true, children: [jsxRuntimeExports.jsx("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: quantitativeColormapId, children: "Color Encoding: " }), jsxRuntimeExports.jsxs(Select$1, { native: true, onChange: (e3) => setObsColorEncoding(e3.target.value), value: obsColorEncoding, inputProps: { id: quantitativeColormapId, "aria-label": "Color encoding selector" }, classes: { root: selectClasses.selectRoot }, children: [jsxRuntimeExports.jsx("option", { value: "spatialChannelColor", children: "Static Color" }), jsxRuntimeExports.jsx("option", { value: "geneSelection", children: "Feature Value" }), jsxRuntimeExports.jsx("option", { value: "cellSetSelection", children: "Set Selection" })] })] }), jsxRuntimeExports.jsxs(MenuItem$1, { dense: true, disableGutters: true, children: [jsxRuntimeExports.jsx("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: colormapRangeId, children: "Colormap Range: " }), jsxRuntimeExports.jsx(Slider$1, { disabled: obsColorEncoding !== "geneSelection", value: featureValueColormapRange, min: 0, max: 1, step: 0.01, onChange: (e3, v) => setFeatureValueColormapRange(v), className: menuClasses.menuItemSlider, orientation: "horizontal", id: colormapRangeId, getAriaLabel: (index2) => index2 === 0 ? "Low value colormap range slider" : "High value colormap range slider" })] }), jsxRuntimeExports.jsxs(MenuItem$1, { dense: true, disableGutters: true, children: [jsxRuntimeExports.jsx("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: tooltipsVisibleId, children: "Tooltips Visible: " }), jsxRuntimeExports.jsx(Checkbox$1, { color: "primary", checked: tooltipsVisible, onChange: (e3, v) => setTooltipsVisible(v), inputProps: { id: tooltipsVisibleId, "aria-label": "Toggle tooltip visibility" } })] }), jsxRuntimeExports.jsxs(MenuItem$1, { dense: true, disableGutters: true, children: [jsxRuntimeExports.jsx("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: crosshairsVisibleId, children: "Tooltip Crosshairs Visible: " }), jsxRuntimeExports.jsx(Checkbox$1, { color: "primary", checked: tooltipCrosshairsVisible, onChange: (e3, v) => setTooltipCrosshairsVisible(v), inputProps: { id: crosshairsVisibleId, "aria-label": "Toggle tooltip crosshair visibility" } })] }), jsxRuntimeExports.jsxs(MenuItem$1, { dense: true, disableGutters: true, children: [jsxRuntimeExports.jsx("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: legendVisibleId, children: "Legend Visible: " }), jsxRuntimeExports.jsx(Checkbox$1, { color: "primary", checked: legendVisible, onChange: (e3, v) => setLegendVisible(v), inputProps: { id: legendVisibleId, "aria-label": "Toggle legend visibility" } })] })] });
 }
 function SegmentationChannelController(props2) {
@@ -202611,7 +202829,7 @@ function ChannelOptions(props2) {
   function handleDomainTypeChange(event2) {
     setShowValueExtent(event2.target.value === "Value Min/Max");
   }
-  const domainTypeId = useId();
+  const domainTypeId = $bdb11010cef70236$export$f680877a34711e37();
   return jsxRuntimeExports.jsxs(PopperMenu, { open, setOpen, buttonIcon: jsxRuntimeExports.jsx(MoreVertIcon, { fontSize: "small" }), buttonClassName: classes.channelMenuButton, containerClassName: menuClasses.imageLayerPopperContainer, placement: "bottom-end", withPaper: true, "aria-label": "Open channel options menu", children: [jsxRuntimeExports.jsxs(MenuItem$1, { dense: true, disableGutters: true, children: [jsxRuntimeExports.jsx("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: domainTypeId, children: "Slider Extent: " }), jsxRuntimeExports.jsxs(Select$1, { native: true, onChange: handleDomainTypeChange, value: showValueExtent ? "Value Min/Max" : "Dtype Min/Max", inputProps: { id: domainTypeId, "aria-label": "Slider extent selector" }, classes: { root: selectClasses.selectRoot }, children: [jsxRuntimeExports.jsx("option", { value: "Value Min/Max", children: "Value Min/Max" }), jsxRuntimeExports.jsx("option", { value: "Dtype Min/Max", children: "Dtype Min/Max" })] })] }), jsxRuntimeExports.jsx(MenuItem$1, { dense: true, disableGutters: true, component: "button", onClick: onResetWindowUsingIQR, className: classes.menuItemButton, "aria-label": "Click to use IQR for channel", children: "Reset window using IQR" }), jsxRuntimeExports.jsx(MenuItem$1, { dense: true, disableGutters: true, component: "button", onClick: handleRemove, className: classes.menuItemButton, "aria-label": "Click to remove channel", children: "Remove channel" })] });
 }
 const useStyles$8 = makeStyles(() => ({
@@ -202795,15 +203013,15 @@ function ImageLayerEllipsisMenu(props2) {
   function handleChannelLabelsOrientationChange(event2) {
     setChannelLabelsOrientation(event2.target.value);
   }
-  const colormapId = useId();
-  const interpretationId = useId();
-  const transparentId = useId();
-  const volumetricId = useId();
-  const resolutionId = useId();
-  const tooltipsVisibleId = useId();
-  const channelLabelsVisibleId = useId();
-  const channelLabelsOrientationId = useId();
-  const channelLabelSizeId = useId();
+  const colormapId = $bdb11010cef70236$export$f680877a34711e37();
+  const interpretationId = $bdb11010cef70236$export$f680877a34711e37();
+  const transparentId = $bdb11010cef70236$export$f680877a34711e37();
+  const volumetricId = $bdb11010cef70236$export$f680877a34711e37();
+  const resolutionId = $bdb11010cef70236$export$f680877a34711e37();
+  const tooltipsVisibleId = $bdb11010cef70236$export$f680877a34711e37();
+  const channelLabelsVisibleId = $bdb11010cef70236$export$f680877a34711e37();
+  const channelLabelsOrientationId = $bdb11010cef70236$export$f680877a34711e37();
+  const channelLabelSizeId = $bdb11010cef70236$export$f680877a34711e37();
   return jsxRuntimeExports.jsxs(PopperMenu, { open, setOpen, buttonIcon: jsxRuntimeExports.jsx(MoreVertIcon, {}), buttonClassName: menuClasses.imageLayerMenuButton, containerClassName: menuClasses.imageLayerPopperContainer, withPaper: true, "aria-label": "Open image layer options menu", children: [jsxRuntimeExports.jsxs(MenuItem$1, { dense: true, disableGutters: true, children: [jsxRuntimeExports.jsx("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: colormapId, children: "Colormap: " }), jsxRuntimeExports.jsxs(Select$1, { native: true, disabled: photometricInterpretation === "RGB", onChange: handleColormapChange, value: colormap === null ? "" : colormap, inputProps: { id: colormapId, "aria-label": "Colormap selector" }, classes: { root: selectClasses.selectRoot }, children: [jsxRuntimeExports.jsx("option", { "aria-label": "None", value: "", children: "None" }), COLORMAP_OPTIONS.map((name2) => jsxRuntimeExports.jsx("option", { value: name2, children: name2 }, name2))] })] }), jsxRuntimeExports.jsxs(MenuItem$1, { dense: true, disableGutters: true, children: [jsxRuntimeExports.jsx("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: interpretationId, children: "Photometric Interpretation: " }), jsxRuntimeExports.jsxs(Select$1, { native: true, onChange: handleInterpretationChange, value: photometricInterpretation, inputProps: { id: interpretationId, "aria-label": "Photometric interpretation selector" }, classes: { root: selectClasses.selectRoot }, children: [jsxRuntimeExports.jsx("option", { "aria-label": "RGB", value: "RGB", children: "RGB" }), channelScopes.length > 0 ? jsxRuntimeExports.jsx("option", { "aria-label": "BlackIsZero", value: "BlackIsZero", children: "BlackIsZero" }) : null] })] }), jsxRuntimeExports.jsxs(MenuItem$1, { dense: true, disableGutters: true, children: [jsxRuntimeExports.jsx("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: transparentId, children: "Zero Transparent: " }), jsxRuntimeExports.jsx(Checkbox$1, { color: "primary", checked: spatialLayerTransparentColor !== null, onChange: (e3, v) => setSpatialLayerTransparentColor(v ? [0, 0, 0] : null), inputProps: { id: transparentId, "aria-label": "Render zero-value pixels as transparent" } })] }), jsxRuntimeExports.jsxs(MenuItem$1, { dense: true, disableGutters: true, children: [jsxRuntimeExports.jsx("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: volumetricId, children: "Volumetric Rendering: " }), jsxRuntimeExports.jsxs(Select$1, { native: true, onChange: handleVolumetricChange, value: volumetricRenderingAlgorithm, inputProps: { id: volumetricId, "aria-label": "Volumetric rendering algorithm selector" }, classes: { root: selectClasses.selectRoot }, disabled: !is3dMode, children: [jsxRuntimeExports.jsx("option", { "aria-label": "Additive", value: "additive", children: "Additive" }), jsxRuntimeExports.jsx("option", { "aria-label": "Maximum Intensity Projection", value: "maximumIntensityProjection", children: "Maximum Intensity Projection" })] })] }), jsxRuntimeExports.jsxs(MenuItem$1, { dense: true, disableGutters: true, children: [jsxRuntimeExports.jsx("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: resolutionId, children: "Volume Resolution: " }), jsxRuntimeExports.jsxs(Select$1, { native: true, disabled: !is3dMode || !isMultiResolution, onChange: handleResolutionChange, value: spatialTargetResolution === null ? "auto" : spatialTargetResolution, inputProps: { id: resolutionId, "aria-label": "Volumetric resolution selector" }, classes: { root: selectClasses.selectRoot }, children: [jsxRuntimeExports.jsx("option", { value: "auto", children: "Auto" }), Array.isArray(multiResolutionStats) ? multiResolutionStats.map((stats, resolution) => stats.canLoad ? jsxRuntimeExports.jsx("option", { value: resolution, children: `3D: ${resolution}x Downsampled, ~${formatBytes(stats.totalBytes)} per channel, (${stats.height}, ${stats.width}, ${stats.depthDownsampled})` }, `(${stats.height}, ${stats.width}, ${stats.depthDownsampled})`) : null) : null] })] }), jsxRuntimeExports.jsxs(MenuItem$1, { dense: true, disableGutters: true, children: [jsxRuntimeExports.jsx("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: tooltipsVisibleId, children: "Tooltips Visible: " }), jsxRuntimeExports.jsx(Checkbox$1, { color: "primary", checked: tooltipsVisible, onChange: (e3, v) => setTooltipsVisible(v), inputProps: { id: tooltipsVisibleId, "aria-label": "Render pixel value tooltips" } })] }), jsxRuntimeExports.jsxs(MenuItem$1, { dense: true, disableGutters: true, children: [jsxRuntimeExports.jsx("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: channelLabelsVisibleId, children: "Channel Labels Visible: " }), jsxRuntimeExports.jsx(Checkbox$1, { disabled: photometricInterpretation === "RGB", color: "primary", checked: channelLabelsVisible, onChange: (e3, v) => setChannelLabelsVisible(v), inputProps: { id: channelLabelsVisibleId, "aria-label": "Render channel labels" } })] }), jsxRuntimeExports.jsxs(MenuItem$1, { dense: true, disableGutters: true, children: [jsxRuntimeExports.jsx("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: channelLabelsOrientationId, children: "Channel Labels Orientation: " }), jsxRuntimeExports.jsxs(Select$1, { native: true, disabled: photometricInterpretation === "RGB", onChange: handleChannelLabelsOrientationChange, value: channelLabelsOrientation, inputProps: { id: channelLabelsOrientationId, "aria-label": "Channel labels orientation selector" }, classes: { root: selectClasses.selectRoot }, children: [jsxRuntimeExports.jsx("option", { "aria-label": "Vertical", value: "vertical", children: "Vertical" }), jsxRuntimeExports.jsx("option", { "aria-label": "Horizontal", value: "horizontal", children: "Horizontal" })] })] }), jsxRuntimeExports.jsxs(MenuItem$1, { dense: true, disableGutters: true, children: [jsxRuntimeExports.jsx("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: channelLabelSizeId, children: "Channel Labels Size: " }), jsxRuntimeExports.jsx(Slider$1, { disabled: photometricInterpretation === "RGB", value: channelLabelSize, min: 8, max: 36, step: 1, onChange: (e3, v) => setChannelLabelSize(v), className: menuClasses.menuItemSlider, orientation: "horizontal", id: channelLabelSizeId, "aria-label": "Channel labels text size slider" })] })] });
 }
 function ImageLayerController(props2) {
@@ -203541,7 +203759,7 @@ const HIGLASS_BUNDLE_VERSION = "1.11.13";
 const HIGLASS_CSS_URL = `https://unpkg.com/${HIGLASS_PKG_NAME}@${HIGLASS_BUNDLE_VERSION}/dist/hglib.css`;
 register({ dataFetcher: ZarrMultivecDataFetcher, config: ZarrMultivecDataFetcher.config }, { pluginType: "dataFetcher" });
 const LazyHiGlassComponent = React__default.lazy(async () => {
-  const { HiGlassComponent } = await import("./hglib-2b8cd9d8.js").then((n3) => n3.h);
+  const { HiGlassComponent } = await import("./hglib-1bae5754.js").then((n3) => n3.h);
   return { default: HiGlassComponent };
 });
 const HG_SIZE = 800;
@@ -203829,7 +204047,7 @@ function GenomicProfilesSubscriber(props2) {
 }
 function CellSetExpressionPlotOptions(props2) {
   const { featureValueTransform, setFeatureValueTransform, featureValueTransformCoefficient, setFeatureValueTransformCoefficient, transformOptions } = props2;
-  const cellSetExpressionPlotOptionsId = useId();
+  const cellSetExpressionPlotOptionsId = $bdb11010cef70236$export$f680877a34711e37();
   const classes = usePlotOptionsStyles();
   const handleTransformChange = (event2) => {
     setFeatureValueTransform(event2.target.value === "" ? null : event2.target.value);

package/dist/index.js

@@ -1,4 +1,4 @@
-import { f, P, h, d, V, z } from "./index-d4cd1fef.js";
+import { f, P, h, d, V, z } from "./index-f665a5d4.js";
 import "react";
 import "@vitessce/vit-s";
 import "react-dom";

package/dist/{jpeg-3b40fe93.js → jpeg-b55e77c5.js}

@@ -1,4 +1,4 @@
-import { B as BaseDecoder } from "./index-d4cd1fef.js";
+import { B as BaseDecoder } from "./index-f665a5d4.js";
 import "react";
 import "@vitessce/vit-s";
 import "react-dom";

package/dist/{lerc-e0d6f9e6.js → lerc-2523b21e.js}

@@ -1,5 +1,5 @@
 import { i as inflate_1 } from "./pako.esm-68f84e2a.js";
-import { g as getDefaultExportFromCjs, B as BaseDecoder, L as LercParameters, a as LercAddCompression } from "./index-d4cd1fef.js";
+import { g as getDefaultExportFromCjs, B as BaseDecoder, L as LercParameters, a as LercAddCompression } from "./index-f665a5d4.js";
 import "react";
 import "@vitessce/vit-s";
 import "react-dom";

package/dist/{lzw-2b4715b3.js → lzw-b35f334d.js}

@@ -1,4 +1,4 @@
-import { B as BaseDecoder } from "./index-d4cd1fef.js";
+import { B as BaseDecoder } from "./index-f665a5d4.js";
 import "react";
 import "@vitessce/vit-s";
 import "react-dom";

package/dist/{packbits-494352d8.js → packbits-6e275aa4.js}

@@ -1,4 +1,4 @@
-import { B as BaseDecoder } from "./index-d4cd1fef.js";
+import { B as BaseDecoder } from "./index-f665a5d4.js";
 import "react";
 import "@vitessce/vit-s";
 import "react-dom";

package/dist/{raw-ed9deb25.js → raw-8dc223b5.js}

@@ -1,4 +1,4 @@
-import { B as BaseDecoder } from "./index-d4cd1fef.js";
+import { B as BaseDecoder } from "./index-f665a5d4.js";
 import "react";
 import "@vitessce/vit-s";
 import "react-dom";

package/dist/{webimage-f9e0ebc3.js → webimage-917679ff.js}

@@ -1,4 +1,4 @@
-import { B as BaseDecoder } from "./index-d4cd1fef.js";
+import { B as BaseDecoder } from "./index-f665a5d4.js";
 import "react";
 import "@vitessce/vit-s";
 import "react-dom";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitessce/all",
-  "version": "3.2.0",
+  "version": "3.2.2",
   "author": "Gehlenborg Lab",
   "homepage": "http://vitessce.io",
   "repository": {
@@ -18,27 +18,27 @@
   "dependencies": {
     "@material-ui/core": "~4.12.3",
     "zod": "^3.21.4",
-    "@vitessce/constants-internal": "3.2.0",
-    "@vitessce/csv": "3.2.0",
-    "@vitessce/description": "3.2.0",
-    "@vitessce/feature-list": "3.2.0",
-    "@vitessce/genomic-profiles": "3.2.0",
-    "@vitessce/heatmap": "3.2.0",
-    "@vitessce/json": "3.2.0",
-    "@vitessce/layer-controller": "3.2.0",
-    "@vitessce/layer-controller-beta": "3.2.0",
-    "@vitessce/obs-sets-manager": "3.2.0",
-    "@vitessce/ome-tiff": "3.2.0",
-    "@vitessce/plugins": "3.2.0",
-    "@vitessce/scatterplot-embedding": "3.2.0",
-    "@vitessce/scatterplot-gating": "3.2.0",
-    "@vitessce/schemas": "3.2.0",
-    "@vitessce/spatial": "3.2.0",
-    "@vitessce/spatial-beta": "3.2.0",
-    "@vitessce/statistical-plots": "3.2.0",
-    "@vitessce/status": "3.2.0",
-    "@vitessce/vit-s": "3.2.0",
-    "@vitessce/zarr": "3.2.0"
+    "@vitessce/constants-internal": "3.2.2",
+    "@vitessce/description": "3.2.2",
+    "@vitessce/csv": "3.2.2",
+    "@vitessce/genomic-profiles": "3.2.2",
+    "@vitessce/feature-list": "3.2.2",
+    "@vitessce/json": "3.2.2",
+    "@vitessce/heatmap": "3.2.2",
+    "@vitessce/layer-controller": "3.2.2",
+    "@vitessce/layer-controller-beta": "3.2.2",
+    "@vitessce/obs-sets-manager": "3.2.2",
+    "@vitessce/ome-tiff": "3.2.2",
+    "@vitessce/plugins": "3.2.2",
+    "@vitessce/scatterplot-embedding": "3.2.2",
+    "@vitessce/scatterplot-gating": "3.2.2",
+    "@vitessce/schemas": "3.2.2",
+    "@vitessce/spatial": "3.2.2",
+    "@vitessce/statistical-plots": "3.2.2",
+    "@vitessce/spatial-beta": "3.2.2",
+    "@vitessce/vit-s": "3.2.2",
+    "@vitessce/status": "3.2.2",
+    "@vitessce/zarr": "3.2.2"
   },
   "devDependencies": {
     "@types/react": "^18.0.28",