@vitessce/statistical-plots 3.5.7 → 3.5.9

package/dist-tsc/VolcanoPlot.js

@@ -0,0 +1,231 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/* eslint-disable indent */
+/* eslint-disable camelcase */
+import React, { useMemo, useEffect, useRef } from 'react';
+import { scaleLinear } from 'd3-scale';
+import { axisBottom, axisLeft } from 'd3-axis';
+import { extent as d3_extent } from 'd3-array';
+import { select } from 'd3-selection';
+import { isEqual } from 'lodash-es';
+import { capitalize, getDefaultForegroundColor } from '@vitessce/utils';
+import { colorArrayToString } from '@vitessce/sets-utils';
+import { getColorScale } from './utils.js';
+export default function VolcanoPlot(props) {
+    const { theme, width, height, obsType, featureType, obsSetsColumnNameMapping, sampleSetsColumnNameMapping, sampleSetSelection, obsSetSelection, obsSetColor, sampleSetColor, data, marginTop = 5, marginRight = 5, marginLeft = 50, marginBottom = 50, onFeatureClick, featurePointSignificanceThreshold, featurePointFoldChangeThreshold, featureLabelSignificanceThreshold, featureLabelFoldChangeThreshold, } = props;
+    const svgRef = useRef();
+    const computedData = useMemo(() => data.map(d => ({
+        ...d,
+        df: {
+            ...d.df,
+            minusLog10p: d.df.featureSignificance.map(v => -Math.log10(v)),
+            logFoldChange: d.df.featureFoldChange.map(v => Math.log2(v)),
+        },
+    })), [data]);
+    const [xExtent, yExtent] = useMemo(() => {
+        if (!computedData) {
+            return [null, null];
+        }
+        let xExtentResult = d3_extent(computedData.flatMap(d => d3_extent(d.df.logFoldChange)));
+        const xAbsMax = Math.max(Math.abs(xExtentResult[0]), Math.abs(xExtentResult[1]));
+        xExtentResult = [-xAbsMax, xAbsMax];
+        const yExtentResult = d3_extent(computedData.flatMap(d => d3_extent(d.df.minusLog10p.filter(v => Number.isFinite(v)))));
+        return [xExtentResult, yExtentResult];
+    }, [computedData]);
+    const [obsSetColorScale, sampleSetColorScale] = useMemo(() => [
+        getColorScale(obsSetSelection, obsSetColor, theme),
+        getColorScale(sampleSetSelection, sampleSetColor, theme),
+    ], [obsSetSelection, sampleSetSelection, sampleSetColor, obsSetColor, theme]);
+    useEffect(() => {
+        const domElement = svgRef.current;
+        const svg = select(domElement);
+        svg.selectAll('g').remove();
+        svg
+            .attr('width', width)
+            .attr('height', height)
+            .attr('viewBox', [0, 0, width, height])
+            .attr('style', 'font: 10px sans-serif');
+        if (!computedData || !xExtent || !yExtent) {
+            return;
+        }
+        // Render scatterplot
+        const innerWidth = width - marginLeft;
+        const innerHeight = height - marginBottom;
+        const xScale = scaleLinear()
+            .range([marginLeft, width - marginRight])
+            .domain(xExtent);
+        // For the y domain, use the yMin prop
+        // to support a use case such as 'Aspect Ratio',
+        // where the domain minimum should be 1 rather than 0.
+        const yScale = scaleLinear()
+            .domain(yExtent)
+            .range([innerHeight, marginTop])
+            .clamp(true);
+        // Add the axes.
+        svg.append('g')
+            .attr('transform', `translate(0,${height - marginBottom})`)
+            .call(axisBottom(xScale));
+        svg.append('g')
+            .attr('transform', `translate(${marginLeft},0)`)
+            .call(axisLeft(yScale));
+        // Axis titles
+        const titleG = svg.append('g');
+        const fgColor = colorArrayToString(getDefaultForegroundColor(theme));
+        // Y-axis title
+        titleG
+            .append('text')
+            .attr('text-anchor', 'middle')
+            .attr('x', -innerHeight / 2)
+            .attr('y', 15)
+            .attr('transform', 'rotate(-90)')
+            .text('-log10 p-value')
+            .style('font-size', '12px')
+            .style('fill', fgColor);
+        // X-axis title
+        titleG
+            .append('text')
+            .attr('text-anchor', 'middle')
+            .attr('x', marginLeft + innerWidth / 2)
+            .attr('y', height - 10)
+            .text('log2 fold-change')
+            .style('font-size', '12px')
+            .style('fill', fgColor);
+        // Get a mapping from column name to group name.
+        const obsSetsColumnNameMappingReversed = Object.fromEntries(Object
+            .entries(obsSetsColumnNameMapping)
+            .map(([key, value]) => ([value, key])));
+        const sampleSetsColumnNameMappingReversed = Object.fromEntries(Object
+            .entries(sampleSetsColumnNameMapping)
+            .map(([key, value]) => ([value, key])));
+        // Horizontal and vertical rules to indicate currently-selected thresholds
+        // Vertical lines
+        const ruleColor = 'silver';
+        const ruleDash = '2,2';
+        titleG.append('line')
+            .attr('x1', xScale(featurePointFoldChangeThreshold))
+            .attr('x2', xScale(featurePointFoldChangeThreshold))
+            .attr('y1', yScale.range()[0])
+            .attr('y2', yScale.range()[1])
+            .style('stroke', ruleColor)
+            .style('stroke-dasharray', ruleDash);
+        titleG.append('line')
+            .attr('x1', xScale(-featurePointFoldChangeThreshold))
+            .attr('x2', xScale(-featurePointFoldChangeThreshold))
+            .attr('y1', yScale.range()[0])
+            .attr('y2', yScale.range()[1])
+            .style('stroke', ruleColor)
+            .style('stroke-dasharray', ruleDash);
+        // Horizontal lines
+        titleG.append('line')
+            .attr('x1', xScale.range()[0])
+            .attr('x2', xScale.range()[1])
+            .attr('y1', yScale(-Math.log10(featurePointSignificanceThreshold)))
+            .attr('y2', yScale(-Math.log10(featurePointSignificanceThreshold)))
+            .style('stroke', ruleColor)
+            .style('stroke-dasharray', ruleDash);
+        // Upregulated/downregulated and sampleSet directional indicators.
+        const lhsText = sampleSetSelection && sampleSetSelection.length === 2
+            ? sampleSetSelection[0].at(-1)
+            : '__rest__';
+        // eslint-disable-next-line no-nested-ternary
+        const rhsText = sampleSetSelection && sampleSetSelection.length === 2
+            ? sampleSetSelection[1].at(-1)
+            : (obsSetSelection && obsSetSelection.length === 1
+                ? obsSetSelection?.[0]?.at(-1)
+                : `${capitalize(obsType)} Set`);
+        titleG
+            .append('text')
+            .attr('text-anchor', 'start')
+            .attr('x', marginLeft)
+            .attr('y', height - 10)
+            .text(`\u2190 ${lhsText}`)
+            .style('font-size', '12px')
+            .style('fill', fgColor);
+        titleG
+            .append('text')
+            .attr('text-anchor', 'end')
+            .attr('x', marginLeft + innerWidth)
+            .attr('y', height - 10)
+            .text(`${rhsText} \u2192`)
+            .style('font-size', '12px')
+            .style('fill', fgColor);
+        const g = svg.append('g');
+        // Append a circle for each data point.
+        computedData.forEach((comparisonObject) => {
+            const obsSetG = g.append('g');
+            const { df, metadata } = comparisonObject;
+            const coordinationValues = metadata.coordination_values;
+            const rawObsSetPath = coordinationValues.obsSetFilter
+                ? coordinationValues.obsSetFilter[0]
+                : coordinationValues.obsSetSelection[0];
+            const obsSetPath = [...rawObsSetPath];
+            obsSetPath[0] = obsSetsColumnNameMappingReversed[rawObsSetPath[0]];
+            // Swap the foldchange direction if backwards with
+            // respect to the current sampleSetSelection pair.
+            // TODO: move this swapping into the computedData useMemo?
+            let shouldSwapFoldChangeDirection = false;
+            if (coordinationValues.sampleSetFilter
+                && coordinationValues.sampleSetFilter.length === 2) {
+                const rawSampleSetPathA = coordinationValues.sampleSetFilter[0];
+                const sampleSetPathA = [...rawSampleSetPathA];
+                sampleSetPathA[0] = sampleSetsColumnNameMappingReversed[rawSampleSetPathA[0]];
+                const rawSampleSetPathB = coordinationValues.sampleSetFilter[1];
+                const sampleSetPathB = [...rawSampleSetPathB];
+                sampleSetPathB[0] = sampleSetsColumnNameMappingReversed[rawSampleSetPathB[0]];
+                if (isEqual(sampleSetPathA, sampleSetSelection[1])
+                    && isEqual(sampleSetPathB, sampleSetSelection[0])) {
+                    shouldSwapFoldChangeDirection = true;
+                }
+            }
+            const filteredDf = df.featureId.map((featureId, i) => ({
+                featureId,
+                logFoldChange: df.logFoldChange[i] * (shouldSwapFoldChangeDirection ? -1 : 1),
+                featureSignificance: df.featureSignificance[i],
+                minusLog10p: df.minusLog10p[i],
+            })).filter(d => ((Math.abs(d.logFoldChange) >= (featurePointFoldChangeThreshold ?? 1.0))
+                && (d.featureSignificance <= (featurePointSignificanceThreshold ?? 0.05))));
+            const color = obsSetColorScale(obsSetPath);
+            obsSetG.append('g')
+                .selectAll('circle')
+                .data(filteredDf)
+                .join('circle')
+                .attr('cx', d => xScale(d.logFoldChange))
+                .attr('cy', d => yScale(d.minusLog10p))
+                .attr('r', 3)
+                .attr('opacity', 0.5)
+                .attr('fill', color)
+                .on('click', (event, d) => {
+                onFeatureClick(d.featureId);
+            });
+            const textElements = obsSetG.append('g')
+                .selectAll('text')
+                .data(filteredDf)
+                .join('text')
+                .text(d => d.featureId)
+                .attr('text-anchor', d => (d.logFoldChange < 0 ? 'end' : 'start'))
+                .attr('x', d => xScale(d.logFoldChange))
+                .attr('y', d => yScale(d.minusLog10p))
+                .style('display', d => ((Math.abs(d.logFoldChange) < (featureLabelFoldChangeThreshold ?? 5.0)
+                || (d.featureSignificance >= (featureLabelSignificanceThreshold ?? 0.01))) ? 'none' : undefined))
+                .attr('fill', color)
+                .on('click', (event, d) => {
+                onFeatureClick(d.featureId);
+            });
+            textElements.append('title')
+                .text(d => `${featureType}: ${d.featureId}\nin ${obsSetPath?.at(-1)}\nlog2 fold-change: ${d.logFoldChange}\np-value: ${d.featureSignificance}`);
+        });
+    }, [width, height, theme, sampleSetColor, sampleSetSelection,
+        obsSetSelection, obsSetColor, featureType, computedData,
+        xExtent, yExtent, obsType,
+        marginLeft, marginBottom, marginTop, marginRight,
+        obsSetColorScale, sampleSetColorScale, onFeatureClick,
+        featurePointSignificanceThreshold, featurePointFoldChangeThreshold,
+        featureLabelSignificanceThreshold, featureLabelFoldChangeThreshold,
+    ]);
+    return (_jsx("svg", { ref: svgRef, style: {
+            top: 0,
+            left: 0,
+            width: `${width}px`,
+            height: `${height}px`,
+            position: 'relative',
+        } }));
+}

package/dist-tsc/VolcanoPlotOptions.d.ts

@@ -0,0 +1,2 @@
+export default function VolcanoPlotOptions(props: any): JSX.Element;
+//# sourceMappingURL=VolcanoPlotOptions.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VolcanoPlotOptions.d.ts","sourceRoot":"","sources":["../src/VolcanoPlotOptions.js"],"names":[],"mappings":"AAOA,oEAgIC"}

package/dist-tsc/VolcanoPlotOptions.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { useId } from 'react-aria';
+import { TableCell, TableRow, Slider } from '@material-ui/core';
+import { usePlotOptionsStyles, OptionsContainer, } from '@vitessce/vit-s';
+export default function VolcanoPlotOptions(props) {
+    const { children, featurePointSignificanceThreshold, featurePointFoldChangeThreshold, featureLabelSignificanceThreshold, featureLabelFoldChangeThreshold, setFeaturePointSignificanceThreshold, setFeaturePointFoldChangeThreshold, setFeatureLabelSignificanceThreshold, setFeatureLabelFoldChangeThreshold, } = props;
+    const volcanoOptionsId = useId();
+    const classes = usePlotOptionsStyles();
+    function handlePointSignificanceChange(event, value) {
+        setFeaturePointSignificanceThreshold(10 ** -value);
+    }
+    function handlePointFoldChangeChange(event, value) {
+        setFeaturePointFoldChangeThreshold(value);
+    }
+    function handleLabelSignificanceChange(event, value) {
+        setFeatureLabelSignificanceThreshold(10 ** -value);
+    }
+    function handleLabelFoldChangeChange(event, value) {
+        setFeatureLabelFoldChangeThreshold(value);
+    }
+    return (_jsxs(OptionsContainer, { children: [children, _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsx("label", { htmlFor: `volcano-label-significance-${volcanoOptionsId}`, children: "Label Significance Threshold" }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsx(Slider, { classes: { root: classes.slider, valueLabel: classes.sliderValueLabel }, value: -Math.log10(featureLabelSignificanceThreshold), onChange: handleLabelSignificanceChange, "aria-label": "Volcano plot label significance threshold slider", id: `volcano-label-significance-${volcanoOptionsId}`, valueLabelDisplay: "auto", step: 1, min: 0, max: 100 }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsx("label", { htmlFor: `volcano-label-fc-${volcanoOptionsId}`, children: "Label Fold-Change Threshold" }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsx(Slider, { classes: { root: classes.slider, valueLabel: classes.sliderValueLabel }, value: featureLabelFoldChangeThreshold, onChange: handleLabelFoldChangeChange, "aria-label": "Volcano plot label fold-change threshold slider", id: `volcano-label-fc-${volcanoOptionsId}`, valueLabelDisplay: "auto", step: 0.5, min: 0, max: 50 }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsx("label", { htmlFor: `volcano-point-significance-${volcanoOptionsId}`, children: "Point Significance Threshold" }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsx(Slider, { classes: { root: classes.slider, valueLabel: classes.sliderValueLabel }, value: -Math.log10(featurePointSignificanceThreshold), onChange: handlePointSignificanceChange, "aria-label": "Volcano plot point significance threshold slider", id: `volcano-point-significance-${volcanoOptionsId}`, valueLabelDisplay: "auto", step: 1, min: 0, max: 100 }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsx("label", { htmlFor: `volcano-point-fc-${volcanoOptionsId}`, children: "Point Fold-Change Threshold" }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsx(Slider, { classes: { root: classes.slider, valueLabel: classes.sliderValueLabel }, value: featurePointFoldChangeThreshold, onChange: handlePointFoldChangeChange, "aria-label": "Volcano plot point fold-change threshold slider", id: `volcano-point-fc-${volcanoOptionsId}`, valueLabelDisplay: "auto", step: 0.5, min: 0, max: 50 }) })] })] }));
+}

package/dist-tsc/VolcanoPlotSubscriber.d.ts

@@ -0,0 +1,2 @@
+export function VolcanoPlotSubscriber(props: any): JSX.Element;
+//# sourceMappingURL=VolcanoPlotSubscriber.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VolcanoPlotSubscriber.d.ts","sourceRoot":"","sources":["../src/VolcanoPlotSubscriber.js"],"names":[],"mappings":"AAuBA,+DA0IC"}

package/dist-tsc/VolcanoPlotSubscriber.js

@@ -0,0 +1,33 @@
+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, useReady, useGridItemSize, useFeatureStatsData, useMatchingLoader, useColumnNameMapping, } from '@vitessce/vit-s';
+import { ViewType, COMPONENT_COORDINATION_TYPES, ViewHelpMapping, DataType, } from '@vitessce/constants-internal';
+import VolcanoPlot from './VolcanoPlot.js';
+import { useStyles } from './styles.js';
+import VolcanoPlotOptions from './VolcanoPlotOptions.js';
+import { useRawSetPaths } from './utils.js';
+export function VolcanoPlotSubscriber(props) {
+    const { coordinationScopes, removeGridComponent, theme, helpText = ViewHelpMapping.VOLCANO_PLOT, } = props;
+    const classes = useStyles();
+    const loaders = useLoaders();
+    // Get "props" from the coordination space.
+    const [{ dataset, obsType, sampleType, featureType, featureValueType, obsFilter: cellFilter, obsHighlight: cellHighlight, obsSetSelection, obsSetColor, obsColorEncoding: cellColorEncoding, additionalObsSets: additionalCellSets, featurePointSignificanceThreshold, featurePointFoldChangeThreshold, featureLabelSignificanceThreshold, featureLabelFoldChangeThreshold, featureValueTransform, featureValueTransformCoefficient, gatingFeatureSelectionX, gatingFeatureSelectionY, featureSelection, sampleSetSelection, sampleSetColor, }, { setObsFilter: setCellFilter, setObsSetSelection, setObsHighlight: setCellHighlight, setObsSetColor: setCellSetColor, setObsColorEncoding: setCellColorEncoding, setAdditionalObsSets: setAdditionalCellSets, setFeaturePointSignificanceThreshold, setFeaturePointFoldChangeThreshold, setFeatureLabelSignificanceThreshold, setFeatureLabelFoldChangeThreshold, setFeatureValueTransform, setFeatureValueTransformCoefficient, setGatingFeatureSelectionX, setGatingFeatureSelectionY, setFeatureSelection, setSampleSetSelection, setSampleSetColor, }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType.VOLCANO_PLOT], coordinationScopes);
+    const [width, height, containerRef] = useGridItemSize();
+    const obsSetsLoader = useMatchingLoader(loaders, dataset, DataType.OBS_SETS, { obsType });
+    const sampleSetsLoader = useMatchingLoader(loaders, dataset, DataType.SAMPLE_SETS, { sampleType });
+    const obsSetsColumnNameMapping = useColumnNameMapping(obsSetsLoader);
+    const sampleSetsColumnNameMapping = useColumnNameMapping(sampleSetsLoader);
+    const rawSampleSetSelection = useRawSetPaths(sampleSetsColumnNameMapping, sampleSetSelection);
+    const rawObsSetSelection = useRawSetPaths(obsSetsColumnNameMapping, obsSetSelection);
+    const [{ featureStats }, featureStatsStatus] = useFeatureStatsData(loaders, dataset, false, { obsType, featureType, sampleType }, 
+    // These volcanoOptions are passed to FeatureStatsAnndataLoader.loadMulti():
+    { sampleSetSelection: rawSampleSetSelection, obsSetSelection: rawObsSetSelection });
+    const isReady = useReady([
+        featureStatsStatus,
+    ]);
+    const onFeatureClick = useCallback((featureId) => {
+        setFeatureSelection([featureId]);
+    }, [setFeatureSelection]);
+    return (_jsx(TitleInfo, { title: "Volcano Plot", removeGridComponent: removeGridComponent, theme: theme, isReady: isReady, helpText: helpText, options: (_jsx(VolcanoPlotOptions, { obsType: obsType, featureType: featureType, featurePointSignificanceThreshold: featurePointSignificanceThreshold, featurePointFoldChangeThreshold: featurePointFoldChangeThreshold, featureLabelSignificanceThreshold: featureLabelSignificanceThreshold, featureLabelFoldChangeThreshold: featureLabelFoldChangeThreshold, setFeaturePointSignificanceThreshold: setFeaturePointSignificanceThreshold, setFeaturePointFoldChangeThreshold: setFeaturePointFoldChangeThreshold, setFeatureLabelSignificanceThreshold: setFeatureLabelSignificanceThreshold, setFeatureLabelFoldChangeThreshold: setFeatureLabelFoldChangeThreshold })), children: _jsx("div", { ref: containerRef, className: classes.vegaContainer, children: featureStats ? (_jsx(VolcanoPlot, { theme: theme, width: width, height: height, obsType: obsType, featureType: featureType, obsSetsColumnNameMapping: obsSetsColumnNameMapping, sampleSetsColumnNameMapping: sampleSetsColumnNameMapping, sampleSetSelection: sampleSetSelection, obsSetSelection: obsSetSelection, obsSetColor: obsSetColor, sampleSetColor: sampleSetColor, data: featureStats, onFeatureClick: onFeatureClick, featurePointSignificanceThreshold: featurePointSignificanceThreshold, featurePointFoldChangeThreshold: featurePointFoldChangeThreshold, featureLabelSignificanceThreshold: featureLabelSignificanceThreshold, featureLabelFoldChangeThreshold: featureLabelFoldChangeThreshold })) : (_jsxs("span", { children: ["Select at least one ", obsType, " set."] })) }) }));
+}

package/dist-tsc/index.d.ts

@@ -4,6 +4,9 @@ export { ExpressionHistogramSubscriber } from "./ExpressionHistogramSubscriber.j
 export { DotPlotSubscriber } from "./DotPlotSubscriber.js";
 export { FeatureBarPlotSubscriber } from "./FeatureBarPlotSubscriber.js";
 export { TreemapSubscriber } from "./TreemapSubscriber.js";
+export { VolcanoPlotSubscriber } from "./VolcanoPlotSubscriber.js";
+export { CellSetCompositionBarPlotSubscriber } from "./CellSetCompositionBarPlotSubscriber.js";
+export { FeatureSetEnrichmentBarPlotSubscriber } from "./FeatureSetEnrichmentBarPlotSubscriber.js";
 export { default as CellSetSizesPlot } from "./CellSetSizesPlot.js";
 export { default as CellSetExpressionPlot } from "./CellSetExpressionPlot.js";
 export { default as ExpressionHistogram } from "./ExpressionHistogram.js";

package/dist-tsc/index.js

@@ -4,6 +4,9 @@ export { ExpressionHistogramSubscriber } from './ExpressionHistogramSubscriber.j
 export { DotPlotSubscriber } from './DotPlotSubscriber.js';
 export { FeatureBarPlotSubscriber } from './FeatureBarPlotSubscriber.js';
 export { TreemapSubscriber } from './TreemapSubscriber.js';
+export { VolcanoPlotSubscriber } from './VolcanoPlotSubscriber.js';
+export { CellSetCompositionBarPlotSubscriber } from './CellSetCompositionBarPlotSubscriber.js';
+export { FeatureSetEnrichmentBarPlotSubscriber } from './FeatureSetEnrichmentBarPlotSubscriber.js';
 export { default as CellSetSizesPlot } from './CellSetSizesPlot.js';
 export { default as CellSetExpressionPlot } from './CellSetExpressionPlot.js';
 export { default as ExpressionHistogram } from './ExpressionHistogram.js';

package/dist-tsc/utils.d.ts

@@ -0,0 +1,9 @@
+export function getColorScale(setSelectionArr: any, setColorArr: any, theme: any): (queryVal: any) => any;
+/**
+ * Transform set paths which use group names to those which use column names.
+ * @param {Record<string, string>} columnNameMapping Return value of useColumnNameMapping.
+ * @param {string[][]} setPaths Array of set paths, such as obsSetSelection.
+ * @returns {string[][]} Transformed set paths.
+ */
+export function useRawSetPaths(columnNameMapping: Record<string, string>, setPaths: string[][]): string[][];
+//# sourceMappingURL=utils.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.js"],"names":[],"mappings":"AAcA,0GAeC;AAGD;;;;;GAKG;AACH,kDAJW,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,YACtB,MAAM,EAAE,EAAE,GACR,MAAM,EAAE,EAAE,CAUtB"}

package/dist-tsc/utils.js

@@ -0,0 +1,40 @@
+import { useMemo } from 'react';
+import { isEqual } from 'lodash-es';
+import { colorArrayToString } from '@vitessce/sets-utils';
+import { getDefaultColor } from '@vitessce/utils';
+function createOrdinalScale(domainArr, rangeArr) {
+    return (queryVal) => {
+        const i = domainArr.findIndex(domainVal => isEqual(domainVal, queryVal));
+        return rangeArr[i];
+    };
+}
+// Create a d3-scale ordinal scale mapping set paths to color strings.
+export function getColorScale(setSelectionArr, setColorArr, theme) {
+    /*
+    // The equality seems incorrect with d3.scaleOrdinal
+    return scaleOrdinal()
+      .domain(setSelectionArr || [])
+      .range(
+      */
+    const domainArr = setSelectionArr || [];
+    const rangeArr = setSelectionArr
+        ?.map(setNamePath => (setColorArr?.find(d => isEqual(d.path, setNamePath))?.color
+        || getDefaultColor(theme)))
+        ?.map(colorArrayToString) || [];
+    return createOrdinalScale(domainArr, rangeArr);
+}
+/**
+ * Transform set paths which use group names to those which use column names.
+ * @param {Record<string, string>} columnNameMapping Return value of useColumnNameMapping.
+ * @param {string[][]} setPaths Array of set paths, such as obsSetSelection.
+ * @returns {string[][]} Transformed set paths.
+ */
+export function useRawSetPaths(columnNameMapping, setPaths) {
+    return useMemo(() => setPaths?.map((setPath) => {
+        const newSetPath = [...setPath];
+        if (newSetPath?.[0] && columnNameMapping[newSetPath[0]]) {
+            newSetPath[0] = columnNameMapping[newSetPath[0]];
+        }
+        return newSetPath;
+    }), [columnNameMapping, setPaths]);
+}

package/package.json

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

package/src/CellSetCompositionBarPlot.js

@@ -0,0 +1,205 @@
+import React, { useCallback, useMemo } from 'react';
+import { clamp, isEqual } from 'lodash-es';
+import { v4 as uuidv4 } from 'uuid';
+import { VegaPlot, VEGA_THEMES } from '@vitessce/vega';
+import { capitalize } from '@vitessce/utils';
+import { getColorScale } from './utils.js';
+
+/**
+ * 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 [obsSetColorScale, sampleSetColorScale] = useMemo(() => [
+    getColorScale(obsSetSelection, obsSetColor, theme),
+    getColorScale(sampleSetSelection, sampleSetColor, theme),
+  ], [obsSetSelection, sampleSetSelection, sampleSetColor, obsSetColor, theme]);
+
+  const computedData = useMemo(() => {
+    if (Array.isArray(data) && data.length === 1) {
+      // We expect only one returned data frame.
+      const { df, metadata } = data[0];
+      // Return in array-of-objects form that Vega-Lite likes.
+
+      const referenceCellType = metadata?.analysis_params?.reference_cell_type;
+      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];
+
+      let shouldSwapFoldChangeDirection = false;
+      if (isEqual(firstCovariateSetPath, sampleSetSelection[0])) {
+        shouldSwapFoldChangeDirection = true;
+      }
+
+      return df.obsSetId.map((obsSetId, i) => {
+        const key = uuidv4();
+        const isReferenceSet = (obsSetId === referenceCellType);
+        const name = `${obsSetId}${(isReferenceSet ? ' (reference set)' : '')}`;
+        const obsSetPath = [obsSetGroupName, obsSetId];
+        const color = obsSetColorScale(obsSetPath);
+        return {
+          name,
+          // Reconstruct set path array.
+          obsSetPath,
+          color,
+          // Unique key per bar
+          key,
+          // Add a property `keyName` which concatenates the key and the name,
+          // which is both unique and can easily be converted
+          // back to the name by taking a substring.
+          keyName: `${key}${name}`,
+          // Swap direction of foldChange/logFC if necessary
+          obsSetFoldChange: df.obsSetFoldChange[i] * (shouldSwapFoldChangeDirection ? -1 : 1),
+          logFoldChange: (
+            Math.log2(df.obsSetFoldChange[i]) * (shouldSwapFoldChangeDirection ? -1 : 1)
+          ),
+          interceptExpectedSample: df.interceptExpectedSample[i],
+          effectExpectedSample: df.effectExpectedSample[i],
+          isCredibleEffect: df.isCredibleEffect[i],
+          // Boolean flag for wasReferenceObsSet (check metadata)
+          isReferenceSet: (obsSetId === referenceCellType),
+        };
+      }).filter(d => obsSetSelection
+        ?.find(setNamePath => isEqual(setNamePath, d.obsSetPath)));
+    }
+    return null;
+  }, [data, sampleSetSelection, obsSetsColumnNameMappingReversed,
+    sampleSetsColumnNameMappingReversed, obsSetSelection,
+    obsSetColorScale, sampleSetColorScale,
+  ]);
+
+  // Get an array of keys for sorting purposes.
+  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),
+  };
+  const captializedObsType = capitalize(obsType);
+
+  const opacityScale = {
+    domain: [true, false],
+    range: [1.0, 0.3],
+  };
+  const strokeWidthScale = {
+    domain: [true, false],
+    range: [2.0, 0.5],
+  };
+
+  const spec = {
+    mark: { type: 'bar', stroke: 'black', cursor: 'pointer' },
+    params: [
+      {
+        name: 'bar_select',
+        select: {
+          type: 'point',
+          on: 'click[event.shiftKey === false]',
+          fields: ['obsSetPath'],
+          empty: 'none',
+        },
+      },
+      {
+        name: 'shift_bar_select',
+        select: {
+          type: 'point',
+          on: 'click[event.shiftKey]',
+          fields: ['obsSetPath'],
+          empty: 'none',
+        },
+      },
+    ],
+    encoding: {
+      y: {
+        field: 'keyName',
+        type: 'nominal',
+        axis: { labelExpr: `substring(datum.label, ${keyLength})` },
+        title: `${captializedObsType} Set`,
+        sort: keys,
+      },
+      x: {
+        // TODO: support using intercept+effect here based on user-selected options?
+        field: 'logFoldChange',
+        type: 'quantitative',
+        title: 'Log fold-change',
+      },
+      color: {
+        field: 'key',
+        type: 'nominal',
+        scale: colorScale,
+        legend: null,
+      },
+      fillOpacity: {
+        field: 'isCredibleEffect',
+        type: 'nominal',
+        scale: opacityScale,
+      },
+      strokeWidth: {
+        field: 'isReferenceSet',
+        type: 'nominal',
+        scale: strokeWidthScale,
+      },
+      tooltip: {
+        field: 'effectExpectedSample',
+        type: 'quantitative',
+      },
+    },
+    // TODO: for width, also subtract length of longest y-axis set name label.
+    width: clamp(width - marginRight, 10, Infinity),
+    height: clamp(height - marginBottom, 10, Infinity),
+    config: VEGA_THEMES[theme],
+  };
+
+  const handleSignal = (name, value) => {
+    if (name === 'bar_select') {
+      onBarSelect(value.obsSetPath);
+    } else if (name === 'shift_bar_select') {
+      onBarSelect(value.obsSetPath, true);
+    }
+  };
+
+  const signalListeners = { bar_select: handleSignal, shift_bar_select: handleSignal };
+  const getTooltipText = useCallback(item => ({
+    [`${captializedObsType} Set`]: item.datum.name,
+    'Log fold-change': item.datum.logFoldChange,
+    interceptExpectedSample: item.datum.interceptExpectedSample,
+    effectExpectedSample: item.datum.effectExpectedSample,
+  }
+  ), [captializedObsType]);
+
+  return (
+    <VegaPlot
+      data={computedData}
+      spec={spec}
+      signalListeners={signalListeners}
+      getTooltipText={getTooltipText}
+    />
+  );
+}