@vitessce/all 3.8.13 → 3.9.1

package/dist/{index-B0JyLhTY.js → index-B-aCUFst.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,
@@ -10810,7 +10815,9 @@ const obsSegmentationsSpatialdataSchema = z.object({
 const obsPointsSpatialdataSchema = z.object({
   path: z.string().describe("The path to the point data."),
   tablePath: z.string().optional().describe("The path to a table which annotates the points. If available but not specified, the spot identifiers may not be aligned with associated tabular data as expected."),
-  coordinateSystem: z.string().optional().describe('The name of a coordinate transformation output used to transform the image. If not provided, the "global" coordinate system is assumed.')
+  coordinateSystem: z.string().optional().describe('The name of a coordinate transformation output used to transform the image. If not provided, the "global" coordinate system is assumed.'),
+  featureIndexColumn: z.string().optional().describe("The name of the column in the table which contains the feature (e.g., gene) indices associated with each point (aligned with the table var.index dataframe column)."),
+  mortonCodeColumn: z.string().optional().describe('The name of the column in the table which contains the Morton codes for each point, used for efficient spatial querying. If not provided, Vitessce will assume the default column name "morton_code_2d".')
 });
 z.object({
   path: z.string(),
@@ -31993,7 +32000,7 @@ var _span$3;
 const useUtilityClasses$1h = (ownerState) => {
   const {
     classes: classes2,
-    contained,
+    contained: contained2,
     size: size2,
     disabled,
     error: error2,
@@ -32002,7 +32009,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 +33502,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 +33837,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 +34051,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 +34133,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 +169943,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 +169962,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 +170280,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 +209142,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-fm6sEfJs.js").then((m2) => m2.default));
+addDecoder(5, () => import("./lzw-fa9yKTSy.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-BZSLq5O3.js").then((m2) => m2.default));
+addDecoder([8, 32946], () => import("./deflate-C63ycJxP.js").then((m2) => m2.default));
+addDecoder(32773, () => import("./packbits-8C0e8lDT.js").then((m2) => m2.default));
 addDecoder(
   34887,
-  () => import("./lerc-CBp5l3Pw.js").then(async (m2) => {
+  () => import("./lerc-BZk5g5T2.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-CyRSWQVR.js").then((m2) => m2.default));
 function copyNewSize(array2, width2, height2, samplesPerPixel = 1) {
   return new (Object.getPrototypeOf(array2)).constructor(width2 * height2 * samplesPerPixel);
 }
@@ -231309,6 +231316,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 +231324,9 @@ function Legend(props) {
     considerSelections = true,
     obsColorEncoding,
     featureSelection,
+    featureFilterMode,
+    featureColor,
+    featureIndex,
     featureLabelsMap,
     featureValueColormap,
     featureValueColormapRange,
@@ -231359,15 +231370,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 +231469,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 +231530,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 +231554,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 +231590,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 +231633,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 +231706,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 +231718,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 +231736,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 +252151,7 @@ class Spatial2 extends AbstractSpatialOrScatterplot {
     this.obsSpotsQuadTree = {};
     this.obsPointsData = {};
     this.obsPointsQuadTree = {};
+    this.obsPointsLoadingStatus = {};
     this.imageLayers = [];
     this.obsSegmentationsLayers = [];
     this.obsSpotsLayers = [];
@@ -252226,10 +252332,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 +252468,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 +252619,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 +253159,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 +253406,7 @@ class Spatial2 extends AbstractSpatialOrScatterplot {
       // Data props.
       "obsPoints",
       "pointMultiObsLabels",
+      "pointMatrixIndices",
       // Coordination props.
       "pointLayerScopes",
       "pointLayerCoordination"
@@ -253205,12 +253561,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-DBnzUqAs.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-Do4xvqoi.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 +253681,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 +253874,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 +253886,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 +253906,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 +253940,7 @@ function SpatialSubscriber(props) {
     ...spotMultiFeatureSelectionErrors,
     ...spotMultiIndicesDataErrors,
     ...pointMultiObsLabelsErrors,
+    ...pointMultiIndicesDataErrors,
     ...segmentationMultiFeatureSelectionErrors,
     ...segmentationMultiIndicesDataErrors,
     ...obsSegmentationsLocationsDataErrors
@@ -253587,6 +253960,7 @@ function SpatialSubscriber(props) {
     // Points
     obsPointsDataStatus,
     pointMultiObsLabelsDataStatus,
+    pointMultiIndicesDataStatus,
     // Segmentations
     obsSegmentationsDataStatus,
     obsSegmentationsSetsDataStatus,
@@ -253774,14 +254148,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 +254202,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 +254243,8 @@ function SpatialSubscriber(props) {
       spotMultiFeatureLabels: obsSpotsFeatureLabelsData,
       // Points
       pointLayerScopes,
-      pointLayerCoordination
+      pointLayerCoordination,
+      pointMultiIndicesData
     }
   ), jsxRuntimeExports.jsx(
     ChannelNamesLegend,
@@ -262826,17 +263206,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 +263243,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 +263329,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 +264863,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 +264999,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 +265008,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 +265092,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 +265102,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 +265114,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 +267044,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-Dsba4gSg.js");
   return { default: HiGlassComponent };
 });
 const HG_SIZE = 800;
@@ -269515,7 +269991,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-CGvAuFr6.js"));
 function createWorker() {
   return new WorkerFactory();
 }
@@ -290689,7 +291165,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 +291343,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 +291364,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 +320375,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 +320405,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 +355156,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 +356788,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 {
@@ -357915,20 +358391,31 @@ class SpatialDataObsPointsLoader extends AbstractTwoStepLoader {
      * @returns {Promise} A promise for an array of columns.
      */
   async loadPoints() {
-    const { path: path2 } = this.options;
+    const { path: path2, featureIndexColumn } = this.options;
     if (this.locations) {
       return this.locations;
     }
     let locations;
     const formatVersion = await this.dataSource.getPointsFormatVersion(path2);
     if (formatVersion === "0.1") {
-      locations = await this.dataSource.loadPoints(path2);
+      locations = await this.dataSource.loadPoints(path2, featureIndexColumn);
     } else {
       throw new UnknownSpatialDataFormatError("Only points format version 0.1 is supported.");
     }
     this.locations = locations;
     return this.locations;
   }
+  async loadPointsInRect(bounds2, signal) {
+    const { path: path2, featureIndexColumn, mortonCodeColumn } = this.options;
+    let locations;
+    const formatVersion = await this.dataSource.getPointsFormatVersion(path2);
+    if (formatVersion === "0.1") {
+      locations = await this.dataSource.loadPointsInRect(path2, bounds2, signal, featureIndexColumn, mortonCodeColumn);
+    } 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 +358428,28 @@ class SpatialDataObsPointsLoader extends AbstractTwoStepLoader {
     }
     return null;
   }
+  async supportsTiling() {
+    const { path: path2, featureIndexColumn: featureIndexColumnNameFromOptions, mortonCodeColumn } = this.options;
+    const zattrs = await this.dataSource.loadSpatialDataElementAttrs(path2);
+    const { spatialdata_attrs: spatialDataAttrs } = zattrs;
+    const { feature_key: featureKey } = spatialDataAttrs;
+    const featureIndexColumnName = featureIndexColumnNameFromOptions ?? `${featureKey}_codes`;
+    const [formatVersion, hasRequiredColumnsAndRowGroupSize] = await Promise.all([
+      // Check the points format version.
+      this.dataSource.getPointsFormatVersion(path2),
+      // Check the size of parquet row groups,
+      // and for the presence of morton_code_2d and feature_index columns.
+      this.dataSource.supportsLoadPointsInRect(path2, featureIndexColumnName, mortonCodeColumn)
+    ]);
+    const isSupportedVersion = formatVersion === "0.1";
+    const boundingBox = zattrs?.bounding_box;
+    const hasBoundingBox2D = typeof boundingBox?.x_max === "number" && typeof boundingBox?.x_min === "number" && typeof boundingBox?.y_max === "number" && typeof boundingBox?.y_min === "number";
+    return isSupportedVersion && hasBoundingBox2D && hasRequiredColumnsAndRowGroupSize;
+  }
   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 +358465,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 +367889,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, mortonCodeColumnName) {
+  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, mortonCodeColumnName, startMin),
+          _bisectRowGroupsRight({ queryClient: queryClient2, store: store2 }, parquetPath, mortonCodeColumnName, 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, mortonCodeColumnName, intervalMin),
+              _bisectRowGroupsRight({ queryClient: queryClient2, store: store2 }, parquetPath, mortonCodeColumnName, 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 +368406,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 +368470,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 +368501,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 +368509,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 +368574,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 +368590,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 +368661,95 @@ 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, featureIndexColumnName, mortonCodeColumn) {
+    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 mortonCodeColumnName = mortonCodeColumn ?? "morton_code_2d";
+    const requiredColumns = ["x", "y", featureIndexColumnName, mortonCodeColumnName];
+    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, featureIndexColumnName, mortonCodeColumn) {
+    const { queryClient } = this;
+    const { store } = this.storeRoot;
+    const mortonCodeColumnName = mortonCodeColumn ?? "morton_code_2d";
+    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, mortonCodeColumnName)));
+    const uniqueCoveredRowGroupIndices = Array.from(new Set(rowGroupIndicesPerTile.flat())).toSorted((a2, b2) => a2 - b2);
+    const allMetadata = await _loadParquetMetadataByPart({ queryClient, store }, parquetPath);
+    const { numRowsPerGroup } = allMetadata;
+    const numRowGroups = uniqueCoveredRowGroupIndices.length;
+    const totalNumRows = numRowsPerGroup * numRowGroups;
+    const xArr = new Float32Array(totalNumRows);
+    const yArr = new Float32Array(totalNumRows);
+    const featureIndexArr = new Uint32Array(totalNumRows);
+    const 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(featureIndexColumnName);
+      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 {
   /**
@@ -373802,7 +374884,7 @@ class SpatialDataPointsSource extends SpatialDataTableSource {
    *  shape: [number, number],
    * }>} A promise for a zarr array containing the data.
    */
-  async loadPoints(elementPath) {
+  async loadPoints(elementPath, featureIndexColumnNameFromOptions) {
     const parquetPath = getParquetPath(elementPath);
     const zattrs = await this.loadSpatialDataElementAttrs(elementPath);
     const { axes, spatialdata_attrs: spatialDataAttrs } = zattrs;
@@ -373823,6 +374905,35 @@ 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, featureIndexColumnNameFromOptions, mortonCodeColumn) {
+    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;
+    const { feature_key: featureKey } = spatialDataAttrs;
+    const featureIndexColumnName = featureIndexColumnNameFromOptions ?? `${featureKey}_codes`;
+    return this.loadParquetTableInRect(parquetPath, tileBbox, allPointsBbox, signal, featureIndexColumnName, mortonCodeColumn);
+  }
+  async supportsLoadPointsInRect(elementPath, featureIndexColumnName, mortonCodeColumn) {
+    const parquetPath = getParquetPath(elementPath);
+    return this._supportsTiledPoints(parquetPath, featureIndexColumnName, mortonCodeColumn);
+  }
 }
 class OmeTiffSource {
   constructor({ url, requestInit: requestInit2 }) {
@@ -379967,10 +381078,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 +381129,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,