@vitessce/statistical-plots 2.0.2 → 2.0.3

package/src/CellSetSizesPlot.js

@@ -0,0 +1,96 @@
+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 (
+    <VegaPlot
+      data={data}
+      spec={spec}
+    />
+  );
+}

package/src/CellSetSizesPlotSubscriber.js

@@ -0,0 +1,105 @@
+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 (
+    <TitleInfo
+      title={title}
+      removeGridComponent={removeGridComponent}
+      urls={urls}
+      theme={theme}
+      isReady={isReady}
+    >
+      <div ref={containerRef} className={classes.vegaContainer}>
+        <CellSetSizesPlot
+          data={data}
+          theme={theme}
+          width={width}
+          height={height}
+          obsType={obsType}
+        />
+      </div>
+    </TitleInfo>
+  );
+}
+
+export function register() {
+  registerPluginViewType(
+    ViewType.OBS_SET_SIZES,
+    CellSetSizesPlotSubscriber,
+    COMPONENT_COORDINATION_TYPES[ViewType.OBS_SET_SIZES],
+  );
+}

package/{dist → src}/ExpressionHistogram.js

@@ -1,7 +1,7 @@
-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.
@@ -21,29 +21,45 @@ import { VegaPlot, VEGA_THEMES } from '@vitessce/vega';
  * 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 }));
+  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 (
+    <VegaPlot
+      data={data}
+      spec={spec}
+    />
+  );
 }

package/src/ExpressionHistogramSubscriber.js

@@ -0,0 +1,118 @@
+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 (
+    <TitleInfo
+      title={`Expression Histogram${(firstGeneSelected ? ` (${firstGeneSelected})` : '')}`}
+      removeGridComponent={removeGridComponent}
+      urls={urls}
+      theme={theme}
+      isReady={isReady}
+    >
+      <div ref={containerRef} className={classes.vegaContainer}>
+        <ExpressionHistogram
+          geneSelection={geneSelection}
+          data={data}
+          theme={theme}
+          width={width}
+          height={height}
+        />
+      </div>
+    </TitleInfo>
+  );
+}
+
+export function register() {
+  registerPluginViewType(
+    ViewType.FEATURE_VALUE_HISTOGRAM,
+    ExpressionHistogramSubscriber,
+    COMPONENT_COORDINATION_TYPES[ViewType.FEATURE_VALUE_HISTOGRAM],
+  );
+}

package/src/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/src/styles.js

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

package/dist/CellSetExpressionPlot.js

@@ -1,248 +0,0 @@
-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-utils';
-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 !== 'None')
-                    ? [`${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 }));
-}