@vitessce/statistical-plots 3.5.9 → 3.5.10

package/dist/index.js

@@ -1,19 +1,20 @@
-import { b, e, C, d, a, h, D, f, E, F, c, T, V } from "./index-dc733355.js";
+import { b, f, C, e, a, i, D, h, E, F, c, d, T, V } from "./index-b8398176.js";
 import "react";
 import "@vitessce/vit-s";
 import "react-dom";
 export {
   b as CellSetCompositionBarPlotSubscriber,
-  e as CellSetExpressionPlot,
+  f as CellSetExpressionPlot,
   C as CellSetExpressionPlotSubscriber,
-  d as CellSetSizesPlot,
+  e as CellSetSizesPlot,
   a as CellSetSizesPlotSubscriber,
-  h as DotPlot,
+  i as DotPlot,
   D as DotPlotSubscriber,
-  f as ExpressionHistogram,
+  h as ExpressionHistogram,
   E as ExpressionHistogramSubscriber,
   F as FeatureBarPlotSubscriber,
   c as FeatureSetEnrichmentBarPlotSubscriber,
+  d as FeatureStatsTableSubscriber,
   T as TreemapSubscriber,
   V as VolcanoPlotSubscriber
 };

package/dist/{jpeg-a83077be.js → jpeg-81bd1053.js}

@@ -1,4 +1,4 @@
-import { B as BaseDecoder } from "./index-dc733355.js";
+import { B as BaseDecoder } from "./index-b8398176.js";
 import "react";
 import "@vitessce/vit-s";
 import "react-dom";

package/dist/{lerc-1edd075a.js → lerc-b15c3a4c.js}

@@ -1,5 +1,5 @@
 import { i as inflate_1 } from "./pako.esm-68f84e2a.js";
-import { g as getDefaultExportFromCjs, B as BaseDecoder } from "./index-dc733355.js";
+import { g as getDefaultExportFromCjs, B as BaseDecoder } from "./index-b8398176.js";
 import "react";
 import "@vitessce/vit-s";
 import "react-dom";

package/dist/{lzw-9572eac3.js → lzw-503cb795.js}

@@ -1,4 +1,4 @@
-import { B as BaseDecoder } from "./index-dc733355.js";
+import { B as BaseDecoder } from "./index-b8398176.js";
 import "react";
 import "@vitessce/vit-s";
 import "react-dom";

package/dist/{packbits-cce11fbc.js → packbits-40cbad40.js}

@@ -1,4 +1,4 @@
-import { B as BaseDecoder } from "./index-dc733355.js";
+import { B as BaseDecoder } from "./index-b8398176.js";
 import "react";
 import "@vitessce/vit-s";
 import "react-dom";

package/dist/{raw-f7587aff.js → raw-9b8d9daf.js}

@@ -1,4 +1,4 @@
-import { B as BaseDecoder } from "./index-dc733355.js";
+import { B as BaseDecoder } from "./index-b8398176.js";
 import "react";
 import "@vitessce/vit-s";
 import "react-dom";

package/dist/{webimage-8d38cd8b.js → webimage-bbc59b4a.js}

@@ -1,4 +1,4 @@
-import { B as BaseDecoder } from "./index-dc733355.js";
+import { B as BaseDecoder } from "./index-b8398176.js";
 import "react";
 import "@vitessce/vit-s";
 import "react-dom";

package/dist-tsc/CellSetCompositionBarPlot.js

@@ -69,12 +69,12 @@ export default function CellSetCompositionBarPlot(props) {
         obsSetColorScale, sampleSetColorScale,
     ]);
     // Get an array of keys for sorting purposes.
-    const keys = computedData.map(d => d.keyName);
+    const keys = computedData?.map(d => d.keyName);
     const colorScale = {
         // Manually set the color scale so that Vega-Lite does
         // not choose the colors automatically.
-        domain: computedData.map(d => d.key),
-        range: computedData.map(d => d.color),
+        domain: computedData?.map(d => d.key),
+        range: computedData?.map(d => d.color),
     };
     const captializedObsType = capitalize(obsType);
     const opacityScale = {

package/dist-tsc/CellSetCompositionBarPlotSubscriber.js

@@ -36,5 +36,5 @@ export function CellSetCompositionBarPlotSubscriber(props) {
     // TODO: support the following options
     // - Use logFoldChange vs. intercept+effect for the bar y-value.
     // - Boolean flag to allow hiding non-significant bars.
-    return (_jsx(TitleInfo, { title: `${capitalize(obsType)} Set Composition Analysis Plot`, removeGridComponent: removeGridComponent, theme: theme, isReady: isReady, helpText: helpText, children: _jsx("div", { ref: containerRef, className: classes.vegaContainer, children: obsSetStats ? (_jsx(CellSetCompositionBarPlot, { theme: theme, width: width, height: height, obsType: obsType, obsSetsColumnNameMapping: obsSetsColumnNameMapping, obsSetsColumnNameMappingReversed: obsSetsColumnNameMappingReversed, sampleSetsColumnNameMapping: sampleSetsColumnNameMapping, sampleSetsColumnNameMappingReversed: sampleSetsColumnNameMappingReversed, sampleSetSelection: sampleSetSelection, obsSetSelection: obsSetSelection, obsSetColor: obsSetColor, sampleSetColor: sampleSetColor, data: obsSetStats, onBarSelect: onBarSelect })) : (_jsxs("span", { children: ["Select at least one ", obsType, " set."] })) }) }));
+    return (_jsx(TitleInfo, { title: `${capitalize(obsType)} Set Composition Analysis Plot`, removeGridComponent: removeGridComponent, theme: theme, isReady: isReady, helpText: helpText, children: _jsx("div", { ref: containerRef, className: classes.vegaContainer, children: obsSetStats ? (_jsx(CellSetCompositionBarPlot, { theme: theme, width: width, height: height, obsType: obsType, obsSetsColumnNameMapping: obsSetsColumnNameMapping, obsSetsColumnNameMappingReversed: obsSetsColumnNameMappingReversed, sampleSetsColumnNameMapping: sampleSetsColumnNameMapping, sampleSetsColumnNameMappingReversed: sampleSetsColumnNameMappingReversed, sampleSetSelection: sampleSetSelection, obsSetSelection: obsSetSelection, obsSetColor: obsSetColor, sampleSetColor: sampleSetColor, data: obsSetStats, onBarSelect: onBarSelect })) : (_jsxs("span", { children: ["Select at least one ", obsType, " set and a pair of ", sampleType, " sets."] })) }) }));
 }

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

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

package/dist-tsc/CellSetExpressionPlot.js

@@ -9,6 +9,7 @@ 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';
+import { getColorScale } from './utils.js';
 const scaleBand = vega_scale('band');
 /**
  * Gene expression histogram displayed as a bar chart,
@@ -32,20 +33,21 @@ const scaleBand = vega_scale('band');
  * for the feature value transformation function.
  */
 export default function CellSetExpressionPlot(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 { yMin: yMinProp, xAxisTitle = null, yUnits, jitter, obsSetSelection, obsSetColor, sampleSetSelection, sampleSetColor, colors, data, theme, width, height, marginTop = 5, marginRight = 5, marginLeft = 50, marginBottom, obsType, featureType, featureValueType, featureValueTransformName, } = props;
     const svgRef = useRef();
+    const obsSetColorScale = useMemo(() => getColorScale(obsSetSelection, obsSetColor, theme), [obsSetSelection, obsSetColor, theme]);
     // Get the max characters in an axis label for autsizing the bottom margin.
     const maxCharactersForLabel = useMemo(() => {
-        if (!cellSetSelection) {
+        if (!obsSetSelection) {
             return 0;
         }
-        const cellSetNames = cellSetSelection.map(d => d.at(-1));
+        const cellSetNames = obsSetSelection.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]);
+    }, [obsSetSelection]);
     const isStratified = (Array.isArray(sampleSetSelection) && sampleSetSelection.length === 2);
     useEffect(() => {
         const domElement = svgRef.current;
@@ -54,7 +56,7 @@ export default function CellSetExpressionPlot(props) {
             : '';
         const unitSuffix = yUnits ? ` (${yUnits})` : '';
         const yTitle = `${transformPrefix}${capitalize(featureValueType)}${unitSuffix}`;
-        const xTitle = `${capitalize(obsType)} Set`;
+        const xTitle = xAxisTitle ?? `${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.
@@ -102,7 +104,7 @@ export default function CellSetExpressionPlot(props) {
         const innerHeight = height - autoMarginBottom;
         const xGroup = scaleBand()
             .range([marginLeft, width - marginRight])
-            .domain(cellSetSelection)
+            .domain(obsSetSelection)
             .padding(0.1);
         // For the y domain, use the yMin prop
         // to support a use case such as 'Aspect Ratio',
@@ -256,17 +258,30 @@ export default function CellSetExpressionPlot(props) {
             .selectAll('text')
             .style('font-size', '11px');
         // X-axis ticks
-        g
+        const xTickG = g
             .append('g')
             .attr('transform', `translate(0,${innerHeight})`)
-            .style('font-size', '14px')
-            .call(axisBottom(xGroup).tickFormat(d => d.at(-1)))
+            .style('font-size', '14px');
+        xTickG.call(axisBottom(xGroup).tickFormat(d => d.at(-1)))
             .selectAll('text')
             .style('font-size', '11px')
             .attr('dx', '-6px')
             .attr('dy', '6px')
             .attr('transform', 'rotate(-45)')
             .style('text-anchor', 'end');
+        if (isStratified) {
+            // Associate each X tick with a cell type color,
+            // since in the stratified case the violins are colored
+            // by sample set.
+            const tickWidth = xGroup.bandwidth();
+            xTickG.selectAll('.tick')
+                .append('rect')
+                .attr('x', -tickWidth / 2)
+                // .attr("y", -innerHeight)
+                .attr('width', tickWidth)
+                .attr('height', 4)
+                .style('fill', d => obsSetColorScale(d));
+        }
         // Y-axis title
         g
             .append('text')
@@ -333,7 +348,8 @@ export default function CellSetExpressionPlot(props) {
     }, [width, height, data, marginLeft, marginBottom, colors,
         jitter, theme, yMinProp, marginTop, marginRight, featureType,
         featureValueType, featureValueTransformName, yUnits, obsType,
-        maxCharactersForLabel, sampleSetSelection,
+        maxCharactersForLabel, sampleSetSelection, isStratified,
+        obsSetColorScale,
     ]);
     return (_jsx("svg", { ref: svgRef, style: {
             top: 0,

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,uDALG;IAAwB,mBAAmB;IACrB,kBAAkB,EAAhC,MAAM;IAEQ,KAAK,EAAnB,MAAM;CAChB,eAoKA"}
+{"version":3,"file":"CellSetExpressionPlotSubscriber.d.ts","sourceRoot":"","sources":["../src/CellSetExpressionPlotSubscriber.js"],"names":[],"mappings":"AAmGA;;;;;;;;;GASG;AACH,uDALG;IAAwB,mBAAmB;IACrB,kBAAkB,EAAhC,MAAM;IAEQ,KAAK,EAAnB,MAAM;CAChB,eA2KA"}

package/dist-tsc/CellSetExpressionPlotSubscriber.js

@@ -63,7 +63,7 @@ function useExpressionByCellSet(sampleEdges, sampleSets, sampleSetSelection, exp
  * @param {string} props.theme The name of the current Vitessce theme.
  */
 export function CellSetExpressionPlotSubscriber(props) {
-    const { coordinationScopes, closeButtonVisible, downloadButtonVisible, removeGridComponent, theme, jitter = false, yMin = null, yUnits = null, helpText = ViewHelpMapping.OBS_SET_FEATURE_VALUE_DISTRIBUTION, } = props;
+    const { coordinationScopes, closeButtonVisible, downloadButtonVisible, removeGridComponent, theme, title, xAxisTitle, jitter = false, yMin = null, yUnits = null, helpText = ViewHelpMapping.OBS_SET_FEATURE_VALUE_DISTRIBUTION, } = props;
     const classes = useStyles();
     const loaders = useLoaders();
     // Get "props" from the coordination space.
@@ -104,5 +104,8 @@ export function CellSetExpressionPlotSubscriber(props) {
             || 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, helpText: helpText, 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, "."] })) }) }));
+    // Use empty string when firstGeneSelected is null
+    const titleSuffix = firstGeneSelected ? ` (${firstGeneSelected})` : '';
+    return (_jsx(TitleInfo, { title: title ? `${title}${titleSuffix}`
+            : `Expression by ${capitalize(obsType)} Set${titleSuffix}`, closeButtonVisible: closeButtonVisible, downloadButtonVisible: downloadButtonVisible, removeGridComponent: removeGridComponent, urls: urls, theme: theme, isReady: isReady, helpText: helpText, 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, obsSetSelection: cellSetSelection, obsSetColor: cellSetColor, sampleSetSelection: sampleSetSelection, sampleSetColor: sampleSetColor, colors: setArr, data: histogramData, exprMax: exprMax, theme: theme, width: width, height: height, obsType: obsType, featureType: featureType, featureValueType: featureValueType, featureValueTransformName: selectedTransformName, xAxisTitle: xAxisTitle })) : (_jsxs("span", { children: ["Select a ", featureType, "."] })) }) }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"DotPlot.d.ts","sourceRoot":"","sources":["../src/DotPlot.js"],"names":[],"mappings":"AAKA;;;;;;;;;;;;;;;;;GAiBG;AACH,uCAdG;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;IAGa,yBAAyB,EAA5C,MAAM,GAAC,IAAI;CAErB,eAwJA"}
+{"version":3,"file":"DotPlot.d.ts","sourceRoot":"","sources":["../src/DotPlot.js"],"names":[],"mappings":"AAOA;;;;;;;;;;;;;;;;;GAiBG;AACH,uCAdG;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;IAGa,yBAAyB,EAA5C,MAAM,GAAC,IAAI;CAErB,eA0NA"}

package/dist-tsc/DotPlot.js

@@ -1,8 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
+import React, { useRef, useEffect, useCallback, useState, useMemo } from 'react';
 import { clamp } from 'lodash-es';
 import { VegaPlot, VEGA_THEMES } from '@vitessce/vega';
 import { capitalize, pluralize as plur } from '@vitessce/utils';
+import { select } from 'd3-selection';
+import { getColorScale } from './utils.js';
 /**
  * Gene expression dot plot,
  * implemented with the VegaPlot component.
@@ -22,7 +24,8 @@ import { capitalize, pluralize as plur } from '@vitessce/utils';
  * for the feature value transformation function.
  */
 export default function DotPlot(props) {
-    const { isStratified, transpose, data: rawData, theme, width, height, marginRight, marginBottom, obsType, keyLength = 36, featureType, featureValueType, featureValueTransformName, featureValueColormap, cellSetSelection, } = props;
+    const { isStratified, transpose, data: rawData, theme, width, height, marginRight, marginBottom, obsType, sampleType, keyLength = 36, featureType, featureValueType, featureValueTransformName, featureValueColormap, obsSetSelection, obsSetColor, } = props;
+    const vegaContainerRef = useRef();
     // Add a property `keyGroup` and `keyFeature` which concatenates the key and the name,
     // which is both unique and can easily be converted
     // back to the name by taking a substring.
@@ -59,11 +62,11 @@ export default function DotPlot(props) {
     const autoMarginForSampleSet = marginRight
         || 30 + Math.sqrt(maxCharactersForSampleSet / 2) * 30;
     const plotWidth = transpose
-        ? clamp(width - autoMarginForFeature - 180, 10, Infinity) / (cellSetSelection?.length || 1)
+        ? clamp(width - autoMarginForFeature - 180, 10, Infinity) / (obsSetSelection?.length || 1)
         : clamp(width - autoMarginForGroup - autoMarginForSampleSet - 200, 10, Infinity);
     const plotHeight = transpose
         ? clamp((height - autoMarginForGroup - autoMarginForSampleSet - 50), 10, Infinity)
-        : clamp((height - autoMarginForFeature - 80), 10, Infinity) / (cellSetSelection?.length || 1);
+        : clamp((height - autoMarginForFeature - 80), 10, Infinity) / (obsSetSelection?.length || 1);
     // Get an array of keys for sorting purposes.
     const groupKeys = data.map(d => d.keyGroup);
     const featureKeys = data.map(d => d.keyFeature);
@@ -125,6 +128,11 @@ export default function DotPlot(props) {
                 legend: {
                     symbolFillColor: 'white',
                 },
+                scale: { domain: [0, 100] },
+            },
+            tooltip: {
+                field: 'pctPosInGroup',
+                type: 'quantitative',
             },
         },
         width: plotWidth,
@@ -140,5 +148,46 @@ export default function DotPlot(props) {
             } : {}),
         },
     };
-    return (_jsx(VegaPlot, { data: data, spec: spec }));
+    const getTooltipText = useCallback(item => ({
+        [`${capitalize(featureType)}`]: item.datum.feature,
+        [`${capitalize(obsType)} Set`]: item.datum.group,
+        ...(isStratified
+            ? ({ [`${capitalize(sampleType)} Set`]: item.datum.secondaryGroup })
+            : {}),
+        [`Percentage of ${plur(obsType, 2)} in set`]: item.datum.pctPosInGroup,
+        [meanTransform.join(' ')]: item.datum.meanExpInGroup,
+    }), [featureType, obsType, featureValueType, featureValueTransformName]);
+    const obsSetColorScale = useMemo(() => getColorScale(obsSetSelection, obsSetColor, theme), [obsSetSelection, obsSetColor, theme]);
+    const [vegaRenderIncrement, setVegaRenderIncrement] = useState(0);
+    useEffect(() => {
+        // If the dot plot is stratified by both obsSet and sampleSet,
+        // then we want to add cell set colors.
+        // TODO: do we also want to add these color bars
+        // when only stratified by obsSet?
+        const domElement = vegaContainerRef.current;
+        // Here, we assume that the Vega SVG renderer is being used.
+        const svg = select(domElement)
+            .select('svg');
+        // We use the following CSS selector to identify all of
+        // the <line> elements that we are interested to modify.
+        const tickEls = svg.selectAll('g.root g.column_footer g.role-axis g.role-axis-domain line');
+        tickEls
+            .attr('stroke-width', 5)
+            .attr('dy', 2.5)
+            .attr('stroke', (d, i) => {
+            const obsSetPath = obsSetSelection?.[i];
+            return obsSetColorScale(obsSetPath);
+        });
+    }, [vegaContainerRef, vegaRenderIncrement, obsSetSelection, obsSetColorScale]);
+    // We want to increment the counter whenever we detect that VegaPlot
+    // has re-rendered.
+    const onNewView = useCallback(() => {
+        setVegaRenderIncrement(prev => prev + 1);
+    }, []);
+    // This is kind of hacky, since it is possible that the useEffect runs prior
+    // to the Vega rendering, but in practice it seems to work.
+    useEffect(() => {
+        setVegaRenderIncrement(prev => prev + 1);
+    }, [rawData]);
+    return (_jsx("div", { ref: vegaContainerRef, children: _jsx(VegaPlot, { data: data, spec: spec, onNewView: onNewView, getTooltipText: getTooltipText, renderer: "svg" }) }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"DotPlotSubscriber.d.ts","sourceRoot":"","sources":["../src/DotPlotSubscriber.js"],"names":[],"mappings":"AAmBA;;;;;;;GAOG;AACH,yCALG;IAAwB,mBAAmB;IACrB,kBAAkB,EAAhC,MAAM;IAEQ,KAAK,EAAnB,MAAM;CAChB,eAoJA"}
+{"version":3,"file":"DotPlotSubscriber.d.ts","sourceRoot":"","sources":["../src/DotPlotSubscriber.js"],"names":[],"mappings":"AAmBA;;;;;;;GAOG;AACH,yCALG;IAAwB,mBAAmB;IACrB,kBAAkB,EAAhC,MAAM;IAEQ,KAAK,EAAnB,MAAM;CAChB,eAsJA"}

package/dist-tsc/DotPlotSubscriber.js

@@ -50,5 +50,5 @@ export function DotPlotSubscriber(props) {
     ]);
     const [resultArr, meanExpressionMax] = useExpressionSummaries(sampleEdges, sampleSets, sampleSetSelection, expressionData, obsIndex, cellSets, additionalCellSets, geneSelection, cellSetSelection, cellSetColor, featureValueTransform, featureValueTransformCoefficient, posThreshold, featureLabelsMap);
     const selectedTransformName = transformOptions.find(o => o.value === featureValueTransform)?.name;
-    return (_jsx(TitleInfo, { title: title, removeGridComponent: removeGridComponent, urls: urls, theme: theme, isReady: isReady, helpText: helpText, options: (_jsx(CellSetExpressionPlotOptions, { featureValueTransform: featureValueTransform, setFeatureValueTransform: setFeatureValueTransform, featureValueTransformCoefficient: featureValueTransformCoefficient, setFeatureValueTransformCoefficient: setFeatureValueTransformCoefficient, transformOptions: transformOptions, featureValuePositivityThreshold: posThreshold, setFeatureValuePositivityThreshold: setPosThreshold, featureValueColormap: featureValueColormap, setFeatureValueColormap: setFeatureValueColormap })), children: _jsx("div", { ref: containerRef, className: classes.vegaContainer, children: resultArr ? (_jsx(DotPlot, { isStratified: isStratified, transpose: transpose, domainMax: meanExpressionMax, data: resultArr, theme: theme, width: width, height: height, obsType: obsType, featureType: featureType, featureValueType: featureValueType, featureValueTransformName: selectedTransformName, featureValueColormap: featureValueColormap, cellSetSelection: cellSetSelection })) : (_jsxs("span", { children: ["Select at least one ", featureType, "."] })) }) }));
+    return (_jsx(TitleInfo, { title: title, removeGridComponent: removeGridComponent, urls: urls, theme: theme, isReady: isReady, helpText: helpText, options: (_jsx(CellSetExpressionPlotOptions, { featureValueTransform: featureValueTransform, setFeatureValueTransform: setFeatureValueTransform, featureValueTransformCoefficient: featureValueTransformCoefficient, setFeatureValueTransformCoefficient: setFeatureValueTransformCoefficient, transformOptions: transformOptions, featureValuePositivityThreshold: posThreshold, setFeatureValuePositivityThreshold: setPosThreshold, featureValueColormap: featureValueColormap, setFeatureValueColormap: setFeatureValueColormap })), children: _jsx("div", { ref: containerRef, className: classes.vegaContainer, children: resultArr ? (_jsx(DotPlot, { isStratified: isStratified, transpose: transpose, domainMax: meanExpressionMax, data: resultArr, theme: theme, width: width, height: height, obsType: obsType, sampleType: sampleType, featureType: featureType, featureValueType: featureValueType, featureValueTransformName: selectedTransformName, featureValueColormap: featureValueColormap, obsSetSelection: cellSetSelection, obsSetColor: cellSetColor })) : (_jsxs("span", { children: ["Select at least one ", featureType, "."] })) }) }));
 }

package/dist-tsc/FeatureStatsTable.d.ts

@@ -0,0 +1,2 @@
+export default function FeatureStatsTable(props: any): JSX.Element;
+//# sourceMappingURL=FeatureStatsTable.d.ts.map

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

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

package/dist-tsc/FeatureStatsTable.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useMemo, useState, useCallback } from 'react';
+import { DataGrid } from '@mui/x-data-grid';
+import { capitalize } from '@vitessce/utils';
+import { useFilteredVolcanoData } from './utils.js';
+const ROW_ID_DELIMITER = '___';
+const INITIAL_SORT_MODEL = [
+    // We initially set the sorting this way
+    { field: 'logFoldChange', sort: 'desc' },
+];
+export default function FeatureStatsTable(props) {
+    const { obsType, featureType, obsSetsColumnNameMappingReversed, sampleSetsColumnNameMappingReversed, sampleSetSelection, data, setFeatureSelection, featurePointSignificanceThreshold, featurePointFoldChangeThreshold, } = props;
+    const [
+    // eslint-disable-next-line no-unused-vars
+    computedData, filteredData,] = useFilteredVolcanoData({
+        data,
+        obsSetsColumnNameMappingReversed,
+        sampleSetsColumnNameMappingReversed,
+        featurePointFoldChangeThreshold,
+        featurePointSignificanceThreshold,
+        sampleSetSelection,
+    });
+    // Reference: https://v4.mui.com/api/data-grid/data-grid/
+    const columns = useMemo(() => ([
+        {
+            field: 'featureId',
+            headerName: capitalize(featureType),
+            width: 200,
+            editable: false,
+        },
+        {
+            field: 'logFoldChange',
+            headerName: 'Log Fold-Change',
+            width: 200,
+            editable: false,
+        },
+        {
+            field: 'featureSignificance',
+            headerName: 'P-value',
+            width: 200,
+            editable: false,
+        },
+        {
+            field: 'obsSetName',
+            headerName: `${capitalize(obsType)} Set`,
+            width: 200,
+            editable: false,
+        },
+    ]), [obsType, featureType]);
+    const rows = useMemo(() => {
+        let result = [];
+        if (filteredData) {
+            filteredData.forEach((comparisonObject) => {
+                const { df, metadata } = comparisonObject;
+                const coordinationValues = metadata.coordination_values;
+                const rawObsSetPath = coordinationValues.obsSetFilter
+                    ? coordinationValues.obsSetFilter[0]
+                    : coordinationValues.obsSetSelection[0];
+                const obsSetPath = [...rawObsSetPath];
+                obsSetPath[0] = obsSetsColumnNameMappingReversed[rawObsSetPath[0]];
+                const obsSetName = obsSetPath.at(-1);
+                result = result.concat(df.map(row => ({
+                    ...row,
+                    id: `${row.featureId}${ROW_ID_DELIMITER}${obsSetName}`,
+                    obsSetName,
+                })));
+            });
+        }
+        return result;
+    }, [filteredData, obsSetsColumnNameMappingReversed]);
+    const onSelectionModelChange = useCallback((rowIds) => {
+        const featureIds = rowIds.map(rowId => rowId.split(ROW_ID_DELIMITER)[0]);
+        setFeatureSelection(featureIds);
+    }, []);
+    const rowSelectionModel = useMemo(() => [], []);
+    const [sortModel, setSortModel] = useState(INITIAL_SORT_MODEL);
+    const getRowId = useCallback(row => row.id, []);
+    return (_jsx(DataGrid, { density: "compact", rows: rows, columns: columns, pageSize: 10, 
+        // checkboxSelection // TODO: uncomment to enable multiple-row selection
+        onSelectionModelChange: onSelectionModelChange, rowSelectionModel: rowSelectionModel, getRowId: getRowId, sortModel: sortModel, onSortModelChange: setSortModel }));
+}

package/dist-tsc/FeatureStatsTableSubscriber.d.ts

@@ -0,0 +1,2 @@
+export function FeatureStatsTableSubscriber(props: any): JSX.Element;
+//# sourceMappingURL=FeatureStatsTableSubscriber.d.ts.map

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

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

package/dist-tsc/FeatureStatsTableSubscriber.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable no-unused-vars */
+import React from 'react';
+import { TitleInfo, useCoordination, useLoaders, useReady, useFeatureStatsData, useMatchingLoader, useColumnNameMapping, } from '@vitessce/vit-s';
+import { ViewType, COMPONENT_COORDINATION_TYPES, ViewHelpMapping, DataType, } from '@vitessce/constants-internal';
+import FeatureStatsTable from './FeatureStatsTable.js';
+import { useRawSetPaths } from './utils.js';
+export function FeatureStatsTableSubscriber(props) {
+    const { title = 'Differential Expression Results', coordinationScopes, removeGridComponent, theme, helpText = ViewHelpMapping.FEATURE_STATS_TABLE, } = props;
+    const loaders = useLoaders();
+    // Get "props" from the coordination space.
+    const [{ dataset, obsType, sampleType, featureType, featureValueType, obsFilter: cellFilter, obsHighlight: cellHighlight, obsSetSelection, obsSetColor, obsColorEncoding: cellColorEncoding, additionalObsSets: additionalCellSets, featurePointSignificanceThreshold, featurePointFoldChangeThreshold, featureValueTransform, featureValueTransformCoefficient, gatingFeatureSelectionX, gatingFeatureSelectionY, featureSelection, sampleSetSelection, sampleSetColor, }, { setObsFilter: setCellFilter, setObsSetSelection, setObsHighlight: setCellHighlight, setObsSetColor: setCellSetColor, setObsColorEncoding: setCellColorEncoding, setAdditionalObsSets: setAdditionalCellSets, setFeaturePointSignificanceThreshold, setFeaturePointFoldChangeThreshold, setFeatureValueTransform, setFeatureValueTransformCoefficient, setGatingFeatureSelectionX, setGatingFeatureSelectionY, setFeatureSelection, setSampleSetSelection, setSampleSetColor, }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType.FEATURE_STATS_TABLE], coordinationScopes);
+    const obsSetsLoader = useMatchingLoader(loaders, dataset, DataType.OBS_SETS, { obsType });
+    const sampleSetsLoader = useMatchingLoader(loaders, dataset, DataType.SAMPLE_SETS, { sampleType });
+    const obsSetsColumnNameMapping = useColumnNameMapping(obsSetsLoader);
+    const obsSetsColumnNameMappingReversed = useColumnNameMapping(obsSetsLoader, true);
+    const sampleSetsColumnNameMapping = useColumnNameMapping(sampleSetsLoader);
+    const sampleSetsColumnNameMappingReversed = useColumnNameMapping(sampleSetsLoader, true);
+    const rawSampleSetSelection = useRawSetPaths(sampleSetsColumnNameMapping, sampleSetSelection);
+    const rawObsSetSelection = useRawSetPaths(obsSetsColumnNameMapping, obsSetSelection);
+    const [{ featureStats }, featureStatsStatus] = useFeatureStatsData(loaders, dataset, false, { obsType, featureType, sampleType }, 
+    // These volcanoOptions are passed to FeatureStatsAnndataLoader.loadMulti():
+    { sampleSetSelection: rawSampleSetSelection, obsSetSelection: rawObsSetSelection });
+    const isReady = useReady([
+        featureStatsStatus,
+    ]);
+    return (_jsx(TitleInfo, { title: title, removeGridComponent: removeGridComponent, theme: theme, isReady: isReady, helpText: helpText, withPadding: false, children: featureStats ? (_jsx(FeatureStatsTable, { theme: theme, obsType: obsType, featureType: featureType, obsSetsColumnNameMapping: obsSetsColumnNameMapping, obsSetsColumnNameMappingReversed: obsSetsColumnNameMappingReversed, sampleSetsColumnNameMapping: sampleSetsColumnNameMapping, sampleSetsColumnNameMappingReversed: sampleSetsColumnNameMappingReversed, sampleSetSelection: sampleSetSelection, obsSetSelection: obsSetSelection, obsSetColor: obsSetColor, sampleSetColor: sampleSetColor, data: featureStats, featureSelection: featureSelection, setFeatureSelection: setFeatureSelection, featurePointSignificanceThreshold: featurePointSignificanceThreshold, featurePointFoldChangeThreshold: featurePointFoldChangeThreshold })) : (_jsxs("p", { style: { padding: '12px' }, children: ["Select at least one ", obsType, " set."] })) }));
+}

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

@@ -1 +1 @@
-{"version":3,"file":"Treemap.d.ts","sourceRoot":"","sources":["../src/Treemap.js"],"names":[],"mappings":"AAsBA;;;;;;;;GAQG;AACH,yDAkLC"}
+{"version":3,"file":"Treemap.d.ts","sourceRoot":"","sources":["../src/Treemap.js"],"names":[],"mappings":"AAsBA;;;;;;;;GAQG;AACH,yDAoMC"}

package/dist-tsc/Treemap.js

@@ -71,6 +71,9 @@ export default function Treemap(props) {
     const svgRef = useRef();
     useEffect(() => {
         const domElement = svgRef.current;
+        if (!width || !height) {
+            return;
+        }
         const svg = select(domElement);
         svg.selectAll('g').remove();
         svg
@@ -78,7 +81,7 @@ export default function Treemap(props) {
             .attr('height', height)
             .attr('viewBox', [0, 0, width, height])
             .attr('style', 'font: 10px sans-serif');
-        if (!treemapLeaves || !obsSetSelection || !sampleSetSelection) {
+        if (!treemapLeaves || !obsSetSelection) {
             return;
         }
         // Add a group for each leaf of the hierarchy.
@@ -130,14 +133,25 @@ export default function Treemap(props) {
         })
             .append('use')
             .attr('xlink:href', d => d.leafUid.href);
+        const hasSampleSetSelection = Array.isArray(sampleSetSelection);
         // Append multiline text.
         leaf.append('text')
             .attr('clip-path', d => `url(${d.clipUid.href})`)
             .selectAll('tspan')
             .data(d => ([
             // Each element in this array corresponds to a line of text.
-            d.data?.[0]?.at(-1),
-            d.parent?.data?.[0]?.at(-1),
+            ...(hasSampleSetSelection
+                ? ([
+                    d.data?.[0]?.at(-1),
+                    d.parent?.data?.[0]?.at(-1),
+                ]) : ([
+                // Only use the cell set name
+                // for the line of text
+                // (since no sample set selection)
+                hierarchyLevels[0] === 'obsSet'
+                    ? d.parent?.data?.[0].at(-1)
+                    : d.data?.[0].at(-1),
+            ])),
             `${d.data?.[1].toLocaleString()} ${plur(obsType, d.data?.[1])}`,
         ]))
             .join('tspan')

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

@@ -1 +1 @@
-{"version":3,"file":"TreemapSubscriber.d.ts","sourceRoot":"","sources":["../src/TreemapSubscriber.js"],"names":[],"mappings":"AAyBA,2DAiPC"}
+{"version":3,"file":"TreemapSubscriber.d.ts","sourceRoot":"","sources":["../src/TreemapSubscriber.js"],"names":[],"mappings":"AAyBA,2DAmPC"}

package/dist-tsc/TreemapSubscriber.js

@@ -66,9 +66,9 @@ export function TreemapSubscriber(props) {
                 obsResult.get(cellSetKey).set(sampleSetKey, 0);
             });
         });
-        const sampleSetSizes = treeToSetSizesBySetNames(mergedSampleSets, sampleSetSelection, sampleSetSelection, sampleSetColor, theme);
+        const sampleSetSizes = hasSampleSetSelection ? treeToSetSizesBySetNames(mergedSampleSets, sampleSetSelection, sampleSetSelection, sampleSetColor, theme) : null;
         sampleSetKeys.forEach((sampleSetKey) => {
-            const sampleSetSize = sampleSetSizes.find(d => isEqual(d.setNamePath, sampleSetKey))?.size;
+            const sampleSetSize = sampleSetSizes?.find(d => isEqual(d.setNamePath, sampleSetKey))?.size;
             sampleResult.set(sampleSetKey, sampleSetSize || 0);
         });
         if (mergedObsSets && obsSetSelection) {
@@ -80,7 +80,9 @@ export function TreemapSubscriber(props) {
                 const obsId = obsIndex[i];
                 const cellSet = cellIdToSetMap?.get(obsId);
                 const sampleId = sampleEdges?.get(obsId);
-                const sampleSet = sampleId ? sampleIdToSetMap?.get(sampleId) : null;
+                const sampleSet = sampleId && hasSampleSetSelection
+                    ? sampleIdToSetMap?.get(sampleId)
+                    : null;
                 if (hasSampleSetSelection && !sampleSet) {
                     // Skip this sample if it is not in the selected sample set.
                     // eslint-disable-next-line no-continue

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

@@ -1 +1 @@
-{"version":3,"file":"VolcanoPlot.d.ts","sourceRoot":"","sources":["../src/VolcanoPlot.js"],"names":[],"mappings":"AAYA,6DA+SC"}
+{"version":3,"file":"VolcanoPlot.d.ts","sourceRoot":"","sources":["../src/VolcanoPlot.js"],"names":[],"mappings":"AAWA,6DAgQC"}