@vitessce/all 3.7.1 → 3.8.1

package/dist/{index-Ci947y1K.js → index-BvVS_3Vn.js}

@@ -8963,6 +8963,7 @@ const ViewType$1 = {
   SCATTERPLOT: "scatterplot",
   SPATIAL: "spatial",
   SPATIAL_BETA: "spatialBeta",
+  // SPATIAL_ACCELERATED: 'spatialAccelerated',
   HEATMAP: "heatmap",
   LAYER_CONTROLLER: "layerController",
   LAYER_CONTROLLER_BETA: "layerControllerBeta",
@@ -9266,6 +9267,8 @@ const CoordinationType$1 = {
   // Could be per-image-layer
   SPATIAL_TARGET_RESOLUTION: "spatialTargetResolution",
   // Per-spatial-layer
+  SPATIAL_MAX_RESOLUTION: "spatialMaxResolution",
+  // Per-image-channel (for spatial-accelerated)
   // For clipping plane sliders
   SPATIAL_SLICE_X: "spatialSliceX",
   SPATIAL_SLICE_Y: "spatialSliceY",
@@ -9841,6 +9844,7 @@ const COMPONENT_COORDINATION_TYPES = {
     CoordinationType$1.SPATIAL_RENDERING_MODE,
     CoordinationType$1.VOLUMETRIC_RENDERING_ALGORITHM,
     CoordinationType$1.SPATIAL_TARGET_RESOLUTION,
+    CoordinationType$1.SPATIAL_MAX_RESOLUTION,
     CoordinationType$1.SPATIAL_SLICE_X,
     CoordinationType$1.SPATIAL_SLICE_Y,
     CoordinationType$1.SPATIAL_SLICE_Z,
@@ -10014,6 +10018,7 @@ const COMPONENT_COORDINATION_TYPES = {
     CoordinationType$1.SPATIAL_RENDERING_MODE,
     CoordinationType$1.VOLUMETRIC_RENDERING_ALGORITHM,
     CoordinationType$1.SPATIAL_TARGET_RESOLUTION,
+    CoordinationType$1.SPATIAL_MAX_RESOLUTION,
     CoordinationType$1.SPATIAL_SLICE_X,
     CoordinationType$1.SPATIAL_SLICE_Y,
     CoordinationType$1.SPATIAL_SLICE_Z,
@@ -209298,22 +209303,22 @@ async function getDecoder(fileDirectory) {
   const Decoder = await importFn();
   return new Decoder(fileDirectory);
 }
-addDecoder([void 0, 1], () => import("./raw-Day99mnL.js").then((m2) => m2.default));
-addDecoder(5, () => import("./lzw-CR9bmrUA.js").then((m2) => m2.default));
+addDecoder([void 0, 1], () => import("./raw-AeiJCa5u.js").then((m2) => m2.default));
+addDecoder(5, () => import("./lzw-C7bIlAE9.js").then((m2) => m2.default));
 addDecoder(6, () => {
   throw new Error("old style JPEG compression is not supported.");
 });
-addDecoder(7, () => import("./jpeg-23ExE8ad.js").then((m2) => m2.default));
-addDecoder([8, 32946], () => import("./deflate-D7qntYPm.js").then((m2) => m2.default));
-addDecoder(32773, () => import("./packbits-yEwcRYhH.js").then((m2) => m2.default));
+addDecoder(7, () => import("./jpeg-D1F3JoMr.js").then((m2) => m2.default));
+addDecoder([8, 32946], () => import("./deflate-CiJW6nDN.js").then((m2) => m2.default));
+addDecoder(32773, () => import("./packbits-B0NoJqXw.js").then((m2) => m2.default));
 addDecoder(
   34887,
-  () => import("./lerc-BPNFjya5.js").then(async (m2) => {
+  () => import("./lerc-BjYwawxE.js").then(async (m2) => {
     await m2.zstd.init();
     return m2;
   }).then((m2) => m2.default)
 );
-addDecoder(50001, () => import("./webimage-CmvCEz7r.js").then((m2) => m2.default));
+addDecoder(50001, () => import("./webimage-CrFV1v2P.js").then((m2) => m2.default));
 function copyNewSize(array2, width2, height2, samplesPerPixel = 1) {
   return new (Object.getPrototypeOf(array2)).constructor(width2 * height2 * samplesPerPixel);
 }
@@ -226155,13 +226160,13 @@ function IconButton(props) {
 function ToolMenu(props) {
   const pointerIconAltText = "Pointer tool";
   const lassoIconAltText = "Select lasso";
-  const { setActiveTool, activeTool, visibleTools = { pan: true, selectLasso: true }, recenterOnClick = () => {
+  const { setActiveTool, activeTool, visibleTools = { pan: true, selectLasso: true, recenter: true }, recenterOnClick = () => {
   } } = props;
   const { classes: classes2 } = useStyles$s();
   const onRecenterButtonCLick = () => {
     recenterOnClick();
   };
-  return jsxRuntimeExports.jsxs("div", { className: classes2.tool, children: [visibleTools.pan && jsxRuntimeExports.jsx(IconTool, { alt: pointerIconAltText, onClick: () => setActiveTool(null), isActive: activeTool === null, children: jsxRuntimeExports.jsx(SvgNearMe, {}) }), visibleTools.selectLasso ? jsxRuntimeExports.jsx(IconTool, { alt: lassoIconAltText, onClick: () => setActiveTool(distEs6Exports$2.SELECTION_TYPE.POLYGON), isActive: activeTool === distEs6Exports$2.SELECTION_TYPE.POLYGON, children: jsxRuntimeExports.jsx(SvgSelectionLasso, {}) }) : null, jsxRuntimeExports.jsx(IconButton, { alt: "click to recenter", onClick: () => onRecenterButtonCLick(), "aria-label": "Recenter scatterplot view", children: jsxRuntimeExports.jsx(CenterFocusStrong, {}) })] });
+  return jsxRuntimeExports.jsxs("div", { className: classes2.tool, children: [visibleTools.pan && jsxRuntimeExports.jsx(IconTool, { alt: pointerIconAltText, onClick: () => setActiveTool(null), isActive: activeTool === null, children: jsxRuntimeExports.jsx(SvgNearMe, {}) }), visibleTools.selectLasso ? jsxRuntimeExports.jsx(IconTool, { alt: lassoIconAltText, onClick: () => setActiveTool(distEs6Exports$2.SELECTION_TYPE.POLYGON), isActive: activeTool === distEs6Exports$2.SELECTION_TYPE.POLYGON, children: jsxRuntimeExports.jsx(SvgSelectionLasso, {}) }) : null, visibleTools.recenter ? jsxRuntimeExports.jsx(IconButton, { alt: "click to recenter", onClick: () => onRecenterButtonCLick(), "aria-label": "Recenter scatterplot view", children: jsxRuntimeExports.jsx(CenterFocusStrong, {}) }) : null] });
 }
 const getCursorWithTool = () => "crosshair";
 const getCursor = (interactionState) => interactionState.isDragging ? "grabbing" : "default";
@@ -226395,7 +226400,7 @@ class AbstractSpatialOrScatterplot extends PureComponent {
    * and Scatterplot components.
    */
   render() {
-    const { deckRef, viewState, uuid: uuid2, hideTools, orbitAxis } = this.props;
+    const { deckRef, viewState, uuid: uuid2, hideTools, hideRecenter, orbitAxis } = this.props;
     const { gl, tool } = this.state;
     const layers = this.getLayers();
     const use3d = this.use3d();
@@ -226404,7 +226409,8 @@ class AbstractSpatialOrScatterplot extends PureComponent {
     const useDevicePixels = !use3d && (this.obsSegmentationsData?.shape?.[0] < 1e5 || this.obsLocationsData?.shape?.[1] < 1e5);
     return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(ToolMenu, { activeTool: tool, setActiveTool: this.onToolChange, visibleTools: {
       pan: showPanTool && !hideTools,
-      selectLasso: showCellSelectionTools && !hideTools
+      selectLasso: showCellSelectionTools && !hideTools,
+      recenter: !hideRecenter
     }, recenterOnClick: this.recenter }), jsxRuntimeExports.jsx(DeckGL, { id: `deckgl-overlay-${uuid2}`, ref: deckRef, views: [
       use3d ? new OrbitView({ id: "orbit", controller: true, orbitAxis }) : new OrthographicView({
         id: "ortho"
@@ -227439,11 +227445,11 @@ function TooltipContent(props) {
   return jsxRuntimeExports.jsx("table", { children: jsxRuntimeExports.jsx("tbody", { children: Object.entries(mappedInfo).map(([key2, value2]) => jsxRuntimeExports.jsxs("tr", { children: [jsxRuntimeExports.jsx("th", { children: key2 }), jsxRuntimeExports.jsx("td", { children: value2 })] }, key2)) }) });
 }
 function ScatterplotTooltipSubscriber(props) {
-  const { parentUuid, obsHighlight, width: width2, height: height2, getObsInfo: getObsInfo2, featureType, featureLabelsMap } = props;
+  const { parentUuid, obsHighlight, width: width2, height: height2, getObsInfo, featureType, featureLabelsMap } = props;
   const sourceUuid = useComponentHover();
   const viewInfo = useComponentViewInfo(parentUuid);
-  const [cellInfo, x2, y2] = obsHighlight && getObsInfo2 ? [
-    getObsInfo2(obsHighlight),
+  const [cellInfo, x2, y2] = obsHighlight && getObsInfo ? [
+    getObsInfo(obsHighlight),
     ...viewInfo && viewInfo.projectFromId ? viewInfo.projectFromId(obsHighlight) : [null, null]
   ] : [null, null, null];
   return cellInfo ? jsxRuntimeExports.jsx(Tooltip2D, { x: x2, y: y2, parentUuid, sourceUuid, parentWidth: width2, parentHeight: height2, children: jsxRuntimeExports.jsx(TooltipContent, { info: cellInfo, featureType, featureLabelsMap }) }) : null;
@@ -231853,7 +231859,7 @@ function EmbeddingScatterplotSubscriber(props) {
     initialTargetY,
     averageFillDensity
   ]);
-  const getObsInfo2 = useGetObsInfo(observationsLabel, obsLabelsTypes, obsLabelsData, obsSetsMembership);
+  const getObsInfo = useGetObsInfo(observationsLabel, obsLabelsTypes, obsLabelsData, obsSetsMembership);
   const cellSelectionSet = useMemo$1(() => new Set(cellSelection), [cellSelection]);
   const getCellIsSelected = useCallback((object2, { index: index2 }) => (cellSelectionSet || /* @__PURE__ */ new Set([])).has(obsEmbeddingIndex[index2]) ? 1 : 0, [cellSelectionSet, obsEmbeddingIndex]);
   const cellRadius = cellRadiusMode === "manual" ? cellRadiusFixed : dynamicCellRadius;
@@ -232010,7 +232016,7 @@ function EmbeddingScatterplotSubscriber(props) {
     embeddingContoursVisible,
     circleInfo,
     featureSelection: geneSelection
-  }), tooltipsVisible && width2 && height2 ? jsxRuntimeExports.jsx(ScatterplotTooltipSubscriber, { parentUuid: uuid2, obsHighlight: cellHighlight, width: width2, height: height2, getObsInfo: getObsInfo2, featureType, featureLabelsMap }) : null, jsxRuntimeExports.jsx(Legend, {
+  }), tooltipsVisible && width2 && height2 ? jsxRuntimeExports.jsx(ScatterplotTooltipSubscriber, { parentUuid: uuid2, obsHighlight: cellHighlight, width: width2, height: height2, getObsInfo, featureType, featureLabelsMap }) : null, jsxRuntimeExports.jsx(Legend, {
     visible: true,
     theme,
     featureType,
@@ -232044,21 +232050,14 @@ function DualEmbeddingScatterplotSubscriber(props) {
 function GatingScatterplotOptions(props) {
   const { featureType, gatingFeatureSelectionX, setGatingFeatureSelectionX, gatingFeatureSelectionY, setGatingFeatureSelectionY, gatingFeatureValueTransform, setGatingFeatureValueTransform, gatingFeatureValueTransformCoefficient, setGatingFeatureValueTransformCoefficient, geneSelectOptions, transformOptions } = props;
   const gatingScatterplotOptionsId = $bdb11010cef70236$export$f680877a34711e37();
+  const gatingScatterplotGeneXId = $bdb11010cef70236$export$f680877a34711e37();
+  const gatingScatterplotGeneYId = $bdb11010cef70236$export$f680877a34711e37();
   const { classes: classes2 } = usePlotOptionsStyles();
-  const handleGeneSelectChange = (event2) => {
-    const { options } = event2.target;
-    const newValues = [];
-    for (let i2 = 0, l2 = options.length; i2 < l2; i2 += 1) {
-      if (options[i2].selected) {
-        newValues.push(options[i2].value);
-      }
-    }
-    if (newValues.length === 1 && gatingFeatureSelectionX && !gatingFeatureSelectionY && newValues[0] !== gatingFeatureSelectionX) {
-      setGatingFeatureSelectionY(newValues[0]);
-    } else if (newValues.length <= 2) {
-      setGatingFeatureSelectionX(newValues[0]);
-      setGatingFeatureSelectionY(newValues[1]);
-    }
+  const handleSelectionX = (event2) => {
+    setGatingFeatureSelectionX(event2.target.value === "" ? null : event2.target.value);
+  };
+  const handleSelectionY = (event2) => {
+    setGatingFeatureSelectionY(event2.target.value === "" ? null : event2.target.value);
   };
   const handleTransformChange = (event2) => {
     setGatingFeatureValueTransform(event2.target.value === "" ? null : event2.target.value);
@@ -232074,11 +232073,13 @@ function GatingScatterplotOptions(props) {
       }
     }
   };
-  return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs(TableRow, { children: [jsxRuntimeExports.jsx(TableCell, { className: classes2.labelCell, variant: "head", scope: "row", children: jsxRuntimeExports.jsx("label", { htmlFor: `scatterplot-gating-gene-select-${gatingScatterplotOptionsId}`, children: capitalize$3(pluralize(featureType, geneSelectOptions?.length)) }) }), jsxRuntimeExports.jsx(TableCell, { className: classes2.inputCell, variant: "body", children: jsxRuntimeExports.jsx(OptionSelect, { multiple: true, className: classes2.select, value: [gatingFeatureSelectionX, gatingFeatureSelectionY].filter((v) => v), onChange: handleGeneSelectChange, inputProps: {
-    id: `scatterplot-gating-gene-select-${gatingScatterplotOptionsId}`
-  }, children: geneSelectOptions.map((name2) => jsxRuntimeExports.jsx("option", { value: name2, children: name2 }, name2)) }) })] }), jsxRuntimeExports.jsxs(TableRow, { children: [jsxRuntimeExports.jsx(TableCell, { className: classes2.labelCell, variant: "head", scope: "row", children: jsxRuntimeExports.jsx("label", { htmlFor: `scatterplot-gating-transform-select-${gatingScatterplotOptionsId}`, children: "Transform" }) }), jsxRuntimeExports.jsx(TableCell, { className: classes2.inputCell, variant: "body", children: jsxRuntimeExports.jsx(OptionSelect, { className: classes2.select, value: gatingFeatureValueTransform === null ? "" : gatingFeatureValueTransform, onChange: handleTransformChange, inputProps: {
+  return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs(TableRow, { children: [jsxRuntimeExports.jsx(TableCell, { className: classes2.labelCell, variant: "head", scope: "row", children: jsxRuntimeExports.jsxs("label", { htmlFor: `scatterplot-gating-gene-select-${gatingScatterplotGeneXId}`, children: [capitalize$3(featureType), " along X"] }) }), jsxRuntimeExports.jsx(TableCell, { className: classes2.inputCell, variant: "body", children: jsxRuntimeExports.jsxs(OptionSelect, { className: classes2.select, value: gatingFeatureSelectionX ?? "", onChange: handleSelectionX, inputProps: {
+    id: `scatterplot-gating-gene-select-${gatingScatterplotGeneXId}`
+  }, children: [jsxRuntimeExports.jsx("option", { value: "", children: "None" }), geneSelectOptions.map((name2) => jsxRuntimeExports.jsx("option", { value: name2, children: name2 }, name2))] }) })] }), jsxRuntimeExports.jsxs(TableRow, { children: [jsxRuntimeExports.jsx(TableCell, { className: classes2.labelCell, variant: "head", scope: "row", children: jsxRuntimeExports.jsxs("label", { htmlFor: `scatterplot-gating-gene-select-${gatingScatterplotGeneYId}`, children: [capitalize$3(featureType), " along Y"] }) }), jsxRuntimeExports.jsx(TableCell, { className: classes2.inputCell, variant: "body", children: jsxRuntimeExports.jsxs(OptionSelect, { className: classes2.select, value: gatingFeatureSelectionY ?? "", onChange: handleSelectionY, inputProps: {
+    id: `scatterplot-gating-gene-select-${gatingScatterplotGeneYId}`
+  }, children: [jsxRuntimeExports.jsx("option", { value: "", children: "None" }), geneSelectOptions.map((name2) => jsxRuntimeExports.jsx("option", { value: name2, children: name2 }, name2))] }) })] }), jsxRuntimeExports.jsxs(TableRow, { children: [jsxRuntimeExports.jsx(TableCell, { className: classes2.labelCell, variant: "head", scope: "row", children: jsxRuntimeExports.jsx("label", { htmlFor: `scatterplot-gating-transform-select-${gatingScatterplotOptionsId}`, children: "Transform" }) }), jsxRuntimeExports.jsx(TableCell, { className: classes2.inputCell, variant: "body", children: jsxRuntimeExports.jsx(OptionSelect, { className: classes2.select, value: gatingFeatureValueTransform === null ? "" : gatingFeatureValueTransform, onChange: handleTransformChange, inputProps: {
     id: `scatterplot-gating-transform-select-${gatingScatterplotOptionsId}`
-  }, children: transformOptions.map((opt) => jsxRuntimeExports.jsx("option", { value: opt.value === null ? "" : opt.value, children: opt.name }, opt.name)) }) })] }), jsxRuntimeExports.jsxs(TableRow, { children: [jsxRuntimeExports.jsx(TableCell, { className: classes2.labelCell, variant: "head", scope: "row", children: jsxRuntimeExports.jsx("label", { htmlFor: `scatterplot-gating-transform-coefficient-${gatingScatterplotOptionsId}`, children: "Transform Coefficient" }) }), jsxRuntimeExports.jsx(TableCell, { className: classes2.inputCell, variant: "body", children: jsxRuntimeExports.jsx(TextField, { label: "Transform Coefficient", type: "number", onChange: handleTransformCoefficientChange, value: gatingFeatureValueTransformCoefficient, slotProps: { input: { shrink: true } }, id: `scatterplot-gating-transform-coefficient-${gatingScatterplotOptionsId}` }) })] })] });
+  }, children: transformOptions.map((opt) => jsxRuntimeExports.jsx("option", { value: opt.value === null ? "" : opt.value, children: opt.name }, opt.name)) }) })] }), jsxRuntimeExports.jsxs(TableRow, { children: [jsxRuntimeExports.jsx(TableCell, { className: classes2.labelCell, variant: "head", scope: "row", children: jsxRuntimeExports.jsx("label", { htmlFor: `scatterplot-gating-transform-coefficient-${gatingScatterplotOptionsId}`, children: "Transform Coefficient" }) }), jsxRuntimeExports.jsx(TableCell, { className: classes2.inputCell, variant: "body", children: jsxRuntimeExports.jsx(TextField, { label: "Transform Coefficient", type: "number", onChange: handleTransformCoefficientChange, value: gatingFeatureValueTransformCoefficient, slotProps: { inputLabel: { shrink: true } }, id: `scatterplot-gating-transform-coefficient-${gatingScatterplotOptionsId}` }) })] })] });
 }
 function GatingSubscriber(props) {
   const {
@@ -232099,6 +232100,7 @@ function GatingSubscriber(props) {
   const setComponentHover = useSetComponentHover();
   const setComponentViewInfo = useSetComponentViewInfo(uuid2);
   const [{ dataset, obsType, featureType, featureValueType, embeddingZoom: zoom2, embeddingTargetX: targetX2, embeddingTargetY: targetY2, embeddingTargetZ: targetZ, obsFilter: cellFilter, obsHighlight: cellHighlight, obsSetSelection: cellSetSelection, obsSetColor: cellSetColor, obsColorEncoding: cellColorEncoding, additionalObsSets: additionalCellSets, embeddingObsSetPolygonsVisible: cellSetPolygonsVisible, embeddingObsSetLabelsVisible: cellSetLabelsVisible, embeddingObsSetLabelSize: cellSetLabelSize, embeddingObsRadius: cellRadiusFixed, embeddingObsRadiusMode: cellRadiusMode, embeddingObsOpacity: cellOpacityFixed, embeddingObsOpacityMode: cellOpacityMode, featureValueColormap: geneExpressionColormap, featureValueColormapRange: geneExpressionColormapRange, featureSelection: gatingFeatureSelectionColor, featureValueTransform, featureValueTransformCoefficient, gatingFeatureSelectionX, gatingFeatureSelectionY }, { setEmbeddingZoom: setZoom, setEmbeddingTargetX: setTargetX, setEmbeddingTargetY: setTargetY, setEmbeddingTargetZ: setTargetZ, setObsFilter: setCellFilter, setObsSetSelection: setCellSetSelection, setObsHighlight: setCellHighlight, setObsSetColor: setCellSetColor, setObsColorEncoding: setCellColorEncoding, setAdditionalObsSets: setAdditionalCellSets, setEmbeddingObsSetPolygonsVisible: setCellSetPolygonsVisible, setEmbeddingObsSetLabelsVisible: setCellSetLabelsVisible, setEmbeddingObsSetLabelSize: setCellSetLabelSize, setEmbeddingObsRadius: setCellRadiusFixed, setEmbeddingObsRadiusMode: setCellRadiusMode, setEmbeddingObsOpacity: setCellOpacityFixed, setEmbeddingObsOpacityMode: setCellOpacityMode, setFeatureValueColormap: setGeneExpressionColormap, setFeatureValueColormapRange: setGeneExpressionColormapRange, setFeatureValueTransform, setFeatureValueTransformCoefficient, setGatingFeatureSelectionX, setGatingFeatureSelectionY }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType$1.GATING], coordinationScopes);
+  const { embeddingZoom: initialZoom, embeddingTargetX: initialTargetX, embeddingTargetY: initialTargetY } = useInitialCoordination(COMPONENT_COORDINATION_TYPES[ViewType$1.GATING], coordinationScopes);
   const [width2, height2, deckRef] = useDeckCanvasSize();
   const title2 = useMemo$1(() => {
     if (titleOverride) {
@@ -232184,6 +232186,7 @@ function GatingSubscriber(props) {
   ]);
   const [dynamicCellRadius, setDynamicCellRadius] = useState(cellRadiusFixed);
   const [dynamicCellOpacity, setDynamicCellOpacity] = useState(cellOpacityFixed);
+  const [originalViewState, setOriginalViewState] = useState(null);
   const mergedCellSets = useMemo$1(() => mergeObsSets(cellSets, additionalCellSets), [cellSets, additionalCellSets]);
   const setCellSelectionProp = useCallback((v) => {
     setObsSelection(v, additionalCellSets, cellSetColor, setCellSetSelection, setAdditionalCellSets, setCellSetColor, setCellColorEncoding);
@@ -232254,13 +232257,20 @@ function GatingSubscriber(props) {
       setDynamicCellRadius(pointSizeDevicePixels);
       const nextCellOpacityScale = getPointOpacity(zoom2, xRange, yRange, width2, height2, numCells, averageFillDensity);
       setDynamicCellOpacity(nextCellOpacityScale);
-      if (typeof targetX2 !== "number" || typeof targetY2 !== "number") {
+      if (typeof initialTargetX !== "number" || typeof initialTargetY !== "number") {
         const newTargetX = xExtent[0] + xRange / 2;
         const newTargetY = yExtent[0] + yRange / 2;
         const newZoom = Math.log2(Math.min(width2 / xRange, height2 / yRange));
-        setTargetX(newTargetX);
-        setTargetY(-newTargetY);
-        setZoom(newZoom);
+        const notYetInitialized = typeof targetX2 !== "number" || typeof targetY2 !== "number";
+        const stillDefaultInitialized = targetX2 === newTargetX && targetY2 === -newTargetY;
+        if (notYetInitialized || stillDefaultInitialized) {
+          setTargetX(newTargetX);
+          setTargetY(-newTargetY);
+          setZoom(newZoom);
+        }
+        setOriginalViewState({ target: [newTargetX, -newTargetY, 0], zoom: newZoom });
+      } else if (!originalViewState) {
+        setOriginalViewState({ target: [initialTargetX, initialTargetY, 0], zoom: initialZoom });
       }
     }
   }, [
@@ -232272,6 +232282,8 @@ function GatingSubscriber(props) {
     width2,
     height2,
     zoom2,
+    initialTargetX,
+    initialTargetY,
     averageFillDensity
   ]);
   const cellSelectionSet = useMemo$1(() => new Set(cellSelection), [cellSelection]);
@@ -232284,7 +232296,7 @@ function GatingSubscriber(props) {
     matrixObsIndex: obsIndex,
     expressionData: uint8ExpressionData
   });
-  const getObsInfo2 = useCallback((obsId) => {
+  const getObsInfo = useCallback((obsId) => {
     const selectedTransformName = VALUE_TRANSFORM_OPTIONS.find((o2) => o2.value === featureValueTransform)?.name;
     const genePrefix = featureValueTransform ? `${selectedTransformName} ` : "";
     const obsIdx = obsIndex?.indexOf(obsId);
@@ -232302,19 +232314,20 @@ function GatingSubscriber(props) {
     gatingFeatureSelectionY,
     obsType
   ]);
+  const setViewState = ({ zoom: newZoom, target: target2 }) => {
+    setZoom(newZoom);
+    setTargetX(target2[0]);
+    setTargetY(target2[1]);
+    setTargetZ(target2[2] || 0);
+  };
   return jsxRuntimeExports.jsxs(TitleInfo, { title: title2, info: `${commaNumber(cellsCount)} ${pluralize(obsType, cellsCount)}`, closeButtonVisible, downloadButtonVisible, removeGridComponent, urls: urls2, theme, isReady, helpText, errors, options: jsxRuntimeExports.jsx(ScatterplotOptions, { observationsLabel: obsType, cellRadius: cellRadiusFixed, setCellRadius: setCellRadiusFixed, cellRadiusMode, setCellRadiusMode, cellOpacity: cellOpacityFixed, setCellOpacity: setCellOpacityFixed, cellOpacityMode, setCellOpacityMode, cellSetLabelsVisible, setCellSetLabelsVisible, cellSetLabelSize, setCellSetLabelSize, cellSetPolygonsVisible, setCellSetPolygonsVisible, cellColorEncoding, setCellColorEncoding, geneExpressionColormap, setGeneExpressionColormap, geneExpressionColormapRange, setGeneExpressionColormapRange, children: jsxRuntimeExports.jsx(GatingScatterplotOptions, { featureType, gatingFeatureSelectionX, setGatingFeatureSelectionX, gatingFeatureSelectionY, setGatingFeatureSelectionY, gatingFeatureValueTransform: featureValueTransform, setGatingFeatureValueTransform: (newValue) => {
     setFeatureValueTransform(newValue);
     setTargetX(null);
     setTargetY(null);
     setZoom(null);
-  }, gatingFeatureValueTransformCoefficient: featureValueTransformCoefficient, setGatingFeatureValueTransformCoefficient: setFeatureValueTransformCoefficient, geneSelectOptions: featureIndex, transformOptions: VALUE_TRANSFORM_OPTIONS }) }), children: [jsxRuntimeExports.jsx(EmptyMessage, { visible: !(gatingFeatureSelectionX && gatingFeatureSelectionY), message: `Select two ${pluralize(featureType, 2)} in the plot settings.` }), jsxRuntimeExports.jsx(ScatterplotWrapper, { ref: deckRef, uuid: uuid2, theme, hideTools: !(gatingFeatureSelectionX && gatingFeatureSelectionY), viewState: { zoom: zoom2, target: [targetX2, targetY2, targetZ] }, setViewState: ({ zoom: newZoom, target: target2 }) => {
-    setZoom(newZoom);
-    setTargetX(target2[0]);
-    setTargetY(target2[1]);
-    setTargetZ(target2[2] || 0);
-  }, obsEmbeddingIndex: obsIndex, obsEmbedding: obsXY, cellFilter, cellSelection, cellHighlight, cellColors, cellSetPolygons, cellSetLabelSize, cellSetLabelsVisible, cellSetPolygonsVisible, setCellFilter, setCellSelection: setCellSelectionProp, setCellHighlight, cellRadius, cellOpacity, cellColorEncoding, geneExpressionColormap, geneExpressionColormapRange, setComponentHover: () => {
+  }, gatingFeatureValueTransformCoefficient: featureValueTransformCoefficient, setGatingFeatureValueTransformCoefficient: setFeatureValueTransformCoefficient, geneSelectOptions: featureIndex, transformOptions: VALUE_TRANSFORM_OPTIONS }) }), children: [jsxRuntimeExports.jsx(EmptyMessage, { visible: !(gatingFeatureSelectionX && gatingFeatureSelectionY), message: `Select two ${pluralize(featureType, 2)} in the plot settings.` }), jsxRuntimeExports.jsx(ScatterplotWrapper, { ref: deckRef, uuid: uuid2, theme, hideTools: !(gatingFeatureSelectionX && gatingFeatureSelectionY), hideRecenter: !(gatingFeatureSelectionX && gatingFeatureSelectionY), viewState: { zoom: zoom2, target: [targetX2, targetY2, targetZ] }, setViewState, originalViewState, obsEmbeddingIndex: obsIndex, obsEmbedding: obsXY, cellFilter, cellSelection, cellHighlight, cellColors, cellSetPolygons, cellSetLabelSize, cellSetLabelsVisible, cellSetPolygonsVisible, setCellFilter, setCellSelection: setCellSelectionProp, setCellHighlight, cellRadius, cellOpacity, cellColorEncoding, geneExpressionColormap, geneExpressionColormapRange, setComponentHover: () => {
     setComponentHover(uuid2);
-  }, updateViewInfo: setComponentViewInfo, getExpressionValue, getCellIsSelected }), !disableTooltip && jsxRuntimeExports.jsx(ScatterplotTooltipSubscriber, { parentUuid: uuid2, obsHighlight: cellHighlight, width: width2, height: height2, getObsInfo: getObsInfo2 })] });
+  }, updateViewInfo: setComponentViewInfo, getExpressionValue, getCellIsSelected, embeddingPointsVisible: true }), !disableTooltip && jsxRuntimeExports.jsx(ScatterplotTooltipSubscriber, { parentUuid: uuid2, obsHighlight: cellHighlight, width: width2, height: height2, getObsInfo })] });
 }
 var DEFAULT_CONFIG = {
   // minimum relative difference between two compared values,
@@ -247297,13 +247310,16 @@ const getStatsForResolution = (loader2, resolution) => {
   const height2 = shape2[labels2.indexOf("y")];
   const width2 = shape2[labels2.indexOf("x")];
   const depth = shape2[labels2.indexOf("z")];
+  const dims = Object.fromEntries(labels2.map((label2, i2) => [label2, shape2[i2]]));
   const depthDownsampled = Math.max(1, depth >> resolution);
   const totalBytes = 4 * height2 * width2 * depthDownsampled;
   return {
     height: height2,
     width: width2,
+    depth,
     depthDownsampled,
-    totalBytes
+    totalBytes,
+    dims
   };
 };
 const canLoadResolution = (loader2, resolution) => {
@@ -251384,8 +251400,8 @@ function SpatialOptions(props) {
     return `${labelPrefix} for spatial gene expression colormap range`;
   }, id: `gene-expression-colormap-range-${spatialOptionsId}`, valueLabelDisplay: "auto", step: 5e-3, min: 0, max: 1 }) })] })] }) : null] });
 }
-function SpatialTooltipSubscriber$1(props) {
-  const { parentUuid, obsHighlight, width: width2, height: height2, getObsInfo: getObsInfo2, hoverData, hoverCoord, hoverMode, useHoverInfoForTooltip, getObsIdFromHoverData, featureType, featureLabelsMap } = props;
+function SpatialTooltipSubscriber(props) {
+  const { parentUuid, obsHighlight, width: width2, height: height2, getObsInfo, hoverData, hoverCoord, hoverMode, useHoverInfoForTooltip, getObsIdFromHoverData, featureType, featureLabelsMap } = props;
   const sourceUuid = useComponentHover();
   const viewInfo = useComponentViewInfo(parentUuid);
   let [cellInfo, x2, y2] = [null, null, null];
@@ -251393,7 +251409,7 @@ function SpatialTooltipSubscriber$1(props) {
     const obsId = getObsIdFromHoverData(hoverData);
     if (obsId) {
       [cellInfo, x2, y2] = [
-        getObsInfo2(obsId, hoverMode),
+        getObsInfo(obsId, hoverMode),
         ...hoverCoord || [null, null]
       ];
     }
@@ -251401,14 +251417,14 @@ function SpatialTooltipSubscriber$1(props) {
     const obsId = getObsIdFromHoverData(hoverData);
     if (obsId) {
       [cellInfo, x2, y2] = [
-        getObsInfo2(obsId, hoverMode),
+        getObsInfo(obsId, hoverMode),
         ...hoverCoord || [null, null]
       ];
     }
-  } else if (!useHoverInfoForTooltip && getObsInfo2 && obsHighlight) {
+  } else if (!useHoverInfoForTooltip && getObsInfo && obsHighlight) {
     const obsId = obsHighlight;
     [cellInfo, x2, y2] = [
-      getObsInfo2(obsId, hoverMode),
+      getObsInfo(obsId, hoverMode),
       ...viewInfo && viewInfo.projectFromId ? viewInfo.projectFromId(obsId) : [null, null]
     ];
   }
@@ -251582,7 +251598,7 @@ function SpatialSubscriber$1(props) {
     matrixObsIndex
   ]);
   const cellSelection = useMemo$1(() => Array.from(cellColors.keys()), [cellColors]);
-  const getObsInfo2 = useGetObsInfo(observationsLabel, obsLabelsTypes, obsLabelsData, obsSetsMembership);
+  const getObsInfo = useGetObsInfo(observationsLabel, obsLabelsTypes, obsLabelsData, obsSetsMembership);
   const getTooltipObsInfo = useCallback((tooltipObsId, tooltipObsType) => {
     if (tooltipObsType === HOVER_MODE.MOLECULE_LAYER) {
       return {
@@ -251590,8 +251606,8 @@ function SpatialSubscriber$1(props) {
         "Molecule Name": obsLocationsLabels[tooltipObsId]
       };
     }
-    return getObsInfo2(tooltipObsId);
-  }, [getObsInfo2, obsLocationsLabels]);
+    return getObsInfo(tooltipObsId);
+  }, [getObsInfo, obsLocationsLabels]);
   const [hoverData, setHoverData] = useState(null);
   const [hoverCoord, setHoverCoord] = useState(null);
   const [hoverMode, setHoverMode] = useState(null);
@@ -251719,7 +251735,7 @@ function SpatialSubscriber$1(props) {
     orbitAxis
   }, setViewState, originalViewState, imageLayerDefs: imageLayers, obsSegmentationsLayerDefs: cellsLayer, obsLocationsLayerDefs: moleculesLayer, neighborhoodLayerDefs: neighborhoodsLayer, obsLocationsIndex, obsSegmentationsIndex, obsLocations, obsLocationsLabels, obsLocationsFeatureIndex, hasSegmentations: hasSegmentationsData, obsSegmentations, obsSegmentationsType, obsCentroids, obsCentroidsIndex, cellFilter, cellSelection, cellHighlight, cellColors, neighborhoods, imageLayerLoaders: resolutionFilteredImageLayerLoaders, setCellFilter, setCellSelection: setCellSelectionProp, setCellHighlight, setHoverInfo, setMoleculeHighlight, setComponentHover: () => {
     setComponentHover(uuid2);
-  }, updateViewInfo: setComponentViewInfo, imageLayerCallbacks, segmentationLayerCallbacks, spatialAxisFixed, geneExpressionColormap, geneExpressionColormapRange, expressionData: shiftedExpressionDataForBitmask, cellColorEncoding, getExpressionValue, theme, useFullResolutionImage, photometricInterpretation }), tooltipsVisible && jsxRuntimeExports.jsx(SpatialTooltipSubscriber$1, { parentUuid: uuid2, obsHighlight: cellHighlight || moleculeHighlight, width: width2, height: height2, getObsInfo: getTooltipObsInfo, useHoverInfoForTooltip, hoverData, hoverCoord, hoverMode, getObsIdFromHoverData, featureType, featureLabelsMap }), jsxRuntimeExports.jsx(Legend, {
+  }, updateViewInfo: setComponentViewInfo, imageLayerCallbacks, segmentationLayerCallbacks, spatialAxisFixed, geneExpressionColormap, geneExpressionColormapRange, expressionData: shiftedExpressionDataForBitmask, cellColorEncoding, getExpressionValue, theme, useFullResolutionImage, photometricInterpretation }), tooltipsVisible && jsxRuntimeExports.jsx(SpatialTooltipSubscriber, { parentUuid: uuid2, obsHighlight: cellHighlight || moleculeHighlight, width: width2, height: height2, getObsInfo: getTooltipObsInfo, useHoverInfoForTooltip, hoverData, hoverCoord, hoverMode, getObsIdFromHoverData, featureType, featureLabelsMap }), jsxRuntimeExports.jsx(Legend, {
     visible: true,
     // Fix to dark theme due to black background of spatial plot.
     theme: "dark",
@@ -252980,117 +252996,6 @@ class Spatial2 extends AbstractSpatialOrScatterplot {
   }
 }
 const SpatialWrapper = forwardRef$1((props, deckRef) => jsxRuntimeExports.jsx(Spatial2, { ...props, deckRef }));
-function TooltipChild(props) {
-  const { x: x2, y: y2, parentUuid, sourceUuid, width: width2, height: height2, info: info2, tooltipsVisible, tooltipCrosshairsVisible, featureType, featureLabelsMap } = props;
-  const visible = parentUuid === sourceUuid ? tooltipsVisible : tooltipCrosshairsVisible;
-  return visible ? jsxRuntimeExports.jsx(Tooltip2D, { x: x2, y: y2, parentUuid, sourceUuid, parentWidth: width2, parentHeight: height2, children: jsxRuntimeExports.jsx(TooltipContent, { info: info2, featureType, featureLabelsMap }) }) : null;
-}
-function getXY(obsHighlight, viewInfo, obsIndex, obsLocations, useHoverInfoForTooltip, projectedHoverCoord) {
-  const hasObsCoordinates = useHoverInfoForTooltip ? true : obsIndex && obsLocations;
-  if (!hasObsCoordinates)
-    return null;
-  const obsI = obsIndex?.indexOf(obsHighlight);
-  if (obsI < 0)
-    return null;
-  if (useHoverInfoForTooltip) {
-    return [projectedHoverCoord?.[0], projectedHoverCoord?.[1]];
-  }
-  const obsCoord = [obsLocations?.data[0][obsI] || 0, obsLocations?.data[1][obsI] || 0, 0];
-  const projectedObsCoord = viewInfo?.project(obsCoord);
-  return [projectedObsCoord?.[0], projectedObsCoord?.[1]];
-}
-function getObsInfo(obsSetsData, obsType, obsId) {
-  let result = {
-    [`${capitalize$3(obsType)} ID`]: obsId
-  };
-  if (obsSetsData?.obsSetsMembership) {
-    const obsMembership = obsSetsData.obsSetsMembership.get(obsId) || [];
-    if (obsMembership) {
-      result = {
-        ...result,
-        ...Object.fromEntries(obsMembership.flatMap((path2) => path2.slice(1).map((pathEl, elLevel) => [
-          `${path2[0]}${path2.length > 2 ? ` L${elLevel + 1}` : ""}`,
-          pathEl
-        ])))
-      };
-    }
-  }
-  return result;
-}
-function SpatialTooltipSubscriber(props) {
-  const {
-    parentUuid,
-    width: width2,
-    height: height2,
-    hoverCoord,
-    featureType,
-    featureLabelsMap,
-    // Points
-    obsPoints,
-    pointLayerScopes,
-    pointLayerCoordination,
-    // Spots
-    obsSpots,
-    spotLayerScopes,
-    spotLayerCoordination,
-    // Segmentations
-    obsSegmentationsLocations,
-    segmentationLayerScopes,
-    segmentationChannelScopesByLayer,
-    segmentationChannelCoordination,
-    obsSegmentationsSetsData,
-    // Images
-    imageLayerScopes,
-    imageLayerCoordination
-  } = props;
-  const sourceUuid = useComponentHover();
-  const viewInfo = useComponentViewInfo(parentUuid);
-  const useHoverInfoForTooltip = sourceUuid === parentUuid && hoverCoord;
-  const projectedHoverCoord = useHoverInfoForTooltip ? viewInfo?.project(hoverCoord) : null;
-  let yOffset = -30;
-  return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [projectedHoverCoord && imageLayerScopes?.map((layerScope) => {
-    const { pixelHighlight, tooltipsVisible, spatialLayerVisible } = imageLayerCoordination?.[0]?.[layerScope] || {};
-    return tooltipsVisible && pixelHighlight && spatialLayerVisible ? jsxRuntimeExports.jsx(TooltipChild, { parentUuid, sourceUuid, width: width2, height: height2, info: {
-      "Pixel Value": JSON.stringify(pixelHighlight)
-    }, x: projectedHoverCoord?.[0], y: projectedHoverCoord?.[1] + (yOffset += 30), featureType, featureLabelsMap }, layerScope) : null;
-  }), segmentationLayerScopes?.flatMap((layerScope) => segmentationChannelScopesByLayer?.[layerScope]?.map((channelScope) => {
-    const { obsType, obsHighlight, tooltipsVisible, tooltipCrosshairsVisible, spatialChannelVisible } = segmentationChannelCoordination?.[0]?.[layerScope]?.[channelScope] || {};
-    const obsSetsData = obsSegmentationsSetsData?.[layerScope]?.[channelScope];
-    const obsInfo = getObsInfo(obsSetsData, obsType, obsHighlight);
-    if (!obsHighlight || !spatialChannelVisible || !tooltipsVisible && !tooltipCrosshairsVisible)
-      return null;
-    const { obsIndex, obsLocations } = obsSegmentationsLocations?.[layerScope]?.[channelScope] || {};
-    const xy = getXY(obsHighlight, viewInfo, obsIndex, obsLocations, useHoverInfoForTooltip, projectedHoverCoord);
-    if (!xy)
-      return null;
-    const [x2, y2] = xy;
-    return jsxRuntimeExports.jsx(TooltipChild, { parentUuid, sourceUuid, tooltipsVisible, tooltipCrosshairsVisible, width: width2, height: height2, info: obsInfo, x: x2, y: y2 + (yOffset += 20 + 15 * Object.keys(obsInfo).length), featureType, featureLabelsMap }, `${layerScope}-${channelScope}`);
-  })), spotLayerScopes?.map((layerScope) => {
-    const { obsType, obsHighlight, tooltipsVisible, tooltipCrosshairsVisible, spatialLayerVisible } = spotLayerCoordination?.[0]?.[layerScope] || {};
-    if (!obsHighlight || !spatialLayerVisible || !tooltipsVisible && !tooltipCrosshairsVisible)
-      return null;
-    const { obsIndex, obsSpots: obsLocations } = obsSpots?.[layerScope] || {};
-    const xy = getXY(obsHighlight, viewInfo, obsIndex, obsLocations, useHoverInfoForTooltip, projectedHoverCoord);
-    if (!xy)
-      return null;
-    const [x2, y2] = xy;
-    return jsxRuntimeExports.jsx(TooltipChild, { parentUuid, sourceUuid, tooltipsVisible, tooltipCrosshairsVisible, width: width2, height: height2, info: {
-      [`${capitalize$3(obsType)} ID`]: obsHighlight
-    }, x: x2, y: y2 + (yOffset += 30), featureType, featureLabelsMap }, layerScope);
-  }), pointLayerScopes?.map((layerScope) => {
-    const { obsType, obsHighlight, tooltipsVisible, tooltipCrosshairsVisible, spatialLayerVisible } = pointLayerCoordination?.[0]?.[layerScope] || {};
-    if (!obsHighlight || !spatialLayerVisible || !tooltipsVisible && !tooltipCrosshairsVisible)
-      return null;
-    const { obsIndex, obsPoints: obsLocations } = obsPoints?.[layerScope] || {};
-    const xy = getXY(obsHighlight, viewInfo, obsIndex, obsLocations, useHoverInfoForTooltip, projectedHoverCoord);
-    if (!xy)
-      return null;
-    const [x2, y2] = xy;
-    return jsxRuntimeExports.jsx(TooltipChild, { parentUuid, sourceUuid, tooltipsVisible, tooltipCrosshairsVisible, width: width2, height: height2, info: {
-      [`${capitalize$3(obsType)} ID`]: obsHighlight
-    }, x: x2, y: y2 + (yOffset += 30), featureType, featureLabelsMap }, layerScope);
-  })] });
-}
 class ErrorBoundary extends React__default.Component {
   constructor(props) {
     super(props);
@@ -253109,10 +253014,15 @@ class ErrorBoundary extends React__default.Component {
   }
 }
 const LazySpatialThree = React__default.lazy(async () => {
-  const { SpatialWrapper: SpatialWrapper2 } = await import("./index-DqDDC59y.js");
+  const { SpatialWrapper: SpatialWrapper2 } = await import("./index-D7Xl0b0t.js");
   return { default: SpatialWrapper2 };
 });
 const SpatialThreeAdapter = React__default.forwardRef((props, ref2) => jsxRuntimeExports.jsx("div", { ref: ref2, style: { width: "100%", height: "100%" }, children: jsxRuntimeExports.jsx(ErrorBoundary, { children: jsxRuntimeExports.jsx(Suspense, { fallback: jsxRuntimeExports.jsx("div", { children: "Loading..." }), children: jsxRuntimeExports.jsx(LazySpatialThree, { ...props }) }) }) }));
+const LazySpatialAccelerated = React__default.lazy(async () => {
+  const { SpatialWrapper: SpatialWrapper2 } = await import("./index-CkinFFl6.js");
+  return { default: SpatialWrapper2 };
+});
+const SpatialAcceleratedAdapter = React__default.forwardRef((props, ref2) => jsxRuntimeExports.jsx("div", { ref: ref2, style: { width: "100%", height: "100%" }, children: jsxRuntimeExports.jsx(ErrorBoundary, { children: jsxRuntimeExports.jsx(Suspense, { fallback: jsxRuntimeExports.jsx("div", { children: "Loading..." }), children: jsxRuntimeExports.jsx(LazySpatialAccelerated, { ...props }) }) }) }));
 const DEFAULT_VIEW_STATE = {
   zoom: 0,
   target: [0, 0, 0],
@@ -253173,7 +253083,8 @@ function SpatialSubscriber(props) {
     title: title2 = "Spatial",
     bitmaskValueIsIndex = false,
     // TODO: move to coordination type
-    three: threeFor3d = false
+    three: threeFor3d = false,
+    accelerated: acceleratedFor3d = false
   } = props;
   const loaders = useLoaders();
   const setComponentHover = useSetComponentHover();
@@ -253274,7 +253185,8 @@ function SpatialSubscriber(props) {
     CoordinationType$1.SPATIAL_TARGET_C,
     CoordinationType$1.SPATIAL_CHANNEL_VISIBLE,
     CoordinationType$1.SPATIAL_CHANNEL_COLOR,
-    CoordinationType$1.SPATIAL_CHANNEL_WINDOW
+    CoordinationType$1.SPATIAL_CHANNEL_WINDOW,
+    CoordinationType$1.SPATIAL_MAX_RESOLUTION
   ], coordinationScopes, coordinationScopesBy, CoordinationType$1.IMAGE_LAYER, CoordinationType$1.IMAGE_CHANNEL);
   const spotLayerCoordination = useComplexCoordination([
     CoordinationType$1.OBS_TYPE,
@@ -253312,7 +253224,6 @@ function SpatialSubscriber(props) {
     CoordinationType$1.LEGEND_VISIBLE
   ], coordinationScopes, coordinationScopesBy, CoordinationType$1.POINT_LAYER);
   const is3dMode = spatialRenderingMode === "3D";
-  const shouldUseThree = threeFor3d && is3dMode;
   const [deckWidth, deckHeight, deckRef] = useDeckCanvasSize();
   const [threeWidth, threeHeight, threeRef] = useGridItemSize();
   const width2 = threeFor3d && deckWidth === void 0 ? threeWidth : deckWidth;
@@ -253581,138 +253492,22 @@ function SpatialSubscriber(props) {
       }
     }
   };
-  return jsxRuntimeExports.jsxs(TitleInfo, { title: title2, info: subtitle, isSpatial: true, urls: urls2, theme, closeButtonVisible, downloadButtonVisible, removeGridComponent, isReady, errors, children: [shouldUseThree ? jsxRuntimeExports.jsx(SpatialThreeAdapter, {
-    ref: threeRef,
-    uuid: uuid2,
-    width: width2,
-    height: height2,
-    theme,
-    hideTools: !isSelectable,
-    rotation: [rotationX, rotationY, rotationZ],
-    setRotationX,
-    setRotationY,
-    setRotationZ,
-    // Global view state
-    targetT,
-    targetZ,
-    viewState: isValidViewState ? {
-      zoom: zoom2,
-      target: [targetX2, targetY2, targetZ],
-      rotationX,
-      rotationOrbit
-    } : DEFAULT_VIEW_STATE,
-    orbitAxis,
-    spatialAxisFixed,
-    setViewState: isValidViewState ? setViewState : SET_VIEW_STATE_NOOP,
-    originalViewState,
-    spatialRenderingMode,
-    updateViewInfo: setComponentViewInfo,
-    delegateHover,
-    onEntitySelected,
-    // Points
-    obsPoints: obsPointsData,
-    pointLayerScopes,
-    pointLayerCoordination,
-    pointMultiObsLabels: pointMultiObsLabelsData,
-    // Spots
-    obsSpots: obsSpotsData,
-    spotLayerScopes,
-    spotLayerCoordination,
-    obsSpotsSets: obsSpotsSetsData,
-    spotMatrixIndices: spotMultiIndicesData,
-    spotMultiExpressionData: spotMultiExpressionNormData,
-    // Segmentations
-    segmentationLayerScopes,
-    segmentationLayerCoordination,
-    segmentationChannelScopesByLayer,
-    segmentationChannelCoordination,
-    obsSegmentations: obsSegmentationsData,
-    obsSegmentationsLocations: obsSegmentationsLocationsData,
-    obsSegmentationsSets: obsSegmentationsSetsData,
-    segmentationMatrixIndices: segmentationMultiIndicesData,
-    segmentationMultiExpressionData: segmentationMultiExpressionNormData,
-    bitmaskValueIsIndex,
-    // Images
-    images: imageData,
-    imageLayerScopes,
-    imageLayerCoordination,
-    imageChannelScopesByLayer,
-    imageChannelCoordination
-  }) : jsxRuntimeExports.jsx(SpatialWrapper, {
-    ref: deckRef,
-    uuid: uuid2,
-    width: width2,
-    height: height2,
-    theme,
-    hideTools: !isSelectable,
-    // Global view state
-    targetT,
-    targetZ,
-    viewState: isValidViewState ? {
-      zoom: zoom2,
-      target: [targetX2, targetY2, targetZ],
-      rotationX,
-      rotationOrbit
-    } : DEFAULT_VIEW_STATE,
-    orbitAxis,
-    spatialAxisFixed,
-    setViewState: isValidViewState ? setViewState : SET_VIEW_STATE_NOOP,
-    originalViewState,
-    spatialRenderingMode,
-    updateViewInfo: setComponentViewInfo,
-    delegateHover,
-    // Points
-    obsPoints: obsPointsData,
-    pointLayerScopes,
-    pointLayerCoordination,
-    pointMultiObsLabels: pointMultiObsLabelsData,
-    // Spots
-    obsSpots: obsSpotsData,
-    spotLayerScopes,
-    spotLayerCoordination,
-    obsSpotsSets: obsSpotsSetsData,
-    spotMatrixIndices: spotMultiIndicesData,
-    spotMultiExpressionData: spotMultiExpressionNormData,
-    // Segmentations
-    segmentationLayerScopes,
-    segmentationLayerCoordination,
-    segmentationChannelScopesByLayer,
-    segmentationChannelCoordination,
-    obsSegmentations: obsSegmentationsData,
-    obsSegmentationsLocations: obsSegmentationsLocationsData,
-    obsSegmentationsSets: obsSegmentationsSetsData,
-    segmentationMatrixIndices: segmentationMultiIndicesData,
-    segmentationMultiExpressionData: segmentationMultiExpressionNormData,
-    bitmaskValueIsIndex,
-    // Images
-    images: imageData,
-    imageLayerScopes,
-    imageLayerCoordination,
-    imageChannelScopesByLayer,
-    imageChannelCoordination
-  }), !disableTooltip && jsxRuntimeExports.jsx(SpatialTooltipSubscriber, {
-    parentUuid: uuid2,
-    width: width2,
-    height: height2,
-    hoverCoord,
-    // Points
-    obsPoints: obsPointsData,
-    pointLayerScopes,
-    pointLayerCoordination,
-    // Spots
-    obsSpots: obsSpotsData,
-    spotLayerScopes,
-    spotLayerCoordination,
-    // Segmentations
-    obsSegmentationsLocations: obsSegmentationsLocationsData,
-    segmentationLayerScopes,
-    segmentationChannelScopesByLayer,
-    segmentationChannelCoordination,
-    obsSegmentationsSetsData,
-    // Images
-    imageLayerScopes,
-    imageLayerCoordination
-  }), jsxRuntimeExports.jsx(
+  return jsxRuntimeExports.jsxs(TitleInfo, { title: title2, info: subtitle, isSpatial: true, urls: urls2, theme, closeButtonVisible, downloadButtonVisible, removeGridComponent, isReady, errors, children: [is3dMode ? acceleratedFor3d ? jsxRuntimeExports.jsx(SpatialAcceleratedAdapter, { ref: threeRef, uuid: uuid2, width: width2, height: height2, theme, hideTools: !isSelectable, rotation: [rotationX, rotationY, rotationZ], setRotationX, setRotationY, setRotationZ, targetT, targetZ, viewState: isValidViewState ? {
+    zoom: zoom2,
+    target: [targetX2, targetY2, targetZ],
+    rotationX,
+    rotationOrbit
+  } : DEFAULT_VIEW_STATE, orbitAxis, spatialAxisFixed, setViewState: isValidViewState ? setViewState : SET_VIEW_STATE_NOOP, originalViewState, spatialRenderingMode, updateViewInfo: setComponentViewInfo, delegateHover, onEntitySelected, obsPoints: obsPointsData, pointLayerScopes, pointLayerCoordination, pointMultiObsLabels: pointMultiObsLabelsData, obsSpots: obsSpotsData, spotLayerScopes, spotLayerCoordination, obsSpotsSets: obsSpotsSetsData, spotMatrixIndices: spotMultiIndicesData, spotMultiExpressionData: spotMultiExpressionNormData, segmentationLayerScopes, segmentationLayerCoordination, segmentationChannelScopesByLayer, segmentationChannelCoordination, obsSegmentations: obsSegmentationsData, obsSegmentationsLocations: obsSegmentationsLocationsData, obsSegmentationsSets: obsSegmentationsSetsData, segmentationMatrixIndices: segmentationMultiIndicesData, segmentationMultiExpressionData: segmentationMultiExpressionNormData, bitmaskValueIsIndex, images: imageData, imageLayerScopes, imageLayerCoordination, imageChannelScopesByLayer, imageChannelCoordination }) : jsxRuntimeExports.jsx(SpatialThreeAdapter, { ref: threeRef, uuid: uuid2, width: width2, height: height2, theme, hideTools: !isSelectable, rotation: [rotationX, rotationY, rotationZ], setRotationX, setRotationY, setRotationZ, targetT, targetZ, viewState: isValidViewState ? {
+    zoom: zoom2,
+    target: [targetX2, targetY2, targetZ],
+    rotationX,
+    rotationOrbit
+  } : DEFAULT_VIEW_STATE, orbitAxis, spatialAxisFixed, setViewState: isValidViewState ? setViewState : SET_VIEW_STATE_NOOP, originalViewState, spatialRenderingMode, updateViewInfo: setComponentViewInfo, delegateHover, onEntitySelected, obsPoints: obsPointsData, pointLayerScopes, pointLayerCoordination, pointMultiObsLabels: pointMultiObsLabelsData, obsSpots: obsSpotsData, spotLayerScopes, spotLayerCoordination, obsSpotsSets: obsSpotsSetsData, spotMatrixIndices: spotMultiIndicesData, spotMultiExpressionData: spotMultiExpressionNormData, segmentationLayerScopes, segmentationLayerCoordination, segmentationChannelScopesByLayer, segmentationChannelCoordination, obsSegmentations: obsSegmentationsData, obsSegmentationsLocations: obsSegmentationsLocationsData, obsSegmentationsSets: obsSegmentationsSetsData, segmentationMatrixIndices: segmentationMultiIndicesData, segmentationMultiExpressionData: segmentationMultiExpressionNormData, bitmaskValueIsIndex, images: imageData, imageLayerScopes, imageLayerCoordination, imageChannelScopesByLayer, imageChannelCoordination }) : jsxRuntimeExports.jsx(SpatialWrapper, { ref: deckRef, uuid: uuid2, width: width2, height: height2, theme, hideTools: !isSelectable, targetT, targetZ, viewState: isValidViewState ? {
+    zoom: zoom2,
+    target: [targetX2, targetY2, targetZ],
+    rotationX,
+    rotationOrbit
+  } : DEFAULT_VIEW_STATE, orbitAxis, spatialAxisFixed, setViewState: isValidViewState ? setViewState : SET_VIEW_STATE_NOOP, originalViewState, spatialRenderingMode, updateViewInfo: setComponentViewInfo, delegateHover, obsPoints: obsPointsData, pointLayerScopes, pointLayerCoordination, pointMultiObsLabels: pointMultiObsLabelsData, obsSpots: obsSpotsData, spotLayerScopes, spotLayerCoordination, obsSpotsSets: obsSpotsSetsData, spotMatrixIndices: spotMultiIndicesData, spotMultiExpressionData: spotMultiExpressionNormData, segmentationLayerScopes, segmentationLayerCoordination, segmentationChannelScopesByLayer, segmentationChannelCoordination, obsSegmentations: obsSegmentationsData, obsSegmentationsLocations: obsSegmentationsLocationsData, obsSegmentationsSets: obsSegmentationsSetsData, segmentationMatrixIndices: segmentationMultiIndicesData, segmentationMultiExpressionData: segmentationMultiExpressionNormData, bitmaskValueIsIndex, images: imageData, imageLayerScopes, imageLayerCoordination, imageChannelScopesByLayer, imageChannelCoordination }), jsxRuntimeExports.jsx(
     MultiLegend,
     {
       // Fix to dark theme due to black background of spatial plot.
@@ -254547,11 +254342,11 @@ const Heatmap$1 = forwardRef$1((props, deckRef) => {
 });
 Heatmap$1.displayName = "Heatmap";
 function HeatmapTooltipSubscriber(props) {
-  const { parentUuid, width: width2, height: height2, transpose: transpose2, getObsInfo: getObsInfo2, getFeatureInfo, obsHighlight, featureHighlight, featureType, featureLabelsMap } = props;
+  const { parentUuid, width: width2, height: height2, transpose: transpose2, getObsInfo, getFeatureInfo, obsHighlight, featureHighlight, featureType, featureLabelsMap } = props;
   const sourceUuid = useComponentHover();
   const viewInfo = useComponentViewInfo(parentUuid);
-  const [cellInfo, cellCoord] = obsHighlight && getObsInfo2 ? [
-    getObsInfo2(obsHighlight),
+  const [cellInfo, cellCoord] = obsHighlight && getObsInfo ? [
+    getObsInfo(obsHighlight),
     viewInfo && viewInfo.projectFromId ? viewInfo.projectFromId(obsHighlight, null)[transpose2 ? 0 : 1] : null
   ] : [null, null];
   const [geneInfo, geneCoord] = featureHighlight && getFeatureInfo ? [
@@ -254659,7 +254454,7 @@ function HeatmapSubscriber(props) {
     cellSetSelection,
     obsIndex
   ]);
-  const getObsInfo2 = useGetObsInfo(observationsLabel, obsLabelsTypes, obsLabelsData, obsSetsMembership);
+  const getObsInfo = useGetObsInfo(observationsLabel, obsLabelsTypes, obsLabelsData, obsSetsMembership);
   const getObsMembership = useGetObsMembership(obsSetsMembership);
   const getFeatureInfo = useCallback((featureId2) => {
     if (featureId2) {
@@ -254699,7 +254494,7 @@ function HeatmapSubscriber(props) {
     setTargetY(target2[1]);
   }, colormapRange: geneExpressionColormapRange, setColormapRange: setGeneExpressionColormapRange, height: height2, width: width2, theme, uuid: uuid2, uint8ObsFeatureMatrix: uint8ObsFeatureMatrix?.data, cellColors, colormap: geneExpressionColormap, setIsRendering, setCellHighlight, setGeneHighlight, featureLabelsMap, obsIndex, featureIndex, setTrackHighlight, setComponentHover: () => {
     setComponentHover(uuid2);
-  }, updateViewInfo: setComponentViewInfo, observationsTitle, variablesTitle, variablesDashes: false, observationsDashes: false, cellColorLabels, useDevicePixels: true, onHeatmapClick, setColorEncoding: setHoveredColorEncoding }), tooltipsVisible && jsxRuntimeExports.jsx(HeatmapTooltipSubscriber, { parentUuid: uuid2, width: width2, height: height2, transpose: transpose2, getObsInfo: getObsInfo2, getFeatureInfo, obsHighlight: cellHighlight, featureHighlight: geneHighlight, featureType, featureLabelsMap }), jsxRuntimeExports.jsx(Legend, { visible: true, theme, featureType, featureValueType, obsColorEncoding: "geneExpression", considerSelections: false, featureSelection: geneSelection, obsSetSelection: cellSetSelection, featureValueColormap: geneExpressionColormap, featureValueColormapRange: geneExpressionColormapRange, extent: obsFeatureMatrixExtent })] });
+  }, updateViewInfo: setComponentViewInfo, observationsTitle, variablesTitle, variablesDashes: false, observationsDashes: false, cellColorLabels, useDevicePixels: true, onHeatmapClick, setColorEncoding: setHoveredColorEncoding }), tooltipsVisible && jsxRuntimeExports.jsx(HeatmapTooltipSubscriber, { parentUuid: uuid2, width: width2, height: height2, transpose: transpose2, getObsInfo, getFeatureInfo, obsHighlight: cellHighlight, featureHighlight: geneHighlight, featureType, featureLabelsMap }), jsxRuntimeExports.jsx(Legend, { visible: true, theme, featureType, featureValueType, obsColorEncoding: "geneExpression", considerSelections: false, featureSelection: geneSelection, obsSetSelection: cellSetSelection, featureValueColormap: geneExpressionColormap, featureValueColormapRange: geneExpressionColormapRange, extent: obsFeatureMatrixExtent })] });
 }
 function _classCallCheck(a2, n3) {
   if (!(a2 instanceof n3)) throw new TypeError("Cannot call a class as a function");
@@ -264021,7 +263816,7 @@ const useStyles$c = makeStyles()(() => ({
   }
 }));
 function ChannelOptions(props) {
-  const { onRemove: onRemove2, onResetWindowUsingIQR, showValueExtent, setShowValueExtent } = props;
+  const { onRemove: onRemove2, onResetWindowUsingIQR, showValueExtent, setShowValueExtent, numResolutions, spatialMaxResolution, setSpatialMaxResolution } = props;
   const [open2, setOpen] = useState(false);
   const { classes: classes2 } = useStyles$c();
   const { classes: selectClasses2 } = useSelectStyles();
@@ -264034,7 +263829,7 @@ function ChannelOptions(props) {
     setShowValueExtent(event2.target.value === "Value Min/Max");
   }
   const domainTypeId = $bdb11010cef70236$export$f680877a34711e37();
-  return jsxRuntimeExports.jsxs(PopperMenu, { open: open2, setOpen, buttonIcon: jsxRuntimeExports.jsx(MoreVertIcon, { fontSize: "small" }), buttonClassName: classes2.channelMenuButton, containerClassName: menuClasses.imageLayerPopperContainer, placement: "bottom-end", withPaper: true, "aria-label": "Open channel options menu", children: [jsxRuntimeExports.jsxs(MenuItem, { dense: true, disableGutters: true, children: [jsxRuntimeExports.jsx("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: domainTypeId, children: "Slider Extent: " }), jsxRuntimeExports.jsxs(NativeSelect, { onChange: handleDomainTypeChange, value: showValueExtent ? "Value Min/Max" : "Dtype Min/Max", inputProps: { id: domainTypeId, "aria-label": "Slider extent selector" }, classes: { root: selectClasses2.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, { dense: true, disableGutters: true, component: "button", onClick: onResetWindowUsingIQR, className: classes2.menuItemButton, "aria-label": "Click to use IQR for channel", children: "Reset window using IQR" }), jsxRuntimeExports.jsx(MenuItem, { dense: true, disableGutters: true, component: "button", onClick: handleRemove, className: classes2.menuItemButton, "aria-label": "Click to remove channel", children: "Remove channel" })] });
+  return jsxRuntimeExports.jsxs(PopperMenu, { open: open2, setOpen, buttonIcon: jsxRuntimeExports.jsx(MoreVertIcon, { fontSize: "small" }), buttonClassName: classes2.channelMenuButton, containerClassName: menuClasses.imageLayerPopperContainer, placement: "bottom-end", withPaper: true, "aria-label": "Open channel options menu", children: [jsxRuntimeExports.jsxs(MenuItem, { dense: true, disableGutters: true, children: [jsxRuntimeExports.jsx("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: domainTypeId, children: "Best Resolution: " }), jsxRuntimeExports.jsx(Slider, { value: spatialMaxResolution || 1, valueLabelDisplay: "auto", onChange: (e3, v) => setSpatialMaxResolution(v), min: 1, max: numResolutions - 1, step: 1, orientation: "horizontal" })] }), jsxRuntimeExports.jsxs(MenuItem, { dense: true, disableGutters: true, children: [jsxRuntimeExports.jsx("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: domainTypeId, children: "Slider Extent: " }), jsxRuntimeExports.jsxs(NativeSelect, { onChange: handleDomainTypeChange, value: showValueExtent ? "Value Min/Max" : "Dtype Min/Max", inputProps: { id: domainTypeId, "aria-label": "Slider extent selector" }, classes: { root: selectClasses2.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, { dense: true, disableGutters: true, component: "button", onClick: onResetWindowUsingIQR, className: classes2.menuItemButton, "aria-label": "Click to use IQR for channel", children: "Reset window using IQR" }), jsxRuntimeExports.jsx(MenuItem, { dense: true, disableGutters: true, component: "button", onClick: handleRemove, className: classes2.menuItemButton, "aria-label": "Click to remove channel", children: "Remove channel" })] });
 }
 const useStyles$b = makeStyles()(() => ({
   channelSlider: {
@@ -264121,7 +263916,10 @@ function ImageChannelController(props) {
     // The channel names.
     image: image2,
     // To get the channel window extent using image metadata.
-    spatialRenderingMode
+    spatialRenderingMode,
+    numResolutions,
+    spatialMaxResolution,
+    setSpatialMaxResolution
   } = props;
   const removeChannel = useRemoveImageChannelInMetaCoordinationScopes();
   const [showValueExtent, setShowValueExtent] = useState(true);
@@ -264158,7 +263956,7 @@ function ImageChannelController(props) {
       setWindow2(minMaxDomain);
     }
   }
-  return jsxRuntimeExports.jsxs(Grid$1, { container: true, direction: "row", justifyContent: "space-between", children: [jsxRuntimeExports.jsx(Grid$1, { size: 1, children: jsxRuntimeExports.jsx(ChannelVisibilityCheckbox, { color: color2, setColor: setColor2, visible, setVisible, disabled: isLoading, theme, colormapOn }) }), jsxRuntimeExports.jsx(Grid$1, { size: 1, children: jsxRuntimeExports.jsx(ChannelColorPickerMenu, { color: color2, setColor: setColor2, visible, setVisible, disabled: isLoading, theme, isStaticColor: !colormapOn, palette: VIEWER_PALETTE }) }), jsxRuntimeExports.jsx(Grid$1, { size: 6, children: jsxRuntimeExports.jsx(ChannelSelectionDropdown, { featureIndex, targetC, setTargetC, setWindow: setWindow2, disabled: isLoading }) }), jsxRuntimeExports.jsx(Grid$1, { size: 3, children: jsxRuntimeExports.jsx(ChannelSlider, { image: image2, targetT, targetZ, targetC, window: window2, setWindow: setWindow2, disabled, color: color2, theme, colormapOn, showValueExtent, minMaxDomain }) }), jsxRuntimeExports.jsx(Grid$1, { size: 1, children: jsxRuntimeExports.jsx(ChannelOptions, { onRemove: onRemove2, showValueExtent, setShowValueExtent, onResetWindowUsingIQR: handleResetWindowUsingIQR }) })] });
+  return jsxRuntimeExports.jsxs(Grid$1, { container: true, direction: "row", justifyContent: "space-between", children: [jsxRuntimeExports.jsx(Grid$1, { size: 1, children: jsxRuntimeExports.jsx(ChannelVisibilityCheckbox, { color: color2, setColor: setColor2, visible, setVisible, disabled: isLoading, theme, colormapOn }) }), jsxRuntimeExports.jsx(Grid$1, { size: 1, children: jsxRuntimeExports.jsx(ChannelColorPickerMenu, { color: color2, setColor: setColor2, visible, setVisible, disabled: isLoading, theme, isStaticColor: !colormapOn, palette: VIEWER_PALETTE }) }), jsxRuntimeExports.jsx(Grid$1, { size: 6, children: jsxRuntimeExports.jsx(ChannelSelectionDropdown, { featureIndex, targetC, setTargetC, setWindow: setWindow2, disabled: isLoading }) }), jsxRuntimeExports.jsx(Grid$1, { size: 3, children: jsxRuntimeExports.jsx(ChannelSlider, { image: image2, targetT, targetZ, targetC, window: window2, setWindow: setWindow2, disabled, color: color2, theme, colormapOn, showValueExtent, minMaxDomain }) }), jsxRuntimeExports.jsx(Grid$1, { size: 1, children: jsxRuntimeExports.jsx(ChannelOptions, { onRemove: onRemove2, showValueExtent, setShowValueExtent, onResetWindowUsingIQR: handleResetWindowUsingIQR, numResolutions, spatialMaxResolution, setSpatialMaxResolution }) })] });
 }
 function DimensionSlider(props) {
   const { boundingSlice, sliceValue, setSliceValue, label: label2 } = props;
@@ -264261,10 +264059,11 @@ function ImageLayerController(props) {
   const { classes: controllerSectionClasses } = useControllerSectionStyles();
   const isMultiChannel = photometricInterpretation !== "RGB";
   return jsxRuntimeExports.jsx(Grid$1, { className: controllerSectionClasses.layerControllerGrid, children: jsxRuntimeExports.jsxs(Paper, { elevation: 4, className: controllerSectionClasses.layerControllerRoot, children: [jsxRuntimeExports.jsxs(Grid$1, { container: true, direction: "row", justifyContent: "space-between", children: [jsxRuntimeExports.jsx(Grid$1, { size: 1, children: jsxRuntimeExports.jsx(Button, { className: menuClasses.imageLayerVisibleButton, onClick: handleVisibleChange, "aria-label": "Toggle layer visibility", children: jsxRuntimeExports.jsx(Visibility, {}) }) }), jsxRuntimeExports.jsx(Grid$1, { size: 1 }), jsxRuntimeExports.jsx(Grid$1, { size: 6, children: jsxRuntimeExports.jsx(Typography, { className: menuClasses.imageLayerName, children: label2 }) }), jsxRuntimeExports.jsx(Grid$1, { size: 2, children: jsxRuntimeExports.jsx(Slider, { value: opacity2, min: 0, max: 1, step: 1e-3, onChange: handleOpacityChange, className: menuClasses.imageLayerOpacitySlider, orientation: "horizontal", "aria-label": `Adjust opacity for layer ${label2}` }) }), jsxRuntimeExports.jsx(Grid$1, { size: 1, children: jsxRuntimeExports.jsx(ImageLayerEllipsisMenu, { colormap, setColormap, photometricInterpretation, setPhotometricInterpretation, spatialTargetResolution, setSpatialTargetResolution, volumetricRenderingAlgorithm, setVolumetricRenderingAlgorithm, spatialLayerTransparentColor, setSpatialLayerTransparentColor, spatialRenderingMode, image: image2, channelScopes, tooltipsVisible, setTooltipsVisible, channelLabelsVisible, setChannelLabelsVisible, channelLabelsOrientation, setChannelLabelsOrientation, channelLabelSize, setChannelLabelSize }) }), jsxRuntimeExports.jsxs(Grid$1, { size: 1, container: true, direction: "row", children: [jsxRuntimeExports.jsx(ImageIcon, { className: classes2.layerTypeImageIcon }), isMultiChannel ? jsxRuntimeExports.jsx(Button, { onClick: handleOpenChange, className: classes2.channelExpansionButton, "aria-label": "Expand or collapse channel controls", children: open2 ? jsxRuntimeExports.jsx(ExpandLess, {}) : jsxRuntimeExports.jsx(ExpandMoreIcon, {}) }) : null] })] }), isMultiChannel && open2 ? jsxRuntimeExports.jsxs(Grid$1, { container: true, direction: "column", justifyContent: "space-between", className: classes2.imageChannelControllerGrid, children: [channelScopes.map((cScope) => {
-    const { spatialTargetC, spatialChannelVisible, spatialChannelOpacity, spatialChannelColor, spatialChannelWindow } = channelCoordination[cScope];
-    const { setSpatialTargetC, setSpatialChannelVisible, setSpatialChannelOpacity, setSpatialChannelColor, setSpatialChannelWindow } = setChannelCoordination[cScope];
+    const { spatialTargetC, spatialChannelVisible, spatialChannelOpacity, spatialChannelColor, spatialChannelWindow, spatialMaxResolution } = channelCoordination[cScope];
+    const { setSpatialTargetC, setSpatialChannelVisible, setSpatialChannelOpacity, setSpatialChannelColor, setSpatialChannelWindow, setSpatialMaxResolution } = setChannelCoordination[cScope];
     const channelIndex = image2?.getChannelIndex(spatialTargetC);
-    return jsxRuntimeExports.jsx(ImageChannelController, { theme, coordinationScopesRaw, layerScope, channelScope: cScope, targetT, targetZ, targetC: channelIndex, setTargetC: setSpatialTargetC, visible: spatialChannelVisible, setVisible: setSpatialChannelVisible, opacity: spatialChannelOpacity, setOpacity: setSpatialChannelOpacity, color: spatialChannelColor, setColor: setSpatialChannelColor, window: spatialChannelWindow, setWindow: setSpatialChannelWindow, colormapOn: colormap !== null, featureIndex, image: image2, spatialRenderingMode }, cScope);
+    const numResolutions = image2?.getNumResolutions();
+    return jsxRuntimeExports.jsx(ImageChannelController, { theme, coordinationScopesRaw, layerScope, channelScope: cScope, targetT, targetZ, targetC: channelIndex, setTargetC: setSpatialTargetC, visible: spatialChannelVisible, setVisible: setSpatialChannelVisible, opacity: spatialChannelOpacity, setOpacity: setSpatialChannelOpacity, color: spatialChannelColor, setColor: setSpatialChannelColor, window: spatialChannelWindow, setWindow: setSpatialChannelWindow, colormapOn: colormap !== null, featureIndex, image: image2, spatialRenderingMode, numResolutions, spatialMaxResolution, setSpatialMaxResolution }, cScope);
   }), jsxRuntimeExports.jsx(Button, { disabled: channelScopes.length === MAX_CHANNELS$1 || channelScopes.length === imageNumChannels, onClick: handleChannelAdd, fullWidth: true, variant: "outlined", className: classes2.imageLayerButton, startIcon: jsxRuntimeExports.jsx(AddIcon, {}), size: "small", "aria-label": "Add a channel to this layer", children: "Add Channel" })] }) : null, is3dMode && image2 ? jsxRuntimeExports.jsxs(Grid$1, { container: true, direction: "column", justifyContent: "space-between", className: classes2.imageChannelControllerGrid, children: [jsxRuntimeExports.jsx(Typography, { className: classes2.clippingPanesLabel, children: "Clipping planes:" }), jsxRuntimeExports.jsx(Grid$1, { size: 12, className: classes2.clippingSliders, children: jsxRuntimeExports.jsx(ClippingSliders, { image: image2, spatialSliceX, spatialSliceY, spatialSliceZ, setSpatialSliceX, setSpatialSliceY, setSpatialSliceZ }) })] }) : null] }) });
 }
 const useStyles$7 = makeStyles()((theme) => ({
@@ -264369,7 +264168,8 @@ function LayerControllerSubscriber(props) {
     CoordinationType$1.SPATIAL_TARGET_C,
     CoordinationType$1.SPATIAL_CHANNEL_VISIBLE,
     CoordinationType$1.SPATIAL_CHANNEL_COLOR,
-    CoordinationType$1.SPATIAL_CHANNEL_WINDOW
+    CoordinationType$1.SPATIAL_CHANNEL_WINDOW,
+    CoordinationType$1.SPATIAL_MAX_RESOLUTION
   ], coordinationScopes, coordinationScopesBy, CoordinationType$1.IMAGE_LAYER, CoordinationType$1.IMAGE_CHANNEL);
   const spotLayerCoordination = useComplexCoordination([
     CoordinationType$1.OBS_TYPE,
@@ -266419,7 +266219,7 @@ function HiglassGlobalStyles(props) {
 }
 register({ dataFetcher: ZarrMultivecDataFetcher_default, config: ZarrMultivecDataFetcher_default.config }, { pluginType: "dataFetcher" });
 const LazyHiGlassComponent = React__default.lazy(async () => {
-  const { HiGlassComponent } = await import("./higlass-B5Yf-THY.js");
+  const { HiGlassComponent } = await import("./higlass-0qSOunpw.js");
   return { default: HiGlassComponent };
 });
 const HG_SIZE = 800;
@@ -269366,7 +269166,7 @@ function NeuroglancerGlobalStyles(props) {
   const { classes: classes2 } = props;
   return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(GlobalStyles$3, { styles: globalNeuroglancerCss }), jsxRuntimeExports.jsx(ScopedGlobalStyles, { styles: globalNeuroglancerStyles, parentClassName: classes2.neuroglancerWrapper })] });
 }
-const LazyReactNeuroglancer = React__default.lazy(() => import("./ReactNeuroglancer-CNzkD33k.js"));
+const LazyReactNeuroglancer = React__default.lazy(() => import("./ReactNeuroglancer-CebI6oJd.js"));
 function createWorker() {
   return new WorkerFactory();
 }
@@ -356890,6 +356690,10 @@ class ImageWrapper {
     const { labels: labels2, shape: shape2 } = Array.isArray(loader2.data) ? loader2.data[0] : loader2.data;
     return shape2[labels2.indexOf("c")];
   }
+  getNumResolutions() {
+    const loader2 = this.vivLoader;
+    return Array.isArray(loader2.data) ? loader2.data.length : 1;
+  }
   isMultiResolution() {
     const loader2 = this.vivLoader;
     const hasViewableResolutions = Boolean(Array.from({
@@ -356900,13 +356704,21 @@ class ImageWrapper {
   getMultiResolutionStats() {
     const loader2 = this.vivLoader;
     return Array.from({ length: loader2.data.length }).fill(0).map((_, resolution) => {
-      const { height: height2, width: width2, depthDownsampled, totalBytes } = getStatsForResolution(loader2.data, resolution);
+      const { height: height2, width: width2, depth, depthDownsampled, totalBytes, dims } = getStatsForResolution(loader2.data, resolution);
       return {
         canLoad: canLoadResolution(loader2.data, resolution),
         height: height2,
         width: width2,
+        depth,
         depthDownsampled,
-        totalBytes
+        totalBytes,
+        dims
+        // chunkHeight
+        // chunkWidth
+        // chunkDepth
+        // physicalSizeVoxel
+        // eslint-disable-next-line max-len
+        // physicalSizeTotal (physicalSizeVoxel * highest-resolution numPixels, for each dimension)
       };
     });
   }
@@ -373104,7 +372916,11 @@ class SpatialDataShapesSource extends SpatialDataTableSource {
    */
   // eslint-disable-next-line class-methods-use-this
   _isWkbColumn(arrowTable, columnName) {
-    return arrowTable.schema.fields.find((field2) => field2.name === columnName)?.metadata?.get("ARROW:extension:name") === "geoarrow.wkb";
+    const geometryEncodingValue = arrowTable.schema.fields.find((field2) => field2.name === columnName)?.metadata?.get("ARROW:extension:name");
+    if (!geometryEncodingValue) {
+      return true;
+    }
+    return geometryEncodingValue === "geoarrow.wkb";
   }
   /**
    * Helper to decode WKB geometry column as flat coordinates (for points).
@@ -379539,6 +379355,7 @@ const baseCoordinationTypes = [
   new PluginCoordinationType(CoordinationType$1.SPATIAL_RENDERING_MODE, "2D", z.enum(["2D", "3D"]).nullable()),
   new PluginCoordinationType(CoordinationType$1.VOLUMETRIC_RENDERING_ALGORITHM, "additive", z.enum(["maximumIntensityProjection", "additive"])),
   new PluginCoordinationType(CoordinationType$1.SPATIAL_TARGET_RESOLUTION, 0, z.number().nullable()),
+  new PluginCoordinationType(CoordinationType$1.SPATIAL_MAX_RESOLUTION, null, z.number().nullable()),
   new PluginCoordinationType(CoordinationType$1.SPATIAL_SLICE_X, null, z.array(z.number()).length(2).nullable()),
   new PluginCoordinationType(CoordinationType$1.SPATIAL_SLICE_Y, null, z.array(z.number()).length(2).nullable()),
   new PluginCoordinationType(CoordinationType$1.SPATIAL_SLICE_Z, null, z.array(z.number()).length(2).nullable()),
@@ -379653,170 +379470,176 @@ function Vitessce(props) {
   );
 }
 export {
-  LinearMipmapNearestFilter as $,
-  ACESFilmicToneMapping as A,
-  BasicShadowMap as B,
-  Clock as C,
+  Bone as $,
+  LineSegments as A,
+  BufferAttribute as B,
+  Color as C,
   DirectionalLight2 as D,
-  EventDispatcher as E,
+  Line as E,
   FileLoader as F,
   Group$1 as G,
-  TextureLoader as H,
+  LineLoop as H,
   InstancedMesh as I,
-  ImageBitmapLoader as J,
-  BufferAttribute as K,
-  Layers as L,
-  Material as M,
-  NoToneMapping as N,
-  OrthographicCamera as O,
-  PerspectiveCamera as P,
+  Points as J,
+  PerspectiveCamera as K,
+  Loader as L,
+  Matrix42 as M,
+  NearestMipmapLinearFilter as N,
+  Object3D as O,
+  PointLight2 as P,
   Quaternion2 as Q,
-  Raycaster as R,
-  Scene as S,
-  Texture2 as T,
-  UnsignedByteType as U,
-  VSMShadowMap as V,
-  WebGLRenderer as W,
-  InterleavedBuffer as X,
-  LinearMipmapLinearFilter as Y,
-  NearestMipmapLinearFilter as Z,
-  _extends$c as _,
-  PCFSoftShadowMap as a,
-  require_cof as a$,
-  NearestMipmapNearestFilter as a0,
-  LinearFilter as a1,
-  NearestFilter as a2,
-  RepeatWrapping as a3,
-  MirroredRepeatWrapping as a4,
-  ClampToEdgeWrapping as a5,
-  PointsMaterial as a6,
-  LineBasicMaterial as a7,
-  MeshStandardMaterial as a8,
-  DoubleSide as a9,
-  ShaderMaterial as aA,
-  UniformsUtils as aB,
-  UniformsLib as aC,
-  Vector42 as aD,
-  Line3 as aE,
-  SphereGeometry2 as aF,
-  Triangle as aG,
-  BackSide as aH,
-  jsxRuntimeExports as aI,
-  Matrix32 as aJ,
-  CoordinationType$1 as aK,
-  Data3DTexture as aL,
-  RedFormat as aM,
-  FloatType as aN,
-  getImageSize as aO,
-  BaseDecoder as aP,
-  LercParameters as aQ,
-  LercAddCompression as aR,
-  commonjsGlobal$1 as aS,
-  requireObjectAssign$1 as aT,
-  earcut as aU,
-  requireAssign as aV,
-  require_export as aW,
-  require_core as aX,
-  require_fails as aY,
-  require_toObject as aZ,
-  require_objectKeys as a_,
-  MeshBasicMaterial as aa,
-  PropertyBinding as ab,
-  SkinnedMesh as ac,
-  Mesh as ad,
-  LineSegments as ae,
-  Line as af,
-  LineLoop as ag,
-  Points as ah,
-  MathUtils as ai,
-  Skeleton as aj,
-  InterpolateDiscrete as ak,
-  InterpolateLinear as al,
-  AnimationClip as am,
-  Bone as an,
-  InterleavedBufferAttribute as ao,
-  VectorKeyframeTrack as ap,
-  QuaternionKeyframeTrack as aq,
-  NumberKeyframeTrack as ar,
-  FrontSide as as,
-  Interpolant as at,
-  Box3 as au,
-  Sphere as av,
-  InstancedBufferGeometry as aw,
-  Float32BufferAttribute as ax,
-  InstancedInterleavedBuffer as ay,
-  WireframeGeometry as az,
-  PCFShadowMap as b,
-  require_wks as b0,
-  require_iterators as b1,
-  requireWeb_dom_iterable as b2,
-  requireEs6_string_iterator as b3,
-  require_anObject as b4,
-  require_hide as b5,
-  require_ctx as b6,
-  require_toLength as b7,
-  require_global as b8,
-  require_objectDp as b9,
-  MeshDepthMaterial as bA,
-  RGBADepthPacking as bB,
-  ShaderChunk as bC,
-  PlaneGeometry2 as bD,
-  InstancedBufferAttribute as bE,
-  Vitessce as bF,
-  PluginFileType as bG,
-  PluginViewType as bH,
-  PluginCoordinationType as bI,
-  PluginJointFileType as bJ,
-  PluginAsyncFunction as bK,
-  z as bL,
-  require_descriptors as ba,
-  require_isObject as bb,
-  require_objectCreate as bc,
-  require_iterDefine as bd,
-  require_iterStep as be,
-  require_meta as bf,
-  require_isArray as bg,
-  require_iobject as bh,
-  require_setToStringTag as bi,
-  require_aFunction as bj,
-  requireIterator as bk,
-  require_propertyDesc as bl,
-  requireEs6_symbol as bm,
-  requireDefineProperty$1 as bn,
-  require_toIobject as bo,
-  require_objectGopd as bp,
-  require_html as bq,
-  require_domCreate as br,
-  require_library as bs,
-  requireSymbol as bt,
-  require_objectPie as bu,
-  require_has as bv,
-  require_redefine as bw,
-  require_objectAssign as bx,
-  diffCameraState as by,
-  MeshDistanceMaterial as bz,
-  Vector32 as c,
-  Vector22 as d,
-  Camera as e,
-  BufferGeometry as f,
-  getDefaultExportFromCjs$1 as g,
-  RGBAFormat as h,
-  Color as i,
-  THREE as j,
-  Matrix42 as k,
-  TrianglesDrawMode as l,
-  TriangleFanDrawMode as m,
-  TriangleStripDrawMode as n,
-  REVISION as o,
-  MOUSE as p,
-  TOUCH as q,
-  Spherical as r,
-  Ray as s,
-  Plane2 as t,
-  Loader as u,
-  LoaderUtils as v,
-  MeshPhysicalMaterial as w,
-  SpotLight as x,
-  PointLight2 as y,
-  Object3D as z
+  REVISION as R,
+  SpotLight as S,
+  TrianglesDrawMode as T,
+  MathUtils as U,
+  Vector22 as V,
+  OrthographicCamera as W,
+  Skeleton as X,
+  InterpolateDiscrete as Y,
+  InterpolateLinear as Z,
+  AnimationClip as _,
+  TriangleFanDrawMode as a,
+  earcut as a$,
+  InterleavedBufferAttribute as a0,
+  Texture2 as a1,
+  VectorKeyframeTrack as a2,
+  QuaternionKeyframeTrack as a3,
+  NumberKeyframeTrack as a4,
+  FrontSide as a5,
+  Interpolant as a6,
+  Box3 as a7,
+  Sphere as a8,
+  InstancedBufferGeometry as a9,
+  UnsignedIntType as aA,
+  WebGLMultipleRenderTargets as aB,
+  RGBAFormat as aC,
+  PlaneGeometry2 as aD,
+  GLSL3 as aE,
+  getDefaultExportFromCjs$1 as aF,
+  Raycaster as aG,
+  PCFSoftShadowMap as aH,
+  VSMShadowMap as aI,
+  PCFShadowMap as aJ,
+  BasicShadowMap as aK,
+  NoToneMapping as aL,
+  ACESFilmicToneMapping as aM,
+  Clock as aN,
+  WebGLRenderer as aO,
+  Camera as aP,
+  Layers as aQ,
+  THREE as aR,
+  EventDispatcher as aS,
+  MOUSE as aT,
+  TOUCH as aU,
+  Spherical as aV,
+  BaseDecoder as aW,
+  LercParameters as aX,
+  LercAddCompression as aY,
+  commonjsGlobal$1 as aZ,
+  requireObjectAssign$1 as a_,
+  Float32BufferAttribute as aa,
+  InstancedInterleavedBuffer as ab,
+  WireframeGeometry as ac,
+  ShaderMaterial as ad,
+  UniformsUtils as ae,
+  UniformsLib as af,
+  Vector42 as ag,
+  Line3 as ah,
+  SphereGeometry2 as ai,
+  _extends$c as aj,
+  Plane2 as ak,
+  Triangle as al,
+  BackSide as am,
+  Ray as an,
+  jsxRuntimeExports as ao,
+  Matrix32 as ap,
+  CoordinationType$1 as aq,
+  Data3DTexture as ar,
+  RedFormat as as,
+  FloatType as at,
+  getImageSize as au,
+  Scene as av,
+  log$b as aw,
+  isEqual$3 as ax,
+  UnsignedByteType as ay,
+  RedIntegerFormat as az,
+  TriangleStripDrawMode as b,
+  requireAssign as b0,
+  require_export as b1,
+  require_core as b2,
+  require_fails as b3,
+  require_toObject as b4,
+  require_objectKeys as b5,
+  require_cof as b6,
+  require_wks as b7,
+  require_iterators as b8,
+  requireWeb_dom_iterable as b9,
+  requireSymbol as bA,
+  require_objectPie as bB,
+  require_has as bC,
+  require_redefine as bD,
+  require_objectAssign as bE,
+  diffCameraState as bF,
+  MeshDistanceMaterial as bG,
+  MeshDepthMaterial as bH,
+  RGBADepthPacking as bI,
+  ShaderChunk as bJ,
+  InstancedBufferAttribute as bK,
+  Vitessce as bL,
+  PluginFileType as bM,
+  PluginViewType as bN,
+  PluginCoordinationType as bO,
+  PluginJointFileType as bP,
+  PluginAsyncFunction as bQ,
+  z as bR,
+  requireEs6_string_iterator as ba,
+  require_anObject as bb,
+  require_hide as bc,
+  require_ctx as bd,
+  require_toLength as be,
+  require_global as bf,
+  require_objectDp as bg,
+  require_descriptors as bh,
+  require_isObject as bi,
+  require_objectCreate as bj,
+  require_iterDefine as bk,
+  require_iterStep as bl,
+  require_meta as bm,
+  require_isArray as bn,
+  require_iobject as bo,
+  require_setToStringTag as bp,
+  require_aFunction as bq,
+  requireIterator as br,
+  require_propertyDesc as bs,
+  requireEs6_symbol as bt,
+  requireDefineProperty$1 as bu,
+  require_toIobject as bv,
+  require_objectGopd as bw,
+  require_html as bx,
+  require_domCreate as by,
+  require_library as bz,
+  LoaderUtils as c,
+  MeshPhysicalMaterial as d,
+  Vector32 as e,
+  TextureLoader as f,
+  ImageBitmapLoader as g,
+  InterleavedBuffer as h,
+  LinearMipmapLinearFilter as i,
+  LinearMipmapNearestFilter as j,
+  NearestMipmapNearestFilter as k,
+  LinearFilter as l,
+  NearestFilter as m,
+  RepeatWrapping as n,
+  MirroredRepeatWrapping as o,
+  ClampToEdgeWrapping as p,
+  PointsMaterial as q,
+  Material as r,
+  LineBasicMaterial as s,
+  MeshStandardMaterial as t,
+  DoubleSide as u,
+  MeshBasicMaterial as v,
+  PropertyBinding as w,
+  BufferGeometry as x,
+  SkinnedMesh as y,
+  Mesh as z
 };