@vitessce/launcher 4.0.0-test.3 → 4.0.1

package/dist/{index-DAhtQMo7.js → index-DYR0bplz.js}

@@ -4,9 +4,6 @@ import { jsx as jsx$1, jsxs, Fragment } from "react/jsx-runtime";
 import { useLoaders, useCoordinationScopes, useCoordination, useDescription, useImageData, useReady, TitleInfo, useVitessceContainer, useSetWarning, useObsSetsData, useUrls, usePlotOptionsStyles, OptionsContainer, CellColorEncodingOption, OptionSelect, useComponentHover, useComponentViewInfo, useSetComponentHover, useSetComponentViewInfo, useInitialCoordination, useDeckCanvasSize, useMultiObsLabels, useObsEmbeddingData, useFeatureSelection, useObsFeatureMatrixIndices, useFeatureLabelsData, useExpandedFeatureLabelsMap, useSampleSetsData, useSampleEdgesData, useGetObsInfo, useUint8FeatureSelection, useExpressionValueGetter, useAuxiliaryCoordination, useHasLoader, useObsLocationsData, useObsLabelsData, useObsSegmentationsData, useNeighborhoodsData, useMergeCoordination, useCoordinationScopesBy, useMultiCoordinationScopesSecondaryNonNull, useMultiCoordinationScopesNonNull, useComplexCoordination, useComplexCoordinationSecondary, useGridItemSize, useMultiObsPoints, usePointMultiObsLabels, usePointMultiObsFeatureMatrixIndices, useMultiObsSpots, useSpotMultiObsSets, useSpotMultiFeatureLabels, useSpotMultiFeatureSelection, useSpotMultiObsFeatureMatrixIndices, useSegmentationMultiObsLocations, useMultiObsSegmentations, useSegmentationMultiObsSets, useSegmentationMultiFeatureSelection, useSegmentationMultiObsFeatureMatrixIndices, useMultiImages, useObsFeatureMatrixData, useUint8ObsFeatureMatrix, useGetObsMembership, PopperMenu, useComponentLayout, useClosestVitessceContainerSize, useWindowDimensions, useRemoveImageChannelInMetaCoordinationScopes, useAddImageChannelInMetaCoordinationScopes, useViewConfigStoreApi, useViewConfig, useSetViewConfig, createLoaders, useWarning, useGenomicProfilesData, useMatchingLoader, useColumnNameMapping, useFeatureStatsData, useObsSetStatsData, useAsyncFunction, useFeatureSetStatsData, useComparisonMetadata, logConfig, VitSContainer, createOnDrop } from "@vitessce/vit-s";
 import * as ReactDOM from "react-dom";
 import ReactDOM__default, { createPortal } from "react-dom";
-import { Quaternion as Quaternion$1, Euler as Euler$1 } from "three";
-import { GLTFLoader as GLTFLoader$1 } from "three/addons/loaders/GLTFLoader.js";
-import { DRACOLoader } from "three/addons/loaders/DRACOLoader.js";
 function _mergeNamespaces(n3, m2) {
   for (var i2 = 0; i2 < m2.length; i2++) {
     const e3 = m2[i2];
@@ -5881,7 +5878,7 @@ function baseClamp(number2, lower2, upper) {
   }
   return number2;
 }
-function clamp$7(number2, lower2, upper) {
+function clamp$8(number2, lower2, upper) {
   if (upper === void 0) {
     upper = lower2;
     lower2 = void 0;
@@ -10213,6 +10210,7 @@ const FileType$1 = {
   OBS_LABELS_MUDATA_ZARR: "obsLabels.mudata.zarr",
   FEATURE_LABELS_MUDATA_ZARR: "featureLabels.mudata.zarr",
   GENOMIC_PROFILES_ZARR: "genomic-profiles.zarr",
+  GENOMIC_PROFILES_ZARR_ZIP: "genomic-profiles.zarr.zip",
   NEIGHBORHOODS_JSON: "neighborhoods.json",
   // OME-TIFF
   IMAGE_OME_TIFF: "image.ome-tiff",
@@ -10384,6 +10382,7 @@ const CoordinationType$1 = {
   SPATIAL_CHANNEL_LABELS_VISIBLE: "spatialChannelLabelsVisible",
   SPATIAL_CHANNEL_LABELS_ORIENTATION: "spatialChannelLabelsOrientation",
   SPATIAL_CHANNEL_LABEL_SIZE: "spatialChannelLabelSize",
+  SPATIAL_CHANNELS_SORT_ORDER: "spatialChannelsSortOrder",
   // Multi-sample / comparative
   SAMPLE_TYPE: "sampleType",
   SAMPLE_SELECTION: "sampleSelection",
@@ -10436,7 +10435,9 @@ const ViewHelpMapping = {
   OBS_SET_COMPOSITION_BAR_PLOT: "The set composition bar plot displays the results of a compositional analysis conducted using the scCODA method (Büttner et al. 2021 Nature Communications).",
   FEATURE_SET_ENRICHMENT_BAR_PLOT: "The feature set enrichment bar plot displays the results of a hypergeometric test applied to the differential expression test results to identify enriched pathway gene sets.",
   SAMPLE_SET_PAIR_MANAGER: "Select pairs of sample groups.",
-  FEATURE_STATS_TABLE: "This table displays per-feature statistics, for example, from a differential expression test."
+  FEATURE_STATS_TABLE: "This table displays per-feature statistics, for example, from a differential expression test.",
+  LAYER_CONTROLLER_BETA: "The spatial layer controller provides an interface for manipulating the visualization layers displayed in the spatial view.",
+  SPATIAL_BETA: "The spatial view displays (potentially layered) spatially-resolved data including RGB or multiplexed images, segmentations of observations (bitmask- or polygon-based), and/or points (e.g., representing FISH transcripts)."
 };
 ({
   // For new file types
@@ -10507,6 +10508,7 @@ const ViewHelpMapping = {
   [FileType$1.OBS_LABELS_MOLECULES_JSON]: DataType$3.OBS_LABELS,
   // For old file types
   [FileType$1.GENOMIC_PROFILES_ZARR]: DataType$3.GENOMIC_PROFILES,
+  [FileType$1.GENOMIC_PROFILES_ZARR_ZIP]: DataType$3.GENOMIC_PROFILES,
   [FileType$1.NEIGHBORHOODS_JSON]: DataType$3.NEIGHBORHOODS
 });
 ({
@@ -10671,6 +10673,10 @@ const ALT_ZARR_STORE_TYPES = {
   },
   [FileType$1.OBS_EMBEDDING_SPATIALDATA_ZARR]: {
     zip: FileType$1.OBS_EMBEDDING_SPATIALDATA_ZARR_ZIP
+  },
+  // For genomic profiles:
+  [FileType$1.GENOMIC_PROFILES_ZARR]: {
+    zip: FileType$1.GENOMIC_PROFILES_ZARR_ZIP
   }
 };
 [
@@ -10982,6 +10988,7 @@ const COMPONENT_COORDINATION_TYPES = {
     CoordinationType$1.SPATIAL_CHANNEL_LABELS_VISIBLE,
     CoordinationType$1.SPATIAL_CHANNEL_LABELS_ORIENTATION,
     CoordinationType$1.SPATIAL_CHANNEL_LABEL_SIZE,
+    CoordinationType$1.SPATIAL_CHANNELS_SORT_ORDER,
     CoordinationType$1.PHOTOMETRIC_INTERPRETATION
   ],
   [ViewType$1.HEATMAP]: [
@@ -11163,7 +11170,8 @@ const COMPONENT_COORDINATION_TYPES = {
     CoordinationType$1.LEGEND_VISIBLE,
     CoordinationType$1.SPATIAL_CHANNEL_LABELS_VISIBLE,
     CoordinationType$1.SPATIAL_CHANNEL_LABELS_ORIENTATION,
-    CoordinationType$1.SPATIAL_CHANNEL_LABEL_SIZE
+    CoordinationType$1.SPATIAL_CHANNEL_LABEL_SIZE,
+    CoordinationType$1.SPATIAL_CHANNELS_SORT_ORDER
   ],
   [ViewType$1.GENOMIC_PROFILES]: [
     CoordinationType$1.DATASET,
@@ -17047,7 +17055,7 @@ function useThemeProps$1({
   });
 }
 const useEnhancedEffect$1 = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
-function clamp$6(val, min2 = Number.MIN_SAFE_INTEGER, max2 = Number.MAX_SAFE_INTEGER) {
+function clamp$7(val, min2 = Number.MIN_SAFE_INTEGER, max2 = Number.MAX_SAFE_INTEGER) {
   return Math.max(min2, Math.min(val, max2));
 }
 function clampWrapper(value2, min2 = 0, max2 = 1) {
@@ -17056,7 +17064,7 @@ function clampWrapper(value2, min2 = 0, max2 = 1) {
       console.error(`MUI: The value provided ${value2} is out of range [${min2}, ${max2}].`);
     }
   }
-  return clamp$6(value2, min2, max2);
+  return clamp$7(value2, min2, max2);
 }
 function hexToRgb$1(color2) {
   color2 = color2.slice(1);
@@ -40923,7 +40931,7 @@ function useSlider(parameters2) {
   });
   const range2 = Array.isArray(valueDerived);
   let values3 = range2 ? valueDerived.slice().sort(asc) : [valueDerived];
-  values3 = values3.map((value2) => value2 == null ? min2 : clamp$6(value2, min2, max2));
+  values3 = values3.map((value2) => value2 == null ? min2 : clamp$7(value2, min2, max2));
   const marks = marksProp === true && step !== null ? [...Array(Math.floor((max2 - min2) / step) + 1)].map((_, index2) => ({
     value: min2 + step * index2
   })) : marksProp || [];
@@ -40961,10 +40969,10 @@ function useSlider(parameters2) {
         newValue = newValue < value2 ? marksValues[marksIndex - 1] : marksValues[marksIndex + 1];
       }
     }
-    newValue = clamp$6(newValue, min2, max2);
+    newValue = clamp$7(newValue, min2, max2);
     if (range2) {
       if (disableSwap) {
-        newValue = clamp$6(newValue, values3[index2 - 1] || -Infinity, values3[index2 + 1] || Infinity);
+        newValue = clamp$7(newValue, values3[index2 - 1] || -Infinity, values3[index2 + 1] || Infinity);
       }
       const previousValue = newValue;
       newValue = setValueIndex({
@@ -41099,7 +41107,7 @@ function useSlider(parameters2) {
       const closestIndex = findClosest(marksValues, newValue);
       newValue = marksValues[closestIndex];
     }
-    newValue = clamp$6(newValue, min2, max2);
+    newValue = clamp$7(newValue, min2, max2);
     let activeIndex = 0;
     if (range2) {
       if (!move2) {
@@ -41108,7 +41116,7 @@ function useSlider(parameters2) {
         activeIndex = previousIndex.current;
       }
       if (disableSwap) {
-        newValue = clamp$6(newValue, values3[activeIndex - 1] || -Infinity, values3[activeIndex + 1] || Infinity);
+        newValue = clamp$7(newValue, values3[activeIndex - 1] || -Infinity, values3[activeIndex + 1] || Infinity);
       }
       const previousValue = newValue;
       newValue = setValueIndex({
@@ -49015,7 +49023,7 @@ function localStorageAvailable() {
 function escapeRegExp(value2) {
   return value2.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
 }
-const clamp$5 = (value2, min2, max2) => Math.max(min2, Math.min(max2, value2));
+const clamp$6 = (value2, min2, max2) => Math.max(min2, Math.min(max2, value2));
 function range$c(from2, to) {
   return Array.from({
     length: to - from2
@@ -52721,7 +52729,7 @@ const hydrateColumnsWidth = (rawState, dimensions) => {
         totalFlexUnits += column2.flex;
         isFlex = true;
       } else {
-        computedWidth = clamp$5(column2.width || GRID_STRING_COL_DEF.width, column2.minWidth || GRID_STRING_COL_DEF.minWidth, column2.maxWidth || GRID_STRING_COL_DEF.maxWidth);
+        computedWidth = clamp$6(column2.width || GRID_STRING_COL_DEF.width, column2.minWidth || GRID_STRING_COL_DEF.minWidth, column2.maxWidth || GRID_STRING_COL_DEF.maxWidth);
       }
       widthAllocatedBeforeFlex += computedWidth;
     }
@@ -53321,8 +53329,8 @@ const useGridVirtualScroller = () => {
     const maxScrollTop = Math.ceil(dimensions.minimumSize.height - dimensions.viewportOuterSize.height);
     const maxScrollLeft = Math.ceil(dimensions.minimumSize.width - dimensions.viewportInnerSize.width);
     const newScroll = {
-      top: clamp$5(scroller.scrollTop, 0, maxScrollTop),
-      left: isRtl ? clamp$5(scroller.scrollLeft, -maxScrollLeft, 0) : clamp$5(scroller.scrollLeft, 0, maxScrollLeft)
+      top: clamp$6(scroller.scrollTop, 0, maxScrollTop),
+      left: isRtl ? clamp$6(scroller.scrollLeft, -maxScrollLeft, 0) : clamp$6(scroller.scrollLeft, 0, maxScrollLeft)
     };
     const dx = newScroll.left - scrollPosition.current.left;
     const dy = newScroll.top - scrollPosition.current.top;
@@ -53760,7 +53768,7 @@ function getNearestIndexToRender(inputs, offset2, options) {
   if (inputs.range?.lastRowIndex && !allRowsMeasured) {
     allRowsMeasured = lastMeasuredIndexRelativeToAllRows >= inputs.range.lastRowIndex;
   }
-  const lastMeasuredIndexRelativeToCurrentPage = clamp$5(lastMeasuredIndexRelativeToAllRows - (inputs.range?.firstRowIndex || 0), 0, inputs.rowsMeta.positions.length);
+  const lastMeasuredIndexRelativeToCurrentPage = clamp$6(lastMeasuredIndexRelativeToAllRows - (inputs.range?.firstRowIndex || 0), 0, inputs.rowsMeta.positions.length);
   if (allRowsMeasured || inputs.rowsMeta.positions[lastMeasuredIndexRelativeToCurrentPage] >= offset2) {
     return binarySearch$2(offset2, inputs.rowsMeta.positions, options);
   }
@@ -53844,7 +53852,7 @@ function getIndexesToRender({
     lastPosition: positions[positions.length - 1] + lastSize
   });
   const lastIndexPadded = binarySearch$2(lastPosition, positions);
-  return [clamp$5(firstIndexPadded, minFirstIndex, maxLastIndex), clamp$5(lastIndexPadded, minFirstIndex, maxLastIndex)];
+  return [clamp$6(firstIndexPadded, minFirstIndex, maxLastIndex), clamp$6(lastIndexPadded, minFirstIndex, maxLastIndex)];
 }
 function areRenderContextsEqual(context1, context2) {
   if (context1 === context2) {
@@ -63423,7 +63431,7 @@ const useGridFocus = (apiRef, props) => {
         columnIndexToFocus = visibleColumns.length - 1;
       }
     }
-    rowIndexToFocus = clamp$5(rowIndexToFocus, 0, currentPageRows.length - 1);
+    rowIndexToFocus = clamp$6(rowIndexToFocus, 0, currentPageRows.length - 1);
     const rowToFocus = currentPageRows[rowIndexToFocus];
     if (!rowToFocus) {
       return;
@@ -63436,7 +63444,7 @@ const useGridFocus = (apiRef, props) => {
         columnIndexToFocus = colSpanInfo.rightVisibleCellIndex;
       }
     }
-    columnIndexToFocus = clamp$5(columnIndexToFocus, 0, visibleColumns.length - 1);
+    columnIndexToFocus = clamp$6(columnIndexToFocus, 0, visibleColumns.length - 1);
     const columnToFocus = visibleColumns[columnIndexToFocus];
     apiRef.current.setCellFocus(rowToFocus.id, columnToFocus.field);
   }, [apiRef, props.pagination, props.paginationMode]);
@@ -63549,7 +63557,7 @@ const useGridFocus = (apiRef, props) => {
           pagination: props.pagination,
           paginationMode: props.paginationMode
         });
-        const nextRow = currentPage.rows[clamp$5(lastFocusedRowIndex, 0, currentPage.rows.length - 1)];
+        const nextRow = currentPage.rows[clamp$6(lastFocusedRowIndex, 0, currentPage.rows.length - 1)];
         nextRowId = nextRow?.id ?? null;
       }
       apiRef.current.setState((state) => _extends$c({}, state, {
@@ -67902,7 +67910,7 @@ function extractColumnWidths(apiRef, options, columns2) {
     const min2 = hasColumnMin ? column2.minWidth : 0;
     const max2 = hasColumnMax ? column2.maxWidth : Infinity;
     const maxContent = filteredWidths.length === 0 ? 0 : Math.max(...filteredWidths);
-    widthByField[column2.field] = clamp$5(maxContent, min2, max2);
+    widthByField[column2.field] = clamp$6(maxContent, min2, max2);
   });
   root2.classList.remove(gridClasses.autosizing);
   return widthByField;
@@ -68058,7 +68066,7 @@ const useGridColumnResize = (apiRef, props) => {
       return;
     }
     let newWidth = computeNewWidth(initialOffsetToSeparator.current, nativeEvent.clientX, refs.columnHeaderElement.getBoundingClientRect(), resizeDirection.current);
-    newWidth = clamp$5(newWidth, refs.colDef.minWidth, refs.colDef.maxWidth);
+    newWidth = clamp$6(newWidth, refs.colDef.minWidth, refs.colDef.maxWidth);
     updateWidth(newWidth);
     const params2 = {
       element: refs.columnHeaderElement,
@@ -68084,7 +68092,7 @@ const useGridColumnResize = (apiRef, props) => {
       return;
     }
     let newWidth = computeNewWidth(initialOffsetToSeparator.current, finger.x, refs.columnHeaderElement.getBoundingClientRect(), resizeDirection.current);
-    newWidth = clamp$5(newWidth, refs.colDef.minWidth, refs.colDef.maxWidth);
+    newWidth = clamp$6(newWidth, refs.colDef.minWidth, refs.colDef.maxWidth);
     updateWidth(newWidth);
     const params2 = {
       element: refs.columnHeaderElement,
@@ -116653,7 +116661,7 @@ function acos$4(radians2, result) {
 function atan$3(radians2, result) {
   return map$3(radians2, (angle2) => Math.atan(angle2), result);
 }
-function clamp$4(value2, min2, max2) {
+function clamp$5(value2, min2, max2) {
   return map$3(value2, (value3) => Math.max(min2, Math.min(max2, value3)));
 }
 function lerp$8(a2, b2, t4) {
@@ -119623,7 +119631,7 @@ class SphericalCoordinates {
     this.radius = length$5(v);
     if (this.radius > 0) {
       this.theta = Math.atan2(v[0], v[1]);
-      this.phi = Math.acos(clamp$4(v[2] / this.radius, -1, 1));
+      this.phi = Math.acos(clamp$5(v[2] / this.radius, -1, 1));
     }
     return this.check();
   }
@@ -119878,7 +119886,7 @@ class Euler extends MathArray {
     order2 = order2 || this[3];
     switch (order2) {
       case Euler.XYZ:
-        this[1] = Math.asin(clamp$4(m13, -1, 1));
+        this[1] = Math.asin(clamp$5(m13, -1, 1));
         if (Math.abs(m13) < ALMOST_ONE) {
           this[0] = Math.atan2(-m23, m33);
           this[2] = Math.atan2(-m12, m11);
@@ -119888,7 +119896,7 @@ class Euler extends MathArray {
         }
         break;
       case Euler.YXZ:
-        this[0] = Math.asin(-clamp$4(m23, -1, 1));
+        this[0] = Math.asin(-clamp$5(m23, -1, 1));
         if (Math.abs(m23) < ALMOST_ONE) {
           this[1] = Math.atan2(m13, m33);
           this[2] = Math.atan2(m21, m22);
@@ -119898,7 +119906,7 @@ class Euler extends MathArray {
         }
         break;
       case Euler.ZXY:
-        this[0] = Math.asin(clamp$4(m32, -1, 1));
+        this[0] = Math.asin(clamp$5(m32, -1, 1));
         if (Math.abs(m32) < ALMOST_ONE) {
           this[1] = Math.atan2(-m31, m33);
           this[2] = Math.atan2(-m12, m22);
@@ -119908,7 +119916,7 @@ class Euler extends MathArray {
         }
         break;
       case Euler.ZYX:
-        this[1] = Math.asin(-clamp$4(m31, -1, 1));
+        this[1] = Math.asin(-clamp$5(m31, -1, 1));
         if (Math.abs(m31) < ALMOST_ONE) {
           this[0] = Math.atan2(m32, m33);
           this[2] = Math.atan2(m21, m11);
@@ -119918,7 +119926,7 @@ class Euler extends MathArray {
         }
         break;
       case Euler.YZX:
-        this[2] = Math.asin(clamp$4(m21, -1, 1));
+        this[2] = Math.asin(clamp$5(m21, -1, 1));
         if (Math.abs(m21) < ALMOST_ONE) {
           this[0] = Math.atan2(-m23, m22);
           this[1] = Math.atan2(-m31, m11);
@@ -119928,7 +119936,7 @@ class Euler extends MathArray {
         }
         break;
       case Euler.XZY:
-        this[2] = Math.asin(-clamp$4(m12, -1, 1));
+        this[2] = Math.asin(-clamp$5(m12, -1, 1));
         if (Math.abs(m12) < ALMOST_ONE) {
           this[0] = Math.atan2(m32, m22);
           this[1] = Math.atan2(m13, m11);
@@ -123072,7 +123080,7 @@ function mod$2(value2, divisor) {
 function lerp$3(start2, end2, step) {
   return step * end2 + (1 - step) * start2;
 }
-function clamp$3(x2, min2, max2) {
+function clamp$4(x2, min2, max2) {
   return x2 < min2 ? min2 : x2 > max2 ? max2 : x2;
 }
 function ieLog2(x2) {
@@ -123218,7 +123226,7 @@ function getProjectionParameters(options) {
     cameraToSeaLevelDistance += center2[2] * scale2 / Math.cos(pitchRadians) / height2;
   }
   const fovAboveCenter = fovRadians * (0.5 + (offset2 ? offset2[1] : 0) / height2);
-  const topHalfSurfaceDistance = Math.sin(fovAboveCenter) * cameraToSeaLevelDistance / Math.sin(clamp$3(Math.PI / 2 - pitchRadians - fovAboveCenter, 0.01, Math.PI - 0.01));
+  const topHalfSurfaceDistance = Math.sin(fovAboveCenter) * cameraToSeaLevelDistance / Math.sin(clamp$4(Math.PI / 2 - pitchRadians - fovAboveCenter, 0.01, Math.PI - 0.01));
   const furthestDistance = Math.sin(pitchRadians) * topHalfSurfaceDistance + cameraToSeaLevelDistance;
   const horizonDistance = cameraToSeaLevelDistance * 10;
   const farZ = Math.min(furthestDistance * farZMultiplier, horizonDistance);
@@ -123276,8 +123284,8 @@ function fitBounds(options) {
   } = options;
   const [[west, south], [east, north]] = bounds2;
   const padding2 = getPaddingObject(options.padding);
-  const nw = lngLatToWorld([west, clamp$3(north, -MAX_LATITUDE, MAX_LATITUDE)]);
-  const se = lngLatToWorld([east, clamp$3(south, -MAX_LATITUDE, MAX_LATITUDE)]);
+  const nw = lngLatToWorld([west, clamp$4(north, -MAX_LATITUDE, MAX_LATITUDE)]);
+  const se = lngLatToWorld([east, clamp$4(south, -MAX_LATITUDE, MAX_LATITUDE)]);
   const size2 = [Math.max(Math.abs(se[0] - nw[0]), minExtent), Math.max(Math.abs(se[1] - nw[1]), minExtent)];
   const targetSize = [width2 - padding2.left - padding2.right - Math.abs(offset2[0]) * 2, height2 - padding2.top - padding2.bottom - Math.abs(offset2[1]) * 2];
   assert$b(targetSize[0] > 0 && targetSize[1] > 0);
@@ -124567,8 +124575,8 @@ function createProjectionMatrix({
       top: top2 = 0,
       bottom: bottom2 = 0
     } = padding2;
-    const offsetX = clamp$4((left2 + width2 - right2) / 2, 0, width2) - width2 / 2;
-    const offsetY = clamp$4((top2 + height2 - bottom2) / 2, 0, height2) - height2 / 2;
+    const offsetX = clamp$5((left2 + width2 - right2) / 2, 0, width2) - width2 / 2;
+    const offsetY = clamp$5((top2 + height2 - bottom2) / 2, 0, height2) - height2 / 2;
     matrix2[8] -= offsetX * 2 / width2;
     matrix2[9] += offsetY * 2 / height2;
   }
@@ -124683,7 +124691,7 @@ class Viewport {
   projectFlat(xyz) {
     if (this.isGeospatial) {
       const result = lngLatToWorld(xyz);
-      result[1] = clamp$4(result[1], -318, 830);
+      result[1] = clamp$5(result[1], -318, 830);
       return result;
     }
     return xyz;
@@ -127400,7 +127408,7 @@ class MapState extends ViewState {
       minZoom
     } = this.getViewportProps();
     let zoom2 = startZoom + Math.log2(scale2);
-    zoom2 = clamp$4(zoom2, minZoom, maxZoom);
+    zoom2 = clamp$5(zoom2, minZoom, maxZoom);
     const zoomedViewport = this.makeViewport({
       ...this.getViewportProps(),
       zoom: zoom2
@@ -127477,13 +127485,13 @@ class MapState extends ViewState {
       minZoom,
       zoom: zoom2
     } = props;
-    props.zoom = clamp$4(zoom2, minZoom, maxZoom);
+    props.zoom = clamp$5(zoom2, minZoom, maxZoom);
     const {
       maxPitch,
       minPitch,
       pitch
     } = props;
-    props.pitch = clamp$4(pitch, minPitch, maxPitch);
+    props.pitch = clamp$5(pitch, minPitch, maxPitch);
     const {
       normalize: normalize2 = true
     } = props;
@@ -127544,7 +127552,7 @@ class MapState extends ViewState {
         deltaScaleY = 1 - centerY / startY;
       }
     }
-    deltaScaleY = clamp$4(deltaScaleY, -1, 1);
+    deltaScaleY = clamp$5(deltaScaleY, -1, 1);
     const {
       minPitch,
       maxPitch
@@ -127673,8 +127681,8 @@ function getProjectionMatrix({
       top: t4 = 0,
       bottom: b2 = 0
     } = padding2;
-    const offsetX = clamp$4((l2 + width2 - r3) / 2, 0, width2) - width2 / 2;
-    const offsetY = clamp$4((t4 + height2 - b2) / 2, 0, height2) - height2 / 2;
+    const offsetX = clamp$5((l2 + width2 - r3) / 2, 0, width2) - width2 / 2;
+    const offsetY = clamp$5((t4 + height2 - b2) / 2, 0, height2) - height2 / 2;
     left2 -= offsetX;
     right2 -= offsetX;
     bottom2 += offsetY;
@@ -127987,7 +127995,7 @@ class OrbitState extends ViewState {
       startZoom = this.getViewportProps().zoom;
     }
     const zoom2 = startZoom + Math.log2(scale2);
-    return clamp$4(zoom2, minZoom, maxZoom);
+    return clamp$5(zoom2, minZoom, maxZoom);
   }
   _panFromCenter(offset2) {
     const {
@@ -128017,8 +128025,8 @@ class OrbitState extends ViewState {
       minRotationX,
       rotationOrbit
     } = props;
-    props.zoom = Array.isArray(zoom2) ? [clamp$4(zoom2[0], minZoom, maxZoom), clamp$4(zoom2[1], minZoom, maxZoom)] : clamp$4(zoom2, minZoom, maxZoom);
-    props.rotationX = clamp$4(props.rotationX, minRotationX, maxRotationX);
+    props.zoom = Array.isArray(zoom2) ? [clamp$5(zoom2[0], minZoom, maxZoom), clamp$5(zoom2[1], minZoom, maxZoom)] : clamp$5(zoom2, minZoom, maxZoom);
+    props.rotationX = clamp$5(props.rotationX, minRotationX, maxRotationX);
     if (rotationOrbit < -180 || rotationOrbit > 180) {
       props.rotationOrbit = mod$1(rotationOrbit + 180, 360) - 180;
     }
@@ -128062,10 +128070,10 @@ class OrthographicState extends OrbitState {
       let [newZoomX, newZoomY] = startZoom;
       switch (this.zoomAxis) {
         case "X":
-          newZoomX = clamp$4(newZoomX + deltaZoom, minZoom, maxZoom);
+          newZoomX = clamp$5(newZoomX + deltaZoom, minZoom, maxZoom);
           break;
         case "Y":
-          newZoomY = clamp$4(newZoomY + deltaZoom, minZoom, maxZoom);
+          newZoomY = clamp$5(newZoomY + deltaZoom, minZoom, maxZoom);
           break;
         default:
           let z2 = Math.min(newZoomX + deltaZoom, newZoomY + deltaZoom);
@@ -128081,7 +128089,7 @@ class OrthographicState extends OrbitState {
       }
       return [newZoomX, newZoomY];
     }
-    return clamp$4(startZoom + deltaZoom, minZoom, maxZoom);
+    return clamp$5(startZoom + deltaZoom, minZoom, maxZoom);
   }
 }
 class OrthographicController extends Controller {
@@ -136820,7 +136828,7 @@ class FirstPersonState extends ViewState {
       longitude: longitude2,
       bearing
     } = props;
-    props.pitch = clamp$4(pitch, minPitch, maxPitch);
+    props.pitch = clamp$5(pitch, minPitch, maxPitch);
     if (longitude2 !== null && (longitude2 < -180 || longitude2 > 180)) {
       props.longitude = mod$1(longitude2 + 180, 360) - 180;
     }
@@ -136869,7 +136877,7 @@ class GlobeState extends MapState {
       minZoom,
       zoom: zoom2
     } = props;
-    props.zoom = clamp$4(zoom2, minZoom, maxZoom);
+    props.zoom = clamp$5(zoom2, minZoom, maxZoom);
     const {
       longitude: longitude2,
       latitude
@@ -136877,7 +136885,7 @@ class GlobeState extends MapState {
     if (longitude2 < -180 || longitude2 > 180) {
       props.longitude = mod$1(longitude2 + 180, 360) - 180;
     }
-    props.latitude = clamp$4(latitude, -89, 89);
+    props.latitude = clamp$5(latitude, -89, 89);
     return props;
   }
 }
@@ -144524,7 +144532,7 @@ function getQuantileDomain(data2, valueAccessor) {
 function getOrdinalDomain(data2, valueAccessor) {
   return unique$1(getTruthyValues(data2, valueAccessor));
 }
-function clamp$2(value2, min2, max2) {
+function clamp$3(value2, min2, max2) {
   return Math.max(min2, Math.min(max2, value2));
 }
 const defaultGetValue = (points2) => points2.length;
@@ -144585,7 +144593,7 @@ class BinSorter {
     if (len2 < 2) {
       return [0, 0];
     }
-    const [lower2, upper] = percentileRange.map((n3) => clamp$2(n3, 0, 100));
+    const [lower2, upper] = percentileRange.map((n3) => clamp$3(n3, 0, 100));
     const lowerIdx = Math.ceil(lower2 / 100 * (len2 - 1));
     const upperIdx = Math.floor(upper / 100 * (len2 - 1));
     return [lowerIdx, upperIdx];
@@ -167379,7 +167387,7 @@ new Vector3();
 new Vector2();
 new Vector2();
 function fromSNorm(value2, rangeMaximum = 255) {
-  return clamp$4(value2, 0, rangeMaximum) / rangeMaximum * 2 - 1;
+  return clamp$5(value2, 0, rangeMaximum) / rangeMaximum * 2 - 1;
 }
 function signNotZero(value2) {
   return value2 < 0 ? -1 : 1;
@@ -206496,7 +206504,7 @@ const esm = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty(
   asin: asin$5,
   assert: assert$c,
   atan: atan$3,
-  clamp: clamp$4,
+  clamp: clamp$5,
   clone: clone$5,
   config: config$3,
   configure,
@@ -210925,22 +210933,22 @@ async function getDecoder(fileDirectory) {
   const Decoder = await importFn();
   return new Decoder(fileDirectory);
 }
-addDecoder([void 0, 1], () => import("./raw-DbDdV1tN.js").then((m2) => m2.default));
-addDecoder(5, () => import("./lzw-CyLNGLTP.js").then((m2) => m2.default));
+addDecoder([void 0, 1], () => import("./raw-CCLdztVu.js").then((m2) => m2.default));
+addDecoder(5, () => import("./lzw-CKCb2yMZ.js").then((m2) => m2.default));
 addDecoder(6, () => {
   throw new Error("old style JPEG compression is not supported.");
 });
-addDecoder(7, () => import("./jpeg-BegTw2ZG.js").then((m2) => m2.default));
-addDecoder([8, 32946], () => import("./deflate-0ecBfpbE.js").then((m2) => m2.default));
-addDecoder(32773, () => import("./packbits-CMdMha0h.js").then((m2) => m2.default));
+addDecoder(7, () => import("./jpeg-Co4ZcifY.js").then((m2) => m2.default));
+addDecoder([8, 32946], () => import("./deflate-Bbx7Vqb7.js").then((m2) => m2.default));
+addDecoder(32773, () => import("./packbits-BNHyrTcI.js").then((m2) => m2.default));
 addDecoder(
   34887,
-  () => import("./lerc-BKy3Cqfz.js").then(async (m2) => {
+  () => import("./lerc-_s2Wotdl.js").then(async (m2) => {
     await m2.zstd.init();
     return m2;
   }).then((m2) => m2.default)
 );
-addDecoder(50001, () => import("./webimage-DYe9qPKJ.js").then((m2) => m2.default));
+addDecoder(50001, () => import("./webimage-BozDrenu.js").then((m2) => m2.default));
 function copyNewSize(array2, width2, height2, samplesPerPixel = 1) {
   return new (Object.getPrototypeOf(array2)).constructor(width2 * height2 * samplesPerPixel);
 }
@@ -227796,7 +227804,7 @@ function ToolMenu(props) {
   return jsxs("div", { className: classes2.tool, children: [visibleTools.pan && jsx$1(IconTool, { alt: pointerIconAltText, onClick: () => setActiveTool(null), isActive: activeTool === null, children: jsx$1(SvgNearMe, {}) }), visibleTools.selectLasso ? jsx$1(IconTool, { alt: lassoIconAltText, onClick: () => setActiveTool(distEs6Exports$2.SELECTION_TYPE.POLYGON), isActive: activeTool === distEs6Exports$2.SELECTION_TYPE.POLYGON, children: jsx$1(SvgSelectionLasso, {}) }) : null, visibleTools.recenter ? jsx$1(IconButton, { alt: "click to recenter", onClick: () => onRecenterButtonCLick(), "aria-label": "Recenter scatterplot view", children: jsx$1(CenterFocusStrong, {}) }) : null] });
 }
 const getCursorWithTool = () => "crosshair";
-const getCursor = (interactionState) => interactionState.isDragging ? "grabbing" : "default";
+const getCursor = (interactionState) => interactionState.isDragging ? "grabbing" : "grab";
 function getOnHoverCallback(obsIndex, setObsHighlight, setComponentHover) {
   return (info2) => {
     if (setComponentHover) {
@@ -228161,7 +228169,7 @@ const BASE_POINT_SIZE = 5;
 const LARGE_DATASET_CELL_COUNT = 1e4;
 const SMALL_DATASET_CELL_COUNT = 100;
 function getInitialPointSize(numCells = LARGE_DATASET_CELL_COUNT) {
-  return BASE_POINT_SIZE / clamp$7(numCells, SMALL_DATASET_CELL_COUNT, LARGE_DATASET_CELL_COUNT);
+  return BASE_POINT_SIZE / clamp$8(numCells, SMALL_DATASET_CELL_COUNT, LARGE_DATASET_CELL_COUNT);
 }
 function getPointSizeDevicePixels(devicePixelRatio2, zoom2, xRange, yRange, width2, height2, numCells) {
   const pointSize = getInitialPointSize(numCells);
@@ -228174,7 +228182,7 @@ function getPointSizeDevicePixels(devicePixelRatio2, zoom2, xRange, yRange, widt
   const diagonalAxisRange = Math.sqrt(xAxisRange ** 2 + yAxisRange ** 2);
   const diagonalFraction = pointSize / diagonalAxisRange;
   const deviceSize = diagonalFraction * diagonalScreenSize;
-  const pointSizeDevicePixels = clamp$7(deviceSize, pointScreenSizeMin, pointScreenSizeMax);
+  const pointSizeDevicePixels = clamp$8(deviceSize, pointScreenSizeMin, pointScreenSizeMax);
   return pointSizeDevicePixels;
 }
 function getPointOpacity(zoom2, xRange, yRange, width2, height2, numCells, avgFillDensity) {
@@ -228203,7 +228211,7 @@ function getPointOpacity(zoom2, xRange, yRange, width2, height2, numCells, avgFi
     rho = Math.min(1, 1 / 10 ** (Math.log10(N2) - 3));
   }
   const alpha2 = rho * W * H / N2 * (Y02 / Y3) * (X02 / X3);
-  const pointOpacity = clamp$7(alpha2, 1.01 / 255, 1);
+  const pointOpacity = clamp$8(alpha2, 1.01 / 255, 1);
   return pointOpacity;
 }
 const CELLS_LAYER_ID$1 = "scatterplot";
@@ -228819,7 +228827,7 @@ typeof SuppressedError === "function" ? SuppressedError : function(error2, suppr
   var e3 = new Error(message);
   return e3.name = "SuppressedError", e3.error = error2, e3.suppressed = suppressed, e3;
 };
-const FEATURE_AGGREGATION_STRATEGIES$1 = ["first", "last", "sum", "mean"];
+const FEATURE_AGGREGATION_STRATEGIES$2 = ["first", "last", "sum", "mean"];
 function ScatterplotOptions(props) {
   const { children: children3, observationsLabel, cellRadius, setCellRadius, cellRadiusMode, setCellRadiusMode, cellOpacity, setCellOpacity, cellOpacityMode, setCellOpacityMode, cellSetLabelsVisible, setCellSetLabelsVisible, tooltipsVisible, setTooltipsVisible, cellSetLabelSize, setCellSetLabelSize, cellSetPolygonsVisible, setCellSetPolygonsVisible, cellColorEncoding, setCellColorEncoding, geneExpressionColormap, setGeneExpressionColormap, geneExpressionColormapRange, setGeneExpressionColormapRange, embeddingPointsVisible, setEmbeddingPointsVisible, embeddingContoursVisible, setEmbeddingContoursVisible, embeddingContoursFilled, setEmbeddingContoursFilled, contourPercentiles, setContourPercentiles, defaultContourPercentiles, contourColorEncoding, setContourColorEncoding, featureAggregationStrategy, setFeatureAggregationStrategy } = props;
   const scatterplotOptionsId = $bdb11010cef70236$export$f680877a34711e37();
@@ -228944,7 +228952,7 @@ function ScatterplotOptions(props) {
     return "Scatterplot sliders for contour percentile thresholds";
   }, id: `scatterplot-contour-percentiles-${scatterplotOptionsId}`, valueLabelDisplay: "auto", step: 5e-3, min: 9e-3, max: 0.999 }) })] }), setFeatureAggregationStrategy ? jsxs(TableRow, { children: [jsx$1(TableCell, { className: classes2.labelCell, variant: "head", scope: "row", children: jsx$1("label", { htmlFor: `feature-aggregation-strategy-${scatterplotOptionsId}`, children: "Feature Aggregation Strategy" }) }), jsx$1(TableCell, { className: classes2.inputCell, variant: "body", children: jsx$1(OptionSelect, { className: classes2.select, value: featureAggregationStrategy ?? "first", onChange: handleFeatureAggregationStrategyChange, inputProps: {
     id: `feature-aggregation-strategy-${scatterplotOptionsId}`
-  }, children: FEATURE_AGGREGATION_STRATEGIES$1.map((opt) => jsx$1("option", { value: opt, children: capitalize$3(opt) }, opt)) }) })] }) : null] });
+  }, children: FEATURE_AGGREGATION_STRATEGIES$2.map((opt) => jsx$1("option", { value: opt, children: capitalize$3(opt) }, opt)) }) })] }) : null] });
 }
 const useStyles$t = makeStyles()((theme) => ({
   tooltipAnchor: {
@@ -233616,7 +233624,7 @@ function ChannelNamesLegend(props) {
   }) : null });
 }
 const DEFAULT_CONTOUR_PERCENTILES = [0.09, 0.9, 0.99];
-const DEFAULT_FEATURE_AGGREGATION_STRATEGY$2 = "first";
+const DEFAULT_FEATURE_AGGREGATION_STRATEGY$3 = "first";
 function EmbeddingScatterplotSubscriber(props) {
   const {
     uuid: uuid2,
@@ -233643,7 +233651,7 @@ function EmbeddingScatterplotSubscriber(props) {
   const { embeddingZoom: initialZoom, embeddingTargetX: initialTargetX, embeddingTargetY: initialTargetY } = useInitialCoordination(COMPONENT_COORDINATION_TYPES[ViewType$1.SCATTERPLOT], coordinationScopes);
   const observationsLabel = observationsLabelOverride || obsType;
   const sampleSetSelection = sampleSetSelectionFromProps || sampleSetSelectionFromCoordination;
-  const featureAggregationStrategyToUse = featureAggregationStrategy ?? DEFAULT_FEATURE_AGGREGATION_STRATEGY$2;
+  const featureAggregationStrategyToUse = featureAggregationStrategy ?? DEFAULT_FEATURE_AGGREGATION_STRATEGY$3;
   const [width2, height2, deckRef] = useDeckCanvasSize();
   const title2 = titleOverride || `Scatterplot (${mapping})`;
   const [
@@ -238315,7 +238323,7 @@ function cbrt(x2) {
 function ceil$2(x2) {
   return finalise(x2 = new this(x2), x2.e + 1, 2);
 }
-function clamp$1(x2, min2, max2) {
+function clamp$2(x2, min2, max2) {
   return new this(x2).clamp(min2, max2);
 }
 function config$1(obj) {
@@ -238486,7 +238494,7 @@ function clone$1(obj) {
   Decimal3.atan2 = atan2$2;
   Decimal3.cbrt = cbrt;
   Decimal3.ceil = ceil$2;
-  Decimal3.clamp = clamp$1;
+  Decimal3.clamp = clamp$2;
   Decimal3.cos = cos$3;
   Decimal3.cosh = cosh;
   Decimal3.div = div;
@@ -252470,6 +252478,16 @@ class RelaxedFetchStore extends FetchStore {
       throw e3;
     }
   }
+  async getRange(key2, range2, options = {}) {
+    try {
+      return await super.getRange(key2, range2, options);
+    } catch (e3) {
+      if (e3?.message?.startsWith("Unexpected response status 403") && true) {
+        return void 0;
+      }
+      throw e3;
+    }
+  }
 }
 function transformEntriesForZipFileStore(entries2) {
   const topLevelZarrDirectories = new Set(Object.keys(entries2).map((k) => k.split("/")[0]).filter((firstPathItem) => firstPathItem?.endsWith(".zarr")));
@@ -253379,7 +253397,8 @@ let Spatial$1 = class Spatial extends AbstractSpatialOrScatterplot {
       "expressionData",
       "cellColorEncoding",
       "geneExpressionColormap",
-      "segmentationLayerCallbacks"
+      "segmentationLayerCallbacks",
+      "getExpressionValue"
     ].some(shallowDiff2)) {
       this.onUpdateCellsLayer();
       forceUpdate = true;
@@ -253439,6 +253458,7 @@ const useToggleStyles = makeStyles()(() => ({
     padding: "0px"
   }
 }));
+const FEATURE_AGGREGATION_STRATEGIES$1 = ["first", "last", "sum", "mean"];
 const ToggleFixedAxisButton = ({ setSpatialAxisFixed, spatialAxisFixed, use3d }) => {
   const toggleAxisId = $bdb11010cef70236$export$f680877a34711e37();
   const { classes: classes2 } = useToggleStyles();
@@ -253448,7 +253468,7 @@ const ToggleFixedAxisButton = ({ setSpatialAxisFixed, spatialAxisFixed, use3d })
   } } }) })] });
 };
 function SpatialOptions(props) {
-  const { observationsLabel, cellColorEncoding, setCellColorEncoding, setSpatialAxisFixed, spatialAxisFixed, use3d, tooltipsVisible, setTooltipsVisible, geneExpressionColormap, setGeneExpressionColormap, geneExpressionColormapRange, setGeneExpressionColormapRange, canShowExpressionOptions, canShowColorEncodingOption, canShow3DOptions } = props;
+  const { observationsLabel, cellColorEncoding, setCellColorEncoding, setSpatialAxisFixed, spatialAxisFixed, use3d, tooltipsVisible, setTooltipsVisible, geneExpressionColormap, setGeneExpressionColormap, geneExpressionColormapRange, setGeneExpressionColormapRange, canShowExpressionOptions, canShowColorEncodingOption, canShow3DOptions, featureAggregationStrategy, setFeatureAggregationStrategy } = props;
   const spatialOptionsId = $bdb11010cef70236$export$f680877a34711e37();
   function handleGeneExpressionColormapChange(event2) {
     setGeneExpressionColormap(event2.target.value);
@@ -253484,7 +253504,7 @@ function SpatialOptions(props) {
   }, value: geneExpressionColormapRange, onChange: handleColormapRangeChangeDebounced, getAriaLabel: (index2) => {
     const labelPrefix = index2 === 0 ? "Low value slider" : "High value slider";
     return `${labelPrefix} for spatial gene expression colormap range`;
-  }, id: `gene-expression-colormap-range-${spatialOptionsId}`, valueLabelDisplay: "auto", step: 5e-3, min: 0, max: 1 }) })] })] }) : null] });
+  }, id: `gene-expression-colormap-range-${spatialOptionsId}`, valueLabelDisplay: "auto", step: 5e-3, min: 0, max: 1 }) })] }), setFeatureAggregationStrategy ? jsxs(TableRow, { children: [jsx$1(TableCell, { className: classes2.labelCell, variant: "head", scope: "row", children: jsx$1("label", { htmlFor: `feature-aggregation-strategy-${spatialOptionsId}`, children: "Feature Aggregation Strategy" }) }), jsx$1(TableCell, { className: classes2.inputCell, variant: "body", children: jsx$1(OptionSelect, { className: classes2.select, value: featureAggregationStrategy ?? "first", onChange: (e3) => setFeatureAggregationStrategy(e3.target.value), inputProps: { id: `feature-aggregation-strategy-${spatialOptionsId}` }, children: FEATURE_AGGREGATION_STRATEGIES$1.map((opt) => jsx$1("option", { value: opt, children: capitalize$3(opt) }, opt)) }) })] }) : null] }) : null] });
 }
 function SpatialTooltipSubscriber$1(props) {
   const { parentUuid, obsHighlight, width: width2, height: height2, getObsInfo: getObsInfo2, hoverData, hoverCoord, hoverMode, useHoverInfoForTooltip, getObsIdFromHoverData, featureType, featureLabelsMap } = props;
@@ -253516,12 +253536,13 @@ function SpatialTooltipSubscriber$1(props) {
   }
   return cellInfo ? jsx$1(Tooltip2D, { x: x2, y: y2, parentUuid, sourceUuid, parentWidth: width2, parentHeight: height2, children: jsx$1(TooltipContent, { info: cellInfo, featureType, featureLabelsMap }) }) : null;
 }
+const DEFAULT_FEATURE_AGGREGATION_STRATEGY$2 = "first";
 function SpatialSubscriber$1(props) {
   const { uuid: uuid2, coordinationScopes, closeButtonVisible, downloadButtonVisible, removeGridComponent, observationsLabelOverride, subobservationsLabelOverride: subobservationsLabel = "molecule", theme, title: title2 = "Spatial", disable3d, globalDisable3d, useFullResolutionImage = {}, channelNamesVisible = false, helpText = ViewHelpMapping.SPATIAL } = props;
   const loaders = useLoaders();
   const setComponentHover = useSetComponentHover();
   const setComponentViewInfo = useSetComponentViewInfo(uuid2);
-  const [{ dataset, obsType, featureType, featureValueType, spatialZoom: zoom2, spatialTargetX: targetX2, spatialTargetY: targetY2, spatialTargetZ: targetZ, spatialRotationX: rotationX, spatialRotationY: rotationY, spatialRotationZ: rotationZ, spatialRotationOrbit: rotationOrbit, spatialOrbitAxis: orbitAxis, spatialImageLayer: imageLayers, spatialSegmentationLayer: cellsLayer, spatialPointLayer: moleculesLayer, spatialNeighborhoodLayer: neighborhoodsLayer, obsFilter: cellFilter, obsHighlight: cellHighlight, moleculeHighlight, featureSelection: geneSelection, obsSetSelection: cellSetSelection, obsSetColor: cellSetColor, obsColorEncoding: cellColorEncoding, additionalObsSets: additionalCellSets, spatialAxisFixed, featureValueColormap: geneExpressionColormap, featureValueColormapRange: geneExpressionColormapRange, tooltipsVisible, photometricInterpretation: photometricInterpretationFromCoordination }, { setSpatialZoom: setZoom, setSpatialTargetX: setTargetX, setSpatialTargetY: setTargetY, setSpatialTargetZ: setTargetZ, setSpatialRotationX: setRotationX, setSpatialRotationOrbit: setRotationOrbit, setSpatialOrbitAxis: setOrbitAxis, setSpatialImageLayer: setRasterLayers, setSpatialSegmentationLayer: setCellsLayer, setSpatialPointLayer: setMoleculesLayer, setSpatialNeighborhoodLayer: setNeighborhoodsLayer, setObsFilter: setCellFilter, setObsSetSelection: setCellSetSelection, setObsHighlight: setCellHighlight, setObsSetColor: setCellSetColor, setObsColorEncoding: setCellColorEncoding, setAdditionalObsSets: setAdditionalCellSets, setMoleculeHighlight, setSpatialAxisFixed, setFeatureValueColormap: setGeneExpressionColormap, setFeatureValueColormapRange: setGeneExpressionColormapRange, setTooltipsVisible }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType$1.SPATIAL], coordinationScopes);
+  const [{ dataset, obsType, featureType, featureValueType, spatialZoom: zoom2, spatialTargetX: targetX2, spatialTargetY: targetY2, spatialTargetZ: targetZ, spatialRotationX: rotationX, spatialRotationY: rotationY, spatialRotationZ: rotationZ, spatialRotationOrbit: rotationOrbit, spatialOrbitAxis: orbitAxis, spatialImageLayer: imageLayers, spatialSegmentationLayer: cellsLayer, spatialPointLayer: moleculesLayer, spatialNeighborhoodLayer: neighborhoodsLayer, obsFilter: cellFilter, obsHighlight: cellHighlight, moleculeHighlight, featureSelection: geneSelection, obsSetSelection: cellSetSelection, obsSetColor: cellSetColor, obsColorEncoding: cellColorEncoding, additionalObsSets: additionalCellSets, spatialAxisFixed, featureValueColormap: geneExpressionColormap, featureValueColormapRange: geneExpressionColormapRange, tooltipsVisible, photometricInterpretation: photometricInterpretationFromCoordination, featureAggregationStrategy }, { setSpatialZoom: setZoom, setSpatialTargetX: setTargetX, setSpatialTargetY: setTargetY, setSpatialTargetZ: setTargetZ, setSpatialRotationX: setRotationX, setSpatialRotationOrbit: setRotationOrbit, setSpatialOrbitAxis: setOrbitAxis, setSpatialImageLayer: setRasterLayers, setSpatialSegmentationLayer: setCellsLayer, setSpatialPointLayer: setMoleculesLayer, setSpatialNeighborhoodLayer: setNeighborhoodsLayer, setObsFilter: setCellFilter, setObsSetSelection: setCellSetSelection, setObsHighlight: setCellHighlight, setObsSetColor: setCellSetColor, setObsColorEncoding: setCellColorEncoding, setAdditionalObsSets: setAdditionalCellSets, setMoleculeHighlight, setSpatialAxisFixed, setFeatureValueColormap: setGeneExpressionColormap, setFeatureValueColormapRange: setGeneExpressionColormapRange, setTooltipsVisible, setFeatureAggregationStrategy }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType$1.SPATIAL], coordinationScopes);
   const { spatialZoom: initialZoom, spatialTargetX: initialTargetX, spatialTargetY: initialTargetY, spatialTargetZ: initialTargetZ } = useInitialCoordination(COMPONENT_COORDINATION_TYPES[ViewType$1.SPATIAL], coordinationScopes);
   const observationsLabel = observationsLabelOverride || obsType;
   const [{ imageLayerCallbacks, segmentationLayerCallbacks }] = useAuxiliaryCoordination(COMPONENT_COORDINATION_TYPES.layerController, coordinationScopes);
@@ -253727,7 +253748,15 @@ function SpatialSubscriber$1(props) {
     subobservationsLabel,
     locationsCount
   });
-  const { normData: uint8ExpressionData, extents: expressionExtents } = useUint8FeatureSelection(expressionData);
+  const featureAggregationStrategyToUse = featureAggregationStrategy ?? DEFAULT_FEATURE_AGGREGATION_STRATEGY$2;
+  const aggregatedExpressionData = useMemo$1(() => {
+    if (featureAggregationStrategyToUse != null && expressionData && expressionData.length > 1) {
+      const aggregated = aggregateFeatureArrays(expressionData, featureAggregationStrategyToUse);
+      return [aggregated];
+    }
+    return expressionData;
+  }, [expressionData, featureAggregationStrategyToUse]);
+  const { normData: uint8ExpressionData, extents: expressionExtents } = useUint8FeatureSelection(aggregatedExpressionData);
   const shiftedExpressionDataForBitmask = useMemo$1(() => {
     if (matrixObsIndex && uint8ExpressionData && obsSegmentationsType === "bitmask") {
       const maxId = matrixObsIndex.reduce((max2, curr) => Math.max(max2, Number(curr)));
@@ -253752,7 +253781,7 @@ function SpatialSubscriber$1(props) {
   const canShow3DOptions = canLoad3DLayers && !(disable3d?.length === imageLayerLoaders.length) && !globalDisable3d;
   const options = useMemo$1(() => {
     if (canShow3DOptions || hasExpressionData) {
-      return jsx$1(SpatialOptions, { observationsLabel, cellColorEncoding, setCellColorEncoding, setSpatialAxisFixed, spatialAxisFixed, use3d, tooltipsVisible, setTooltipsVisible, geneExpressionColormap, setGeneExpressionColormap, geneExpressionColormapRange, setGeneExpressionColormapRange, canShowExpressionOptions: hasExpressionData, canShowColorEncodingOption: (hasLocationsData || hasSegmentationsData) && hasExpressionData, canShow3DOptions });
+      return jsx$1(SpatialOptions, { observationsLabel, cellColorEncoding, setCellColorEncoding, setSpatialAxisFixed, spatialAxisFixed, use3d, tooltipsVisible, setTooltipsVisible, geneExpressionColormap, setGeneExpressionColormap, geneExpressionColormapRange, setGeneExpressionColormapRange, canShowExpressionOptions: hasExpressionData, canShowColorEncodingOption: (hasLocationsData || hasSegmentationsData) && hasExpressionData, canShow3DOptions, featureSelection: geneSelection, featureAggregationStrategy, setFeatureAggregationStrategy });
     }
     return null;
   }, [
@@ -253771,7 +253800,10 @@ function SpatialSubscriber$1(props) {
     spatialAxisFixed,
     use3d,
     tooltipsVisible,
-    setTooltipsVisible
+    setTooltipsVisible,
+    geneSelection,
+    featureAggregationStrategy,
+    setFeatureAggregationStrategy
   ]);
   useEffect(() => {
     if (!hasSegmentationsData && cellsLayer && !obsSegmentations && !obsSegmentationsIndex && obsCentroids && obsCentroidsIndex) {
@@ -253834,7 +253866,8 @@ function SpatialSubscriber$1(props) {
     featureValueColormap: geneExpressionColormap,
     featureValueColormapRange: geneExpressionColormapRange,
     setFeatureValueColormapRange: setGeneExpressionColormapRange,
-    extent: expressionExtents?.[0]
+    extent: expressionExtents?.[0],
+    featureAggregationStrategy: featureAggregationStrategyToUse
   })] });
 }
 function getInitialSpatialTargets({ width: width2, height: height2, obsPoints, obsSpots, obsSegmentations, obsSegmentationsLocations, segmentationChannelScopesByLayer, images, is3dMode: use3d, isReady }) {
@@ -255486,12 +255519,12 @@ class ErrorBoundary extends React__default.Component {
   }
 }
 const LazySpatialThree = React__default.lazy(async () => {
-  const { SpatialWrapper: SpatialWrapper2 } = await import("./index-6Oxzw9ho.js").then((n3) => n3.a);
+  const { SpatialWrapper: SpatialWrapper2 } = await import("./index-BlOIc49f.js").then((n3) => n3.a);
   return { default: SpatialWrapper2 };
 });
 const SpatialThreeAdapter = React__default.forwardRef((props, ref2) => jsx$1("div", { ref: ref2, style: { width: "100%", height: "100%" }, children: jsx$1(ErrorBoundary, { fallback: jsx$1("div", { children: "3D spatial view is not available in this environment." }), children: jsx$1(Suspense, { fallback: jsx$1("div", { children: "Loading..." }), children: jsx$1(LazySpatialThree, { ...props }) }) }) }));
 const LazySpatialAccelerated = React__default.lazy(async () => {
-  const { SpatialWrapper: SpatialWrapper2 } = await import("./index-BsUxdbVL.js");
+  const { SpatialWrapper: SpatialWrapper2 } = await import("./index-BSOXpbtb.js");
   return { default: SpatialWrapper2 };
 });
 const SpatialAcceleratedAdapter = React__default.forwardRef((props, ref2) => jsx$1("div", { ref: ref2, style: { width: "100%", height: "100%" }, children: jsx$1(ErrorBoundary, { fallback: jsx$1("div", { children: "3D spatial view is not available in this environment." }), children: jsx$1(Suspense, { fallback: jsx$1("div", { children: "Loading..." }), children: jsx$1(LazySpatialAccelerated, { ...props }) }) }) }));
@@ -255668,7 +255701,8 @@ function SpatialSubscriber(props) {
     bitmaskValueIsIndex = false,
     // TODO: move to coordination type
     three: threeFor3d = false,
-    accelerated: acceleratedFor3d = false
+    accelerated: acceleratedFor3d = false,
+    helpText = ViewHelpMapping.SPATIAL_BETA
   } = props;
   const loaders = useLoaders();
   const setComponentHover = useSetComponentHover();
@@ -256112,7 +256146,7 @@ function SpatialSubscriber(props) {
       }
     }
   };
-  return jsxs(TitleInfo, { title: title2, info: subtitle, isSpatial: true, urls: urls2, theme, closeButtonVisible, downloadButtonVisible, removeGridComponent, isReady, errors, children: [shouldUseThree ? acceleratedFor3d ? jsx$1(SpatialAcceleratedAdapter, { ref: threeRef, uuid: uuid2, width: width2, height: height2, theme, hideTools: !isSelectable, rotation: [rotationX, rotationY, rotationZ], setRotationX, setRotationY, setRotationZ, targetT, targetZ, viewState: isValidViewState ? {
+  return jsxs(TitleInfo, { title: title2, info: subtitle, isSpatial: true, urls: urls2, theme, closeButtonVisible, downloadButtonVisible, removeGridComponent, isReady, errors, helpText, children: [shouldUseThree ? acceleratedFor3d ? jsx$1(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,
@@ -256219,8 +256253,8 @@ function getAxisSizes(transpose2, longestGeneLabel, longestCellLabel, hideObserv
   const font2 = `${AXIS_LABEL_TEXT_SIZE}pt ${AXIS_FONT_FAMILY}`;
   const geneLabelMaxWidth = hideVariableLabels ? 0 : getTextWidth(longestGeneLabel, font2) + AXIS_PADDING;
   const cellLabelMaxWidth = hideObservationLabels ? 0 : getTextWidth(longestCellLabel, font2) + AXIS_PADDING;
-  const axisOffsetLeft = clamp$7(transpose2 ? geneLabelMaxWidth : cellLabelMaxWidth, AXIS_MIN_SIZE, AXIS_MAX_SIZE);
-  const axisOffsetTop = clamp$7(transpose2 ? cellLabelMaxWidth : geneLabelMaxWidth, AXIS_MIN_SIZE, AXIS_MAX_SIZE);
+  const axisOffsetLeft = clamp$8(transpose2 ? geneLabelMaxWidth : cellLabelMaxWidth, AXIS_MIN_SIZE, AXIS_MAX_SIZE);
+  const axisOffsetTop = clamp$8(transpose2 ? cellLabelMaxWidth : geneLabelMaxWidth, AXIS_MIN_SIZE, AXIS_MAX_SIZE);
   return [axisOffsetLeft, axisOffsetTop];
 }
 function mouseToHeatmapPosition(mouseX, mouseY, { offsetLeft, offsetTop, targetX: targetX2, targetY: targetY2, scaleFactor, matrixWidth, matrixHeight, numRows, numCols }) {
@@ -256450,8 +256484,8 @@ const Heatmap$1 = forwardRef$1((props, deckRef) => {
   const scaleFactor = 2 ** viewState.zoom;
   const cellHeight = matrixHeight * scaleFactor / height2;
   const cellWidth = matrixWidth * scaleFactor / width2;
-  const aggSizeX = clamp$7(2 ** Math.ceil(Math.log2(1 / cellWidth)), MIN_ROW_AGG, MAX_ROW_AGG);
-  const aggSizeY = clamp$7(2 ** Math.ceil(Math.log2(1 / cellHeight)), MIN_ROW_AGG, MAX_ROW_AGG);
+  const aggSizeX = clamp$8(2 ** Math.ceil(Math.log2(1 / cellWidth)), MIN_ROW_AGG, MAX_ROW_AGG);
+  const aggSizeY = clamp$8(2 ** Math.ceil(Math.log2(1 / cellHeight)), MIN_ROW_AGG, MAX_ROW_AGG);
   const [targetX2, targetY2] = viewState.target;
   useEffect(() => {
     updateViewInfo({
@@ -256495,8 +256529,8 @@ const Heatmap$1 = forwardRef$1((props, deckRef) => {
     const minTargetY = nextZoom === 0 ? 0 : -(matrixBottom - matrixBottom / nextScaleFactor);
     const maxTargetY = -1 * minTargetY;
     const nextTarget = [
-      clamp$7(nextViewState.target[0], minTargetX, maxTargetX),
-      clamp$7(nextViewState.target[1], minTargetY, maxTargetY)
+      clamp$8(nextViewState.target[0], minTargetX, maxTargetX),
+      clamp$8(nextViewState.target[1], minTargetY, maxTargetY)
     ];
     setViewState({
       zoom: nextZoom,
@@ -263641,7 +263675,7 @@ const useStyles$o = makeStyles()((theme) => ({
 }));
 const SHIFT_KEYCODE = 16;
 function SelectableTable(props) {
-  const { hasColorEncoding, columns: columns2, columnLabels, data: data2, onChange, idKey = "id", valueKey = "value", allowMultiple = false, allowUncheck = false, showTableHead = true, showTableInputs = false, testHeight = void 0, testWidth = void 0, width: width2, height: height2 } = props;
+  const { hasColorEncoding, columns: columns2, columnLabels, data: data2, onChange, idKey = "id", selectedIds, allowMultiple = false, allowUncheck = false, showTableHead = true, showTableInputs = false, testHeight = void 0, testWidth = void 0, width: width2, height: height2 } = props;
   const [selectedRows, setSelectedRows] = useState(null);
   const [isCheckingMultiple, setIsCheckingMultiple] = useState(false);
   useEffect(() => {
@@ -263685,20 +263719,20 @@ function SelectableTable(props) {
   })), [data2, idKey]);
   const isSelected = useCallback((id2) => Array.isArray(selectedRows) && selectedRows.includes(id2), [selectedRows]);
   useEffect(() => {
-    const initialSelectedRows = data2.map((d) => {
-      if (d[valueKey]) {
-        return d[idKey];
-      }
-      return null;
-    }).filter(Boolean);
-    if (!isEqual$3(initialSelectedRows, selectedRows)) {
-      if (initialSelectedRows.length > 0) {
-        setSelectedRows(initialSelectedRows);
-      } else {
-        setSelectedRows(null);
+    if (selectedIds === void 0)
+      return;
+    setSelectedRows((prev2) => {
+      const prevList = prev2 || [];
+      const nextList = selectedIds || [];
+      const sharedList = prevList.filter((id2) => nextList.includes(id2));
+      const nextUnique = nextList.filter((id2) => !prevList.includes(id2));
+      const merged = [...sharedList, ...nextUnique];
+      if (isEqual$3(merged, prevList)) {
+        return prev2;
       }
-    }
-  }, [data2, idKey, valueKey]);
+      return merged.length > 0 ? merged : null;
+    });
+  }, [selectedIds]);
   useEffect(() => {
     if (!onChange || !selectedRows) {
       return;
@@ -263770,8 +263804,7 @@ function FeatureList(props) {
   const data2 = useMemo$1(() => {
     const preSortedData = searchResults.filter((gene) => geneFilter ? geneFilter.includes(gene) : true).map((gene) => ({
       key: gene,
-      name: featureLabelsMap?.get(gene) || featureLabelsMap?.get(cleanFeatureId(gene)) || gene,
-      value: geneSelection ? geneSelection.includes(gene) : false
+      name: featureLabelsMap?.get(gene) || featureLabelsMap?.get(cleanFeatureId(gene)) || gene
     }));
     if (preSortedData && featureListSort === "alphabetical" && preSortedData.length > 0) {
       return preSortedData.sort((a2, b2) => a2[selectableTableSortKey].localeCompare(b2[selectableTableSortKey]));
@@ -263782,8 +263815,7 @@ function FeatureList(props) {
     selectableTableSortKey,
     searchResults,
     geneFilter,
-    featureLabelsMap,
-    geneSelection
+    featureLabelsMap
   ]);
   const handleChange = (event2) => {
     setSearchTerm(event2.target.value);
@@ -263800,7 +263832,7 @@ function FeatureList(props) {
       [primaryColumnName]
     ];
   }, [showFeatureTable, primaryColumnName, hasFeatureLabels]);
-  return width2 > 0 && height2 > 0 ? jsxs(Fragment, { children: [jsx$1("input", { className: classes2.searchBar, type: "text", placeholder: "Search", value: searchTerm, onChange: handleChange }), jsx$1(SelectableTable, { columns: columns2, columnLabels, data: data2, hasColorEncoding, idKey: "key", valueKey: "value", onChange, allowMultiple: enableMultiSelect, allowUncheck: enableMultiSelect, showTableHead: columnLabels.length > 1, width: width2, height: height2 - 34 })] }) : null;
+  return width2 > 0 && height2 > 0 ? jsxs(Fragment, { children: [jsx$1("input", { className: classes2.searchBar, type: "text", placeholder: "Search", value: searchTerm, onChange: handleChange }), jsx$1(SelectableTable, { columns: columns2, columnLabels, data: data2, hasColorEncoding, idKey: "key", selectedIds: geneSelection, onChange, allowMultiple: enableMultiSelect, allowUncheck: enableMultiSelect, showTableHead: columnLabels.length > 1, width: width2, height: height2 - 34 })] }) : null;
 }
 function FeatureListOptions(props) {
   const { children: children3, featureListSort, setFeatureListSort, featureListSortKey, setFeatureListSortKey, showFeatureTable, setShowFeatureTable, hasFeatureLabels, primaryColumnName } = props;
@@ -263817,7 +263849,7 @@ function FeatureListOptions(props) {
   const { classes: classes2 } = usePlotOptionsStyles();
   return jsxs(OptionsContainer, { children: [children3, jsxs(TableRow, { children: [jsx$1(TableCell, { className: classes2.labelCell, variant: "head", scope: "row", children: jsx$1("label", { htmlFor: `feature-list-sort-option-${featureListId}`, children: "Sort Ordering" }) }), jsx$1(TableCell, { variant: "body", children: jsx$1(OptionSelect, { className: classes2.select, value: featureListSort, onChange: handleFeatureListSortChange, inputProps: {
     id: `feature-list-sort-option-${featureListId}`
-  }, children: FEATURELIST_SORT_OPTIONS.map((option) => jsx$1("option", { value: option, children: option }, option)) }) })] }), hasFeatureLabels ? jsxs(Fragment, { children: [jsxs(TableRow, { children: [jsx$1(TableCell, { className: classes2.labelCell, variant: "head", scope: "row", children: jsx$1("label", { htmlFor: `feature-list-sort-key-${featureListId}`, children: "Sort Key" }) }), jsx$1(TableCell, { variant: "body", children: jsx$1(OptionSelect, { className: classes2.select, disabled: featureListSort === "original", value: featureListSortKey, onChange: handleFeatureListSortKeyChange, inputProps: {
+  }, children: FEATURELIST_SORT_OPTIONS.map((option) => jsx$1("option", { value: option, children: capitalize$3(option) }, option)) }) })] }), hasFeatureLabels ? jsxs(Fragment, { children: [jsxs(TableRow, { children: [jsx$1(TableCell, { className: classes2.labelCell, variant: "head", scope: "row", children: jsx$1("label", { htmlFor: `feature-list-sort-key-${featureListId}`, children: "Sort Key" }) }), jsx$1(TableCell, { variant: "body", children: jsx$1(OptionSelect, { className: classes2.select, disabled: featureListSort === "original", value: featureListSortKey, onChange: handleFeatureListSortKeyChange, inputProps: {
     "aria-label": "Select the feature list sort key",
     id: `feature-list-sort-key-${featureListId}`
   }, children: hasFeatureLabels ? jsxs(Fragment, { children: [jsx$1("option", { value: "featureLabels", children: primaryColumnName }), jsx$1("option", { value: "featureIndex", children: ALT_COLNAME })] }) : jsx$1("option", { value: "featureIndex", children: primaryColumnName }) }) })] }), jsxs(TableRow, { children: [jsx$1(TableCell, { className: classes2.labelCell, variant: "head", scope: "row", children: jsx$1("label", { htmlFor: `feature-list-show-alternative-ids-${featureListId}`, children: "Show Alternate IDs" }) }), jsx$1(TableCell, { className: classes2.inputCell, variant: "body", children: jsx$1(Checkbox$1, { className: classes2.tableCheckbox, checked: showFeatureTable, onChange: handleShowTableChange, name: "feature-list-show-table", color: "default", slotProps: { input: {
@@ -265316,7 +265348,7 @@ function PointLayerController(props) {
   const [coloringTabIndex, setColoringTabIndex] = useState(0);
   const { featureIndex } = pointMatrixIndicesData || {};
   const hasSelectedFeatures = Array.isArray(featureSelection) && featureSelection.length > 0;
-  return jsxs(Grid$1, { className: lcClasses.layerControllerGrid, children: [jsxs(Paper, { elevation: 4, className: lcClasses.layerControllerRoot, children: [jsxs(Grid$1, { container: true, direction: "row", justifyContent: "space-between", children: [jsx$1(Grid$1, { size: 1, children: jsx$1(Button, { onClick: handleVisibleChange, className: menuClasses.imageLayerVisibleButton, "aria-label": "Toggle layer visibility", children: jsx$1(Visibility, {}) }) }), jsx$1(Grid$1, { size: 1, children: jsx$1(ChannelColorPickerMenu, { theme, color: color2, setColor: setColor2, palette, isStaticColor, isColormap, featureValueColormap, visible }) }), jsx$1(Grid$1, { size: 6, children: jsx$1(Typography, { className: menuClasses.imageLayerName, children: label2 }) }), jsx$1(Grid$1, { size: 2, children: jsx$1(Slider, { value: opacity2, min: 0, max: 1, step: 1e-3, onChange: handleOpacityChange, className: menuClasses.imageLayerOpacitySlider, orientation: "horizontal", "aria-label": `Adjust opacity for layer ${label2}` }) }), jsx$1(Grid$1, { size: 1, children: jsx$1(PointLayerEllipsisMenu, { featureSelection, obsColorEncoding, setObsColorEncoding, featureValueColormapRange, setFeatureValueColormapRange, tooltipsVisible, setTooltipsVisible, tooltipCrosshairsVisible, setTooltipCrosshairsVisible, legendVisible, setLegendVisible, featureFilterMode, setFeatureFilterMode }) }), jsxs(Grid$1, { size: 1, container: true, direction: "row", children: [jsx$1(SvgPoints, { className: classes2.layerTypePointIcon }), null] })] }), loadingDoneFraction < 1 ? jsx$1(Grid$1, { size: 12, container: true, direction: "column", justifyContent: "space-between", className: classes2.pointFeatureControllerGrid, children: jsx$1(LinearProgress, { variant: loadingDoneFraction === 0 ? "indeterminate" : "determinate", value: loadingDoneFraction * 100 }) }) : null, null] }), hasSelectedFeatures ? jsxs(Fragment, { children: [featureSelection.map((featureName) => jsx$1(LayerPerFeatureController, { theme, featureName, featureColor, setFeatureColor, spatialLayerColor, featureIndex, featureValueColormap, featureSelection, setFeatureSelection, obsColorEncoding, loadingDoneFraction, opacity: opacity2, handleOpacityChange }, featureName)), jsx$1(Grid$1, { className: lcClasses.layerControllerGrid, children: jsx$1(Paper, { elevation: 2, className: lcClasses.layerControllerSubRow, children: jsxs(Grid$1, { container: true, direction: "row", justifyContent: "space-between", children: [jsx$1(Grid$1, { size: 1, children: jsx$1(Button, { onClick: () => setFeatureFilterMode(featureFilterMode === "featureSelection" ? null : "featureSelection"), className: menuClasses.imageLayerVisibleButton, "aria-label": "Toggle visibility of unselected points", children: featureFilterMode === "featureSelection" ? jsx$1(VisibilityOffIcon, {}) : jsx$1(VisibilityIcon, {}) }) }), jsx$1(Grid$1, { size: 1, children: jsx$1(ChannelColorPickerMenu, { theme, color: getDefaultColor("dark"), setColor: null, isStaticColor: true, isColormap: false, visible: true }) }), jsx$1(Grid$1, { size: 6, children: jsx$1(Typography, { className: menuClasses.imageLayerName, children: "Unselected" }) }), jsx$1(Grid$1, { size: 2, sx: { paddingRight: "12px", overflow: "visible" }, children: jsx$1(Slider, { value: opacity2, min: 0, max: 1, step: 1e-3, onChange: handleOpacityChange, className: menuClasses.imageLayerOpacitySlider, orientation: "horizontal", "aria-label": "Adjust opacity for unselected layer" }) }), jsx$1(Grid$1, { size: 1, children: jsx$1(SvgPoints, { className: classes2.layerTypePointIcon }) })] }) }) })] }) : null] });
+  return jsxs(Grid$1, { className: lcClasses.layerControllerGrid, children: [jsxs(Paper, { elevation: 4, className: lcClasses.layerControllerRoot, children: [jsxs(Grid$1, { container: true, direction: "row", justifyContent: "space-between", children: [jsx$1(Grid$1, { size: 1, children: jsx$1(Button, { onClick: handleVisibleChange, className: menuClasses.imageLayerVisibleButton, "aria-label": "Toggle layer visibility", children: jsx$1(Visibility, {}) }) }), jsx$1(Grid$1, { size: 1, children: jsx$1(ChannelColorPickerMenu, { theme, color: color2, setColor: setColor2, palette, isStaticColor, isColormap, featureValueColormap, visible }) }), jsx$1(Grid$1, { size: 6, children: jsx$1(Typography, { className: menuClasses.imageLayerName, children: label2 }) }), jsx$1(Grid$1, { size: 2, children: jsx$1(Slider, { value: opacity2, min: 0, max: 1, step: 1e-3, onChange: handleOpacityChange, className: menuClasses.imageLayerOpacitySlider, orientation: "horizontal", "aria-label": `Adjust opacity for layer ${label2}` }) }), jsx$1(Grid$1, { size: 1, children: jsx$1(PointLayerEllipsisMenu, { featureSelection, obsColorEncoding, setObsColorEncoding, featureValueColormapRange, setFeatureValueColormapRange, tooltipsVisible, setTooltipsVisible, tooltipCrosshairsVisible, setTooltipCrosshairsVisible, legendVisible, setLegendVisible, featureFilterMode, setFeatureFilterMode }) }), jsxs(Grid$1, { size: 1, container: true, direction: "row", children: [jsx$1(SvgPoints, { className: classes2.layerTypePointIcon }), null] })] }), loadingDoneFraction < 1 ? jsx$1(Grid$1, { size: 12, container: true, direction: "column", justifyContent: "space-between", className: classes2.pointFeatureControllerGrid, children: jsx$1(LinearProgress, { variant: loadingDoneFraction === 0 ? "indeterminate" : "determinate", value: loadingDoneFraction * 100 }) }) : null, null] }), layerPerFeatureForPoints && hasSelectedFeatures ? jsxs(Fragment, { children: [featureSelection.map((featureName) => jsx$1(LayerPerFeatureController, { theme, featureName, featureColor, setFeatureColor, spatialLayerColor, featureIndex, featureValueColormap, featureSelection, setFeatureSelection, obsColorEncoding, loadingDoneFraction, opacity: opacity2, handleOpacityChange }, featureName)), jsx$1(Grid$1, { className: lcClasses.layerControllerGrid, children: jsx$1(Paper, { elevation: 2, className: lcClasses.layerControllerSubRow, children: jsxs(Grid$1, { container: true, direction: "row", justifyContent: "space-between", children: [jsx$1(Grid$1, { size: 1, children: jsx$1(Button, { onClick: () => setFeatureFilterMode(featureFilterMode === "featureSelection" ? null : "featureSelection"), className: menuClasses.imageLayerVisibleButton, "aria-label": "Toggle visibility of unselected points", children: featureFilterMode === "featureSelection" ? jsx$1(VisibilityOffIcon, {}) : jsx$1(VisibilityIcon, {}) }) }), jsx$1(Grid$1, { size: 1, children: jsx$1(ChannelColorPickerMenu, { theme, color: getDefaultColor("dark"), setColor: null, isStaticColor: true, isColormap: false, visible: true }) }), jsx$1(Grid$1, { size: 6, children: jsx$1(Typography, { className: menuClasses.imageLayerName, children: "Unselected" }) }), jsx$1(Grid$1, { size: 2, sx: { paddingRight: "12px", overflow: "visible" }, children: jsx$1(Slider, { value: opacity2, min: 0, max: 1, step: 1e-3, onChange: handleOpacityChange, className: menuClasses.imageLayerOpacitySlider, orientation: "horizontal", "aria-label": "Adjust opacity for unselected layer" }) }), jsx$1(Grid$1, { size: 1, children: jsx$1(SvgPoints, { className: classes2.layerTypePointIcon }) })] }) }) })] }) : null] });
 }
 const useStyles$e = makeStyles()(() => ({
   layerTypeSegmentationIcon: {
@@ -268145,17 +268177,23 @@ const useStyles$a = makeStyles()(() => ({
   }
 }));
 function ChannelSelectionDropdown(props) {
-  const { featureIndex, targetC, setTargetC, setWindow: setWindow2, disabled } = props;
+  const { featureIndex, channelsSortOrder, targetC, setTargetC, setWindow: setWindow2, disabled } = props;
   const { classes: classes2 } = useStyles$a();
   const { classes: selectClasses2 } = useSelectStyles();
   function handleChange(event2) {
     setTargetC(event2.target.value === "" ? null : Number(event2.target.value));
     setWindow2(null);
   }
-  return Array.isArray(featureIndex) ? jsx$1(NativeSelect, { classes: { root: selectClasses2.selectRoot }, className: classes2.oneLineChannelSelect, value: targetC === null ? "" : targetC, onChange: handleChange, inputProps: { "aria-label": "Channel selector" }, children: featureIndex.map((channelName, channelIndex) => (
-    // eslint-disable-next-line react/no-array-index-key
-    jsx$1("option", { disabled, value: channelIndex, children: channelName }, `${channelName}-${channelIndex}`)
-  )) }) : null;
+  const sortedOptions = useMemo$1(() => {
+    if (!Array.isArray(featureIndex))
+      return [];
+    const options = featureIndex.map((channelName, channelIndex) => ({ channelName, channelIndex }));
+    if (channelsSortOrder === "alphabetical") {
+      return options.sort((a2, b2) => a2.channelName.localeCompare(b2.channelName, void 0, { numeric: true, sensitivity: "base" }));
+    }
+    return options;
+  }, [featureIndex, channelsSortOrder]);
+  return Array.isArray(featureIndex) ? jsx$1(NativeSelect, { classes: { root: selectClasses2.selectRoot }, className: classes2.oneLineChannelSelect, value: targetC === null ? "" : targetC, onChange: handleChange, inputProps: { "aria-label": "Channel selector" }, children: sortedOptions.map(({ channelName, channelIndex }) => jsx$1("option", { disabled, value: channelIndex, children: channelName }, `${channelName}-${channelIndex}`)) }) : null;
 }
 function ImageChannelController(props) {
   const {
@@ -268183,7 +268221,8 @@ function ImageChannelController(props) {
     spatialRenderingMode,
     numResolutions,
     spatialMaxResolution,
-    setSpatialMaxResolution
+    setSpatialMaxResolution,
+    channelsSortOrder
   } = props;
   const removeChannel = useRemoveImageChannelInMetaCoordinationScopes();
   const [showValueExtent, setShowValueExtent] = useState(true);
@@ -268220,7 +268259,7 @@ function ImageChannelController(props) {
       setWindow2(minMaxDomain);
     }
   }
-  return jsxs(Grid$1, { container: true, direction: "row", justifyContent: "space-between", children: [jsx$1(Grid$1, { size: 1, children: jsx$1(ChannelVisibilityCheckbox, { color: color2, setColor: setColor2, visible, setVisible, disabled: isLoading, theme, colormapOn }) }), jsx$1(Grid$1, { size: 1, children: jsx$1(ChannelColorPickerMenu, { color: color2, setColor: setColor2, visible, setVisible, disabled: isLoading, theme, isStaticColor: !colormapOn, palette: VIEWER_PALETTE }) }), jsx$1(Grid$1, { size: 6, children: jsx$1(ChannelSelectionDropdown, { featureIndex, targetC, setTargetC, setWindow: setWindow2, disabled: isLoading }) }), jsx$1(Grid$1, { size: 3, children: jsx$1(ChannelSlider, { image: image2, targetT, targetZ, targetC, window: window2, setWindow: setWindow2, disabled, color: color2, theme, colormapOn, showValueExtent, minMaxDomain }) }), jsx$1(Grid$1, { size: 1, children: jsx$1(ChannelOptions, { onRemove: onRemove2, showValueExtent, setShowValueExtent, onResetWindowUsingIQR: handleResetWindowUsingIQR, numResolutions, spatialMaxResolution, setSpatialMaxResolution }) })] });
+  return jsxs(Grid$1, { container: true, direction: "row", justifyContent: "space-between", children: [jsx$1(Grid$1, { size: 1, children: jsx$1(ChannelVisibilityCheckbox, { color: color2, setColor: setColor2, visible, setVisible, disabled: isLoading, theme, colormapOn }) }), jsx$1(Grid$1, { size: 1, children: jsx$1(ChannelColorPickerMenu, { color: color2, setColor: setColor2, visible, setVisible, disabled: isLoading, theme, isStaticColor: !colormapOn, palette: VIEWER_PALETTE }) }), jsx$1(Grid$1, { size: 6, children: jsx$1(ChannelSelectionDropdown, { featureIndex, targetC, setTargetC, setWindow: setWindow2, disabled: isLoading, channelsSortOrder }) }), jsx$1(Grid$1, { size: 3, children: jsx$1(ChannelSlider, { image: image2, targetT, targetZ, targetC, window: window2, setWindow: setWindow2, disabled, color: color2, theme, colormapOn, showValueExtent, minMaxDomain }) }), jsx$1(Grid$1, { size: 1, children: jsx$1(ChannelOptions, { onRemove: onRemove2, showValueExtent, setShowValueExtent, onResetWindowUsingIQR: handleResetWindowUsingIQR, numResolutions, spatialMaxResolution, setSpatialMaxResolution }) })] });
 }
 function DimensionSlider(props) {
   const { boundingSlice, sliceValue, setSliceValue, label: label2 } = props;
@@ -268319,7 +268358,7 @@ const lodSliderRangeConfig = {
   step: 1
 };
 function ImageLayerEllipsisMenu(props) {
-  const { colormap, setColormap, photometricInterpretation, setPhotometricInterpretation, spatialTargetResolution, setSpatialTargetResolution, spatialLodFactor, setSpatialLodFactor, volumetricRenderingAlgorithm, setVolumetricRenderingAlgorithm, spatialLayerTransparentColor, setSpatialLayerTransparentColor, spatialRenderingMode, image: image2, channelScopes, tooltipsVisible, setTooltipsVisible, channelLabelsVisible, setChannelLabelsVisible, channelLabelsOrientation, setChannelLabelsOrientation, channelLabelSize, setChannelLabelSize } = props;
+  const { colormap, setColormap, photometricInterpretation, setPhotometricInterpretation, spatialTargetResolution, setSpatialTargetResolution, spatialLodFactor, setSpatialLodFactor, volumetricRenderingAlgorithm, setVolumetricRenderingAlgorithm, spatialLayerTransparentColor, setSpatialLayerTransparentColor, spatialRenderingMode, image: image2, channelScopes, tooltipsVisible, setTooltipsVisible, channelLabelsVisible, setChannelLabelsVisible, channelLabelsOrientation, setChannelLabelsOrientation, channelLabelSize, setChannelLabelSize, channelsSortOrder, setChannelsSortOrder } = props;
   const [open2, setOpen] = useState(false);
   const { classes: selectClasses2 } = useSelectStyles();
   const { classes: menuClasses } = useEllipsisMenuStyles();
@@ -268345,6 +268384,9 @@ function ImageLayerEllipsisMenu(props) {
   function handleChannelLabelsOrientationChange(event2) {
     setChannelLabelsOrientation(event2.target.value);
   }
+  function handleChannelsSortOrderChange(event2) {
+    setChannelsSortOrder(event2.target.value);
+  }
   function handleLodFactorChange(event2, value2) {
     setLocalLodSliderValue(value2);
   }
@@ -268366,11 +268408,12 @@ function ImageLayerEllipsisMenu(props) {
   const channelLabelsOrientationId = $bdb11010cef70236$export$f680877a34711e37();
   const channelLabelSizeId = $bdb11010cef70236$export$f680877a34711e37();
   const lodFactorId = $bdb11010cef70236$export$f680877a34711e37();
+  const channelsSortOrderId = $bdb11010cef70236$export$f680877a34711e37();
   return jsxs(PopperMenu, { open: open2, setOpen, buttonIcon: jsx$1(MoreVertIcon, {}), buttonClassName: menuClasses.imageLayerMenuButton, containerClassName: menuClasses.imageLayerPopperContainer, withPaper: true, "aria-label": "Open image layer options menu", children: [is3dMode && jsxs(MenuItem, { dense: true, disableGutters: true, className: menuClasses.menuItem, children: [jsx$1("label", { id: `${lodFactorId}-label`, className: menuClasses.imageLayerMenuLabel, htmlFor: lodFactorId, children: "LOD Factor: " }), jsx$1(Slider, { disabled: !is3dMode, value: localLodSliderValue, onChange: handleLodFactorChange, onChangeCommitted: handleLodFactorChangeCommitted, className: menuClasses.menuItemSlider, orientation: "horizontal", id: lodFactorId, "aria-label": "Level of detail factor slider", valueLabelDisplay: "off", ...lodSliderRangeConfig }), jsx$1(Box, { px: 1 }), jsx$1(Input$1, { value: localLodSliderValue, onChange: handleLodFactorInputChange, onBlur: handleLodFactorInputChange, "aria-labelledby": `${lodFactorId}-label`, size: "small", sx: { width: "6ch", flexShrink: 0, fontVariantNumeric: "tabular-nums" }, endAdornment: jsx$1(InputAdornment$1, { position: "end", variant: "standard", sx: { "& > p": { marginBottom: 0 } }, children: "%" }), inputProps: {
     ...lodSliderRangeConfig,
     inputMode: "numeric",
     pattern: "[0-9]*"
-  } })] }), jsxs(MenuItem, { dense: true, disableGutters: true, classes: menuClasses.menuItem, children: [jsx$1("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: colormapId, children: "Colormap: " }), jsxs(NativeSelect, { disabled: photometricInterpretation === "RGB", onChange: handleColormapChange, value: colormap === null ? "" : colormap, inputProps: { id: colormapId, "aria-label": "Colormap selector" }, classes: { root: selectClasses2.selectRoot }, children: [jsx$1("option", { "aria-label": "None", value: "", children: "None" }), COLORMAP_OPTIONS.map((name2) => jsx$1("option", { value: name2, children: name2 }, name2))] })] }), jsxs(MenuItem, { dense: true, disableGutters: true, classes: menuClasses.menuItem, children: [jsx$1("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: interpretationId, children: "Photometric Interpretation: " }), jsxs(NativeSelect, { onChange: handleInterpretationChange, value: photometricInterpretation, inputProps: { id: interpretationId, "aria-label": "Photometric interpretation selector" }, classes: { root: selectClasses2.selectRoot }, children: [jsx$1("option", { "aria-label": "RGB", value: "RGB", children: "RGB" }), channelScopes.length > 0 ? jsx$1("option", { "aria-label": "BlackIsZero", value: "BlackIsZero", children: "BlackIsZero" }) : null] })] }), jsxs(MenuItem, { dense: true, disableGutters: true, classes: menuClasses.menuItem, children: [jsx$1("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: transparentId, children: "Zero Transparent: " }), jsx$1(Checkbox$1, { color: "primary", checked: spatialLayerTransparentColor !== null, onChange: (e3, v) => setSpatialLayerTransparentColor(v ? [0, 0, 0] : null), slotProps: { input: { id: transparentId, "aria-label": "Render zero-value pixels as transparent" } } })] }), jsxs(MenuItem, { dense: true, disableGutters: true, classes: menuClasses.menuItem, children: [jsx$1("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: volumetricId, children: "Volumetric Rendering: " }), jsxs(NativeSelect, { onChange: handleVolumetricChange, value: volumetricRenderingAlgorithm, inputProps: { id: volumetricId, "aria-label": "Volumetric rendering algorithm selector" }, classes: { root: selectClasses2.selectRoot }, disabled: !is3dMode, children: [jsx$1("option", { "aria-label": "Additive", value: "additive", children: "Additive" }), jsx$1("option", { "aria-label": "Maximum Intensity Projection", value: "maximumIntensityProjection", children: "Maximum Intensity Projection" })] })] }), jsxs(MenuItem, { dense: true, disableGutters: true, children: [jsx$1("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: resolutionId, children: "Volume Resolution: " }), jsxs(NativeSelect, { disabled: !is3dMode || !isMultiResolution, onChange: handleResolutionChange, value: spatialTargetResolution === null ? "auto" : spatialTargetResolution, inputProps: { id: resolutionId, "aria-label": "Volumetric resolution selector" }, classes: { root: selectClasses2.selectRoot }, children: [jsx$1("option", { value: "auto", children: "Auto" }), Array.isArray(multiResolutionStats) ? multiResolutionStats.map((stats, resolution) => stats.canLoad ? jsx$1("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] })] }), jsxs(MenuItem, { dense: true, disableGutters: true, classes: menuClasses.menuItem, children: [jsx$1("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: tooltipsVisibleId, children: "Tooltips Visible: " }), jsx$1(Checkbox$1, { color: "primary", checked: tooltipsVisible, onChange: (e3, v) => setTooltipsVisible(v), slotProps: { input: { id: tooltipsVisibleId, "aria-label": "Render pixel value tooltips" } } })] }), jsxs(MenuItem, { dense: true, disableGutters: true, classes: menuClasses.menuItem, children: [jsx$1("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: channelLabelsVisibleId, children: "Channel Labels Visible: " }), jsx$1(Checkbox$1, { disabled: photometricInterpretation === "RGB", color: "primary", checked: channelLabelsVisible, onChange: (e3, v) => setChannelLabelsVisible(v), slotProps: { input: { id: channelLabelsVisibleId, "aria-label": "Render channel labels" } } })] }), jsxs(MenuItem, { dense: true, disableGutters: true, classes: menuClasses.menuItem, children: [jsx$1("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: channelLabelsOrientationId, children: "Channel Labels Orientation: " }), jsxs(NativeSelect, { disabled: photometricInterpretation === "RGB", onChange: handleChannelLabelsOrientationChange, value: channelLabelsOrientation, inputProps: { id: channelLabelsOrientationId, "aria-label": "Channel labels orientation selector" }, classes: { root: selectClasses2.selectRoot }, children: [jsx$1("option", { "aria-label": "Vertical", value: "vertical", children: "Vertical" }), jsx$1("option", { "aria-label": "Horizontal", value: "horizontal", children: "Horizontal" })] })] }), jsxs(MenuItem, { dense: true, disableGutters: true, classes: menuClasses.menuItem, children: [jsx$1("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: channelLabelSizeId, children: "Channel Labels Size: " }), jsx$1(Slider, { 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" })] })] });
+  } })] }), jsxs(MenuItem, { dense: true, disableGutters: true, classes: menuClasses.menuItem, children: [jsx$1("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: colormapId, children: "Colormap: " }), jsxs(NativeSelect, { disabled: photometricInterpretation === "RGB", onChange: handleColormapChange, value: colormap === null ? "" : colormap, inputProps: { id: colormapId, "aria-label": "Colormap selector" }, classes: { root: selectClasses2.selectRoot }, children: [jsx$1("option", { "aria-label": "None", value: "", children: "None" }), COLORMAP_OPTIONS.map((name2) => jsx$1("option", { value: name2, children: name2 }, name2))] })] }), jsxs(MenuItem, { dense: true, disableGutters: true, classes: menuClasses.menuItem, children: [jsx$1("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: interpretationId, children: "Photometric Interpretation: " }), jsxs(NativeSelect, { onChange: handleInterpretationChange, value: photometricInterpretation, inputProps: { id: interpretationId, "aria-label": "Photometric interpretation selector" }, classes: { root: selectClasses2.selectRoot }, children: [jsx$1("option", { "aria-label": "RGB", value: "RGB", children: "RGB" }), channelScopes.length > 0 ? jsx$1("option", { "aria-label": "BlackIsZero", value: "BlackIsZero", children: "BlackIsZero" }) : null] })] }), jsxs(MenuItem, { dense: true, disableGutters: true, classes: menuClasses.menuItem, children: [jsx$1("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: transparentId, children: "Zero Transparent: " }), jsx$1(Checkbox$1, { color: "primary", checked: spatialLayerTransparentColor !== null, onChange: (e3, v) => setSpatialLayerTransparentColor(v ? [0, 0, 0] : null), slotProps: { input: { id: transparentId, "aria-label": "Render zero-value pixels as transparent" } } })] }), jsxs(MenuItem, { dense: true, disableGutters: true, classes: menuClasses.menuItem, children: [jsx$1("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: volumetricId, children: "Volumetric Rendering: " }), jsxs(NativeSelect, { onChange: handleVolumetricChange, value: volumetricRenderingAlgorithm, inputProps: { id: volumetricId, "aria-label": "Volumetric rendering algorithm selector" }, classes: { root: selectClasses2.selectRoot }, disabled: !is3dMode, children: [jsx$1("option", { "aria-label": "Additive", value: "additive", children: "Additive" }), jsx$1("option", { "aria-label": "Maximum Intensity Projection", value: "maximumIntensityProjection", children: "Maximum Intensity Projection" })] })] }), jsxs(MenuItem, { dense: true, disableGutters: true, children: [jsx$1("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: resolutionId, children: "Volume Resolution: " }), jsxs(NativeSelect, { disabled: !is3dMode || !isMultiResolution, onChange: handleResolutionChange, value: spatialTargetResolution === null ? "auto" : spatialTargetResolution, inputProps: { id: resolutionId, "aria-label": "Volumetric resolution selector" }, classes: { root: selectClasses2.selectRoot }, children: [jsx$1("option", { value: "auto", children: "Auto" }), Array.isArray(multiResolutionStats) ? multiResolutionStats.map((stats, resolution) => stats.canLoad ? jsx$1("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] })] }), jsxs(MenuItem, { dense: true, disableGutters: true, classes: menuClasses.menuItem, children: [jsx$1("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: tooltipsVisibleId, children: "Tooltips Visible: " }), jsx$1(Checkbox$1, { color: "primary", checked: tooltipsVisible, onChange: (e3, v) => setTooltipsVisible(v), slotProps: { input: { id: tooltipsVisibleId, "aria-label": "Render pixel value tooltips" } } })] }), jsxs(MenuItem, { dense: true, disableGutters: true, classes: menuClasses.menuItem, children: [jsx$1("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: channelLabelsVisibleId, children: "Channel Labels Visible: " }), jsx$1(Checkbox$1, { disabled: photometricInterpretation === "RGB", color: "primary", checked: channelLabelsVisible, onChange: (e3, v) => setChannelLabelsVisible(v), slotProps: { input: { id: channelLabelsVisibleId, "aria-label": "Render channel labels" } } })] }), jsxs(MenuItem, { dense: true, disableGutters: true, classes: menuClasses.menuItem, children: [jsx$1("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: channelLabelsOrientationId, children: "Channel Labels Orientation: " }), jsxs(NativeSelect, { disabled: photometricInterpretation === "RGB", onChange: handleChannelLabelsOrientationChange, value: channelLabelsOrientation, inputProps: { id: channelLabelsOrientationId, "aria-label": "Channel labels orientation selector" }, classes: { root: selectClasses2.selectRoot }, children: [jsx$1("option", { "aria-label": "Vertical", value: "vertical", children: "Vertical" }), jsx$1("option", { "aria-label": "Horizontal", value: "horizontal", children: "Horizontal" })] })] }), jsxs(MenuItem, { dense: true, disableGutters: true, classes: menuClasses.menuItem, children: [jsx$1("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: channelLabelSizeId, children: "Channel Labels Size: " }), jsx$1(Slider, { 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" })] }), jsxs(MenuItem, { dense: true, disableGutters: true, classes: menuClasses.menuItem, children: [jsx$1("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: channelsSortOrderId, children: "Channel Ordering: " }), jsxs(NativeSelect, { onChange: handleChannelsSortOrderChange, value: channelsSortOrder, inputProps: { id: channelsSortOrderId, "aria-label": "Channel sort order selector" }, classes: { root: selectClasses2.selectRoot }, children: [jsx$1("option", { "aria-label": "Original", value: "original", children: "Original" }), jsx$1("option", { "aria-label": "Alphabetical", value: "alphabetical", children: "Alphabetical" })] })] })] });
 }
 function ImageLayerController(props) {
   const {
@@ -268396,8 +268439,8 @@ function ImageLayerController(props) {
     volumeStillRef = null
   } = props;
   const [open2, setOpen] = useState(true);
-  const { spatialLayerVisible: visible, spatialLayerOpacity: opacity2, spatialLayerColormap: colormap, photometricInterpretation, spatialTargetResolution, spatialLodFactor, volumetricRenderingAlgorithm, spatialLayerTransparentColor, spatialSliceX, spatialSliceY, spatialSliceZ, tooltipsVisible, spatialChannelLabelsVisible: channelLabelsVisible, spatialChannelLabelsOrientation: channelLabelsOrientation, spatialChannelLabelSize: channelLabelSize } = layerCoordination;
-  const { setSpatialLayerVisible: setVisible, setSpatialLayerOpacity: setOpacity2, setSpatialLayerColormap: setColormap, setPhotometricInterpretation, setSpatialTargetResolution, setSpatialLodFactor, setVolumetricRenderingAlgorithm, setSpatialLayerTransparentColor, setSpatialSliceX, setSpatialSliceY, setSpatialSliceZ, setTooltipsVisible, setSpatialChannelLabelsVisible: setChannelLabelsVisible, setSpatialChannelLabelsOrientation: setChannelLabelsOrientation, setSpatialChannelLabelSize: setChannelLabelSize } = setLayerCoordination;
+  const { spatialLayerVisible: visible, spatialLayerOpacity: opacity2, spatialLayerColormap: colormap, photometricInterpretation, spatialTargetResolution, spatialLodFactor, volumetricRenderingAlgorithm, spatialLayerTransparentColor, spatialSliceX, spatialSliceY, spatialSliceZ, tooltipsVisible, spatialChannelLabelsVisible: channelLabelsVisible, spatialChannelLabelsOrientation: channelLabelsOrientation, spatialChannelLabelSize: channelLabelSize, spatialChannelsSortOrder: channelsSortOrder } = layerCoordination;
+  const { setSpatialLayerVisible: setVisible, setSpatialLayerOpacity: setOpacity2, setSpatialLayerColormap: setColormap, setPhotometricInterpretation, setSpatialTargetResolution, setSpatialLodFactor, setVolumetricRenderingAlgorithm, setSpatialLayerTransparentColor, setSpatialSliceX, setSpatialSliceY, setSpatialSliceZ, setTooltipsVisible, setSpatialChannelLabelsVisible: setChannelLabelsVisible, setSpatialChannelLabelsOrientation: setChannelLabelsOrientation, setSpatialChannelLabelSize: setChannelLabelSize, setSpatialChannelsSortOrder: setChannelsSortOrder } = setLayerCoordination;
   const addChannel = useAddImageChannelInMetaCoordinationScopes();
   const visibleSetting = typeof visible === "boolean" ? visible : true;
   const Visibility = useMemo$1(() => visibleSetting ? VisibilityIcon : VisibilityOffIcon, [visibleSetting]);
@@ -268417,12 +268460,12 @@ function ImageLayerController(props) {
   const { classes: menuClasses } = useEllipsisMenuStyles();
   const { classes: controllerSectionClasses } = useControllerSectionStyles();
   const isMultiChannel = photometricInterpretation !== "RGB";
-  return jsx$1(Grid$1, { className: controllerSectionClasses.layerControllerGrid, children: jsxs(Paper, { elevation: 4, className: controllerSectionClasses.layerControllerRoot, children: [jsxs(Grid$1, { container: true, direction: "row", justifyContent: "space-between", children: [jsx$1(Grid$1, { size: 1, children: jsx$1(Button, { className: menuClasses.imageLayerVisibleButton, onClick: handleVisibleChange, "aria-label": "Toggle layer visibility", children: jsx$1(Visibility, {}) }) }), jsx$1(Grid$1, { size: 1 }), jsx$1(Grid$1, { size: 6, children: jsx$1(Typography, { className: menuClasses.imageLayerName, children: label2 }) }), jsx$1(Grid$1, { size: 2, children: jsx$1(Slider, { value: opacity2, min: 0, max: 1, step: 1e-3, onChange: handleOpacityChange, className: menuClasses.imageLayerOpacitySlider, orientation: "horizontal", "aria-label": `Adjust opacity for layer ${label2}` }) }), jsx$1(Grid$1, { size: 1, children: jsx$1(ImageLayerEllipsisMenu, { colormap, setColormap, photometricInterpretation, setPhotometricInterpretation, spatialTargetResolution, setSpatialTargetResolution, spatialLodFactor, setSpatialLodFactor, volumetricRenderingAlgorithm, setVolumetricRenderingAlgorithm, spatialLayerTransparentColor, setSpatialLayerTransparentColor, spatialRenderingMode, image: image2, channelScopes, tooltipsVisible, setTooltipsVisible, channelLabelsVisible, setChannelLabelsVisible, channelLabelsOrientation, setChannelLabelsOrientation, channelLabelSize, setChannelLabelSize }) }), jsxs(Grid$1, { size: 1, container: true, direction: "row", children: [jsx$1(ImageIcon, { className: classes2.layerTypeImageIcon }), isMultiChannel ? jsx$1(Button, { onClick: handleOpenChange, className: classes2.channelExpansionButton, "aria-label": "Expand or collapse channel controls", children: open2 ? jsx$1(ExpandLess, {}) : jsx$1(ExpandMore, {}) }) : null] })] }), isMultiChannel && open2 ? jsxs(Grid$1, { container: true, direction: "column", justifyContent: "space-between", className: classes2.imageChannelControllerGrid, children: [channelScopes.map((cScope) => {
+  return jsx$1(Grid$1, { className: controllerSectionClasses.layerControllerGrid, children: jsxs(Paper, { elevation: 4, className: controllerSectionClasses.layerControllerRoot, children: [jsxs(Grid$1, { container: true, direction: "row", justifyContent: "space-between", children: [jsx$1(Grid$1, { size: 1, children: jsx$1(Button, { className: menuClasses.imageLayerVisibleButton, onClick: handleVisibleChange, "aria-label": "Toggle layer visibility", children: jsx$1(Visibility, {}) }) }), jsx$1(Grid$1, { size: 1 }), jsx$1(Grid$1, { size: 6, children: jsx$1(Typography, { className: menuClasses.imageLayerName, children: label2 }) }), jsx$1(Grid$1, { size: 2, children: jsx$1(Slider, { value: opacity2, min: 0, max: 1, step: 1e-3, onChange: handleOpacityChange, className: menuClasses.imageLayerOpacitySlider, orientation: "horizontal", "aria-label": `Adjust opacity for layer ${label2}` }) }), jsx$1(Grid$1, { size: 1, children: jsx$1(ImageLayerEllipsisMenu, { colormap, setColormap, photometricInterpretation, setPhotometricInterpretation, spatialTargetResolution, setSpatialTargetResolution, spatialLodFactor, setSpatialLodFactor, volumetricRenderingAlgorithm, setVolumetricRenderingAlgorithm, spatialLayerTransparentColor, setSpatialLayerTransparentColor, spatialRenderingMode, image: image2, channelScopes, tooltipsVisible, setTooltipsVisible, channelLabelsVisible, setChannelLabelsVisible, channelLabelsOrientation, setChannelLabelsOrientation, channelLabelSize, setChannelLabelSize, channelsSortOrder, setChannelsSortOrder }) }), jsxs(Grid$1, { size: 1, container: true, direction: "row", children: [jsx$1(ImageIcon, { className: classes2.layerTypeImageIcon }), isMultiChannel ? jsx$1(Button, { onClick: handleOpenChange, className: classes2.channelExpansionButton, "aria-label": "Expand or collapse channel controls", children: open2 ? jsx$1(ExpandLess, {}) : jsx$1(ExpandMore, {}) }) : null] })] }), isMultiChannel && open2 ? jsxs(Grid$1, { container: true, direction: "column", justifyContent: "space-between", className: classes2.imageChannelControllerGrid, children: [channelScopes.map((cScope) => {
     const { spatialTargetC, spatialChannelVisible, spatialChannelOpacity, spatialChannelColor, spatialChannelWindow, spatialMaxResolution } = channelCoordination[cScope];
     const { setSpatialTargetC, setSpatialChannelVisible, setSpatialChannelOpacity, setSpatialChannelColor, setSpatialChannelWindow, setSpatialMaxResolution } = setChannelCoordination[cScope];
     const channelIndex = image2?.getChannelIndex(spatialTargetC);
     const numResolutions = image2?.getNumResolutions();
-    return jsx$1(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);
+    return jsx$1(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, channelsSortOrder, spatialRenderingMode, numResolutions, spatialMaxResolution, setSpatialMaxResolution }, cScope);
   }), jsx$1(Button, { disabled: channelScopes.length === MAX_CHANNELS$1 || channelScopes.length === imageNumChannels, onClick: handleChannelAdd, fullWidth: true, variant: "outlined", className: classes2.imageLayerButton, startIcon: jsx$1(AddIcon, {}), size: "small", "aria-label": "Add a channel to this layer", children: "Add Channel" })] }) : null, is3dMode && image2 ? jsxs(Grid$1, { container: true, direction: "column", justifyContent: "space-between", className: classes2.imageChannelControllerGrid, children: [jsx$1(Typography, { className: classes2.clippingPanesLabel, children: "Clipping planes:" }), jsx$1(Grid$1, { size: 12, className: classes2.clippingSliders, children: jsx$1(ClippingSliders, { image: image2, spatialSliceX, spatialSliceY, spatialSliceZ, setSpatialSliceX, setSpatialSliceY, setSpatialSliceZ }) }), jsx$1(LoadingStatusIndicator, { loadingProgress: volumeLoadingProgress, onStopLoading: onStopVolumeLoading, onRestartLoading: onRestartVolumeLoading, stillRef: volumeStillRef, spatialRenderingMode })] }) : null] }) });
 }
 const useStyles$8 = makeStyles()((theme) => ({
@@ -268473,7 +268516,7 @@ function LayerController(props) {
   return jsxs("div", { children: [anyLayerHasZ ? jsx$1(GlobalDimensionSlider, { label: "Z", targetValue: targetZ, setTargetValue: setTargetZ, max: maxZ, spatialRenderingMode, setSpatialRenderingMode }) : null, anyLayerHasT ? jsx$1(GlobalDimensionSlider, { label: "T", targetValue: targetT, setTargetValue: setTargetT, max: maxT }) : null, pointLayerScopes && reversedPointLayerScopes.map((layerScope) => jsx$1(PointLayerController, { theme, layerScope, layerCoordination: pointLayerCoordination[0][layerScope], setLayerCoordination: pointLayerCoordination[1][layerScope], pointMatrixIndicesData: pointMultiIndicesData?.[layerScope], tiledPointsLoadingProgress, layerPerFeatureForPoints }, layerScope)), spotLayerScopes && reversedSpotLayerScopes.map((layerScope) => jsx$1(SpotLayerController, { theme, layerScope, layerCoordination: spotLayerCoordination[0][layerScope], setLayerCoordination: spotLayerCoordination[1][layerScope] }, layerScope)), segmentationLayerScopes && reversedSegmentationLayerScopes.map((layerScope) => jsx$1(SegmentationLayerController, { theme, layerScope, layerCoordination: segmentationLayerCoordination[0][layerScope], setLayerCoordination: segmentationLayerCoordination[1][layerScope], channelScopes: segmentationChannelScopesByLayer[layerScope], channelCoordination: segmentationChannelCoordination[0][layerScope], setChannelCoordination: segmentationChannelCoordination[1][layerScope] }, layerScope)), imageLayerScopes && reversedImageLayerScopes.map((layerScope) => jsx$1(ImageLayerController, { theme, coordinationScopesRaw, layerScope, layerCoordination: imageLayerCoordination[0][layerScope], setLayerCoordination: imageLayerCoordination[1][layerScope], channelScopes: imageChannelScopesByLayer[layerScope], channelCoordination: imageChannelCoordination[0][layerScope], setChannelCoordination: imageChannelCoordination[1][layerScope], image: images[layerScope]?.image?.instance, featureIndex: images[layerScope]?.featureIndex, targetT, targetZ, spatialRenderingMode, volumeLoadingProgress: volumeLoadingStatus?.loadingProgress, onStopVolumeLoading: volumeLoadingStatus?.onStopLoading, onRestartVolumeLoading: volumeLoadingStatus?.onRestartLoading, volumeStillRef: volumeLoadingStatus?.stillRef }, layerScope))] });
 }
 function LayerControllerSubscriber(props) {
-  const { coordinationScopes: coordinationScopesRaw, coordinationScopesBy: coordinationScopesByRaw, closeButtonVisible, downloadButtonVisible, removeGridComponent, theme, title: title2 = "Spatial Layers", uuid: uuid2, layerPerFeatureForPoints = false, cameraPresets } = props;
+  const { coordinationScopes: coordinationScopesRaw, coordinationScopesBy: coordinationScopesByRaw, closeButtonVisible, downloadButtonVisible, removeGridComponent, theme, title: title2 = "Spatial Layers", uuid: uuid2, layerPerFeatureForPoints = false, cameraPresets, helpText = ViewHelpMapping.LAYER_CONTROLLER_BETA } = props;
   const loaders = useLoaders();
   const mergeCoordination = useMergeCoordination();
   const coordinationScopes = useCoordinationScopes(coordinationScopesRaw);
@@ -268561,7 +268604,8 @@ function LayerControllerSubscriber(props) {
     CoordinationType$1.TOOLTIPS_VISIBLE,
     CoordinationType$1.SPATIAL_CHANNEL_LABELS_VISIBLE,
     CoordinationType$1.SPATIAL_CHANNEL_LABELS_ORIENTATION,
-    CoordinationType$1.SPATIAL_CHANNEL_LABEL_SIZE
+    CoordinationType$1.SPATIAL_CHANNEL_LABEL_SIZE,
+    CoordinationType$1.SPATIAL_CHANNELS_SORT_ORDER
   ], coordinationScopes, coordinationScopesBy, CoordinationType$1.IMAGE_LAYER);
   const imageChannelCoordination = useComplexCoordinationSecondary([
     CoordinationType$1.SPATIAL_TARGET_C,
@@ -268629,7 +268673,7 @@ function LayerControllerSubscriber(props) {
     imageDataStatus,
     pointMultiIndicesDataStatus
   ]);
-  return jsx$1(TitleInfo, { title: title2, isScroll: true, closeButtonVisible, downloadButtonVisible, removeGridComponent, theme, isReady, errors, children: jsx$1(LayerController, { theme, coordinationScopesRaw, segmentationLayerScopes, segmentationLayerCoordination, segmentationChannelScopesByLayer, segmentationChannelCoordination, images: imageData, imageLayerScopes, imageLayerCoordination, targetT, targetZ, setTargetT, setTargetZ, spatialRenderingMode, setSpatialRenderingMode, imageChannelScopesByLayer, imageChannelCoordination, spotLayerScopes, spotLayerCoordination, pointLayerScopes, pointLayerCoordination, pointMultiIndicesData, layerPerFeatureForPoints, volumeLoadingStatus, tiledPointsLoadingProgress }) });
+  return jsx$1(TitleInfo, { title: title2, isScroll: true, closeButtonVisible, downloadButtonVisible, removeGridComponent, theme, isReady, errors, helpText, children: jsx$1(LayerController, { theme, coordinationScopesRaw, segmentationLayerScopes, segmentationLayerCoordination, segmentationChannelScopesByLayer, segmentationChannelCoordination, images: imageData, imageLayerScopes, imageLayerCoordination, targetT, targetZ, setTargetT, setTargetZ, spatialRenderingMode, setSpatialRenderingMode, imageChannelScopesByLayer, imageChannelCoordination, spotLayerScopes, spotLayerCoordination, pointLayerScopes, pointLayerCoordination, pointMultiIndicesData, layerPerFeatureForPoints, volumeLoadingStatus, tiledPointsLoadingProgress }) });
 }
 const isIterable$2 = (obj) => Symbol.iterator in obj;
 const hasIterableEntries = (value2) => (
@@ -270544,7 +270588,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-DjFeS4wB.js");
+  const { HiGlassComponent } = await import("./higlass-C6IxqTVD.js");
   return { default: HiGlassComponent };
 });
 const HG_SIZE = 800;
@@ -272133,13 +272177,16 @@ const globalNeuroglancerStyles = {
   },
   "input.perspective-panel-show-slice-views": { pointerEvents: "all" },
   ".neuroglancer-rendered-data-panel": {
-    cursor: "crosshair",
+    cursor: "grab",
     position: "relative",
     outline: "0",
     touchAction: "none",
     color: "#fff",
     textAlign: "left"
   },
+  ".neuroglancer-rendered-data-panel:active": {
+    cursor: "grabbing"
+  },
   ".neuroglancer-display-dimensions-widget": {
     position: "absolute",
     cursor: "default",
@@ -273492,7 +273539,7 @@ function NeuroglancerGlobalStyles(props) {
   const { classes: classes2 } = props;
   return jsxs(Fragment, { children: [jsx$1(GlobalStyles$3, { styles: globalNeuroglancerCss }), jsx$1(ScopedGlobalStyles, { styles: globalNeuroglancerStyles, parentClassName: classes2.neuroglancerWrapper })] });
 }
-const LazyReactNeuroglancer = React__default.lazy(() => import("./ReactNeuroglancer-BsqPWpQJ.js"));
+const LazyReactNeuroglancer = React__default.lazy(() => import("./ReactNeuroglancer-Bw5gQWL3.js"));
 function createWorker() {
   const worker = new WorkerFactory$1();
   worker.AsyncComputationWorker = WorkerFactory;
@@ -274182,17 +274229,40 @@ function diffCameraState(prev2, next4) {
   const pos = posHard || posSoft;
   return { changed: scale2 || pos || rot2, scale: scale2, pos, rot: rot2 };
 }
+const clamp$1 = (value2, min2, max2) => Math.max(min2, Math.min(max2, value2));
 function quaternionToEuler([x2, y2, z2, w2]) {
-  const quaternion2 = new Quaternion$1(x2, y2, z2, w2);
-  const euler = new Euler$1().setFromQuaternion(quaternion2, "YXZ");
-  const pitch = euler.x;
-  const yaw = euler.y;
+  const x22 = x2 + x2;
+  const y22 = y2 + y2;
+  const z22 = z2 + z2;
+  const xx = x2 * x22;
+  const yy = y2 * y22;
+  const zz = z2 * z22;
+  const xz = x2 * z22;
+  const yz = y2 * z22;
+  const wx = w2 * x22;
+  const wy = w2 * y22;
+  const m11 = 1 - (yy + zz);
+  const m13 = xz + wy;
+  const m23 = yz - wx;
+  const m31 = xz - wy;
+  const m33 = 1 - (xx + yy);
+  const pitch = Math.asin(-clamp$1(m23, -1, 1));
+  const yaw = Math.abs(m23) < 0.9999999 ? Math.atan2(m13, m33) : Math.atan2(-m31, m11);
   return [pitch, yaw];
 }
 function eulerToQuaternion(pitch, yaw, roll = 0) {
-  const euler = new Euler$1(pitch, yaw, roll, "YXZ");
-  const quaternion2 = new Quaternion$1().setFromEuler(euler);
-  return [quaternion2.x, quaternion2.y, quaternion2.z, quaternion2.w];
+  const c1 = Math.cos(pitch / 2);
+  const c2 = Math.cos(yaw / 2);
+  const c3 = Math.cos(roll / 2);
+  const s1 = Math.sin(pitch / 2);
+  const s2 = Math.sin(yaw / 2);
+  const s3 = Math.sin(roll / 2);
+  return [
+    s1 * c2 * c3 + c1 * s2 * s3,
+    c1 * s2 * c3 - s1 * c2 * s3,
+    c1 * c2 * s3 - s1 * s2 * c3,
+    c1 * c2 * c3 + s1 * s2 * s3
+  ];
 }
 function makeVitNgZoomCalibrator(initialNgProjectionScale, initialDeckZoom = 0) {
   const base2 = initialNgProjectionScale / 2 ** -initialDeckZoom;
@@ -276503,7 +276573,7 @@ function useFilteredVolcanoData(props) {
       const rawSampleSetPathB = coordinationValues.sampleSetFilter[1];
       const sampleSetPathB = [...rawSampleSetPathB];
       sampleSetPathB[0] = sampleSetsColumnNameMappingReversed[rawSampleSetPathB[0]];
-      if (isEqual$3(sampleSetPathA, sampleSetSelection[1]) && isEqual$3(sampleSetPathB, sampleSetSelection[0])) {
+      if (isEqual$3(sampleSetPathA, sampleSetSelection[0]) && isEqual$3(sampleSetPathB, sampleSetSelection[1])) {
         shouldSwapFoldChangeDirection = true;
       }
     }
@@ -327333,8 +327403,8 @@ function CellSetSizesPlot(props) {
         value: 0
       }
     },
-    width: clamp$7(width2 - marginRight, 10, Infinity),
-    height: clamp$7(height2 - marginBottom, 10, Infinity),
+    width: clamp$8(width2 - marginRight, 10, Infinity),
+    height: clamp$8(height2 - marginBottom, 10, Infinity),
     config: VEGA_THEMES[theme]
   };
   const handleSignal = (name2, value2) => {
@@ -327447,8 +327517,8 @@ function ExpressionHistogram(props) {
         select: { type: "interval", encodings: ["x"] }
       }
     ],
-    width: clamp$7(width2 - marginRight, 10, Infinity),
-    height: clamp$7(height2 - marginBottom, 10, Infinity),
+    width: clamp$8(width2 - marginRight, 10, Infinity),
+    height: clamp$8(height2 - marginBottom, 10, Infinity),
     config: VEGA_THEMES[theme]
   };
   const handleSignal = (name2, value2) => {
@@ -327583,8 +327653,8 @@ function DotPlot(props) {
   const autoMarginForFeature = marginBottom || 30 + Math.sqrt(maxCharactersForFeature / 2) * 30;
   const autoMarginForGroup = marginRight || 30 + Math.sqrt(maxCharactersForGroup / 2) * 30;
   const autoMarginForSampleSet = marginRight || 30 + Math.sqrt(maxCharactersForSampleSet / 2) * 30;
-  const plotWidth = transpose2 ? clamp$7(width2 - autoMarginForFeature - 180, 10, Infinity) / (obsSetSelection?.length || 1) : clamp$7(width2 - autoMarginForGroup - autoMarginForSampleSet - 200, 10, Infinity);
-  const plotHeight = transpose2 ? clamp$7(height2 - autoMarginForGroup - autoMarginForSampleSet - 50, 10, Infinity) : clamp$7(height2 - autoMarginForFeature - 80, 10, Infinity) / (obsSetSelection?.length || 1);
+  const plotWidth = transpose2 ? clamp$8(width2 - autoMarginForFeature - 180, 10, Infinity) / (obsSetSelection?.length || 1) : clamp$8(width2 - autoMarginForGroup - autoMarginForSampleSet - 200, 10, Infinity);
+  const plotHeight = transpose2 ? clamp$8(height2 - autoMarginForGroup - autoMarginForSampleSet - 50, 10, Infinity) : clamp$8(height2 - autoMarginForFeature - 80, 10, Infinity) / (obsSetSelection?.length || 1);
   const groupKeys = data2.map((d) => d.keyGroup);
   const featureKeys = data2.map((d) => d.keyFeature);
   const groupSecondaryKeys = data2.map((d) => d.keyGroupSecondary);
@@ -328257,6 +328327,10 @@ function TreemapSubscriber(props) {
   }, [setObsSetSelection]);
   return jsxs(TitleInfo, { title: `Treemap of ${capitalize$3(pluralize(obsType, 2))}`, info: `${commaNumber(selectedObsCount)} ${pluralize(obsType, selectedObsCount)} from ${commaNumber(selectedSampleCount)} ${pluralize(sampleType, selectedSampleCount)}`, removeGridComponent, urls: urls2, theme, isReady, helpText, errors, withPadding: false, options: jsx$1(TreemapOptions, { obsType, sampleType, obsColorEncoding, setObsColorEncoding, hierarchyLevels: hierarchyLevels || DEFAULT_HIERARCHY_LEVELS, setHierarchyLevels }), children: [jsx$1("div", { ref: containerRef, className: classes2.vegaContainer, children: jsx$1(Treemap, { obsCounts, sampleCounts, obsColorEncoding, hierarchyLevels: hierarchyLevels || DEFAULT_HIERARCHY_LEVELS, theme, width: width2, height: Math.max(height2 * (selectedObsCount / totalObsCount), 40), obsType, sampleType, obsSetColor, sampleSetColor, obsSetSelection, sampleSetSelection, onNodeClick }) }), jsx$1("div", { style: { position: "absolute", right: "2px", bottom: "2px", fontSize: "10px" }, children: unselectedObsCount > 0 ? jsx$1("span", { children: `${commaNumber(unselectedObsCount)} ${pluralize(obsType, unselectedObsCount)} from ${commaNumber(unselectedSampleCount)} ${pluralize(sampleType, unselectedSampleCount)} currently omitted` }) : null })] });
 }
+const GOLDEN_RATIO = 0.6180339887498948;
+function topJitter(index2, rangePixels) {
+  return index2 * GOLDEN_RATIO % 1 * rangePixels;
+}
 function VolcanoPlot(props) {
   const { theme, width: width2, height: height2, obsType, featureType, obsSetsColumnNameMappingReversed, sampleSetsColumnNameMappingReversed, sampleSetSelection, obsSetSelection, obsSetColor, sampleSetColor, data: data2, marginTop = 5, marginRight = 5, marginLeft = 50, marginBottom = 50, onFeatureClick, featurePointSignificanceThreshold, featurePointFoldChangeThreshold, featureLabelSignificanceThreshold, featureLabelFoldChangeThreshold } = props;
   const svgRef = useRef();
@@ -328318,10 +328392,10 @@ function VolcanoPlot(props) {
       const obsSetPath2 = [...rawObsSetPath];
       obsSetPath2[0] = obsSetsColumnNameMappingReversed[rawObsSetPath[0]];
       const color2 = obsSetColorScale(obsSetPath2);
-      obsSetG.append("g").selectAll("circle").data(filteredDf).join("circle").attr("cx", (d) => xScale(d.logFoldChange)).attr("cy", (d) => yScale(d.minusLog10p)).attr("r", 3).attr("opacity", 0.5).attr("fill", color2).on("click", (event2, d) => {
+      obsSetG.append("g").selectAll("circle").data(filteredDf).join("circle").attr("cx", (d) => xScale(d.logFoldChange)).attr("cy", (d, i2) => yScale(d.minusLog10p) + (!Number.isFinite(d.minusLog10p) ? topJitter(i2, 20) : 0)).attr("r", 3).attr("opacity", 0.5).attr("fill", color2).on("click", (event2, d) => {
         onFeatureClick(d.featureId);
       });
-      const textElements = obsSetG.append("g").selectAll("text").data(filteredDf).join("text").text((d) => d.featureId).attr("text-anchor", (d) => d.logFoldChange < 0 ? "end" : "start").attr("x", (d) => xScale(d.logFoldChange)).attr("y", (d) => yScale(d.minusLog10p)).style("display", (d) => Math.abs(d.logFoldChange) < (featureLabelFoldChangeThreshold ?? 5) || d.featureSignificance >= (featureLabelSignificanceThreshold ?? 0.01) ? "none" : void 0).attr("fill", color2).on("click", (event2, d) => {
+      const textElements = obsSetG.append("g").selectAll("text").data(filteredDf).join("text").text((d) => d.featureId).attr("text-anchor", (d) => d.logFoldChange < 0 ? "end" : "start").attr("x", (d) => xScale(d.logFoldChange)).attr("y", (d, i2) => yScale(d.minusLog10p) + (!Number.isFinite(d.minusLog10p) ? topJitter(i2, 20) : 0)).style("display", (d) => Math.abs(d.logFoldChange) < (featureLabelFoldChangeThreshold ?? 5) || d.featureSignificance >= (featureLabelSignificanceThreshold ?? 0.01) ? "none" : void 0).attr("fill", color2).on("click", (event2, d) => {
         onFeatureClick(d.featureId);
       });
       textElements.append("title").text((d) => `${featureType}: ${d.featureId}
@@ -328580,8 +328654,8 @@ function CellSetCompositionBarPlot(props) {
       }
     },
     // TODO: for width, also subtract length of longest y-axis set name label.
-    width: clamp$7(width2 - marginRight, 10, Infinity),
-    height: clamp$7(height2 - marginBottom, 10, Infinity),
+    width: clamp$8(width2 - marginRight, 10, Infinity),
+    height: clamp$8(height2 - marginBottom, 10, Infinity),
     config: VEGA_THEMES[theme]
   };
   const handleSignal = (name2, value2) => {
@@ -328762,8 +328836,8 @@ function FeatureSetEnrichmentBarPlot(props) {
       }
     },
     // TODO: for width, also subtract length of longest y-axis set name label.
-    width: clamp$7(width2 - marginRight, 10, Infinity),
-    height: clamp$7(height2 - marginBottom, 10, Infinity),
+    width: clamp$8(width2 - marginRight, 10, Infinity),
+    height: clamp$8(height2 - marginBottom, 10, Infinity),
     config: VEGA_THEMES[theme]
   };
   const handleSignal = (name2, value2) => {
@@ -329982,7 +330056,9 @@ const fileTypeToExtensions = {
   // TODO: how to handle h5ad-based AnnData (since needs reference JSON file).
   // Perhaps just assume one H5AD+one JSON (or .ref.json) file correspond to each other?
   [FileType$1.SPATIALDATA_ZARR]: [".sd.zarr", ".sdata.zarr", ".spatialdata.zarr"],
-  [FileType$1.SPATIALDATA_ZARR_ZIP]: [".sd.zarr.zip", ".sdata.zarr.zip", ".spatialdata.zarr.zip"]
+  [FileType$1.SPATIALDATA_ZARR_ZIP]: [".sd.zarr.zip", ".sdata.zarr.zip", ".spatialdata.zarr.zip"],
+  [FileType$1.GENOMIC_PROFILES_ZARR]: [".multivec.zarr"],
+  [FileType$1.GENOMIC_PROFILES_ZARR_ZIP]: [".multivec.zarr.zip"]
 };
 const fileTypeToClass = {
   // OME-TIFF
@@ -330008,7 +330084,9 @@ const ZARR_FILETYPES = [
   FileType$1.IMAGE_OME_ZARR,
   FileType$1.IMAGE_OME_ZARR_ZIP,
   FileType$1.OBS_SEGMENTATIONS_OME_ZARR,
-  FileType$1.OBS_SEGMENTATIONS_OME_ZARR_ZIP
+  FileType$1.OBS_SEGMENTATIONS_OME_ZARR_ZIP,
+  FileType$1.GENOMIC_PROFILES_ZARR,
+  FileType$1.GENOMIC_PROFILES_ZARR_ZIP
 ];
 function urlToFileType(url) {
   const match2 = Object.entries(fileTypeToExtensions).find(
@@ -330164,6 +330242,102 @@ async function generateConfig(parsedUrls, layoutOption = null) {
     stores
   };
 }
+var fetchJsonp$1 = { exports: {} };
+var fetchJsonp = fetchJsonp$1.exports;
+var hasRequiredFetchJsonp;
+function requireFetchJsonp() {
+  if (hasRequiredFetchJsonp) return fetchJsonp$1.exports;
+  hasRequiredFetchJsonp = 1;
+  (function(module2, exports2) {
+    (function(global2, factory2) {
+      {
+        factory2(exports2, module2);
+      }
+    })(fetchJsonp, function(exports3, module3) {
+      var defaultOptions = {
+        timeout: 5e3,
+        jsonpCallback: "callback"
+      };
+      function generateCallbackFunction() {
+        return "jsonp_" + Date.now() + "_" + Math.ceil(Math.random() * 1e5);
+      }
+      function clearFunction(functionName) {
+        try {
+          delete window[functionName];
+        } catch (e3) {
+          window[functionName] = void 0;
+        }
+      }
+      function removeScript(scriptId) {
+        var script = document.getElementById(scriptId);
+        if (script) {
+          document.getElementsByTagName("head")[0].removeChild(script);
+        }
+      }
+      function fetchJsonp2(_url) {
+        var options = arguments.length <= 1 || arguments[1] === void 0 ? {} : arguments[1];
+        var url = _url;
+        var timeout3 = options.timeout || defaultOptions.timeout;
+        var jsonpCallback = options.jsonpCallback || defaultOptions.jsonpCallback;
+        var timeoutId = void 0;
+        return new Promise(function(resolve2, reject) {
+          var callbackFunction = options.jsonpCallbackFunction || generateCallbackFunction();
+          var scriptId = jsonpCallback + "_" + callbackFunction;
+          window[callbackFunction] = function(response) {
+            resolve2({
+              ok: true,
+              // keep consistent with fetch API
+              json: function json2() {
+                return Promise.resolve(response);
+              }
+            });
+            if (timeoutId) clearTimeout(timeoutId);
+            removeScript(scriptId);
+            clearFunction(callbackFunction);
+          };
+          url += url.indexOf("?") === -1 ? "?" : "&";
+          var jsonpScript = document.createElement("script");
+          jsonpScript.setAttribute("src", "" + url + jsonpCallback + "=" + callbackFunction);
+          if (options.charset) {
+            jsonpScript.setAttribute("charset", options.charset);
+          }
+          if (options.nonce) {
+            jsonpScript.setAttribute("nonce", options.nonce);
+          }
+          if (options.referrerPolicy) {
+            jsonpScript.setAttribute("referrerPolicy", options.referrerPolicy);
+          }
+          if (options.crossorigin) {
+            jsonpScript.setAttribute("crossorigin", typeof options.crossorigin === "string" ? options.crossorigin : "anonymous");
+          }
+          var fp = options.fetchPriority;
+          if (fp === "high" || fp === "low" || fp === "auto") {
+            jsonpScript.setAttribute("fetchPriority", fp);
+          }
+          jsonpScript.id = scriptId;
+          document.getElementsByTagName("head")[0].appendChild(jsonpScript);
+          timeoutId = setTimeout(function() {
+            reject(new Error("JSONP request to " + _url + " timed out"));
+            clearFunction(callbackFunction);
+            removeScript(scriptId);
+            window[callbackFunction] = function() {
+              clearFunction(callbackFunction);
+            };
+          }, timeout3);
+          jsonpScript.onerror = function() {
+            reject(new Error("JSONP request to " + _url + " failed"));
+            clearFunction(callbackFunction);
+            removeScript(scriptId);
+            if (timeoutId) clearTimeout(timeoutId);
+          };
+        });
+      }
+      module3.exports = fetchJsonp2;
+    });
+  })(fetchJsonp$1, fetchJsonp$1.exports);
+  return fetchJsonp$1.exports;
+}
+requireFetchJsonp();
 class ObsSpotsCsvLoader extends CsvLoader {
   loadFromCache(data2) {
     if (this.cachedResult) {
@@ -331078,11 +331252,21 @@ class AnnDataSource extends ZarrDataSource {
         categoriesValues = await this.getFlatArrDecompressed(`${prefix2}/${categories}`);
       }
     } else if (encodingType === "categorical") {
-      const { dtype } = await open$1(storeRoot.resolve(`${path2}/categories`), { kind: "array" });
-      if (dtype === "v2:object" || dtype === "|O") {
+      const categoriesZattrs = await this.getJson(`${path2}/categories/.zattrs`);
+      const categoriesEncodingType = categoriesZattrs?.["encoding-type"];
+      if (categoriesEncodingType === "nullable-string-array") {
+        categoriesValues = await this.getFlatArrDecompressed(`${path2}/categories/values`);
+      } else if (categoriesEncodingType === "string-array") {
         categoriesValues = await this.getFlatArrDecompressed(`${path2}/categories`);
+      } else {
+        const { dtype } = await open$1(storeRoot.resolve(`${path2}/categories`), { kind: "array" });
+        if (dtype === "v2:object" || dtype === "|O") {
+          categoriesValues = await this.getFlatArrDecompressed(`${path2}/categories`);
+        }
       }
       codesPath = `${path2}/codes`;
+    } else if (encodingType === "nullable-string-array") {
+      return this.getFlatArrDecompressed(`${path2}/values`);
     } else if (encodingType === "string-array") {
       return this.getFlatArrDecompressed(path2);
     } else {
@@ -332246,16 +332430,25 @@ let FeatureStatsAnndataLoader$1 = class FeatureStatsAnndataLoader extends Abstra
     return this.dataSource.loadDataFrameIndex(dfPath);
   }
   async loadDataFrame(dfPath) {
-    const [featureId2, featureFoldChange, featureSignificance] = await Promise.all([
-      this.loadFeatureNames(dfPath),
-      this.loadFoldChanges(dfPath),
-      this.loadSignificances(dfPath)
-    ]);
-    return {
-      featureId: featureId2,
-      featureFoldChange,
-      featureSignificance
-    };
+    try {
+      const [featureId2, featureFoldChange, featureSignificance] = await Promise.all([
+        this.loadFeatureNames(dfPath),
+        this.loadFoldChanges(dfPath),
+        this.loadSignificances(dfPath)
+      ]);
+      return {
+        featureId: featureId2,
+        featureFoldChange,
+        featureSignificance
+      };
+    } catch (e3) {
+      log$b.warn("Dataframe not found at", dfPath);
+      return {
+        featureId: [],
+        featureFoldChange: [],
+        featureSignificance: []
+      };
+    }
   }
   /**
    *
@@ -332282,7 +332475,7 @@ let FeatureStatsAnndataLoader$1 = class FeatureStatsAnndataLoader extends Abstra
    * @returns {Promise<LoaderResult<FeatureStatsData>>}
    */
   async loadMulti(volcanoOptions) {
-    const { analysisType: targetAnalysisType = "rank_genes_groups" } = this.options;
+    const { analysisType: targetAnalysisType = "pydeseq2" } = this.options;
     const { sampleSetSelection, obsSetSelection } = volcanoOptions || {};
     const rawObsSetSelection = obsSetSelection;
     const rawSampleSetSelection = sampleSetSelection;
@@ -333260,7 +333453,7 @@ class SpatialDataObsSpotsLoader extends AbstractTwoStepLoader {
       const formatVersion = await this.dataSource.getShapesFormatVersion(path2);
       if (formatVersion === "0.1") {
         locations = await this.dataSource.loadNumericForDims(getCoordsPath(path2), [0, 1]);
-      } else if (formatVersion === "0.2") {
+      } else if (formatVersion === "0.2" || formatVersion === "0.3") {
         locations = await this.dataSource.loadCircleShapes(getGeometryPath$1(path2));
       }
       this.locations = locations;
@@ -333459,7 +333652,7 @@ class SpatialDataObsPointsLoader extends AbstractTwoStepLoader {
     }
     let locations;
     const formatVersion = await this.dataSource.getPointsFormatVersion(path2);
-    if (formatVersion === "0.1") {
+    if (formatVersion === "0.1" || formatVersion === "0.2") {
       locations = await this.dataSource.loadPoints(path2);
     } else {
       throw new UnknownSpatialDataFormatError("Only points format version 0.1 is supported.");
@@ -333478,7 +333671,7 @@ class SpatialDataObsPointsLoader extends AbstractTwoStepLoader {
     }
     let locationsFeatureIndex;
     const formatVersion = await this.dataSource.getPointsFormatVersion(path2);
-    if (formatVersion === "0.1") {
+    if (formatVersion === "0.1" || formatVersion === "0.2") {
       locationsFeatureIndex = await this.dataSource.loadPointsFeatureIds(path2);
     } else {
       throw new UnknownSpatialDataFormatError("Only points format version 0.1 is supported.");
@@ -333490,7 +333683,7 @@ class SpatialDataObsPointsLoader extends AbstractTwoStepLoader {
     const { path: path2, featureIndexColumn, mortonCodeColumn } = this.options;
     let locations;
     const formatVersion = await this.dataSource.getPointsFormatVersion(path2);
-    if (formatVersion === "0.1") {
+    if (formatVersion === "0.1" || formatVersion === "0.2") {
       locations = await this.dataSource.loadPointsInRect(path2, bounds2, signal, featureIndexColumn, mortonCodeColumn);
     } else {
       throw new UnknownSpatialDataFormatError("Only points format version 0.1 is supported.");
@@ -333522,10 +333715,8 @@ class SpatialDataObsPointsLoader extends AbstractTwoStepLoader {
       // and for the presence of morton_code_2d and feature_index columns.
       this.dataSource.supportsLoadPointsInRect(path2, featureIndexColumnName, mortonCodeColumn)
     ]);
-    const isSupportedVersion = formatVersion === "0.1";
-    const boundingBox = zattrs?.bounding_box;
-    const hasBoundingBox2D = typeof boundingBox?.x_max === "number" && typeof boundingBox?.x_min === "number" && typeof boundingBox?.y_max === "number" && typeof boundingBox?.y_min === "number";
-    return isSupportedVersion && hasBoundingBox2D && hasRequiredColumnsAndRowGroupSize;
+    const isSupportedVersion = formatVersion === "0.1" || formatVersion === "0.2";
+    return isSupportedVersion && hasRequiredColumnsAndRowGroupSize;
   }
   async load() {
     const [modelMatrix2, supportsTiling] = await Promise.all([
@@ -333563,7 +333754,7 @@ class SpatialDataObsPointsLoader extends AbstractTwoStepLoader {
       featureIds,
       obsPointsModelMatrix: modelMatrix2,
       // Return 'tiled' if the morton_code_2d column
-      // and bounding_box metadata are present,
+      // is present,
       // and the row group size is small enough.
       // Otherwise, return 'full'.
       obsPointsTilingType: supportsTiling ? "tiled" : "full",
@@ -343072,6 +343263,7 @@ function sdataMortonQueryRectAux(boundingBox, origRect) {
   const mortonIntervals = zcoverRectangle(normRect[0][0], normRect[0][1], normRect[1][0], normRect[1][1], 16, null, true);
   return mortonIntervals;
 }
+const MORTON_CODE_EXTREME_VALUE_INDICATOR = 0;
 async function getParquetModule() {
   const module2 = await import(
     /* webpackIgnore: true */
@@ -343150,7 +343342,7 @@ async function _loadParquetSchemaBytes({ queryClient, store }, parquetPath, part
       if (!tailBytes || tailBytes.length < TAIL_LENGTH) {
         throw new Error(`Failed to load parquet footerLength for ${partZeroPath}`);
       }
-      const footerLength = new DataView(tailBytes.buffer).getInt32(0, true);
+      const footerLength = new DataView(tailBytes.buffer, tailBytes.byteOffset, tailBytes.byteLength).getInt32(0, true);
       const magic = new TextDecoder().decode(tailBytes.slice(4, 8));
       if (magic !== "PAR1") {
         throw new Error("Invalid Parquet file: missing PAR1 magic number");
@@ -343197,22 +343389,22 @@ async function _loadParquetMetadataByPart({ queryClient, store }, parquetPath) {
         } catch (error2) {
           if (error2.message.includes("Failed to load parquet footerLength")) {
             numParts = partIndex;
+            log$b.info(`Found ${numParts} parts for parquet path ${parquetPath}; An above "Failed to load parquet footerLength" error is expected for the subsequent part.`);
           }
         }
       } while (numParts === void 0);
+      const numRows = allMetadata.map((part) => part.metadata.fileMetadata().numRows());
+      const numRowGroups = allMetadata.map((part) => part.metadata.numRowGroups());
+      const numRowsPerGroup = allMetadata.map((part) => part.metadata.rowGroup(0).numRows());
       const metadata2 = {
-        numRows: 0,
-        numRowGroups: 0,
-        numRowsPerGroup: 0,
-        schema: null
-      };
-      if (allMetadata.length > 0) {
-        const firstPart = allMetadata[0];
-        metadata2.numRows = allMetadata.reduce((sum2, part) => sum2 + part.metadata.fileMetadata().numRows(), 0);
-        metadata2.numRowGroups = allMetadata.reduce((sum2, part) => sum2 + part.metadata.numRowGroups(), 0);
-        metadata2.numRowsPerGroup = firstPart.metadata.rowGroup(0).numRows();
-        metadata2.schema = firstPart.schema.schema;
-      }
+        totalNumRows: numRows.reduce((a2, b2) => a2 + b2, 0),
+        totalNumRowGroups: numRowGroups.reduce((a2, b2) => a2 + b2, 0),
+        // Array of count per part (length equal to numParts).
+        numRowsByPart: numRows,
+        numRowGroupsByPart: numRowGroups,
+        numRowsPerGroupByPart: numRowsPerGroup,
+        schema: allMetadata?.[0]?.schema?.schema
+      };
       const result = {
         ...metadata2,
         // TODO: extract metadata per part and rowGroup into plain objects that match the hyparquet parquetMetadata() return value?
@@ -343236,8 +343428,8 @@ async function _loadParquetRowGroupByGroupIndex({ queryClient, store }, parquetP
       const store2 = ctx.meta?.store;
       const { readParquetRowGroup } = await _getParquetModule({ queryClient: queryClient2 });
       const allMetadata = await _loadParquetMetadataByPart({ queryClient: queryClient2, store: store2 }, parquetPath);
-      if (rowGroupIndex < 0 || rowGroupIndex >= allMetadata.numRowGroups) {
-        throw new Error(`Row group index ${rowGroupIndex} is out of bounds for parquet table with ${allMetadata.numRowGroups} row groups.`);
+      if (rowGroupIndex < 0 || rowGroupIndex >= allMetadata.totalNumRowGroups) {
+        throw new Error(`Row group index ${rowGroupIndex} is out of bounds for parquet table with ${allMetadata.totalNumRowGroups} row groups.`);
       }
       let partIndex;
       let cumulativeRowGroups = 0;
@@ -343347,9 +343539,9 @@ async function _bisectRowGroupsRight({ queryClient, store }, parquetPath, column
       );
       const store2 = ctx.meta?.store;
       const allMetadata = await _loadParquetMetadataByPart({ queryClient: queryClient2, store: store2 }, parquetPath);
-      const { numRowGroups } = allMetadata;
+      const { totalNumRowGroups } = allMetadata;
       let lo = 0;
-      let hi = numRowGroups;
+      let hi = totalNumRowGroups;
       while (lo < hi) {
         const cachedInRange = await getCachedInRange(queryClient2, parquetPath, columnName, lo, hi);
         const betterLo = cachedInRange.slice().reverse().find((c2) => c2.index > lo && targetValue >= c2.max);
@@ -343752,11 +343944,12 @@ class SpatialDataTableSource extends AnnDataSource {
     const { queryClient } = this;
     const { store } = this.storeRoot;
     const allMetadata = await _loadParquetMetadataByPart({ queryClient, store }, parquetPath);
-    const { numRowsPerGroup } = allMetadata;
-    const numRowsTotal = allMetadata.numRows;
-    if (numRowsPerGroup >= 1e5) {
+    const { numRowsPerGroupByPart } = allMetadata;
+    const numRowsTotal = allMetadata.totalNumRows;
+    const maxNumRowsPerGroup = Math.max(...numRowsPerGroupByPart);
+    if (maxNumRowsPerGroup >= 1e5) {
       if (numRowsTotal > 5e6) {
-        throw new Error(`The Parquet table at ${parquetPath} has ${numRowsTotal} total rows, which necessitates tiled loading, but it was not possible because the row group size is too large (${numRowsPerGroup}). See the Vitessce documentation at Data Troubleshooting -> Points for more details.`);
+        throw new Error(`The Parquet table at ${parquetPath} has ${numRowsTotal} total rows, which necessitates tiled loading, but it was not possible because the row group size is too large (${maxNumRowsPerGroup}). See the Vitessce documentation at Data Troubleshooting -> Points for more details.`);
       }
       return false;
     }
@@ -343780,7 +343973,7 @@ class SpatialDataTableSource extends AnnDataSource {
    * @param {string[]|undefined} columns An optional list of column names to load.
    * @returns
    */
-  async loadParquetTableInRect(parquetPath, tileBbox, allPointsBbox, signal, featureIndexColumnName, mortonCodeColumn) {
+  async loadParquetTableInRect(parquetPath, tileBbox, signal, featureIndexColumnName, mortonCodeColumn) {
     const { queryClient } = this;
     const { store } = this.storeRoot;
     const mortonCodeColumnName = mortonCodeColumn ?? "morton_code_2d";
@@ -343805,15 +343998,46 @@ class SpatialDataTableSource extends AnnDataSource {
     } else {
       tileBboxes = [tileBbox];
     }
+    const firstRowGroupTable = await _loadParquetRowGroupByGroupIndex({ queryClient, store }, parquetPath, 0);
+    const xColumnForBoundingBox = firstRowGroupTable.getChild("x");
+    const yColumnForBoundingBox = firstRowGroupTable.getChild("y");
+    const mortonCodeColumnForBoundingBox = firstRowGroupTable.getChild(mortonCodeColumnName);
+    const boundingBoxMaxNumRows = Math.min(4, firstRowGroupTable.numRows);
+    const firstMortonCodes = range$e(boundingBoxMaxNumRows).map((i2) => mortonCodeColumnForBoundingBox.get(i2));
+    const boundingBoxNumRows = firstMortonCodes.filter((code2) => code2 === MORTON_CODE_EXTREME_VALUE_INDICATOR).length;
+    const boundingBoxXValues = range$e(boundingBoxNumRows).map((i2) => xColumnForBoundingBox.get(i2));
+    const boundingBoxYValues = range$e(boundingBoxNumRows).map((i2) => yColumnForBoundingBox.get(i2));
+    const xMin = Math.min(...boundingBoxXValues);
+    const xMax = Math.max(...boundingBoxXValues);
+    const yMin = Math.min(...boundingBoxYValues);
+    const yMax = Math.max(...boundingBoxYValues);
+    const allPointsBbox = {
+      x_min: xMin,
+      x_max: xMax,
+      y_min: yMin,
+      y_max: yMax
+    };
     const rowGroupIndicesPerTile = await Promise.all(tileBboxes.map(async (subTileBbox) => _rectToRowGroupIndices({ queryClient, store }, parquetPath, subTileBbox, allPointsBbox, mortonCodeColumnName)));
     const uniqueCoveredRowGroupIndices = Array.from(new Set(rowGroupIndicesPerTile.flat())).toSorted((a2, b2) => a2 - b2);
     const allMetadata = await _loadParquetMetadataByPart({ queryClient, store }, parquetPath);
-    const { numRowsPerGroup } = allMetadata;
-    const numRowGroups = uniqueCoveredRowGroupIndices.length;
-    const totalNumRows = numRowsPerGroup * numRowGroups;
-    const xArr = new Float32Array(totalNumRows);
-    const yArr = new Float32Array(totalNumRows);
-    const featureIndexArr = new Uint32Array(totalNumRows);
+    const { numRowsPerGroupByPart, numRowGroupsByPart } = allMetadata;
+    const rowGroupIToNumRows = (rowGroupI) => {
+      let currPartIndex = 0;
+      let prevTotalRowGroupCount = 0;
+      for (let partIndex = 0; partIndex < numRowGroupsByPart.length; partIndex++) {
+        const numRowGroupsInPart = numRowGroupsByPart[partIndex];
+        if (prevTotalRowGroupCount <= rowGroupI && rowGroupI < prevTotalRowGroupCount + numRowGroupsInPart) {
+          currPartIndex = partIndex;
+          break;
+        }
+        prevTotalRowGroupCount += numRowGroupsInPart;
+      }
+      return numRowsPerGroupByPart[currPartIndex];
+    };
+    const totalNumRowsToLoad = uniqueCoveredRowGroupIndices.reduce((acc, rowGroupI) => acc + rowGroupIToNumRows(rowGroupI), 0);
+    const xArr = new Float32Array(totalNumRowsToLoad);
+    const yArr = new Float32Array(totalNumRowsToLoad);
+    const featureIndexArr = new Uint32Array(totalNumRowsToLoad);
     const rowGroupTables = await Promise.all(uniqueCoveredRowGroupIndices.map(async (rowGroupIndex) => _loadParquetRowGroupByGroupIndex({ queryClient, store }, parquetPath, rowGroupIndex)));
     let rowOffset = 0;
     rowGroupTables.forEach((table2) => {
@@ -343826,7 +344050,7 @@ class SpatialDataTableSource extends AnnDataSource {
       xArr.set(xColumn.toArray(), rowOffset);
       yArr.set(yColumn.toArray(), rowOffset);
       featureIndexArr.set(featureIndexColumn.toArray(), rowOffset);
-      rowOffset += numRowsPerGroup;
+      rowOffset += table2.numRows;
     });
     return {
       data: {
@@ -343834,7 +344058,7 @@ class SpatialDataTableSource extends AnnDataSource {
         y: yArr,
         featureIndices: featureIndexArr
       },
-      shape: [3, totalNumRows]
+      shape: [3, totalNumRowsToLoad]
     };
   }
 }
@@ -349710,14 +349934,14 @@ class SpatialDataShapesSource extends SpatialDataTableSource {
   /**
    *
    * @param {string} path A path to within shapes.
-   * @returns {Promise<"0.1"|"0.2">} The format version.
+   * @returns {Promise<"0.1"|"0.2"|"0.3">} The format version.
    */
   async getShapesFormatVersion(path2) {
     const zattrs = await this.loadSpatialDataElementAttrs(path2);
     const formatVersion = zattrs.spatialdata_attrs.version;
     const geos = zattrs.spatialdata_attrs.geos || {};
     const encodingType = zattrs["encoding-type"];
-    if (encodingType !== "ngff:shapes" || !(formatVersion === "0.1" && (geos.name === "POINT" && geos.type === 0) || formatVersion === "0.2")) {
+    if (encodingType !== "ngff:shapes" || !(formatVersion === "0.1" && (geos.name === "POINT" && geos.type === 0) || formatVersion === "0.2" || formatVersion === "0.3")) {
       throw new Error(`Unexpected encoding type or version for shapes spatialdata_attrs: ${encodingType} ${formatVersion}`);
     }
     return formatVersion;
@@ -349926,7 +350150,7 @@ class SpatialDataPointsSource extends SpatialDataTableSource {
     const zattrs = await this.loadSpatialDataElementAttrs(path2);
     const formatVersion = zattrs.spatialdata_attrs.version;
     const encodingType = zattrs["encoding-type"];
-    if (encodingType === "ngff:points" && !(formatVersion === "0.1")) {
+    if (encodingType === "ngff:points" && !(formatVersion === "0.1" || formatVersion === "0.2")) {
       throw new Error(`Unexpected version for points spatialdata_attrs: ${formatVersion}`);
     }
     return formatVersion;
@@ -350029,16 +350253,11 @@ class SpatialDataPointsSource extends SpatialDataTableSource {
     const zattrs = await this.loadSpatialDataElementAttrs(elementPath);
     const {
       // axes,
-      spatialdata_attrs: spatialDataAttrs,
-      // The bounding box (extent) of all points.
-      // Required for un-normalization from uints back to floats.
-      // TODO: decide whether these will be stored here or somewhere else.
-      // Reference: https://github.com/vitessce/vitessce-python/pull/476#issuecomment-3362656956
-      bounding_box: allPointsBbox
+      spatialdata_attrs: spatialDataAttrs
     } = zattrs;
     const { feature_key: featureKey } = spatialDataAttrs;
     const featureIndexColumnName = featureIndexColumnNameFromOptions ?? `${featureKey}_codes`;
-    return this.loadParquetTableInRect(parquetPath, tileBbox, allPointsBbox, signal, featureIndexColumnName, mortonCodeColumn);
+    return this.loadParquetTableInRect(parquetPath, tileBbox, signal, featureIndexColumnName, mortonCodeColumn);
   }
   async supportsLoadPointsInRect(elementPath, featureIndexColumnName, mortonCodeColumn) {
     const parquetPath = getParquetPath(elementPath);
@@ -350246,7 +350465,13 @@ class GlbSource {
 class GlbDataLoader extends AbstractTwoStepLoader {
   async load() {
     const { url, options } = this;
-    const loader2 = new GLTFLoader$1();
+    const [{ GLTFLoader: GLTFLoader2 }, { DRACOLoader }] = await Promise.all([
+      // eslint-disable-next-line import/no-unresolved
+      import("three/addons/loaders/GLTFLoader.js"),
+      // eslint-disable-next-line import/no-unresolved
+      import("three/addons/loaders/DRACOLoader.js")
+    ]);
+    const loader2 = new GLTFLoader2();
     const dracoLoader = new DRACOLoader();
     dracoLoader.setDecoderPath("https://www.gstatic.com/draco/versioned/decoders/1.5.6/");
     loader2.setDRACOLoader(dracoLoader);
@@ -352812,7 +353037,8 @@ const baseFileTypes = [
   makeFileType(FileType$1.OBS_LOCATIONS_MOLECULES_JSON, DataType$3.OBS_LOCATIONS, MoleculesJsonAsObsLocationsLoader, JsonSource, z.null()),
   makeFileType(FileType$1.OBS_LABELS_MOLECULES_JSON, DataType$3.OBS_LABELS, MoleculesJsonAsObsLabelsLoader, JsonSource, z.null()),
   makeFileType(FileType$1.NEIGHBORHOODS_JSON, DataType$3.NEIGHBORHOODS, JsonLoader, JsonSource, z.null()),
-  makeFileType(FileType$1.GENOMIC_PROFILES_ZARR, DataType$3.GENOMIC_PROFILES, GenomicProfilesZarrLoader, ZarrDataSource, z.null())
+  makeFileType(FileType$1.GENOMIC_PROFILES_ZARR, DataType$3.GENOMIC_PROFILES, GenomicProfilesZarrLoader, ZarrDataSource, z.null()),
+  makeFileType(FileType$1.GENOMIC_PROFILES_ZARR_ZIP, DataType$3.GENOMIC_PROFILES, GenomicProfilesZarrLoader, ZarrDataSource, z.null())
 ];
 const baseJointFileTypes = [
   new PluginJointFileType(FileType$1.ANNDATA_ZARR, expandAnndataZarr, anndataZarrSchema),
@@ -352979,6 +353205,7 @@ const baseCoordinationTypes = [
   new PluginCoordinationType(CoordinationType$1.SPATIAL_CHANNEL_LABELS_VISIBLE, true, z.boolean()),
   new PluginCoordinationType(CoordinationType$1.SPATIAL_CHANNEL_LABELS_ORIENTATION, "vertical", z.enum(["vertical", "horizontal"])),
   new PluginCoordinationType(CoordinationType$1.SPATIAL_CHANNEL_LABEL_SIZE, 14, z.number()),
+  new PluginCoordinationType(CoordinationType$1.SPATIAL_CHANNELS_SORT_ORDER, "original", z.enum(["original", "alphabetical"])),
   new PluginCoordinationType(CoordinationType$1.SAMPLE_TYPE, "sample", z.string().nullable()),
   // TODO: remove one array level and use multi-coordination for sampleSetSelection?
   new PluginCoordinationType(CoordinationType$1.SAMPLE_FILTER, null, z.array(z.string()).nullable()),