@vitessce/scatterplot-embedding 3.5.10 → 3.5.11

package/dist/{deflate-f550f6c6.js → deflate-7f3bb131.js}

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

package/dist/{index-a37f30c8.js → index-ab73546f.js}

@@ -11717,6 +11717,7 @@ const CoordinationType$1 = {
   FEATURE_VALUE_COLORMAP: "featureValueColormap",
   FEATURE_VALUE_TRANSFORM: "featureValueTransform",
   FEATURE_VALUE_COLORMAP_RANGE: "featureValueColormapRange",
+  FEATURE_AGGREGATION_STRATEGY: "featureAggregationStrategy",
   OBS_COLOR_ENCODING: "obsColorEncoding",
   SPATIAL_IMAGE_LAYER: "spatialImageLayer",
   SPATIAL_SEGMENTATION_LAYER: "spatialSegmentationLayer",
@@ -11859,6 +11860,7 @@ const COMPONENT_COORDINATION_TYPES = {
     CoordinationType$1.FEATURE_SELECTION,
     CoordinationType$1.FEATURE_VALUE_COLORMAP,
     CoordinationType$1.FEATURE_VALUE_COLORMAP_RANGE,
+    CoordinationType$1.FEATURE_AGGREGATION_STRATEGY,
     CoordinationType$1.OBS_COLOR_ENCODING,
     CoordinationType$1.ADDITIONAL_OBS_SETS,
     CoordinationType$1.TOOLTIPS_VISIBLE,
@@ -11902,6 +11904,7 @@ const COMPONENT_COORDINATION_TYPES = {
     CoordinationType$1.FEATURE_SELECTION,
     CoordinationType$1.FEATURE_VALUE_COLORMAP,
     CoordinationType$1.FEATURE_VALUE_COLORMAP_RANGE,
+    CoordinationType$1.FEATURE_AGGREGATION_STRATEGY,
     CoordinationType$1.OBS_COLOR_ENCODING,
     CoordinationType$1.ADDITIONAL_OBS_SETS,
     CoordinationType$1.TOOLTIPS_VISIBLE,
@@ -11981,6 +11984,7 @@ const COMPONENT_COORDINATION_TYPES = {
     CoordinationType$1.FEATURE_SELECTION,
     CoordinationType$1.FEATURE_VALUE_COLORMAP,
     CoordinationType$1.FEATURE_VALUE_COLORMAP_RANGE,
+    CoordinationType$1.FEATURE_AGGREGATION_STRATEGY,
     CoordinationType$1.OBS_COLOR_ENCODING,
     CoordinationType$1.ADDITIONAL_OBS_SETS,
     CoordinationType$1.MOLECULE_HIGHLIGHT,
@@ -12018,6 +12022,7 @@ const COMPONENT_COORDINATION_TYPES = {
     CoordinationType$1.FEATURE_SELECTION,
     CoordinationType$1.FEATURE_VALUE_COLORMAP,
     CoordinationType$1.FEATURE_VALUE_COLORMAP_RANGE,
+    CoordinationType$1.FEATURE_AGGREGATION_STRATEGY,
     CoordinationType$1.OBS_COLOR_ENCODING,
     CoordinationType$1.ADDITIONAL_OBS_SETS,
     CoordinationType$1.MOLECULE_HIGHLIGHT,
@@ -12131,6 +12136,7 @@ const COMPONENT_COORDINATION_TYPES = {
     CoordinationType$1.FEATURE_SELECTION,
     CoordinationType$1.FEATURE_VALUE_TRANSFORM,
     CoordinationType$1.FEATURE_VALUE_TRANSFORM_COEFFICIENT,
+    CoordinationType$1.FEATURE_AGGREGATION_STRATEGY,
     CoordinationType$1.OBS_SET_SELECTION,
     CoordinationType$1.OBS_SET_FILTER,
     CoordinationType$1.OBS_SET_HIGHLIGHT,
@@ -12146,6 +12152,7 @@ const COMPONENT_COORDINATION_TYPES = {
     CoordinationType$1.FEATURE_TYPE,
     CoordinationType$1.FEATURE_VALUE_TYPE,
     CoordinationType$1.FEATURE_SELECTION,
+    CoordinationType$1.FEATURE_AGGREGATION_STRATEGY,
     CoordinationType$1.ADDITIONAL_OBS_SETS,
     CoordinationType$1.OBS_SET_COLOR,
     CoordinationType$1.OBS_COLOR_ENCODING,
@@ -12224,6 +12231,7 @@ const COMPONENT_COORDINATION_TYPES = {
     CoordinationType$1.FEATURE_VALUE_COLORMAP,
     CoordinationType$1.FEATURE_VALUE_COLORMAP_RANGE,
     CoordinationType$1.FEATURE_SELECTION,
+    CoordinationType$1.FEATURE_AGGREGATION_STRATEGY,
     CoordinationType$1.TOOLTIPS_VISIBLE,
     CoordinationType$1.TOOLTIP_CROSSHAIRS_VISIBLE,
     CoordinationType$1.LEGEND_VISIBLE,
@@ -12264,6 +12272,7 @@ const COMPONENT_COORDINATION_TYPES = {
     CoordinationType$1.FEATURE_VALUE_TRANSFORM_COEFFICIENT,
     CoordinationType$1.FEATURE_VALUE_POSITIVITY_THRESHOLD,
     CoordinationType$1.FEATURE_VALUE_COLORMAP,
+    CoordinationType$1.FEATURE_AGGREGATION_STRATEGY,
     CoordinationType$1.OBS_SET_SELECTION,
     CoordinationType$1.OBS_SET_FILTER,
     CoordinationType$1.OBS_SET_HIGHLIGHT,
@@ -12292,6 +12301,7 @@ const COMPONENT_COORDINATION_TYPES = {
     CoordinationType$1.FEATURE_SELECTION,
     CoordinationType$1.FEATURE_VALUE_TRANSFORM,
     CoordinationType$1.FEATURE_VALUE_TRANSFORM_COEFFICIENT,
+    CoordinationType$1.FEATURE_AGGREGATION_STRATEGY,
     CoordinationType$1.OBS_SET_SELECTION,
     CoordinationType$1.OBS_SET_HIGHLIGHT,
     CoordinationType$1.OBS_HIGHLIGHT,
@@ -12396,6 +12406,7 @@ const COMPONENT_COORDINATION_TYPES = {
     CoordinationType$1.OBS_TYPE,
     CoordinationType$1.SAMPLE_TYPE,
     CoordinationType$1.FEATURE_SELECTION,
+    CoordinationType$1.FEATURE_AGGREGATION_STRATEGY,
     CoordinationType$1.SAMPLE_SET_SELECTION,
     CoordinationType$1.SAMPLE_SET_FILTER,
     CoordinationType$1.OBS_SET_SELECTION,
@@ -12703,6 +12714,7 @@ z.object({
   termColumn: z.string().optional(),
   pValueColumn: z.string(),
   pValueAdjusted: z.boolean().optional(),
+  featureSetLibrary: z.string().optional().describe("Optionally, provide a feature set library name. By default, Reactome_2022."),
   analysisType: z.string().optional().describe("Optionally, provide an analysis_type name. By default, pertpy_hypergeometric.")
 });
 z.object({
@@ -12713,7 +12725,6 @@ z.object({
   foldChangeColumn: z.string().describe("The log-fold change is then calculated between this expected sample and the expected sample with no active covariates from the intercept section."),
   foldChangeTransformation: z.enum(["log2"]).optional(),
   isCredibleEffectColumn: z.string().describe("Column which annotates effects as being credible or not (boolean)."),
-  covariateColumn: z.string().describe("Column which defines the covariate used in the analysis."),
   analysisType: z.string().optional().describe("Optionally, provide an analysis_type name. By default, sccoda_df.")
 });
 const annDataObsLabels = annDataObs;
@@ -19717,7 +19728,7 @@ function getCellColors(params) {
   }
   return /* @__PURE__ */ new Map();
 }
-function stratifyArrays(sampleEdges, sampleIdToObsIdsMap, sampleSets, sampleSetSelection, obsIndex, mergedCellSets, cellSetSelection, arraysToStratify) {
+function stratifyArrays(sampleEdges, sampleIdToObsIdsMap, sampleSets, sampleSetSelection, obsIndex, mergedCellSets, cellSetSelection, arraysToStratify, featureAggregationStrategy) {
   const result = new InternMap([], JSON.stringify);
   const hasSampleSetSelection = Array.isArray(sampleSetSelection) && sampleSetSelection.length > 0;
   const hasCellSetSelection = Array.isArray(cellSetSelection) && cellSetSelection.length > 0;
@@ -19727,9 +19738,13 @@ function stratifyArrays(sampleEdges, sampleIdToObsIdsMap, sampleSets, sampleSetS
   if (arrKeys.includes("obsIndex") || arrKeys.includes("i")) {
     throw new Error('The keys "obsIndex" and "i" are reserved for internal use.');
   }
-  if (Object.values(arraysToStratify).some((arr) => arr.length !== obsIndex.length)) {
-    throw new Error("All arrays must have the same length as the obsIndex.");
-  }
+  if (Object.entries(arraysToStratify).some(([arrKey, arr]) => {
+    if (arrKey === "featureValue") {
+      return arr.some((a2) => a2.length !== obsIndex.length);
+    }
+    return arr.length !== obsIndex.length;
+  }))
+    ;
   const sampleSetInfo = sampleSets && sampleSetSelection ? treeToObsIdsBySetNames(sampleSets, sampleSetSelection) : null;
   const cellSetInfo = mergedCellSets && cellSetSelection ? treeToObsIdsBySetNames(mergedCellSets, cellSetSelection) : null;
   cellSetKeys.forEach((cellSetKey) => {
@@ -19759,6 +19774,7 @@ function stratifyArrays(sampleEdges, sampleIdToObsIdsMap, sampleSets, sampleSetS
   });
   const sampleIdToSetMap = sampleSets && sampleSetSelection ? treeToSelectedSetMap(sampleSets, sampleSetSelection) : null;
   const cellIdToSetMap = mergedCellSets && cellSetSelection ? treeToSelectedSetMap(mergedCellSets, cellSetSelection) : null;
+  let cellCount = 0;
   for (let i2 = 0; i2 < obsIndex.length; i2 += 1) {
     const obsId = obsIndex[i2];
     const cellSet = (cellIdToSetMap == null ? void 0 : cellIdToSetMap.get(obsId)) || null;
@@ -19769,10 +19785,28 @@ function stratifyArrays(sampleEdges, sampleIdToObsIdsMap, sampleSets, sampleSetS
     }
     const insertionIndex = result.get(cellSet).get(sampleSet).get("i");
     arrKeys.forEach((arrKey) => {
-      const value = arraysToStratify[arrKey][i2];
+      let value;
+      if (arrKey === "featureValue") {
+        if (featureAggregationStrategy === "first") {
+          value = arraysToStratify[arrKey][0][i2];
+        } else if (featureAggregationStrategy === "last") {
+          value = arraysToStratify[arrKey].at(-1)[i2];
+        } else if (typeof featureAggregationStrategy === "number") {
+          const j = featureAggregationStrategy;
+          value = arraysToStratify[arrKey][j][i2];
+        } else if (featureAggregationStrategy === "sum" || featureAggregationStrategy === "mean") {
+          value = arraysToStratify[arrKey].reduce((a2, h) => a2 + h[i2], 0);
+          if (featureAggregationStrategy === "mean") {
+            value /= arraysToStratify[arrKey].length;
+          }
+        }
+      } else {
+        value = arraysToStratify[arrKey][i2];
+      }
       result.get(cellSet).get(sampleSet).get(arrKey)[insertionIndex] = value;
     });
     result.get(cellSet).get(sampleSet).set("i", insertionIndex + 1);
+    cellCount += 1;
   }
   cellSetKeys.forEach((cellSetKey) => {
     sampleSetKeys.forEach((sampleSetKey) => {
@@ -19783,7 +19817,7 @@ function stratifyArrays(sampleEdges, sampleIdToObsIdsMap, sampleSets, sampleSetS
       result.get(cellSetKey).get(sampleSetKey).delete("i");
     });
   });
-  return result;
+  return [result, cellCount];
 }
 function tree_add(d) {
   var x2 = +this._x.call(null, d), y2 = +this._y.call(null, d);
@@ -127455,8 +127489,15 @@ class SelectionLayer extends CompositeLayer {
         if (!nodePolygonContainsSelectedPolygon && !nodePolygonWithinSelectedPolygon && !nodePolygonOverlapsSelectedPolgyon) {
           return true;
         }
-        if (node.data && booleanPointInPolygon$1(point$1([].slice.call(getObsCoords(node.data))), selectedPolygon)) {
-          pickingInfos.push(node.data);
+        if (node.data) {
+          let current = node;
+          while (current) {
+            const pointCoords = [].slice.call(getObsCoords(current.data));
+            if (booleanPointInPolygon$1(point$1(pointCoords), selectedPolygon)) {
+              pickingInfos.push(current.data);
+            }
+            current = current.next;
+          }
         }
         return false;
       });
@@ -128668,16 +128709,16 @@ function addDecoder(cases, importFn) {
   }
   cases.forEach((c2) => registry$1.set(c2, importFn));
 }
-addDecoder([void 0, 1], () => import("./raw-b648d255.js").then((m2) => m2.default));
-addDecoder(5, () => import("./lzw-ce001eff.js").then((m2) => m2.default));
+addDecoder([void 0, 1], () => import("./raw-140846a5.js").then((m2) => m2.default));
+addDecoder(5, () => import("./lzw-ec516fe1.js").then((m2) => m2.default));
 addDecoder(6, () => {
   throw new Error("old style JPEG compression is not supported.");
 });
-addDecoder(7, () => import("./jpeg-5927a952.js").then((m2) => m2.default));
-addDecoder([8, 32946], () => import("./deflate-f550f6c6.js").then((m2) => m2.default));
-addDecoder(32773, () => import("./packbits-075c055a.js").then((m2) => m2.default));
-addDecoder(34887, () => import("./lerc-7a4fca51.js").then((m2) => m2.default));
-addDecoder(50001, () => import("./webimage-dec5407e.js").then((m2) => m2.default));
+addDecoder(7, () => import("./jpeg-6b5f0200.js").then((m2) => m2.default));
+addDecoder([8, 32946], () => import("./deflate-7f3bb131.js").then((m2) => m2.default));
+addDecoder(32773, () => import("./packbits-28d4e412.js").then((m2) => m2.default));
+addDecoder(34887, () => import("./lerc-6a84a90d.js").then((m2) => m2.default));
+addDecoder(50001, () => import("./webimage-5e317232.js").then((m2) => m2.default));
 function decodeRowAcc(row, stride) {
   let length2 = row.length - stride;
   let offset5 = 0;
@@ -149712,7 +149753,10 @@ const getPosition = (object2, { index: index2, data, target }) => {
   target[2] = POINT_LAYER_Z_INDEX;
   return target;
 };
-const contourGetWeight = (object2, { index: index2, data }) => data.src.featureValues[index2];
+const contourGetWeight = (object2, { index: index2, data }) => {
+  var _a3;
+  return (_a3 = data.src.featureValues) == null ? void 0 : _a3[index2];
+};
 const contourGetPosition = (object2, { index: index2, data, target }) => {
   target[0] = data.src.embeddingX[index2];
   target[1] = -data.src.embeddingY[index2];
@@ -150009,6 +150053,16 @@ class Scatterplot extends AbstractSpatialOrScatterplot {
     const { obsEmbeddingIndex, obsEmbedding } = this.props;
     super.viewInfoDidUpdate(obsEmbeddingIndex, obsEmbedding, makeFlippedGetObsCoords);
   }
+  componentWillUnmount() {
+    delete this.cellsQuadTree;
+    delete this.cellsLayer;
+    delete this.cellsData;
+    delete this.stratifiedData;
+    delete this.cellSetsForceSimulation;
+    delete this.cellSetsLabelPrevZoom;
+    delete this.cellSetsLayers;
+    delete this.contourLayers;
+  }
   /**
    * Here, asynchronously check whether props have
    * updated which require re-computing memoized variables,
@@ -150215,8 +150269,9 @@ if (typeof document !== "undefined") {
   else
     document.addEventListener("DOMContentLoaded", $bbed8b41f857bcc0$var$setupGlobalEvents);
 }
+const FEATURE_AGGREGATION_STRATEGIES = ["first", "last", "sum", "mean"];
 function ScatterplotOptions(props) {
-  const { children: children2, observationsLabel, cellRadius, setCellRadius, cellRadiusMode, setCellRadiusMode, cellOpacity, setCellOpacity, cellOpacityMode, setCellOpacityMode, cellSetLabelsVisible, setCellSetLabelsVisible, tooltipsVisible, setTooltipsVisible, cellSetLabelSize, setCellSetLabelSize, cellSetPolygonsVisible, setCellSetPolygonsVisible, cellColorEncoding, setCellColorEncoding, geneExpressionColormap, setGeneExpressionColormap, geneExpressionColormapRange, setGeneExpressionColormapRange, embeddingPointsVisible, setEmbeddingPointsVisible, embeddingContoursVisible, setEmbeddingContoursVisible, embeddingContoursFilled, setEmbeddingContoursFilled, contourPercentiles, setContourPercentiles, defaultContourPercentiles, contourColorEncoding, setContourColorEncoding } = props;
+  const { children: children2, observationsLabel, cellRadius, setCellRadius, cellRadiusMode, setCellRadiusMode, cellOpacity, setCellOpacity, cellOpacityMode, setCellOpacityMode, cellSetLabelsVisible, setCellSetLabelsVisible, tooltipsVisible, setTooltipsVisible, cellSetLabelSize, setCellSetLabelSize, cellSetPolygonsVisible, setCellSetPolygonsVisible, cellColorEncoding, setCellColorEncoding, geneExpressionColormap, setGeneExpressionColormap, geneExpressionColormapRange, setGeneExpressionColormapRange, embeddingPointsVisible, setEmbeddingPointsVisible, embeddingContoursVisible, setEmbeddingContoursVisible, embeddingContoursFilled, setEmbeddingContoursFilled, contourPercentiles, setContourPercentiles, defaultContourPercentiles, contourColorEncoding, setContourColorEncoding, featureAggregationStrategy, setFeatureAggregationStrategy } = props;
   const scatterplotOptionsId = $bdb11010cef70236$export$f680877a34711e37();
   const observationsLabelNice = capitalize$1(observationsLabel);
   const classes = usePlotOptionsStyles();
@@ -150267,6 +150322,9 @@ function ScatterplotOptions(props) {
     setContourPercentiles(values2);
   }
   const handlePercentilesChangeDebounced = useCallback(debounce$2(handlePercentilesChange, 5, { trailing: true }), [handlePercentilesChange]);
+  function handleFeatureAggregationStrategyChange(event) {
+    setFeatureAggregationStrategy(event.target.value);
+  }
   return jsxRuntimeExports.jsxs(OptionsContainer, { children: [children2, jsxRuntimeExports.jsx(CellColorEncodingOption, { observationsLabel, cellColorEncoding, setCellColorEncoding }), jsxRuntimeExports.jsxs(TableRow$1, { children: [jsxRuntimeExports.jsx(TableCell$1, { className: classes.labelCell, variant: "head", scope: "row", children: jsxRuntimeExports.jsxs("label", { htmlFor: `scatterplot-set-labels-visible-${scatterplotOptionsId}`, children: [observationsLabelNice, " Set Labels Visible"] }) }), jsxRuntimeExports.jsx(TableCell$1, { className: classes.inputCell, variant: "body", children: jsxRuntimeExports.jsx(Checkbox$1, { className: classes.checkbox, checked: cellSetLabelsVisible, onChange: handleLabelVisibilityChange, name: "scatterplot-option-cell-set-labels", color: "default", inputProps: {
     "aria-label": "Show or hide set labels",
     id: `scatterplot-set-labels-visible-${scatterplotOptionsId}`
@@ -150308,7 +150366,9 @@ function ScatterplotOptions(props) {
     id: `scatterplot-contours-filled-${scatterplotOptionsId}`
   } }) })] }), jsxRuntimeExports.jsxs(TableRow$1, { children: [jsxRuntimeExports.jsx(TableCell$1, { className: classes.labelCell, variant: "head", scope: "row", children: jsxRuntimeExports.jsx("label", { htmlFor: `scatterplot-contour-color-encoding-${scatterplotOptionsId}`, children: "Contour Color Encoding" }) }), jsxRuntimeExports.jsx(TableCell$1, { className: classes.inputCell, variant: "body", children: jsxRuntimeExports.jsxs(OptionSelect, { className: classes.select, value: contourColorEncoding, onChange: handleContourColorEncodingChange, inputProps: {
     id: `scatterplot-contour-color-encoding-${scatterplotOptionsId}`
-  }, children: [jsxRuntimeExports.jsx("option", { value: "sampleSetSelection", children: "Sample Sets" }), jsxRuntimeExports.jsxs("option", { value: "cellSetSelection", children: [observationsLabelNice, " Sets"] }), jsxRuntimeExports.jsx("option", { value: "staticColor", children: "Static Color" })] }) })] }), jsxRuntimeExports.jsxs(TableRow$1, { children: [jsxRuntimeExports.jsx(TableCell$1, { className: classes.labelCell, variant: "head", scope: "row", children: jsxRuntimeExports.jsx("label", { htmlFor: `scatterplot-contour-percentiles-${scatterplotOptionsId}`, children: "Contour Percentiles" }) }), jsxRuntimeExports.jsx(TableCell$1, { className: classes.inputCell, variant: "body", children: jsxRuntimeExports.jsx(Slider$1, { classes: { root: classes.slider, valueLabel: classes.sliderValueLabel }, value: contourPercentiles || defaultContourPercentiles, onChange: handlePercentilesChangeDebounced, "aria-label": "Scatterplot sliders for contour percentile thresholds", id: `scatterplot-contour-percentiles-${scatterplotOptionsId}`, valueLabelDisplay: "auto", step: 5e-3, min: 9e-3, max: 0.999 }) })] })] });
+  }, children: [jsxRuntimeExports.jsx("option", { value: "sampleSetSelection", children: "Sample Sets" }), jsxRuntimeExports.jsxs("option", { value: "cellSetSelection", children: [observationsLabelNice, " Sets"] }), jsxRuntimeExports.jsx("option", { value: "staticColor", children: "Static Color" })] }) })] }), jsxRuntimeExports.jsxs(TableRow$1, { children: [jsxRuntimeExports.jsx(TableCell$1, { className: classes.labelCell, variant: "head", scope: "row", children: jsxRuntimeExports.jsx("label", { htmlFor: `scatterplot-contour-percentiles-${scatterplotOptionsId}`, children: "Contour Percentiles" }) }), jsxRuntimeExports.jsx(TableCell$1, { className: classes.inputCell, variant: "body", children: jsxRuntimeExports.jsx(Slider$1, { classes: { root: classes.slider, valueLabel: classes.sliderValueLabel }, value: contourPercentiles || defaultContourPercentiles, onChange: handlePercentilesChangeDebounced, "aria-label": "Scatterplot sliders for contour percentile thresholds", id: `scatterplot-contour-percentiles-${scatterplotOptionsId}`, valueLabelDisplay: "auto", step: 5e-3, min: 9e-3, max: 0.999 }) })] }), setFeatureAggregationStrategy ? jsxRuntimeExports.jsxs(TableRow$1, { children: [jsxRuntimeExports.jsx(TableCell$1, { className: classes.labelCell, variant: "head", scope: "row", children: jsxRuntimeExports.jsx("label", { htmlFor: `feature-aggregation-strategy-${scatterplotOptionsId}`, children: "Feature Aggregation Strategy" }) }), jsxRuntimeExports.jsx(TableCell$1, { className: classes.inputCell, variant: "body", children: jsxRuntimeExports.jsx(OptionSelect, { className: classes.select, value: featureAggregationStrategy ?? "first", onChange: handleFeatureAggregationStrategyChange, inputProps: {
+    id: `feature-aggregation-strategy-${scatterplotOptionsId}`
+  }, children: FEATURE_AGGREGATION_STRATEGIES.map((opt) => jsxRuntimeExports.jsx("option", { value: opt, children: capitalize$1(opt) }, opt)) }) })] }) : null] });
 }
 const styles10 = makeStyles((theme) => ({
   tooltipAnchor: {
@@ -152819,8 +152879,50 @@ const titleHeight = 10;
 const rectHeight = 8;
 const rectMarginY = 2;
 const rectMarginX = 2;
+function combineExtents(extents, featureAggregationStrategy) {
+  if (Array.isArray(extents)) {
+    if (featureAggregationStrategy === "first") {
+      return extents[0];
+    }
+    if (featureAggregationStrategy === "last") {
+      return extents.at(-1);
+    }
+    if (typeof featureAggregationStrategy === "number") {
+      const i2 = featureAggregationStrategy;
+      return extents[i2];
+    }
+    if (featureAggregationStrategy === "sum") {
+      return extents.reduce((a2, h) => [a2[0] + h[0], a2[1] + h[1]]);
+    }
+    if (featureAggregationStrategy === "mean") {
+      return extents.reduce((a2, h) => [a2[0] + h[0], a2[1] + h[1]]).map((v) => v / extents.length);
+    }
+  }
+  return null;
+}
+function combineMissings(missings, featureAggregationStrategy) {
+  if (Array.isArray(missings)) {
+    if (featureAggregationStrategy === "first") {
+      return missings[0];
+    }
+    if (featureAggregationStrategy === "last") {
+      return missings.at(-1);
+    }
+    if (typeof featureAggregationStrategy === "number") {
+      const i2 = featureAggregationStrategy;
+      return missings[i2];
+    }
+    if (featureAggregationStrategy === "sum") {
+      return missings.reduce((a2, h) => a2 + h, 0);
+    }
+    if (featureAggregationStrategy === "mean") {
+      return missings.reduce((a2, h) => a2 + h / missings.length, 0);
+    }
+  }
+  return null;
+}
 function Legend(props) {
-  const { visible: visibleProp, positionRelative = false, highContrast = false, obsType, featureValueType, considerSelections = true, obsColorEncoding, featureSelection, featureLabelsMap, featureValueColormap, featureValueColormapRange, spatialChannelColor, spatialLayerColor, obsSetSelection, obsSetColor, extent: extent2, missing, width = 100, height = 36, theme, showObsLabel = false, pointsVisible = true, contoursVisible = false, contoursFilled, contourPercentiles, contourThresholds } = props;
+  const { visible: visibleProp, positionRelative = false, highContrast = false, obsType, featureValueType, considerSelections = true, obsColorEncoding, featureSelection, featureLabelsMap, featureValueColormap, featureValueColormapRange, spatialChannelColor, spatialLayerColor, obsSetSelection, obsSetColor, featureAggregationStrategy, extent: extent2, missing, width = 100, height = 36, theme, showObsLabel = false, pointsVisible = true, contoursVisible = false, contoursFilled, contourPercentiles, contourThresholds } = props;
   const svgRef = useRef();
   const classes = useStyles();
   const isDarkTheme = theme === "dark";
@@ -152829,9 +152931,9 @@ function Legend(props) {
   const layerColor = Array.isArray(spatialLayerColor) && spatialLayerColor.length === 3 ? spatialLayerColor : getDefaultColor(theme);
   const channelColor = Array.isArray(spatialChannelColor) && spatialChannelColor.length === 3 ? spatialChannelColor : getDefaultColor(theme);
   const staticColor = obsColorEncoding === "spatialChannelColor" ? channelColor : layerColor;
-  const visible = visibleProp && (!considerSelections || obsColorEncoding === "geneSelection" && featureSelection && Array.isArray(featureSelection) && featureSelection.length === 1 || isSetColor && (obsSetSelection == null ? void 0 : obsSetSelection.length) > 0 && (obsSetColor == null ? void 0 : obsSetColor.length) > 0 || isStaticColor);
+  const visible = visibleProp && (!considerSelections || obsColorEncoding === "geneSelection" && featureSelection && Array.isArray(featureSelection) && featureSelection.length >= 1 || isSetColor && (obsSetSelection == null ? void 0 : obsSetSelection.length) > 0 && (obsSetColor == null ? void 0 : obsSetColor.length) > 0 || isStaticColor);
   const levelZeroNames = useMemo(() => Array.from(new Set((obsSetSelection == null ? void 0 : obsSetSelection.map((setPath) => setPath[0])) || [])), [obsSetSelection]);
-  const dynamicHeight = isSetColor ? levelZeroNames.length * titleHeight + (obsSetSelection == null ? void 0 : obsSetSelection.length) * (rectHeight + rectMarginY) : height + (!pointsVisible && contoursVisible ? 25 : 0);
+  const dynamicHeight = isSetColor && obsSetSelection ? levelZeroNames.length * titleHeight + (obsSetSelection == null ? void 0 : obsSetSelection.length) * (rectHeight + rectMarginY) : height + (!pointsVisible && contoursVisible ? 25 : 0);
   useEffect(() => {
     const domElement = svgRef.current;
     const foregroundColor = highContrast ? "black" : isDarkTheme ? "white" : "black";
@@ -152840,7 +152942,7 @@ function Legend(props) {
     svg.attr("width", width).attr("height", dynamicHeight);
     const g2 = svg.append("g").attr("width", width).attr("height", dynamicHeight);
     if (!considerSelections || obsColorEncoding === "geneSelection") {
-      const [xMin, xMax] = extent2 || [0, 1];
+      const [xMin, xMax] = combineExtents(extent2, featureAggregationStrategy) || [0, 1];
       if (featureValueColormap && pointsVisible) {
         const xlinkHref = getXlinkHref(featureValueColormap);
         g2.append("image").attr("x", 0).attr("y", titleHeight).attr("width", width).attr("height", rectHeight).attr("preserveAspectRatio", "none").attr("href", xlinkHref);
@@ -152904,8 +153006,19 @@ function Legend(props) {
         });
       });
     }
-    const featureSelectionLabelRaw = featureSelection && featureSelection.length >= 1 && !isStaticColor ? (featureLabelsMap == null ? void 0 : featureLabelsMap.get(featureSelection[0])) || (featureLabelsMap == null ? void 0 : featureLabelsMap.get(cleanFeatureId(featureSelection[0]))) || featureSelection[0] : null;
-    const featureSelectionLabel = missing ? `${featureSelectionLabelRaw} (${Math.round(missing * 100)}% NaN)` : featureSelectionLabelRaw;
+    const featureSelectionLabelRaw = featureSelection && featureSelection.length >= 1 && !isStaticColor ? featureSelection.map((geneName) => (featureLabelsMap == null ? void 0 : featureLabelsMap.get(geneName)) || (featureLabelsMap == null ? void 0 : featureLabelsMap.get(cleanFeatureId(geneName))) || geneName) : null;
+    let featureSelectionLabelRawStr = "";
+    if (featureAggregationStrategy === "first") {
+      featureSelectionLabelRawStr = featureSelectionLabelRaw == null ? void 0 : featureSelectionLabelRaw[0];
+    } else if (featureAggregationStrategy === "last") {
+      featureSelectionLabelRawStr = featureSelectionLabelRaw == null ? void 0 : featureSelectionLabelRaw.at(-1);
+    } else if (featureAggregationStrategy === "sum") {
+      featureSelectionLabelRawStr = "Sum of features";
+    } else if (featureAggregationStrategy === "mean") {
+      featureSelectionLabelRawStr = "Mean of features";
+    }
+    const combinedMissing = combineMissings(missing, featureAggregationStrategy);
+    const featureSelectionLabel = combinedMissing ? `${featureSelectionLabelRawStr} (${Math.round(combinedMissing * 100)}% NaN)` : featureSelectionLabelRawStr;
     const obsLabel = capitalize$1(obsType);
     const featureLabel = considerSelections ? featureSelectionLabel || capitalize$1(featureValueType) : capitalize$1(featureValueType);
     const mainLabel = showObsLabel ? obsLabel : featureLabel;
@@ -152939,7 +153052,8 @@ function Legend(props) {
     contourThresholds,
     contoursFilled,
     contoursVisible,
-    pointsVisible
+    pointsVisible,
+    featureAggregationStrategy
   ]);
   return jsxRuntimeExports.jsx("div", { className: clsx(classes.legend, {
     [classes.legendRelative]: positionRelative,
@@ -152981,6 +153095,7 @@ makeStyles(() => ({
   }
 }));
 const DEFAULT_CONTOUR_PERCENTILES = [0.09, 0.9, 0.99];
+const DEFAULT_FEATURE_AGGREGATION_STRATEGY = "first";
 function EmbeddingScatterplotSubscriber(props) {
   const {
     uuid,
@@ -153035,7 +153150,8 @@ function EmbeddingScatterplotSubscriber(props) {
     embeddingContoursFilled,
     embeddingContourPercentiles: contourPercentiles,
     contourColorEncoding,
-    contourColor
+    contourColor,
+    featureAggregationStrategy
   }, {
     setEmbeddingZoom: setZoom,
     setEmbeddingTargetX: setTargetX,
@@ -153061,7 +153177,8 @@ function EmbeddingScatterplotSubscriber(props) {
     setEmbeddingContoursVisible,
     setEmbeddingContoursFilled,
     setEmbeddingContourPercentiles: setContourPercentiles,
-    setContourColorEncoding
+    setContourColorEncoding,
+    setFeatureAggregationStrategy
   }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType$1.SCATTERPLOT], coordinationScopes);
   const {
     embeddingZoom: initialZoom,
@@ -153073,6 +153190,7 @@ function EmbeddingScatterplotSubscriber(props) {
   );
   const observationsLabel = observationsLabelOverride || obsType;
   const sampleSetSelection = sampleSetSelectionFromProps || sampleSetSelectionFromCoordination;
+  const featureAggregationStrategyToUse = featureAggregationStrategy ?? DEFAULT_FEATURE_AGGREGATION_STRATEGY;
   const [width, height, deckRef] = useDeckCanvasSize();
   const title = titleOverride || `Scatterplot (${mapping})`;
   const [obsLabelsTypes, obsLabelsData] = useMultiObsLabels(
@@ -153249,7 +153367,7 @@ function EmbeddingScatterplotSubscriber(props) {
     return [null, null, null, null, null];
   }, [obsEmbedding]);
   useEffect(() => {
-    if (xRange && yRange) {
+    if (xRange && yRange && width && height) {
       const pointSizeDevicePixels = getPointSizeDevicePixels(
         window.devicePixelRatio,
         zoom,
@@ -153342,6 +153460,9 @@ function EmbeddingScatterplotSubscriber(props) {
       originalViewState.target[1]
     ];
     const scaleFactor = 2 ** originalViewState.zoom;
+    if (!(typeof scaleFactor === "number" && typeof center2[0] === "number" && typeof center2[1] === "number") || Number.isNaN(scaleFactor)) {
+      return null;
+    }
     const radius = Math.min(width, height) / 2 / scaleFactor;
     const numPoints = 96;
     const options = { steps: numPoints, units: "degrees" };
@@ -153386,9 +153507,9 @@ function EmbeddingScatterplotSubscriber(props) {
     }
     return null;
   }, [sampleEdges]);
-  const stratifiedData = useMemo(() => {
+  const [stratifiedData, stratifiedDataCount] = useMemo(() => {
     if (alignedEmbeddingData == null ? void 0 : alignedEmbeddingData.data) {
-      const result = stratifyArrays(
+      const [result, cellCountResult] = stratifyArrays(
         sampleEdges,
         sampleIdToObsIdsMap,
         sampleSets,
@@ -153399,13 +153520,13 @@ function EmbeddingScatterplotSubscriber(props) {
         {
           obsEmbeddingX: alignedEmbeddingData.data[0],
           obsEmbeddingY: alignedEmbeddingData.data[1],
-          // TODO: aggregate and transform expression data if needed prior to passing here
-          ...(uint8ExpressionData == null ? void 0 : uint8ExpressionData[0]) ? { featureValue: uint8ExpressionData == null ? void 0 : uint8ExpressionData[0] } : {}
-        }
+          ...(uint8ExpressionData == null ? void 0 : uint8ExpressionData[0]) ? { featureValue: uint8ExpressionData } : {}
+        },
+        featureAggregationStrategyToUse
       );
-      return result;
+      return [result, cellCountResult];
     }
-    return null;
+    return [null, null];
   }, [
     alignedEmbeddingIndex,
     alignedEmbeddingData,
@@ -153415,7 +153536,8 @@ function EmbeddingScatterplotSubscriber(props) {
     sampleSets,
     sampleSetSelection,
     cellSetSelection,
-    mergedCellSets
+    mergedCellSets,
+    featureAggregationStrategyToUse
   ]);
   const setViewState = ({ zoom: newZoom, target }) => {
     setZoom(newZoom);
@@ -153423,11 +153545,12 @@ function EmbeddingScatterplotSubscriber(props) {
     setTargetY(target[1]);
     setTargetZ(target[2] || 0);
   };
+  const cellCountToUse = embeddingPointsVisible ? cellsCount : stratifiedDataCount ?? cellsCount;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     TitleInfo,
     {
       title,
-      info: `${commaNumber(cellsCount)} ${pluralize(observationsLabel, cellsCount)}`,
+      info: `${commaNumber(cellCountToUse)} ${pluralize(observationsLabel, cellCountToUse)}`,
       closeButtonVisible,
       downloadButtonVisible,
       removeGridComponent,
@@ -153471,7 +153594,9 @@ function EmbeddingScatterplotSubscriber(props) {
           setContourPercentiles,
           defaultContourPercentiles: DEFAULT_CONTOUR_PERCENTILES,
           contourColorEncoding,
-          setContourColorEncoding
+          setContourColorEncoding,
+          featureAggregationStrategy,
+          setFeatureAggregationStrategy
         }
       ),
       children: [
@@ -153523,7 +153648,7 @@ function EmbeddingScatterplotSubscriber(props) {
             featureSelection: geneSelection
           }
         ),
-        tooltipsVisible && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        tooltipsVisible && width && height ? /* @__PURE__ */ jsxRuntimeExports.jsx(
           ScatterplotTooltipSubscriber,
           {
             parentUuid: uuid,
@@ -153534,7 +153659,7 @@ function EmbeddingScatterplotSubscriber(props) {
             featureType,
             featureLabelsMap
           }
-        ),
+        ) : null,
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           Legend,
           {
@@ -153548,13 +153673,14 @@ function EmbeddingScatterplotSubscriber(props) {
             featureValueColormap: geneExpressionColormap,
             featureValueColormapRange: geneExpressionColormapRange,
             obsSetSelection: cellSetSelection,
-            extent: expressionExtents == null ? void 0 : expressionExtents[0],
-            missing: expressionMissing == null ? void 0 : expressionMissing[0],
+            extent: expressionExtents,
+            missing: expressionMissing,
             pointsVisible: embeddingPointsVisible,
             contoursVisible: embeddingContoursVisible,
             contoursFilled: embeddingContoursFilled,
             contourPercentiles: contourPercentiles || DEFAULT_CONTOUR_PERCENTILES,
-            contourThresholds
+            contourThresholds,
+            featureAggregationStrategy: featureAggregationStrategyToUse
           }
         )
       ]

package/dist/index.js

@@ -1,4 +1,4 @@
-import { D, E } from "./index-a37f30c8.js";
+import { D, E } from "./index-ab73546f.js";
 import "react";
 import "@vitessce/vit-s";
 import "react-dom";

package/dist/{jpeg-5927a952.js → jpeg-6b5f0200.js}

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

package/dist/{lerc-7a4fca51.js → lerc-6a84a90d.js}

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

package/dist/{lzw-ce001eff.js → lzw-ec516fe1.js}

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

package/dist/{packbits-075c055a.js → packbits-28d4e412.js}

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

package/dist/{raw-b648d255.js → raw-140846a5.js}

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

package/dist/{webimage-dec5407e.js → webimage-5e317232.js}

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

package/dist-tsc/EmbeddingScatterplotSubscriber.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EmbeddingScatterplotSubscriber.d.ts","sourceRoot":"","sources":["../src/EmbeddingScatterplotSubscriber.js"],"names":[],"mappings":"AA2CA;;;;;;;;;;;;GAYG;AACH,sDAVG;IAAsB,IAAI,EAAlB,MAAM;IACQ,KAAK,EAAnB,MAAM;IACQ,kBAAkB,EAAhC,MAAM;IAEU,mBAAmB;IAErB,KAAK,EAAnB,MAAM;IACQ,kBAAkB,EAAhC,MAAM;CAEhB,eAmjBA"}
+{"version":3,"file":"EmbeddingScatterplotSubscriber.d.ts","sourceRoot":"","sources":["../src/EmbeddingScatterplotSubscriber.js"],"names":[],"mappings":"AA4CA;;;;;;;;;;;;GAYG;AACH,sDAVG;IAAsB,IAAI,EAAlB,MAAM;IACQ,KAAK,EAAnB,MAAM;IACQ,kBAAkB,EAAhC,MAAM;IAEU,mBAAmB;IAErB,KAAK,EAAnB,MAAM;IACQ,kBAAkB,EAAhC,MAAM;CAEhB,eAkkBA"}

package/dist-tsc/EmbeddingScatterplotSubscriber.js

@@ -10,6 +10,7 @@ import { Scatterplot, ScatterplotTooltipSubscriber, ScatterplotOptions, getPoint
 import { Legend } from '@vitessce/legend';
 import { ViewType, COMPONENT_COORDINATION_TYPES, ViewHelpMapping } from '@vitessce/constants-internal';
 import { DEFAULT_CONTOUR_PERCENTILES } from './constants.js';
+const DEFAULT_FEATURE_AGGREGATION_STRATEGY = 'first';
 /**
  * A subscriber component for the scatterplot.
  * @param {object} props
@@ -33,11 +34,13 @@ export function EmbeddingScatterplotSubscriber(props) {
     const setComponentHover = useSetComponentHover();
     const setComponentViewInfo = useSetComponentViewInfo(uuid);
     // Get "props" from the coordination space.
-    const [{ dataset, obsType, featureType, featureValueType, sampleType, embeddingZoom: zoom, embeddingTargetX: targetX, embeddingTargetY: targetY, embeddingTargetZ: targetZ, embeddingType: mapping, obsFilter: cellFilter, obsHighlight: cellHighlight, featureSelection: geneSelection, obsSetSelection: cellSetSelection, obsSetColor: cellSetColor, obsColorEncoding: cellColorEncoding, additionalObsSets: additionalCellSets, embeddingObsSetPolygonsVisible: cellSetPolygonsVisible, embeddingObsSetLabelsVisible: cellSetLabelsVisible, embeddingObsSetLabelSize: cellSetLabelSize, embeddingObsRadius: cellRadiusFixed, embeddingObsRadiusMode: cellRadiusMode, embeddingObsOpacity: cellOpacityFixed, embeddingObsOpacityMode: cellOpacityMode, featureValueColormap: geneExpressionColormap, featureValueColormapRange: geneExpressionColormapRange, tooltipsVisible, sampleSetSelection: sampleSetSelectionFromCoordination, sampleSetColor, embeddingPointsVisible, embeddingContoursVisible, embeddingContoursFilled, embeddingContourPercentiles: contourPercentiles, contourColorEncoding, contourColor, }, { setEmbeddingZoom: setZoom, setEmbeddingTargetX: setTargetX, setEmbeddingTargetY: setTargetY, setEmbeddingTargetZ: setTargetZ, setObsFilter: setCellFilter, setObsSetSelection: setCellSetSelection, setObsHighlight: setCellHighlight, setObsSetColor: setCellSetColor, setObsColorEncoding: setCellColorEncoding, setAdditionalObsSets: setAdditionalCellSets, setEmbeddingObsSetPolygonsVisible: setCellSetPolygonsVisible, setEmbeddingObsSetLabelsVisible: setCellSetLabelsVisible, setEmbeddingObsSetLabelSize: setCellSetLabelSize, setEmbeddingObsRadius: setCellRadiusFixed, setEmbeddingObsRadiusMode: setCellRadiusMode, setEmbeddingObsOpacity: setCellOpacityFixed, setEmbeddingObsOpacityMode: setCellOpacityMode, setFeatureValueColormap: setGeneExpressionColormap, setFeatureValueColormapRange: setGeneExpressionColormapRange, setTooltipsVisible, setEmbeddingPointsVisible, setEmbeddingContoursVisible, setEmbeddingContoursFilled, setEmbeddingContourPercentiles: setContourPercentiles, setContourColorEncoding, }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType.SCATTERPLOT], coordinationScopes);
+    const [{ dataset, obsType, featureType, featureValueType, sampleType, embeddingZoom: zoom, embeddingTargetX: targetX, embeddingTargetY: targetY, embeddingTargetZ: targetZ, embeddingType: mapping, obsFilter: cellFilter, obsHighlight: cellHighlight, featureSelection: geneSelection, obsSetSelection: cellSetSelection, obsSetColor: cellSetColor, obsColorEncoding: cellColorEncoding, additionalObsSets: additionalCellSets, embeddingObsSetPolygonsVisible: cellSetPolygonsVisible, embeddingObsSetLabelsVisible: cellSetLabelsVisible, embeddingObsSetLabelSize: cellSetLabelSize, embeddingObsRadius: cellRadiusFixed, embeddingObsRadiusMode: cellRadiusMode, embeddingObsOpacity: cellOpacityFixed, embeddingObsOpacityMode: cellOpacityMode, featureValueColormap: geneExpressionColormap, featureValueColormapRange: geneExpressionColormapRange, tooltipsVisible, sampleSetSelection: sampleSetSelectionFromCoordination, sampleSetColor, embeddingPointsVisible, embeddingContoursVisible, embeddingContoursFilled, embeddingContourPercentiles: contourPercentiles, contourColorEncoding, contourColor, featureAggregationStrategy, }, { setEmbeddingZoom: setZoom, setEmbeddingTargetX: setTargetX, setEmbeddingTargetY: setTargetY, setEmbeddingTargetZ: setTargetZ, setObsFilter: setCellFilter, setObsSetSelection: setCellSetSelection, setObsHighlight: setCellHighlight, setObsSetColor: setCellSetColor, setObsColorEncoding: setCellColorEncoding, setAdditionalObsSets: setAdditionalCellSets, setEmbeddingObsSetPolygonsVisible: setCellSetPolygonsVisible, setEmbeddingObsSetLabelsVisible: setCellSetLabelsVisible, setEmbeddingObsSetLabelSize: setCellSetLabelSize, setEmbeddingObsRadius: setCellRadiusFixed, setEmbeddingObsRadiusMode: setCellRadiusMode, setEmbeddingObsOpacity: setCellOpacityFixed, setEmbeddingObsOpacityMode: setCellOpacityMode, setFeatureValueColormap: setGeneExpressionColormap, setFeatureValueColormapRange: setGeneExpressionColormapRange, setTooltipsVisible, setEmbeddingPointsVisible, setEmbeddingContoursVisible, setEmbeddingContoursFilled, setEmbeddingContourPercentiles: setContourPercentiles, setContourColorEncoding, setFeatureAggregationStrategy, }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType.SCATTERPLOT], coordinationScopes);
     const { embeddingZoom: initialZoom, embeddingTargetX: initialTargetX, embeddingTargetY: initialTargetY, } = useInitialCoordination(COMPONENT_COORDINATION_TYPES[ViewType.SCATTERPLOT], coordinationScopes);
     const observationsLabel = observationsLabelOverride || obsType;
     const sampleSetSelection = (sampleSetSelectionFromProps
         || sampleSetSelectionFromCoordination);
+    const featureAggregationStrategyToUse = featureAggregationStrategy
+        ?? DEFAULT_FEATURE_AGGREGATION_STRATEGY;
     const [width, height, deckRef] = useDeckCanvasSize();
     const title = titleOverride || `Scatterplot (${mapping})`;
     const [obsLabelsTypes, obsLabelsData] = useMultiObsLabels(coordinationScopes, obsType, loaders, dataset);
@@ -129,7 +132,7 @@ export function EmbeddingScatterplotSubscriber(props) {
     // compute the cell radius scale based on the
     // extents of the cell coordinates on the x/y axes.
     useEffect(() => {
-        if (xRange && yRange) {
+        if (xRange && yRange && width && height) {
             const pointSizeDevicePixels = getPointSizeDevicePixels(window.devicePixelRatio, zoom, xRange, yRange, width, height);
             setDynamicCellRadius(pointSizeDevicePixels);
             const nextCellOpacityScale = getPointOpacity(zoom, xRange, yRange, width, height, numCells, averageFillDensity);
@@ -204,6 +207,9 @@ export function EmbeddingScatterplotSubscriber(props) {
             originalViewState.target[1],
         ];
         const scaleFactor = (2 ** originalViewState.zoom);
+        if (!(typeof scaleFactor === 'number' && typeof center[0] === 'number' && typeof center[1] === 'number') || Number.isNaN(scaleFactor)) {
+            return null;
+        }
         const radius = Math.min(width, height) / 2 / scaleFactor;
         const numPoints = 96;
         const options = { steps: numPoints, units: 'degrees' };
@@ -263,20 +269,19 @@ export function EmbeddingScatterplotSubscriber(props) {
         return null;
     }, [sampleEdges]);
     // Stratify multiple arrays: per-cellSet and per-sampleSet.
-    const stratifiedData = useMemo(() => {
+    const [stratifiedData, stratifiedDataCount] = useMemo(() => {
         if (alignedEmbeddingData?.data) {
-            const result = stratifyArrays(sampleEdges, sampleIdToObsIdsMap, sampleSets, sampleSetSelection, alignedEmbeddingIndex, mergedCellSets, cellSetSelection, {
+            const [result, cellCountResult] = stratifyArrays(sampleEdges, sampleIdToObsIdsMap, sampleSets, sampleSetSelection, alignedEmbeddingIndex, mergedCellSets, cellSetSelection, {
                 obsEmbeddingX: alignedEmbeddingData.data[0],
                 obsEmbeddingY: alignedEmbeddingData.data[1],
-                // TODO: aggregate and transform expression data if needed prior to passing here
-                ...(uint8ExpressionData?.[0] ? { featureValue: uint8ExpressionData?.[0] } : {}),
-            });
-            return result;
+                ...(uint8ExpressionData?.[0] ? { featureValue: uint8ExpressionData } : {}),
+            }, featureAggregationStrategyToUse);
+            return [result, cellCountResult];
         }
-        return null;
+        return [null, null];
     }, [alignedEmbeddingIndex, alignedEmbeddingData, uint8ExpressionData,
         sampleEdges, sampleIdToObsIdsMap, sampleSets, sampleSetSelection,
-        cellSetSelection, mergedCellSets,
+        cellSetSelection, mergedCellSets, featureAggregationStrategyToUse,
     ]);
     const setViewState = ({ zoom: newZoom, target }) => {
         setZoom(newZoom);
@@ -284,12 +289,16 @@ export function EmbeddingScatterplotSubscriber(props) {
         setTargetY(target[1]);
         setTargetZ(target[2] || 0);
     };
-    return (_jsxs(TitleInfo, { title: title, info: `${commaNumber(cellsCount)} ${plur(observationsLabel, cellsCount)}`, closeButtonVisible: closeButtonVisible, downloadButtonVisible: downloadButtonVisible, removeGridComponent: removeGridComponent, urls: urls, theme: theme, isReady: isReady, helpText: helpText, options: (_jsx(ScatterplotOptions, { observationsLabel: observationsLabel, cellRadius: cellRadiusFixed, setCellRadius: setCellRadiusFixed, cellRadiusMode: cellRadiusMode, setCellRadiusMode: setCellRadiusMode, cellOpacity: cellOpacityFixed, setCellOpacity: setCellOpacityFixed, cellOpacityMode: cellOpacityMode, setCellOpacityMode: setCellOpacityMode, cellSetLabelsVisible: cellSetLabelsVisible, setCellSetLabelsVisible: setCellSetLabelsVisible, tooltipsVisible: tooltipsVisible, setTooltipsVisible: setTooltipsVisible, cellSetLabelSize: cellSetLabelSize, setCellSetLabelSize: setCellSetLabelSize, cellSetPolygonsVisible: cellSetPolygonsVisible, setCellSetPolygonsVisible: setCellSetPolygonsVisible, cellColorEncoding: cellColorEncoding, setCellColorEncoding: setCellColorEncoding, geneExpressionColormap: geneExpressionColormap, setGeneExpressionColormap: setGeneExpressionColormap, geneExpressionColormapRange: geneExpressionColormapRange, setGeneExpressionColormapRange: setGeneExpressionColormapRange, embeddingPointsVisible: embeddingPointsVisible, setEmbeddingPointsVisible: setEmbeddingPointsVisible, embeddingContoursVisible: embeddingContoursVisible, setEmbeddingContoursVisible: setEmbeddingContoursVisible, embeddingContoursFilled: embeddingContoursFilled, setEmbeddingContoursFilled: setEmbeddingContoursFilled, contourPercentiles: contourPercentiles, setContourPercentiles: setContourPercentiles, defaultContourPercentiles: DEFAULT_CONTOUR_PERCENTILES, contourColorEncoding: contourColorEncoding, setContourColorEncoding: setContourColorEncoding })), children: [_jsx(Scatterplot, { ref: deckRef, uuid: uuid, theme: theme, viewState: { zoom, target: [targetX, targetY, targetZ] }, setViewState: setViewState, originalViewState: originalViewState, obsEmbeddingIndex: obsEmbeddingIndex, obsEmbedding: obsEmbedding, cellFilter: cellFilter, cellSelection: cellSelection, cellHighlight: cellHighlight, cellColors: cellColors, cellSetPolygons: cellSetPolygons, cellSetLabelSize: cellSetLabelSize, cellSetLabelsVisible: cellSetLabelsVisible, cellSetPolygonsVisible: cellSetPolygonsVisible, setCellFilter: setCellFilter, setCellSelection: setCellSelectionProp, setCellHighlight: setCellHighlight, cellRadius: cellRadius, cellOpacity: cellOpacity, cellColorEncoding: cellColorEncoding, geneExpressionColormap: geneExpressionColormap, geneExpressionColormapRange: geneExpressionColormapRange, setComponentHover: () => {
+    // TODO: Update this once the rendered points reflects the selection/filtering.
+    const cellCountToUse = embeddingPointsVisible
+        ? cellsCount
+        : (stratifiedDataCount ?? cellsCount);
+    return (_jsxs(TitleInfo, { title: title, info: `${commaNumber(cellCountToUse)} ${plur(observationsLabel, cellCountToUse)}`, closeButtonVisible: closeButtonVisible, downloadButtonVisible: downloadButtonVisible, removeGridComponent: removeGridComponent, urls: urls, theme: theme, isReady: isReady, helpText: helpText, options: (_jsx(ScatterplotOptions, { observationsLabel: observationsLabel, cellRadius: cellRadiusFixed, setCellRadius: setCellRadiusFixed, cellRadiusMode: cellRadiusMode, setCellRadiusMode: setCellRadiusMode, cellOpacity: cellOpacityFixed, setCellOpacity: setCellOpacityFixed, cellOpacityMode: cellOpacityMode, setCellOpacityMode: setCellOpacityMode, cellSetLabelsVisible: cellSetLabelsVisible, setCellSetLabelsVisible: setCellSetLabelsVisible, tooltipsVisible: tooltipsVisible, setTooltipsVisible: setTooltipsVisible, cellSetLabelSize: cellSetLabelSize, setCellSetLabelSize: setCellSetLabelSize, cellSetPolygonsVisible: cellSetPolygonsVisible, setCellSetPolygonsVisible: setCellSetPolygonsVisible, cellColorEncoding: cellColorEncoding, setCellColorEncoding: setCellColorEncoding, geneExpressionColormap: geneExpressionColormap, setGeneExpressionColormap: setGeneExpressionColormap, geneExpressionColormapRange: geneExpressionColormapRange, setGeneExpressionColormapRange: setGeneExpressionColormapRange, embeddingPointsVisible: embeddingPointsVisible, setEmbeddingPointsVisible: setEmbeddingPointsVisible, embeddingContoursVisible: embeddingContoursVisible, setEmbeddingContoursVisible: setEmbeddingContoursVisible, embeddingContoursFilled: embeddingContoursFilled, setEmbeddingContoursFilled: setEmbeddingContoursFilled, contourPercentiles: contourPercentiles, setContourPercentiles: setContourPercentiles, defaultContourPercentiles: DEFAULT_CONTOUR_PERCENTILES, contourColorEncoding: contourColorEncoding, setContourColorEncoding: setContourColorEncoding, featureAggregationStrategy: featureAggregationStrategy, setFeatureAggregationStrategy: setFeatureAggregationStrategy })), children: [_jsx(Scatterplot, { ref: deckRef, uuid: uuid, theme: theme, viewState: { zoom, target: [targetX, targetY, targetZ] }, setViewState: setViewState, originalViewState: originalViewState, obsEmbeddingIndex: obsEmbeddingIndex, obsEmbedding: obsEmbedding, cellFilter: cellFilter, cellSelection: cellSelection, cellHighlight: cellHighlight, cellColors: cellColors, cellSetPolygons: cellSetPolygons, cellSetLabelSize: cellSetLabelSize, cellSetLabelsVisible: cellSetLabelsVisible, cellSetPolygonsVisible: cellSetPolygonsVisible, setCellFilter: setCellFilter, setCellSelection: setCellSelectionProp, setCellHighlight: setCellHighlight, cellRadius: cellRadius, cellOpacity: cellOpacity, cellColorEncoding: cellColorEncoding, geneExpressionColormap: geneExpressionColormap, geneExpressionColormapRange: geneExpressionColormapRange, setComponentHover: () => {
                     setComponentHover(uuid);
                 }, updateViewInfo: setComponentViewInfo, getExpressionValue: getExpressionValue, getCellIsSelected: getCellIsSelected, obsSetSelection: cellSetSelection, sampleSetSelection: sampleSetSelection, 
                 // InternMap data structures where keys are
                 // obsSet -> sampleSet -> arrayKey -> [].
-                stratifiedData: stratifiedData, obsSetColor: cellSetColor, sampleSetColor: sampleSetColor, contourThresholds: contourThresholds, contourColorEncoding: contourColorEncoding, contourColor: contourColor, contoursFilled: embeddingContoursFilled, embeddingPointsVisible: embeddingPointsVisible, embeddingContoursVisible: embeddingContoursVisible, circleInfo: circleInfo, featureSelection: geneSelection }), tooltipsVisible && (_jsx(ScatterplotTooltipSubscriber, { parentUuid: uuid, obsHighlight: cellHighlight, width: width, height: height, getObsInfo: getObsInfo, featureType: featureType, featureLabelsMap: featureLabelsMap })), _jsx(Legend, { visible: true, theme: theme, featureType: featureType, featureValueType: featureValueType, obsColorEncoding: cellColorEncoding, featureSelection: geneSelection, featureLabelsMap: featureLabelsMap, featureValueColormap: geneExpressionColormap, featureValueColormapRange: geneExpressionColormapRange, obsSetSelection: cellSetSelection, extent: expressionExtents?.[0], missing: expressionMissing?.[0], 
+                stratifiedData: stratifiedData, obsSetColor: cellSetColor, sampleSetColor: sampleSetColor, contourThresholds: contourThresholds, contourColorEncoding: contourColorEncoding, contourColor: contourColor, contoursFilled: embeddingContoursFilled, embeddingPointsVisible: embeddingPointsVisible, embeddingContoursVisible: embeddingContoursVisible, circleInfo: circleInfo, featureSelection: geneSelection }), tooltipsVisible && width && height ? (_jsx(ScatterplotTooltipSubscriber, { parentUuid: uuid, obsHighlight: cellHighlight, width: width, height: height, getObsInfo: getObsInfo, featureType: featureType, featureLabelsMap: featureLabelsMap })) : null, _jsx(Legend, { visible: true, theme: theme, featureType: featureType, featureValueType: featureValueType, obsColorEncoding: cellColorEncoding, featureSelection: geneSelection, featureLabelsMap: featureLabelsMap, featureValueColormap: geneExpressionColormap, featureValueColormapRange: geneExpressionColormapRange, obsSetSelection: cellSetSelection, extent: expressionExtents, missing: expressionMissing, 
                 // Contour percentile legend
-                pointsVisible: embeddingPointsVisible, contoursVisible: embeddingContoursVisible, contoursFilled: embeddingContoursFilled, contourPercentiles: contourPercentiles || DEFAULT_CONTOUR_PERCENTILES, contourThresholds: contourThresholds })] }));
+                pointsVisible: embeddingPointsVisible, contoursVisible: embeddingContoursVisible, contoursFilled: embeddingContoursFilled, contourPercentiles: contourPercentiles || DEFAULT_CONTOUR_PERCENTILES, contourThresholds: contourThresholds, featureAggregationStrategy: featureAggregationStrategyToUse })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitessce/scatterplot-embedding",
-  "version": "3.5.10",
+  "version": "3.5.11",
   "author": "HIDIVE Lab at HMS",
   "homepage": "http://vitessce.io",
   "repository": {
@@ -21,12 +21,12 @@
     "lodash-es": "^4.17.21",
     "react-aria": "^3.28.0",
     "@turf/circle": "^7.2.0",
-    "@vitessce/constants-internal": "3.5.10",
-    "@vitessce/legend": "3.5.10",
-    "@vitessce/scatterplot": "3.5.10",
-    "@vitessce/sets-utils": "3.5.10",
-    "@vitessce/utils": "3.5.10",
-    "@vitessce/vit-s": "3.5.10"
+    "@vitessce/constants-internal": "3.5.11",
+    "@vitessce/legend": "3.5.11",
+    "@vitessce/scatterplot": "3.5.11",
+    "@vitessce/sets-utils": "3.5.11",
+    "@vitessce/utils": "3.5.11",
+    "@vitessce/vit-s": "3.5.11"
   },
   "devDependencies": {
     "react": "^18.0.0",

package/src/EmbeddingScatterplotSubscriber.js

@@ -40,6 +40,7 @@ import { Legend } from '@vitessce/legend';
 import { ViewType, COMPONENT_COORDINATION_TYPES, ViewHelpMapping } from '@vitessce/constants-internal';
 import { DEFAULT_CONTOUR_PERCENTILES } from './constants.js';
 
+const DEFAULT_FEATURE_AGGREGATION_STRATEGY = 'first';
 
 /**
  * A subscriber component for the scatterplot.
@@ -113,6 +114,7 @@ export function EmbeddingScatterplotSubscriber(props) {
     embeddingContourPercentiles: contourPercentiles,
     contourColorEncoding,
     contourColor,
+    featureAggregationStrategy,
   }, {
     setEmbeddingZoom: setZoom,
     setEmbeddingTargetX: setTargetX,
@@ -139,6 +141,7 @@ export function EmbeddingScatterplotSubscriber(props) {
     setEmbeddingContoursFilled,
     setEmbeddingContourPercentiles: setContourPercentiles,
     setContourColorEncoding,
+    setFeatureAggregationStrategy,
   }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType.SCATTERPLOT], coordinationScopes);
 
   const {
@@ -155,6 +158,9 @@ export function EmbeddingScatterplotSubscriber(props) {
     || sampleSetSelectionFromCoordination
   );
 
+  const featureAggregationStrategyToUse = featureAggregationStrategy
+    ?? DEFAULT_FEATURE_AGGREGATION_STRATEGY;
+
   const [width, height, deckRef] = useDeckCanvasSize();
 
   const title = titleOverride || `Scatterplot (${mapping})`;
@@ -299,7 +305,7 @@ export function EmbeddingScatterplotSubscriber(props) {
   // compute the cell radius scale based on the
   // extents of the cell coordinates on the x/y axes.
   useEffect(() => {
-    if (xRange && yRange) {
+    if (xRange && yRange && width && height) {
       const pointSizeDevicePixels = getPointSizeDevicePixels(
         window.devicePixelRatio, zoom, xRange, yRange, width, height,
       );
@@ -395,6 +401,9 @@ export function EmbeddingScatterplotSubscriber(props) {
       originalViewState.target[1],
     ];
     const scaleFactor = (2 ** originalViewState.zoom);
+    if (!(typeof scaleFactor === 'number' && typeof center[0] === 'number' && typeof center[1] === 'number') || Number.isNaN(scaleFactor)) {
+      return null;
+    }
     const radius = Math.min(width, height) / 2 / scaleFactor;
     const numPoints = 96;
     const options = { steps: numPoints, units: 'degrees' };
@@ -457,24 +466,23 @@ export function EmbeddingScatterplotSubscriber(props) {
   }, [sampleEdges]);
 
   // Stratify multiple arrays: per-cellSet and per-sampleSet.
-  const stratifiedData = useMemo(() => {
+  const [stratifiedData, stratifiedDataCount] = useMemo(() => {
     if (alignedEmbeddingData?.data) {
-      const result = stratifyArrays(
+      const [result, cellCountResult] = stratifyArrays(
         sampleEdges, sampleIdToObsIdsMap,
         sampleSets, sampleSetSelection,
         alignedEmbeddingIndex, mergedCellSets, cellSetSelection, {
           obsEmbeddingX: alignedEmbeddingData.data[0],
           obsEmbeddingY: alignedEmbeddingData.data[1],
-          // TODO: aggregate and transform expression data if needed prior to passing here
-          ...(uint8ExpressionData?.[0] ? { featureValue: uint8ExpressionData?.[0] } : {}),
-        },
+          ...(uint8ExpressionData?.[0] ? { featureValue: uint8ExpressionData } : {}),
+        }, featureAggregationStrategyToUse,
       );
-      return result;
+      return [result, cellCountResult];
     }
-    return null;
+    return [null, null];
   }, [alignedEmbeddingIndex, alignedEmbeddingData, uint8ExpressionData,
     sampleEdges, sampleIdToObsIdsMap, sampleSets, sampleSetSelection,
-    cellSetSelection, mergedCellSets,
+    cellSetSelection, mergedCellSets, featureAggregationStrategyToUse,
   ]);
 
   const setViewState = ({ zoom: newZoom, target }) => {
@@ -484,10 +492,15 @@ export function EmbeddingScatterplotSubscriber(props) {
     setTargetZ(target[2] || 0);
   };
 
+  // TODO: Update this once the rendered points reflects the selection/filtering.
+  const cellCountToUse = embeddingPointsVisible
+    ? cellsCount
+    : (stratifiedDataCount ?? cellsCount);
+
   return (
     <TitleInfo
       title={title}
-      info={`${commaNumber(cellsCount)} ${plur(observationsLabel, cellsCount)}`}
+      info={`${commaNumber(cellCountToUse)} ${plur(observationsLabel, cellCountToUse)}`}
       closeButtonVisible={closeButtonVisible}
       downloadButtonVisible={downloadButtonVisible}
       removeGridComponent={removeGridComponent}
@@ -531,6 +544,8 @@ export function EmbeddingScatterplotSubscriber(props) {
           defaultContourPercentiles={DEFAULT_CONTOUR_PERCENTILES}
           contourColorEncoding={contourColorEncoding}
           setContourColorEncoding={setContourColorEncoding}
+          featureAggregationStrategy={featureAggregationStrategy}
+          setFeatureAggregationStrategy={setFeatureAggregationStrategy}
         />
       )}
     >
@@ -583,17 +598,17 @@ export function EmbeddingScatterplotSubscriber(props) {
         circleInfo={circleInfo}
         featureSelection={geneSelection}
       />
-      {tooltipsVisible && (
-      <ScatterplotTooltipSubscriber
-        parentUuid={uuid}
-        obsHighlight={cellHighlight}
-        width={width}
-        height={height}
-        getObsInfo={getObsInfo}
-        featureType={featureType}
-        featureLabelsMap={featureLabelsMap}
-      />
-      )}
+      {tooltipsVisible && width && height ? (
+        <ScatterplotTooltipSubscriber
+          parentUuid={uuid}
+          obsHighlight={cellHighlight}
+          width={width}
+          height={height}
+          getObsInfo={getObsInfo}
+          featureType={featureType}
+          featureLabelsMap={featureLabelsMap}
+        />
+      ) : null}
       <Legend
         visible
         theme={theme}
@@ -605,14 +620,15 @@ export function EmbeddingScatterplotSubscriber(props) {
         featureValueColormap={geneExpressionColormap}
         featureValueColormapRange={geneExpressionColormapRange}
         obsSetSelection={cellSetSelection}
-        extent={expressionExtents?.[0]}
-        missing={expressionMissing?.[0]}
+        extent={expressionExtents}
+        missing={expressionMissing}
         // Contour percentile legend
         pointsVisible={embeddingPointsVisible}
         contoursVisible={embeddingContoursVisible}
         contoursFilled={embeddingContoursFilled}
         contourPercentiles={contourPercentiles || DEFAULT_CONTOUR_PERCENTILES}
         contourThresholds={contourThresholds}
+        featureAggregationStrategy={featureAggregationStrategyToUse}
       />
     </TitleInfo>
   );