@vitessce/statistical-plots 3.5.10 → 3.5.12

package/dist/index.js

@@ -1,4 +1,4 @@
-import { b, f, C, e, a, i, D, h, E, F, c, d, T, V } from "./index-b8398176.js";
+import { b, f, C, e, a, i, D, h, E, F, c, d, T, V } from "./index-fa429ace.js";
 import "react";
 import "@vitessce/vit-s";
 import "react-dom";

package/dist/{jpeg-81bd1053.js → jpeg-affe217d.js}

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

package/dist/{lerc-b15c3a4c.js → lerc-eeb05714.js}

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

package/dist/{lzw-503cb795.js → lzw-fdf7d374.js}

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

package/dist/{packbits-40cbad40.js → packbits-530d3977.js}

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

package/dist/{raw-9b8d9daf.js → raw-5d9364f4.js}

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

package/dist/{webimage-bbc59b4a.js → webimage-57a383de.js}

@@ -1,4 +1,4 @@
-import { B as BaseDecoder } from "./index-b8398176.js";
+import { B as BaseDecoder } from "./index-fa429ace.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) => {
@@ -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/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,eA2KA"}
+{"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.
@@ -67,7 +93,7 @@ export function CellSetExpressionPlotSubscriber(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,15 +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;
     // Use empty string when firstGeneSelected is null
-    const titleSuffix = firstGeneSelected ? ` (${firstGeneSelected})` : '';
+    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 })), 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, "."] })) }) }));
+            : `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":"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,eA0NA"}
+{"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

@@ -24,7 +24,10 @@ import { getColorScale } from './utils.js';
  * for the feature value transformation function.
  */
 export default function DotPlot(props) {
-    const { isStratified, transpose, data: rawData, theme, width, height, marginRight, marginBottom, obsType, sampleType, keyLength = 36, featureType, featureValueType, featureValueTransformName, featureValueColormap, obsSetSelection, obsSetColor, } = 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
@@ -107,7 +110,8 @@ export default function DotPlot(props) {
                 type: 'quantitative',
                 title: meanTransform,
                 scale: {
-                    scheme: featureValueColormap,
+                    // scheme: featureValueColormap,
+                    scheme: 'greys',
                 },
                 legend: {
                     direction: 'horizontal',

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 };

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

@@ -1 +1 @@
-{"version":3,"file":"FeatureSetEnrichmentBarPlotSubscriber.d.ts","sourceRoot":"","sources":["../src/FeatureSetEnrichmentBarPlotSubscriber.js"],"names":[],"mappings":"AA0BA,+EA2IC"}
+{"version":3,"file":"FeatureSetEnrichmentBarPlotSubscriber.d.ts","sourceRoot":"","sources":["../src/FeatureSetEnrichmentBarPlotSubscriber.js"],"names":[],"mappings":"AA0BA,+EA8IC"}

package/dist-tsc/FeatureSetEnrichmentBarPlotSubscriber.js

@@ -39,8 +39,11 @@ export function FeatureSetEnrichmentBarPlotSubscriber(props) {
         // Will not work since transformFeature currently:
         // - matches based on kgId (rather than term)
         // - only knows about Reactome pathways (not GO terms).
-        // console.log(await transformFeature(kgNode, targetFeatureType))
-        // setFeatureSelection(featureIds);
+        const targetsInPathway = await transformFeature(kgNode, targetFeatureType);
+        const featureIds = targetsInPathway
+            .filter((d, i) => i < 10) // TODO: do not limit the number of genes here
+            .map(d => d.label);
+        setFeatureSelection(featureIds);
     }, [setFeatureSelection]);
     // TODO: support the following options
     // - p-value threshold for which bars to show

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

@@ -1 +1 @@
-{"version":3,"file":"TreemapSubscriber.d.ts","sourceRoot":"","sources":["../src/TreemapSubscriber.js"],"names":[],"mappings":"AAyBA,2DAmPC"}
+{"version":3,"file":"TreemapSubscriber.d.ts","sourceRoot":"","sources":["../src/TreemapSubscriber.js"],"names":[],"mappings":"AAyBA,2DAgQC"}

package/dist-tsc/TreemapSubscriber.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable no-unused-vars */
 import React, { useMemo, useCallback } from 'react';
 import { TitleInfo, useCoordination, useLoaders, useUrls, useReady, useGridItemSize, useObsFeatureMatrixIndices, useObsSetsData, useSampleEdgesData, useSampleSetsData, } from '@vitessce/vit-s';
@@ -43,8 +43,6 @@ export function TreemapSubscriber(props) {
     ]);
     const mergedObsSets = useMemo(() => mergeObsSets(obsSets, additionalObsSets), [obsSets, additionalObsSets]);
     const mergedSampleSets = useMemo(() => mergeObsSets(sampleSets, null), [sampleSets]);
-    const obsCount = obsIndex?.length || 0;
-    const sampleCount = sampleIndex?.length || 0;
     // TODO: use obsFilter / sampleFilter to display
     // _all_ cells/samples in gray / transparent in background,
     // and use obsSetSelection/sampleSetSelection to display
@@ -71,7 +69,7 @@ export function TreemapSubscriber(props) {
             const sampleSetSize = sampleSetSizes?.find(d => isEqual(d.setNamePath, sampleSetKey))?.size;
             sampleResult.set(sampleSetKey, sampleSetSize || 0);
         });
-        if (mergedObsSets && obsSetSelection) {
+        if (mergedObsSets && obsSetSelection && obsIndex) {
             const sampleIdToSetMap = sampleSets && sampleSetSelection
                 ? treeToSelectedSetMap(sampleSets, sampleSetSelection)
                 : null;
@@ -98,11 +96,17 @@ export function TreemapSubscriber(props) {
         ];
     }, [obsIndex, sampleEdges, sampleSets, obsSetColor,
         sampleSetColor, mergedObsSets, obsSetSelection, mergedSampleSets,
-        sampleSetSelection,
+        sampleSetSelection, obsIndex,
         // TODO: consider filtering-related coordination values
     ]);
+    const totalObsCount = obsIndex?.length || 0;
+    const totalSampleCount = sampleIndex?.length || 0;
+    const selectedObsCount = obsCounts.reduce((a, h) => a + h.value, 0);
+    const selectedSampleCount = sampleCounts.reduce((a, h) => a + h.value, 0);
+    const unselectedObsCount = totalObsCount - selectedObsCount;
+    const unselectedSampleCount = totalSampleCount - selectedSampleCount;
     const onNodeClick = useCallback((obsSetPath) => {
         setObsSetSelection([obsSetPath]);
     }, [setObsSetSelection]);
-    return (_jsx(TitleInfo, { title: `Treemap of ${capitalize(plur(obsType, 2))}`, info: `${commaNumber(obsCount)} ${plur(obsType, obsCount)} from ${commaNumber(sampleCount)} ${plur(sampleType, sampleCount)}`, removeGridComponent: removeGridComponent, urls: urls, theme: theme, isReady: isReady, helpText: helpText, options: (_jsx(TreemapOptions, { obsType: obsType, sampleType: sampleType, obsColorEncoding: obsColorEncoding, setObsColorEncoding: setObsColorEncoding, hierarchyLevels: hierarchyLevels || DEFAULT_HIERARCHY_LEVELS, setHierarchyLevels: setHierarchyLevels })), children: _jsx("div", { ref: containerRef, className: classes.vegaContainer, children: _jsx(Treemap, { obsCounts: obsCounts, sampleCounts: sampleCounts, obsColorEncoding: obsColorEncoding, hierarchyLevels: hierarchyLevels || DEFAULT_HIERARCHY_LEVELS, theme: theme, width: width, height: height, obsType: obsType, sampleType: sampleType, obsSetColor: obsSetColor, sampleSetColor: sampleSetColor, obsSetSelection: obsSetSelection, sampleSetSelection: sampleSetSelection, onNodeClick: onNodeClick }) }) }));
+    return (_jsxs(TitleInfo, { title: `Treemap of ${capitalize(plur(obsType, 2))}`, info: `${commaNumber(selectedObsCount)} ${plur(obsType, selectedObsCount)} from ${commaNumber(selectedSampleCount)} ${plur(sampleType, selectedSampleCount)}`, removeGridComponent: removeGridComponent, urls: urls, theme: theme, isReady: isReady, helpText: helpText, withPadding: false, options: (_jsx(TreemapOptions, { obsType: obsType, sampleType: sampleType, obsColorEncoding: obsColorEncoding, setObsColorEncoding: setObsColorEncoding, hierarchyLevels: hierarchyLevels || DEFAULT_HIERARCHY_LEVELS, setHierarchyLevels: setHierarchyLevels })), children: [_jsx("div", { ref: containerRef, className: classes.vegaContainer, children: _jsx(Treemap, { obsCounts: obsCounts, sampleCounts: sampleCounts, obsColorEncoding: obsColorEncoding, hierarchyLevels: hierarchyLevels || DEFAULT_HIERARCHY_LEVELS, theme: theme, width: width, height: Math.max(height * (selectedObsCount / totalObsCount), 40), obsType: obsType, sampleType: sampleType, obsSetColor: obsSetColor, sampleSetColor: sampleSetColor, obsSetSelection: obsSetSelection, sampleSetSelection: sampleSetSelection, onNodeClick: onNodeClick }) }), _jsx("div", { style: { position: 'absolute', right: '2px', bottom: '2px', fontSize: '10px' }, children: unselectedObsCount > 0 ? (_jsx("span", { children: `${commaNumber(unselectedObsCount)} ${plur(obsType, unselectedObsCount)} from ${commaNumber(unselectedSampleCount)} ${plur(sampleType, unselectedSampleCount)} currently omitted` })) : null })] }));
 }

package/dist-tsc/expr-hooks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"expr-hooks.d.ts","sourceRoot":"","sources":["../src/expr-hooks.js"],"names":[],"mappings":"AAiDA;;;;;;GAMG;AACH,8DAJW,GAAC,gBACD,GAAC,OA4BX;AAED;;;;;;GAMG;AACH,oEAJW,GAAC,aACD,GAAC,OAkBX;AAED;;;;;;;;GAQG;AACH,oEALW,GAAC,YACD,GAAC,YACD,GAAC;;;;;;;;;;;;;;;;;;;;;;;;EA4DX"}
+{"version":3,"file":"expr-hooks.d.ts","sourceRoot":"","sources":["../src/expr-hooks.js"],"names":[],"mappings":"AAiDA;;;;;;GAMG;AACH,8DAJW,GAAC,gBACD,GAAC,OA4BX;AAED;;;;;;GAMG;AACH,oEAJW,GAAC,aACD,GAAC,OAiBX;AAED;;;;;;;;GAQG;AACH,oEALW,GAAC,YACD,GAAC,YACD,GAAC;;;;;;;;;;;;;;;;;;;;;;;;EA4DX"}

package/dist-tsc/expr-hooks.test.js

@@ -70,8 +70,9 @@ describe('Utility functions for processing expression data for statistical plots
             ];
             const featureValueTransform = null;
             const featureValueTransformCoefficient = 1;
+            const featureAggregationStrategy = 'first';
             const [result] = stratifyExpressionData(sampleEdges, sampleSets, sampleSetSelection, expressionData, obsIndex, mergedCellSets, geneSelection, cellSetSelection, cellSetColor, featureValueTransform, featureValueTransformCoefficient);
-            const aggregateData = aggregateStratifiedExpressionData(result, geneSelection);
+            const aggregateData = aggregateStratifiedExpressionData(result, geneSelection, featureAggregationStrategy);
             const summaryResult = summarizeStratifiedExpressionData(aggregateData, true);
             expect(Array.from(summaryResult.keys())).toEqual([['Cell type', 'T cell'], ['Cell type', 'B cell']]);
             expect(Array.from(summaryResult.get(['Cell type', 'T cell']).keys())).toEqual([['Clinical groups', 'AKI'], ['Clinical groups', 'CKD']]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitessce/statistical-plots",
-  "version": "3.5.10",
+  "version": "3.5.12",
   "author": "HIDIVE Lab at HMS",
   "homepage": "http://vitessce.io",
   "repository": {
@@ -30,12 +30,12 @@
     "react-aria": "^3.28.0",
     "internmap": "^2.0.3",
     "uuid": "^9.0.0",
-    "@vitessce/constants-internal": "3.5.10",
-    "@vitessce/sets-utils": "3.5.10",
-    "@vitessce/utils": "3.5.10",
-    "@vitessce/vega": "3.5.10",
-    "@vitessce/vit-s": "3.5.10",
-    "@vitessce/gl": "3.5.10"
+    "@vitessce/constants-internal": "3.5.12",
+    "@vitessce/sets-utils": "3.5.12",
+    "@vitessce/utils": "3.5.12",
+    "@vitessce/vega": "3.5.12",
+    "@vitessce/vit-s": "3.5.12",
+    "@vitessce/gl": "3.5.12"
   },
   "devDependencies": {
     "react": "^18.0.0",

package/src/CellSetCompositionBarPlot.js

@@ -1,10 +1,13 @@
 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.
  */
@@ -13,9 +16,9 @@ export default function CellSetCompositionBarPlot(props) {
     data,
     theme,
     width,
-    height,
+    height: heightProp,
     marginRight = 200,
-    marginBottom = 120,
+    marginBottom = 60,
     keyLength = 36,
     obsType,
     onBarSelect,
@@ -27,6 +30,13 @@ export default function CellSetCompositionBarPlot(props) {
     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),
@@ -39,21 +49,17 @@ export default function CellSetCompositionBarPlot(props) {
       // 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;
       }
 
@@ -114,6 +120,24 @@ export default function CellSetCompositionBarPlot(props) {
     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: [
@@ -149,6 +173,7 @@ export default function CellSetCompositionBarPlot(props) {
         field: 'logFoldChange',
         type: 'quantitative',
         title: 'Log fold-change',
+        scale: xScale,
       },
       color: {
         field: 'key',
@@ -165,6 +190,7 @@ export default function CellSetCompositionBarPlot(props) {
         field: 'isReferenceSet',
         type: 'nominal',
         scale: strokeWidthScale,
+        legend: null,
       },
       tooltip: {
         field: 'effectExpectedSample',