@vitessce/statistical-plots 3.5.9 → 3.5.11

package/dist/index.js

@@ -1,19 +1,20 @@
-import { b, e, C, d, a, h, D, f, E, F, c, T, V } from "./index-dc733355.js";
+import { b, f, C, e, a, i, D, h, E, F, c, d, T, V } from "./index-134a71c6.js";
 import "react";
 import "@vitessce/vit-s";
 import "react-dom";
 export {
   b as CellSetCompositionBarPlotSubscriber,
-  e as CellSetExpressionPlot,
+  f as CellSetExpressionPlot,
   C as CellSetExpressionPlotSubscriber,
-  d as CellSetSizesPlot,
+  e as CellSetSizesPlot,
   a as CellSetSizesPlotSubscriber,
-  h as DotPlot,
+  i as DotPlot,
   D as DotPlotSubscriber,
-  f as ExpressionHistogram,
+  h as ExpressionHistogram,
   E as ExpressionHistogramSubscriber,
   F as FeatureBarPlotSubscriber,
   c as FeatureSetEnrichmentBarPlotSubscriber,
+  d as FeatureStatsTableSubscriber,
   T as TreemapSubscriber,
   V as VolcanoPlotSubscriber
 };

package/dist/{jpeg-a83077be.js → jpeg-1b818d11.js}

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

package/dist/{lerc-1edd075a.js → lerc-f38cbdfc.js}

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

package/dist/{lzw-9572eac3.js → lzw-1120aba9.js}

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

package/dist/{packbits-cce11fbc.js → packbits-2d02b5e3.js}

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

package/dist/{raw-f7587aff.js → raw-0887baec.js}

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

package/dist/{webimage-8d38cd8b.js → webimage-533922a5.js}

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

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

@@ -1 +1 @@
-{"version":3,"file":"CellSetCompositionBarPlot.d.ts","sourceRoot":"","sources":["../src/CellSetCompositionBarPlot.js"],"names":[],"mappings":"AAOA;;GAEG;AACH,2EAkMC"}
+{"version":3,"file":"CellSetCompositionBarPlot.d.ts","sourceRoot":"","sources":["../src/CellSetCompositionBarPlot.js"],"names":[],"mappings":"AAUA;;GAEG;AACH,2EAyNC"}

package/dist-tsc/CellSetCompositionBarPlot.js

@@ -2,14 +2,20 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useCallback, useMemo } from 'react';
 import { clamp, isEqual } from 'lodash-es';
 import { v4 as uuidv4 } from 'uuid';
+import { extent } from 'd3-array';
 import { VegaPlot, VEGA_THEMES } from '@vitessce/vega';
 import { capitalize } from '@vitessce/utils';
 import { getColorScale } from './utils.js';
+const MAX_BAR_SIZE = 40;
 /**
  * Cell set composition results displayed using a bar chart.
  */
 export default function CellSetCompositionBarPlot(props) {
-    const { data, theme, width, height, marginRight = 200, marginBottom = 120, keyLength = 36, obsType, onBarSelect, obsSetsColumnNameMappingReversed, sampleSetsColumnNameMappingReversed, sampleSetSelection, obsSetSelection, obsSetColor, sampleSetColor, } = props;
+    const { data, theme, width, height: heightProp, marginRight = 200, marginBottom = 60, keyLength = 36, obsType, onBarSelect, obsSetsColumnNameMappingReversed, sampleSetsColumnNameMappingReversed, sampleSetSelection, obsSetSelection, obsSetColor, sampleSetColor, } = props;
+    const height = (Array.isArray(obsSetSelection)
+        && ((heightProp - marginBottom) / obsSetSelection.length >= MAX_BAR_SIZE))
+        ? MAX_BAR_SIZE * obsSetSelection.length + marginBottom
+        : heightProp;
     const [obsSetColorScale, sampleSetColorScale] = useMemo(() => [
         getColorScale(obsSetSelection, obsSetColor, theme),
         getColorScale(sampleSetSelection, sampleSetColor, theme),
@@ -20,18 +26,15 @@ export default function CellSetCompositionBarPlot(props) {
             const { df, metadata } = data[0];
             // Return in array-of-objects form that Vega-Lite likes.
             const referenceCellType = metadata?.analysis_params?.reference_cell_type;
+            const covariateValue = metadata?.analysis_params?.covariate_value;
             const coordinationValues = metadata?.coordination_values;
             const obsSetColumnName = coordinationValues?.obsSetSelection?.[0]?.[0];
             const obsSetGroupName = obsSetsColumnNameMappingReversed?.[obsSetColumnName];
             const sampleSetColumnName = coordinationValues?.sampleSetFilter?.[0]?.[0];
             const sampleSetGroupName = sampleSetsColumnNameMappingReversed?.[sampleSetColumnName];
-            // See https://github.com/keller-mark/compasce/issues/30 which should simplify this logic once implemented,
-            // so that we would no longer need to load/check the covariate column in the frontend.
-            const covariatePrefix = `${sampleSetColumnName}T.`;
-            const firstCovariateValue = df.covariate?.[0]?.substring(covariatePrefix.length);
-            const firstCovariateSetPath = [sampleSetGroupName, firstCovariateValue];
+            const covariateSetPath = [sampleSetGroupName, covariateValue];
             let shouldSwapFoldChangeDirection = false;
-            if (isEqual(firstCovariateSetPath, sampleSetSelection[0])) {
+            if (isEqual(covariateSetPath, sampleSetSelection[0])) {
                 shouldSwapFoldChangeDirection = true;
             }
             return df.obsSetId.map((obsSetId, i) => {
@@ -69,12 +72,12 @@ export default function CellSetCompositionBarPlot(props) {
         obsSetColorScale, sampleSetColorScale,
     ]);
     // Get an array of keys for sorting purposes.
-    const keys = computedData.map(d => d.keyName);
+    const keys = computedData?.map(d => d.keyName);
     const colorScale = {
         // Manually set the color scale so that Vega-Lite does
         // not choose the colors automatically.
-        domain: computedData.map(d => d.key),
-        range: computedData.map(d => d.color),
+        domain: computedData?.map(d => d.key),
+        range: computedData?.map(d => d.color),
     };
     const captializedObsType = capitalize(obsType);
     const opacityScale = {
@@ -85,6 +88,22 @@ export default function CellSetCompositionBarPlot(props) {
         domain: [true, false],
         range: [2.0, 0.5],
     };
+    const xExtent = useMemo(() => {
+        if (computedData) {
+            const [min, max] = extent(computedData.map(d => d.logFoldChange));
+            const buffer = 1.05; // Ensure some extra space
+            const minAbs = Math.abs(min) * buffer;
+            const maxAbs = Math.abs(max) * buffer;
+            if (minAbs > maxAbs) {
+                return [-minAbs, minAbs];
+            }
+            return [-maxAbs, maxAbs];
+        }
+        return undefined;
+    }, [computedData]);
+    const xScale = {
+        domain: xExtent,
+    };
     const spec = {
         mark: { type: 'bar', stroke: 'black', cursor: 'pointer' },
         params: [
@@ -120,6 +139,7 @@ export default function CellSetCompositionBarPlot(props) {
                 field: 'logFoldChange',
                 type: 'quantitative',
                 title: 'Log fold-change',
+                scale: xScale,
             },
             color: {
                 field: 'key',
@@ -136,6 +156,7 @@ export default function CellSetCompositionBarPlot(props) {
                 field: 'isReferenceSet',
                 type: 'nominal',
                 scale: strokeWidthScale,
+                legend: null,
             },
             tooltip: {
                 field: 'effectExpectedSample',

package/dist-tsc/CellSetCompositionBarPlotSubscriber.js

@@ -36,5 +36,5 @@ export function CellSetCompositionBarPlotSubscriber(props) {
     // TODO: support the following options
     // - Use logFoldChange vs. intercept+effect for the bar y-value.
     // - Boolean flag to allow hiding non-significant bars.
-    return (_jsx(TitleInfo, { title: `${capitalize(obsType)} Set Composition Analysis Plot`, removeGridComponent: removeGridComponent, theme: theme, isReady: isReady, helpText: helpText, children: _jsx("div", { ref: containerRef, className: classes.vegaContainer, children: obsSetStats ? (_jsx(CellSetCompositionBarPlot, { theme: theme, width: width, height: height, obsType: obsType, obsSetsColumnNameMapping: obsSetsColumnNameMapping, obsSetsColumnNameMappingReversed: obsSetsColumnNameMappingReversed, sampleSetsColumnNameMapping: sampleSetsColumnNameMapping, sampleSetsColumnNameMappingReversed: sampleSetsColumnNameMappingReversed, sampleSetSelection: sampleSetSelection, obsSetSelection: obsSetSelection, obsSetColor: obsSetColor, sampleSetColor: sampleSetColor, data: obsSetStats, onBarSelect: onBarSelect })) : (_jsxs("span", { children: ["Select at least one ", obsType, " set."] })) }) }));
+    return (_jsx(TitleInfo, { title: `${capitalize(obsType)} Set Composition Analysis Plot`, removeGridComponent: removeGridComponent, theme: theme, isReady: isReady, helpText: helpText, children: _jsx("div", { ref: containerRef, className: classes.vegaContainer, children: obsSetStats ? (_jsx(CellSetCompositionBarPlot, { theme: theme, width: width, height: height, obsType: obsType, obsSetsColumnNameMapping: obsSetsColumnNameMapping, obsSetsColumnNameMappingReversed: obsSetsColumnNameMappingReversed, sampleSetsColumnNameMapping: sampleSetsColumnNameMapping, sampleSetsColumnNameMappingReversed: sampleSetsColumnNameMappingReversed, sampleSetSelection: sampleSetSelection, obsSetSelection: obsSetSelection, obsSetColor: obsSetColor, sampleSetColor: sampleSetColor, data: obsSetStats, onBarSelect: onBarSelect })) : (_jsxs("span", { children: ["Select at least one ", obsType, " set and a pair of ", sampleType, " sets."] })) }) }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"CellSetExpressionPlot.d.ts","sourceRoot":"","sources":["../src/CellSetExpressionPlot.js"],"names":[],"mappings":"AAaA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,qDAjBG;IAAwB,IAAI,EAApB,MAAM,EAAE;IAEM,SAAS,EAAvB,MAAM;IACU,MAAM,EAAtB,MAAM,EAAE;IAEM,KAAK,EAAnB,MAAM;IACQ,KAAK,EAAnB,MAAM;IACQ,MAAM,EAApB,MAAM;IACQ,WAAW,EAAzB,MAAM;IAGQ,YAAY,EAA1B,MAAM;IAGa,yBAAyB,EAA5C,MAAM,GAAC,IAAI;CAErB,eA0XA"}
+{"version":3,"file":"CellSetExpressionPlot.d.ts","sourceRoot":"","sources":["../src/CellSetExpressionPlot.js"],"names":[],"mappings":"AAcA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,qDAjBG;IAAwB,IAAI,EAApB,MAAM,EAAE;IAEM,SAAS,EAAvB,MAAM;IACU,MAAM,EAAtB,MAAM,EAAE;IAEM,KAAK,EAAnB,MAAM;IACQ,KAAK,EAAnB,MAAM;IACQ,MAAM,EAApB,MAAM;IACQ,WAAW,EAAzB,MAAM;IAGQ,YAAY,EAA1B,MAAM;IAGa,yBAAyB,EAA5C,MAAM,GAAC,IAAI;CAErB,eAgZA"}

package/dist-tsc/CellSetExpressionPlot.js

@@ -9,6 +9,7 @@ import { area as d3_area, curveBasis } from 'd3-shape';
 import { select } from 'd3-selection';
 import { colorArrayToString } from '@vitessce/sets-utils';
 import { capitalize } from '@vitessce/utils';
+import { getColorScale } from './utils.js';
 const scaleBand = vega_scale('band');
 /**
  * Gene expression histogram displayed as a bar chart,
@@ -32,20 +33,21 @@ const scaleBand = vega_scale('band');
  * for the feature value transformation function.
  */
 export default function CellSetExpressionPlot(props) {
-    const { yMin: yMinProp, yUnits, jitter, cellSetSelection, sampleSetSelection, sampleSetColor, colors, data, theme, width, height, marginTop = 5, marginRight = 5, marginLeft = 50, marginBottom, obsType, featureType, featureValueType, featureValueTransformName, } = props;
+    const { yMin: yMinProp, xAxisTitle = null, yUnits, jitter, obsSetSelection, obsSetColor, sampleSetSelection, sampleSetColor, colors, data, theme, width, height, marginTop = 5, marginRight = 5, marginLeft = 50, marginBottom, obsType, featureType, featureValueType, featureValueTransformName, } = props;
     const svgRef = useRef();
+    const obsSetColorScale = useMemo(() => getColorScale(obsSetSelection, obsSetColor, theme), [obsSetSelection, obsSetColor, theme]);
     // Get the max characters in an axis label for autsizing the bottom margin.
     const maxCharactersForLabel = useMemo(() => {
-        if (!cellSetSelection) {
+        if (!obsSetSelection) {
             return 0;
         }
-        const cellSetNames = cellSetSelection.map(d => d.at(-1));
+        const cellSetNames = obsSetSelection.map(d => d.at(-1));
         return cellSetNames.reduce((acc, name) => {
             // eslint-disable-next-line no-param-reassign
             acc = acc === undefined || name.length > acc ? name.length : acc;
             return acc;
         }, 0);
-    }, [cellSetSelection]);
+    }, [obsSetSelection]);
     const isStratified = (Array.isArray(sampleSetSelection) && sampleSetSelection.length === 2);
     useEffect(() => {
         const domElement = svgRef.current;
@@ -54,7 +56,7 @@ export default function CellSetExpressionPlot(props) {
             : '';
         const unitSuffix = yUnits ? ` (${yUnits})` : '';
         const yTitle = `${transformPrefix}${capitalize(featureValueType)}${unitSuffix}`;
-        const xTitle = `${capitalize(obsType)} Set`;
+        const xTitle = xAxisTitle ?? `${capitalize(obsType)} Set`;
         // Use a square-root term because the angle of the labels is 45 degrees (see below)
         // so the perpendicular distance to the bottom of the labels is proportional to the
         // square root of the length of the labels along the imaginary hypotenuse.
@@ -102,7 +104,7 @@ export default function CellSetExpressionPlot(props) {
         const innerHeight = height - autoMarginBottom;
         const xGroup = scaleBand()
             .range([marginLeft, width - marginRight])
-            .domain(cellSetSelection)
+            .domain(obsSetSelection)
             .padding(0.1);
         // For the y domain, use the yMin prop
         // to support a use case such as 'Aspect Ratio',
@@ -256,17 +258,30 @@ export default function CellSetExpressionPlot(props) {
             .selectAll('text')
             .style('font-size', '11px');
         // X-axis ticks
-        g
+        const xTickG = g
             .append('g')
             .attr('transform', `translate(0,${innerHeight})`)
-            .style('font-size', '14px')
-            .call(axisBottom(xGroup).tickFormat(d => d.at(-1)))
+            .style('font-size', '14px');
+        xTickG.call(axisBottom(xGroup).tickFormat(d => d.at(-1)))
             .selectAll('text')
             .style('font-size', '11px')
             .attr('dx', '-6px')
             .attr('dy', '6px')
             .attr('transform', 'rotate(-45)')
             .style('text-anchor', 'end');
+        if (isStratified) {
+            // Associate each X tick with a cell type color,
+            // since in the stratified case the violins are colored
+            // by sample set.
+            const tickWidth = xGroup.bandwidth();
+            xTickG.selectAll('.tick')
+                .append('rect')
+                .attr('x', -tickWidth / 2)
+                // .attr("y", -innerHeight)
+                .attr('width', tickWidth)
+                .attr('height', 4)
+                .style('fill', d => obsSetColorScale(d));
+        }
         // Y-axis title
         g
             .append('text')
@@ -333,7 +348,8 @@ export default function CellSetExpressionPlot(props) {
     }, [width, height, data, marginLeft, marginBottom, colors,
         jitter, theme, yMinProp, marginTop, marginRight, featureType,
         featureValueType, featureValueTransformName, yUnits, obsType,
-        maxCharactersForLabel, sampleSetSelection,
+        maxCharactersForLabel, sampleSetSelection, isStratified,
+        obsSetColorScale,
     ]);
     return (_jsx("svg", { ref: svgRef, style: {
             top: 0,

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

@@ -1 +1 @@
-{"version":3,"file":"CellSetExpressionPlotOptions.d.ts","sourceRoot":"","sources":["../src/CellSetExpressionPlotOptions.js"],"names":[],"mappings":"AAMA,8EAwIC"}
+{"version":3,"file":"CellSetExpressionPlotOptions.d.ts","sourceRoot":"","sources":["../src/CellSetExpressionPlotOptions.js"],"names":[],"mappings":"AAUA,8EAyKC"}

package/dist-tsc/CellSetExpressionPlotOptions.js

@@ -4,16 +4,21 @@ import { useId } from 'react-aria';
 import { TableCell, TableRow, TextField, Slider } from '@material-ui/core';
 import { usePlotOptionsStyles, OptionsContainer, OptionSelect } from '@vitessce/vit-s';
 import { GLSL_COLORMAPS } from '@vitessce/gl';
+import { capitalize } from '@vitessce/utils';
+const FEATURE_AGGREGATION_STRATEGIES = ['first', 'last', 'sum', 'mean'];
 export default function CellSetExpressionPlotOptions(props) {
-    const { featureValueTransform, setFeatureValueTransform, featureValueTransformCoefficient, setFeatureValueTransformCoefficient, transformOptions, featureValuePositivityThreshold, setFeatureValuePositivityThreshold, featureValueColormap, setFeatureValueColormap, } = props;
+    const { featureValueTransform, setFeatureValueTransform, featureValueTransformCoefficient, setFeatureValueTransformCoefficient, transformOptions, featureValuePositivityThreshold, setFeatureValuePositivityThreshold, featureValueColormap, setFeatureValueColormap, featureAggregationStrategy, setFeatureAggregationStrategy, } = props;
     const cellSetExpressionPlotOptionsId = useId();
     const classes = usePlotOptionsStyles();
     function handleFeatureValueColormapChange(event) {
         setFeatureValueColormap(event.target.value);
     }
-    const handleTransformChange = (event) => {
+    function handleTransformChange(event) {
         setFeatureValueTransform(event.target.value === '' ? null : event.target.value);
-    };
+    }
+    function handleFeatureAggregationStrategyChange(event) {
+        setFeatureAggregationStrategy(event.target.value);
+    }
     function handlePositivityThresholdChange(event, value) {
         setFeatureValuePositivityThreshold(value);
     }
@@ -38,5 +43,7 @@ export default function CellSetExpressionPlotOptions(props) {
                                 id: `cellset-expression-transform-select-${cellSetExpressionPlotOptionsId}`,
                             }, children: transformOptions.map(opt => (_jsx("option", { value: opt.value === null ? '' : opt.value, children: opt.name }, opt.name))) }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsx("label", { htmlFor: `cellset-expression-transform-coeff-${cellSetExpressionPlotOptionsId}`, children: "Transform Coefficient" }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsx(TextField, { label: "Transform Coefficient", type: "number", onChange: handleTransformCoefficientChange, value: featureValueTransformCoefficient, InputLabelProps: {
                                 shrink: true,
-                            }, id: `cellset-expression-transform-coeff-${cellSetExpressionPlotOptionsId}` }) })] }), setFeatureValuePositivityThreshold ? (_jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, children: "Positivity Threshold" }), _jsx(TableCell, { className: classes.inputCell, children: _jsx(Slider, { classes: { root: classes.slider, valueLabel: classes.sliderValueLabel }, value: featureValuePositivityThreshold, onChange: handlePositivityThresholdChange, "aria-labelledby": "pos-threshold-slider", valueLabelDisplay: "auto", step: 1.0, min: 0.0, max: 100.0 }) })] }, "transform-coefficient-option-row")) : null] }));
+                            }, id: `cellset-expression-transform-coeff-${cellSetExpressionPlotOptionsId}` }) })] }), setFeatureAggregationStrategy ? (_jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsx("label", { htmlFor: `feature-aggregation-strategy-${cellSetExpressionPlotOptionsId}`, 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-${cellSetExpressionPlotOptionsId}`,
+                            }, children: FEATURE_AGGREGATION_STRATEGIES.map(opt => (_jsx("option", { value: opt, children: capitalize(opt) }, opt))) }) })] })) : null, setFeatureValuePositivityThreshold ? (_jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, children: "Positivity Threshold" }), _jsx(TableCell, { className: classes.inputCell, children: _jsx(Slider, { classes: { root: classes.slider, valueLabel: classes.sliderValueLabel }, value: featureValuePositivityThreshold, onChange: handlePositivityThresholdChange, "aria-labelledby": "pos-threshold-slider", valueLabelDisplay: "auto", step: 1.0, min: 0.0, max: 100.0 }) })] }, "transform-coefficient-option-row")) : null] }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"CellSetExpressionPlotSubscriber.d.ts","sourceRoot":"","sources":["../src/CellSetExpressionPlotSubscriber.js"],"names":[],"mappings":"AAmGA;;;;;;;;;GASG;AACH,uDALG;IAAwB,mBAAmB;IACrB,kBAAkB,EAAhC,MAAM;IAEQ,KAAK,EAAnB,MAAM;CAChB,eAoKA"}
+{"version":3,"file":"CellSetExpressionPlotSubscriber.d.ts","sourceRoot":"","sources":["../src/CellSetExpressionPlotSubscriber.js"],"names":[],"mappings":"AA0HA;;;;;;;;;GASG;AACH,uDALG;IAAwB,mBAAmB;IACrB,kBAAkB,EAAhC,MAAM;IAEQ,KAAK,EAAnB,MAAM;CAChB,eAwLA"}

package/dist-tsc/CellSetExpressionPlotSubscriber.js

@@ -8,6 +8,31 @@ import CellSetExpressionPlotOptions from './CellSetExpressionPlotOptions.js';
 import CellSetExpressionPlot from './CellSetExpressionPlot.js';
 import { useStyles } from './styles.js';
 import { summarizeStratifiedExpressionData, histogramStratifiedExpressionData, } from './expr-hooks.js';
+const DEFAULT_FEATURE_AGGREGATION_STRATEGY = 'first';
+function featureSummary(geneSelection, featureAggregationStrategy) {
+    if (featureAggregationStrategy === 'first') {
+        return geneSelection?.[0];
+    }
+    if (featureAggregationStrategy === 'last') {
+        return geneSelection?.at(-1);
+    }
+    if (typeof featureAggregationStrategy === 'number') {
+        const i = featureAggregationStrategy;
+        return geneSelection?.[i];
+    }
+    if (featureAggregationStrategy === 'sum') {
+        // TODO: make these .join()-ed labels more scalable,
+        // in particular, if more than 10 or so elements.
+        return geneSelection?.join(' + ');
+    }
+    if (featureAggregationStrategy === 'mean') {
+        return `Mean of ${geneSelection?.join(', ')}`;
+    }
+    if (featureAggregationStrategy === 'difference') {
+        return geneSelection?.join(' - ');
+    }
+    return '';
+}
 /**
  * Get expression data for the cells
  * in the selected cell sets.
@@ -27,14 +52,14 @@ import { summarizeStratifiedExpressionData, histogramStratifiedExpressionData, }
  * @param {number} featureValueTransformCoefficient A coefficient
  * to be used in the transform function.
  */
-function useExpressionByCellSet(sampleEdges, sampleSets, sampleSetSelection, expressionData, obsIndex, cellSets, additionalCellSets, geneSelection, cellSetSelection, cellSetColor, featureValueTransform, featureValueTransformCoefficient, theme, yMinProp) {
+function useExpressionByCellSet(sampleEdges, sampleSets, sampleSetSelection, expressionData, obsIndex, cellSets, additionalCellSets, geneSelection, cellSetSelection, cellSetColor, featureValueTransform, featureValueTransformCoefficient, theme, yMinProp, featureAggregationStrategy) {
     const mergedCellSets = useMemo(() => mergeObsSets(cellSets, additionalCellSets), [cellSets, additionalCellSets]);
     // From the expression matrix and the list of selected genes / cell sets,
     // generate the array of data points for the plot.
     const [expressionArr, expressionMax] = useMemo(() => {
         const [stratifiedData, exprMax] = stratifyExpressionData(sampleEdges, sampleSets, sampleSetSelection, expressionData, obsIndex, mergedCellSets, geneSelection, cellSetSelection, cellSetColor, featureValueTransform, featureValueTransformCoefficient);
         if (stratifiedData) {
-            const aggregateData = aggregateStratifiedExpressionData(stratifiedData, geneSelection);
+            const aggregateData = aggregateStratifiedExpressionData(stratifiedData, geneSelection, featureAggregationStrategy);
             const summarizedData = summarizeStratifiedExpressionData(aggregateData, true);
             const histogramData = histogramStratifiedExpressionData(summarizedData, 16, yMinProp);
             return [histogramData, exprMax];
@@ -44,6 +69,7 @@ function useExpressionByCellSet(sampleEdges, sampleSets, sampleSetSelection, exp
         mergedCellSets, cellSetSelection, cellSetColor,
         featureValueTransform, featureValueTransformCoefficient,
         yMinProp, sampleEdges, sampleSets, sampleSetSelection,
+        featureAggregationStrategy,
     ]);
     // From the cell sets hierarchy and the list of selected cell sets,
     // generate the array of set sizes data points for the bar plot.
@@ -63,11 +89,11 @@ function useExpressionByCellSet(sampleEdges, sampleSets, sampleSetSelection, exp
  * @param {string} props.theme The name of the current Vitessce theme.
  */
 export function CellSetExpressionPlotSubscriber(props) {
-    const { coordinationScopes, closeButtonVisible, downloadButtonVisible, removeGridComponent, theme, jitter = false, yMin = null, yUnits = null, helpText = ViewHelpMapping.OBS_SET_FEATURE_VALUE_DISTRIBUTION, } = props;
+    const { coordinationScopes, closeButtonVisible, downloadButtonVisible, removeGridComponent, theme, title, xAxisTitle, jitter = false, yMin = null, yUnits = null, helpText = ViewHelpMapping.OBS_SET_FEATURE_VALUE_DISTRIBUTION, } = props;
     const classes = useStyles();
     const loaders = useLoaders();
     // Get "props" from the coordination space.
-    const [{ dataset, obsType, featureType, featureValueType, featureSelection: geneSelection, featureValueTransform, featureValueTransformCoefficient, obsSetSelection: cellSetSelection, obsSetColor: cellSetColor, additionalObsSets: additionalCellSets, sampleType, sampleSetSelection, sampleSetColor, }, { setFeatureValueTransform, setFeatureValueTransformCoefficient, setSampleSetColor, }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType.OBS_SET_FEATURE_VALUE_DISTRIBUTION], coordinationScopes);
+    const [{ dataset, obsType, featureType, featureValueType, featureSelection: geneSelection, featureValueTransform, featureValueTransformCoefficient, obsSetSelection: cellSetSelection, obsSetColor: cellSetColor, additionalObsSets: additionalCellSets, sampleType, sampleSetSelection, sampleSetColor, featureAggregationStrategy, }, { setFeatureValueTransform, setFeatureValueTransformCoefficient, setSampleSetColor, setFeatureAggregationStrategy, }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType.OBS_SET_FEATURE_VALUE_DISTRIBUTION], coordinationScopes);
     const [width, height, containerRef] = useGridItemSize();
     const transformOptions = VALUE_TRANSFORM_OPTIONS;
     // Get data from loaders using the data hooks.
@@ -97,12 +123,21 @@ export function CellSetExpressionPlotSubscriber(props) {
         sampleSetsUrls,
         sampleEdgesUrls,
     ]);
-    const [histogramData, setArr, exprMax] = useExpressionByCellSet(sampleEdges, sampleSets, sampleSetSelection, expressionData, obsIndex, cellSets, additionalCellSets, geneSelection, cellSetSelection, cellSetColor, featureValueTransform, featureValueTransformCoefficient, theme, yMin);
-    const firstGeneSelected = geneSelection && geneSelection.length >= 1
-        ? (featureLabelsMap?.get(geneSelection[0])
-            || featureLabelsMap?.get(cleanFeatureId(geneSelection[0]))
-            || geneSelection[0])
-        : null;
+    const featureAggregationStrategyToUse = featureAggregationStrategy
+        ?? DEFAULT_FEATURE_AGGREGATION_STRATEGY;
+    const [histogramData, setArr, exprMax] = useExpressionByCellSet(sampleEdges, sampleSets, sampleSetSelection, expressionData, obsIndex, cellSets, additionalCellSets, geneSelection, cellSetSelection, cellSetColor, featureValueTransform, featureValueTransformCoefficient, theme, yMin, featureAggregationStrategyToUse);
+    const featureSuffix = useMemo(() => {
+        const cleanedGeneSelection = geneSelection?.map(geneName => (featureLabelsMap?.get(geneName)
+            || featureLabelsMap?.get(cleanFeatureId(geneName))
+            || geneName));
+        if (Array.isArray(cleanedGeneSelection)) {
+            return featureSummary(cleanedGeneSelection, featureAggregationStrategyToUse);
+        }
+        return null;
+    }, [geneSelection, featureAggregationStrategyToUse]);
     const selectedTransformName = transformOptions.find(o => o.value === featureValueTransform)?.name;
-    return (_jsx(TitleInfo, { title: `Expression by ${capitalize(obsType)} Set${(firstGeneSelected ? ` (${firstGeneSelected})` : '')}`, closeButtonVisible: closeButtonVisible, downloadButtonVisible: downloadButtonVisible, removeGridComponent: removeGridComponent, urls: urls, theme: theme, isReady: isReady, helpText: helpText, options: (_jsx(CellSetExpressionPlotOptions, { featureValueTransform: featureValueTransform, setFeatureValueTransform: setFeatureValueTransform, featureValueTransformCoefficient: featureValueTransformCoefficient, setFeatureValueTransformCoefficient: setFeatureValueTransformCoefficient, transformOptions: transformOptions })), children: _jsx("div", { ref: containerRef, className: classes.vegaContainer, children: histogramData ? (_jsx(CellSetExpressionPlot, { yMin: yMin, yUnits: yUnits, jitter: jitter, cellSetSelection: cellSetSelection, sampleSetSelection: sampleSetSelection, sampleSetColor: sampleSetColor, colors: setArr, data: histogramData, exprMax: exprMax, theme: theme, width: width, height: height, obsType: obsType, featureType: featureType, featureValueType: featureValueType, featureValueTransformName: selectedTransformName })) : (_jsxs("span", { children: ["Select a ", featureType, "."] })) }) }));
+    // Use empty string when firstGeneSelected is null
+    const titleSuffix = featureSuffix ? ` (${featureSuffix})` : '';
+    return (_jsx(TitleInfo, { title: title ? `${title}${titleSuffix}`
+            : `Expression by ${capitalize(obsType)} Set${titleSuffix}`, closeButtonVisible: closeButtonVisible, downloadButtonVisible: downloadButtonVisible, removeGridComponent: removeGridComponent, urls: urls, theme: theme, isReady: isReady, helpText: helpText, options: (_jsx(CellSetExpressionPlotOptions, { featureValueTransform: featureValueTransform, setFeatureValueTransform: setFeatureValueTransform, featureValueTransformCoefficient: featureValueTransformCoefficient, setFeatureValueTransformCoefficient: setFeatureValueTransformCoefficient, transformOptions: transformOptions, featureAggregationStrategy: featureAggregationStrategy, setFeatureAggregationStrategy: setFeatureAggregationStrategy })), children: _jsx("div", { ref: containerRef, className: classes.vegaContainer, children: histogramData ? (_jsx(CellSetExpressionPlot, { yMin: yMin, yUnits: yUnits, jitter: jitter, obsSetSelection: cellSetSelection, obsSetColor: cellSetColor, sampleSetSelection: sampleSetSelection, sampleSetColor: sampleSetColor, colors: setArr, data: histogramData, exprMax: exprMax, theme: theme, width: width, height: height, obsType: obsType, featureType: featureType, featureValueType: featureValueType, featureValueTransformName: selectedTransformName, xAxisTitle: xAxisTitle })) : (_jsxs("span", { children: ["Select a ", featureType, "."] })) }) }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"DotPlot.d.ts","sourceRoot":"","sources":["../src/DotPlot.js"],"names":[],"mappings":"AAKA;;;;;;;;;;;;;;;;;GAiBG;AACH,uCAdG;IAAwB,IAAI,EAApB,MAAM,EAAE;IAEM,KAAK,EAAnB,MAAM;IACQ,KAAK,EAAnB,MAAM;IACQ,MAAM,EAApB,MAAM;IACQ,WAAW,EAAzB,MAAM;IAGQ,YAAY,EAA1B,MAAM;IAGa,yBAAyB,EAA5C,MAAM,GAAC,IAAI;CAErB,eAwJA"}
+{"version":3,"file":"DotPlot.d.ts","sourceRoot":"","sources":["../src/DotPlot.js"],"names":[],"mappings":"AAOA;;;;;;;;;;;;;;;;;GAiBG;AACH,uCAdG;IAAwB,IAAI,EAApB,MAAM,EAAE;IAEM,KAAK,EAAnB,MAAM;IACQ,KAAK,EAAnB,MAAM;IACQ,MAAM,EAApB,MAAM;IACQ,WAAW,EAAzB,MAAM;IAGQ,YAAY,EAA1B,MAAM;IAGa,yBAAyB,EAA5C,MAAM,GAAC,IAAI;CAErB,eA4NA"}

package/dist-tsc/DotPlot.js

@@ -1,8 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
+import React, { useRef, useEffect, useCallback, useState, useMemo } from 'react';
 import { clamp } from 'lodash-es';
 import { VegaPlot, VEGA_THEMES } from '@vitessce/vega';
 import { capitalize, pluralize as plur } from '@vitessce/utils';
+import { select } from 'd3-selection';
+import { getColorScale } from './utils.js';
 /**
  * Gene expression dot plot,
  * implemented with the VegaPlot component.
@@ -22,7 +24,11 @@ import { capitalize, pluralize as plur } from '@vitessce/utils';
  * for the feature value transformation function.
  */
 export default function DotPlot(props) {
-    const { isStratified, transpose, data: rawData, theme, width, height, marginRight, marginBottom, obsType, keyLength = 36, featureType, featureValueType, featureValueTransformName, featureValueColormap, cellSetSelection, } = props;
+    const { isStratified, transpose, data: rawData, theme, width, height, marginRight, marginBottom, obsType, sampleType, keyLength = 36, featureType, featureValueType, featureValueTransformName, 
+    // TODO: re-enable featureValueColormap coordination
+    // featureValueColormap,
+    obsSetSelection, obsSetColor, } = props;
+    const vegaContainerRef = useRef();
     // Add a property `keyGroup` and `keyFeature` which concatenates the key and the name,
     // which is both unique and can easily be converted
     // back to the name by taking a substring.
@@ -59,11 +65,11 @@ export default function DotPlot(props) {
     const autoMarginForSampleSet = marginRight
         || 30 + Math.sqrt(maxCharactersForSampleSet / 2) * 30;
     const plotWidth = transpose
-        ? clamp(width - autoMarginForFeature - 180, 10, Infinity) / (cellSetSelection?.length || 1)
+        ? clamp(width - autoMarginForFeature - 180, 10, Infinity) / (obsSetSelection?.length || 1)
         : clamp(width - autoMarginForGroup - autoMarginForSampleSet - 200, 10, Infinity);
     const plotHeight = transpose
         ? clamp((height - autoMarginForGroup - autoMarginForSampleSet - 50), 10, Infinity)
-        : clamp((height - autoMarginForFeature - 80), 10, Infinity) / (cellSetSelection?.length || 1);
+        : clamp((height - autoMarginForFeature - 80), 10, Infinity) / (obsSetSelection?.length || 1);
     // Get an array of keys for sorting purposes.
     const groupKeys = data.map(d => d.keyGroup);
     const featureKeys = data.map(d => d.keyFeature);
@@ -104,7 +110,8 @@ export default function DotPlot(props) {
                 type: 'quantitative',
                 title: meanTransform,
                 scale: {
-                    scheme: featureValueColormap,
+                    // scheme: featureValueColormap,
+                    scheme: 'greys',
                 },
                 legend: {
                     direction: 'horizontal',
@@ -125,6 +132,11 @@ export default function DotPlot(props) {
                 legend: {
                     symbolFillColor: 'white',
                 },
+                scale: { domain: [0, 100] },
+            },
+            tooltip: {
+                field: 'pctPosInGroup',
+                type: 'quantitative',
             },
         },
         width: plotWidth,
@@ -140,5 +152,46 @@ export default function DotPlot(props) {
             } : {}),
         },
     };
-    return (_jsx(VegaPlot, { data: data, spec: spec }));
+    const getTooltipText = useCallback(item => ({
+        [`${capitalize(featureType)}`]: item.datum.feature,
+        [`${capitalize(obsType)} Set`]: item.datum.group,
+        ...(isStratified
+            ? ({ [`${capitalize(sampleType)} Set`]: item.datum.secondaryGroup })
+            : {}),
+        [`Percentage of ${plur(obsType, 2)} in set`]: item.datum.pctPosInGroup,
+        [meanTransform.join(' ')]: item.datum.meanExpInGroup,
+    }), [featureType, obsType, featureValueType, featureValueTransformName]);
+    const obsSetColorScale = useMemo(() => getColorScale(obsSetSelection, obsSetColor, theme), [obsSetSelection, obsSetColor, theme]);
+    const [vegaRenderIncrement, setVegaRenderIncrement] = useState(0);
+    useEffect(() => {
+        // If the dot plot is stratified by both obsSet and sampleSet,
+        // then we want to add cell set colors.
+        // TODO: do we also want to add these color bars
+        // when only stratified by obsSet?
+        const domElement = vegaContainerRef.current;
+        // Here, we assume that the Vega SVG renderer is being used.
+        const svg = select(domElement)
+            .select('svg');
+        // We use the following CSS selector to identify all of
+        // the <line> elements that we are interested to modify.
+        const tickEls = svg.selectAll('g.root g.column_footer g.role-axis g.role-axis-domain line');
+        tickEls
+            .attr('stroke-width', 5)
+            .attr('dy', 2.5)
+            .attr('stroke', (d, i) => {
+            const obsSetPath = obsSetSelection?.[i];
+            return obsSetColorScale(obsSetPath);
+        });
+    }, [vegaContainerRef, vegaRenderIncrement, obsSetSelection, obsSetColorScale]);
+    // We want to increment the counter whenever we detect that VegaPlot
+    // has re-rendered.
+    const onNewView = useCallback(() => {
+        setVegaRenderIncrement(prev => prev + 1);
+    }, []);
+    // This is kind of hacky, since it is possible that the useEffect runs prior
+    // to the Vega rendering, but in practice it seems to work.
+    useEffect(() => {
+        setVegaRenderIncrement(prev => prev + 1);
+    }, [rawData]);
+    return (_jsx("div", { ref: vegaContainerRef, children: _jsx(VegaPlot, { data: data, spec: spec, onNewView: onNewView, getTooltipText: getTooltipText, renderer: "svg" }) }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"DotPlotSubscriber.d.ts","sourceRoot":"","sources":["../src/DotPlotSubscriber.js"],"names":[],"mappings":"AAmBA;;;;;;;GAOG;AACH,yCALG;IAAwB,mBAAmB;IACrB,kBAAkB,EAAhC,MAAM;IAEQ,KAAK,EAAnB,MAAM;CAChB,eAoJA"}
+{"version":3,"file":"DotPlotSubscriber.d.ts","sourceRoot":"","sources":["../src/DotPlotSubscriber.js"],"names":[],"mappings":"AAmBA;;;;;;;GAOG;AACH,yCALG;IAAwB,mBAAmB;IACrB,kBAAkB,EAAhC,MAAM;IAEQ,KAAK,EAAnB,MAAM;CAChB,eAsJA"}

package/dist-tsc/DotPlotSubscriber.js

@@ -50,5 +50,5 @@ export function DotPlotSubscriber(props) {
     ]);
     const [resultArr, meanExpressionMax] = useExpressionSummaries(sampleEdges, sampleSets, sampleSetSelection, expressionData, obsIndex, cellSets, additionalCellSets, geneSelection, cellSetSelection, cellSetColor, featureValueTransform, featureValueTransformCoefficient, posThreshold, featureLabelsMap);
     const selectedTransformName = transformOptions.find(o => o.value === featureValueTransform)?.name;
-    return (_jsx(TitleInfo, { title: title, removeGridComponent: removeGridComponent, urls: urls, theme: theme, isReady: isReady, helpText: helpText, options: (_jsx(CellSetExpressionPlotOptions, { featureValueTransform: featureValueTransform, setFeatureValueTransform: setFeatureValueTransform, featureValueTransformCoefficient: featureValueTransformCoefficient, setFeatureValueTransformCoefficient: setFeatureValueTransformCoefficient, transformOptions: transformOptions, featureValuePositivityThreshold: posThreshold, setFeatureValuePositivityThreshold: setPosThreshold, featureValueColormap: featureValueColormap, setFeatureValueColormap: setFeatureValueColormap })), children: _jsx("div", { ref: containerRef, className: classes.vegaContainer, children: resultArr ? (_jsx(DotPlot, { isStratified: isStratified, transpose: transpose, domainMax: meanExpressionMax, data: resultArr, theme: theme, width: width, height: height, obsType: obsType, featureType: featureType, featureValueType: featureValueType, featureValueTransformName: selectedTransformName, featureValueColormap: featureValueColormap, cellSetSelection: cellSetSelection })) : (_jsxs("span", { children: ["Select at least one ", featureType, "."] })) }) }));
+    return (_jsx(TitleInfo, { title: title, removeGridComponent: removeGridComponent, urls: urls, theme: theme, isReady: isReady, helpText: helpText, options: (_jsx(CellSetExpressionPlotOptions, { featureValueTransform: featureValueTransform, setFeatureValueTransform: setFeatureValueTransform, featureValueTransformCoefficient: featureValueTransformCoefficient, setFeatureValueTransformCoefficient: setFeatureValueTransformCoefficient, transformOptions: transformOptions, featureValuePositivityThreshold: posThreshold, setFeatureValuePositivityThreshold: setPosThreshold, featureValueColormap: featureValueColormap, setFeatureValueColormap: setFeatureValueColormap })), children: _jsx("div", { ref: containerRef, className: classes.vegaContainer, children: resultArr ? (_jsx(DotPlot, { isStratified: isStratified, transpose: transpose, domainMax: meanExpressionMax, data: resultArr, theme: theme, width: width, height: height, obsType: obsType, sampleType: sampleType, featureType: featureType, featureValueType: featureValueType, featureValueTransformName: selectedTransformName, featureValueColormap: featureValueColormap, obsSetSelection: cellSetSelection, obsSetColor: cellSetColor })) : (_jsxs("span", { children: ["Select at least one ", featureType, "."] })) }) }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"FeatureSetEnrichmentBarPlot.d.ts","sourceRoot":"","sources":["../src/FeatureSetEnrichmentBarPlot.js"],"names":[],"mappings":"AAOA;;GAEG;AACH,6EAgMC"}
+{"version":3,"file":"FeatureSetEnrichmentBarPlot.d.ts","sourceRoot":"","sources":["../src/FeatureSetEnrichmentBarPlot.js"],"names":[],"mappings":"AAOA;;GAEG;AACH,6EAiMC"}

package/dist-tsc/FeatureSetEnrichmentBarPlot.js

@@ -9,7 +9,7 @@ import { getColorScale } from './utils.js';
  * Feature set enrichment test results displayed using a bar chart.
  */
 export default function FeatureSetEnrichmentBarPlot(props) {
-    const { data, theme, width, height, marginRight = 200, marginBottom = 120, keyLength = 36, featureType, onBarSelect, obsSetsColumnNameMappingReversed, sampleSetsColumnNameMappingReversed, sampleSetSelection, obsSetSelection, obsSetColor, sampleSetColor, pValueThreshold, } = props;
+    const { data, theme, width, height, marginRight = 300, marginBottom = 120, keyLength = 36, featureType, onBarSelect, obsSetsColumnNameMappingReversed, sampleSetsColumnNameMappingReversed, sampleSetSelection, obsSetSelection, obsSetColor, sampleSetColor, pValueThreshold, } = props;
     const [obsSetColorScale, sampleSetColorScale] = useMemo(() => [
         getColorScale(obsSetSelection, obsSetColor, theme),
         getColorScale(sampleSetSelection, sampleSetColor, theme),
@@ -62,7 +62,7 @@ export default function FeatureSetEnrichmentBarPlot(props) {
                 }
                 return [...a, h];
             }, []);
-            const MAX_ROWS = 25;
+            const MAX_ROWS = 50;
             result = result.slice(0, MAX_ROWS);
             return result;
         }
@@ -88,7 +88,7 @@ export default function FeatureSetEnrichmentBarPlot(props) {
                 select: {
                     type: 'point',
                     on: 'click[event.shiftKey === false]',
-                    fields: ['name'],
+                    fields: ['name', 'term'],
                     empty: 'none',
                 },
             },
@@ -97,7 +97,7 @@ export default function FeatureSetEnrichmentBarPlot(props) {
                 select: {
                     type: 'point',
                     on: 'click[event.shiftKey]',
-                    fields: ['name'],
+                    fields: ['name', 'term'],
                     empty: 'none',
                 },
             },
@@ -145,10 +145,11 @@ export default function FeatureSetEnrichmentBarPlot(props) {
     };
     const handleSignal = (name, value) => {
         if (name === 'bar_select') {
-            onBarSelect(value.obsSetPath);
+            onBarSelect(value.name?.[0], value.term?.[0]);
         }
         else if (name === 'shift_bar_select') {
-            onBarSelect(value.obsSetPath, true);
+            // Name and term may be arrays
+            onBarSelect(value.name, value.term, true);
         }
     };
     const signalListeners = { bar_select: handleSignal, shift_bar_select: handleSignal };