@vitessce/scatterplot-embedding 3.5.9 → 3.5.11

package/dist/index.js

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

package/dist/{jpeg-8c087dbd.js → jpeg-6b5f0200.js}

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

package/dist/{lerc-6f97422d.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-5909753b.js";
+import { g as getDefaultExportFromCjs, B as BaseDecoder } from "./index-ab73546f.js";
 import "react";
 import "@vitessce/vit-s";
 import "react-dom";

package/dist/{lzw-551d533e.js → lzw-ec516fe1.js}

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

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

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

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"DualEmbeddingScatterplotSubscriber.d.ts","sourceRoot":"","sources":["../src/DualEmbeddingScatterplotSubscriber.js"],"names":[],"mappings":"AAQA;;;;;;;;;;;;;;;GAeG;AACH,0DAVG;IAAsB,IAAI,EAAlB,MAAM;IACQ,KAAK,EAAnB,MAAM;IACQ,kBAAkB,EAAhC,MAAM;IAEU,mBAAmB;IAErB,KAAK,EAAnB,MAAM;IACQ,kBAAkB,EAAhC,MAAM;CAEhB,eA4CA"}
+{"version":3,"file":"DualEmbeddingScatterplotSubscriber.d.ts","sourceRoot":"","sources":["../src/DualEmbeddingScatterplotSubscriber.js"],"names":[],"mappings":"AAQA;;;;;;;;;;;;;;;GAeG;AACH,0DAVG;IAAsB,IAAI,EAAlB,MAAM;IACQ,KAAK,EAAnB,MAAM;IACQ,kBAAkB,EAAhC,MAAM;IAEU,mBAAmB;IAErB,KAAK,EAAnB,MAAM;IACQ,kBAAkB,EAAhC,MAAM;CAEhB,eAmDA"}

package/dist-tsc/DualEmbeddingScatterplotSubscriber.js

@@ -23,11 +23,14 @@ export function DualEmbeddingScatterplotSubscriber(props) {
     const { uuid, coordinationScopes, } = props;
     // Get "props" from the coordination space.
     const [{ embeddingType, sampleSetSelection, }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType.DUAL_SCATTERPLOT], coordinationScopes);
+    const isCaseCtrl = Array.isArray(sampleSetSelection) && sampleSetSelection.length === 2;
     const caseSampleSetSelection = useMemo(() => (sampleSetSelection?.[0]
         ? [sampleSetSelection[0]]
         : null), [sampleSetSelection]);
     const ctrlSampleSetSelection = useMemo(() => (sampleSetSelection?.[1]
         ? [sampleSetSelection[1]]
         : null), [sampleSetSelection]);
-    return (_jsxs("div", { style: { width: '100%', height: '100%', display: 'flex', flexDirection: 'row' }, children: [_jsx("div", { style: { width: '50%', display: 'flex', flexDirection: 'column' }, children: _jsx(EmbeddingScatterplotSubscriber, { ...props, uuid: `${uuid}-case`, title: `Scatterplot (${embeddingType}), ${caseSampleSetSelection?.[0]?.at(-1)}`, sampleSetSelection: caseSampleSetSelection }) }), _jsx("div", { style: { width: '50%', display: 'flex', flexDirection: 'column' }, children: _jsx(EmbeddingScatterplotSubscriber, { ...props, uuid: `${uuid}-ctrl`, title: `Scatterplot (${embeddingType}), ${ctrlSampleSetSelection?.[0]?.at(-1)}`, sampleSetSelection: ctrlSampleSetSelection }) })] }));
+    return (_jsxs("div", { style: { width: '100%', height: '100%', display: 'flex', flexDirection: 'row' }, children: [_jsx("div", { style: { width: isCaseCtrl ? '50%' : '100%', display: 'flex', flexDirection: 'column' }, children: _jsx(EmbeddingScatterplotSubscriber, { ...props, uuid: `${uuid}-case`, title: (isCaseCtrl
+                        ? `Scatterplot (${embeddingType}), ${caseSampleSetSelection?.[0]?.at(-1)}`
+                        : null), sampleSetSelection: caseSampleSetSelection }) }), isCaseCtrl ? (_jsx("div", { style: { width: '50%', display: 'flex', flexDirection: 'column' }, children: _jsx(EmbeddingScatterplotSubscriber, { ...props, uuid: `${uuid}-ctrl`, title: `Scatterplot (${embeddingType}), ${ctrlSampleSetSelection?.[0]?.at(-1)}`, sampleSetSelection: ctrlSampleSetSelection }) })) : null] }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"EmbeddingScatterplotSubscriber.d.ts","sourceRoot":"","sources":["../src/EmbeddingScatterplotSubscriber.js"],"names":[],"mappings":"AA0CA;;;;;;;;;;;;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,eAwhBA"}
+{"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

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useState, useEffect, useCallback, useMemo, } from 'react';
 import { extent, quantileSorted } from 'd3-array';
 import { isEqual } from 'lodash-es';
+import { circle } from '@turf/circle';
 import { TitleInfo, useReady, useUrls, useDeckCanvasSize, useUint8FeatureSelection, useExpressionValueGetter, useGetObsInfo, useObsEmbeddingData, useObsSetsData, useFeatureSelection, useObsFeatureMatrixIndices, useFeatureLabelsData, useMultiObsLabels, useSampleSetsData, useSampleEdgesData, useCoordination, useLoaders, useSetComponentHover, useSetComponentViewInfo, useInitialCoordination, useExpandedFeatureLabelsMap, } from '@vitessce/vit-s';
 import { setObsSelection, mergeObsSets, getCellSetPolygons, getCellColors, stratifyArrays, } from '@vitessce/sets-utils';
 import { pluralize as plur, commaNumber } from '@vitessce/utils';
@@ -9,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
@@ -32,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);
@@ -128,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);
@@ -189,8 +193,34 @@ export function EmbeddingScatterplotSubscriber(props) {
                 .map(t => Math.max(t, 1.0));
             return thresholds;
         }
-        return null;
+        return [1, 10, 100];
     }, [contourPercentiles, sortedWeights]);
+    // Construct a circle polygon using Turf's circle function,
+    // which surrounds all points in the scatterplot,
+    // which we can use to position text labels along.
+    const circleInfo = useMemo(() => {
+        if (!originalViewState || !width || !height) {
+            return null;
+        }
+        const center = [
+            originalViewState.target[0],
+            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' };
+        const circlePolygon = circle(center, radius, options);
+        return {
+            center,
+            radius,
+            polygon: circlePolygon,
+            steps: numPoints,
+        };
+    }, [originalViewState, width, height]);
     // It is possible for the embedding index+data to be out of order
     // with respect to the matrix index+data. Here, we align the embedding
     // data so that the rows are ordered the same as the matrix rows.
@@ -239,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);
@@ -260,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 }), 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.9",
+  "version": "3.5.11",
   "author": "HIDIVE Lab at HMS",
   "homepage": "http://vitessce.io",
   "repository": {
@@ -20,12 +20,13 @@
     "d3-array": "^2.4.0",
     "lodash-es": "^4.17.21",
     "react-aria": "^3.28.0",
-    "@vitessce/constants-internal": "3.5.9",
-    "@vitessce/legend": "3.5.9",
-    "@vitessce/scatterplot": "3.5.9",
-    "@vitessce/sets-utils": "3.5.9",
-    "@vitessce/utils": "3.5.9",
-    "@vitessce/vit-s": "3.5.9"
+    "@turf/circle": "^7.2.0",
+    "@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/DualEmbeddingScatterplotSubscriber.js

@@ -34,6 +34,8 @@ export function DualEmbeddingScatterplotSubscriber(props) {
     sampleSetSelection,
   }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType.DUAL_SCATTERPLOT], coordinationScopes);
 
+  const isCaseCtrl = Array.isArray(sampleSetSelection) && sampleSetSelection.length === 2;
+
   const caseSampleSetSelection = useMemo(() => (
     sampleSetSelection?.[0]
       ? [sampleSetSelection[0]]
@@ -47,22 +49,27 @@ export function DualEmbeddingScatterplotSubscriber(props) {
 
   return (
     <div style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'row' }}>
-      <div style={{ width: '50%', display: 'flex', flexDirection: 'column' }}>
+      <div style={{ width: isCaseCtrl ? '50%' : '100%', display: 'flex', flexDirection: 'column' }}>
         <EmbeddingScatterplotSubscriber
           {...props}
           uuid={`${uuid}-case`}
-          title={`Scatterplot (${embeddingType}), ${caseSampleSetSelection?.[0]?.at(-1)}`}
+          title={(isCaseCtrl
+            ? `Scatterplot (${embeddingType}), ${caseSampleSetSelection?.[0]?.at(-1)}`
+            : null
+          )}
           sampleSetSelection={caseSampleSetSelection}
         />
       </div>
-      <div style={{ width: '50%', display: 'flex', flexDirection: 'column' }}>
-        <EmbeddingScatterplotSubscriber
-          {...props}
-          uuid={`${uuid}-ctrl`}
-          title={`Scatterplot (${embeddingType}), ${ctrlSampleSetSelection?.[0]?.at(-1)}`}
-          sampleSetSelection={ctrlSampleSetSelection}
-        />
-      </div>
+      {isCaseCtrl ? (
+        <div style={{ width: '50%', display: 'flex', flexDirection: 'column' }}>
+          <EmbeddingScatterplotSubscriber
+            {...props}
+            uuid={`${uuid}-ctrl`}
+            title={`Scatterplot (${embeddingType}), ${ctrlSampleSetSelection?.[0]?.at(-1)}`}
+            sampleSetSelection={ctrlSampleSetSelection}
+          />
+        </div>
+      ) : null}
     </div>
   );
 }

package/src/EmbeddingScatterplotSubscriber.js

@@ -3,6 +3,7 @@ import React, {
 } from 'react';
 import { extent, quantileSorted } from 'd3-array';
 import { isEqual } from 'lodash-es';
+import { circle } from '@turf/circle';
 import {
   TitleInfo,
   useReady, useUrls,
@@ -39,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.
@@ -112,6 +114,7 @@ export function EmbeddingScatterplotSubscriber(props) {
     embeddingContourPercentiles: contourPercentiles,
     contourColorEncoding,
     contourColor,
+    featureAggregationStrategy,
   }, {
     setEmbeddingZoom: setZoom,
     setEmbeddingTargetX: setTargetX,
@@ -138,6 +141,7 @@ export function EmbeddingScatterplotSubscriber(props) {
     setEmbeddingContoursFilled,
     setEmbeddingContourPercentiles: setContourPercentiles,
     setContourColorEncoding,
+    setFeatureAggregationStrategy,
   }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType.SCATTERPLOT], coordinationScopes);
 
   const {
@@ -154,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})`;
@@ -298,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,
       );
@@ -379,9 +386,36 @@ export function EmbeddingScatterplotSubscriber(props) {
         .map(t => Math.max(t, 1.0));
       return thresholds;
     }
-    return null;
+    return [1, 10, 100];
   }, [contourPercentiles, sortedWeights]);
 
+  // Construct a circle polygon using Turf's circle function,
+  // which surrounds all points in the scatterplot,
+  // which we can use to position text labels along.
+  const circleInfo = useMemo(() => {
+    if (!originalViewState || !width || !height) {
+      return null;
+    }
+    const center = [
+      originalViewState.target[0],
+      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' };
+    const circlePolygon = circle(center, radius, options);
+    return {
+      center,
+      radius,
+      polygon: circlePolygon,
+      steps: numPoints,
+    };
+  }, [originalViewState, width, height]);
+
   // It is possible for the embedding index+data to be out of order
   // with respect to the matrix index+data. Here, we align the embedding
   // data so that the rows are ordered the same as the matrix rows.
@@ -432,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 }) => {
@@ -459,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}
@@ -506,6 +544,8 @@ export function EmbeddingScatterplotSubscriber(props) {
           defaultContourPercentiles={DEFAULT_CONTOUR_PERCENTILES}
           contourColorEncoding={contourColorEncoding}
           setContourColorEncoding={setContourColorEncoding}
+          featureAggregationStrategy={featureAggregationStrategy}
+          setFeatureAggregationStrategy={setFeatureAggregationStrategy}
         />
       )}
     >
@@ -554,18 +594,21 @@ export function EmbeddingScatterplotSubscriber(props) {
         contoursFilled={embeddingContoursFilled}
         embeddingPointsVisible={embeddingPointsVisible}
         embeddingContoursVisible={embeddingContoursVisible}
+
+        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}
@@ -577,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>
   );