@vitessce/statistical-plots 3.4.6 → 3.4.7

package/dist/raw-0a76dec9.js

@@ -0,0 +1,12 @@
+import { B as BaseDecoder } from "./index-a1925e78.js";
+import "react";
+import "@vitessce/vit-s";
+import "react-dom";
+class RawDecoder extends BaseDecoder {
+  decodeBlock(buffer) {
+    return buffer;
+  }
+}
+export {
+  RawDecoder as default
+};

package/dist/webimage-fbdf3bdf.js

@@ -0,0 +1,32 @@
+import { B as BaseDecoder } from "./index-a1925e78.js";
+import "react";
+import "@vitessce/vit-s";
+import "react-dom";
+class WebImageDecoder extends BaseDecoder {
+  constructor() {
+    super();
+    if (typeof createImageBitmap === "undefined") {
+      throw new Error("Cannot decode WebImage as `createImageBitmap` is not available");
+    } else if (typeof document === "undefined" && typeof OffscreenCanvas === "undefined") {
+      throw new Error("Cannot decode WebImage as neither `document` nor `OffscreenCanvas` is not available");
+    }
+  }
+  async decode(fileDirectory, buffer) {
+    const blob = new Blob([buffer]);
+    const imageBitmap = await createImageBitmap(blob);
+    let canvas;
+    if (typeof document !== "undefined") {
+      canvas = document.createElement("canvas");
+      canvas.width = imageBitmap.width;
+      canvas.height = imageBitmap.height;
+    } else {
+      canvas = new OffscreenCanvas(imageBitmap.width, imageBitmap.height);
+    }
+    const ctx = canvas.getContext("2d");
+    ctx.drawImage(imageBitmap, 0, 0);
+    return ctx.getImageData(0, 0, imageBitmap.width, imageBitmap.height).data.buffer;
+  }
+}
+export {
+  WebImageDecoder as default
+};

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

@@ -1 +1 @@
-{"version":3,"file":"CellSetExpressionPlot.d.ts","sourceRoot":"","sources":["../src/CellSetExpressionPlot.js"],"names":[],"mappings":"AA8DA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH;IAjB2B,IAAI,EAApB,MAAM,EAAE;IAEM,SAAS,EAAvB,MAAM;IACU,MAAM,EAAtB,MAAM,EAAE;IAEM,KAAK,EAAnB,MAAM;IACQ,KAAK,EAAnB,MAAM;IACQ,MAAM,EAApB,MAAM;IACQ,WAAW,EAAzB,MAAM;IAGQ,YAAY,EAA1B,MAAM;IAGa,yBAAyB,EAA5C,MAAM,GAAC,IAAI;gBAqOrB"}
+{"version":3,"file":"CellSetExpressionPlot.d.ts","sourceRoot":"","sources":["../src/CellSetExpressionPlot.js"],"names":[],"mappings":"AAaA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,qDAjBG;IAAwB,IAAI,EAApB,MAAM,EAAE;IAEM,SAAS,EAAvB,MAAM;IACU,MAAM,EAAtB,MAAM,EAAE;IAEM,KAAK,EAAnB,MAAM;IACQ,KAAK,EAAnB,MAAM;IACQ,MAAM,EAApB,MAAM;IACQ,WAAW,EAAzB,MAAM;IAGQ,YAAY,EAA1B,MAAM;IAGa,yBAAyB,EAA5C,MAAM,GAAC,IAAI;CAErB,eAuXA"}

package/dist-tsc/CellSetExpressionPlot.js

@@ -2,51 +2,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
 /* 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';
 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.
@@ -69,14 +32,21 @@ function summarize(iterable, keepZeros) {
  * for the feature value transformation function.
  */
 export default function CellSetExpressionPlot(props) {
-    const { yMin: yMinProp, yUnits, jitter, colors, data, theme, width, height, marginTop = 5, marginRight = 5, marginLeft = 50, marginBottom, obsType, featureType, featureValueType, featureValueTransformName, } = props;
+    const { yMin: yMinProp, yUnits, jitter, cellSetSelection, sampleSetSelection, sampleSetColor, colors, data, theme, width, height, marginTop = 5, marginRight = 5, marginLeft = 50, marginBottom, obsType, featureType, featureValueType, featureValueTransformName, } = 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;
         const transformPrefix = (featureValueTransformName && featureValueTransformName !== 'None')
@@ -92,6 +62,7 @@ export default function CellSetExpressionPlot(props) {
         const autoMarginBottom = marginBottom
             || 30 + Math.sqrt(maxCharactersForLabel / 2) * 30;
         const rectColor = (theme === 'dark' ? 'white' : 'black');
+        const fgColor = (theme === 'dark' ? 'white' : 'black');
         const svg = select(domElement);
         svg.selectAll('g').remove();
         svg
@@ -101,36 +72,41 @@ export default function CellSetExpressionPlot(props) {
             .append('g')
             .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])
             .range([0, xGroup.bandwidth()]);
@@ -139,55 +115,136 @@ export default function CellSetExpressionPlot(props) {
             .x1(d => x(d.length))
             .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')
             .data(groupedSummaries)
             .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);
+                    }
+                });
             });
         }
         // Y-axis ticks
@@ -202,7 +259,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')
@@ -218,7 +275,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
             .append('text')
@@ -227,11 +284,55 @@ 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 (_jsx("svg", { ref: svgRef, style: {
             top: 0,

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

@@ -1 +1 @@
-{"version":3,"file":"CellSetExpressionPlotOptions.d.ts","sourceRoot":"","sources":["../src/CellSetExpressionPlotOptions.js"],"names":[],"mappings":"AAKA,8EAiFC"}
+{"version":3,"file":"CellSetExpressionPlotOptions.d.ts","sourceRoot":"","sources":["../src/CellSetExpressionPlotOptions.js"],"names":[],"mappings":"AAMA,8EAwIC"}

package/dist-tsc/CellSetExpressionPlotOptions.js

@@ -1,15 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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 { featureValueTransform, setFeatureValueTransform, featureValueTransformCoefficient, setFeatureValueTransformCoefficient, transformOptions, } = props;
+    const { featureValueTransform, setFeatureValueTransform, 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) => {
@@ -24,9 +31,12 @@ export default function CellSetExpressionPlotOptions(props) {
             }
         }
     };
-    return (_jsxs(OptionsContainer, { children: [_jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsx("label", { htmlFor: `cellset-expression-transform-select-${cellSetExpressionPlotOptionsId}`, children: "Transform" }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsx(OptionSelect, { className: classes.select, value: featureValueTransform === null ? '' : featureValueTransform, onChange: handleTransformChange, inputProps: {
+    return (_jsxs(OptionsContainer, { children: [setFeatureValueColormap ? (_jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsx("label", { htmlFor: `cellset-expression-feature-value-colormap-${cellSetExpressionPlotOptionsId}`, children: "Feature Value Colormap" }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsx(OptionSelect, { className: classes.select, value: featureValueColormap, onChange: handleFeatureValueColormapChange, inputProps: {
+                                'aria-label': 'Select feature value colormap',
+                                id: `cellset-expression-feature-value-colormap-${cellSetExpressionPlotOptionsId}`,
+                            }, children: GLSL_COLORMAPS.map(cmap => (_jsx("option", { value: cmap, children: cmap }, cmap))) }) })] })) : null, _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsx("label", { htmlFor: `cellset-expression-transform-select-${cellSetExpressionPlotOptionsId}`, children: "Transform" }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsx(OptionSelect, { className: classes.select, value: featureValueTransform === null ? '' : featureValueTransform, onChange: handleTransformChange, inputProps: {
                                 id: `cellset-expression-transform-select-${cellSetExpressionPlotOptionsId}`,
                             }, children: transformOptions.map(opt => (_jsx("option", { value: opt.value === null ? '' : opt.value, children: opt.name }, opt.name))) }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsx("label", { htmlFor: `cellset-expression-transform-coeff-${cellSetExpressionPlotOptionsId}`, children: "Transform Coefficient" }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsx(TextField, { label: "Transform Coefficient", type: "number", onChange: handleTransformCoefficientChange, value: featureValueTransformCoefficient, InputLabelProps: {
                                 shrink: true,
-                            }, id: `cellset-expression-transform-coeff-${cellSetExpressionPlotOptionsId}` }) })] })] }));
+                            }, id: `cellset-expression-transform-coeff-${cellSetExpressionPlotOptionsId}` }) })] }), setFeatureValuePositivityThreshold ? (_jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, children: "Positivity Threshold" }), _jsx(TableCell, { className: classes.inputCell, children: _jsx(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 }) })] }, "transform-coefficient-option-row")) : null] }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"CellSetExpressionPlotSubscriber.d.ts","sourceRoot":"","sources":["../src/CellSetExpressionPlotSubscriber.js"],"names":[],"mappings":"AAmGA;;;;;;;;;GASG;AACH;IAL2B,mBAAmB;IACrB,kBAAkB,EAAhC,MAAM;IAEQ,KAAK,EAAnB,MAAM;gBAkJhB"}
+{"version":3,"file":"CellSetExpressionPlotSubscriber.d.ts","sourceRoot":"","sources":["../src/CellSetExpressionPlotSubscriber.js"],"names":[],"mappings":"AAkGA;;;;;;;;;GASG;AACH,uDALG;IAAwB,mBAAmB;IACrB,kBAAkB,EAAhC,MAAM;IAEQ,KAAK,EAAnB,MAAM;CAChB,eAyJA"}

package/dist-tsc/CellSetExpressionPlotSubscriber.js

@@ -2,11 +2,12 @@ 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, useSampleSetsData, useSampleEdgesData, } 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 { VALUE_TRANSFORM_OPTIONS, capitalize } from '@vitessce/utils';
+import { treeToSetSizesBySetNames, mergeObsSets, stratifyExpressionData, aggregateStratifiedExpressionData, } from '@vitessce/sets-utils';
 import CellSetExpressionPlotOptions from './CellSetExpressionPlotOptions.js';
 import CellSetExpressionPlot from './CellSetExpressionPlot.js';
 import { useStyles } from './styles.js';
+import { summarizeStratifiedExpressionData, histogramStratifiedExpressionData, } from './expr-hooks.js';
 /**
  * Get expression data for the cells
  * in the selected cell sets.
@@ -25,39 +26,24 @@ import { useStyles } from './styles.js';
  * 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`.
  */
-function useExpressionByCellSet(expressionData, obsIndex, cellSets, additionalCellSets, geneSelection, cellSetSelection, cellSetColor, featureValueTransform, featureValueTransformCoefficient, theme) {
+function useExpressionByCellSet(sampleEdges, sampleSets, sampleSetSelection, expressionData, obsIndex, cellSets, additionalCellSets, geneSelection, cellSetSelection, cellSetColor, featureValueTransform, featureValueTransformCoefficient, theme, yMinProp) {
     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 transformFunction = getValueTransformFunction(featureValueTransform, featureValueTransformCoefficient);
-                const transformedValue = transformFunction(value);
-                exprMax = Math.max(transformedValue, exprMax);
-                return { value: transformedValue, gene: firstGeneSelected, set: cell.name };
-            });
-            return [exprValues, exprMax];
+        const [stratifiedData, exprMax] = stratifyExpressionData(sampleEdges, sampleSets, sampleSetSelection, expressionData, obsIndex, mergedCellSets, geneSelection, cellSetSelection, cellSetColor, featureValueTransform, featureValueTransformCoefficient);
+        if (stratifiedData) {
+            const aggregateData = aggregateStratifiedExpressionData(stratifiedData, geneSelection);
+            const summarizedData = summarizeStratifiedExpressionData(aggregateData, true);
+            const histogramData = histogramStratifiedExpressionData(summarizedData, 16, yMinProp);
+            return [histogramData, exprMax];
         }
         return [null, null];
     }, [expressionData, obsIndex, geneSelection, theme,
         mergedCellSets, cellSetSelection, cellSetColor,
         featureValueTransform, featureValueTransformCoefficient,
+        yMinProp, sampleEdges, sampleSets, sampleSetSelection,
     ]);
     // From the cell sets hierarchy and the list of selected cell sets,
     // generate the array of set sizes data points for the bar plot.
@@ -81,7 +67,7 @@ export function CellSetExpressionPlotSubscriber(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, sampleType, }, { setFeatureValueTransform, setFeatureValueTransformCoefficient, }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType.OBS_SET_FEATURE_VALUE_DISTRIBUTION], coordinationScopes);
+    const [{ dataset, obsType, featureType, featureValueType, featureSelection: geneSelection, featureValueTransform, featureValueTransformCoefficient, obsSetSelection: cellSetSelection, obsSetColor: cellSetColor, additionalObsSets: additionalCellSets, sampleType, sampleSetSelection, sampleSetColor, }, { setFeatureValueTransform, setFeatureValueTransformCoefficient, setSampleSetColor, }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType.OBS_SET_FEATURE_VALUE_DISTRIBUTION], coordinationScopes);
     const [width, height, containerRef] = useGridItemSize();
     const transformOptions = VALUE_TRANSFORM_OPTIONS;
     // Get data from loaders using the data hooks.
@@ -91,9 +77,7 @@ export function CellSetExpressionPlotSubscriber(props) {
     const [{ featureLabelsMap }, featureLabelsStatus, featureLabelsUrls] = useFeatureLabelsData(loaders, dataset, false, {}, {}, { featureType });
     const [{ obsIndex }, matrixIndicesStatus, matrixIndicesUrls] = useObsFeatureMatrixIndices(loaders, dataset, false, { obsType, featureType, featureValueType });
     const [{ obsSets: cellSets }, obsSetsStatus, obsSetsUrls] = useObsSetsData(loaders, dataset, true, {}, {}, { obsType });
-    // eslint-disable-next-line no-unused-vars
-    const [{ sampleSets }, sampleSetsStatus, sampleSetsUrls] = useSampleSetsData(loaders, dataset, false, {}, {}, { sampleType });
-    // eslint-disable-next-line no-unused-vars
+    const [{ sampleSets }, sampleSetsStatus, sampleSetsUrls] = useSampleSetsData(loaders, dataset, false, { setSampleSetColor }, { sampleSetColor }, { sampleType });
     const [{ sampleEdges }, sampleEdgesStatus, sampleEdgesUrls] = useSampleEdgesData(loaders, dataset, false, {}, {}, { obsType, sampleType });
     const isReady = useReady([
         featureSelectionStatus,
@@ -110,10 +94,10 @@ export function CellSetExpressionPlotSubscriber(props) {
         sampleSetsUrls,
         sampleEdgesUrls,
     ]);
-    const [expressionArr, setArr] = useExpressionByCellSet(expressionData, obsIndex, cellSets, additionalCellSets, geneSelection, cellSetSelection, cellSetColor, featureValueTransform, featureValueTransformCoefficient, theme);
+    const [histogramData, setArr, exprMax] = useExpressionByCellSet(sampleEdges, sampleSets, sampleSetSelection, expressionData, obsIndex, cellSets, additionalCellSets, geneSelection, cellSetSelection, cellSetColor, featureValueTransform, featureValueTransformCoefficient, theme, yMin);
     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})` : '')}`, closeButtonVisible: closeButtonVisible, downloadButtonVisible: downloadButtonVisible, 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, { yMin: yMin, yUnits: yUnits, jitter: jitter, colors: setArr, data: expressionArr, theme: theme, width: width, height: height, obsType: obsType, featureType: featureType, featureValueType: featureValueType, featureValueTransformName: selectedTransformName })) : (_jsxs("span", { children: ["Select a ", featureType, "."] })) }) }));
+    return (_jsx(TitleInfo, { title: `Expression by ${capitalize(obsType)} Set${(firstGeneSelected ? ` (${firstGeneSelected})` : '')}`, closeButtonVisible: closeButtonVisible, downloadButtonVisible: downloadButtonVisible, 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: histogramData ? (_jsx(CellSetExpressionPlot, { yMin: yMin, yUnits: yUnits, jitter: jitter, cellSetSelection: cellSetSelection, sampleSetSelection: sampleSetSelection, sampleSetColor: sampleSetColor, colors: setArr, data: histogramData, exprMax: exprMax, theme: theme, width: width, height: height, obsType: obsType, featureType: featureType, featureValueType: featureValueType, featureValueTransformName: selectedTransformName })) : (_jsxs("span", { children: ["Select a ", featureType, "."] })) }) }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"CellSetSizesPlot.d.ts","sourceRoot":"","sources":["../src/CellSetSizesPlot.js"],"names":[],"mappings":"AAMA;;;;;;;;;;;;;;;;;;GAkBG;AACH;IAf2B,IAAI,EAApB,MAAM,EAAE;IAEM,KAAK,EAAnB,MAAM;IACQ,KAAK,EAAnB,MAAM;IACQ,MAAM,EAApB,MAAM;IACQ,WAAW,EAAzB,MAAM;IAGQ,YAAY,EAA1B,MAAM;IAGQ,SAAS,EAAvB,MAAM;gBAuJhB"}
+{"version":3,"file":"CellSetSizesPlot.d.ts","sourceRoot":"","sources":["../src/CellSetSizesPlot.js"],"names":[],"mappings":"AAMA;;;;;;;;;;;;;;;;;;GAkBG;AACH,gDAfG;IAAwB,IAAI,EAApB,MAAM,EAAE;IAEM,KAAK,EAAnB,MAAM;IACQ,KAAK,EAAnB,MAAM;IACQ,MAAM,EAApB,MAAM;IACQ,WAAW,EAAzB,MAAM;IAGQ,YAAY,EAA1B,MAAM;IAGQ,SAAS,EAAvB,MAAM;CAGhB,eAoJA"}

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

@@ -1 +1 @@
-{"version":3,"file":"CellSetSizesPlotSubscriber.d.ts","sourceRoot":"","sources":["../src/CellSetSizesPlotSubscriber.js"],"names":[],"mappings":"AAgBA;;;;;;;;;;GAUG;AACH;IAN2B,mBAAmB;IACnB,OAAO;IAET,KAAK,EAAnB,MAAM;IACQ,KAAK,EAAnB,MAAM;gBA+HhB"}
+{"version":3,"file":"CellSetSizesPlotSubscriber.d.ts","sourceRoot":"","sources":["../src/CellSetSizesPlotSubscriber.js"],"names":[],"mappings":"AAgBA;;;;;;;;;;GAUG;AACH,kDANG;IAAwB,mBAAmB;IACnB,OAAO;IAET,KAAK,EAAnB,MAAM;IACQ,KAAK,EAAnB,MAAM;CAChB,eA8HA"}