@vitessce/all 3.8.13 → 3.9.0

package/dist/{index-B0JyLhTY.js → index-Ccs0RkVq.js}

@@ -1,6 +1,6 @@
 import * as React from "react";
 import React__default, { useContext, forwardRef as forwardRef$1, useRef, useMemo as useMemo$1, createContext, createElement, isValidElement, cloneElement, Children, version as version$6, useLayoutEffect as useLayoutEffect$1, useEffect, useImperativeHandle, PureComponent, Component as Component$1, useState, useCallback, Suspense, useReducer } from "react";
-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, 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 } from "@vitessce/vit-s";
+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 } from "@vitessce/vit-s";
 import * as ReactDOM from "react-dom";
 import ReactDOM__default, { createPortal } from "react-dom";
 function _mergeNamespaces(n3, m2) {
@@ -9354,6 +9354,7 @@ const CoordinationType$1 = {
   OBS_SET_HIGHLIGHT: "obsSetHighlight",
   OBS_SET_EXPANSION: "obsSetExpansion",
   OBS_SET_COLOR: "obsSetColor",
+  FEATURE_COLOR: "featureColor",
   FEATURE_HIGHLIGHT: "featureHighlight",
   FEATURE_SELECTION: "featureSelection",
   FEATURE_SET_SELECTION: "featureSetSelection",
@@ -9958,6 +9959,8 @@ const COMPONENT_COORDINATION_TYPES = {
     CoordinationType$1.OBS_SET_FILTER,
     CoordinationType$1.OBS_SET_HIGHLIGHT,
     CoordinationType$1.OBS_SET_COLOR,
+    CoordinationType$1.FEATURE_COLOR,
+    CoordinationType$1.FEATURE_FILTER_MODE,
     CoordinationType$1.FEATURE_HIGHLIGHT,
     CoordinationType$1.FEATURE_SELECTION,
     CoordinationType$1.FEATURE_VALUE_COLORMAP,
@@ -10172,6 +10175,8 @@ const COMPONENT_COORDINATION_TYPES = {
     CoordinationType$1.SPATIAL_SPOT_STROKE_WIDTH,
     CoordinationType$1.SPATIAL_LAYER_COLOR,
     CoordinationType$1.OBS_COLOR_ENCODING,
+    CoordinationType$1.FEATURE_COLOR,
+    CoordinationType$1.FEATURE_FILTER_MODE,
     CoordinationType$1.FEATURE_VALUE_COLORMAP,
     CoordinationType$1.FEATURE_VALUE_COLORMAP_RANGE,
     CoordinationType$1.FEATURE_SELECTION,
@@ -31993,7 +31998,7 @@ var _span$3;
 const useUtilityClasses$1h = (ownerState) => {
   const {
     classes: classes2,
-    contained,
+    contained: contained2,
     size: size2,
     disabled,
     error: error2,
@@ -32002,7 +32007,7 @@ const useUtilityClasses$1h = (ownerState) => {
     required: required2
   } = ownerState;
   const slots = {
-    root: ["root", disabled && "disabled", error2 && "error", size2 && `size${capitalize$1(size2)}`, contained && "contained", focused && "focused", filled && "filled", required2 && "required"]
+    root: ["root", disabled && "disabled", error2 && "error", size2 && `size${capitalize$1(size2)}`, contained2 && "contained", focused && "focused", filled && "filled", required2 && "required"]
   };
   return composeClasses(slots, getFormHelperTextUtilityClasses, classes2);
 };
@@ -33495,6 +33500,90 @@ ListItemText.propTypes = {
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
 };
+function getListItemIconUtilityClass(slot) {
+  return generateUtilityClass("MuiListItemIcon", slot);
+}
+const listItemIconClasses = generateUtilityClasses("MuiListItemIcon", ["root", "alignItemsFlexStart"]);
+const useUtilityClasses$1b = (ownerState) => {
+  const {
+    alignItems,
+    classes: classes2
+  } = ownerState;
+  const slots = {
+    root: ["root", alignItems === "flex-start" && "alignItemsFlexStart"]
+  };
+  return composeClasses(slots, getListItemIconUtilityClass, classes2);
+};
+const ListItemIconRoot = styled("div", {
+  name: "MuiListItemIcon",
+  slot: "Root",
+  overridesResolver: (props, styles2) => {
+    const {
+      ownerState
+    } = props;
+    return [styles2.root, ownerState.alignItems === "flex-start" && styles2.alignItemsFlexStart];
+  }
+})(memoTheme(({
+  theme
+}) => ({
+  minWidth: 56,
+  color: (theme.vars || theme).palette.action.active,
+  flexShrink: 0,
+  display: "inline-flex",
+  variants: [{
+    props: {
+      alignItems: "flex-start"
+    },
+    style: {
+      marginTop: 8
+    }
+  }]
+})));
+const ListItemIcon = /* @__PURE__ */ React.forwardRef(function ListItemIcon2(inProps, ref2) {
+  const props = useDefaultProps({
+    props: inProps,
+    name: "MuiListItemIcon"
+  });
+  const {
+    className,
+    ...other
+  } = props;
+  const context2 = React.useContext(ListContext);
+  const ownerState = {
+    ...props,
+    alignItems: context2.alignItems
+  };
+  const classes2 = useUtilityClasses$1b(ownerState);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(ListItemIconRoot, {
+    className: clsx$1(classes2.root, className),
+    ownerState,
+    ref: ref2,
+    ...other
+  });
+});
+ListItemIcon.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The content of the component, normally `Icon`, `SvgIcon`,
+   * or a `@mui/icons-material` SVG icon element.
+   */
+  children: PropTypes.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+};
 function getScrollbarSize$1(win2 = window) {
   const documentWidth = win2.document.documentElement.clientWidth;
   return win2.innerWidth - documentWidth;
@@ -33746,7 +33835,7 @@ function getDividerUtilityClass(slot) {
   return generateUtilityClass("MuiDivider", slot);
 }
 const dividerClasses = generateUtilityClasses("MuiDivider", ["root", "absolute", "fullWidth", "inset", "middle", "flexItem", "light", "vertical", "withChildren", "withChildrenVertical", "textAlignRight", "textAlignLeft", "wrapper", "wrapperVertical"]);
-const useUtilityClasses$1b = (ownerState) => {
+const useUtilityClasses$1a = (ownerState) => {
   const {
     absolute: absolute2,
     children: children3,
@@ -33960,7 +34049,7 @@ const Divider$1 = /* @__PURE__ */ React.forwardRef(function Divider2(inProps, re
     textAlign: textAlign2,
     variant
   };
-  const classes2 = useUtilityClasses$1b(ownerState);
+  const classes2 = useUtilityClasses$1a(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(DividerRoot, {
     as: component,
     className: clsx$1(classes2.root, className),
@@ -34042,90 +34131,6 @@ Divider$1.propTypes = {
    */
   variant: PropTypes.oneOfType([PropTypes.oneOf(["fullWidth", "inset", "middle"]), PropTypes.string])
 };
-function getListItemIconUtilityClass(slot) {
-  return generateUtilityClass("MuiListItemIcon", slot);
-}
-const listItemIconClasses = generateUtilityClasses("MuiListItemIcon", ["root", "alignItemsFlexStart"]);
-const useUtilityClasses$1a = (ownerState) => {
-  const {
-    alignItems,
-    classes: classes2
-  } = ownerState;
-  const slots = {
-    root: ["root", alignItems === "flex-start" && "alignItemsFlexStart"]
-  };
-  return composeClasses(slots, getListItemIconUtilityClass, classes2);
-};
-const ListItemIconRoot = styled("div", {
-  name: "MuiListItemIcon",
-  slot: "Root",
-  overridesResolver: (props, styles2) => {
-    const {
-      ownerState
-    } = props;
-    return [styles2.root, ownerState.alignItems === "flex-start" && styles2.alignItemsFlexStart];
-  }
-})(memoTheme(({
-  theme
-}) => ({
-  minWidth: 56,
-  color: (theme.vars || theme).palette.action.active,
-  flexShrink: 0,
-  display: "inline-flex",
-  variants: [{
-    props: {
-      alignItems: "flex-start"
-    },
-    style: {
-      marginTop: 8
-    }
-  }]
-})));
-const ListItemIcon = /* @__PURE__ */ React.forwardRef(function ListItemIcon2(inProps, ref2) {
-  const props = useDefaultProps({
-    props: inProps,
-    name: "MuiListItemIcon"
-  });
-  const {
-    className,
-    ...other
-  } = props;
-  const context2 = React.useContext(ListContext);
-  const ownerState = {
-    ...props,
-    alignItems: context2.alignItems
-  };
-  const classes2 = useUtilityClasses$1a(ownerState);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(ListItemIconRoot, {
-    className: clsx$1(classes2.root, className),
-    ownerState,
-    ref: ref2,
-    ...other
-  });
-});
-ListItemIcon.propTypes = {
-  // ┌────────────────────────────── Warning ──────────────────────────────┐
-  // │ These PropTypes are generated from the TypeScript type definitions. │
-  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
-  // └─────────────────────────────────────────────────────────────────────┘
-  /**
-   * The content of the component, normally `Icon`, `SvgIcon`,
-   * or a `@mui/icons-material` SVG icon element.
-   */
-  children: PropTypes.node,
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: PropTypes.object,
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-  /**
-   * The system prop that allows defining system overrides as well as additional CSS styles.
-   */
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
-};
 function getMenuItemUtilityClass(slot) {
   return generateUtilityClass("MuiMenuItem", slot);
 }
@@ -169936,14 +169941,14 @@ class RBush {
   search(bbox2) {
     let node2 = this.data;
     const result = [];
-    if (!intersects$3(bbox2, node2)) return result;
+    if (!intersects$4(bbox2, node2)) return result;
     const toBBox = this.toBBox;
     const nodesToSearch = [];
     while (node2) {
       for (let i2 = 0; i2 < node2.children.length; i2++) {
         const child = node2.children[i2];
         const childBBox = node2.leaf ? toBBox(child) : child;
-        if (intersects$3(bbox2, childBBox)) {
+        if (intersects$4(bbox2, childBBox)) {
           if (node2.leaf) result.push(child);
           else if (contains$3(bbox2, childBBox)) this._all(child, result);
           else nodesToSearch.push(child);
@@ -169955,13 +169960,13 @@ class RBush {
   }
   collides(bbox2) {
     let node2 = this.data;
-    if (!intersects$3(bbox2, node2)) return false;
+    if (!intersects$4(bbox2, node2)) return false;
     const nodesToSearch = [];
     while (node2) {
       for (let i2 = 0; i2 < node2.children.length; i2++) {
         const child = node2.children[i2];
         const childBBox = node2.leaf ? this.toBBox(child) : child;
-        if (intersects$3(bbox2, childBBox)) {
+        if (intersects$4(bbox2, childBBox)) {
           if (node2.leaf || contains$3(bbox2, childBBox)) return true;
           nodesToSearch.push(child);
         }
@@ -170273,7 +170278,7 @@ function intersectionArea(a2, b2) {
 function contains$3(a2, b2) {
   return a2.minX <= b2.minX && a2.minY <= b2.minY && b2.maxX <= a2.maxX && b2.maxY <= a2.maxY;
 }
-function intersects$3(a2, b2) {
+function intersects$4(a2, b2) {
   return b2.minX <= a2.maxX && b2.minY <= a2.maxY && b2.maxX >= a2.minX && b2.maxY >= a2.minY;
 }
 function createNode(children3) {
@@ -209135,22 +209140,22 @@ async function getDecoder(fileDirectory) {
   const Decoder = await importFn();
   return new Decoder(fileDirectory);
 }
-addDecoder([void 0, 1], () => import("./raw-BEDGxpo9.js").then((m2) => m2.default));
-addDecoder(5, () => import("./lzw-CkA9e76s.js").then((m2) => m2.default));
+addDecoder([void 0, 1], () => import("./raw-C5wVKuiu.js").then((m2) => m2.default));
+addDecoder(5, () => import("./lzw-BNtf5UsG.js").then((m2) => m2.default));
 addDecoder(6, () => {
   throw new Error("old style JPEG compression is not supported.");
 });
-addDecoder(7, () => import("./jpeg-BOKb2qaL.js").then((m2) => m2.default));
-addDecoder([8, 32946], () => import("./deflate-qFZzl85K.js").then((m2) => m2.default));
-addDecoder(32773, () => import("./packbits-DOr_NbG_.js").then((m2) => m2.default));
+addDecoder(7, () => import("./jpeg-C90IvgAr.js").then((m2) => m2.default));
+addDecoder([8, 32946], () => import("./deflate-mmlLWSqG.js").then((m2) => m2.default));
+addDecoder(32773, () => import("./packbits-BaMXgBB6.js").then((m2) => m2.default));
 addDecoder(
   34887,
-  () => import("./lerc-CBp5l3Pw.js").then(async (m2) => {
+  () => import("./lerc-cm5d7rjy.js").then(async (m2) => {
     await m2.zstd.init();
     return m2;
   }).then((m2) => m2.default)
 );
-addDecoder(50001, () => import("./webimage-Ad_VhFBm.js").then((m2) => m2.default));
+addDecoder(50001, () => import("./webimage-BjAUnP6y.js").then((m2) => m2.default));
 function copyNewSize(array2, width2, height2, samplesPerPixel = 1) {
   return new (Object.getPrototypeOf(array2)).constructor(width2 * height2 * samplesPerPixel);
 }
@@ -231309,6 +231314,7 @@ function Legend(props) {
     positionRelative = false,
     highContrast = false,
     obsType,
+    isPointsLayer = false,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     featureType: _featureType = void 0,
     // Unused but accepted for API compatibility
@@ -231316,6 +231322,9 @@ function Legend(props) {
     considerSelections = true,
     obsColorEncoding,
     featureSelection,
+    featureFilterMode,
+    featureColor,
+    featureIndex,
     featureLabelsMap,
     featureValueColormap,
     featureValueColormapRange,
@@ -231359,15 +231368,94 @@ function Legend(props) {
       debouncedSetRange(rangeValue);
     }
   }, [debouncedSetRange]);
+  const obsLabel = capitalize$3(obsType ?? null);
   const isDarkTheme = theme === "dark";
-  const isStaticColor = obsColorEncoding === "spatialChannelColor" || obsColorEncoding === "spatialLayerColor";
-  const isSetColor = obsColorEncoding === "cellSetSelection";
+  const isStaticColor = !isPointsLayer && (obsColorEncoding === "spatialChannelColor" || obsColorEncoding === "spatialLayerColor");
+  const isSetColor = !isPointsLayer && obsColorEncoding === "cellSetSelection";
   const layerColor = Array.isArray(spatialLayerColor) && spatialLayerColor.length === 3 ? spatialLayerColor : getDefaultColor(theme ?? "light");
   const channelColor = Array.isArray(spatialChannelColor) && spatialChannelColor.length === 3 ? spatialChannelColor : getDefaultColor(theme ?? "light");
   const staticColor = obsColorEncoding === "spatialChannelColor" ? channelColor : layerColor;
-  const visible = visibleProp && (!considerSelections || ["geneSelection", "geneExpression"].includes(obsColorEncoding ?? "") && featureSelection && Array.isArray(featureSelection) && featureSelection.length >= 1 || isSetColor && (obsSetSelection?.length ?? 0) > 0 && (obsSetColor?.length ?? 0) > 0 || isStaticColor);
+  const visible = visibleProp && (!considerSelections || ["geneSelection", "geneExpression"].includes(obsColorEncoding ?? "") && featureSelection && Array.isArray(featureSelection) && featureSelection.length >= 1 || isSetColor && (obsSetSelection?.length ?? 0) > 0 && (obsSetColor?.length ?? 0) > 0 || isStaticColor || isPointsLayer);
+  const pointsLegendElements = [];
+  if (isPointsLayer) {
+    const MAX_NUM_COLORS = 10;
+    const hasFeatureSelection = Array.isArray(featureSelection) && featureSelection.length > 0;
+    const showUnselected = featureFilterMode !== "featureSelection";
+    if (obsColorEncoding === "spatialLayerColor") {
+      if (!hasFeatureSelection) {
+        pointsLegendElements.push({
+          name: obsLabel,
+          color: staticColor
+        });
+      } else {
+        const limitedFeatureSelection = featureSelection.slice(0, MAX_NUM_COLORS);
+        limitedFeatureSelection.forEach((featureName) => {
+          pointsLegendElements.push({
+            name: featureName,
+            color: staticColor
+          });
+        });
+      }
+    } else if (obsColorEncoding === "geneSelection") {
+      if (!hasFeatureSelection) {
+        pointsLegendElements.push({
+          name: obsLabel,
+          color: staticColor
+        });
+      } else {
+        const limitedFeatureSelection = featureSelection.slice(0, MAX_NUM_COLORS);
+        limitedFeatureSelection.forEach((featureName) => {
+          const featureColorMatch = Array.isArray(featureColor) ? featureColor.find((fc) => fc.name === featureName)?.color : null;
+          pointsLegendElements.push({
+            name: featureName,
+            // If no color is specified for this feature, use staticColor.
+            color: featureColorMatch ?? staticColor
+          });
+        });
+      }
+    } else if (obsColorEncoding === "randomByFeature") {
+      if (!hasFeatureSelection) {
+        pointsLegendElements.push({
+          name: obsLabel,
+          // For now, using black and white for this.
+          // (It should not match any color in PALETTE)
+          color: isDarkTheme ? [255, 255, 255] : [0, 0, 0]
+        });
+      } else {
+        const limitedFeatureSelection = featureSelection.slice(0, MAX_NUM_COLORS);
+        limitedFeatureSelection.forEach((featureName) => {
+          const varIndex = (featureIndex ?? []).indexOf(featureName);
+          const featureColorMatch = varIndex >= 0 ? PALETTE[varIndex % PALETTE.length] : null;
+          pointsLegendElements.push({
+            name: featureName,
+            // If no color is specified for this feature, use staticColor.
+            color: featureColorMatch ?? staticColor
+          });
+        });
+      }
+    } else if (obsColorEncoding === "random") {
+      pointsLegendElements.push({
+        name: obsLabel,
+        // For now, using black and white for this.
+        // (It should not match any color in PALETTE)
+        color: isDarkTheme ? [255, 255, 255] : [0, 0, 0]
+      });
+    }
+    if (showUnselected) {
+      pointsLegendElements.push({
+        name: "Unselected",
+        color: getDefaultColor(theme ?? "light")
+      });
+    }
+  }
   const levelZeroNames = useMemo$1(() => Array.from(new Set(obsSetSelection?.map((setPath) => setPath[0]) || [])), [obsSetSelection]);
-  const dynamicHeight = isSetColor && obsSetSelection ? levelZeroNames.length * titleHeight + (obsSetSelection?.length ?? 0) * (rectHeight + rectMarginY) : height2 + (!pointsVisible && contoursVisible ? 25 : 0);
+  const dynamicHeight = isPointsLayer ? (
+    // Height logic for points layers.
+    pointsLegendElements.length * (rectHeight + rectMarginY) + titleHeight
+  ) : (
+    // Height logic for non-points layers.
+    isSetColor && obsSetSelection ? levelZeroNames.length * titleHeight + (obsSetSelection?.length ?? 0) * (rectHeight + rectMarginY) : height2 + (!pointsVisible && contoursVisible ? 25 : 0)
+  );
   const availHeight = maxHeight2 !== null ? Math.max(0, maxHeight2 - 4) : Infinity;
   const needsScroll = Number.isFinite(availHeight) && dynamicHeight > availHeight + 1;
   useEffect(() => {
@@ -231379,8 +231467,8 @@ function Legend(props) {
     svg2.selectAll("g").remove();
     svg2.attr("width", width2).attr("height", dynamicHeight);
     const g2 = svg2.append("g").attr("width", width2).attr("height", dynamicHeight);
-    const showInteractiveSlider2 = setFeatureValueColormapRange && ["geneSelection", "geneExpression"].includes(obsColorEncoding ?? "") && pointsVisible && featureValueColormap;
-    if (!considerSelections || ["geneSelection", "geneExpression"].includes(obsColorEncoding ?? "")) {
+    const showInteractiveSlider2 = !isPointsLayer && setFeatureValueColormapRange && ["geneSelection", "geneExpression"].includes(obsColorEncoding ?? "") && pointsVisible && featureValueColormap;
+    if (!isPointsLayer && (!considerSelections || ["geneSelection", "geneExpression"].includes(obsColorEncoding ?? ""))) {
       const combinedExtent = combineExtents(extent2 ?? null, featureAggregationStrategy ?? null) || [0, 1];
       const [xMin, xMax] = combinedExtent;
       if (featureValueColormap && pointsVisible) {
@@ -231440,10 +231528,10 @@ function Legend(props) {
         });
       }
     }
-    if (isStaticColor) {
+    if (!isPointsLayer && isStaticColor) {
       g2.append("rect").attr("x", 0).attr("y", titleHeight).attr("width", width2 - 4).attr("height", rectHeight).attr("fill", `rgb(${staticColor[0]},${staticColor[1]},${staticColor[2]})`);
     }
-    if (isSetColor && obsSetSelection && obsSetColor) {
+    if (!isPointsLayer && isSetColor && obsSetSelection && obsSetColor) {
       const obsSetSelectionByLevelZero = {};
       obsSetSelection.forEach((setPath) => {
         const levelZeroName = setPath[0];
@@ -231464,6 +231552,16 @@ function Legend(props) {
         });
       });
     }
+    if (isPointsLayer) {
+      let y2 = 0;
+      g2.append("text").attr("text-anchor", "start").attr("dominant-baseline", "hanging").attr("x", 0).attr("y", y2).text("Points").style("font-size", "9px").style("fill", foregroundColor);
+      y2 += titleHeight;
+      pointsLegendElements.forEach(({ name: name2, color: color2 }) => {
+        g2.append("rect").attr("x", 0).attr("y", y2).attr("width", rectHeight).attr("height", rectHeight).attr("fill", `rgb(${color2[0]},${color2[1]},${color2[2]})`);
+        g2.append("text").attr("text-anchor", "start").attr("dominant-baseline", "hanging").attr("x", rectHeight + rectMarginX).attr("y", y2).text(name2).style("font-size", "9px").style("fill", foregroundColor);
+        y2 += rectHeight + rectMarginY;
+      });
+    }
     const featureSelectionLabelRaw = featureSelection && featureSelection.length >= 1 && !isStaticColor ? featureSelection.map((geneName) => featureLabelsMap?.get(geneName) || featureLabelsMap?.get(cleanFeatureId(geneName)) || geneName) : null;
     let featureSelectionLabelRawStr = "";
     if (featureAggregationStrategy === "first") {
@@ -231490,12 +231588,11 @@ function Legend(props) {
     }
     const combinedMissing = combineMissings(missing ?? null, featureAggregationStrategy ?? null);
     const featureSelectionLabel = combinedMissing ? `${featureSelectionLabelRawStr} (${Math.round(combinedMissing * 100)}% NaN)` : featureSelectionLabelRawStr;
-    const obsLabel = capitalize$3(obsType ?? null);
     const featureLabel = considerSelections ? featureSelectionLabel || capitalize$3(featureValueType ?? null) : capitalize$3(featureValueType ?? null);
     const mainLabel = showObsLabel ? obsLabel : featureLabel;
     const subLabel = showObsLabel ? featureLabel : null;
     const hasSubLabel = subLabel !== null;
-    if (!isSetColor) {
+    if (!isPointsLayer && !isSetColor) {
       g2.append("text").attr("text-anchor", hasSubLabel ? "start" : "end").attr("dominant-baseline", "hanging").attr("x", hasSubLabel ? 0 : width2 - 4).attr("y", 0).text(mainLabel ?? "").style("font-size", "10px").style("fill", foregroundColor);
       if (hasSubLabel) {
         g2.append("text").attr("text-anchor", "end").attr("dominant-baseline", "hanging").attr("x", width2 - 5).attr("y", titleHeight + rectHeight).text(subLabel ?? "").style("font-size", "9px").style("fill", foregroundColor);
@@ -231534,7 +231631,7 @@ function Legend(props) {
     showObsLabel,
     staticColor
   ]);
-  const showInteractiveSlider = setFeatureValueColormapRange && ["geneSelection", "geneExpression"].includes(obsColorEncoding ?? "") && pointsVisible && featureValueColormap;
+  const showInteractiveSlider = !isPointsLayer && setFeatureValueColormapRange && ["geneSelection", "geneExpression"].includes(obsColorEncoding ?? "") && pointsVisible && featureValueColormap;
   const globalExtent = useMemo$1(() => {
     const combined = combineExtents(extent2 ?? null, featureAggregationStrategy ?? null);
     return combined || [0, 1];
@@ -231607,7 +231704,8 @@ function MultiLegend(props) {
     spotMultiFeatureLabels,
     // Points
     pointLayerScopes,
-    pointLayerCoordination
+    pointLayerCoordination,
+    pointMultiIndicesData
   } = props;
   const { classes: classes2 } = useStyles$o();
   const reversedSegmentationLayerScopes = useMemo$1(() => [...segmentationLayerScopes || []].reverse(), [segmentationLayerScopes]);
@@ -231618,7 +231716,8 @@ function MultiLegend(props) {
     const layerSetters = pointLayerCoordination?.[1]?.[layerScope];
     if (!layerCoordination)
       return null;
-    const { spatialLayerVisible, obsColorEncoding, obsType, featureType, featureValueType, featureSelection, featureValueColormap, featureValueColormapRange, spatialLayerColor, legendVisible } = layerCoordination;
+    const { spatialLayerVisible, obsColorEncoding, obsType, featureType, featureValueType, featureSelection, featureColor, featureFilterMode, featureValueColormap, featureValueColormapRange, spatialLayerColor, legendVisible } = layerCoordination;
+    const pointIndicesData = pointMultiIndicesData?.[layerScope];
     const { setFeatureValueColormapRange } = layerSetters || {};
     const isStaticColor = obsColorEncoding === "spatialLayerColor";
     const height2 = isStaticColor ? 20 : 36;
@@ -231635,6 +231734,10 @@ function MultiLegend(props) {
       obsColorEncoding,
       spatialLayerColor,
       featureSelection,
+      featureFilterMode,
+      featureColor,
+      featureIndex: pointIndicesData?.featureIndex,
+      isPointsLayer: true,
       // featureLabelsMap={featureLabelsMap} // TODO
       featureValueColormap: featureValueColormap || "viridis",
       featureValueColormapRange: featureValueColormapRange || [0, 1],
@@ -252046,6 +252149,7 @@ class Spatial2 extends AbstractSpatialOrScatterplot {
     this.obsSpotsQuadTree = {};
     this.obsPointsData = {};
     this.obsPointsQuadTree = {};
+    this.obsPointsLoadingStatus = {};
     this.imageLayers = [];
     this.obsSegmentationsLayers = [];
     this.obsSpotsLayers = [];
@@ -252226,10 +252330,131 @@ class Spatial2 extends AbstractSpatialOrScatterplot {
     });
   }
   createPointLayer(layerScope, layerCoordination, layerObsPoints) {
-    const { theme, delegateHover, targetZ } = this.props;
-    const { spatialLayerVisible, spatialLayerOpacity, obsColorEncoding, spatialLayerColor } = layerCoordination;
-    const isStaticColor = obsColorEncoding === "spatialLayerColor";
+    const { theme, delegateHover, targetZ, pointMatrixIndices, setTiledPointsLoadingProgress } = this.props;
+    const { spatialLayerVisible, spatialLayerOpacity, obsColorEncoding, spatialLayerColor, featureSelection, featureFilterMode, featureColor } = layerCoordination;
+    const pointFeatureIndex = pointMatrixIndices?.[layerScope]?.featureIndex;
+    let featureIndices = [];
+    if (Array.isArray(featureSelection) && featureSelection.length >= 1) {
+      if (pointFeatureIndex) {
+        featureIndices = featureSelection.map((geneName) => pointFeatureIndex.indexOf(geneName)).filter((i2) => i2 >= 0);
+      }
+    }
     const staticColor = Array.isArray(spatialLayerColor) && spatialLayerColor.length === 3 ? spatialLayerColor : getDefaultColor(theme);
+    const defaultColor = getDefaultColor(theme);
+    let getFillColor = null;
+    const hasFeatureSelection = Array.isArray(featureSelection) && featureSelection.length > 0;
+    const showUnselected = featureFilterMode !== "featureSelection";
+    const hasMultipleFeaturesSelected = Array.isArray(featureIndices) && featureIndices.length > 1;
+    if (obsColorEncoding === "spatialLayerColor") {
+      getFillColor = (object2, { index: index2, data: data2, target: target2 }) => {
+        if (!hasFeatureSelection || featureIndices.includes(data2.src.featureIndices[index2])) {
+          target2[0] = staticColor[0];
+          target2[1] = staticColor[1];
+          target2[2] = staticColor[2];
+          target2[3] = 255;
+          return target2;
+        }
+        if (!showUnselected) {
+          if (hasMultipleFeaturesSelected) {
+            target2[3] = 0;
+          }
+          return target2;
+        }
+        target2[0] = defaultColor[0];
+        target2[1] = defaultColor[1];
+        target2[2] = defaultColor[2];
+        target2[3] = 255;
+        return target2;
+      };
+    } else if (obsColorEncoding === "geneSelection") {
+      getFillColor = (object2, { index: index2, data: data2, target: target2 }) => {
+        if (!hasFeatureSelection) {
+          target2[0] = staticColor[0];
+          target2[1] = staticColor[1];
+          target2[2] = staticColor[2];
+          target2[3] = 255;
+          return target2;
+        }
+        const isSelected = featureIndices.includes(data2.src.featureIndices[index2]);
+        if (isSelected) {
+          const featureName = pointFeatureIndex?.[data2.src.featureIndices[index2]];
+          const featureColorMatch = Array.isArray(featureColor) ? featureColor.find((fc) => fc.name === featureName)?.color : null;
+          if (featureColorMatch) {
+            target2[0] = featureColorMatch[0];
+            target2[1] = featureColorMatch[1];
+            target2[2] = featureColorMatch[2];
+            target2[3] = 255;
+            return target2;
+          }
+          target2[0] = staticColor[0];
+          target2[1] = staticColor[1];
+          target2[2] = staticColor[2];
+          target2[3] = 255;
+          return target2;
+        }
+        if (!showUnselected) {
+          if (hasMultipleFeaturesSelected) {
+            target2[3] = 0;
+          }
+          return target2;
+        }
+        target2[0] = defaultColor[0];
+        target2[1] = defaultColor[1];
+        target2[2] = defaultColor[2];
+        target2[3] = 255;
+        return target2;
+      };
+    } else if (obsColorEncoding === "randomByFeature") {
+      {
+        getFillColor = (object2, { index: index2, data: data2, target: target2 }) => {
+          if (!hasFeatureSelection || featureIndices.includes(data2.src.featureIndices[index2])) {
+            const varIndex = data2.src.featureIndices[index2];
+            const color2 = PALETTE[varIndex % PALETTE.length];
+            target2[0] = color2[0];
+            target2[1] = color2[1];
+            target2[2] = color2[2];
+            target2[3] = 255;
+            return target2;
+          }
+          if (!showUnselected) {
+            if (hasMultipleFeaturesSelected) {
+              target2[3] = 0;
+            }
+            return target2;
+          }
+          target2[0] = defaultColor[0];
+          target2[1] = defaultColor[1];
+          target2[2] = defaultColor[2];
+          target2[3] = 255;
+          return target2;
+        };
+      }
+    } else if (obsColorEncoding === "random") {
+      {
+        getFillColor = (object2, { index: index2, data: data2, target: target2 }) => {
+          if (!hasFeatureSelection || featureIndices.includes(data2.src.featureIndices[index2])) {
+            const color2 = PALETTE[index2 % PALETTE.length];
+            target2[0] = color2[0];
+            target2[1] = color2[1];
+            target2[2] = color2[2];
+            target2[3] = 255;
+            return target2;
+          }
+          if (!showUnselected) {
+            if (hasMultipleFeaturesSelected) {
+              target2[3] = 0;
+            }
+            return target2;
+          }
+          target2[0] = defaultColor[0];
+          target2[1] = defaultColor[1];
+          target2[2] = defaultColor[2];
+          target2[3] = 255;
+          return target2;
+        };
+      }
+    }
+    const isStaticColor = obsColorEncoding === "spatialLayerColor";
     const getMoleculeColor = (object2, { data: data2, index: index2, target: target2 }) => {
       const obsId = data2.src.obsIndex[index2];
       if (data2.src.obsLabelsMap && data2.src.uniqueObsLabels && data2.src.PALETTE) {
@@ -252241,11 +252466,131 @@ class Spatial2 extends AbstractSpatialOrScatterplot {
       }
       return target2;
     };
-    const { obsPointsModelMatrix, obsPoints } = this.obsPointsData?.[layerScope]?.src ?? {};
-    const hasZ = obsPoints?.shape?.[0] === 3;
+    const { obsPointsModelMatrix, obsPoints, obsPointsTilingType, loadPointsInRect } = this.obsPointsData?.[layerScope]?.src ?? {};
+    obsPoints?.shape?.[0] === 3;
     const modelMatrix2 = obsPointsModelMatrix?.clone();
-    if (hasZ && typeof targetZ !== "number") {
-      log$b.warn("Spatial: targetZ is not a number, so the point layer will not be filtered by Z.");
+    if (obsPointsTilingType === "tiled") {
+      return new TileLayer({
+        id: `Tiled-${POINT_LAYER_PREFIX}${layerScope}`,
+        coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
+        // NOTE: picking is not working due to https://github.com/vitessce/vitessce/issues/2039
+        modelMatrix: modelMatrix2,
+        pickable: true,
+        autoHighlight: true,
+        onHover: (info2) => delegateHover(info2, "point", layerScope),
+        opacity: spatialLayerOpacity,
+        visible: spatialLayerVisible,
+        // Since points are tiled but not multi-resolution,
+        // it provides no benefit to request tiles at different zoom levels.
+        // TODO: Should this value be the same for
+        // every dataset, or do we need to
+        // adjust based on the extent/density of the
+        // point data (and/or account for modelMatrix, etc)?
+        maxZoom: -1,
+        minZoom: -1,
+        tileSize: 512,
+        // refinementStrategy: 'no-overlap',
+        getTileData: async (tileInfo) => {
+          const { index: index2, signal, bbox: bbox2, zoom: zoom2 } = tileInfo;
+          const { z: z2, x: x2, y: y2 } = index2;
+          this.obsPointsLoadingStatus = {
+            ...this.obsPointsLoadingStatus,
+            [`${layerScope}-${z2}-${x2}-${y2}`]: "loading"
+          };
+          setTiledPointsLoadingProgress(this.obsPointsLoadingStatus);
+          signal.addEventListener("abort", () => {
+            this.obsPointsLoadingStatus = {
+              ...this.obsPointsLoadingStatus,
+              [`${layerScope}-${z2}-${x2}-${y2}`]: "aborted"
+            };
+            setTiledPointsLoadingProgress(this.obsPointsLoadingStatus);
+          });
+          const pointsInTile = await loadPointsInRect(bbox2, signal);
+          this.obsPointsLoadingStatus = {
+            ...this.obsPointsLoadingStatus,
+            [`${layerScope}-${z2}-${x2}-${y2}`]: "success"
+          };
+          setTiledPointsLoadingProgress(this.obsPointsLoadingStatus);
+          return {
+            src: pointsInTile.data,
+            length: pointsInTile.shape?.[1] || 0
+          };
+        },
+        renderSubLayers: (subLayerProps) => {
+          const { bbox: bbox2, content: tileData } = subLayerProps.tile;
+          const { left: left2, top: top2, right: right2, bottom: bottom2 } = bbox2;
+          const hasFeatureIndicesMinMax = !showUnselected && Array.isArray(featureIndices) && featureIndices.length === 1;
+          const FILTER_PLACEHOLDER = 0;
+          const featureIndicesMinMax = hasFeatureIndicesMinMax ? [featureIndices[0], featureIndices[0]] : [FILTER_PLACEHOLDER, FILTER_PLACEHOLDER];
+          return new ScatterplotLayer(subLayerProps, {
+            bounds: [left2, top2, right2, bottom2],
+            data: tileData,
+            getRadius: 5,
+            radiusMaxPixels: 3,
+            // getPosition: d => d,
+            // getFillColor: [255, 0, 0],
+            getPosition: (object2, { data: data2, index: index2, target: target2 }) => {
+              target2[0] = data2.src.x[index2];
+              target2[1] = data2.src.y[index2];
+              target2[2] = 0;
+              return target2;
+            },
+            getFillColor,
+            // TODO: Is the picking stuff needed here in the Sublayer, or in the parent TileLayer?
+            pickable: true,
+            autoHighlight: true,
+            onHover: (info2) => delegateHover(info2, "point", layerScope),
+            // Use GPU filtering to filter to only the points in the tile bounding box,
+            // since the row groups may contain points from other tiles.
+            // Note: this can be improved using filterCategories,
+            // but it is not available until post-v9 deck.gl/extensions.
+            filterRange: [[left2, right2], [top2, bottom2], featureIndicesMinMax],
+            getFilterValue: hasFeatureIndicesMinMax ? (object2, { data: data2, index: index2 }) => [
+              data2.src.x[index2],
+              data2.src.y[index2],
+              data2.src.featureIndices[index2]
+            ] : (object2, { data: data2, index: index2 }) => [
+              data2.src.x[index2],
+              data2.src.y[index2],
+              FILTER_PLACEHOLDER
+            ],
+            extensions: [
+              new DataFilterExtension({ filterSize: 3 })
+            ],
+            updateTriggers: {
+              getFillColor: [
+                showUnselected,
+                featureColor,
+                obsColorEncoding,
+                spatialLayerColor,
+                featureSelection,
+                hasMultipleFeaturesSelected
+              ],
+              getFilterValue: [hasFeatureIndicesMinMax, showUnselected, featureSelection],
+              filterRange: [hasFeatureIndicesMinMax, showUnselected, featureSelection]
+            }
+          });
+        },
+        updateTriggers: {
+          getTileData: [
+            showUnselected,
+            featureColor,
+            obsColorEncoding,
+            spatialLayerColor,
+            featureSelection,
+            hasMultipleFeaturesSelected
+          ]
+        }
+        /*
+                onTileError: (error) => {
+        
+                },
+                onViewportLoad: (loadedTiles) => {
+                  // Called when all tiles in the current viewport are loaded.
+                  // An array of loaded Tile instances are passed as argument to this function.
+                },
+                */
+      });
     }
     return new ScatterplotLayer({
       id: `${POINT_LAYER_PREFIX}${layerScope}`,
@@ -252272,16 +252617,7 @@ class Spatial2 extends AbstractSpatialOrScatterplot {
         getFillColor: [obsColorEncoding, staticColor],
         getLineColor: [obsColorEncoding, staticColor]
       },
-      ...hasZ && typeof targetZ === "number" ? {
-        // TODO: support targetT filtering as well.
-        // TODO: allow filtering by Z coordinate (rather than slice index)
-        // Reference: https://github.com/vitessce/vitessce/issues/2194
-        filterRange: [targetZ, targetZ],
-        getFilterValue: (object2, { data: data2, index: index2 }) => data2.src.obsPoints.data[2][index2],
-        extensions: [
-          new DataFilterExtension({ filterSize: 1 })
-        ]
-      } : {}
+      ...{}
     });
   }
   createSelectionLayer() {
@@ -252821,28 +253157,45 @@ class Spatial2 extends AbstractSpatialOrScatterplot {
   }
   onUpdatePointsData(layerScope) {
     const { obsPoints, pointMultiObsLabels } = this.props;
-    const { obsIndex, obsPoints: layerObsPoints, obsPointsModelMatrix } = obsPoints?.[layerScope] || {};
+    const { obsIndex, obsPoints: layerObsPoints, obsPointsModelMatrix, loadPointsInRect, obsPointsTilingType } = obsPoints?.[layerScope] || {};
     const { obsIndex: obsLabelsIndex, obsLabels } = pointMultiObsLabels?.[layerScope] || {};
-    if (layerObsPoints) {
-      const getCellCoords = makeDefaultGetObsCoords(layerObsPoints);
-      this.obsPointsQuadTree[layerScope] = createQuadTree(layerObsPoints, getCellCoords);
+    if (obsPointsTilingType === "tiled") {
       this.obsPointsData[layerScope] = {
         src: {
-          obsIndex,
-          obsPoints: layerObsPoints,
+          obsPointsTilingType,
+          obsIndex: null,
+          obsPoints: null,
           obsPointsModelMatrix,
           obsLabelsMap: null,
           uniqueObsLabels: null,
-          PALETTE: null
+          PALETTE: null,
+          loadPointsInRect
         },
-        length: layerObsPoints.shape[1]
+        length: null
       };
-      if (obsLabels) {
-        const obsLabelsMap = new Map(obsLabelsIndex.map((key2, i2) => [key2, obsLabels[i2]]));
-        const uniqueObsLabels = Array.from(new Set(obsLabels));
-        this.obsPointsData[layerScope].src.obsLabelsMap = obsLabelsMap;
-        this.obsPointsData[layerScope].src.uniqueObsLabels = uniqueObsLabels;
-        this.obsPointsData[layerScope].src.PALETTE = PALETTE;
+    } else {
+      if (layerObsPoints) {
+        const getCellCoords = makeDefaultGetObsCoords(layerObsPoints);
+        this.obsPointsQuadTree[layerScope] = createQuadTree(layerObsPoints, getCellCoords);
+        this.obsPointsData[layerScope] = {
+          src: {
+            obsPointsTilingType,
+            obsIndex,
+            obsPoints: layerObsPoints,
+            obsPointsModelMatrix,
+            obsLabelsMap: null,
+            uniqueObsLabels: null,
+            PALETTE: null
+          },
+          length: layerObsPoints.shape[1]
+        };
+        if (obsLabels) {
+          const obsLabelsMap = new Map(obsLabelsIndex.map((key2, i2) => [key2, obsLabels[i2]]));
+          const uniqueObsLabels = Array.from(new Set(obsLabels));
+          this.obsPointsData[layerScope].src.obsLabelsMap = obsLabelsMap;
+          this.obsPointsData[layerScope].src.uniqueObsLabels = uniqueObsLabels;
+          this.obsPointsData[layerScope].src.PALETTE = PALETTE;
+        }
       }
     }
   }
@@ -253051,6 +253404,7 @@ class Spatial2 extends AbstractSpatialOrScatterplot {
       // Data props.
       "obsPoints",
       "pointMultiObsLabels",
+      "pointMatrixIndices",
       // Coordination props.
       "pointLayerScopes",
       "pointLayerCoordination"
@@ -253205,12 +253559,12 @@ class ErrorBoundary extends React__default.Component {
   }
 }
 const LazySpatialThree = React__default.lazy(async () => {
-  const { SpatialWrapper: SpatialWrapper2 } = await import("./index-DZg7IgTe.js");
+  const { SpatialWrapper: SpatialWrapper2 } = await import("./index-SH4i0VjQ.js");
   return { default: SpatialWrapper2 };
 });
 const SpatialThreeAdapter = React__default.forwardRef((props, ref2) => jsxRuntimeExports.jsx("div", { ref: ref2, style: { width: "100%", height: "100%" }, children: jsxRuntimeExports.jsx(ErrorBoundary, { children: jsxRuntimeExports.jsx(Suspense, { fallback: jsxRuntimeExports.jsx("div", { children: "Loading..." }), children: jsxRuntimeExports.jsx(LazySpatialThree, { ...props }) }) }) }));
 const LazySpatialAccelerated = React__default.lazy(async () => {
-  const { SpatialWrapper: SpatialWrapper2 } = await import("./index-eU9RLuKQ.js");
+  const { SpatialWrapper: SpatialWrapper2 } = await import("./index-gdPd0Ws9.js");
   return { default: SpatialWrapper2 };
 });
 const SpatialAcceleratedAdapter = React__default.forwardRef((props, ref2) => jsxRuntimeExports.jsx("div", { ref: ref2, style: { width: "100%", height: "100%" }, children: jsxRuntimeExports.jsx(ErrorBoundary, { children: jsxRuntimeExports.jsx(Suspense, { fallback: jsxRuntimeExports.jsx("div", { children: "Loading..." }), children: jsxRuntimeExports.jsx(LazySpatialAccelerated, { ...props }) }) }) }));
@@ -253325,12 +253679,22 @@ const DEFAULT_VIEW_STATE = {
 const SET_VIEW_STATE_NOOP = () => {
 };
 function getHoverData(hoverInfo, layerType) {
-  const { coordinate, sourceLayer: layer, tile } = hoverInfo;
-  if (layerType === "segmentation-bitmask" || layerType === "image") {
+  const { coordinate, sourceLayer: layer, tile, index: pointIndex } = hoverInfo;
+  if (layerType === "segmentation-bitmask" || layerType === "image" || layerType === "point") {
     if (coordinate && layer) {
       if (layer.id.startsWith("Tiled") && tile) {
         const { content: content2, bbox: bbox2, index: { z: z2 } } = tile;
         if (content2) {
+          if (layerType === "point" && pointIndex >= 0) {
+            const { src } = content2 || {};
+            const { x: x2, y: y2, featureIndices } = src || {};
+            return {
+              pointIndex,
+              x: x2?.[pointIndex],
+              y: y2?.[pointIndex],
+              featureIndex: featureIndices?.[pointIndex]
+            };
+          }
           const { data: data2, width: width2, height: height2 } = content2;
           const { left: left2, right: right2, top: top2, bottom: bottom2 } = bbox2;
           const bounds2 = [
@@ -253508,6 +253872,8 @@ function SpatialSubscriber(props) {
     CoordinationType$1.SPATIAL_LAYER_VISIBLE,
     CoordinationType$1.SPATIAL_LAYER_OPACITY,
     CoordinationType$1.OBS_COLOR_ENCODING,
+    CoordinationType$1.FEATURE_COLOR,
+    CoordinationType$1.FEATURE_FILTER_MODE,
     CoordinationType$1.FEATURE_SELECTION,
     CoordinationType$1.FEATURE_VALUE_COLORMAP,
     CoordinationType$1.FEATURE_VALUE_COLORMAP_RANGE,
@@ -253518,7 +253884,10 @@ function SpatialSubscriber(props) {
     CoordinationType$1.LEGEND_VISIBLE
   ], coordinationScopes, coordinationScopesBy, CoordinationType$1.POINT_LAYER);
   const [volumeLoadingStatus, setVolumeLoadingStatus] = useState(null);
-  const [{ volumeLoadingProgress }, { setVolumeLoadingProgress }] = useAuxiliaryCoordination(["spatialAcceleratedVolumeLoadingProgress"], coordinationScopes);
+  const [{ volumeLoadingProgress, tiledPointsLoadingProgress }, { setVolumeLoadingProgress, setTiledPointsLoadingProgress }] = useAuxiliaryCoordination([
+    "spatialAcceleratedVolumeLoadingProgress",
+    "spatialTiledPointsLoadingProgress"
+  ], coordinationScopes);
   useEffect(() => {
     if (volumeLoadingStatus && volumeLoadingStatus.loadingProgress) {
       setVolumeLoadingProgress(volumeLoadingStatus);
@@ -253535,6 +253904,7 @@ function SpatialSubscriber(props) {
   const height2 = threeFor3d && deckHeight === void 0 ? threeHeight : deckHeight;
   const [obsPointsData, obsPointsDataStatus, obsPointsUrls, obsPointsErrors] = useMultiObsPoints(coordinationScopes, coordinationScopesBy, loaders, dataset, mergeCoordination, uuid2);
   const [pointMultiObsLabelsData, pointMultiObsLabelsDataStatus, pointMultiObsLabelsErrors] = usePointMultiObsLabels(coordinationScopes, coordinationScopesBy, loaders, dataset);
+  const [pointMultiIndicesData, pointMultiIndicesDataStatus, pointMultiIndicesDataErrors] = usePointMultiObsFeatureMatrixIndices(coordinationScopes, coordinationScopesBy, loaders, dataset);
   const [obsSpotsData, obsSpotsDataStatus, obsSpotsUrls, obsSpotsErrors] = useMultiObsSpots(coordinationScopes, coordinationScopesBy, loaders, dataset, mergeCoordination, uuid2);
   const [obsSpotsSetsData, obsSpotsSetsDataStatus, obsSpotSetsUrls, obsSpotsSetsErrors] = useSpotMultiObsSets(coordinationScopes, coordinationScopesBy, loaders, dataset);
   const [obsSpotsFeatureLabelsData, obsSpotsFeatureLabelsDataStatus, obsSpotsFeatureLabelsUrls, obsSpotsFeatureLabelsErrors] = useSpotMultiFeatureLabels(coordinationScopes, coordinationScopesBy, loaders, dataset);
@@ -253568,6 +253938,7 @@ function SpatialSubscriber(props) {
     ...spotMultiFeatureSelectionErrors,
     ...spotMultiIndicesDataErrors,
     ...pointMultiObsLabelsErrors,
+    ...pointMultiIndicesDataErrors,
     ...segmentationMultiFeatureSelectionErrors,
     ...segmentationMultiIndicesDataErrors,
     ...obsSegmentationsLocationsDataErrors
@@ -253587,6 +253958,7 @@ function SpatialSubscriber(props) {
     // Points
     obsPointsDataStatus,
     pointMultiObsLabelsDataStatus,
+    pointMultiIndicesDataStatus,
     // Segmentations
     obsSegmentationsDataStatus,
     obsSegmentationsSetsDataStatus,
@@ -253774,14 +254146,19 @@ function SpatialSubscriber(props) {
     pointLayerScopes?.forEach((pointLayerScope) => {
       const { setObsHighlight } = pointLayerCoordination?.[1]?.[pointLayerScope] || {};
       if (hoverData && layerType === "point" && layerScope === pointLayerScope) {
-        const obsI = hoverData;
-        const { obsIndex } = obsPointsData?.[pointLayerScope] || {};
-        const obsId = obsIndex?.[obsI];
-        if (obsIndex && obsId) {
+        if (typeof hoverData === "object" && hoverData?.pointIndex) {
           showAnyTooltip = true;
-          setObsHighlight(obsId);
+          setObsHighlight(hoverData.pointIndex);
         } else {
-          setObsHighlight(null);
+          const obsI = hoverData;
+          const { obsIndex } = obsPointsData?.[pointLayerScope] || {};
+          const obsId = obsIndex?.[obsI];
+          if (obsIndex && obsId) {
+            showAnyTooltip = true;
+            setObsHighlight(obsId);
+          } else {
+            setObsHighlight(null);
+          }
         }
       } else {
         setObsHighlight(null);
@@ -253823,7 +254200,7 @@ function SpatialSubscriber(props) {
     target: [targetX2, targetY2, targetZ],
     rotationX,
     rotationOrbit
-  } : DEFAULT_VIEW_STATE, orbitAxis, spatialAxisFixed, setViewState: isValidViewState ? setViewState : SET_VIEW_STATE_NOOP, originalViewState, spatialRenderingMode, updateViewInfo: setComponentViewInfo, delegateHover, obsPoints: obsPointsData, pointLayerScopes, pointLayerCoordination, pointMultiObsLabels: pointMultiObsLabelsData, obsSpots: obsSpotsData, spotLayerScopes, spotLayerCoordination, obsSpotsSets: obsSpotsSetsData, spotMatrixIndices: spotMultiIndicesData, spotMultiExpressionData: spotMultiExpressionNormDataAggregated || spotMultiExpressionNormData, segmentationLayerScopes, segmentationLayerCoordination, segmentationChannelScopesByLayer, segmentationChannelCoordination, obsSegmentations: obsSegmentationsData, obsSegmentationsLocations: obsSegmentationsLocationsData, obsSegmentationsSets: obsSegmentationsSetsData, segmentationMatrixIndices: segmentationMultiIndicesData, segmentationMultiExpressionData: segmentationMultiExpressionNormDataAggregated || segmentationMultiExpressionNormData, bitmaskValueIsIndex, images: imageData, imageLayerScopes, imageLayerCoordination, imageChannelScopesByLayer, imageChannelCoordination }), !disableTooltip && jsxRuntimeExports.jsx(SpatialTooltipSubscriber, {
+  } : DEFAULT_VIEW_STATE, orbitAxis, spatialAxisFixed, setViewState: isValidViewState ? setViewState : SET_VIEW_STATE_NOOP, originalViewState, spatialRenderingMode, updateViewInfo: setComponentViewInfo, delegateHover, obsPoints: obsPointsData, pointLayerScopes, pointLayerCoordination, pointMultiObsLabels: pointMultiObsLabelsData, pointMatrixIndices: pointMultiIndicesData, obsSpots: obsSpotsData, spotLayerScopes, spotLayerCoordination, obsSpotsSets: obsSpotsSetsData, spotMatrixIndices: spotMultiIndicesData, spotMultiExpressionData: spotMultiExpressionNormDataAggregated || spotMultiExpressionNormData, segmentationLayerScopes, segmentationLayerCoordination, segmentationChannelScopesByLayer, segmentationChannelCoordination, obsSegmentations: obsSegmentationsData, obsSegmentationsLocations: obsSegmentationsLocationsData, obsSegmentationsSets: obsSegmentationsSetsData, segmentationMatrixIndices: segmentationMultiIndicesData, segmentationMultiExpressionData: segmentationMultiExpressionNormDataAggregated || segmentationMultiExpressionNormData, bitmaskValueIsIndex, images: imageData, imageLayerScopes, imageLayerCoordination, imageChannelScopesByLayer, imageChannelCoordination, setTiledPointsLoadingProgress }), !disableTooltip && jsxRuntimeExports.jsx(SpatialTooltipSubscriber, {
     parentUuid: uuid2,
     width: width2,
     height: height2,
@@ -253864,7 +254241,8 @@ function SpatialSubscriber(props) {
       spotMultiFeatureLabels: obsSpotsFeatureLabelsData,
       // Points
       pointLayerScopes,
-      pointLayerCoordination
+      pointLayerCoordination,
+      pointMultiIndicesData
     }
   ), jsxRuntimeExports.jsx(
     ChannelNamesLegend,
@@ -262826,17 +263204,35 @@ function SpotLayerController(props) {
   return jsxRuntimeExports.jsx(Grid$1, { className: lcClasses.layerControllerGrid, children: jsxRuntimeExports.jsx(Paper, { elevation: 4, className: lcClasses.layerControllerRoot, children: jsxRuntimeExports.jsxs(Grid$1, { container: true, direction: "row", justifyContent: "space-between", children: [jsxRuntimeExports.jsx(Grid$1, { size: 1, children: jsxRuntimeExports.jsx(Button, { onClick: handleVisibleChange, className: menuClasses.imageLayerVisibleButton, "aria-label": "Toggle spot layer visibility", children: jsxRuntimeExports.jsx(Visibility, {}) }) }), jsxRuntimeExports.jsx(Grid$1, { size: 1, children: jsxRuntimeExports.jsx(ChannelColorPickerMenu, { theme, color: color2, setColor: setColor2, palette, isStaticColor, isColormap, featureValueColormap, visible }) }), jsxRuntimeExports.jsx(Grid$1, { size: 6, children: jsxRuntimeExports.jsx(Typography, { className: menuClasses.imageLayerName, children: label2 }) }), jsxRuntimeExports.jsx(Grid$1, { size: 2, children: jsxRuntimeExports.jsx(Slider, { value: opacity2, min: 0, max: 1, step: 1e-3, onChange: handleOpacityChange, className: menuClasses.imageLayerOpacitySlider, orientation: "horizontal", "aria-label": `Adjust opacity for layer ${label2}` }) }), jsxRuntimeExports.jsx(Grid$1, { size: 1, children: jsxRuntimeExports.jsx(SpotLayerEllipsisMenu, { filled, setFilled, strokeWidth, setStrokeWidth, featureSelection, obsColorEncoding, setObsColorEncoding, featureValueColormap, setFeatureValueColormap, featureValueColormapRange, setFeatureValueColormapRange, tooltipsVisible, setTooltipsVisible, tooltipCrosshairsVisible, setTooltipCrosshairsVisible, legendVisible, setLegendVisible }) }), jsxRuntimeExports.jsx(Grid$1, { size: 1, children: jsxRuntimeExports.jsx(SvgSpots, { className: classes2.layerTypeSpotIcon }) })] }) }) });
 }
 const useStyles$e = makeStyles()(() => ({
+  pointLayerButton: {
+    borderStyle: "dashed",
+    marginTop: "10px",
+    marginBottom: "10px",
+    fontWeight: 400
+  },
+  pointFeatureControllerGrid: {
+    padding: "0",
+    flexWrap: "nowrap"
+  },
+  pointFeatureExpansionButton: {
+    display: "inline-block",
+    margin: 0,
+    padding: 0,
+    minWidth: 0,
+    lineHeight: 1,
+    width: "50%"
+  },
   layerTypePointIcon: {
     height: "100%",
-    marginLeft: "1px",
+    paddingLeft: "2px",
     fill: "currentColor",
-    fontSize: "20px",
+    fontSize: "14px",
     width: "50%",
-    maxWidth: "20px"
+    maxWidth: "16px"
   }
 }));
 function PointLayerEllipsisMenu(props) {
-  const { featureSelection, obsColorEncoding, setObsColorEncoding, featureValueColormapRange, setFeatureValueColormapRange, tooltipsVisible, setTooltipsVisible, tooltipCrosshairsVisible, setTooltipCrosshairsVisible, legendVisible, setLegendVisible } = props;
+  const { featureSelection, featureFilterMode, setFeatureFilterMode, obsColorEncoding, setObsColorEncoding, featureValueColormapRange, setFeatureValueColormapRange, tooltipsVisible, setTooltipsVisible, tooltipCrosshairsVisible, setTooltipCrosshairsVisible, legendVisible, setLegendVisible } = props;
   const [open2, setOpen] = useState(false);
   const { classes: selectClasses2 } = useSelectStyles();
   const { classes: menuClasses } = useEllipsisMenuStyles();
@@ -262845,17 +263241,84 @@ function PointLayerEllipsisMenu(props) {
   const tooltipsVisibleId = $bdb11010cef70236$export$f680877a34711e37();
   const crosshairsVisibleId = $bdb11010cef70236$export$f680877a34711e37();
   const legendVisibleId = $bdb11010cef70236$export$f680877a34711e37();
-  return jsxRuntimeExports.jsxs(PopperMenu, { open: open2, setOpen, buttonIcon: jsxRuntimeExports.jsx(MoreVertIcon, {}), buttonClassName: menuClasses.imageLayerMenuButton, containerClassName: menuClasses.imageLayerPopperContainer, withPaper: true, "aria-label": "Open point layer options menu", children: [jsxRuntimeExports.jsxs(MenuItem, { dense: true, disableGutters: true, children: [jsxRuntimeExports.jsx("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: quantitativeColormapId, children: "Color Encoding: " }), jsxRuntimeExports.jsxs(NativeSelect, { onChange: (e3) => setObsColorEncoding(e3.target.value), value: obsColorEncoding, inputProps: { id: quantitativeColormapId, "aria-label": "Color encoding selector" }, classes: { root: selectClasses2.selectRoot }, children: [jsxRuntimeExports.jsx("option", { value: "spatialLayerColor", children: "Static Color" }), jsxRuntimeExports.jsx("option", { value: "obsLabels", children: "Label Value" })] })] }), jsxRuntimeExports.jsxs(MenuItem, { dense: true, disableGutters: true, children: [jsxRuntimeExports.jsx("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: colormapRangeId, children: "Colormap Range: " }), jsxRuntimeExports.jsx(Slider, { disabled: obsColorEncoding !== "geneSelection", value: featureValueColormapRange, min: 0, max: 1, step: 0.01, onChange: (e3, v) => setFeatureValueColormapRange(v), className: menuClasses.menuItemSlider, orientation: "horizontal", id: colormapRangeId, getAriaLabel: (index2) => index2 === 0 ? "Low value colormap range slider" : "High value colormap range slider" })] }), jsxRuntimeExports.jsxs(MenuItem, { dense: true, disableGutters: true, children: [jsxRuntimeExports.jsx("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: tooltipsVisibleId, children: "Tooltips Visible: " }), jsxRuntimeExports.jsx(Checkbox$1, { color: "primary", className: menuClasses.menuItemCheckbox, checked: tooltipsVisible, onChange: (e3, v) => setTooltipsVisible(v), slotProps: { input: { id: tooltipsVisibleId, "aria-label": "Toggle tooltip visibility" } } })] }), jsxRuntimeExports.jsxs(MenuItem, { dense: true, disableGutters: true, children: [jsxRuntimeExports.jsx("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: crosshairsVisibleId, children: "Tooltip Crosshairs Visible: " }), jsxRuntimeExports.jsx(Checkbox$1, { color: "primary", className: menuClasses.menuItemCheckbox, checked: tooltipCrosshairsVisible, onChange: (e3, v) => setTooltipCrosshairsVisible(v), slotProps: { input: { id: crosshairsVisibleId, "aria-label": "Toggle tooltip crosshair visibility" } } })] }), jsxRuntimeExports.jsxs(MenuItem, { dense: true, disableGutters: true, children: [jsxRuntimeExports.jsx("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: legendVisibleId, children: "Legend Visible: " }), jsxRuntimeExports.jsx(Checkbox$1, { color: "primary", className: menuClasses.menuItemCheckbox, checked: legendVisible, onChange: (e3, v) => setLegendVisible(v), slotProps: { input: { id: legendVisibleId, "aria-label": "Toggle legend visibility" } } })] })] });
+  const featureFilterModeId = $bdb11010cef70236$export$f680877a34711e37();
+  return jsxRuntimeExports.jsxs(PopperMenu, { open: open2, setOpen, buttonIcon: jsxRuntimeExports.jsx(MoreVertIcon, {}), buttonClassName: menuClasses.imageLayerMenuButton, containerClassName: menuClasses.imageLayerPopperContainer, withPaper: true, "aria-label": "Open point layer options menu", children: [jsxRuntimeExports.jsxs(MenuItem, { dense: true, disableGutters: true, children: [jsxRuntimeExports.jsx("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: quantitativeColormapId, children: "Color Encoding: " }), jsxRuntimeExports.jsxs(NativeSelect, { onChange: (e3) => setObsColorEncoding(e3.target.value), value: obsColorEncoding, inputProps: { id: quantitativeColormapId, "aria-label": "Color encoding selector" }, classes: { root: selectClasses2.selectRoot }, children: [jsxRuntimeExports.jsx("option", { value: "spatialLayerColor", children: "Static Color" }), jsxRuntimeExports.jsx("option", { value: "geneSelection", children: "Feature Color" }), jsxRuntimeExports.jsx("option", { value: "randomByFeature", children: "Random Color per Feature" }), jsxRuntimeExports.jsx("option", { value: "random", children: "Random Color per Point" })] })] }), jsxRuntimeExports.jsxs(MenuItem, { dense: true, disableGutters: true, children: [jsxRuntimeExports.jsx("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: featureFilterModeId, children: "Filter to Feature Selection: " }), jsxRuntimeExports.jsx(Checkbox$1, { color: "primary", className: menuClasses.menuItemCheckbox, checked: featureFilterMode === "featureSelection", onChange: (e3, v) => setFeatureFilterMode(v ? "featureSelection" : null), slotProps: { input: { id: featureFilterModeId, "aria-label": "Toggle feature filter mode" } } })] }), jsxRuntimeExports.jsxs(MenuItem, { dense: true, disableGutters: true, children: [jsxRuntimeExports.jsx("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: colormapRangeId, children: "Colormap Range: " }), jsxRuntimeExports.jsx(Slider, { disabled: obsColorEncoding !== "geneSelection", value: featureValueColormapRange, min: 0, max: 1, step: 0.01, onChange: (e3, v) => setFeatureValueColormapRange(v), className: menuClasses.menuItemSlider, orientation: "horizontal", id: colormapRangeId, getAriaLabel: (index2) => index2 === 0 ? "Low value colormap range slider" : "High value colormap range slider" })] }), jsxRuntimeExports.jsxs(MenuItem, { dense: true, disableGutters: true, children: [jsxRuntimeExports.jsx("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: tooltipsVisibleId, children: "Tooltips Visible: " }), jsxRuntimeExports.jsx(Checkbox$1, { color: "primary", className: menuClasses.menuItemCheckbox, checked: tooltipsVisible, onChange: (e3, v) => setTooltipsVisible(v), slotProps: { input: { id: tooltipsVisibleId, "aria-label": "Toggle tooltip visibility" } } })] }), jsxRuntimeExports.jsxs(MenuItem, { dense: true, disableGutters: true, children: [jsxRuntimeExports.jsx("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: crosshairsVisibleId, children: "Tooltip Crosshairs Visible: " }), jsxRuntimeExports.jsx(Checkbox$1, { color: "primary", className: menuClasses.menuItemCheckbox, checked: tooltipCrosshairsVisible, onChange: (e3, v) => setTooltipCrosshairsVisible(v), slotProps: { input: { id: crosshairsVisibleId, "aria-label": "Toggle tooltip crosshair visibility" } } })] }), jsxRuntimeExports.jsxs(MenuItem, { dense: true, disableGutters: true, children: [jsxRuntimeExports.jsx("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: legendVisibleId, children: "Legend Visible: " }), jsxRuntimeExports.jsx(Checkbox$1, { color: "primary", className: menuClasses.menuItemCheckbox, checked: legendVisible, onChange: (e3, v) => setLegendVisible(v), slotProps: { input: { id: legendVisibleId, "aria-label": "Toggle legend visibility" } } })] })] });
 }
 function PointLayerController(props) {
-  const { theme, layerScope, layerCoordination, setLayerCoordination, palette = null } = props;
-  const { obsType, spatialLayerVisible: visible, spatialLayerOpacity: opacity2, obsColorEncoding, featureSelection, featureValueColormap, featureValueColormapRange, spatialLayerColor: color2, tooltipsVisible, tooltipCrosshairsVisible, legendVisible } = layerCoordination;
-  const { setSpatialLayerVisible: setVisible, setSpatialLayerOpacity: setOpacity2, setObsColorEncoding, setFeatureSelection, setFeatureValueColormap, setFeatureValueColormapRange, setSpatialLayerColor: setColor2, setTooltipsVisible, setTooltipCrosshairsVisible, setLegendVisible } = setLayerCoordination;
+  const { theme, layerScope, layerCoordination, setLayerCoordination, palette = null, pointMatrixIndicesData, tiledPointsLoadingProgress } = props;
+  const [open2, setOpen] = useState(false);
+  const loadingDoneFraction = useMemo$1(() => {
+    if (tiledPointsLoadingProgress && typeof tiledPointsLoadingProgress === "object") {
+      return 1 - Object.values(tiledPointsLoadingProgress).filter((status) => status === "loading").length / Object.values(tiledPointsLoadingProgress).length;
+    }
+    return 1;
+  }, [tiledPointsLoadingProgress]);
+  const { obsType, spatialLayerVisible: visible, spatialLayerOpacity: opacity2, obsColorEncoding, featureColor, featureFilterMode, featureSelection, featureValueColormap, featureValueColormapRange, spatialLayerColor, tooltipsVisible, tooltipCrosshairsVisible, legendVisible } = layerCoordination;
+  const { setSpatialLayerVisible: setVisible, setSpatialLayerOpacity: setOpacity2, setObsColorEncoding, setFeatureColor, setFeatureFilterMode, setFeatureSelection, setFeatureValueColormap, setFeatureValueColormapRange, setSpatialLayerColor, setTooltipsVisible, setTooltipCrosshairsVisible, setLegendVisible } = setLayerCoordination;
   const label2 = capitalize$3(obsType);
   const visibleSetting = typeof visible === "boolean" ? visible : true;
   const Visibility = useMemo$1(() => visibleSetting ? VisibilityIcon : VisibilityOffIcon, [visibleSetting]);
-  const isStaticColor = obsColorEncoding === "spatialLayerColor";
-  const isColormap = obsColorEncoding === "geneSelection";
+  const hasUnspecifiedFeatureColors = useMemo$1(() => {
+    if (Array.isArray(featureSelection)) {
+      if (Array.isArray(featureColor)) {
+        return featureSelection.some((featureName) => {
+          const colorForFeature = featureColor.find((fc) => fc.name === featureName);
+          return !colorForFeature;
+        });
+      }
+      return featureSelection.length > 0;
+    }
+    return true;
+  }, [featureColor, featureSelection]);
+  const isStaticColor = obsColorEncoding === "spatialLayerColor" || obsColorEncoding === "geneSelection";
+  const showStaticColor = obsColorEncoding === "spatialLayerColor" || obsColorEncoding === "geneSelection" && hasUnspecifiedFeatureColors;
+  const isColormap = false;
+  const hasSingleSelectedFeature = obsColorEncoding === "geneSelection" && Array.isArray(featureSelection) && featureSelection.length === 1;
+  const color2 = useMemo$1(() => {
+    if (showStaticColor) {
+      return spatialLayerColor;
+    }
+    if (hasSingleSelectedFeature) {
+      const selectedFeatureColor = featureColor?.find((fc) => fc.name === featureSelection[0])?.color;
+      if (selectedFeatureColor) {
+        return selectedFeatureColor;
+      }
+    }
+    return null;
+  }, [
+    hasSingleSelectedFeature,
+    spatialLayerColor,
+    featureColor,
+    featureSelection,
+    showStaticColor
+  ]);
+  const setColor2 = useCallback((newColor) => {
+    if (showStaticColor) {
+      setSpatialLayerColor(newColor);
+    } else if (hasSingleSelectedFeature) {
+      const featureColorIndex = featureColor?.findIndex((fc) => fc.name === featureSelection[0]);
+      if (featureColorIndex !== void 0 && featureColorIndex >= 0) {
+        const newFeatureColor = [...featureColor];
+        newFeatureColor[featureColorIndex] = {
+          name: featureSelection[0],
+          color: newColor
+        };
+        setFeatureColor(newFeatureColor);
+      } else {
+        setFeatureColor([
+          ...featureColor,
+          { name: featureSelection[0], color: newColor }
+        ]);
+      }
+    }
+  }, [
+    hasSingleSelectedFeature,
+    setSpatialLayerColor,
+    featureColor,
+    setFeatureColor,
+    featureSelection,
+    showStaticColor
+  ]);
   const { classes: classes2 } = useStyles$e();
   const { classes: lcClasses } = useControllerSectionStyles();
   const { classes: menuClasses } = useEllipsisMenuStyles();
@@ -262864,7 +263327,10 @@ function PointLayerController(props) {
     setVisible(nextVisible);
   }, [visible, setVisible]);
   const handleOpacityChange = useCallback((e3, v) => setOpacity2(v), [setOpacity2]);
-  return jsxRuntimeExports.jsx(Grid$1, { className: lcClasses.layerControllerGrid, children: jsxRuntimeExports.jsx(Paper, { elevation: 4, className: lcClasses.layerControllerRoot, children: jsxRuntimeExports.jsxs(Grid$1, { container: true, direction: "row", justifyContent: "space-between", children: [jsxRuntimeExports.jsx(Grid$1, { size: 1, children: jsxRuntimeExports.jsx(Button, { onClick: handleVisibleChange, className: menuClasses.imageLayerVisibleButton, "aria-label": "Toggle layer visibility", children: jsxRuntimeExports.jsx(Visibility, {}) }) }), jsxRuntimeExports.jsx(Grid$1, { size: 1, children: jsxRuntimeExports.jsx(ChannelColorPickerMenu, { theme, color: color2, setColor: setColor2, palette, isStaticColor, isColormap, featureValueColormap, visible }) }), jsxRuntimeExports.jsx(Grid$1, { size: 6, children: jsxRuntimeExports.jsx(Typography, { className: menuClasses.imageLayerName, children: label2 }) }), jsxRuntimeExports.jsx(Grid$1, { size: 2, children: jsxRuntimeExports.jsx(Slider, { value: opacity2, min: 0, max: 1, step: 1e-3, onChange: handleOpacityChange, className: menuClasses.imageLayerOpacitySlider, orientation: "horizontal", "aria-label": `Adjust opacity for layer ${label2}` }) }), jsxRuntimeExports.jsx(Grid$1, { size: 1, children: jsxRuntimeExports.jsx(PointLayerEllipsisMenu, { featureSelection, obsColorEncoding, setObsColorEncoding, featureValueColormapRange, setFeatureValueColormapRange, tooltipsVisible, setTooltipsVisible, tooltipCrosshairsVisible, setTooltipCrosshairsVisible, legendVisible, setLegendVisible }) }), jsxRuntimeExports.jsx(Grid$1, { size: 1, children: jsxRuntimeExports.jsx(SvgPoints, { className: classes2.layerTypePointIcon }) })] }) }) });
+  useCallback(() => setOpen((prev2) => !prev2), []);
+  const [coloringTabIndex, setColoringTabIndex] = useState(0);
+  const { featureIndex } = pointMatrixIndicesData || {};
+  return jsxRuntimeExports.jsx(Grid$1, { className: lcClasses.layerControllerGrid, children: jsxRuntimeExports.jsxs(Paper, { elevation: 4, className: lcClasses.layerControllerRoot, children: [jsxRuntimeExports.jsxs(Grid$1, { container: true, direction: "row", justifyContent: "space-between", children: [jsxRuntimeExports.jsx(Grid$1, { size: 1, children: jsxRuntimeExports.jsx(Button, { onClick: handleVisibleChange, className: menuClasses.imageLayerVisibleButton, "aria-label": "Toggle layer visibility", children: jsxRuntimeExports.jsx(Visibility, {}) }) }), jsxRuntimeExports.jsx(Grid$1, { size: 1, children: jsxRuntimeExports.jsx(ChannelColorPickerMenu, { theme, color: color2, setColor: setColor2, palette, isStaticColor, isColormap, featureValueColormap, visible }) }), jsxRuntimeExports.jsx(Grid$1, { size: 6, children: jsxRuntimeExports.jsx(Typography, { className: menuClasses.imageLayerName, children: label2 }) }), jsxRuntimeExports.jsx(Grid$1, { size: 2, children: jsxRuntimeExports.jsx(Slider, { value: opacity2, min: 0, max: 1, step: 1e-3, onChange: handleOpacityChange, className: menuClasses.imageLayerOpacitySlider, orientation: "horizontal", "aria-label": `Adjust opacity for layer ${label2}` }) }), jsxRuntimeExports.jsx(Grid$1, { size: 1, children: jsxRuntimeExports.jsx(PointLayerEllipsisMenu, { featureSelection, obsColorEncoding, setObsColorEncoding, featureValueColormapRange, setFeatureValueColormapRange, tooltipsVisible, setTooltipsVisible, tooltipCrosshairsVisible, setTooltipCrosshairsVisible, legendVisible, setLegendVisible, featureFilterMode, setFeatureFilterMode }) }), jsxRuntimeExports.jsxs(Grid$1, { size: 1, container: true, direction: "row", children: [jsxRuntimeExports.jsx(SvgPoints, { className: classes2.layerTypePointIcon }), null] })] }), loadingDoneFraction < 1 ? jsxRuntimeExports.jsx(Grid$1, { size: 12, container: true, direction: "column", justifyContent: "space-between", className: classes2.pointFeatureControllerGrid, children: jsxRuntimeExports.jsx(LinearProgress, { variant: loadingDoneFraction === 0 ? "indeterminate" : "determinate", value: loadingDoneFraction * 100 }) }) : null, null] }) });
 }
 const useStyles$d = makeStyles()(() => ({
   layerTypeSegmentationIcon: {
@@ -264395,7 +264861,7 @@ function ImageLayerEllipsisMenu(props) {
   const { classes: selectClasses2 } = useSelectStyles();
   const { classes: menuClasses } = useEllipsisMenuStyles();
   const [localLodSliderValue, setLocalLodSliderValue] = useState(convertLodFactorToLogarithmicSliderValue(spatialLodFactor || 1));
-  React__default.useEffect(() => {
+  useEffect(() => {
     setLocalLodSliderValue(convertLodFactorToLogarithmicSliderValue(spatialLodFactor || 1));
   }, [spatialLodFactor]);
   const is3dMode = spatialRenderingMode === "3D";
@@ -264531,7 +264997,7 @@ function GlobalDimensionSlider(props) {
   return jsxRuntimeExports.jsx(Grid$1, { className: lcClasses.layerControllerGrid, children: jsxRuntimeExports.jsx(Paper, { elevation: 4, className: lcClasses.layerControllerRoot, children: jsxRuntimeExports.jsxs(Grid$1, { container: true, direction: "row", justifyContent: "space-between", children: [jsxRuntimeExports.jsx(Grid$1, { size: 1, children: jsxRuntimeExports.jsx(SvgDimensions, { className: classes2.dimensionsIcon }) }), jsxRuntimeExports.jsx(Grid$1, { size: 1, children: jsxRuntimeExports.jsx(Typography, { className: classes2.dimensionLabel, children: label2 }) }), jsxRuntimeExports.jsx(Grid$1, { size: 8, children: jsxRuntimeExports.jsx(Slider, { value: targetValue, min: min2, max: max2, step: 1, onChange: (e3, v) => setTargetValue(v), className: classes2.dimensionSlider, valueLabelDisplay: "auto", orientation: "horizontal", disabled: spatialRenderingMode === "3D", "aria-label": `${label2}-slice slider` }) }), jsxRuntimeExports.jsx(Grid$1, { size: 2, children: isForZ ? jsxRuntimeExports.jsx(FormGroup, { row: true, className: classes2.switchFormGroup, children: jsxRuntimeExports.jsx(FormControlLabel$1, { control: jsxRuntimeExports.jsx(Switch, { color: "primary", checked: spatialRenderingMode === "3D", onChange: handleRenderingModeChange, name: "is3dMode" }), label: "3D" }) }) : null })] }) }) });
 }
 function LayerController(props) {
-  const { theme, coordinationScopesRaw, segmentationLayerScopes, segmentationLayerCoordination, segmentationChannelScopesByLayer, segmentationChannelCoordination, images, imageLayerScopes, imageLayerCoordination, targetT, targetZ, setTargetT, setTargetZ, spatialRenderingMode, setSpatialRenderingMode, imageChannelScopesByLayer, imageChannelCoordination, spotLayerScopes, spotLayerCoordination, pointLayerScopes, pointLayerCoordination, volumeLoadingStatus } = props;
+  const { theme, coordinationScopesRaw, segmentationLayerScopes, segmentationLayerCoordination, segmentationChannelScopesByLayer, segmentationChannelCoordination, images, imageLayerScopes, imageLayerCoordination, targetT, targetZ, setTargetT, setTargetZ, spatialRenderingMode, setSpatialRenderingMode, imageChannelScopesByLayer, imageChannelCoordination, spotLayerScopes, spotLayerCoordination, pointLayerScopes, pointLayerCoordination, pointMultiIndicesData, volumeLoadingStatus, tiledPointsLoadingProgress } = props;
   const anyLayerHasT = Object.values(images || {}).some((image2) => image2?.image?.instance.hasTStack());
   const anyLayerHasZ = Object.values(images || {}).some((image2) => image2?.image?.instance.hasZStack());
   const maxT = Object.values(images || {}).reduce((a2, h2) => Math.max(a2, h2?.image?.instance.getNumT()), 1) - 1;
@@ -264540,7 +265006,7 @@ function LayerController(props) {
   const reversedSegmentationLayerScopes = useMemo$1(() => [...segmentationLayerScopes || []].reverse(), [segmentationLayerScopes]);
   const reversedSpotLayerScopes = useMemo$1(() => [...spotLayerScopes || []].reverse(), [spotLayerScopes]);
   const reversedPointLayerScopes = useMemo$1(() => [...pointLayerScopes || []].reverse(), [pointLayerScopes]);
-  return jsxRuntimeExports.jsxs("div", { children: [anyLayerHasZ ? jsxRuntimeExports.jsx(GlobalDimensionSlider, { label: "Z", targetValue: targetZ, setTargetValue: setTargetZ, max: maxZ, spatialRenderingMode, setSpatialRenderingMode }) : null, anyLayerHasT ? jsxRuntimeExports.jsx(GlobalDimensionSlider, { label: "T", targetValue: targetT, setTargetValue: setTargetT, max: maxT }) : null, pointLayerScopes && reversedPointLayerScopes.map((layerScope) => jsxRuntimeExports.jsx(PointLayerController, { theme, layerScope, layerCoordination: pointLayerCoordination[0][layerScope], setLayerCoordination: pointLayerCoordination[1][layerScope] }, layerScope)), spotLayerScopes && reversedSpotLayerScopes.map((layerScope) => jsxRuntimeExports.jsx(SpotLayerController, { theme, layerScope, layerCoordination: spotLayerCoordination[0][layerScope], setLayerCoordination: spotLayerCoordination[1][layerScope] }, layerScope)), segmentationLayerScopes && reversedSegmentationLayerScopes.map((layerScope) => jsxRuntimeExports.jsx(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) => jsxRuntimeExports.jsx(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))] });
+  return jsxRuntimeExports.jsxs("div", { children: [anyLayerHasZ ? jsxRuntimeExports.jsx(GlobalDimensionSlider, { label: "Z", targetValue: targetZ, setTargetValue: setTargetZ, max: maxZ, spatialRenderingMode, setSpatialRenderingMode }) : null, anyLayerHasT ? jsxRuntimeExports.jsx(GlobalDimensionSlider, { label: "T", targetValue: targetT, setTargetValue: setTargetT, max: maxT }) : null, pointLayerScopes && reversedPointLayerScopes.map((layerScope) => jsxRuntimeExports.jsx(PointLayerController, { theme, layerScope, layerCoordination: pointLayerCoordination[0][layerScope], setLayerCoordination: pointLayerCoordination[1][layerScope], pointMatrixIndicesData: pointMultiIndicesData?.[layerScope], tiledPointsLoadingProgress }, layerScope)), spotLayerScopes && reversedSpotLayerScopes.map((layerScope) => jsxRuntimeExports.jsx(SpotLayerController, { theme, layerScope, layerCoordination: spotLayerCoordination[0][layerScope], setLayerCoordination: spotLayerCoordination[1][layerScope] }, layerScope)), segmentationLayerScopes && reversedSegmentationLayerScopes.map((layerScope) => jsxRuntimeExports.jsx(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) => jsxRuntimeExports.jsx(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 } = props;
@@ -264624,6 +265090,8 @@ function LayerControllerSubscriber(props) {
     CoordinationType$1.SPATIAL_LAYER_OPACITY,
     CoordinationType$1.SPATIAL_SPOT_RADIUS,
     CoordinationType$1.OBS_COLOR_ENCODING,
+    CoordinationType$1.FEATURE_COLOR,
+    CoordinationType$1.FEATURE_FILTER_MODE,
     CoordinationType$1.FEATURE_SELECTION,
     CoordinationType$1.FEATURE_VALUE_COLORMAP,
     CoordinationType$1.FEATURE_VALUE_COLORMAP_RANGE,
@@ -264632,7 +265100,10 @@ function LayerControllerSubscriber(props) {
     CoordinationType$1.TOOLTIP_CROSSHAIRS_VISIBLE,
     CoordinationType$1.LEGEND_VISIBLE
   ], coordinationScopes, coordinationScopesBy, CoordinationType$1.POINT_LAYER);
-  const [{ volumeLoadingProgress: volumeLoadingStatus }] = useAuxiliaryCoordination(["spatialAcceleratedVolumeLoadingProgress"], coordinationScopes);
+  const [{ volumeLoadingProgress: volumeLoadingStatus, tiledPointsLoadingProgress }] = useAuxiliaryCoordination([
+    "spatialAcceleratedVolumeLoadingProgress",
+    "spatialTiledPointsLoadingProgress"
+  ], coordinationScopes);
   const [spatialLayout] = useComponentLayout("spatial", ["spatialImageLayer"], coordinationScopes);
   const layerControllerRef = useRef();
   const [componentWidth, componentHeight] = useClosestVitessceContainerSize(layerControllerRef);
@@ -264641,19 +265112,22 @@ function LayerControllerSubscriber(props) {
   const [imageData, imageDataStatus, imageUrls, imageErrors] = useMultiImages(coordinationScopes, coordinationScopesBy, loaders, dataset, mergeCoordination, uuid2);
   const [obsSpotsData, obsSpotsDataStatus, obsSpotsUrls, obsSpotsErrors] = useMultiObsSpots(coordinationScopes, coordinationScopesBy, loaders, dataset, mergeCoordination, uuid2);
   const [obsPointsData, obsPointsDataStatus, obsPointsUrls, obsPointsErrors] = useMultiObsPoints(coordinationScopes, coordinationScopesBy, loaders, dataset, mergeCoordination, uuid2);
+  const [pointMultiIndicesData, pointMultiIndicesDataStatus, pointMultiIndicesDataErrors] = usePointMultiObsFeatureMatrixIndices(coordinationScopes, coordinationScopesBy, loaders, dataset);
   const errors = [
     ...obsSegmentationsErrors,
     ...imageErrors,
     ...obsSpotsErrors,
-    ...obsPointsErrors
+    ...obsPointsErrors,
+    ...pointMultiIndicesDataErrors
   ];
   const isReady = useReady([
     obsSpotsDataStatus,
     obsPointsDataStatus,
     obsSegmentationsDataStatus,
-    imageDataStatus
+    imageDataStatus,
+    pointMultiIndicesDataStatus
   ]);
-  return jsxRuntimeExports.jsx(TitleInfo, { title: title2, isScroll: true, closeButtonVisible, downloadButtonVisible, removeGridComponent, theme, isReady, errors, children: jsxRuntimeExports.jsx(LayerController, { theme, coordinationScopesRaw, segmentationLayerScopes, segmentationLayerCoordination, segmentationChannelScopesByLayer, segmentationChannelCoordination, images: imageData, imageLayerScopes, imageLayerCoordination, targetT, targetZ, setTargetT, setTargetZ, spatialRenderingMode, setSpatialRenderingMode, imageChannelScopesByLayer, imageChannelCoordination, spotLayerScopes, spotLayerCoordination, pointLayerScopes, pointLayerCoordination, volumeLoadingStatus }) });
+  return jsxRuntimeExports.jsx(TitleInfo, { title: title2, isScroll: true, closeButtonVisible, downloadButtonVisible, removeGridComponent, theme, isReady, errors, children: jsxRuntimeExports.jsx(LayerController, { theme, coordinationScopesRaw, segmentationLayerScopes, segmentationLayerCoordination, segmentationChannelScopesByLayer, segmentationChannelCoordination, images: imageData, imageLayerScopes, imageLayerCoordination, targetT, targetZ, setTargetT, setTargetZ, spatialRenderingMode, setSpatialRenderingMode, imageChannelScopesByLayer, imageChannelCoordination, spotLayerScopes, spotLayerCoordination, pointLayerScopes, pointLayerCoordination, pointMultiIndicesData, volumeLoadingStatus, tiledPointsLoadingProgress }) });
 }
 const isIterable$2 = (obj) => Symbol.iterator in obj;
 const hasIterableEntries = (value2) => (
@@ -266568,7 +267042,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-CtfTtjGe.js");
+  const { HiGlassComponent } = await import("./higlass-Chx9S58D.js");
   return { default: HiGlassComponent };
 });
 const HG_SIZE = 800;
@@ -269515,7 +269989,7 @@ function NeuroglancerGlobalStyles(props) {
   const { classes: classes2 } = props;
   return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(GlobalStyles$3, { styles: globalNeuroglancerCss }), jsxRuntimeExports.jsx(ScopedGlobalStyles, { styles: globalNeuroglancerStyles, parentClassName: classes2.neuroglancerWrapper })] });
 }
-const LazyReactNeuroglancer = React__default.lazy(() => import("./ReactNeuroglancer-D9Izf3YW.js"));
+const LazyReactNeuroglancer = React__default.lazy(() => import("./ReactNeuroglancer-rd4zjvRk.js"));
 function createWorker() {
   return new WorkerFactory();
 }
@@ -290689,7 +291163,7 @@ function cureLocalIntersections(start2, triangles, dim) {
   let p = start2;
   do {
     const a2 = p.prev, b2 = p.next.next;
-    if (!equals$1(a2, b2) && intersects$2(a2, p, p.next, b2) && locallyInside(a2, b2) && locallyInside(b2, a2)) {
+    if (!equals$1(a2, b2) && intersects$3(a2, p, p.next, b2) && locallyInside(a2, b2) && locallyInside(b2, a2)) {
       triangles.push(a2.i / dim | 0);
       triangles.push(p.i / dim | 0);
       triangles.push(b2.i / dim | 0);
@@ -290867,7 +291341,7 @@ function area$3(p, q, r3) {
 function equals$1(p1, p2) {
   return p1.x === p2.x && p1.y === p2.y;
 }
-function intersects$2(p1, q1, p2, q2) {
+function intersects$3(p1, q1, p2, q2) {
   const o1 = sign$2(area$3(p1, q1, p2));
   const o2 = sign$2(area$3(p1, q1, q2));
   const o3 = sign$2(area$3(p2, q2, p1));
@@ -290888,7 +291362,7 @@ function sign$2(num) {
 function intersectsPolygon(a2, b2) {
   let p = a2;
   do {
-    if (p.i !== a2.i && p.next.i !== a2.i && p.i !== b2.i && p.next.i !== b2.i && intersects$2(p, p.next, a2, b2)) return true;
+    if (p.i !== a2.i && p.next.i !== a2.i && p.i !== b2.i && p.next.i !== b2.i && intersects$3(p, p.next, a2, b2)) return true;
     p = p.next;
   } while (p !== a2);
   return false;
@@ -319899,7 +320373,7 @@ function place(b2, a2, c2) {
     c2.y = a2.y;
   }
 }
-function intersects$1(a2, b2) {
+function intersects$2(a2, b2) {
   var dr = a2.r + b2.r - 1e-6, dx = b2.x - a2.x, dy = b2.y - a2.y;
   return dr > 0 && dr * dr > dx * dx + dy * dy;
 }
@@ -319929,13 +320403,13 @@ function packSiblingsRandom(circles, random2) {
     j = b2.next, k = a2.previous, sj = b2._.r, sk = a2._.r;
     do {
       if (sj <= sk) {
-        if (intersects$1(j._, c2._)) {
+        if (intersects$2(j._, c2._)) {
           b2 = j, a2.next = b2, b2.previous = a2, --i2;
           continue pack;
         }
         sj += j._.r, j = j.next;
       } else {
-        if (intersects$1(k._, c2._)) {
+        if (intersects$2(k._, c2._)) {
           a2 = k, a2.next = b2, b2.previous = a2, --i2;
           continue pack;
         }
@@ -354680,7 +355154,7 @@ class ObsPointsCsvLoader extends CsvLoader {
       data: [obsLocationsX, obsLocationsY],
       shape: [2, obsLocationsX.length]
     };
-    this.cachedResult = { obsIndex, obsPoints };
+    this.cachedResult = { obsIndex, obsPoints, obsPointsTilingType: "full" };
     return this.cachedResult;
   }
   async load() {
@@ -356312,7 +356786,7 @@ class ObsPointsAnndataLoader extends AbstractTwoStepLoader {
       this.dataSource.loadObsIndex(path2),
       this.loadPoints()
     ]);
-    return new LoaderResult({ obsIndex, obsPoints }, null, coordinationValues);
+    return new LoaderResult({ obsIndex, obsPoints, obsPointsTilingType: "full" }, null, coordinationValues);
   }
 }
 class ObsLocationsAnndataLoader extends AbstractTwoStepLoader {
@@ -357929,6 +358403,17 @@ class SpatialDataObsPointsLoader extends AbstractTwoStepLoader {
     this.locations = locations;
     return this.locations;
   }
+  async loadPointsInRect(bounds2, signal) {
+    const { path: path2 } = this.options;
+    let locations;
+    const formatVersion = await this.dataSource.getPointsFormatVersion(path2);
+    if (formatVersion === "0.1") {
+      locations = await this.dataSource.loadPointsInRect(path2, bounds2, signal);
+    } else {
+      throw new UnknownSpatialDataFormatError("Only points format version 0.1 is supported.");
+    }
+    return locations;
+  }
   async loadObsIndex() {
     const { tablePath, path: path2 } = this.options;
     if (tablePath) {
@@ -357941,11 +358426,26 @@ class SpatialDataObsPointsLoader extends AbstractTwoStepLoader {
     }
     return null;
   }
+  async supportsTiling() {
+    const { path: path2 } = this.options;
+    const [formatVersion, zattrs, hasRequiredColumnsAndRowGroupSize] = await Promise.all([
+      // Check the points format version.
+      this.dataSource.getPointsFormatVersion(path2),
+      // Check for the presence of bounding_box metadata.
+      this.dataSource.loadSpatialDataElementAttrs(path2),
+      // Check the size of parquet row groups,
+      // and for the presence of morton_code_2d and feature_index columns.
+      this.dataSource.supportsLoadPointsInRect(path2)
+    ]);
+    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;
+  }
   async load() {
-    const [obsIndex, obsPoints, modelMatrix2] = await Promise.all([
-      this.loadObsIndex(),
-      this.loadPoints(),
-      this.loadModelMatrix()
+    const [modelMatrix2, supportsTiling] = await Promise.all([
+      this.loadModelMatrix(),
+      this.supportsTiling()
     ]);
     const coordinationValues = {
       pointLayer: CL({
@@ -357961,7 +358461,36 @@ class SpatialDataObsPointsLoader extends AbstractTwoStepLoader {
         // additionalObsSets: null,
       })
     };
-    return new LoaderResult({ obsIndex, obsPoints, obsPointsModelMatrix: modelMatrix2 }, null, coordinationValues);
+    let obsIndex = null;
+    let obsPoints = null;
+    const featureIndices = null;
+    if (!supportsTiling) {
+      [obsIndex, obsPoints] = await Promise.all([
+        this.loadObsIndex(),
+        this.loadPoints()
+      ]);
+    }
+    return new LoaderResult({
+      /* obsIndex: ["1"], // TEMP
+      obsPoints: { // TEMP
+        shape: [2, 1],
+        data: [[0], [0]],
+      }, */
+      // These will be null if tiling is supported.
+      obsIndex,
+      obsPoints,
+      featureIndices,
+      obsPointsModelMatrix: modelMatrix2,
+      // Return 'tiled' if the morton_code_2d column
+      // and bounding_box metadata are present,
+      // and the row group size is small enough.
+      // Otherwise, return 'full'.
+      obsPointsTilingType: supportsTiling ? "tiled" : "full",
+      // TEMPORARY: probably makes more sense to pass the loader instance all the way down.
+      // Caller can then decide whether to use loader.load vs. loader.loadPointsInRect.
+      // May need another function such as loader.supportsPointInRect() true/false.
+      loadPointsInRect: this.loadPointsInRect.bind(this)
+    }, null, coordinationValues);
   }
 }
 class SpatialDataObsSetsLoader extends ObsSetsAnndataLoader {
@@ -367356,13 +367885,470 @@ function tableFromIPC(input) {
   }
   return new Table(reader.readAll());
 }
+const MORTON_CODE_NUM_BITS = 32;
+const MORTON_CODE_VALUE_MAX = 2 ** (MORTON_CODE_NUM_BITS / 2) - 1;
+function origCoordToNormCoord(origCoord, origXMin, origXMax, origYMin, origYMax) {
+  const [origX, origY] = origCoord;
+  const origXRange = origXMax - origXMin;
+  const origYRange = origYMax - origYMin;
+  return [
+    // Clamp to zero at low end, since using unsigned ints.
+    Math.max(Math.floor((origX - origXMin) / origXRange * MORTON_CODE_VALUE_MAX), 0),
+    Math.max(Math.floor((origY - origYMin) / origYRange * MORTON_CODE_VALUE_MAX), 0)
+  ];
+}
+function intersects$1(ax0, ay0, ax1, ay1, bx0, by0, bx1, by1) {
+  return !(ax1 < bx0 || bx1 < ax0 || ay1 < by0 || by1 < ay0);
+}
+function contained(ix0, iy0, ix1, iy1, ox0, oy0, ox1, oy1) {
+  return ox0 <= ix0 && ix0 <= ix1 && ix1 <= ox1 && (oy0 <= iy0 && iy0 <= iy1 && iy1 <= oy1);
+}
+function pointInside(x2, y2, rx0, ry0, rx1, ry1) {
+  return rx0 <= x2 && x2 <= rx1 && (ry0 <= y2 && y2 <= ry1);
+}
+function cellRange(prefix2, level, bits) {
+  const shift2 = 2 * (bits - level);
+  const power = 2 ** shift2;
+  const lo = prefix2 * power;
+  const hi = (prefix2 + 1) * power - 1;
+  return [lo, hi];
+}
+function mergeAdjacent(intervals2) {
+  if (intervals2.length === 0) {
+    return [];
+  }
+  intervals2.sort((a2, b2) => a2[0] - b2[0]);
+  const merged = [intervals2[0]];
+  for (let i2 = 1; i2 < intervals2.length; i2++) {
+    const [lo, hi] = intervals2[i2];
+    const [mlo, mhi] = merged[merged.length - 1];
+    if (lo <= mhi + 1) {
+      merged[merged.length - 1] = [mlo, Math.max(mhi, hi)];
+    } else {
+      merged.push([lo, hi]);
+    }
+  }
+  return merged;
+}
+function zcoverRectangle(rx0, ry0, rx1, ry1, bits, stopLevel = null, merge2 = true) {
+  const maxCoord = (1 << bits) - 1;
+  if (!(rx0 >= 0 && rx0 <= rx1 && rx1 <= maxCoord && ry0 >= 0 && ry0 <= ry1 && ry1 <= maxCoord)) {
+    throw new Error("Rectangle out of bounds for given bits.");
+  }
+  const intervals2 = [];
+  const stack2 = [[0, 0, 0, 0, maxCoord, maxCoord]];
+  while (stack2.length > 0) {
+    const [prefix2, level, xmin, ymin, xmax, ymax] = stack2.pop();
+    if (!intersects$1(xmin, ymin, xmax, ymax, rx0, ry0, rx1, ry1)) {
+      continue;
+    }
+    if (stopLevel !== null && level === stopLevel) {
+      intervals2.push(cellRange(prefix2, level, bits));
+      continue;
+    }
+    if (contained(xmin, ymin, xmax, ymax, rx0, ry0, rx1, ry1)) {
+      intervals2.push(cellRange(prefix2, level, bits));
+      continue;
+    }
+    if (level === bits) {
+      if (pointInside(xmin, ymin, rx0, ry0, rx1, ry1)) {
+        intervals2.push(cellRange(prefix2, level, bits));
+      }
+      continue;
+    }
+    const midx = Math.floor((xmin + xmax) / 2);
+    const midy = Math.floor((ymin + ymax) / 2);
+    stack2.push([prefix2 << 2 | 0, level + 1, xmin, ymin, midx, midy]);
+    stack2.push([prefix2 << 2 | 1, level + 1, midx + 1, ymin, xmax, midy]);
+    stack2.push([prefix2 << 2 | 2, level + 1, xmin, midy + 1, midx, ymax]);
+    stack2.push([prefix2 << 2 | 3, level + 1, midx + 1, midy + 1, xmax, ymax]);
+  }
+  return merge2 ? mergeAdjacent(intervals2) : intervals2;
+}
+function sdataMortonQueryRectAux(boundingBox, origRect) {
+  const xMin = boundingBox.x_min;
+  const xMax = boundingBox.x_max;
+  const yMin = boundingBox.y_min;
+  const yMax = boundingBox.y_max;
+  const normRect = [
+    origCoordToNormCoord(origRect[0], xMin, xMax, yMin, yMax),
+    origCoordToNormCoord(origRect[1], xMin, xMax, yMin, yMax)
+  ];
+  const mortonIntervals = zcoverRectangle(normRect[0][0], normRect[0][1], normRect[1][0], normRect[1][1], 16, null, true);
+  return mortonIntervals;
+}
 async function getParquetModule() {
   const module2 = await import(
     /* webpackIgnore: true */
-    "https://unpkg.com/parquet-wasm@0.6.1/esm/parquet_wasm.js"
+    "https://cdn.vitessce.io/parquet-wasm@2c23652/esm/parquet_wasm.js"
   );
   await module2.default();
-  return { readParquet: module2.readParquet, readSchema: module2.readSchema };
+  return {
+    readParquet: module2.readParquet,
+    readSchema: module2.readSchema,
+    readMetadata: module2.readMetadata,
+    // Added in fork
+    readParquetRowGroup: module2.readParquetRowGroup
+    // Added in fork
+  };
+}
+async function _getParquetModule({ queryClient }) {
+  return queryClient.fetchQuery({
+    queryKey: ["parquetModule"],
+    staleTime: Infinity,
+    queryFn: getParquetModule,
+    meta: { queryClient }
+  });
+}
+async function _loadParquetBytes({ queryClient, store }, parquetPath, rangeQuery = void 0, partIndex = void 0) {
+  return queryClient.fetchQuery({
+    queryKey: ["SpatialDataTableSource", "_loadParquetBytes", parquetPath, rangeQuery, partIndex],
+    staleTime: Infinity,
+    queryFn: async (ctx) => {
+      const store2 = ctx.meta?.store;
+      const rangeQuery2 = ctx.queryKey[3];
+      const { offset: offset2, length: length2, suffixLength } = rangeQuery2 || {};
+      let getter2 = (path2) => store2.get(path2);
+      if (rangeQuery2 !== void 0 && store2.getRange) {
+        if (suffixLength !== void 0) {
+          getter2 = (path2) => store2.getRange(path2, {
+            suffixLength
+          });
+        } else {
+          getter2 = (path2) => store2.getRange(path2, {
+            offset: offset2,
+            length: length2
+          });
+        }
+      }
+      let parquetBytes;
+      if (partIndex === void 0) {
+        parquetBytes = await getter2(`/${parquetPath}`);
+      }
+      if (!parquetBytes) {
+        const part0Path = `${parquetPath}/part.${partIndex ?? 0}.parquet`;
+        parquetBytes = await getter2(`/${part0Path}`);
+      }
+      return parquetBytes;
+    },
+    meta: { store }
+  });
+}
+async function _loadParquetSchemaBytes({ queryClient, store }, parquetPath, partIndex = void 0) {
+  return queryClient.fetchQuery({
+    queryKey: ["SpatialDataTableSource", "_loadParquetSchemaBytes", parquetPath, partIndex],
+    staleTime: Infinity,
+    queryFn: async (ctx) => {
+      const store2 = ctx.meta?.store;
+      if (store2.getRange) {
+        const TAIL_LENGTH = 8;
+        let partZeroPath = parquetPath;
+        let tailBytes = await store2.getRange(`/${partZeroPath}`, {
+          suffixLength: TAIL_LENGTH
+        });
+        if (!tailBytes) {
+          partZeroPath = `${parquetPath}/part.${partIndex ?? 0}.parquet`;
+          tailBytes = await store2.getRange(`/${partZeroPath}`, {
+            suffixLength: TAIL_LENGTH
+          });
+        }
+        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 magic = new TextDecoder().decode(tailBytes.slice(4, 8));
+        if (magic !== "PAR1") {
+          throw new Error("Invalid Parquet file: missing PAR1 magic number");
+        }
+        const footerBytes = await store2.getRange(`/${partZeroPath}`, {
+          suffixLength: footerLength + TAIL_LENGTH
+        });
+        if (!footerBytes || footerBytes.length !== footerLength + TAIL_LENGTH) {
+          throw new Error(`Failed to load parquet footer bytes for ${parquetPath}`);
+        }
+        return footerBytes;
+      }
+      return null;
+    },
+    meta: { queryClient, store }
+  });
+}
+async function _loadParquetMetadataByPart({ queryClient, store }, parquetPath) {
+  return queryClient.fetchQuery({
+    queryKey: ["SpatialDataTableSource", "_loadParquetMetadataByPart", parquetPath],
+    staleTime: Infinity,
+    queryFn: async (ctx) => {
+      const queryClient2 = (
+        /** @type {QueryClient} */
+        ctx.meta?.queryClient
+      );
+      const { readSchema, readMetadata } = await _getParquetModule({ queryClient: queryClient2 });
+      let partIndex = 0;
+      let numParts;
+      const allMetadata = [];
+      do {
+        try {
+          const schemaBytes = await _loadParquetSchemaBytes({ queryClient: queryClient2, store }, parquetPath, partIndex);
+          if (schemaBytes) {
+            const wasmSchema = readSchema(schemaBytes);
+            const arrowTableForSchema = tableFromIPC(wasmSchema.intoIPCStream());
+            const partMetadata = readMetadata(schemaBytes);
+            const partInfo = {
+              schema: arrowTableForSchema,
+              schemaBytes,
+              metadata: partMetadata
+            };
+            allMetadata.push(partInfo);
+            partIndex += 1;
+          }
+        } catch (error2) {
+          if (error2.message.includes("Failed to load parquet footerLength")) {
+            numParts = partIndex;
+          }
+        }
+      } while (numParts === void 0);
+      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;
+      }
+      const result = {
+        ...metadata2,
+        // TODO: extract metadata per part and rowGroup into plain objects that match the hyparquet parquetMetadata() return value?
+        // This will also make it easier to test.
+        parts: allMetadata
+      };
+      return result;
+    },
+    meta: { queryClient }
+  });
+}
+async function _loadParquetRowGroupByGroupIndex({ queryClient, store }, parquetPath, rowGroupIndex) {
+  return queryClient.fetchQuery({
+    queryKey: ["SpatialDataTableSource", "_loadParquetRowGroupByGroupIndex", parquetPath, rowGroupIndex],
+    staleTime: Infinity,
+    queryFn: async (ctx) => {
+      const queryClient2 = (
+        /** @type {QueryClient} */
+        ctx.meta?.queryClient
+      );
+      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.`);
+      }
+      let partIndex;
+      let cumulativeRowGroups = 0;
+      for (let i2 = 0; i2 < allMetadata.parts.length; i2++) {
+        const part = allMetadata.parts[i2];
+        const numRowGroupsInPart = part.metadata.numRowGroups();
+        if (rowGroupIndex < cumulativeRowGroups + numRowGroupsInPart) {
+          partIndex = i2;
+          break;
+        }
+        cumulativeRowGroups += numRowGroupsInPart;
+      }
+      if (partIndex === void 0) {
+        throw new Error(`Failed to find part containing row group index ${rowGroupIndex}.`);
+      }
+      const partMetadata = allMetadata.parts[partIndex].metadata;
+      const { schemaBytes } = allMetadata.parts[partIndex];
+      const rowGroupIndexRelativeToPart = rowGroupIndex - cumulativeRowGroups;
+      const rowGroupMetadata = partMetadata.rowGroup(rowGroupIndexRelativeToPart);
+      const rowGroupFileOffset = rowGroupMetadata.fileOffset();
+      const rowGroupCompressedSize = rowGroupMetadata.compressedSize();
+      const rowGroupBytes = await _loadParquetBytes({ queryClient: queryClient2, store: store2 }, parquetPath, { offset: rowGroupFileOffset, length: rowGroupCompressedSize }, partIndex);
+      const rowGroupIPC = readParquetRowGroup(schemaBytes, rowGroupBytes, rowGroupIndexRelativeToPart).intoIPCStream();
+      const rowGroupTable = tableFromIPC(rowGroupIPC);
+      return rowGroupTable;
+    },
+    meta: { queryClient, store }
+  });
+}
+async function _loadParquetRowGroupColumnExtent({ queryClient, store }, parquetPath, columnName, rowGroupIndex) {
+  return queryClient.fetchQuery({
+    queryKey: ["SpatialDataTableSource", "_loadParquetRowGroupColumnExtent", parquetPath, columnName, rowGroupIndex],
+    staleTime: Infinity,
+    queryFn: async (ctx) => {
+      const queryClient2 = (
+        /** @type {QueryClient} */
+        ctx.meta?.queryClient
+      );
+      const store2 = ctx.meta?.store;
+      const rowGroupTable = await _loadParquetRowGroupByGroupIndex({ queryClient: queryClient2, store: store2 }, parquetPath, rowGroupIndex);
+      const column2 = rowGroupTable.getChild(columnName);
+      if (!column2) {
+        throw new Error(`Column ${columnName} not found in row group ${rowGroupIndex} of parquet table at ${parquetPath}.`);
+      }
+      if (column2.length === 0) {
+        return { min: null, max: null };
+      }
+      return { min: column2.get(0), max: column2.get(column2.length - 1) };
+    },
+    meta: { queryClient, store }
+  });
+}
+function getCachedInRangeSync(queryClient, parquetPath, columnName, lo, hi) {
+  const queryCache = queryClient.getQueryCache();
+  const prevQueries = queryCache.findAll({
+    // Note: Must (manually) keep in sync with queryKey used in _loadParquetRowGroupColumnExtent.
+    queryKey: ["SpatialDataTableSource", "_loadParquetRowGroupColumnExtent", parquetPath, columnName],
+    exact: false
+  });
+  const cachedRowGroupInfo = prevQueries.map((q) => {
+    if (!(q.state.status === "success" && !q.state.isInvalidated)) {
+      return null;
+    }
+    return {
+      queryKey: q.queryKey,
+      index: q.queryKey[4],
+      status: q.state.status,
+      min: q.state.data?.min,
+      max: q.state.data?.max
+    };
+  }).filter((v) => v !== null).toSorted((a2, b2) => a2.index - b2.index);
+  return cachedRowGroupInfo.filter((c2) => c2.index >= lo && c2.index < hi);
+}
+async function getCachedInRange(queryClient, parquetPath, columnName, lo, hi) {
+  const queryCache = queryClient.getQueryCache();
+  const prevQueries = queryCache.findAll({
+    // Note: Must (manually) keep in sync with queryKey used in _loadParquetRowGroupColumnExtent.
+    queryKey: ["SpatialDataTableSource", "_loadParquetRowGroupColumnExtent", parquetPath, columnName],
+    exact: false
+  });
+  const cachedRowGroupInfo = prevQueries.map((q) => ({
+    queryKey: q.queryKey,
+    index: q.queryKey[4],
+    status: q.state.status,
+    min: q.state.data?.min,
+    max: q.state.data?.max
+  })).filter((v) => v !== null).toSorted((a2, b2) => a2.index - b2.index);
+  const cachedInRange = cachedRowGroupInfo.filter((c2) => c2.index >= lo && c2.index < hi);
+  const pendingQueries = cachedInRange.filter((c2) => c2.status !== "success");
+  if (pendingQueries.length === 0) {
+    return cachedInRange;
+  }
+  const pendingPromises = pendingQueries.map((c2) => queryClient.ensureQueryData({
+    queryKey: c2.queryKey
+  }));
+  await Promise.all(pendingPromises);
+  return getCachedInRangeSync(queryClient, parquetPath, columnName, lo, hi);
+}
+async function _bisectRowGroupsRight({ queryClient, store }, parquetPath, columnName, targetValue) {
+  return queryClient.fetchQuery({
+    queryKey: ["SpatialDataTableSource", "_bisectRowGroupsRight", parquetPath, columnName, targetValue],
+    staleTime: Infinity,
+    queryFn: async (ctx) => {
+      const queryClient2 = (
+        /** @type {QueryClient} */
+        ctx.meta?.queryClient
+      );
+      const store2 = ctx.meta?.store;
+      const allMetadata = await _loadParquetMetadataByPart({ queryClient: queryClient2, store: store2 }, parquetPath);
+      const { numRowGroups } = allMetadata;
+      let lo = 0;
+      let hi = numRowGroups;
+      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);
+        if (betterLo) {
+          lo = Math.min(hi, betterLo.index + 1);
+        }
+        const betterHi = cachedInRange.find((c2) => targetValue < c2.min);
+        if (betterHi) {
+          hi = Math.max(lo, betterHi.index - 1);
+        }
+        if (lo >= hi) {
+          break;
+        }
+        const mid = Math.floor((lo + hi) / 2);
+        const { max: midVal } = await _loadParquetRowGroupColumnExtent({ queryClient: queryClient2, store: store2 }, parquetPath, columnName, mid);
+        if (midVal === null || targetValue <= midVal) {
+          hi = mid;
+        } else {
+          lo = mid + 1;
+        }
+      }
+      return lo;
+    },
+    meta: { queryClient, store }
+  });
+}
+async function _rectToRowGroupIndices({ queryClient, store }, parquetPath, tileBbox, allPointsBbox) {
+  return queryClient.fetchQuery({
+    queryKey: ["SpatialDataTableSource", "_rectToRowGroupIndices", parquetPath, tileBbox, allPointsBbox],
+    staleTime: Infinity,
+    queryFn: async (ctx) => {
+      const queryClient2 = (
+        /** @type {QueryClient} */
+        ctx.meta?.queryClient
+      );
+      const store2 = ctx.meta?.store;
+      const mortonIntervals = sdataMortonQueryRectAux(allPointsBbox, [
+        [tileBbox.left, tileBbox.top],
+        // TODO: is this backwards (bottom/top)?
+        [tileBbox.right, tileBbox.bottom]
+      ]);
+      let coveredRowGroupIndices = [];
+      const intervalsSpanMultipleRowGroups = async (startIndex, endIndex) => {
+        if (startIndex > endIndex) {
+          return [false, null];
+        }
+        const [startMin, startMax] = mortonIntervals[startIndex];
+        const [endMin, endMax] = mortonIntervals[endIndex];
+        const [rowGroupIndexMin, rowGroupIndexMax] = await Promise.all([
+          _bisectRowGroupsRight({ queryClient: queryClient2, store: store2 }, parquetPath, "morton_code_2d", startMin),
+          _bisectRowGroupsRight({ queryClient: queryClient2, store: store2 }, parquetPath, "morton_code_2d", endMax)
+        ]);
+        if (rowGroupIndexMin === rowGroupIndexMax) {
+          return [false, [rowGroupIndexMin]];
+        }
+        if (rowGroupIndexMin + 1 === rowGroupIndexMax || rowGroupIndexMin - 1 === rowGroupIndexMax) {
+          return [false, [rowGroupIndexMin, rowGroupIndexMax]];
+        }
+        return [true, null];
+      };
+      const intervalIndicesToCheck = [[0, mortonIntervals.length - 1]];
+      while (intervalIndicesToCheck.length > 0) {
+        const [startIndex, endIndex] = intervalIndicesToCheck.pop();
+        const [spansMultipleRowGroups, rowGroupIndices] = await intervalsSpanMultipleRowGroups(startIndex, endIndex);
+        if (!spansMultipleRowGroups) {
+          if (rowGroupIndices !== null) {
+            coveredRowGroupIndices = coveredRowGroupIndices.concat(rowGroupIndices);
+          }
+        } else {
+          if (startIndex === endIndex) {
+            const [intervalMin, intervalMax] = mortonIntervals[startIndex];
+            const [rowGroupIndexMin, rowGroupIndexMax] = await Promise.all([
+              _bisectRowGroupsRight({ queryClient: queryClient2, store: store2 }, parquetPath, "morton_code_2d", intervalMin),
+              _bisectRowGroupsRight({ queryClient: queryClient2, store: store2 }, parquetPath, "morton_code_2d", intervalMax)
+            ]);
+            if (rowGroupIndexMin <= rowGroupIndexMax) {
+              coveredRowGroupIndices = coveredRowGroupIndices.concat(range$e(rowGroupIndexMin, rowGroupIndexMax + 1));
+            } else {
+              coveredRowGroupIndices = coveredRowGroupIndices.concat(range$e(rowGroupIndexMax, rowGroupIndexMin + 1));
+            }
+          } else {
+            const midIndex = Math.floor((startIndex + endIndex) / 2);
+            intervalIndicesToCheck.push([startIndex, midIndex]);
+            intervalIndicesToCheck.push([midIndex + 1, endIndex]);
+          }
+        }
+      }
+      const uniqueCoveredRowGroupIndices = Array.from(new Set(coveredRowGroupIndices));
+      return uniqueCoveredRowGroupIndices;
+    },
+    meta: { queryClient, store }
+  });
 }
 function tableToIndexColumnName(arrowTable) {
   const pandasMetadata = arrowTable.schema.metadata.get("pandas");
@@ -367416,14 +368402,17 @@ function getVarPath(arrPath) {
 class SpatialDataTableSource extends AnnDataSource {
   /**
    *
-   * @param {DataSourceParams} params
+   * @param {DataSourceParams & { queryClient: QueryClient }} params
    */
   constructor(params2) {
     super(params2);
+    const { queryClient } = params2;
+    this.queryClient = queryClient;
     this.parquetModulePromise = getParquetModule();
     this.rootAttrs = null;
     this.elementAttrs = {};
     this.parquetTableBytes = {};
+    this.parquetTableIsDirectory = {};
     this.obsIndices = {};
     this.varIndices = {};
     this.varAliases = {};
@@ -367477,17 +368466,19 @@ class SpatialDataTableSource extends AnnDataSource {
    * relative to the store root.
    * @returns {Promise<Uint8Array|undefined>} The parquet file bytes.
    */
-  async loadParquetBytes(parquetPath) {
-    if (this.parquetTableBytes[parquetPath]) {
-      return this.parquetTableBytes[parquetPath];
+  async loadParquetBytes(parquetPath, offset2 = void 0, length2 = void 0, partIndex = void 0) {
+    const { store } = this.storeRoot;
+    let getter2 = (path2) => store.get(path2);
+    if (offset2 !== void 0 && length2 !== void 0 && store.getRange) {
+      getter2 = (path2) => store.getRange(path2, {
+        offset: offset2,
+        length: length2
+      });
     }
-    let parquetBytes = await this.storeRoot.store.get(`/${parquetPath}`);
+    let parquetBytes = await getter2(`/${parquetPath}`);
     if (!parquetBytes) {
-      const part0Path = `${parquetPath}/part.0.parquet`;
-      parquetBytes = await this.storeRoot.store.get(`/${part0Path}`);
-    }
-    if (parquetBytes) {
-      this.parquetTableBytes[parquetPath] = parquetBytes;
+      const part0Path = `${parquetPath}/part.${partIndex ?? 0}.parquet`;
+      parquetBytes = await getter2(`/${part0Path}`);
     }
     return parquetBytes;
   }
@@ -367506,7 +368497,7 @@ class SpatialDataTableSource extends AnnDataSource {
    * @returns {Promise<Uint8Array|null>} The parquet file bytes,
    * or null if the store does not support getRange.
    */
-  async loadParquetSchemaBytes(parquetPath) {
+  async loadParquetSchemaBytes(parquetPath, partIndex = void 0) {
     const { store } = this.storeRoot;
     if (store.getRange) {
       const TAIL_LENGTH = 8;
@@ -367514,12 +368505,10 @@ class SpatialDataTableSource extends AnnDataSource {
       let tailBytes = await store.getRange(`/${partZeroPath}`, {
         suffixLength: TAIL_LENGTH
       });
-      if (!tailBytes) {
-        partZeroPath = `${parquetPath}/part.0.parquet`;
-        tailBytes = await store.getRange(`/${partZeroPath}`, {
-          suffixLength: TAIL_LENGTH
-        });
-      }
+      partZeroPath = `${parquetPath}/part.${partIndex ?? 0}.parquet`;
+      tailBytes = await store.getRange(`/${partZeroPath}`, {
+        suffixLength: TAIL_LENGTH
+      });
       if (!tailBytes || tailBytes.length < TAIL_LENGTH) {
         throw new Error(`Failed to load parquet footerLength for ${parquetPath}`);
       }
@@ -367581,7 +368570,7 @@ class SpatialDataTableSource extends AnnDataSource {
         const schemaBytes = await this.loadParquetSchemaBytes(parquetPath);
         if (schemaBytes) {
           const wasmSchema = readSchema(schemaBytes);
-          const arrowTableForSchema = await tableFromIPC(wasmSchema.intoIPCStream());
+          const arrowTableForSchema = tableFromIPC(wasmSchema.intoIPCStream());
           indexColumnName = tableToIndexColumnName(arrowTableForSchema);
         }
       } catch (e3) {
@@ -367597,14 +368586,14 @@ class SpatialDataTableSource extends AnnDataSource {
     }
     if (columns2 && !indexColumnName) {
       const wasmSchema = readSchema(parquetBytes);
-      const arrowTableForSchema = await tableFromIPC(wasmSchema.intoIPCStream());
+      const arrowTableForSchema = tableFromIPC(wasmSchema.intoIPCStream());
       indexColumnName = tableToIndexColumnName(arrowTableForSchema);
     }
     if (options.columns && indexColumnName) {
       options.columns = [...options.columns, indexColumnName];
     }
     const wasmTable = readParquet(parquetBytes, options);
-    const arrowTable = await tableFromIPC(wasmTable.intoIPCStream());
+    const arrowTable = tableFromIPC(wasmTable.intoIPCStream());
     return arrowTable;
   }
   // TABLE-SPECIFIC METHODS
@@ -367668,6 +368657,93 @@ class SpatialDataTableSource extends AnnDataSource {
     this.varAliases[varPath] = this.varAliases[varPath].map((val, ind) => val ? val.concat(` (${index2[ind]})`) : index2[ind]);
     return this.varAliases[varPath];
   }
+  async _supportsTiledPoints(parquetPath) {
+    const { queryClient } = this;
+    const { store } = this.storeRoot;
+    const allMetadata = await _loadParquetMetadataByPart({ queryClient, store }, parquetPath);
+    const { numRowsPerGroup } = allMetadata;
+    const numRowsTotal = allMetadata.numRows;
+    if (numRowsPerGroup >= 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.`);
+      }
+      return false;
+    }
+    const requiredColumns = ["x", "y", "feature_index", "morton_code_2d"];
+    const hasColumns = allMetadata?.schema?.fields?.map((f2) => f2.name);
+    if (!hasColumns) {
+      return false;
+    }
+    const hasRequiredColumns = requiredColumns.every((col) => hasColumns.includes(col));
+    if (!hasRequiredColumns && 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 required columns are missing. Required columns: ${requiredColumns.join(", ")}. Found columns: ${hasColumns.join(", ")}. See the Vitessce documentation at Data Troubleshooting -> Points for more details.`);
+    }
+    return hasRequiredColumns;
+  }
+  /**
+   * Load point data using a tiled approach.
+   * @param {string} parquetPath A path to a parquet file (or directory).
+   * @param {{ left: number, top: number, right: number, bottom: number }} tileBbox
+   * @param {{ x_min: number, y_min: number, x_max: number, y_max: number }} allPointsBbox
+   * @param {string[]|undefined} columns An optional list of column names to load.
+   * @returns
+   */
+  async loadParquetTableInRect(parquetPath, tileBbox, allPointsBbox, signal) {
+    const { queryClient } = this;
+    const { store } = this.storeRoot;
+    const TILE_SIZE2 = 256;
+    let tileBboxes = [];
+    if (tileBbox.right - tileBbox.left > TILE_SIZE2 || tileBbox.bottom - tileBbox.top > TILE_SIZE2) {
+      const xSteps = Math.ceil((tileBbox.right - tileBbox.left) / TILE_SIZE2);
+      const ySteps = Math.ceil((tileBbox.bottom - tileBbox.top) / TILE_SIZE2);
+      const xStepSize = (tileBbox.right - tileBbox.left) / xSteps;
+      const yStepSize = (tileBbox.bottom - tileBbox.top) / ySteps;
+      for (let i2 = 0; i2 < xSteps; i2++) {
+        for (let j = 0; j < ySteps; j++) {
+          const subTileBbox = {
+            left: tileBbox.left + i2 * xStepSize,
+            right: Math.min(tileBbox.left + (i2 + 1) * xStepSize, tileBbox.right),
+            top: tileBbox.top + j * yStepSize,
+            bottom: Math.min(tileBbox.top + (j + 1) * yStepSize, tileBbox.bottom)
+          };
+          tileBboxes.push(subTileBbox);
+        }
+      }
+    } else {
+      tileBboxes = [tileBbox];
+    }
+    const rowGroupIndicesPerTile = await Promise.all(tileBboxes.map(async (subTileBbox) => _rectToRowGroupIndices({ queryClient, store }, parquetPath, subTileBbox, allPointsBbox)));
+    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 rowGroupTables = await Promise.all(uniqueCoveredRowGroupIndices.map(async (rowGroupIndex) => _loadParquetRowGroupByGroupIndex({ queryClient, store }, parquetPath, rowGroupIndex)));
+    let rowOffset = 0;
+    rowGroupTables.forEach((table2) => {
+      const xColumn = table2.getChild("x");
+      const yColumn = table2.getChild("y");
+      const featureIndexColumn = table2.getChild("feature_index");
+      if (!xColumn || !yColumn || !featureIndexColumn) {
+        throw new Error(`Missing required column in parquet table at ${parquetPath}. Required columns: x, y, feature_index`);
+      }
+      xArr.set(xColumn.toArray(), rowOffset);
+      yArr.set(yColumn.toArray(), rowOffset);
+      featureIndexArr.set(featureIndexColumn.toArray(), rowOffset);
+      rowOffset += numRowsPerGroup;
+    });
+    return {
+      data: {
+        x: xArr,
+        y: yArr,
+        featureIndices: featureIndexArr
+      },
+      shape: [3, totalNumRows]
+    };
+  }
 }
 class BaseEvent {
   /**
@@ -373823,6 +374899,33 @@ class SpatialDataPointsSource extends SpatialDataTableSource {
       data: axisColumnArrs
     };
   }
+  /**
+   *
+   * @param {string} elementPath
+   * @param {{ left: number, top: number, right: number, bottom: number }} tileBbox
+   * @returns {Promise<{
+   *  data: [ZarrTypedArray<any>, ZarrTypedArray<any>],
+   *  shape: [number, number],
+   * }>} A promise for a zarr array containing the data.
+   */
+  async loadPointsInRect(elementPath, tileBbox, signal) {
+    const parquetPath = getParquetPath(elementPath);
+    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
+    } = zattrs;
+    return this.loadParquetTableInRect(parquetPath, tileBbox, allPointsBbox, signal);
+  }
+  async supportsLoadPointsInRect(elementPath) {
+    const parquetPath = getParquetPath(elementPath);
+    return this._supportsTiledPoints(parquetPath);
+  }
 }
 class OmeTiffSource {
   constructor({ url, requestInit: requestInit2 }) {
@@ -379967,10 +381070,27 @@ const baseCoordinationTypes = [
       color: rgbArray
     })).nullable()
   ),
+  new PluginCoordinationType(
+    CoordinationType$1.FEATURE_COLOR,
+    null,
+    z.array(z.object({
+      name: z.string(),
+      color: rgbArray
+    })).nullable()
+  ),
   new PluginCoordinationType(
     CoordinationType$1.OBS_COLOR_ENCODING,
     "cellSetSelection",
-    z.enum(["geneSelection", "cellSetSelection", "spatialChannelColor", "spatialLayerColor", "obsLabels"])
+    z.enum([
+      "geneSelection",
+      "cellSetSelection",
+      "spatialChannelColor",
+      "spatialLayerColor",
+      "obsLabels",
+      // For point coloring.
+      "random",
+      "randomByFeature"
+    ])
   ),
   new PluginCoordinationType(CoordinationType$1.FEATURE_FILTER, null, z.array(z.string()).nullable()),
   new PluginCoordinationType(CoordinationType$1.FEATURE_HIGHLIGHT, null, z.string().nullable()),
@@ -380001,7 +381121,7 @@ const baseCoordinationTypes = [
     null,
     z.array(obsSetPath).nullable()
   ),
-  new PluginCoordinationType(CoordinationType$1.FEATURE_FILTER_MODE, null, z.enum(["featureFilter", "featureSetFilter"]).nullable()),
+  new PluginCoordinationType(CoordinationType$1.FEATURE_FILTER_MODE, null, z.enum(["featureFilter", "featureSetFilter", "featureSelection"]).nullable()),
   new PluginCoordinationType(
     CoordinationType$1.FEATURE_VALUE_TRANSFORM,
     null,