@vitessce/scatterplot 3.5.9 → 3.5.11

package/dist/index.js

@@ -1,4 +1,4 @@
-import { A, E, S, a, b, f, e, d, c } from "./index-6f1ecd35.js";
+import { A, E, S, a, b, f, e, d, c } from "./index-54d5c6e0.js";
 import "react";
 import "@vitessce/vit-s";
 import "react-dom";

package/dist/{jpeg-6a951bc6.js → jpeg-8d0a6c28.js}

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

package/dist/{lerc-36211a81.js → lerc-71eafedf.js}

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

package/dist/{lzw-cdee9c4e.js → lzw-7efc2185.js}

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

package/dist/{packbits-7bc2030b.js → packbits-4c889da6.js}

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

package/dist/{raw-8e26cce5.js → raw-4aa2df23.js}

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

package/dist/{webimage-d457d41a.js → webimage-19762a61.js}

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

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

@@ -1 +1 @@
-{"version":3,"file":"Scatterplot.d.ts","sourceRoot":"","sources":["../src/Scatterplot.js"],"names":[],"mappings":";AA+hBA;;;;;;GAMG;AACH,sCAKG"}
+{"version":3,"file":"Scatterplot.d.ts","sourceRoot":"","sources":["../src/Scatterplot.js"],"names":[],"mappings":";AA0kBA;;;;;;GAMG;AACH,sCAKG"}

package/dist-tsc/Scatterplot.js

@@ -3,7 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React, { forwardRef } from 'react';
 import { forceSimulation } from 'd3-force';
 import { isEqual } from 'lodash-es';
-import { deck, getSelectionLayer, ScaledExpressionExtension, SelectionExtension, } from '@vitessce/gl';
+import { deck, getSelectionLayer, ScaledExpressionExtension, SelectionExtension, ContourLayerWithText, } from '@vitessce/gl';
 import { getDefaultColor } from '@vitessce/utils';
 import { AbstractSpatialOrScatterplot, createQuadTree, forceCollideRects, getOnHoverCallback, } from './shared-spatial-scatterplot/index.js';
 const CELLS_LAYER_ID = 'scatterplot';
@@ -41,7 +41,7 @@ const getPosition = (object, { index, data, target }) => {
     target[2] = POINT_LAYER_Z_INDEX;
     return target;
 };
-const contourGetWeight = (object, { index, data }) => data.src.featureValues[index];
+const contourGetWeight = (object, { index, data }) => data.src.featureValues?.[index];
 const contourGetPosition = (object, { index, data, target }) => {
     target[0] = data.src.embeddingX[index];
     target[1] = -data.src.embeddingY[index];
@@ -108,7 +108,11 @@ class Scatterplot extends AbstractSpatialOrScatterplot {
     // - Array of per-selected-sampleSet layers (filter to sampleSet members)
     // - Array of per-sampleSet, per-obsSet layers (filter to sampleSet and obsSet members)
     createContourLayers() {
-        const { theme, obsSetColor, sampleSetColor, contourColorEncoding, contourThresholds, contoursFilled, contourColor: contourColorProp, } = this.props;
+        const { theme, obsSetColor, sampleSetColor, contourColorEncoding, contourThresholds, contoursFilled, contourColor: contourColorProp, circleInfo, cellSetLabelsVisible, cellSetLabelSize, featureSelection, } = this.props;
+        const circlePointSet = new Set();
+        const [getWeight, aggregation] = Array.isArray(featureSelection) && featureSelection.length > 0
+            ? ([contourGetWeight, 'MEAN'])
+            : ([1, 'COUNT']);
         const layers = Array.from(this.stratifiedData.entries())
             .flatMap(([obsSetKey, sampleSetMap]) => Array.from(sampleSetMap.entries())
             .map(([sampleSetKey, arrs]) => {
@@ -127,30 +131,34 @@ class Scatterplot extends AbstractSpatialOrScatterplot {
                 contourColor = (sampleSetColor?.find(d => isEqual(sampleSetKey, d.path))?.color
                     || contourColor);
             }
-            return new deck.ContourLayer({
+            const contours = contourThresholds.map((threshold, i) => ({
+                i,
+                threshold: (contoursFilled ? [threshold, threshold[i + 1] || Infinity] : threshold),
+                // TODO: should the opacity steps be uniform? Should align with human perception.
+                // TODO: support usage of static colors.
+                color: [
+                    // r, g, b
+                    ...contourColor,
+                    // a
+                    (contoursFilled
+                        ? ((i + 0.5) / contourThresholds.length * 255)
+                        : ((i + 1) / (contourThresholds.length)) * 255),
+                ],
+                strokeWidth: 2,
+                // We need to specify a greater z-index so that the contour layers
+                // will render on top of the point layer.
+                zIndex: POINT_LAYER_Z_INDEX + 1 + i,
+            }));
+            return new ContourLayerWithText({
                 id: `contour-${JSON.stringify(obsSetKey)}-${JSON.stringify(sampleSetKey)}`,
                 coordinateSystem: deck.COORDINATE_SYSTEM.CARTESIAN,
                 data: deckData,
-                getWeight: contourGetWeight,
+                getWeight,
                 getPosition: contourGetPosition,
-                contours: contourThresholds.map((threshold, i) => ({
-                    threshold: (contoursFilled ? [threshold, threshold[i + 1] || Infinity] : threshold),
-                    // TODO: should the opacity steps be uniform? Should align with human perception.
-                    // TODO: support usage of static colors.
-                    color: [
-                        // r, g, b
-                        ...contourColor,
-                        // a
-                        (contoursFilled
-                            ? ((i + 0.5) / contourThresholds.length * 255)
-                            : ((i + 1) / (contourThresholds.length)) * 255),
-                    ],
-                    strokeWidth: 2,
-                    // We need to specify a greater z-index so that the contour layers
-                    // will render on top of the point layer.
-                    zIndex: POINT_LAYER_Z_INDEX + 1 + i,
-                })),
-                aggregation: 'MEAN',
+                obsSetPath: obsSetKey,
+                sampleSetPath: sampleSetKey,
+                contours,
+                aggregation,
                 gpuAggregation: true,
                 visible: true,
                 pickable: false,
@@ -158,6 +166,14 @@ class Scatterplot extends AbstractSpatialOrScatterplot {
                 filled: contoursFilled,
                 cellSize: 0.25,
                 zOffset: 0.005,
+                // Info for text/line rendering
+                circleInfo,
+                circlePointSet,
+                obsSetLabelsVisible: cellSetLabelsVisible,
+                obsSetLabelSize: cellSetLabelSize,
+                updateTriggers: {
+                    getWeight: [getWeight],
+                },
             });
         }));
         return layers;
@@ -349,11 +365,16 @@ class Scatterplot extends AbstractSpatialOrScatterplot {
         }
     }
     onUpdateCellSetsLayers(onlyViewStateChange) {
-        // Because the label sizes for the force simulation depend on the zoom level,
-        // we _could_ run the simulation every time the zoom level changes.
-        // However, this has a performance impact in firefox.
-        if (onlyViewStateChange) {
-            const { viewState, cellSetLabelsVisible } = this.props;
+        const { viewState, cellSetLabelsVisible, embeddingContoursVisible } = this.props;
+        if (embeddingContoursVisible) {
+            // If rendering contours, we do not want to render text labels using this method,
+            // as the ContourLayerWithText implements its own text labeling internally.
+            this.cellSetsLayers = [];
+        }
+        else if (onlyViewStateChange) {
+            // Because the label sizes for the force simulation depend on the zoom level,
+            // we _could_ run the simulation every time the zoom level changes.
+            // However, this has a performance impact in firefox.
             const { zoom } = viewState;
             const { cellSetsLabelPrevZoom } = this;
             // Instead, we can just check if the zoom level has changed
@@ -378,6 +399,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,
@@ -412,7 +443,11 @@ class Scatterplot extends AbstractSpatialOrScatterplot {
             this.onUpdateCellsLayer();
             forceUpdate = true;
         }
-        if (['stratifiedData', 'contourColorEncoding', 'contoursFilled', 'contourThresholds', 'embeddingContoursVisible'].some(shallowDiff)) {
+        if ([
+            'stratifiedData', 'contourColorEncoding', 'contoursFilled',
+            'contourThresholds', 'embeddingContoursVisible',
+            'cellSetLabelsVisible', 'cellSetLabelSize',
+        ].some(shallowDiff)) {
             // Cells data changed.
             this.onUpdateContourLayers();
             forceUpdate = true;
@@ -420,6 +455,7 @@ class Scatterplot extends AbstractSpatialOrScatterplot {
         if ([
             'cellSetPolygons', 'cellSetPolygonsVisible',
             'cellSetLabelsVisible', 'cellSetLabelSize',
+            'embeddingContoursVisible',
         ].some(shallowDiff)) {
             // Cell sets layer props changed.
             this.onUpdateCellSetsLayers(false);

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

@@ -1 +1 @@
-{"version":3,"file":"ScatterplotOptions.d.ts","sourceRoot":"","sources":["../src/ScatterplotOptions.js"],"names":[],"mappings":"AAUA,oEAqdC"}
+{"version":3,"file":"ScatterplotOptions.d.ts","sourceRoot":"","sources":["../src/ScatterplotOptions.js"],"names":[],"mappings":"AAYA,oEAufC"}

package/dist-tsc/ScatterplotOptions.js

@@ -6,8 +6,9 @@ import { Checkbox, Slider, TableCell, TableRow } from '@material-ui/core';
 import { capitalize } from '@vitessce/utils';
 import { usePlotOptionsStyles, CellColorEncodingOption, OptionsContainer, OptionSelect, } from '@vitessce/vit-s';
 import { GLSL_COLORMAPS } from '@vitessce/gl';
+const FEATURE_AGGREGATION_STRATEGIES = ['first', 'last', 'sum', 'mean'];
 export default function ScatterplotOptions(props) {
-    const { children, 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, 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 = useId();
     const observationsLabelNice = capitalize(observationsLabel);
     const classes = usePlotOptionsStyles();
@@ -58,6 +59,9 @@ export default function ScatterplotOptions(props) {
         setContourPercentiles(values);
     }
     const handlePercentilesChangeDebounced = useCallback(debounce(handlePercentilesChange, 5, { trailing: true }), [handlePercentilesChange]);
+    function handleFeatureAggregationStrategyChange(event) {
+        setFeatureAggregationStrategy(event.target.value);
+    }
     return (_jsxs(OptionsContainer, { children: [children, _jsx(CellColorEncodingOption, { observationsLabel: observationsLabel, cellColorEncoding: cellColorEncoding, setCellColorEncoding: setCellColorEncoding }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsxs("label", { htmlFor: `scatterplot-set-labels-visible-${scatterplotOptionsId}`, children: [observationsLabelNice, " Set Labels Visible"] }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsx(Checkbox, { 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}`,
@@ -93,5 +97,7 @@ export default function ScatterplotOptions(props) {
                                 id: `scatterplot-contours-filled-${scatterplotOptionsId}`,
                             } }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsx("label", { htmlFor: `scatterplot-contour-color-encoding-${scatterplotOptionsId}`, children: "Contour Color Encoding" }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsxs(OptionSelect, { className: classes.select, value: contourColorEncoding, onChange: handleContourColorEncodingChange, inputProps: {
                                 id: `scatterplot-contour-color-encoding-${scatterplotOptionsId}`,
-                            }, children: [_jsx("option", { value: "sampleSetSelection", children: "Sample Sets" }), _jsxs("option", { value: "cellSetSelection", children: [observationsLabelNice, " Sets"] }), _jsx("option", { value: "staticColor", children: "Static Color" })] }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsx("label", { htmlFor: `scatterplot-contour-percentiles-${scatterplotOptionsId}`, children: "Contour Percentiles" }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsx(Slider, { 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: 0.005, min: 0.009, max: 0.999 }) })] })] }));
+                            }, children: [_jsx("option", { value: "sampleSetSelection", children: "Sample Sets" }), _jsxs("option", { value: "cellSetSelection", children: [observationsLabelNice, " Sets"] }), _jsx("option", { value: "staticColor", children: "Static Color" })] }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsx("label", { htmlFor: `scatterplot-contour-percentiles-${scatterplotOptionsId}`, children: "Contour Percentiles" }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsx(Slider, { 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: 0.005, min: 0.009, max: 0.999 }) })] }), setFeatureAggregationStrategy ? (_jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsx("label", { htmlFor: `feature-aggregation-strategy-${scatterplotOptionsId}`, children: "Feature Aggregation Strategy" }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsx(OptionSelect, { className: classes.select, value: featureAggregationStrategy ?? 'first', onChange: handleFeatureAggregationStrategyChange, inputProps: {
+                                id: `feature-aggregation-strategy-${scatterplotOptionsId}`,
+                            }, children: FEATURE_AGGREGATION_STRATEGIES.map(opt => (_jsx("option", { value: opt, children: capitalize(opt) }, opt))) }) })] })) : null] }));
 }

package/dist-tsc/shared-spatial-scatterplot/dynamic-opacity.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dynamic-opacity.d.ts","sourceRoot":"","sources":["../../src/shared-spatial-scatterplot/dynamic-opacity.js"],"names":[],"mappings":"AAKA,mIA0BC;AAGD,uIAuBC"}
+{"version":3,"file":"dynamic-opacity.d.ts","sourceRoot":"","sources":["../../src/shared-spatial-scatterplot/dynamic-opacity.js"],"names":[],"mappings":"AAKA,mIA0BC;AAGD,uIA6BC"}

package/dist-tsc/shared-spatial-scatterplot/dynamic-opacity.js

@@ -24,11 +24,20 @@ export function getPointSizeDevicePixels(devicePixelRatio, zoom, xRange, yRange,
 // Reference: https://observablehq.com/@rreusser/selecting-the-right-opacity-for-2d-point-clouds
 export function getPointOpacity(zoom, xRange, yRange, width, height, numCells, avgFillDensity) {
     const N = numCells;
-    const [minX, minY, maxX, maxY] = new deck.OrthographicView({ zoom }).makeViewport({
-        height,
-        width,
-        viewState: { zoom, target: [0, 0, 0] },
-    }).getBounds();
+    let minX;
+    let minY;
+    let maxX;
+    let maxY;
+    try {
+        [minX, minY, maxX, maxY] = new deck.OrthographicView({ zoom }).makeViewport({
+            height,
+            width,
+            viewState: { zoom, target: [0, 0, 0] },
+        }).getBounds();
+    }
+    catch {
+        return 1.0;
+    }
     const X = maxY - minY;
     const Y = maxX - minX;
     const X0 = xRange;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitessce/scatterplot",
-  "version": "3.5.9",
+  "version": "3.5.11",
   "author": "HIDIVE Lab at HMS",
   "homepage": "http://vitessce.io",
   "repository": {
@@ -23,12 +23,12 @@
     "d3-quadtree": "^1.0.7",
     "lodash-es": "^4.17.21",
     "react-aria": "^3.28.0",
-    "@vitessce/constants-internal": "3.5.9",
-    "@vitessce/gl": "3.5.9",
-    "@vitessce/icons": "3.5.9",
-    "@vitessce/tooltip": "3.5.9",
-    "@vitessce/utils": "3.5.9",
-    "@vitessce/vit-s": "3.5.9"
+    "@vitessce/constants-internal": "3.5.11",
+    "@vitessce/gl": "3.5.11",
+    "@vitessce/icons": "3.5.11",
+    "@vitessce/tooltip": "3.5.11",
+    "@vitessce/utils": "3.5.11",
+    "@vitessce/vit-s": "3.5.11"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.16.4",

package/src/Scatterplot.js

@@ -4,6 +4,7 @@ import { forceSimulation } from 'd3-force';
 import { isEqual } from 'lodash-es';
 import {
   deck, getSelectionLayer, ScaledExpressionExtension, SelectionExtension,
+  ContourLayerWithText,
 } from '@vitessce/gl';
 import { getDefaultColor } from '@vitessce/utils';
 import {
@@ -49,7 +50,7 @@ const getPosition = (object, { index, data, target }) => {
 };
 
 
-const contourGetWeight = (object, { index, data }) => data.src.featureValues[index];
+const contourGetWeight = (object, { index, data }) => data.src.featureValues?.[index];
 
 const contourGetPosition = (object, { index, data, target }) => {
   target[0] = data.src.embeddingX[index];
@@ -130,8 +131,17 @@ class Scatterplot extends AbstractSpatialOrScatterplot {
       contourThresholds,
       contoursFilled,
       contourColor: contourColorProp,
+      circleInfo,
+      cellSetLabelsVisible,
+      cellSetLabelSize,
+      featureSelection,
     } = this.props;
 
+    const circlePointSet = new Set();
+    const [getWeight, aggregation] = Array.isArray(featureSelection) && featureSelection.length > 0
+      ? ([contourGetWeight, 'MEAN'])
+      : ([1, 'COUNT']);
+
     const layers = Array.from(this.stratifiedData.entries())
       .flatMap(([obsSetKey, sampleSetMap]) => Array.from(sampleSetMap.entries())
         .map(([sampleSetKey, arrs]) => {
@@ -155,30 +165,35 @@ class Scatterplot extends AbstractSpatialOrScatterplot {
               || contourColor
             );
           }
-          return new deck.ContourLayer({
+          const contours = contourThresholds.map((threshold, i) => ({
+            i,
+            threshold: (contoursFilled ? [threshold, threshold[i + 1] || Infinity] : threshold),
+            // TODO: should the opacity steps be uniform? Should align with human perception.
+            // TODO: support usage of static colors.
+            color: [
+              // r, g, b
+              ...contourColor,
+              // a
+              (contoursFilled
+                ? ((i + 0.5) / contourThresholds.length * 255)
+                : ((i + 1) / (contourThresholds.length)) * 255),
+            ],
+            strokeWidth: 2,
+            // We need to specify a greater z-index so that the contour layers
+            // will render on top of the point layer.
+            zIndex: POINT_LAYER_Z_INDEX + 1 + i,
+          }));
+
+          return new ContourLayerWithText({
             id: `contour-${JSON.stringify(obsSetKey)}-${JSON.stringify(sampleSetKey)}`,
             coordinateSystem: deck.COORDINATE_SYSTEM.CARTESIAN,
             data: deckData,
-            getWeight: contourGetWeight,
+            getWeight,
             getPosition: contourGetPosition,
-            contours: contourThresholds.map((threshold, i) => ({
-              threshold: (contoursFilled ? [threshold, threshold[i + 1] || Infinity] : threshold),
-              // TODO: should the opacity steps be uniform? Should align with human perception.
-              // TODO: support usage of static colors.
-              color: [
-                // r, g, b
-                ...contourColor,
-                // a
-                (contoursFilled
-                  ? ((i + 0.5) / contourThresholds.length * 255)
-                  : ((i + 1) / (contourThresholds.length)) * 255),
-              ],
-              strokeWidth: 2,
-              // We need to specify a greater z-index so that the contour layers
-              // will render on top of the point layer.
-              zIndex: POINT_LAYER_Z_INDEX + 1 + i,
-            })),
-            aggregation: 'MEAN',
+            obsSetPath: obsSetKey,
+            sampleSetPath: sampleSetKey,
+            contours,
+            aggregation,
             gpuAggregation: true,
             visible: true,
             pickable: false,
@@ -186,6 +201,14 @@ class Scatterplot extends AbstractSpatialOrScatterplot {
             filled: contoursFilled,
             cellSize: 0.25,
             zOffset: 0.005,
+            // Info for text/line rendering
+            circleInfo,
+            circlePointSet,
+            obsSetLabelsVisible: cellSetLabelsVisible,
+            obsSetLabelSize: cellSetLabelSize,
+            updateTriggers: {
+              getWeight: [getWeight],
+            },
           });
         }));
     return layers;
@@ -429,30 +452,34 @@ class Scatterplot extends AbstractSpatialOrScatterplot {
   }
 
   onUpdateCellSetsLayers(onlyViewStateChange) {
-    // Because the label sizes for the force simulation depend on the zoom level,
-    // we _could_ run the simulation every time the zoom level changes.
-    // However, this has a performance impact in firefox.
-    if (onlyViewStateChange) {
-      const { viewState, cellSetLabelsVisible } = this.props;
+    const { viewState, cellSetLabelsVisible, embeddingContoursVisible } = this.props;
+    if (embeddingContoursVisible) {
+      // If rendering contours, we do not want to render text labels using this method,
+      // as the ContourLayerWithText implements its own text labeling internally.
+      this.cellSetsLayers = [];
+    } else if (onlyViewStateChange) {
+      // Because the label sizes for the force simulation depend on the zoom level,
+      // we _could_ run the simulation every time the zoom level changes.
+      // However, this has a performance impact in firefox.
       const { zoom } = viewState;
       const { cellSetsLabelPrevZoom } = this;
       // Instead, we can just check if the zoom level has changed
       // by some relatively large delta, to be more conservative
       // about re-running the force simulation.
       if (cellSetLabelsVisible
-        && (
-          cellSetsLabelPrevZoom === null
-          || Math.abs(cellSetsLabelPrevZoom - zoom) > LABEL_UPDATE_ZOOM_DELTA
-        )
+      && (
+        cellSetsLabelPrevZoom === null
+        || Math.abs(cellSetsLabelPrevZoom - zoom) > LABEL_UPDATE_ZOOM_DELTA
+      )
       ) {
         this.cellSetsLayers = this.createCellSetsLayers();
         this.cellSetsLabelPrevZoom = zoom;
       }
     } else {
-      // Otherwise, something more substantial than just
-      // the viewState has changed, such as the label array
-      // itself, so we always want to update the layer
-      // in this case.
+    // Otherwise, something more substantial than just
+    // the viewState has changed, such as the label array
+    // itself, so we always want to update the layer
+    // in this case.
       this.cellSetsLayers = this.createCellSetsLayers();
     }
   }
@@ -469,6 +496,17 @@ class Scatterplot extends AbstractSpatialOrScatterplot {
     );
   }
 
+  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,
@@ -507,7 +545,11 @@ class Scatterplot extends AbstractSpatialOrScatterplot {
       forceUpdate = true;
     }
 
-    if (['stratifiedData', 'contourColorEncoding', 'contoursFilled', 'contourThresholds', 'embeddingContoursVisible'].some(shallowDiff)) {
+    if ([
+      'stratifiedData', 'contourColorEncoding', 'contoursFilled',
+      'contourThresholds', 'embeddingContoursVisible',
+      'cellSetLabelsVisible', 'cellSetLabelSize',
+    ].some(shallowDiff)) {
       // Cells data changed.
       this.onUpdateContourLayers();
       forceUpdate = true;
@@ -516,6 +558,7 @@ class Scatterplot extends AbstractSpatialOrScatterplot {
     if ([
       'cellSetPolygons', 'cellSetPolygonsVisible',
       'cellSetLabelsVisible', 'cellSetLabelSize',
+      'embeddingContoursVisible',
     ].some(shallowDiff)) {
       // Cell sets layer props changed.
       this.onUpdateCellSetsLayers(false);

package/src/ScatterplotOptions.js

@@ -8,6 +8,8 @@ import {
 } from '@vitessce/vit-s';
 import { GLSL_COLORMAPS } from '@vitessce/gl';
 
+const FEATURE_AGGREGATION_STRATEGIES = ['first', 'last', 'sum', 'mean'];
+
 export default function ScatterplotOptions(props) {
   const {
     children,
@@ -48,6 +50,9 @@ export default function ScatterplotOptions(props) {
 
     contourColorEncoding,
     setContourColorEncoding,
+
+    featureAggregationStrategy,
+    setFeatureAggregationStrategy,
   } = props;
 
   const scatterplotOptionsId = useId();
@@ -124,6 +129,10 @@ export default function ScatterplotOptions(props) {
     [handlePercentilesChange],
   );
 
+  function handleFeatureAggregationStrategyChange(event) {
+    setFeatureAggregationStrategy(event.target.value);
+  }
+
   return (
     <OptionsContainer>
       {children}
@@ -475,6 +484,33 @@ export default function ScatterplotOptions(props) {
           />
         </TableCell>
       </TableRow>
+      {setFeatureAggregationStrategy ? (
+        <TableRow>
+          <TableCell className={classes.labelCell} variant="head" scope="row">
+            <label
+              htmlFor={`feature-aggregation-strategy-${scatterplotOptionsId}`}
+            >
+              Feature Aggregation Strategy
+            </label>
+          </TableCell>
+          <TableCell className={classes.inputCell} variant="body">
+            <OptionSelect
+              className={classes.select}
+              value={featureAggregationStrategy ?? 'first'}
+              onChange={handleFeatureAggregationStrategyChange}
+              inputProps={{
+                id: `feature-aggregation-strategy-${scatterplotOptionsId}`,
+              }}
+            >
+              {FEATURE_AGGREGATION_STRATEGIES.map(opt => (
+                <option key={opt} value={opt}>
+                  {capitalize(opt)}
+                </option>
+              ))}
+            </OptionSelect>
+          </TableCell>
+        </TableRow>
+      ) : null}
     </OptionsContainer>
   );
 }

package/src/shared-spatial-scatterplot/dynamic-opacity.js

@@ -34,11 +34,17 @@ export function getPointSizeDevicePixels(devicePixelRatio, zoom, xRange, yRange,
 // Reference: https://observablehq.com/@rreusser/selecting-the-right-opacity-for-2d-point-clouds
 export function getPointOpacity(zoom, xRange, yRange, width, height, numCells, avgFillDensity) {
   const N = numCells;
-  const [minX, minY, maxX, maxY] = new deck.OrthographicView({ zoom }).makeViewport({
-    height,
-    width,
-    viewState: { zoom, target: [0, 0, 0] },
-  }).getBounds();
+  let minX; let minY; let maxX; let
+    maxY;
+  try {
+    [minX, minY, maxX, maxY] = new deck.OrthographicView({ zoom }).makeViewport({
+      height,
+      width,
+      viewState: { zoom, target: [0, 0, 0] },
+    }).getBounds();
+  } catch {
+    return 1.0;
+  }
   const X = maxY - minY;
   const Y = maxX - minX;
   const X0 = xRange;