@vitessce/scatterplot 3.4.6 → 3.4.7

package/dist/index.js

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

package/dist/{jpeg-472bcdf1.js → jpeg-7c226d63.js}

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

package/dist/{lerc-56848472.js → lerc-0384b6ad.js}

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

package/dist/{lzw-5f7284c3.js → lzw-d2cff9a8.js}

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

package/dist/{packbits-fcb8ce02.js → packbits-43302cb2.js}

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

package/dist/{raw-1772c7d9.js → raw-3ece8be3.js}

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

package/dist/{webimage-f7836afc.js → webimage-4065dcff.js}

@@ -1,4 +1,4 @@
-import { B as BaseDecoder } from "./index-1a99a44a.js";
+import { B as BaseDecoder } from "./index-eee2d28f.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":";AAmYA;;;;;;GAMG;AACH,sCAKG"}
+{"version":3,"file":"Scatterplot.d.ts","sourceRoot":"","sources":["../src/Scatterplot.js"],"names":[],"mappings":";AAshBA;;;;;;GAMG;AACH,sCAKG"}

package/dist-tsc/Scatterplot.js

@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 /* eslint-disable no-param-reassign */
 import React, { forwardRef } from 'react';
 import { forceSimulation } from 'd3-force';
+import { isEqual } from 'lodash-es';
 import { deck, getSelectionLayer, ScaledExpressionExtension, SelectionExtension, } from '@vitessce/gl';
 import { getDefaultColor } from '@vitessce/utils';
 import { AbstractSpatialOrScatterplot, createQuadTree, forceCollideRects, getOnHoverCallback, } from './shared-spatial-scatterplot/index.js';
@@ -31,6 +32,14 @@ const getPosition = (object, { index, data, target }) => {
     target[2] = 0;
     return target;
 };
+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];
+    target[2] = 0;
+    return target;
+};
+const contourGetPolygonOffset = () => ([0, 20]);
 /**
  * React component which renders a scatterplot from cell data.
  * @param {object} props
@@ -73,13 +82,75 @@ class Scatterplot extends AbstractSpatialOrScatterplot {
         this.cellsQuadTree = null;
         this.cellsLayer = null;
         this.cellsData = null;
+        this.stratifiedData = null;
         this.cellSetsForceSimulation = forceCollideRects();
         this.cellSetsLabelPrevZoom = null;
         this.cellSetsLayers = [];
+        this.contourLayers = [];
         // Initialize data and layers.
         this.onUpdateCellsData();
         this.onUpdateCellsLayer();
         this.onUpdateCellSetsLayers();
+        this.onUpdateStratifiedData();
+        this.onUpdateContourLayers();
+    }
+    // Want to support multiple types of contour layers
+    // - One layer for all data points (no filtering)
+    // - Array of per-selected-obsSet layers (filter to obsSet members)
+    // - 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 layers = Array.from(this.stratifiedData.entries())
+            .flatMap(([obsSetKey, sampleSetMap]) => Array.from(sampleSetMap.entries())
+            .map(([sampleSetKey, arrs]) => {
+            const deckData = arrs.get('deckData');
+            // The thresholds are computed based on the entire dataset,
+            // as opposed to just the subsets for each layer.
+            // This way, the contours will be comparable among different layers.
+            // TODO: Also support a user-defined static color.
+            // Fall back to default color based on the current theme.
+            let contourColor = contourColorProp || getDefaultColor(theme);
+            if (contourColorEncoding === 'cellSetSelection') {
+                contourColor = (obsSetColor?.find(d => isEqual(obsSetKey, d.path))?.color
+                    || contourColor);
+            }
+            else if (contourColorEncoding === 'sampleSetSelection') {
+                contourColor = (sampleSetColor?.find(d => isEqual(sampleSetKey, d.path))?.color
+                    || contourColor);
+            }
+            return new deck.ContourLayer({
+                id: `contour-${JSON.stringify(obsSetKey)}-${JSON.stringify(sampleSetKey)}`,
+                coordinateSystem: deck.COORDINATE_SYSTEM.CARTESIAN,
+                data: deckData,
+                getWeight: contourGetWeight,
+                getPosition: contourGetPosition,
+                getPolygonOffset: contourGetPolygonOffset,
+                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,
+                })),
+                aggregation: 'MEAN',
+                gpuAggregation: true,
+                visible: true,
+                pickable: false,
+                autoHighlight: false,
+                filled: contoursFilled,
+                cellSize: 0.25,
+                zOffset: 0.005,
+            });
+        }));
+        return layers;
     }
     createCellsLayer() {
         const { obsEmbeddingIndex: obsIndex, theme, cellRadius = 1.0, cellOpacity = 1.0, 
@@ -200,9 +271,10 @@ class Scatterplot extends AbstractSpatialOrScatterplot {
         ], flipYTooltip);
     }
     getLayers() {
-        const { cellsLayer, cellSetsLayers, } = this;
+        const { cellsLayer, cellSetsLayers, contourLayers, } = this;
         return [
             cellsLayer,
+            ...contourLayers,
             ...cellSetsLayers,
             this.createSelectionLayer(),
         ];
@@ -221,14 +293,51 @@ class Scatterplot extends AbstractSpatialOrScatterplot {
         }
     }
     onUpdateCellsLayer() {
-        const { obsEmbeddingIndex, obsEmbedding } = this.props;
-        if (obsEmbeddingIndex && obsEmbedding) {
+        const { obsEmbeddingIndex, obsEmbedding, embeddingPointsVisible } = this.props;
+        if (embeddingPointsVisible && obsEmbeddingIndex && obsEmbedding) {
             this.cellsLayer = this.createCellsLayer();
         }
         else {
             this.cellsLayer = null;
         }
     }
+    onUpdateStratifiedData() {
+        const { stratifiedData } = this.props;
+        if (stratifiedData) {
+            // Set up the data object { src, length } for each ContourLayer.
+            Array.from(stratifiedData.values())
+                .forEach(sampleSetMap => Array.from(sampleSetMap.values())
+                .forEach((arrs) => {
+                // Not ideal, but here we are mutating the nested Map (arrs)
+                // to add the 'deckData' object.
+                const embeddingX = arrs.get('obsEmbeddingX');
+                const embeddingY = arrs.get('obsEmbeddingY');
+                const featureValues = arrs.get('featureValue');
+                const obsIndex = arrs.get('obsIndex');
+                // We want to memoize / stabilize the object reference
+                // that we pass to ContourLayer.data to prevent extra re-renders.
+                arrs.set('deckData', {
+                    src: {
+                        embeddingX,
+                        embeddingY,
+                        featureValues,
+                        obsIndex,
+                    },
+                    length: obsIndex.length,
+                });
+            }));
+            this.stratifiedData = stratifiedData;
+        }
+    }
+    onUpdateContourLayers() {
+        const { stratifiedData, contourThresholds, embeddingContoursVisible } = this.props;
+        if (embeddingContoursVisible && stratifiedData && contourThresholds) {
+            this.contourLayers = this.createContourLayers();
+        }
+        else {
+            this.contourLayers = [];
+        }
+    }
     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.
@@ -266,27 +375,38 @@ class Scatterplot extends AbstractSpatialOrScatterplot {
      * This function does not follow React conventions or paradigms,
      * it is only implemented this way to try to squeeze out
      * performance.
+     * TODO: can this be replaced by React.memo with custom arePropsEqual?
      * @param {object} prevProps The previous props to diff against.
      */
     componentDidUpdate(prevProps) {
         this.viewInfoDidUpdate();
         const shallowDiff = propName => (prevProps[propName] !== this.props[propName]);
         let forceUpdate = false;
-        if (['obsEmbedding'].some(shallowDiff)) {
+        if (['obsEmbedding', 'obsEmbeddingIndex'].some(shallowDiff)) {
             // Cells data changed.
             this.onUpdateCellsData();
             forceUpdate = true;
         }
+        if (['stratifiedData'].some(shallowDiff)) {
+            // Cells data changed.
+            this.onUpdateStratifiedData();
+            forceUpdate = true;
+        }
         if ([
             'obsEmbeddingIndex', 'obsEmbedding', 'cellFilter', 'cellSelection', 'cellColors',
             'cellRadius', 'cellOpacity', 'cellRadiusMode', 'geneExpressionColormap',
             'geneExpressionColormapRange', 'geneSelection', 'cellColorEncoding',
-            'getExpressionValue',
+            'getExpressionValue', 'embeddingPointsVisible',
         ].some(shallowDiff)) {
             // Cells layer props changed.
             this.onUpdateCellsLayer();
             forceUpdate = true;
         }
+        if (['stratifiedData', 'contourColorEncoding', 'contoursFilled', 'contourThresholds', 'embeddingContoursVisible'].some(shallowDiff)) {
+            // Cells data changed.
+            this.onUpdateContourLayers();
+            forceUpdate = true;
+        }
         if ([
             'cellSetPolygons', 'cellSetPolygonsVisible',
             'cellSetLabelsVisible', 'cellSetLabelSize',

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

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

package/dist-tsc/ScatterplotOptions.js

@@ -7,13 +7,16 @@ import { capitalize } from '@vitessce/utils';
 import { usePlotOptionsStyles, CellColorEncodingOption, OptionsContainer, OptionSelect, } from '@vitessce/vit-s';
 import { GLSL_COLORMAPS } from '@vitessce/gl';
 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, } = 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 scatterplotOptionsId = useId();
     const observationsLabelNice = capitalize(observationsLabel);
     const classes = usePlotOptionsStyles();
     function handleCellRadiusModeChange(event) {
         setCellRadiusMode(event.target.value);
     }
+    function handleContourColorEncodingChange(event) {
+        setContourColorEncoding(event.target.value);
+    }
     function handleCellOpacityModeChange(event) {
         setCellOpacityMode(event.target.value);
     }
@@ -35,6 +38,15 @@ export default function ScatterplotOptions(props) {
     function handlePolygonVisibilityChange(event) {
         setCellSetPolygonsVisible(event.target.checked);
     }
+    function handlePointsVisibilityChange(event) {
+        setEmbeddingPointsVisible(event.target.checked);
+    }
+    function handleContoursVisibilityChange(event) {
+        setEmbeddingContoursVisible(event.target.checked);
+    }
+    function handleContoursFilledChange(event) {
+        setEmbeddingContoursFilled(event.target.checked);
+    }
     function handleGeneExpressionColormapChange(event) {
         setGeneExpressionColormap(event.target.value);
     }
@@ -42,6 +54,10 @@ export default function ScatterplotOptions(props) {
         setGeneExpressionColormapRange(value);
     }
     const handleColormapRangeChangeDebounced = useCallback(debounce(handleColormapRangeChange, 5, { trailing: true }), [handleColormapRangeChange]);
+    function handlePercentilesChange(event, values) {
+        setContourPercentiles(values);
+    }
+    const handlePercentilesChangeDebounced = useCallback(debounce(handlePercentilesChange, 5, { trailing: true }), [handlePercentilesChange]);
     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}`,
@@ -66,5 +82,16 @@ export default function ScatterplotOptions(props) {
                             }, children: GLSL_COLORMAPS.map(cmap => (_jsx("option", { value: cmap, children: cmap }, cmap))) }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsx("label", { htmlFor: `scatterplot-gene-expression-colormap-range-${scatterplotOptionsId}`, children: "Gene Expression Colormap Range" }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsx(Slider, { classes: { root: classes.slider, valueLabel: classes.sliderValueLabel }, value: geneExpressionColormapRange, onChange: handleColormapRangeChangeDebounced, getAriaLabel: (index) => {
                                 const labelPrefix = index === 0 ? 'Low value slider' : 'High value slider';
                                 return `${labelPrefix} for scatterplot gene expression colormap range`;
-                            }, id: `scatterplot-gene-expression-colormap-range-${scatterplotOptionsId}`, valueLabelDisplay: "auto", step: 0.005, min: 0.0, max: 1.0 }) })] })] }));
+                            }, id: `scatterplot-gene-expression-colormap-range-${scatterplotOptionsId}`, valueLabelDisplay: "auto", step: 0.005, min: 0.0, max: 1.0 }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsx("label", { htmlFor: `scatterplot-points-visible-${scatterplotOptionsId}`, children: "Points Visible" }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsx(Checkbox, { className: classes.checkbox, checked: embeddingPointsVisible, onChange: handlePointsVisibilityChange, name: "scatterplot-option-point-visibility", color: "default", inputProps: {
+                                'aria-label': 'Show or hide scatterplot points',
+                                id: `scatterplot-points-visible-${scatterplotOptionsId}`,
+                            } }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsx("label", { htmlFor: `scatterplot-contours-visible-${scatterplotOptionsId}`, children: "Contours Visible" }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsx(Checkbox, { className: classes.checkbox, checked: embeddingContoursVisible, onChange: handleContoursVisibilityChange, name: "scatterplot-option-contour-visibility", color: "default", inputProps: {
+                                'aria-label': 'Show or hide contours',
+                                id: `scatterplot-contours-visible-${scatterplotOptionsId}`,
+                            } }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsx("label", { htmlFor: `scatterplot-contours-filled-${scatterplotOptionsId}`, children: "Contours Filled" }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsx(Checkbox, { className: classes.checkbox, checked: embeddingContoursFilled, onChange: handleContoursFilledChange, name: "scatterplot-option-contour-filled", color: "default", inputProps: {
+                                'aria-label': 'Filled or stroked contours',
+                                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 }) })] })] }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"AbstractSpatialOrScatterplot.d.ts","sourceRoot":"","sources":["../../src/shared-spatial-scatterplot/AbstractSpatialOrScatterplot.js"],"names":[],"mappings":"AAKA;;;;;GAKG;AACH;IACE,wBAeC;IAZC;;;MAGC;IAED,wBAAoB;IAStB;;;;;;;OAOG;IACH;QAF0B,SAAS,EAAxB,MAAM;aAYhB;IAED;;;;;OAKG;IACH;QAF6B,QAAQ,EAA1B,MAAM;aAIhB;IAED;;;;;OAKG;IACH,uBAFW,MAAM,QAIhB;IAED;;;;;OAKG;IACH,mBAFW,MAAM,QAQhB;IAgBD,qCAgFC;IAwCD;;MAEE;IAEF,iBAAa;IA1Ib;;;;;OAKG;IAEH,aALa,MAAM,EAAE,CAOpB;IAuFD;;;;;OAKG;IACH,iFAsBC;IAED;;OAEG;IAEH,2BAEC;IAQD;;;OAGG;IAEH,SAHa,OAAO,CAKnB;IAED;;;OAGG;IACH,sBA2DC;CACF"}
+{"version":3,"file":"AbstractSpatialOrScatterplot.d.ts","sourceRoot":"","sources":["../../src/shared-spatial-scatterplot/AbstractSpatialOrScatterplot.js"],"names":[],"mappings":"AAKA;;;;;GAKG;AACH;IACE,wBAeC;IAZC;;;MAGC;IAED,wBAAoB;IAStB;;;;;;;OAOG;IACH,gDAFG;QAAuB,SAAS,EAAxB,MAAM;KAChB,QAWA;IAED;;;;;OAKG;IACH,mCAFG;QAA0B,QAAQ,EAA1B,MAAM;KAChB,QAGA;IAED;;;;;OAKG;IACH,uBAFW,MAAM,QAIhB;IAED;;;;;OAKG;IACH,mBAFW,MAAM,QAQhB;IAgBD,qCAgFC;IAwCD;;MAEE;IAEF,iBAAa;IA1Ib;;;;;OAKG;IAEH,aALa,MAAM,EAAE,CAOpB;IAuFD;;;;;OAKG;IACH,iFAsBC;IAED;;OAEG;IAEH,2BAEC;IAQD;;;OAGG;IAEH,SAHa,OAAO,CAKnB;IAED;;;OAGG;IACH,sBA2DC;CACF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitessce/scatterplot",
-  "version": "3.4.6",
+  "version": "3.4.7",
   "author": "Gehlenborg Lab",
   "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.4.6",
-    "@vitessce/gl": "3.4.6",
-    "@vitessce/utils": "3.4.6",
-    "@vitessce/tooltip": "3.4.6",
-    "@vitessce/icons": "3.4.6",
-    "@vitessce/vit-s": "3.4.6"
+    "@vitessce/constants-internal": "3.4.7",
+    "@vitessce/gl": "3.4.7",
+    "@vitessce/icons": "3.4.7",
+    "@vitessce/tooltip": "3.4.7",
+    "@vitessce/utils": "3.4.7",
+    "@vitessce/vit-s": "3.4.7"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.16.4",

package/src/Scatterplot.js

@@ -1,6 +1,7 @@
 /* eslint-disable no-param-reassign */
 import React, { forwardRef } from 'react';
 import { forceSimulation } from 'd3-force';
+import { isEqual } from 'lodash-es';
 import {
   deck, getSelectionLayer, ScaledExpressionExtension, SelectionExtension,
 } from '@vitessce/gl';
@@ -37,6 +38,19 @@ const getPosition = (object, { index, data, target }) => {
   return target;
 };
 
+
+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];
+  target[2] = 0;
+  return target;
+};
+
+const contourGetPolygonOffset = () => ([0, 20]);
+
+
 /**
  * React component which renders a scatterplot from cell data.
  * @param {object} props
@@ -80,14 +94,92 @@ class Scatterplot extends AbstractSpatialOrScatterplot {
     this.cellsQuadTree = null;
     this.cellsLayer = null;
     this.cellsData = null;
+    this.stratifiedData = null;
     this.cellSetsForceSimulation = forceCollideRects();
     this.cellSetsLabelPrevZoom = null;
     this.cellSetsLayers = [];
 
+    this.contourLayers = [];
+
     // Initialize data and layers.
     this.onUpdateCellsData();
     this.onUpdateCellsLayer();
     this.onUpdateCellSetsLayers();
+    this.onUpdateStratifiedData();
+    this.onUpdateContourLayers();
+  }
+
+  // Want to support multiple types of contour layers
+  // - One layer for all data points (no filtering)
+  // - Array of per-selected-obsSet layers (filter to obsSet members)
+  // - 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 layers = Array.from(this.stratifiedData.entries())
+      .flatMap(([obsSetKey, sampleSetMap]) => Array.from(sampleSetMap.entries())
+        .map(([sampleSetKey, arrs]) => {
+          const deckData = arrs.get('deckData');
+
+          // The thresholds are computed based on the entire dataset,
+          // as opposed to just the subsets for each layer.
+          // This way, the contours will be comparable among different layers.
+
+          // TODO: Also support a user-defined static color.
+          // Fall back to default color based on the current theme.
+          let contourColor = contourColorProp || getDefaultColor(theme);
+          if (contourColorEncoding === 'cellSetSelection') {
+            contourColor = (
+              obsSetColor?.find(d => isEqual(obsSetKey, d.path))?.color
+              || contourColor
+            );
+          } else if (contourColorEncoding === 'sampleSetSelection') {
+            contourColor = (
+              sampleSetColor?.find(d => isEqual(sampleSetKey, d.path))?.color
+              || contourColor
+            );
+          }
+          return new deck.ContourLayer({
+            id: `contour-${JSON.stringify(obsSetKey)}-${JSON.stringify(sampleSetKey)}`,
+            coordinateSystem: deck.COORDINATE_SYSTEM.CARTESIAN,
+            data: deckData,
+            getWeight: contourGetWeight,
+            getPosition: contourGetPosition,
+            getPolygonOffset: contourGetPolygonOffset,
+            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,
+            })),
+            aggregation: 'MEAN',
+            gpuAggregation: true,
+            visible: true,
+            pickable: false,
+            autoHighlight: false,
+            filled: contoursFilled,
+            cellSize: 0.25,
+            zOffset: 0.005,
+          });
+        }));
+    return layers;
   }
 
   createCellsLayer() {
@@ -255,9 +347,11 @@ class Scatterplot extends AbstractSpatialOrScatterplot {
     const {
       cellsLayer,
       cellSetsLayers,
+      contourLayers,
     } = this;
     return [
       cellsLayer,
+      ...contourLayers,
       ...cellSetsLayers,
       this.createSelectionLayer(),
     ];
@@ -278,14 +372,53 @@ class Scatterplot extends AbstractSpatialOrScatterplot {
   }
 
   onUpdateCellsLayer() {
-    const { obsEmbeddingIndex, obsEmbedding } = this.props;
-    if (obsEmbeddingIndex && obsEmbedding) {
+    const { obsEmbeddingIndex, obsEmbedding, embeddingPointsVisible } = this.props;
+    if (embeddingPointsVisible && obsEmbeddingIndex && obsEmbedding) {
       this.cellsLayer = this.createCellsLayer();
     } else {
       this.cellsLayer = null;
     }
   }
 
+  onUpdateStratifiedData() {
+    const { stratifiedData } = this.props;
+    if (stratifiedData) {
+      // Set up the data object { src, length } for each ContourLayer.
+      Array.from(stratifiedData.values())
+        .forEach(sampleSetMap => Array.from(sampleSetMap.values())
+          .forEach((arrs) => {
+            // Not ideal, but here we are mutating the nested Map (arrs)
+            // to add the 'deckData' object.
+            const embeddingX = arrs.get('obsEmbeddingX');
+            const embeddingY = arrs.get('obsEmbeddingY');
+            const featureValues = arrs.get('featureValue');
+            const obsIndex = arrs.get('obsIndex');
+
+            // We want to memoize / stabilize the object reference
+            // that we pass to ContourLayer.data to prevent extra re-renders.
+            arrs.set('deckData', {
+              src: {
+                embeddingX,
+                embeddingY,
+                featureValues,
+                obsIndex,
+              },
+              length: obsIndex.length,
+            });
+          }));
+      this.stratifiedData = stratifiedData;
+    }
+  }
+
+  onUpdateContourLayers() {
+    const { stratifiedData, contourThresholds, embeddingContoursVisible } = this.props;
+    if (embeddingContoursVisible && stratifiedData && contourThresholds) {
+      this.contourLayers = this.createContourLayers();
+    } else {
+      this.contourLayers = [];
+    }
+  }
+
   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.
@@ -334,6 +467,7 @@ class Scatterplot extends AbstractSpatialOrScatterplot {
    * This function does not follow React conventions or paradigms,
    * it is only implemented this way to try to squeeze out
    * performance.
+   * TODO: can this be replaced by React.memo with custom arePropsEqual?
    * @param {object} prevProps The previous props to diff against.
    */
   componentDidUpdate(prevProps) {
@@ -341,22 +475,35 @@ class Scatterplot extends AbstractSpatialOrScatterplot {
 
     const shallowDiff = propName => (prevProps[propName] !== this.props[propName]);
     let forceUpdate = false;
-    if (['obsEmbedding'].some(shallowDiff)) {
+    if (['obsEmbedding', 'obsEmbeddingIndex'].some(shallowDiff)) {
       // Cells data changed.
       this.onUpdateCellsData();
       forceUpdate = true;
     }
 
+    if (['stratifiedData'].some(shallowDiff)) {
+      // Cells data changed.
+      this.onUpdateStratifiedData();
+      forceUpdate = true;
+    }
+
     if ([
       'obsEmbeddingIndex', 'obsEmbedding', 'cellFilter', 'cellSelection', 'cellColors',
       'cellRadius', 'cellOpacity', 'cellRadiusMode', 'geneExpressionColormap',
       'geneExpressionColormapRange', 'geneSelection', 'cellColorEncoding',
-      'getExpressionValue',
+      'getExpressionValue', 'embeddingPointsVisible',
     ].some(shallowDiff)) {
       // Cells layer props changed.
       this.onUpdateCellsLayer();
       forceUpdate = true;
     }
+
+    if (['stratifiedData', 'contourColorEncoding', 'contoursFilled', 'contourThresholds', 'embeddingContoursVisible'].some(shallowDiff)) {
+      // Cells data changed.
+      this.onUpdateContourLayers();
+      forceUpdate = true;
+    }
+
     if ([
       'cellSetPolygons', 'cellSetPolygonsVisible',
       'cellSetLabelsVisible', 'cellSetLabelSize',