@vitessce/statistical-plots 3.5.9 → 3.5.11

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

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

package/dist-tsc/FeatureSetEnrichmentBarPlotSubscriber.js

@@ -39,8 +39,11 @@ export function FeatureSetEnrichmentBarPlotSubscriber(props) {
         // Will not work since transformFeature currently:
         // - matches based on kgId (rather than term)
         // - only knows about Reactome pathways (not GO terms).
-        // console.log(await transformFeature(kgNode, targetFeatureType))
-        // setFeatureSelection(featureIds);
+        const targetsInPathway = await transformFeature(kgNode, targetFeatureType);
+        const featureIds = targetsInPathway
+            .filter((d, i) => i < 10) // TODO: do not limit the number of genes here
+            .map(d => d.label);
+        setFeatureSelection(featureIds);
     }, [setFeatureSelection]);
     // TODO: support the following options
     // - p-value threshold for which bars to show

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,2DAgQC"}

package/dist-tsc/TreemapSubscriber.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable no-unused-vars */
 import React, { useMemo, useCallback } from 'react';
 import { TitleInfo, useCoordination, useLoaders, useUrls, useReady, useGridItemSize, useObsFeatureMatrixIndices, useObsSetsData, useSampleEdgesData, useSampleSetsData, } from '@vitessce/vit-s';
@@ -43,8 +43,6 @@ export function TreemapSubscriber(props) {
     ]);
     const mergedObsSets = useMemo(() => mergeObsSets(obsSets, additionalObsSets), [obsSets, additionalObsSets]);
     const mergedSampleSets = useMemo(() => mergeObsSets(sampleSets, null), [sampleSets]);
-    const obsCount = obsIndex?.length || 0;
-    const sampleCount = sampleIndex?.length || 0;
     // TODO: use obsFilter / sampleFilter to display
     // _all_ cells/samples in gray / transparent in background,
     // and use obsSetSelection/sampleSetSelection to display
@@ -66,12 +64,12 @@ 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) {
+        if (mergedObsSets && obsSetSelection && obsIndex) {
             const sampleIdToSetMap = sampleSets && sampleSetSelection
                 ? treeToSelectedSetMap(sampleSets, sampleSetSelection)
                 : null;
@@ -80,7 +78,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
@@ -96,11 +96,17 @@ export function TreemapSubscriber(props) {
         ];
     }, [obsIndex, sampleEdges, sampleSets, obsSetColor,
         sampleSetColor, mergedObsSets, obsSetSelection, mergedSampleSets,
-        sampleSetSelection,
+        sampleSetSelection, obsIndex,
         // TODO: consider filtering-related coordination values
     ]);
+    const totalObsCount = obsIndex?.length || 0;
+    const totalSampleCount = sampleIndex?.length || 0;
+    const selectedObsCount = obsCounts.reduce((a, h) => a + h.value, 0);
+    const selectedSampleCount = sampleCounts.reduce((a, h) => a + h.value, 0);
+    const unselectedObsCount = totalObsCount - selectedObsCount;
+    const unselectedSampleCount = totalSampleCount - selectedSampleCount;
     const onNodeClick = useCallback((obsSetPath) => {
         setObsSetSelection([obsSetPath]);
     }, [setObsSetSelection]);
-    return (_jsx(TitleInfo, { title: `Treemap of ${capitalize(plur(obsType, 2))}`, info: `${commaNumber(obsCount)} ${plur(obsType, obsCount)} from ${commaNumber(sampleCount)} ${plur(sampleType, sampleCount)}`, removeGridComponent: removeGridComponent, urls: urls, theme: theme, isReady: isReady, helpText: helpText, options: (_jsx(TreemapOptions, { obsType: obsType, sampleType: sampleType, obsColorEncoding: obsColorEncoding, setObsColorEncoding: setObsColorEncoding, hierarchyLevels: hierarchyLevels || DEFAULT_HIERARCHY_LEVELS, setHierarchyLevels: setHierarchyLevels })), children: _jsx("div", { ref: containerRef, className: classes.vegaContainer, children: _jsx(Treemap, { obsCounts: obsCounts, sampleCounts: sampleCounts, obsColorEncoding: obsColorEncoding, hierarchyLevels: hierarchyLevels || DEFAULT_HIERARCHY_LEVELS, theme: theme, width: width, height: height, obsType: obsType, sampleType: sampleType, obsSetColor: obsSetColor, sampleSetColor: sampleSetColor, obsSetSelection: obsSetSelection, sampleSetSelection: sampleSetSelection, onNodeClick: onNodeClick }) }) }));
+    return (_jsxs(TitleInfo, { title: `Treemap of ${capitalize(plur(obsType, 2))}`, info: `${commaNumber(selectedObsCount)} ${plur(obsType, selectedObsCount)} from ${commaNumber(selectedSampleCount)} ${plur(sampleType, selectedSampleCount)}`, removeGridComponent: removeGridComponent, urls: urls, theme: theme, isReady: isReady, helpText: helpText, withPadding: false, options: (_jsx(TreemapOptions, { obsType: obsType, sampleType: sampleType, obsColorEncoding: obsColorEncoding, setObsColorEncoding: setObsColorEncoding, hierarchyLevels: hierarchyLevels || DEFAULT_HIERARCHY_LEVELS, setHierarchyLevels: setHierarchyLevels })), children: [_jsx("div", { ref: containerRef, className: classes.vegaContainer, children: _jsx(Treemap, { obsCounts: obsCounts, sampleCounts: sampleCounts, obsColorEncoding: obsColorEncoding, hierarchyLevels: hierarchyLevels || DEFAULT_HIERARCHY_LEVELS, theme: theme, width: width, height: Math.max(height * (selectedObsCount / totalObsCount), 40), obsType: obsType, sampleType: sampleType, obsSetColor: obsSetColor, sampleSetColor: sampleSetColor, obsSetSelection: obsSetSelection, sampleSetSelection: sampleSetSelection, onNodeClick: onNodeClick }) }), _jsx("div", { style: { position: 'absolute', right: '2px', bottom: '2px', fontSize: '10px' }, children: unselectedObsCount > 0 ? (_jsx("span", { children: `${commaNumber(unselectedObsCount)} ${plur(obsType, unselectedObsCount)} from ${commaNumber(unselectedSampleCount)} ${plur(sampleType, unselectedSampleCount)} currently omitted` })) : null })] }));
 }

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"}

package/dist-tsc/VolcanoPlot.js

@@ -6,21 +6,20 @@ import { scaleLinear } from 'd3-scale';
 import { axisBottom, axisLeft } from 'd3-axis';
 import { extent as d3_extent } from 'd3-array';
 import { select } from 'd3-selection';
-import { isEqual } from 'lodash-es';
 import { capitalize, getDefaultForegroundColor } from '@vitessce/utils';
 import { colorArrayToString } from '@vitessce/sets-utils';
-import { getColorScale } from './utils.js';
+import { getColorScale, useFilteredVolcanoData } from './utils.js';
 export default function VolcanoPlot(props) {
-    const { theme, width, height, obsType, featureType, obsSetsColumnNameMapping, sampleSetsColumnNameMapping, sampleSetSelection, obsSetSelection, obsSetColor, sampleSetColor, data, marginTop = 5, marginRight = 5, marginLeft = 50, marginBottom = 50, onFeatureClick, featurePointSignificanceThreshold, featurePointFoldChangeThreshold, featureLabelSignificanceThreshold, featureLabelFoldChangeThreshold, } = props;
+    const { theme, width, height, obsType, featureType, obsSetsColumnNameMappingReversed, sampleSetsColumnNameMappingReversed, sampleSetSelection, obsSetSelection, obsSetColor, sampleSetColor, data, marginTop = 5, marginRight = 5, marginLeft = 50, marginBottom = 50, onFeatureClick, featurePointSignificanceThreshold, featurePointFoldChangeThreshold, featureLabelSignificanceThreshold, featureLabelFoldChangeThreshold, } = props;
     const svgRef = useRef();
-    const computedData = useMemo(() => data.map(d => ({
-        ...d,
-        df: {
-            ...d.df,
-            minusLog10p: d.df.featureSignificance.map(v => -Math.log10(v)),
-            logFoldChange: d.df.featureFoldChange.map(v => Math.log2(v)),
-        },
-    })), [data]);
+    const [computedData, filteredData] = useFilteredVolcanoData({
+        data,
+        obsSetsColumnNameMappingReversed,
+        sampleSetsColumnNameMappingReversed,
+        featurePointFoldChangeThreshold,
+        featurePointSignificanceThreshold,
+        sampleSetSelection,
+    });
     const [xExtent, yExtent] = useMemo(() => {
         if (!computedData) {
             return [null, null];
@@ -44,7 +43,7 @@ export default function VolcanoPlot(props) {
             .attr('height', height)
             .attr('viewBox', [0, 0, width, height])
             .attr('style', 'font: 10px sans-serif');
-        if (!computedData || !xExtent || !yExtent) {
+        if (!filteredData || !xExtent || !yExtent) {
             return;
         }
         // Render scatterplot
@@ -89,13 +88,6 @@ export default function VolcanoPlot(props) {
             .text('log2 fold-change')
             .style('font-size', '12px')
             .style('fill', fgColor);
-        // Get a mapping from column name to group name.
-        const obsSetsColumnNameMappingReversed = Object.fromEntries(Object
-            .entries(obsSetsColumnNameMapping)
-            .map(([key, value]) => ([value, key])));
-        const sampleSetsColumnNameMappingReversed = Object.fromEntries(Object
-            .entries(sampleSetsColumnNameMapping)
-            .map(([key, value]) => ([value, key])));
         // Horizontal and vertical rules to indicate currently-selected thresholds
         // Vertical lines
         const ruleColor = 'silver';
@@ -150,39 +142,15 @@ export default function VolcanoPlot(props) {
             .style('fill', fgColor);
         const g = svg.append('g');
         // Append a circle for each data point.
-        computedData.forEach((comparisonObject) => {
+        filteredData.forEach((comparisonObject) => {
             const obsSetG = g.append('g');
-            const { df, metadata } = comparisonObject;
+            const { df: filteredDf, 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]];
-            // Swap the foldchange direction if backwards with
-            // respect to the current sampleSetSelection pair.
-            // TODO: move this swapping into the computedData useMemo?
-            let shouldSwapFoldChangeDirection = false;
-            if (coordinationValues.sampleSetFilter
-                && coordinationValues.sampleSetFilter.length === 2) {
-                const rawSampleSetPathA = coordinationValues.sampleSetFilter[0];
-                const sampleSetPathA = [...rawSampleSetPathA];
-                sampleSetPathA[0] = sampleSetsColumnNameMappingReversed[rawSampleSetPathA[0]];
-                const rawSampleSetPathB = coordinationValues.sampleSetFilter[1];
-                const sampleSetPathB = [...rawSampleSetPathB];
-                sampleSetPathB[0] = sampleSetsColumnNameMappingReversed[rawSampleSetPathB[0]];
-                if (isEqual(sampleSetPathA, sampleSetSelection[1])
-                    && isEqual(sampleSetPathB, sampleSetSelection[0])) {
-                    shouldSwapFoldChangeDirection = true;
-                }
-            }
-            const filteredDf = df.featureId.map((featureId, i) => ({
-                featureId,
-                logFoldChange: df.logFoldChange[i] * (shouldSwapFoldChangeDirection ? -1 : 1),
-                featureSignificance: df.featureSignificance[i],
-                minusLog10p: df.minusLog10p[i],
-            })).filter(d => ((Math.abs(d.logFoldChange) >= (featurePointFoldChangeThreshold ?? 1.0))
-                && (d.featureSignificance <= (featurePointSignificanceThreshold ?? 0.05))));
             const color = obsSetColorScale(obsSetPath);
             obsSetG.append('g')
                 .selectAll('circle')
@@ -214,12 +182,13 @@ export default function VolcanoPlot(props) {
                 .text(d => `${featureType}: ${d.featureId}\nin ${obsSetPath?.at(-1)}\nlog2 fold-change: ${d.logFoldChange}\np-value: ${d.featureSignificance}`);
         });
     }, [width, height, theme, sampleSetColor, sampleSetSelection,
-        obsSetSelection, obsSetColor, featureType, computedData,
+        obsSetSelection, obsSetColor, featureType, filteredData,
         xExtent, yExtent, obsType,
         marginLeft, marginBottom, marginTop, marginRight,
         obsSetColorScale, sampleSetColorScale, onFeatureClick,
         featurePointSignificanceThreshold, featurePointFoldChangeThreshold,
         featureLabelSignificanceThreshold, featureLabelFoldChangeThreshold,
+        obsSetsColumnNameMappingReversed,
     ]);
     return (_jsx("svg", { ref: svgRef, style: {
             top: 0,

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

@@ -1 +1 @@
-{"version":3,"file":"VolcanoPlotSubscriber.d.ts","sourceRoot":"","sources":["../src/VolcanoPlotSubscriber.js"],"names":[],"mappings":"AAuBA,+DA0IC"}
+{"version":3,"file":"VolcanoPlotSubscriber.d.ts","sourceRoot":"","sources":["../src/VolcanoPlotSubscriber.js"],"names":[],"mappings":"AAuBA,+DA+IC"}

package/dist-tsc/VolcanoPlotSubscriber.js

@@ -8,7 +8,7 @@ import { useStyles } from './styles.js';
 import VolcanoPlotOptions from './VolcanoPlotOptions.js';
 import { useRawSetPaths } from './utils.js';
 export function VolcanoPlotSubscriber(props) {
-    const { coordinationScopes, removeGridComponent, theme, helpText = ViewHelpMapping.VOLCANO_PLOT, } = props;
+    const { title = 'Volcano Plot', coordinationScopes, removeGridComponent, theme, helpText = ViewHelpMapping.VOLCANO_PLOT, } = props;
     const classes = useStyles();
     const loaders = useLoaders();
     // Get "props" from the coordination space.
@@ -17,7 +17,9 @@ export function VolcanoPlotSubscriber(props) {
     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 }, 
@@ -29,5 +31,5 @@ export function VolcanoPlotSubscriber(props) {
     const onFeatureClick = useCallback((featureId) => {
         setFeatureSelection([featureId]);
     }, [setFeatureSelection]);
-    return (_jsx(TitleInfo, { title: "Volcano Plot", removeGridComponent: removeGridComponent, theme: theme, isReady: isReady, helpText: helpText, options: (_jsx(VolcanoPlotOptions, { obsType: obsType, featureType: featureType, featurePointSignificanceThreshold: featurePointSignificanceThreshold, featurePointFoldChangeThreshold: featurePointFoldChangeThreshold, featureLabelSignificanceThreshold: featureLabelSignificanceThreshold, featureLabelFoldChangeThreshold: featureLabelFoldChangeThreshold, setFeaturePointSignificanceThreshold: setFeaturePointSignificanceThreshold, setFeaturePointFoldChangeThreshold: setFeaturePointFoldChangeThreshold, setFeatureLabelSignificanceThreshold: setFeatureLabelSignificanceThreshold, setFeatureLabelFoldChangeThreshold: setFeatureLabelFoldChangeThreshold })), children: _jsx("div", { ref: containerRef, className: classes.vegaContainer, children: featureStats ? (_jsx(VolcanoPlot, { theme: theme, width: width, height: height, obsType: obsType, featureType: featureType, obsSetsColumnNameMapping: obsSetsColumnNameMapping, sampleSetsColumnNameMapping: sampleSetsColumnNameMapping, sampleSetSelection: sampleSetSelection, obsSetSelection: obsSetSelection, obsSetColor: obsSetColor, sampleSetColor: sampleSetColor, data: featureStats, onFeatureClick: onFeatureClick, featurePointSignificanceThreshold: featurePointSignificanceThreshold, featurePointFoldChangeThreshold: featurePointFoldChangeThreshold, featureLabelSignificanceThreshold: featureLabelSignificanceThreshold, featureLabelFoldChangeThreshold: featureLabelFoldChangeThreshold })) : (_jsxs("span", { children: ["Select at least one ", obsType, " set."] })) }) }));
+    return (_jsx(TitleInfo, { title: title, removeGridComponent: removeGridComponent, theme: theme, isReady: isReady, helpText: helpText, options: (_jsx(VolcanoPlotOptions, { obsType: obsType, featureType: featureType, featurePointSignificanceThreshold: featurePointSignificanceThreshold, featurePointFoldChangeThreshold: featurePointFoldChangeThreshold, featureLabelSignificanceThreshold: featureLabelSignificanceThreshold, featureLabelFoldChangeThreshold: featureLabelFoldChangeThreshold, setFeaturePointSignificanceThreshold: setFeaturePointSignificanceThreshold, setFeaturePointFoldChangeThreshold: setFeaturePointFoldChangeThreshold, setFeatureLabelSignificanceThreshold: setFeatureLabelSignificanceThreshold, setFeatureLabelFoldChangeThreshold: setFeatureLabelFoldChangeThreshold })), children: _jsx("div", { ref: containerRef, className: classes.vegaContainer, children: featureStats ? (_jsx(VolcanoPlot, { theme: theme, width: width, height: height, obsType: obsType, featureType: featureType, obsSetsColumnNameMapping: obsSetsColumnNameMapping, obsSetsColumnNameMappingReversed: obsSetsColumnNameMappingReversed, sampleSetsColumnNameMapping: sampleSetsColumnNameMapping, sampleSetsColumnNameMappingReversed: sampleSetsColumnNameMappingReversed, sampleSetSelection: sampleSetSelection, obsSetSelection: obsSetSelection, obsSetColor: obsSetColor, sampleSetColor: sampleSetColor, data: featureStats, onFeatureClick: onFeatureClick, featurePointSignificanceThreshold: featurePointSignificanceThreshold, featurePointFoldChangeThreshold: featurePointFoldChangeThreshold, featureLabelSignificanceThreshold: featureLabelSignificanceThreshold, featureLabelFoldChangeThreshold: featureLabelFoldChangeThreshold })) : (_jsxs("span", { children: ["Select at least one ", obsType, " set."] })) }) }));
 }

package/dist-tsc/expr-hooks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"expr-hooks.d.ts","sourceRoot":"","sources":["../src/expr-hooks.js"],"names":[],"mappings":"AAiDA;;;;;;GAMG;AACH,8DAJW,GAAC,gBACD,GAAC,OA4BX;AAED;;;;;;GAMG;AACH,oEAJW,GAAC,aACD,GAAC,OAkBX;AAED;;;;;;;;GAQG;AACH,oEALW,GAAC,YACD,GAAC,YACD,GAAC;;;;;;;;;;;;;;;;;;;;;;;;EA4DX"}
+{"version":3,"file":"expr-hooks.d.ts","sourceRoot":"","sources":["../src/expr-hooks.js"],"names":[],"mappings":"AAiDA;;;;;;GAMG;AACH,8DAJW,GAAC,gBACD,GAAC,OA4BX;AAED;;;;;;GAMG;AACH,oEAJW,GAAC,aACD,GAAC,OAiBX;AAED;;;;;;;;GAQG;AACH,oEALW,GAAC,YACD,GAAC,YACD,GAAC;;;;;;;;;;;;;;;;;;;;;;;;EA4DX"}

package/dist-tsc/expr-hooks.test.js

@@ -70,8 +70,9 @@ describe('Utility functions for processing expression data for statistical plots
             ];
             const featureValueTransform = null;
             const featureValueTransformCoefficient = 1;
+            const featureAggregationStrategy = 'first';
             const [result] = stratifyExpressionData(sampleEdges, sampleSets, sampleSetSelection, expressionData, obsIndex, mergedCellSets, geneSelection, cellSetSelection, cellSetColor, featureValueTransform, featureValueTransformCoefficient);
-            const aggregateData = aggregateStratifiedExpressionData(result, geneSelection);
+            const aggregateData = aggregateStratifiedExpressionData(result, geneSelection, featureAggregationStrategy);
             const summaryResult = summarizeStratifiedExpressionData(aggregateData, true);
             expect(Array.from(summaryResult.keys())).toEqual([['Cell type', 'T cell'], ['Cell type', 'B cell']]);
             expect(Array.from(summaryResult.get(['Cell type', 'T cell']).keys())).toEqual([['Clinical groups', 'AKI'], ['Clinical groups', 'CKD']]);

package/dist-tsc/index.d.ts

@@ -7,6 +7,7 @@ export { TreemapSubscriber } from "./TreemapSubscriber.js";
 export { VolcanoPlotSubscriber } from "./VolcanoPlotSubscriber.js";
 export { CellSetCompositionBarPlotSubscriber } from "./CellSetCompositionBarPlotSubscriber.js";
 export { FeatureSetEnrichmentBarPlotSubscriber } from "./FeatureSetEnrichmentBarPlotSubscriber.js";
+export { FeatureStatsTableSubscriber } from "./FeatureStatsTableSubscriber.js";
 export { default as CellSetSizesPlot } from "./CellSetSizesPlot.js";
 export { default as CellSetExpressionPlot } from "./CellSetExpressionPlot.js";
 export { default as ExpressionHistogram } from "./ExpressionHistogram.js";

package/dist-tsc/index.js

@@ -7,6 +7,7 @@ export { TreemapSubscriber } from './TreemapSubscriber.js';
 export { VolcanoPlotSubscriber } from './VolcanoPlotSubscriber.js';
 export { CellSetCompositionBarPlotSubscriber } from './CellSetCompositionBarPlotSubscriber.js';
 export { FeatureSetEnrichmentBarPlotSubscriber } from './FeatureSetEnrichmentBarPlotSubscriber.js';
+export { FeatureStatsTableSubscriber } from './FeatureStatsTableSubscriber.js';
 export { default as CellSetSizesPlot } from './CellSetSizesPlot.js';
 export { default as CellSetExpressionPlot } from './CellSetExpressionPlot.js';
 export { default as ExpressionHistogram } from './ExpressionHistogram.js';

package/dist-tsc/utils.d.ts

@@ -6,4 +6,5 @@ export function getColorScale(setSelectionArr: any, setColorArr: any, theme: any
  * @returns {string[][]} Transformed set paths.
  */
 export function useRawSetPaths(columnNameMapping: Record<string, string>, setPaths: string[][]): string[][];
+export function useFilteredVolcanoData(props: any): any[];
 //# sourceMappingURL=utils.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.js"],"names":[],"mappings":"AAcA,0GAeC;AAGD;;;;;GAKG;AACH,kDAJW,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,YACtB,MAAM,EAAE,EAAE,GACR,MAAM,EAAE,EAAE,CAUtB"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.js"],"names":[],"mappings":"AAcA,0GAeC;AAGD;;;;;GAKG;AACH,kDAJW,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,YACtB,MAAM,EAAE,EAAE,GACR,MAAM,EAAE,EAAE,CAUtB;AAID,0DA6EC"}

package/dist-tsc/utils.js

@@ -1,3 +1,4 @@
+/* eslint-disable camelcase */
 import { useMemo } from 'react';
 import { isEqual } from 'lodash-es';
 import { colorArrayToString } from '@vitessce/sets-utils';
@@ -38,3 +39,58 @@ export function useRawSetPaths(columnNameMapping, setPaths) {
         return newSetPath;
     }), [columnNameMapping, setPaths]);
 }
+// Data transformation hook function that is used both here
+// and in the FeatureStatsTable view.
+export function useFilteredVolcanoData(props) {
+    const { data, obsSetsColumnNameMappingReversed, sampleSetsColumnNameMappingReversed, featurePointFoldChangeThreshold, featurePointSignificanceThreshold, sampleSetSelection, } = props;
+    const computedData = useMemo(() => data.map((d) => {
+        const { metadata } = d;
+        const coordinationValues = metadata.coordination_values;
+        const rawObsSetPath = coordinationValues.obsSetFilter
+            ? coordinationValues.obsSetFilter[0]
+            : coordinationValues.obsSetSelection[0];
+        const obsSetPath = [...rawObsSetPath];
+        obsSetPath[0] = obsSetsColumnNameMappingReversed[rawObsSetPath[0]];
+        // Swap the foldchange direction if backwards with
+        // respect to the current sampleSetSelection pair.
+        // TODO: move this swapping into the computedData useMemo?
+        let shouldSwapFoldChangeDirection = false;
+        if (coordinationValues.sampleSetFilter
+            && coordinationValues.sampleSetFilter.length === 2) {
+            const rawSampleSetPathA = coordinationValues.sampleSetFilter[0];
+            const sampleSetPathA = [...rawSampleSetPathA];
+            sampleSetPathA[0] = sampleSetsColumnNameMappingReversed[rawSampleSetPathA[0]];
+            const rawSampleSetPathB = coordinationValues.sampleSetFilter[1];
+            const sampleSetPathB = [...rawSampleSetPathB];
+            sampleSetPathB[0] = sampleSetsColumnNameMappingReversed[rawSampleSetPathB[0]];
+            if (isEqual(sampleSetPathA, sampleSetSelection[1])
+                && isEqual(sampleSetPathB, sampleSetSelection[0])) {
+                shouldSwapFoldChangeDirection = true;
+            }
+        }
+        return ({
+            ...d,
+            df: {
+                ...d.df,
+                minusLog10p: d.df.featureSignificance.map(v => -Math.log10(v)),
+                logFoldChange: d.df.featureFoldChange.map(v => (Math.log2(v) * (shouldSwapFoldChangeDirection ? -1 : 1))),
+            },
+        });
+    }), [
+        data, obsSetsColumnNameMappingReversed, sampleSetsColumnNameMappingReversed,
+        sampleSetSelection,
+    ]);
+    const filteredData = useMemo(() => computedData.map(obj => ({
+        ...obj,
+        // Instead of an object of one array per column,
+        // this is now an array of one object per row.
+        df: obj.df.featureId.map((featureId, i) => ({
+            featureId,
+            logFoldChange: obj.df.logFoldChange[i],
+            featureSignificance: obj.df.featureSignificance[i],
+            minusLog10p: obj.df.minusLog10p[i],
+        })).filter(d => ((Math.abs(d.logFoldChange) >= (featurePointFoldChangeThreshold ?? 1.0))
+            && (d.featureSignificance <= (featurePointSignificanceThreshold ?? 0.05)))),
+    })), [computedData, featurePointFoldChangeThreshold, featurePointSignificanceThreshold]);
+    return [computedData, filteredData];
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitessce/statistical-plots",
-  "version": "3.5.9",
+  "version": "3.5.11",
   "author": "HIDIVE Lab at HMS",
   "homepage": "http://vitessce.io",
   "repository": {
@@ -17,6 +17,7 @@
   ],
   "dependencies": {
     "@material-ui/core": "~4.12.3",
+    "@mui/x-data-grid": "^4.0.2",
     "d3-array": "^2.4.0",
     "d3-scale": "^4.0.0",
     "d3-shape": "^3.2.0",
@@ -29,12 +30,12 @@
     "react-aria": "^3.28.0",
     "internmap": "^2.0.3",
     "uuid": "^9.0.0",
-    "@vitessce/constants-internal": "3.5.9",
-    "@vitessce/sets-utils": "3.5.9",
-    "@vitessce/utils": "3.5.9",
-    "@vitessce/vega": "3.5.9",
-    "@vitessce/vit-s": "3.5.9",
-    "@vitessce/gl": "3.5.9"
+    "@vitessce/constants-internal": "3.5.11",
+    "@vitessce/sets-utils": "3.5.11",
+    "@vitessce/utils": "3.5.11",
+    "@vitessce/vega": "3.5.11",
+    "@vitessce/vit-s": "3.5.11",
+    "@vitessce/gl": "3.5.11"
   },
   "devDependencies": {
     "react": "^18.0.0",