@vitessce/statistical-plots 2.0.0-beta.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/CellSetExpressionPlot.js

@@ -0,0 +1,248 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import clamp from 'lodash/clamp';
+import { VegaPlot, VEGA_THEMES, DATASET_NAME } from '@vitessce/vega';
+import { colorArrayToString } from '@vitessce/sets';
+import { capitalize } from '@vitessce/utils';
+/**
+ * Gene expression histogram displayed as a bar chart,
+ * implemented with the VegaPlot component.
+ * @param {object} props
+ * @param {object[]} props.data The expression data, an array
+ * of objects with properties `value`, `gene`, and `set`.
+ * @param {number} props.domainMax The maximum gene expression value.
+ * @param {object[]} props.colors An object for each
+ * cell set, with properties `name` and `color`.
+ * @param {string} props.theme The name of the current Vitessce theme.
+ * @param {number} props.width The container width.
+ * @param {number} props.height The container height.
+ * @param {number} props.marginRight The size of the margin
+ * on the right side of the plot, to account for the vega menu button.
+ * By default, 90.
+ * @param {number} props.marginBottom The size of the margin
+ * on the bottom of the plot, to account for long x-axis labels.
+ * Default is allowing the component to automatically determine the margin.
+ * @param {string|null} props.featureValueTransformName A name
+ * for the feature value transformation function.
+ */
+export default function CellSetExpressionPlot(props) {
+    const { domainMax = 100, colors, data, theme, width, height, marginRight = 90, marginBottom, obsType, featureValueType, featureValueTransformName, } = props;
+    // Get the max characters in an axis label for autsizing the bottom margin.
+    const maxCharactersForLabel = data.reduce((acc, val) => {
+        // eslint-disable-next-line no-param-reassign
+        acc = acc === undefined || val.set.length > acc ? val.set.length : acc;
+        return acc;
+    }, 0);
+    // 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.
+    // 30 is an estimate of the pixel size of a given character and seems to work well.
+    const autoMarginBottom = marginBottom
+        || 30 + Math.sqrt(maxCharactersForLabel / 2) * 30;
+    // Manually set the color scale so that Vega-Lite does
+    // not choose the colors automatically.
+    const colorScale = {
+        domain: colors.map(d => d.name),
+        range: colors.map(d => colorArrayToString(d.color)),
+    };
+    const plotWidth = clamp(width - marginRight, 10, Infinity);
+    const plotHeight = clamp(height - autoMarginBottom, 10, Infinity);
+    const numBands = colors.length;
+    const bandWidth = plotWidth / numBands;
+    const rectColor = (theme === 'dark' ? 'white' : 'black');
+    const spec = {
+        $schema: 'https://vega.github.io/schema/vega/v5.json',
+        description: `A violin plot showing distributions of expression levels for selected ${obsType} sets.`,
+        width: plotWidth,
+        height: plotHeight,
+        config: {
+            ...VEGA_THEMES[theme],
+            axisBand: {
+                bandPosition: 1,
+                tickExtra: true,
+                tickOffset: 0,
+            },
+        },
+        signals: [
+            { name: 'bandWidth', value: bandWidth },
+            { name: 'width', value: plotWidth },
+            { name: 'height', value: plotHeight },
+            { name: 'trim', value: true },
+        ],
+        data: [
+            {
+                name: 'density',
+                source: DATASET_NAME,
+                transform: [
+                    {
+                        type: 'kde',
+                        field: 'value',
+                        groupby: ['set'],
+                        bandwidth: 0,
+                        extent: [0, domainMax],
+                    },
+                ],
+            },
+            {
+                name: 'stats',
+                source: DATASET_NAME,
+                transform: [
+                    {
+                        type: 'aggregate',
+                        groupby: ['set'],
+                        fields: ['value', 'value', 'value'],
+                        ops: ['q1', 'median', 'q3'],
+                        as: ['q1', 'median', 'q3'],
+                    },
+                ],
+            },
+        ],
+        scales: [
+            {
+                name: 'layout',
+                type: 'band',
+                range: 'width',
+                domain: { data: DATASET_NAME, field: 'set' },
+            },
+            {
+                name: 'yscale',
+                type: 'linear',
+                range: 'height',
+                domain: [0, domainMax],
+            },
+            {
+                name: 'wscale',
+                type: 'linear',
+                range: [0, { signal: 'bandWidth' }],
+                domain: { data: 'density', field: 'density' },
+            },
+            {
+                name: 'wscaleReversed',
+                type: 'linear',
+                reverse: true,
+                range: [0, { signal: 'bandWidth' }],
+                domain: { data: 'density', field: 'density' },
+            },
+            {
+                name: 'color',
+                type: 'ordinal',
+                ...colorScale,
+            },
+        ],
+        axes: [
+            {
+                orient: 'left',
+                scale: 'yscale',
+                zindex: 1,
+                title: featureValueTransformName
+                    ? [`${featureValueTransformName}-Transformed`, `Normalized ${capitalize(featureValueType)} Values`]
+                    : `Normalized ${capitalize(featureValueType)} Values`,
+            },
+            {
+                orient: 'bottom',
+                scale: 'layout',
+                tickCount: 5,
+                zindex: 1,
+                title: `${capitalize(obsType)} Set`,
+                labelAngle: -45,
+                labelAlign: 'right',
+            },
+        ],
+        marks: [
+            {
+                type: 'group',
+                from: {
+                    facet: {
+                        data: 'density',
+                        name: 'violin',
+                        groupby: 'set',
+                    },
+                },
+                encode: {
+                    enter: {
+                        xc: { scale: 'layout', field: 'set', band: 0.5 },
+                        width: { signal: 'bandWidth' },
+                        height: { signal: 'height' },
+                    },
+                },
+                data: [
+                    {
+                        name: 'summary',
+                        source: 'stats',
+                        transform: [
+                            {
+                                type: 'filter',
+                                expr: 'datum.set === parent.set',
+                            },
+                        ],
+                    },
+                ],
+                marks: [
+                    {
+                        type: 'area',
+                        orient: 'vertical',
+                        from: { data: 'violin' },
+                        encode: {
+                            enter: {
+                                fill: { scale: 'color', field: { parent: 'set' } },
+                            },
+                            update: {
+                                width: { scale: 'wscale', field: 'density' },
+                                xc: { signal: 'bandWidth / 2' },
+                                y2: { scale: 'yscale', field: 'value' },
+                                y: { scale: 'yscale', value: 0 },
+                            },
+                        },
+                    },
+                    {
+                        type: 'area',
+                        orient: 'vertical',
+                        from: { data: 'violin' },
+                        encode: {
+                            enter: {
+                                fill: { scale: 'color', field: { parent: 'set' } },
+                            },
+                            update: {
+                                width: { scale: 'wscaleReversed', field: 'density' },
+                                xc: { signal: 'bandWidth' },
+                                y2: { scale: 'yscale', field: 'value' },
+                                y: { scale: 'yscale', value: 0 },
+                            },
+                        },
+                    },
+                    {
+                        type: 'rect',
+                        from: { data: 'summary' },
+                        encode: {
+                            enter: {
+                                fill: { value: rectColor },
+                                width: { value: 2 },
+                            },
+                            update: {
+                                y: { scale: 'yscale', field: 'q1' },
+                                y2: { scale: 'yscale', field: 'q3' },
+                                xc: { signal: 'bandWidth / 2' },
+                            },
+                        },
+                    },
+                    {
+                        type: 'rect',
+                        from: { data: 'summary' },
+                        encode: {
+                            enter: {
+                                fill: { value: rectColor },
+                                height: { value: 2 },
+                                width: { value: 8 },
+                            },
+                            update: {
+                                y: { scale: 'yscale', field: 'median' },
+                                xc: { signal: 'bandWidth / 2' },
+                            },
+                        },
+                    },
+                ],
+            },
+        ],
+    };
+    return (_jsx(VegaPlot, { data: data, spec: spec }));
+}

package/dist/CellSetExpressionPlotOptions.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import TableCell from '@material-ui/core/TableCell';
+import TableRow from '@material-ui/core/TableRow';
+import TextField from '@material-ui/core/TextField';
+import { usePlotOptionsStyles, OptionsContainer, OptionSelect } from '@vitessce/vit-s';
+export default function CellSetExpressionPlotOptions(props) {
+    const { featureValueTransform, setFeatureValueTransform, featureValueTransformCoefficient, setFeatureValueTransformCoefficient, transformOptions, } = props;
+    const classes = usePlotOptionsStyles();
+    const handleTransformChange = (event) => {
+        setFeatureValueTransform(event.target.value === '' ? null : event.target.value);
+    };
+    // Feels a little hacky, but I think this is the best way to handle
+    // the limitations of the v4 material-ui number input.
+    const handleTransformCoefficientChange = (event) => {
+        const { value } = event.target;
+        if (!value) {
+            setFeatureValueTransformCoefficient(value);
+        }
+        else {
+            const newCoefficient = Number(value);
+            if (!Number.isNaN(newCoefficient) && newCoefficient >= 0) {
+                setFeatureValueTransformCoefficient(value);
+            }
+        }
+    };
+    return (_jsxs(OptionsContainer, { children: [_jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, children: "Transform" }), _jsx(TableCell, { className: classes.inputCell, children: _jsx(OptionSelect, { className: classes.select, value: featureValueTransform === null ? '' : featureValueTransform, onChange: handleTransformChange, inputProps: {
+                                id: 'scatterplot-transform-select',
+                            }, children: transformOptions.map(opt => (_jsx("option", { value: opt.value === null ? '' : opt.value, children: opt.name }, opt.name))) }, "gating-transform-select") })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, children: "Transform Coefficient" }), _jsx(TableCell, { className: classes.inputCell, children: _jsx(TextField, { label: "Number", type: "number", onChange: handleTransformCoefficientChange, value: featureValueTransformCoefficient, InputLabelProps: {
+                                shrink: true,
+                            } }) })] }, "transform-coefficient-option-row")] }));
+}

package/dist/CellSetExpressionPlotSubscriber.js

@@ -0,0 +1,108 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useMemo } from 'react';
+import { TitleInfo, useCoordination, useLoaders, useUrls, useReady, useGridItemSize, useFeatureSelection, useObsSetsData, useObsFeatureMatrixIndices, registerPluginViewType, } from '@vitessce/vit-s';
+import { ViewType, COMPONENT_COORDINATION_TYPES } from '@vitessce/constants-internal';
+import { VALUE_TRANSFORM_OPTIONS, capitalize, getValueTransformFunction } from '@vitessce/utils';
+import { treeToObjectsBySetNames, treeToSetSizesBySetNames, mergeObsSets } from '@vitessce/sets';
+import CellSetExpressionPlotOptions from './CellSetExpressionPlotOptions';
+import CellSetExpressionPlot from './CellSetExpressionPlot';
+import { useStyles } from './styles';
+/**
+ * Get expression data for the cells
+ * in the selected cell sets.
+ * @param {object} expressionMatrix
+ * @param {string[]} expressionMatrix.rows Cell IDs.
+ * @param {string[]} expressionMatrix.cols Gene names.
+ * @param {Uint8Array} expressionMatrix.matrix The
+ * flattened expression matrix as a typed array.
+ * @param {object} cellSets The cell sets from the dataset.
+ * @param {object} additionalCellSets The user-defined cell sets
+ * from the coordination space.
+ * @param {array} geneSelection Array of selected genes.
+ * @param {array} cellSetSelection Array of selected cell set paths.
+ * @param {object[]} cellSetColor Array of objects with properties
+ * @param {string|null} featureValueTransform The name of the
+ * feature value transform function.
+ * @param {number} featureValueTransformCoefficient A coefficient
+ * to be used in the transform function.
+ * @param {string} theme "light" or "dark" for the vitessce theme
+ * `path` and `color`.
+ */
+export function useExpressionByCellSet(expressionData, obsIndex, cellSets, additionalCellSets, geneSelection, cellSetSelection, cellSetColor, featureValueTransform, featureValueTransformCoefficient, theme) {
+    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(() => {
+        if (mergedCellSets && cellSetSelection
+            && geneSelection && geneSelection.length >= 1
+            && expressionData) {
+            const cellObjects = treeToObjectsBySetNames(mergedCellSets, cellSetSelection, cellSetColor, theme);
+            const firstGeneSelected = geneSelection[0];
+            // Create new cellColors map based on the selected gene.
+            let exprMax = -Infinity;
+            const cellIndices = {};
+            for (let i = 0; i < obsIndex.length; i += 1) {
+                cellIndices[obsIndex[i]] = i;
+            }
+            const exprValues = cellObjects.map((cell) => {
+                const cellIndex = cellIndices[cell.obsId];
+                const value = expressionData[0][cellIndex];
+                const normValue = value * 100 / 255;
+                const transformFunction = getValueTransformFunction(featureValueTransform, featureValueTransformCoefficient);
+                const transformedValue = transformFunction(normValue);
+                exprMax = Math.max(transformedValue, exprMax);
+                return { value: transformedValue, gene: firstGeneSelected, set: cell.name };
+            });
+            return [exprValues, exprMax];
+        }
+        return [null, null];
+    }, [expressionData, obsIndex, geneSelection, theme,
+        mergedCellSets, cellSetSelection, cellSetColor,
+        featureValueTransform, featureValueTransformCoefficient,
+    ]);
+    // From the cell sets hierarchy and the list of selected cell sets,
+    // generate the array of set sizes data points for the bar plot.
+    const setArr = useMemo(() => (mergedCellSets && cellSetSelection && cellSetColor
+        ? treeToSetSizesBySetNames(mergedCellSets, cellSetSelection, cellSetColor, theme)
+        : []), [mergedCellSets, cellSetSelection, cellSetColor, theme]);
+    return [expressionArr, setArr, expressionMax];
+}
+/**
+ * A subscriber component for `CellSetExpressionPlot`,
+ * which listens for gene selection updates and
+ * `GRID_RESIZE` events.
+ * @param {object} props
+ * @param {function} props.removeGridComponent The grid component removal function.
+ * @param {object} props.coordinationScopes An object mapping coordination
+ * types to coordination scopes.
+ * @param {string} props.theme The name of the current Vitessce theme.
+ */
+export function CellSetExpressionPlotSubscriber(props) {
+    const { coordinationScopes, removeGridComponent, theme, } = 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, }, { setFeatureValueTransform, setFeatureValueTransformCoefficient, }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType.OBS_SET_FEATURE_VALUE_DISTRIBUTION], coordinationScopes);
+    const [width, height, containerRef] = useGridItemSize();
+    const [urls, addUrl] = useUrls(loaders, dataset);
+    const transformOptions = VALUE_TRANSFORM_OPTIONS;
+    // Get data from loaders using the data hooks.
+    // eslint-disable-next-line no-unused-vars
+    const [expressionData, loadedFeatureSelection, featureSelectionStatus] = useFeatureSelection(loaders, dataset, false, geneSelection, { obsType, featureType, featureValueType });
+    const [{ obsIndex }, matrixIndicesStatus] = useObsFeatureMatrixIndices(loaders, dataset, addUrl, false, { obsType, featureType, featureValueType });
+    const [{ obsSets: cellSets }, obsSetsStatus] = useObsSetsData(loaders, dataset, addUrl, true, {}, {}, { obsType });
+    const isReady = useReady([
+        featureSelectionStatus,
+        matrixIndicesStatus,
+        obsSetsStatus,
+    ]);
+    const [expressionArr, setArr, expressionMax] = useExpressionByCellSet(expressionData, obsIndex, cellSets, additionalCellSets, geneSelection, cellSetSelection, cellSetColor, featureValueTransform, featureValueTransformCoefficient, theme);
+    const firstGeneSelected = geneSelection && geneSelection.length >= 1
+        ? geneSelection[0]
+        : null;
+    const selectedTransformName = transformOptions.find(o => o.value === featureValueTransform)?.name;
+    return (_jsx(TitleInfo, { title: `Expression by ${capitalize(obsType)} Set${(firstGeneSelected ? ` (${firstGeneSelected})` : '')}`, removeGridComponent: removeGridComponent, urls: urls, theme: theme, isReady: isReady, options: (_jsx(CellSetExpressionPlotOptions, { featureValueTransform: featureValueTransform, setFeatureValueTransform: setFeatureValueTransform, featureValueTransformCoefficient: featureValueTransformCoefficient, setFeatureValueTransformCoefficient: setFeatureValueTransformCoefficient, transformOptions: transformOptions })), children: _jsx("div", { ref: containerRef, className: classes.vegaContainer, children: expressionArr ? (_jsx(CellSetExpressionPlot, { domainMax: expressionMax, colors: setArr, data: expressionArr, theme: theme, width: width, height: height, obsType: obsType, featureValueType: featureValueType, featureValueTransformName: selectedTransformName })) : (_jsxs("span", { children: ["Select a ", featureType, "."] })) }) }));
+}
+export function register() {
+    registerPluginViewType(ViewType.OBS_SET_FEATURE_VALUE_DISTRIBUTION, CellSetExpressionPlotSubscriber, COMPONENT_COORDINATION_TYPES[ViewType.OBS_SET_FEATURE_VALUE_DISTRIBUTION]);
+}

package/dist/CellSetSizesPlot.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import clamp from 'lodash/clamp';
+import { VegaPlot, VEGA_THEMES } from '@vitessce/vega';
+import { colorArrayToString } from '@vitessce/sets';
+import { capitalize } from '@vitessce/utils';
+/**
+ * Cell set sizes displayed as a bar chart,
+ * implemented with the VegaPlot component.
+ * @param {object} props
+ * @param {object[]} props.data The set size data, an array
+ * of objects with properties `name`, `key`, `color`, and `size`.
+ * @param {string} props.theme The name of the current Vitessce theme.
+ * @param {number} props.width The container width.
+ * @param {number} props.height The container height.
+ * @param {number} props.marginRight The size of the margin
+ * on the right side of the plot, to account for the vega menu button.
+ * By default, 90.
+ * @param {number} props.marginBottom The size of the margin
+ * on the bottom of the plot, to account for long x-axis labels.
+ * By default, 120.
+ * @param {number} props.keyLength The length of the `key` property of
+ * each data point. Assumes all key strings have the same length.
+ * By default, 36.
+ */
+export default function CellSetSizesPlot(props) {
+    const { data: rawData, theme, width, height, marginRight = 90, marginBottom = 120, keyLength = 36, obsType, } = props;
+    // 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.
+    // Add a property `colorString` which contains the `[r, g, b]` color
+    // after converting to a color hex string.
+    const data = rawData.map(d => ({
+        ...d,
+        keyName: d.key + d.name,
+        colorString: colorArrayToString(d.color),
+    }));
+    // Manually set the color scale so that Vega-Lite does
+    // not choose the colors automatically.
+    const colors = {
+        domain: data.map(d => d.key),
+        range: data.map(d => d.colorString),
+    };
+    // Get an array of keys for sorting purposes.
+    const keys = data.map(d => d.keyName);
+    const spec = {
+        mark: { type: 'bar' },
+        encoding: {
+            x: {
+                field: 'keyName',
+                type: 'nominal',
+                axis: { labelExpr: `substring(datum.label, ${keyLength})` },
+                title: 'Cell Set',
+                sort: keys,
+            },
+            y: {
+                field: 'size',
+                type: 'quantitative',
+                title: `${capitalize(obsType)} Set Size`,
+            },
+            color: {
+                field: 'key',
+                type: 'nominal',
+                scale: colors,
+                legend: null,
+            },
+            tooltip: {
+                field: 'size',
+                type: 'quantitative',
+            },
+        },
+        width: clamp(width - marginRight, 10, Infinity),
+        height: clamp(height - marginBottom, 10, Infinity),
+        config: VEGA_THEMES[theme],
+    };
+    return (_jsx(VegaPlot, { data: data, spec: spec }));
+}

package/dist/CellSetSizesPlotSubscriber.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useMemo } from 'react';
+import { TitleInfo, useCoordination, useLoaders, useUrls, useReady, useGridItemSize, useObsSetsData, registerPluginViewType, } from '@vitessce/vit-s';
+import { ViewType, COMPONENT_COORDINATION_TYPES } from '@vitessce/constants-internal';
+import { mergeObsSets, treeToSetSizesBySetNames } from '@vitessce/sets';
+import { capitalize } from '@vitessce/utils';
+import CellSetSizesPlot from './CellSetSizesPlot';
+import { useStyles } from './styles';
+/**
+ * A subscriber component for `CellSetSizePlot`,
+ * which listens for cell sets data updates and
+ * `GRID_RESIZE` events.
+ * @param {object} props
+ * @param {function} props.removeGridComponent The grid component removal function.
+ * @param {function} props.onReady The function to call when the subscriptions
+ * have been made.
+ * @param {string} props.theme The name of the current Vitessce theme.
+ * @param {string} props.title The component title.
+ */
+export function CellSetSizesPlotSubscriber(props) {
+    const { coordinationScopes, removeGridComponent, theme, title: titleOverride, } = props;
+    const classes = useStyles();
+    const loaders = useLoaders();
+    // Get "props" from the coordination space.
+    const [{ dataset, obsType, obsSetSelection: cellSetSelection, obsSetColor: cellSetColor, additionalObsSets: additionalCellSets, }, { setObsSetSelection: setCellSetSelection, setObsSetColor: setCellSetColor, }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType.OBS_SET_SIZES], coordinationScopes);
+    const title = titleOverride || `${capitalize(obsType)} Set Sizes`;
+    const [width, height, containerRef] = useGridItemSize();
+    const [urls, addUrl] = useUrls(loaders, dataset);
+    // Get data from loaders using the data hooks.
+    const [{ obsSets: cellSets }, obsSetsStatus] = useObsSetsData(loaders, dataset, addUrl, true, { setObsSetSelection: setCellSetSelection, setObsSetColor: setCellSetColor }, { obsSetSelection: cellSetSelection, obsSetColor: cellSetColor }, { obsType });
+    const isReady = useReady([
+        obsSetsStatus,
+    ]);
+    const mergedCellSets = useMemo(() => mergeObsSets(cellSets, additionalCellSets), [cellSets, additionalCellSets]);
+    // From the cell sets hierarchy and the list of selected cell sets,
+    // generate the array of set sizes data points for the bar plot.
+    const data = useMemo(() => (mergedCellSets && cellSetSelection && cellSetColor
+        ? treeToSetSizesBySetNames(mergedCellSets, cellSetSelection, cellSetColor, theme)
+        : []), [mergedCellSets, cellSetSelection, cellSetColor, theme]);
+    return (_jsx(TitleInfo, { title: title, removeGridComponent: removeGridComponent, urls: urls, theme: theme, isReady: isReady, children: _jsx("div", { ref: containerRef, className: classes.vegaContainer, children: _jsx(CellSetSizesPlot, { data: data, theme: theme, width: width, height: height, obsType: obsType }) }) }));
+}
+export function register() {
+    registerPluginViewType(ViewType.OBS_SET_SIZES, CellSetSizesPlotSubscriber, COMPONENT_COORDINATION_TYPES[ViewType.OBS_SET_SIZES]);
+}

package/dist/ExpressionHistogram.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import clamp from 'lodash/clamp';
+import { VegaPlot, VEGA_THEMES } from '@vitessce/vega';
+/**
+ * Gene expression histogram displayed as a bar chart,
+ * implemented with the VegaPlot component.
+ * @param {object} props
+ * @param {string[]} props.geneSelection The list of genes
+ * currently selected.
+ * @param {object[]} props.data The expression data, an array
+ * of objects with properties `value` and `gene`.
+ * @param {string} props.theme The name of the current Vitessce theme.
+ * @param {number} props.width The container width.
+ * @param {number} props.height The container height.
+ * @param {number} props.marginRight The size of the margin
+ * on the right side of the plot, to account for the vega menu button.
+ * By default, 90.
+ * @param {number} props.marginBottom The size of the margin
+ * on the bottom of the plot, to account for long x-axis labels.
+ * By default, 50.
+ */
+export default function ExpressionHistogram(props) {
+    const { geneSelection, data, theme, width, height, marginRight = 90, marginBottom = 50, } = props;
+    const xTitle = geneSelection && geneSelection.length >= 1
+        ? 'Normalized Expression Value'
+        : 'Total Normalized Transcript Count';
+    const spec = {
+        mark: { type: 'bar' },
+        encoding: {
+            x: {
+                field: 'value',
+                type: 'quantitative',
+                bin: { maxbins: 50 },
+                title: xTitle,
+            },
+            y: {
+                type: 'quantitative',
+                aggregate: 'count',
+                title: 'Number of Cells',
+            },
+            color: { value: 'gray' },
+        },
+        width: clamp(width - marginRight, 10, Infinity),
+        height: clamp(height - marginBottom, 10, Infinity),
+        config: VEGA_THEMES[theme],
+    };
+    return (_jsx(VegaPlot, { data: data, spec: spec }));
+}

package/dist/ExpressionHistogramSubscriber.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useMemo } from 'react';
+import { sum } from 'd3-array';
+import { TitleInfo, useCoordination, useLoaders, useUrls, useReady, useGridItemSize, useObsFeatureMatrixData, useFeatureSelection, registerPluginViewType, } from '@vitessce/vit-s';
+import { ViewType, COMPONENT_COORDINATION_TYPES } from '@vitessce/constants-internal';
+import ExpressionHistogram from './ExpressionHistogram';
+import { useStyles } from './styles';
+/**
+ * A subscriber component for `ExpressionHistogram`,
+ * which listens for gene selection updates and
+ * `GRID_RESIZE` events.
+ * @param {object} props
+ * @param {function} props.removeGridComponent The grid component removal function.
+ * @param {object} props.coordinationScopes An object mapping coordination
+ * types to coordination scopes.
+ * @param {string} props.theme The name of the current Vitessce theme.
+ */
+export function ExpressionHistogramSubscriber(props) {
+    const { coordinationScopes, removeGridComponent, theme, } = props;
+    const classes = useStyles();
+    const loaders = useLoaders();
+    // Get "props" from the coordination space.
+    const [{ dataset, obsType, featureType, featureValueType, featureSelection: geneSelection, }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType.FEATURE_VALUE_HISTOGRAM], coordinationScopes);
+    const [width, height, containerRef] = useGridItemSize();
+    const [urls, addUrl] = useUrls(loaders, dataset);
+    // Get data from loaders using the data hooks.
+    const [{ obsIndex, featureIndex, obsFeatureMatrix }, matrixStatus] = useObsFeatureMatrixData(loaders, dataset, addUrl, true, {}, {}, { obsType, featureType, featureValueType });
+    // eslint-disable-next-line no-unused-vars
+    const [expressionData, loadedFeatureSelection, featureSelectionStatus] = useFeatureSelection(loaders, dataset, false, geneSelection, { obsType, featureType, featureValueType });
+    const isReady = useReady([
+        matrixStatus,
+        featureSelectionStatus,
+    ]);
+    const firstGeneSelected = geneSelection && geneSelection.length >= 1
+        ? geneSelection[0]
+        : null;
+    // From the expression matrix and the list of selected genes,
+    // generate the array of data points for the histogram.
+    const data = useMemo(() => {
+        if (firstGeneSelected && obsFeatureMatrix && expressionData) {
+            // Create new cellColors map based on the selected gene.
+            return Array.from(expressionData[0]).map((_, index) => {
+                const value = expressionData[0][index];
+                const normValue = value * 100 / 255;
+                return { value: normValue, gene: firstGeneSelected };
+            });
+        }
+        if (obsFeatureMatrix) {
+            const numGenes = featureIndex.length;
+            return obsIndex.map((cellId, cellIndex) => {
+                const values = obsFeatureMatrix.data
+                    .subarray(cellIndex * numGenes, (cellIndex + 1) * numGenes);
+                const sumValue = sum(values) * 100 / 255;
+                return { value: sumValue, gene: null };
+            });
+        }
+        return null;
+    }, [obsIndex, featureIndex, obsFeatureMatrix, firstGeneSelected, expressionData]);
+    return (_jsx(TitleInfo, { title: `Expression Histogram${(firstGeneSelected ? ` (${firstGeneSelected})` : '')}`, removeGridComponent: removeGridComponent, urls: urls, theme: theme, isReady: isReady, children: _jsx("div", { ref: containerRef, className: classes.vegaContainer, children: _jsx(ExpressionHistogram, { geneSelection: geneSelection, data: data, theme: theme, width: width, height: height }) }) }));
+}
+export function register() {
+    registerPluginViewType(ViewType.FEATURE_VALUE_HISTOGRAM, ExpressionHistogramSubscriber, COMPONENT_COORDINATION_TYPES[ViewType.FEATURE_VALUE_HISTOGRAM]);
+}

package/dist/index.js

@@ -0,0 +1,6 @@
+export { CellSetExpressionPlotSubscriber, register as registerCellSetExpression } from './CellSetExpressionPlotSubscriber';
+export { CellSetSizesPlotSubscriber, register as registerCellSetSizes } from './CellSetSizesPlotSubscriber';
+export { ExpressionHistogramSubscriber, register as registerExpressionHistogram } from './ExpressionHistogramSubscriber';
+export { default as CellSetSizesPlot } from './CellSetSizesPlot';
+export { default as CellSetExpressionPlot } from './CellSetExpressionPlot';
+export { default as ExpressionHistogram } from './ExpressionHistogram';

package/dist/styles.js

@@ -0,0 +1,8 @@
+import { makeStyles } from '@material-ui/core/styles';
+export const useStyles = makeStyles(() => ({
+    vegaContainer: {
+        display: 'flex',
+        flex: '1 1 auto',
+        overflow: 'hidden',
+    },
+}));

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@vitessce/statistical-plots",
+  "version": "2.0.0-beta.0",
+  "author": "Gehlenborg Lab",
+  "homepage": "http://vitessce.io",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vitessce/vitessce.git"
+  },
+  "license": "MIT",
+  "main": "dist/index.js",
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@material-ui/core": "~4.12.3",
+    "@vitessce/constants-internal": "2.0.0-beta.0",
+    "@vitessce/sets": "2.0.0-beta.0",
+    "@vitessce/utils": "2.0.0-beta.0",
+    "@vitessce/vega": "2.0.0-beta.0",
+    "@vitessce/vit-s": "2.0.0-beta.0",
+    "d3-array": "^2.4.0",
+    "lodash": "^4.17.21"
+  },
+  "devDependencies": {
+    "react": "^18.0.0",
+    "vite": "^3.0.0",
+    "vitest": "^0.23.4"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+  },
+  "scripts": {
+    "start": "tsc --watch",
+    "build": "tsc",
+    "test": "pnpm exec vitest --run -r ../../../ --dir ."
+  }
+}