@vitessce/statistical-plots 2.0.2 → 2.0.3-beta.0

package/dist/DotPlot.js

@@ -0,0 +1,110 @@
+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 { capitalize } from '@vitessce/utils';
+import plur from 'plur';
+/**
+ * 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 DotPlot(props) {
+    const { data: rawData, theme, width, height, marginRight, marginBottom, obsType, keyLength = 36, featureType, featureValueType, featureValueTransformName, } = props;
+    // Add a property `keyGroup` and `keyFeature` which concatenates the key and the name,
+    // which is both unique and can easily be converted
+    // back to the name by taking a substring.
+    const data = rawData.map(d => ({
+        ...d,
+        keyGroup: d.groupKey + d.group,
+        keyFeature: d.featureKey + d.feature,
+    }));
+    // Get the max characters in an axis label for autsizing the bottom margin.
+    const maxCharactersForGroup = data.reduce((acc, val) => {
+        // eslint-disable-next-line no-param-reassign
+        acc = acc === undefined || val.group.length > acc ? val.group.length : acc;
+        return acc;
+    }, 0);
+    const maxCharactersForFeature = data.reduce((acc, val) => {
+        // eslint-disable-next-line no-param-reassign
+        acc = acc === undefined || val.feature.length > acc ? val.feature.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 autoMarginVertical = marginBottom
+        || 30 + Math.sqrt(maxCharactersForFeature / 2) * 30;
+    const autoMarginHorizontal = marginRight
+        || 30 + Math.sqrt(maxCharactersForGroup / 2) * 30;
+    const plotWidth = clamp(width - autoMarginHorizontal - 120, 10, Infinity);
+    const plotHeight = clamp(height - autoMarginVertical, 10, Infinity);
+    // Get an array of keys for sorting purposes.
+    const groupKeys = data.map(d => d.keyGroup);
+    const featureKeys = data.map(d => d.keyFeature);
+    const meanTransform = (featureValueTransformName && featureValueTransformName !== 'None')
+        // Mean Log-Transformed Normalized Expression
+        ? [`Mean ${featureValueTransformName}-transformed`, `normalized ${featureValueType}`, 'in set']
+        // Mean Normalized Expression
+        : ['Mean normalized', `${featureValueType} in set`];
+    const spec = {
+        mark: { type: 'circle' },
+        encoding: {
+            x: {
+                field: 'keyFeature',
+                type: 'nominal',
+                axis: { labelExpr: `substring(datum.label, ${keyLength})` },
+                title: capitalize(featureType),
+                sort: featureKeys,
+            },
+            y: {
+                field: 'keyGroup',
+                type: 'nominal',
+                axis: { labelExpr: `substring(datum.label, ${keyLength})` },
+                title: `${capitalize(obsType)} Set`,
+                sort: groupKeys,
+            },
+            color: {
+                field: 'meanExpInGroup',
+                type: 'quantitative',
+                title: meanTransform,
+                scale: {
+                    scheme: 'plasma',
+                },
+                legend: {
+                    direction: 'horizontal',
+                    tickCount: 2,
+                },
+            },
+            size: {
+                field: 'fracPosInGroup',
+                type: 'quantitative',
+                title: [`Fraction of ${plur(obsType, 2)}`, 'in set'],
+                legend: {
+                    symbolFillColor: 'white',
+                },
+            },
+        },
+        width: plotWidth,
+        height: plotHeight,
+        config: VEGA_THEMES[theme],
+    };
+    return (_jsx(VegaPlot, { data: data, spec: spec }));
+}

package/dist/DotPlotSubscriber.js

@@ -0,0 +1,126 @@
+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, getValueTransformFunction } from '@vitessce/utils';
+import { treeToObsIndicesBySetNames, mergeObsSets } from '@vitessce/sets-utils';
+import { mean } from 'd3-array';
+import uuidv4 from 'uuid/v4';
+import CellSetExpressionPlotOptions from './CellSetExpressionPlotOptions';
+import DotPlot from './DotPlot';
+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 useExpressionSummaries(expressionData, obsIndex, cellSets, additionalCellSets, geneSelection, cellSetSelection, cellSetColor, featureValueTransform, featureValueTransformCoefficient, posThreshold, featureLabelsMap) {
+    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 [resultArr, meanExpressionMax] = useMemo(() => {
+        if (mergedCellSets && cellSetSelection
+            && geneSelection && geneSelection.length >= 1
+            && expressionData && expressionData.length === geneSelection.length) {
+            let exprMax = -Infinity;
+            const result = [];
+            const cellIndices = {};
+            for (let i = 0; i < obsIndex.length; i += 1) {
+                cellIndices[obsIndex[i]] = i;
+            }
+            const setObjects = treeToObsIndicesBySetNames(mergedCellSets, cellSetSelection, cellIndices);
+            geneSelection.forEach((featureName, featureI) => {
+                const featureKey = uuidv4();
+                let numPos = 0;
+                setObjects.forEach((setObj) => {
+                    const exprValues = setObj.indices.map((cellIndex) => {
+                        const value = expressionData[featureI][cellIndex];
+                        const normValue = value * 100 / 255;
+                        const transformFunction = getValueTransformFunction(featureValueTransform, featureValueTransformCoefficient);
+                        const transformedValue = transformFunction(normValue);
+                        if (transformedValue > posThreshold) {
+                            numPos += 1;
+                        }
+                        return transformedValue;
+                    });
+                    const exprMean = mean(exprValues);
+                    const fracPos = numPos / setObj.size;
+                    result.push({
+                        key: uuidv4(),
+                        featureKey,
+                        groupKey: setObj.key,
+                        group: setObj.name,
+                        feature: featureLabelsMap?.get(featureName) || featureName,
+                        meanExpInGroup: exprMean,
+                        fracPosInGroup: fracPos,
+                    });
+                    exprMax = Math.max(exprMean, exprMax);
+                });
+            });
+            return [result, exprMax];
+        }
+        return [null, null];
+    }, [expressionData, obsIndex, geneSelection,
+        mergedCellSets, cellSetSelection,
+        featureValueTransform, featureValueTransformCoefficient,
+        posThreshold, featureLabelsMap,
+    ]);
+    return [resultArr, meanExpressionMax];
+}
+/**
+ * A subscriber component for `DotPlot`,
+ * 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 DotPlotSubscriber(props) {
+    const { coordinationScopes, removeGridComponent, theme, title = 'Dot Plot', posThreshold = 0, } = 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,
+    // TODO: coordination type for mean expression colormap
+     }, { setFeatureValueTransform, setFeatureValueTransformCoefficient, }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType.DOT_PLOT], 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 [resultArr, meanExpressionMax] = useExpressionSummaries(expressionData, obsIndex, cellSets, additionalCellSets, geneSelection, cellSetSelection, cellSetColor, featureValueTransform, featureValueTransformCoefficient, posThreshold, featureLabelsMap);
+    const selectedTransformName = transformOptions.find(o => o.value === featureValueTransform)?.name;
+    return (_jsx(TitleInfo, { title: title, removeGridComponent: removeGridComponent, urls: urls, theme: theme, isReady: isReady, options: (_jsx(CellSetExpressionPlotOptions, { featureValueTransform: featureValueTransform, setFeatureValueTransform: setFeatureValueTransform, featureValueTransformCoefficient: featureValueTransformCoefficient, setFeatureValueTransformCoefficient: setFeatureValueTransformCoefficient, transformOptions: transformOptions })), children: _jsx("div", { ref: containerRef, className: classes.vegaContainer, children: resultArr ? (_jsx(DotPlot, { domainMax: meanExpressionMax, data: resultArr, theme: theme, width: width, height: height, obsType: obsType, featureType: featureType, featureValueType: featureValueType, featureValueTransformName: selectedTransformName })) : (_jsxs("span", { children: ["Select at least one ", featureType, "."] })) }) }));
+}
+export function register() {
+    registerPluginViewType(ViewType.DOT_PLOT, DotPlotSubscriber, COMPONENT_COORDINATION_TYPES[ViewType.DOT_PLOT]);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitessce/statistical-plots",
-  "version": "2.0.2",
+  "version": "2.0.3-beta.0",
   "author": "Gehlenborg Lab",
   "homepage": "http://vitessce.io",
   "repository": {
@@ -16,11 +16,11 @@
     "@material-ui/core": "~4.12.3",
     "d3-array": "^2.4.0",
     "lodash": "^4.17.21",
-    "@vitessce/constants-internal": "2.0.2",
-    "@vitessce/sets-utils": "2.0.2",
-    "@vitessce/utils": "2.0.2",
-    "@vitessce/vega": "2.0.2",
-    "@vitessce/vit-s": "2.0.2"
+    "@vitessce/utils": "2.0.3-beta.0",
+    "@vitessce/sets-utils": "2.0.3-beta.0",
+    "@vitessce/vit-s": "2.0.3-beta.0",
+    "@vitessce/vega": "2.0.3-beta.0",
+    "@vitessce/constants-internal": "2.0.3-beta.0"
   },
   "devDependencies": {
     "react": "^18.0.0",