@vitessce/statistical-plots 3.4.6 → 3.4.7

package/dist-tsc/index.d.ts

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

package/dist-tsc/index.js

@@ -1,7 +1,9 @@
 export { CellSetExpressionPlotSubscriber } from './CellSetExpressionPlotSubscriber.js';
 export { CellSetSizesPlotSubscriber } from './CellSetSizesPlotSubscriber.js';
 export { ExpressionHistogramSubscriber } from './ExpressionHistogramSubscriber.js';
+export { DotPlotSubscriber } from './DotPlotSubscriber.js';
 export { FeatureBarPlotSubscriber } from './FeatureBarPlotSubscriber.js';
 export { default as CellSetSizesPlot } from './CellSetSizesPlot.js';
 export { default as CellSetExpressionPlot } from './CellSetExpressionPlot.js';
 export { default as ExpressionHistogram } from './ExpressionHistogram.js';
+export { default as DotPlot } from './DotPlot.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitessce/statistical-plots",
-  "version": "3.4.6",
+  "version": "3.4.7",
   "author": "Gehlenborg Lab",
   "homepage": "http://vitessce.io",
   "repository": {
@@ -22,15 +22,18 @@
     "d3-shape": "^3.2.0",
     "d3-axis": "^3.0.0",
     "d3-selection": "^3.0.0",
+    "d3-format": "^3.1.0",
     "vega-scale": "^6.0.0",
     "lodash-es": "^4.17.21",
     "react-aria": "^3.28.0",
-    "d3-format": "^3.1.0",
-    "@vitessce/constants-internal": "3.4.6",
-    "@vitessce/sets-utils": "3.4.6",
-    "@vitessce/utils": "3.4.6",
-    "@vitessce/vega": "3.4.6",
-    "@vitessce/vit-s": "3.4.6"
+    "internmap": "^2.0.3",
+    "uuid": "^9.0.0",
+    "@vitessce/constants-internal": "3.4.7",
+    "@vitessce/sets-utils": "3.4.7",
+    "@vitessce/utils": "3.4.7",
+    "@vitessce/vega": "3.4.7",
+    "@vitessce/vit-s": "3.4.7",
+    "@vitessce/gl": "3.4.7"
   },
   "devDependencies": {
     "react": "^18.0.0",

package/src/CellSetExpressionPlot.js

@@ -1,20 +1,9 @@
 /* eslint-disable indent */
 /* eslint-disable camelcase */
 import React, { useMemo, useEffect, useRef } from 'react';
-import { scaleLinear } from 'd3-scale';
+import { scaleLinear, scaleOrdinal } from 'd3-scale';
 import { scale as vega_scale } from 'vega-scale';
 import { axisBottom, axisLeft } from 'd3-axis';
-import {
-  bin,
-  min,
-  max,
-  rollup as d3_rollup,
-  mean as d3_mean,
-  deviation as d3_deviation,
-  ascending as d3_ascending,
-  map as d3_map,
-  quantileSorted,
-} from 'd3-array';
 import { area as d3_area, curveBasis } from 'd3-shape';
 import { select } from 'd3-selection';
 import { colorArrayToString } from '@vitessce/sets-utils';
@@ -22,44 +11,6 @@ import { capitalize } from '@vitessce/utils';
 
 const scaleBand = vega_scale('band');
 
-const GROUP_KEY = 'set';
-const VALUE_KEY = 'value';
-
-// Reference: https://github.com/d3/d3-array/issues/180#issuecomment-851378012
-function summarize(iterable, keepZeros) {
-  const values = d3_map(iterable, d => d[VALUE_KEY])
-    .filter(d => keepZeros || d !== 0.0)
-    .sort(d3_ascending);
-  const minVal = values[0];
-  const maxVal = values[values.length - 1];
-  const q1 = quantileSorted(values, 0.25);
-  const q2 = quantileSorted(values, 0.5);
-  const q3 = quantileSorted(values, 0.75);
-  const iqr = q3 - q1; // interquartile range
-  const r0 = Math.max(minVal, q1 - iqr * 1.5);
-  const r1 = Math.min(maxVal, q3 + iqr * 1.5);
-  let i = -1;
-  while (values[++i] < r0);
-  const w0 = values[i];
-  while (values[++i] <= r1);
-  const w1 = values[i - 1];
-
-  // Chauvenet
-  // Reference: https://en.wikipedia.org/wiki/Chauvenet%27s_criterion
-  const mean = d3_mean(values);
-  const stdv = d3_deviation(values);
-  const c0 = mean - 3 * stdv;
-  const c1 = mean + 3 * stdv;
-
-  return {
-    quartiles: [q1, q2, q3],
-    range: [r0, r1],
-    whiskers: [w0, w1],
-    chauvenetRange: [c0, c1],
-    nonOutliers: values.filter(v => c0 <= v && v <= c1),
-  };
-}
-
 /**
  * Gene expression histogram displayed as a bar chart,
  * implemented with the VegaPlot component.
@@ -86,6 +37,9 @@ export default function CellSetExpressionPlot(props) {
     yMin: yMinProp,
     yUnits,
     jitter,
+    cellSetSelection,
+    sampleSetSelection,
+    sampleSetColor,
     colors,
     data,
     theme,
@@ -104,11 +58,19 @@ export default function CellSetExpressionPlot(props) {
   const svgRef = useRef();
 
   // Get the max characters in an axis label for autsizing the bottom margin.
-  const maxCharactersForLabel = useMemo(() => data.reduce((acc, val) => {
-    // eslint-disable-next-line no-param-reassign
-    acc = acc === undefined || val[GROUP_KEY].length > acc ? val[GROUP_KEY].length : acc;
-    return acc;
-  }, 0), [data]);
+  const maxCharactersForLabel = useMemo(() => {
+    if (!cellSetSelection) {
+      return 0;
+    }
+    const cellSetNames = cellSetSelection.map(d => d.at(-1));
+    return cellSetNames.reduce((acc, name) => {
+      // eslint-disable-next-line no-param-reassign
+      acc = acc === undefined || name.length > acc ? name.length : acc;
+      return acc;
+    }, 0);
+  }, [cellSetSelection]);
+
+  const isStratified = (Array.isArray(sampleSetSelection) && sampleSetSelection.length === 2);
 
   useEffect(() => {
     const domElement = svgRef.current;
@@ -130,6 +92,8 @@ export default function CellSetExpressionPlot(props) {
 
     const rectColor = (theme === 'dark' ? 'white' : 'black');
 
+    const fgColor = (theme === 'dark' ? 'white' : 'black');
+
     const svg = select(domElement);
     svg.selectAll('g').remove();
     svg
@@ -141,48 +105,52 @@ export default function CellSetExpressionPlot(props) {
       .attr('width', width)
       .attr('height', height);
 
-    const groupNames = colors.map(d => d.name);
-
     // 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 colorScale = scaleOrdinal()
+      .domain(colors.map(d => d.setNamePath))
+      .range(colors.map(d => colorArrayToString(d.color)));
+
+    const sampleSetNames = sampleSetSelection?.map(path => path.at(-1));
+
+    let stratificationSide;
+    let stratificationColor;
+    if (isStratified) {
+      stratificationSide = scaleOrdinal()
+        .domain(sampleSetNames)
+        .range(['left', 'right']);
+      stratificationColor = scaleOrdinal()
+        .domain(sampleSetNames)
+        .range(
+          // TODO: check for full path equality here.
+          sampleSetNames
+            .map(name => sampleSetColor?.find(d => d.path.at(-1) === name).color)
+            .map(colorArrayToString),
+        );
+    }
 
     // Remove outliers on a per-group basis.
-    const groupedSummaries = Array.from(
-      d3_rollup(data, groupData => summarize(groupData, true), d => d[GROUP_KEY]),
-      ([key, value]) => ({ key, value }),
-    );
-    const groupedData = groupedSummaries
-      .map(({ key, value }) => ({ key, value: value.nonOutliers }));
-    const trimmedData = groupedData.map(kv => kv.value).flat();
+    const {
+      groupSummaries: groupedSummaries,
+      groupData: groupedData,
+      groupBins, // Array of [{ key, value: [{ key, value: histogram(nonOutliers) }] }]
+      groupBinsMax, // Number
+    } = data;
+    let { y } = data;
 
     const innerWidth = width - marginLeft;
     const innerHeight = height - autoMarginBottom;
 
     const xGroup = scaleBand()
       .range([marginLeft, width - marginRight])
-      .domain(groupNames)
+      .domain(cellSetSelection)
       .padding(0.1);
 
-    const yMin = (yMinProp === null ? Math.min(0, min(trimmedData)) : yMinProp);
 
     // For the y domain, use the yMin prop
     // to support a use case such as 'Aspect Ratio',
     // where the domain minimum should be 1 rather than 0.
-    const y = scaleLinear()
-      .domain([yMin, max(trimmedData)])
-      .range([innerHeight, marginTop]);
-
-    const histogram = bin()
-      .thresholds(y.ticks(16))
-      .domain(y.domain());
-
-    const groupBins = groupedData.map(kv => ({ key: kv.key, value: histogram(kv.value) }));
-
-    const groupBinsMax = max(groupBins.flatMap(d => d.value.map(v => v.length)));
+    y = y.range([innerHeight, marginTop]);
 
     const x = scaleLinear()
       .domain([-groupBinsMax, groupBinsMax])
@@ -194,18 +162,54 @@ export default function CellSetExpressionPlot(props) {
       .y(d => y(d.x0))
       .curve(curveBasis);
 
+    const leftArea = d3_area()
+      .x0(d => x(-d.length))
+      .x1(() => x(0))
+      .y(d => y(d.x0))
+      .curve(curveBasis);
+
+    const rightArea = d3_area()
+      .x0(() => x(0))
+      .x1(d => x(d.length))
+      .y(d => y(d.x0))
+      .curve(curveBasis);
+
+    const sideToAreaFunc = {
+      left: leftArea,
+      right: rightArea,
+    };
+
     // Violin areas
-    g
-      .selectAll('violin')
-      .data(groupBins)
-      .enter()
-        .append('g')
-          .attr('transform', d => `translate(${xGroup(d.key)},0)`)
-          .style('fill', d => colorScale.range[groupNames.indexOf(d.key)])
-        .append('path')
-          .datum(d => d.value)
-          .style('stroke', 'none')
-          .attr('d', d => area(d));
+    if (isStratified) {
+      const violinG = g
+        .selectAll('violin')
+        .data(groupBins)
+        .enter()
+          .append('g')
+            .attr('transform', d => `translate(${xGroup(d.key)},0)`);
+      violinG.append('path')
+        .datum(d => d.value[0])
+        .style('stroke', 'none')
+        .style('fill', d => stratificationColor(d.key))
+        .attr('d', d => sideToAreaFunc[stratificationSide(d.key)](d.value));
+      violinG.append('path')
+        .datum(d => d.value[1])
+        .style('stroke', 'none')
+        .style('fill', d => stratificationColor(d.key))
+        .attr('d', d => sideToAreaFunc[stratificationSide(d.key)](d.value));
+    } else {
+      g
+        .selectAll('violin')
+        .data(groupBins)
+        .enter()
+          .append('g')
+            .attr('transform', d => `translate(${xGroup(d.key)},0)`)
+            .style('fill', d => colorScale(d.key))
+          .append('path')
+            .datum(d => d.value[0])
+            .style('stroke', 'none')
+            .attr('d', d => area(d.value));
+    }
 
     // Whiskers
     const whiskerGroups = g.selectAll('whiskers')
@@ -213,38 +217,88 @@ export default function CellSetExpressionPlot(props) {
       .enter()
         .append('g')
           .attr('transform', d => `translate(${xGroup(d.key)},0)`);
-    whiskerGroups.append('line')
-      .datum(d => d.value)
-      .attr('stroke', rectColor)
-      .attr('x1', xGroup.bandwidth() / 2)
-      .attr('x2', xGroup.bandwidth() / 2)
-      .attr('y1', d => y(d.quartiles[0]))
-      .attr('y2', d => y(d.quartiles[2]))
-      .attr('stroke-width', 2);
-    whiskerGroups.append('line')
-      .datum(d => d.value)
-      .attr('stroke', rectColor)
-      .attr('x1', xGroup.bandwidth() / 2 - (jitter ? 0 : 4))
-      .attr('x2', xGroup.bandwidth() / 2 + 4)
-      .attr('y1', d => y(d.quartiles[1]))
-      .attr('y2', d => y(d.quartiles[1]))
-      .attr('stroke-width', 2);
+
+    if (isStratified) {
+      // Vertical line
+      whiskerGroups.append('line')
+        .datum(d => d.value[0])
+        .attr('stroke', rectColor)
+        .attr('x1', d => xGroup.bandwidth() / 2 + (stratificationSide(d.key) === 'left' ? -1.5 : 1.5))
+        .attr('x2', d => xGroup.bandwidth() / 2 + (stratificationSide(d.key) === 'left' ? -1.5 : 1.5))
+        .attr('y1', d => y(d.value.quartiles[0]))
+        .attr('y2', d => y(d.value.quartiles[2]))
+        .attr('stroke-width', 2);
+
+      whiskerGroups.append('line')
+        .datum(d => d.value[1])
+        .attr('stroke', rectColor)
+        .attr('x1', d => xGroup.bandwidth() / 2 + (stratificationSide(d.key) === 'left' ? -1.5 : 1.5))
+        .attr('x2', d => xGroup.bandwidth() / 2 + (stratificationSide(d.key) === 'left' ? -1.5 : 1.5))
+        .attr('y1', d => y(d.value.quartiles[0]))
+        .attr('y2', d => y(d.value.quartiles[2]))
+        .attr('stroke-width', 2);
+
+      // Horizontal line
+      whiskerGroups.append('line')
+        .datum(d => d.value[0])
+        .attr('stroke', rectColor)
+        .attr('x1', d => xGroup.bandwidth() / 2 + (stratificationSide(d.key) === 'left' ? -5.5 : 1.5))
+        .attr('x2', d => xGroup.bandwidth() / 2 + (stratificationSide(d.key) === 'left' ? -1.5 : 5.5))
+        .attr('y1', d => y(d.value.quartiles[1]))
+        .attr('y2', d => y(d.value.quartiles[1]))
+        .attr('stroke-width', 2);
+
+      whiskerGroups.append('line')
+        .datum(d => d.value[1])
+        .attr('stroke', rectColor)
+        .attr('x1', d => xGroup.bandwidth() / 2 + (stratificationSide(d.key) === 'left' ? -5.5 : 1.5))
+        .attr('x2', d => xGroup.bandwidth() / 2 + (stratificationSide(d.key) === 'left' ? -1.5 : 5.5))
+        .attr('y1', d => y(d.value.quartiles[1]))
+        .attr('y2', d => y(d.value.quartiles[1]))
+        .attr('stroke-width', 2);
+    } else {
+      // Vertical line
+      whiskerGroups.append('line')
+        .datum(d => d.value[0].value)
+        .attr('stroke', rectColor)
+        .attr('x1', xGroup.bandwidth() / 2)
+        .attr('x2', xGroup.bandwidth() / 2)
+        .attr('y1', d => y(d.quartiles[0]))
+        .attr('y2', d => y(d.quartiles[2]))
+        .attr('stroke-width', 2);
+
+      // Horizontal line
+      whiskerGroups.append('line')
+        .datum(d => d.value[0].value)
+        .attr('stroke', rectColor)
+        .attr('x1', xGroup.bandwidth() / 2 - (jitter ? 0 : 4))
+        .attr('x2', xGroup.bandwidth() / 2 + 4)
+        .attr('y1', d => y(d.quartiles[1]))
+        .attr('y2', d => y(d.quartiles[1]))
+        .attr('stroke-width', 2);
+    }
 
     // Jittered points
     if (jitter) {
       groupedData.forEach(({ key, value }) => {
-        const groupG = g.append('g');
-        groupG.selectAll('point')
-          .data(value)
-          .enter()
-          .append('circle')
-            .attr('transform', `translate(${xGroup(key)},0)`)
-            .style('stroke', 'none')
-            .style('fill', 'silver')
-            .style('opacity', '0.1')
-            .attr('cx', () => 5 + Math.random() * ((xGroup.bandwidth() / 2) - 10))
-            .attr('cy', d => y(d))
-            .attr('r', 2);
+        value.forEach(({ value: subValue }) => {
+          if (isStratified) {
+            // TODO
+          } else {
+            const groupG = g.append('g');
+            groupG.selectAll('point')
+              .data(subValue)
+              .enter()
+              .append('circle')
+                .attr('transform', `translate(${xGroup(key)},0)`)
+                .style('stroke', 'none')
+                .style('fill', 'silver')
+                .style('opacity', '0.1')
+                .attr('cx', () => 5 + Math.random() * ((xGroup.bandwidth() / 2) - 10))
+                .attr('cy', d => y(d))
+                .attr('r', 2);
+          }
+        });
       });
     }
 
@@ -261,7 +315,7 @@ export default function CellSetExpressionPlot(props) {
       .append('g')
         .attr('transform', `translate(0,${innerHeight})`)
         .style('font-size', '14px')
-      .call(axisBottom(xGroup))
+      .call(axisBottom(xGroup).tickFormat(d => d.at(-1)))
       .selectAll('text')
         .style('font-size', '11px')
         .attr('dx', '-6px')
@@ -278,7 +332,7 @@ export default function CellSetExpressionPlot(props) {
       .attr('transform', 'rotate(-90)')
       .text(yTitle)
       .style('font-size', '12px')
-      .style('fill', 'white');
+      .style('fill', fgColor);
 
     // X-axis title
     g
@@ -288,11 +342,56 @@ export default function CellSetExpressionPlot(props) {
       .attr('y', height - 10)
       .text(xTitle)
       .style('font-size', '12px')
-      .style('fill', 'white');
+      .style('fill', fgColor);
+
+    // Legend
+    if (isStratified) {
+      const legendG = g
+        .append('g')
+          .attr('transform', `translate(${marginLeft + innerWidth - 150},${marginTop})`);
+        legendG.append('rect')
+          .attr('width', 150)
+          .attr('height', 56)
+          .attr('x', 0)
+          .attr('y', 0)
+          .style('fill', 'rgba(215, 215, 215, 0.2)')
+          .attr('rx', 4);
+        legendG.append('text')
+          .text('Sample Group')
+          .style('font-size', '11px')
+          .style('line-height', 20)
+          .attr('x', 4)
+          .attr('y', 14)
+          .style('fill', fgColor);
+        legendG.append('rect')
+          .attr('width', 10)
+          .attr('height', 10)
+          .attr('x', 5)
+          .attr('y', 23)
+          .style('fill', stratificationColor(sampleSetNames[0]));
+        legendG.append('text')
+          .text(sampleSetNames[0])
+          .style('font-size', '11px')
+          .attr('x', 20)
+          .attr('y', 32)
+          .style('fill', fgColor);
+        legendG.append('rect')
+          .attr('width', 10)
+          .attr('height', 10)
+          .attr('x', 5)
+          .attr('y', 39)
+          .style('fill', stratificationColor(sampleSetNames[1]));
+        legendG.append('text')
+          .text(sampleSetNames[1])
+          .style('font-size', '11px')
+          .attr('x', 20)
+          .attr('y', 48)
+          .style('fill', fgColor);
+    }
   }, [width, height, data, marginLeft, marginBottom, colors,
     jitter, theme, yMinProp, marginTop, marginRight, featureType,
     featureValueType, featureValueTransformName, yUnits, obsType,
-    maxCharactersForLabel,
+    maxCharactersForLabel, sampleSetSelection,
   ]);
 
   return (

package/src/CellSetExpressionPlotOptions.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import { useId } from 'react-aria';
-import { TableCell, TableRow, TextField } from '@material-ui/core';
+import { TableCell, TableRow, TextField, Slider } from '@material-ui/core';
 import { usePlotOptionsStyles, OptionsContainer, OptionSelect } from '@vitessce/vit-s';
+import { GLSL_COLORMAPS } from '@vitessce/gl';
 
 export default function CellSetExpressionPlotOptions(props) {
   const {
@@ -10,16 +11,28 @@ export default function CellSetExpressionPlotOptions(props) {
     featureValueTransformCoefficient,
     setFeatureValueTransformCoefficient,
     transformOptions,
+    featureValuePositivityThreshold,
+    setFeatureValuePositivityThreshold,
+    featureValueColormap,
+    setFeatureValueColormap,
   } = props;
 
   const cellSetExpressionPlotOptionsId = useId();
 
   const classes = usePlotOptionsStyles();
 
+  function handleFeatureValueColormapChange(event) {
+    setFeatureValueColormap(event.target.value);
+  }
+
   const handleTransformChange = (event) => {
     setFeatureValueTransform(event.target.value === '' ? null : event.target.value);
   };
 
+  function handlePositivityThresholdChange(event, value) {
+    setFeatureValuePositivityThreshold(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) => {
@@ -36,6 +49,30 @@ export default function CellSetExpressionPlotOptions(props) {
 
   return (
     <OptionsContainer>
+      {setFeatureValueColormap ? (
+        <TableRow>
+          <TableCell className={classes.labelCell} variant="head" scope="row">
+            <label htmlFor={`cellset-expression-feature-value-colormap-${cellSetExpressionPlotOptionsId}`}>
+              Feature Value Colormap
+            </label>
+          </TableCell>
+          <TableCell className={classes.inputCell} variant="body">
+            <OptionSelect
+              className={classes.select}
+              value={featureValueColormap}
+              onChange={handleFeatureValueColormapChange}
+              inputProps={{
+                'aria-label': 'Select feature value colormap',
+                id: `cellset-expression-feature-value-colormap-${cellSetExpressionPlotOptionsId}`,
+              }}
+            >
+              {GLSL_COLORMAPS.map(cmap => (
+                <option key={cmap} value={cmap}>{cmap}</option>
+              ))}
+            </OptionSelect>
+          </TableCell>
+        </TableRow>
+      ) : null}
       <TableRow>
         <TableCell className={classes.labelCell} variant="head" scope="row">
           <label
@@ -82,6 +119,25 @@ export default function CellSetExpressionPlotOptions(props) {
           />
         </TableCell>
       </TableRow>
+      {setFeatureValuePositivityThreshold ? (
+        <TableRow key="transform-coefficient-option-row">
+          <TableCell className={classes.labelCell}>
+            Positivity Threshold
+          </TableCell>
+          <TableCell className={classes.inputCell}>
+            <Slider
+              classes={{ root: classes.slider, valueLabel: classes.sliderValueLabel }}
+              value={featureValuePositivityThreshold}
+              onChange={handlePositivityThresholdChange}
+              aria-labelledby="pos-threshold-slider"
+              valueLabelDisplay="auto"
+              step={1.0}
+              min={0.0}
+              max={100.0}
+            />
+          </TableCell>
+        </TableRow>
+      ) : null}
     </OptionsContainer>
   );
 }