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

package/{dist → dist-tsc}/ExpressionHistogramSubscriber.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { useMemo } from 'react';
+import React, { useMemo, useCallback, } from 'react';
 import { sum } from 'd3-array';
-import { TitleInfo, useCoordination, useLoaders, useUrls, useReady, useGridItemSize, useObsFeatureMatrixData, useFeatureSelection, registerPluginViewType, } from '@vitessce/vit-s';
+import { TitleInfo, useCoordination, useLoaders, useUrls, useReady, useGridItemSize, useObsFeatureMatrixData, useFeatureSelection, } from '@vitessce/vit-s';
 import { ViewType, COMPONENT_COORDINATION_TYPES } from '@vitessce/constants-internal';
-import ExpressionHistogram from './ExpressionHistogram';
-import { useStyles } from './styles';
+import { setObsSelection, getObsInfoFromDataWithinRange } from '@vitessce/sets-utils';
+import ExpressionHistogram from './ExpressionHistogram.js';
+import { useStyles } from './styles.js';
 /**
  * A subscriber component for `ExpressionHistogram`,
  * which listens for gene selection updates and
@@ -20,7 +21,7 @@ export function ExpressionHistogramSubscriber(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 [{ dataset, obsType, featureType, featureValueType, featureSelection: geneSelection, additionalObsSets: additionalCellSets, obsSetColor: cellSetColor, }, { setAdditionalObsSets: setAdditionalCellSets, setObsSetColor: setCellSetColor, setObsColorEncoding: setCellColorEncoding, setObsSetSelection: setCellSetSelection, }] = 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.
@@ -38,11 +39,12 @@ export function ExpressionHistogramSubscriber(props) {
     // 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];
+            return obsIndex.map((cellId, cellIndex) => {
+                const value = expressionData[0][cellIndex];
+                // Create new cellColors map based on the selected gene.
                 const normValue = value * 100 / 255;
-                return { value: normValue, gene: firstGeneSelected };
+                const newItem = { value: normValue, gene: firstGeneSelected, cellId };
+                return newItem;
             });
         }
         if (obsFeatureMatrix) {
@@ -51,13 +53,18 @@ export function ExpressionHistogramSubscriber(props) {
                 const values = obsFeatureMatrix.data
                     .subarray(cellIndex * numGenes, (cellIndex + 1) * numGenes);
                 const sumValue = sum(values) * 100 / 255;
-                return { value: sumValue, gene: null };
+                const newItem = { value: sumValue, gene: null, cellId };
+                return newItem;
             });
         }
         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]);
+    const onSelect = useCallback((value) => {
+        const geneName = firstGeneSelected ? [firstGeneSelected, 'values'].join(' ') : 'transcript count';
+        const selectedCellIds = getObsInfoFromDataWithinRange(value, data);
+        setObsSelection(selectedCellIds, additionalCellSets, cellSetColor, setCellSetSelection, setAdditionalCellSets, setCellSetColor, setCellColorEncoding, 'Selection ', `: based on ${geneName} in range [${value[0].toFixed(1)}, ${value[1].toFixed(1)}] `);
+    }, [additionalCellSets, cellSetColor, data, setAdditionalCellSets,
+        setCellColorEncoding, setCellSetColor, setCellSetSelection, firstGeneSelected,
+    ]);
+    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, onSelect: onSelect, data: data, theme: theme, width: width, height: height }) }) }));
 }

package/dist-tsc/index.d.ts

@@ -0,0 +1,7 @@
+export { CellSetExpressionPlotSubscriber } from "./CellSetExpressionPlotSubscriber.js";
+export { CellSetSizesPlotSubscriber } from "./CellSetSizesPlotSubscriber.js";
+export { ExpressionHistogramSubscriber } from "./ExpressionHistogramSubscriber.js";
+export { default as CellSetSizesPlot } from "./CellSetSizesPlot.js";
+export { default as CellSetExpressionPlot } from "./CellSetExpressionPlot.js";
+export { default as ExpressionHistogram } from "./ExpressionHistogram.js";
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist-tsc/index.js

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

package/dist-tsc/styles.d.ts

@@ -0,0 +1,2 @@
+export const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"vegaContainer">;
+//# sourceMappingURL=styles.d.ts.map

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

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

package/{dist → dist-tsc}/styles.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitessce/statistical-plots",
-  "version": "2.0.3-beta.0",
+  "version": "3.0.0",
   "author": "Gehlenborg Lab",
   "homepage": "http://vitessce.io",
   "repository": {
@@ -8,31 +8,40 @@
     "url": "git+https://github.com/vitessce/vitessce.git"
   },
   "license": "MIT",
+  "type": "module",
   "main": "dist/index.js",
   "files": [
-    "dist"
+    "src",
+    "dist",
+    "dist-tsc"
   ],
   "dependencies": {
     "@material-ui/core": "~4.12.3",
     "d3-array": "^2.4.0",
-    "lodash": "^4.17.21",
-    "@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"
+    "lodash-es": "^4.17.21",
+    "@vitessce/constants-internal": "3.0.0",
+    "@vitessce/sets-utils": "3.0.0",
+    "@vitessce/utils": "3.0.0",
+    "@vitessce/vega": "3.0.0",
+    "@vitessce/vit-s": "3.0.0"
   },
   "devDependencies": {
     "react": "^18.0.0",
-    "vite": "^3.0.0",
+    "vite": "^4.3.0",
     "vitest": "^0.23.4"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "scripts": {
-    "start": "tsc --watch",
-    "build": "tsc",
+    "bundle": "pnpm exec vite build -c ../../../scripts/vite.config.js",
     "test": "pnpm exec vitest --run -r ../../../ --dir ."
+  },
+  "module": "dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist-tsc/index.d.ts",
+      "import": "./dist/index.js"
+    }
   }
 }

package/src/CellSetExpressionPlot.js

@@ -0,0 +1,278 @@
+import React from 'react';
+import { clamp } from 'lodash-es';
+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`, `${capitalize(featureValueType)} Values`]
+          : `${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 (
+    <VegaPlot
+      data={data}
+      spec={spec}
+    />
+  );
+}

package/src/CellSetExpressionPlotOptions.js

@@ -0,0 +1,73 @@
+import React from 'react';
+import { TableCell, TableRow, TextField } from '@material-ui/core';
+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 (
+    <OptionsContainer>
+      <TableRow>
+        <TableCell className={classes.labelCell}>Transform</TableCell>
+        <TableCell className={classes.inputCell}>
+          <OptionSelect
+            key="gating-transform-select"
+            className={classes.select}
+            value={featureValueTransform === null ? '' : featureValueTransform}
+            onChange={handleTransformChange}
+            inputProps={{
+              id: 'scatterplot-transform-select',
+            }}
+          >
+            {transformOptions.map(opt => (
+              <option key={opt.name} value={opt.value === null ? '' : opt.value}>
+                {opt.name}
+              </option>
+            ))}
+          </OptionSelect>
+        </TableCell>
+      </TableRow>
+      <TableRow key="transform-coefficient-option-row">
+        <TableCell className={classes.labelCell}>
+          Transform Coefficient
+        </TableCell>
+        <TableCell className={classes.inputCell}>
+          <TextField
+            label="Number"
+            type="number"
+            onChange={handleTransformCoefficientChange}
+            value={featureValueTransformCoefficient}
+            InputLabelProps={{
+              shrink: true,
+            }}
+          />
+        </TableCell>
+      </TableRow>
+    </OptionsContainer>
+  );
+}