@vitessce/statistical-plots 2.0.2 → 2.0.3

package/dist/CellSetExpressionPlotOptions.js

@@ -1,32 +0,0 @@
-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

@@ -1,111 +0,0 @@
-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, useFeatureLabelsData, 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-utils';
-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 });
-    // TODO: support multiple feature labels using featureLabelsType coordination values.
-    const [{ featureLabelsMap }, featureLabelsStatus] = useFeatureLabelsData(loaders, dataset, addUrl, false, {}, {}, { featureType });
-    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,
-        featureLabelsStatus,
-    ]);
-    const [expressionArr, setArr, expressionMax] = useExpressionByCellSet(expressionData, obsIndex, cellSets, additionalCellSets, geneSelection, cellSetSelection, cellSetColor, featureValueTransform, featureValueTransformCoefficient, theme);
-    const firstGeneSelected = geneSelection && geneSelection.length >= 1
-        ? (featureLabelsMap?.get(geneSelection[0]) || 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

@@ -1,77 +0,0 @@
-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-utils';
-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

@@ -1,44 +0,0 @@
-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-utils';
-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/ExpressionHistogramSubscriber.js

@@ -1,63 +0,0 @@
-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/styles.js

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