@vitessce/statistical-plots 3.3.3 → 3.3.5

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

@@ -1 +1 @@
-{"version":3,"file":"CellSetExpressionPlot.d.ts","sourceRoot":"","sources":["../src/CellSetExpressionPlot.js"],"names":[],"mappings":"AAMA;;;;;;;;;;;;;;;;;;;;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;gBA6PrB"}
+{"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"}

package/dist-tsc/CellSetExpressionPlot.js

@@ -1,9 +1,52 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import { clamp } from 'lodash-es';
-import { VegaPlot, VEGA_THEMES, DATASET_NAME } from '@vitessce/vega';
+/* eslint-disable indent */
+/* eslint-disable camelcase */
+import React, { useMemo, useEffect, useRef } from 'react';
+import { scaleLinear } 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.
@@ -26,223 +69,175 @@ import { capitalize } from '@vitessce/utils';
  * 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;
+    const { yMin: yMinProp, yUnits, jitter, 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 = data.reduce((acc, val) => {
+    const maxCharactersForLabel = useMemo(() => data.reduce((acc, val) => {
         // eslint-disable-next-line no-param-reassign
-        acc = acc === undefined || val.set.length > acc ? val.set.length : acc;
+        acc = acc === undefined || val[GROUP_KEY].length > acc ? val[GROUP_KEY].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 (_jsx(VegaPlot, { data: data, spec: spec }));
+    }, 0), [data]);
+    useEffect(() => {
+        const domElement = svgRef.current;
+        const transformPrefix = (featureValueTransformName && featureValueTransformName !== 'None')
+            ? `${featureValueTransformName}-Transformed `
+            : '';
+        const unitSuffix = yUnits ? ` (${yUnits})` : '';
+        const yTitle = `${transformPrefix}${capitalize(featureValueType)}${unitSuffix}`;
+        const xTitle = `${capitalize(obsType)} Set`;
+        // 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;
+        const rectColor = (theme === 'dark' ? 'white' : 'black');
+        const svg = select(domElement);
+        svg.selectAll('g').remove();
+        svg
+            .attr('width', width)
+            .attr('height', height);
+        const g = svg
+            .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)),
+        };
+        // 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 innerWidth = width - marginLeft;
+        const innerHeight = height - autoMarginBottom;
+        const xGroup = scaleBand()
+            .range([marginLeft, width - marginRight])
+            .domain(groupNames)
+            .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)));
+        const x = scaleLinear()
+            .domain([-groupBinsMax, groupBinsMax])
+            .range([0, xGroup.bandwidth()]);
+        const area = d3_area()
+            .x0(d => (jitter ? x(0) : x(-d.length)))
+            .x1(d => x(d.length))
+            .y(d => y(d.x0))
+            .curve(curveBasis);
+        // 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));
+        // 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);
+        // 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);
+            });
+        }
+        // Y-axis ticks
+        g
+            .append('g')
+            .attr('transform', `translate(${marginLeft},0)`)
+            .call(axisLeft(y))
+            .selectAll('text')
+            .style('font-size', '11px');
+        // X-axis ticks
+        g
+            .append('g')
+            .attr('transform', `translate(0,${innerHeight})`)
+            .style('font-size', '14px')
+            .call(axisBottom(xGroup))
+            .selectAll('text')
+            .style('font-size', '11px')
+            .attr('dx', '-6px')
+            .attr('dy', '6px')
+            .attr('transform', 'rotate(-45)')
+            .style('text-anchor', 'end');
+        // Y-axis title
+        g
+            .append('text')
+            .attr('text-anchor', 'middle')
+            .attr('x', -innerHeight / 2)
+            .attr('y', 15)
+            .attr('transform', 'rotate(-90)')
+            .text(yTitle)
+            .style('font-size', '12px')
+            .style('fill', 'white');
+        // X-axis title
+        g
+            .append('text')
+            .attr('text-anchor', 'middle')
+            .attr('x', marginLeft + innerWidth / 2)
+            .attr('y', height - 10)
+            .text(xTitle)
+            .style('font-size', '12px')
+            .style('fill', 'white');
+    }, [width, height, data, marginLeft, marginBottom, colors,
+        jitter, theme, yMinProp, marginTop, marginRight, featureType,
+        featureValueType, featureValueTransformName, yUnits, obsType,
+        maxCharactersForLabel,
+    ]);
+    return (_jsx("svg", { ref: svgRef, style: {
+            top: 0,
+            left: 0,
+            width: `${width}px`,
+            height: `${height}px`,
+            position: 'relative',
+        } }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"CellSetExpressionPlotSubscriber.d.ts","sourceRoot":"","sources":["../src/CellSetExpressionPlotSubscriber.js"],"names":[],"mappings":"AAiGA;;;;;;;;;GASG;AACH;IAL2B,mBAAmB;IACrB,kBAAkB,EAAhC,MAAM;IAEQ,KAAK,EAAnB,MAAM;gBA0HhB"}
+{"version":3,"file":"CellSetExpressionPlotSubscriber.d.ts","sourceRoot":"","sources":["../src/CellSetExpressionPlotSubscriber.js"],"names":[],"mappings":"AAiGA;;;;;;;;;GASG;AACH;IAL2B,mBAAmB;IACrB,kBAAkB,EAAhC,MAAM;IAEQ,KAAK,EAAnB,MAAM;gBAgIhB"}

package/dist-tsc/CellSetExpressionPlotSubscriber.js

@@ -77,7 +77,7 @@ function useExpressionByCellSet(expressionData, obsIndex, cellSets, additionalCe
  * @param {string} props.theme The name of the current Vitessce theme.
  */
 export function CellSetExpressionPlotSubscriber(props) {
-    const { coordinationScopes, closeButtonVisible, downloadButtonVisible, removeGridComponent, theme, } = props;
+    const { coordinationScopes, closeButtonVisible, downloadButtonVisible, removeGridComponent, theme, jitter = false, yMin = null, yUnits = null, } = props;
     const classes = useStyles();
     const loaders = useLoaders();
     // Get "props" from the coordination space.
@@ -102,10 +102,10 @@ export function CellSetExpressionPlotSubscriber(props) {
         matrixIndicesUrls,
         obsSetsUrls,
     ]);
-    const [expressionArr, setArr, expressionMax] = useExpressionByCellSet(expressionData, obsIndex, cellSets, additionalCellSets, geneSelection, cellSetSelection, cellSetColor, featureValueTransform, featureValueTransformCoefficient, theme);
+    const [expressionArr, setArr] = useExpressionByCellSet(expressionData, obsIndex, cellSets, additionalCellSets, geneSelection, cellSetSelection, cellSetColor, featureValueTransform, featureValueTransformCoefficient, theme);
     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, { domainMax: expressionMax, colors: setArr, data: expressionArr, theme: theme, width: width, height: height, obsType: obsType, 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: 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, "."] })) }) }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"ExpressionHistogram.d.ts","sourceRoot":"","sources":["../src/ExpressionHistogram.js"],"names":[],"mappings":"AAIA;;;;;GAKG;AAEH;;;;;;;;;;;;;;;;;GAiBG;AACH;IAd2B,aAAa,EAA7B,MAAM,EAAE;IAEQ,IAAI,EAApB,MAAM,EAAE;IAEM,KAAK,EAAnB,MAAM;IACQ,KAAK,EAAnB,MAAM;IACQ,MAAM,EAApB,MAAM;IACQ,WAAW,EAAzB,MAAM;IAGQ,YAAY,EAA1B,MAAM;gBA8FhB"}
+{"version":3,"file":"ExpressionHistogram.d.ts","sourceRoot":"","sources":["../src/ExpressionHistogram.js"],"names":[],"mappings":"AAKA;;;;;GAKG;AAEH;;;;;;;;;;;;;;;;;GAiBG;AACH;IAd2B,aAAa,EAA7B,MAAM,EAAE;IAEQ,IAAI,EAApB,MAAM,EAAE;IAEM,KAAK,EAAnB,MAAM;IACQ,KAAK,EAAnB,MAAM;IACQ,MAAM,EAApB,MAAM;IACQ,WAAW,EAAzB,MAAM;IAGQ,YAAY,EAA1B,MAAM;gBAqGhB"}

package/dist-tsc/ExpressionHistogram.js

@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useState, useEffect, useCallback } from 'react';
 import { clamp, debounce } from 'lodash-es';
 import { VegaPlot, VEGA_THEMES } from '@vitessce/vega';
+import { capitalize, pluralize } from '@vitessce/utils';
 /**
  * We use debounce, so that onSelect is called only after the user has finished the selection.
  * Due to vega-lite limitations, we cannot use the vega-lite signals to implement this.
@@ -27,11 +28,13 @@ 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, onSelect, } = props;
+    const { geneSelection, obsType, featureType, featureValueType, data, theme, width, height, marginRight = 90, marginBottom = 50, onSelect, } = props;
     const [selectedRanges, setSelectedRanges] = useState([]);
+    const isExpression = (featureType === 'gene' && featureValueType === 'expression');
+    // eslint-disable-next-line no-nested-ternary
     const xTitle = geneSelection && geneSelection.length >= 1
-        ? 'Normalized Expression Value'
-        : 'Total Normalized Transcript Count';
+        ? (isExpression ? `Expression Value (${geneSelection[0]})` : `${geneSelection[0]}`)
+        : (isExpression ? 'Total Transcript Count' : 'Sum of Feature Values');
     const spec = {
         data: { values: data },
         mark: 'bar',
@@ -45,7 +48,7 @@ export default function ExpressionHistogram(props) {
             y: {
                 type: 'quantitative',
                 aggregate: 'count',
-                title: 'Number of Cells',
+                title: `Number of ${capitalize(pluralize(obsType, 2))}`,
             },
             color: { value: 'gray' },
             opacity: {

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

@@ -1 +1 @@
-{"version":3,"file":"ExpressionHistogramSubscriber.d.ts","sourceRoot":"","sources":["../src/ExpressionHistogramSubscriber.js"],"names":[],"mappings":"AAcA;;;;;;;;;GASG;AACH;IAL2B,mBAAmB;IACrB,kBAAkB,EAAhC,MAAM;IAEQ,KAAK,EAAnB,MAAM;gBAyHhB"}
+{"version":3,"file":"ExpressionHistogramSubscriber.d.ts","sourceRoot":"","sources":["../src/ExpressionHistogramSubscriber.js"],"names":[],"mappings":"AAcA;;;;;;;;;GASG;AACH;IAL2B,mBAAmB;IACrB,kBAAkB,EAAhC,MAAM;IAEQ,KAAK,EAAnB,MAAM;gBA2HhB"}

package/dist-tsc/ExpressionHistogramSubscriber.js

@@ -44,8 +44,7 @@ export function ExpressionHistogramSubscriber(props) {
             return obsIndex.map((cellId, cellIndex) => {
                 const value = expressionData[0][cellIndex];
                 // Create new cellColors map based on the selected gene.
-                const normValue = value * 100 / 255;
-                const newItem = { value: normValue, gene: firstGeneSelected, cellId };
+                const newItem = { value, gene: firstGeneSelected, cellId };
                 return newItem;
             });
         }
@@ -54,7 +53,7 @@ export function ExpressionHistogramSubscriber(props) {
             return obsIndex.map((cellId, cellIndex) => {
                 const values = obsFeatureMatrix.data
                     .subarray(cellIndex * numGenes, (cellIndex + 1) * numGenes);
-                const sumValue = sum(values) * 100 / 255;
+                const sumValue = sum(values);
                 const newItem = { value: sumValue, gene: null, cellId };
                 return newItem;
             });
@@ -68,5 +67,5 @@ export function ExpressionHistogramSubscriber(props) {
     }, [additionalCellSets, cellSetColor, data, setAdditionalCellSets,
         setCellColorEncoding, setCellSetColor, setCellSetSelection, firstGeneSelected,
     ]);
-    return (_jsx(TitleInfo, { title: `Expression Histogram${(firstGeneSelected ? ` (${firstGeneSelected})` : '')}`, closeButtonVisible: closeButtonVisible, downloadButtonVisible: downloadButtonVisible, 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 }) }) }));
+    return (_jsx(TitleInfo, { title: `Histogram${(firstGeneSelected ? ` (${firstGeneSelected})` : '')}`, closeButtonVisible: closeButtonVisible, downloadButtonVisible: downloadButtonVisible, removeGridComponent: removeGridComponent, urls: urls, theme: theme, isReady: isReady, children: _jsx("div", { ref: containerRef, className: classes.vegaContainer, children: _jsx(ExpressionHistogram, { geneSelection: geneSelection, obsType: obsType, featureType: featureType, featureValueType: featureValueType, onSelect: onSelect, data: data, theme: theme, width: width, height: height }) }) }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitessce/statistical-plots",
-  "version": "3.3.3",
+  "version": "3.3.5",
   "author": "Gehlenborg Lab",
   "homepage": "http://vitessce.io",
   "repository": {
@@ -18,13 +18,18 @@
   "dependencies": {
     "@material-ui/core": "~4.12.3",
     "d3-array": "^2.4.0",
+    "d3-scale": "^4.0.0",
+    "d3-shape": "^3.2.0",
+    "d3-axis": "^3.0.0",
+    "d3-selection": "^3.0.0",
+    "vega-scale": "^6.0.0",
     "lodash-es": "^4.17.21",
     "react-aria": "^3.28.0",
-    "@vitessce/constants-internal": "3.3.3",
-    "@vitessce/sets-utils": "3.3.3",
-    "@vitessce/utils": "3.3.3",
-    "@vitessce/vega": "3.3.3",
-    "@vitessce/vit-s": "3.3.3"
+    "@vitessce/sets-utils": "3.3.5",
+    "@vitessce/constants-internal": "3.3.5",
+    "@vitessce/utils": "3.3.5",
+    "@vitessce/vega": "3.3.5",
+    "@vitessce/vit-s": "3.3.5"
   },
   "devDependencies": {
     "react": "^18.0.0",