@vitessce/statistical-plots 3.5.7 → 3.5.8

package/dist/index.js

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

package/dist/{jpeg-1b2c1d25.js → jpeg-280f0ee1.js}

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

package/dist/{lerc-4f010cd7.js → lerc-12264a36.js}

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

package/dist/{lzw-e60fb582.js → lzw-70f852cc.js}

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

package/dist/{packbits-a8bfe098.js → packbits-393c67b2.js}

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

package/dist/{raw-01dff90e.js → raw-d8d7ab7f.js}

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

package/dist/{webimage-6b926ce3.js → webimage-5d24a8e2.js}

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

package/dist-tsc/CellSetCompositionBarPlot.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Cell set composition results displayed using a bar chart.
+ */
+export default function CellSetCompositionBarPlot(props: any): JSX.Element;
+//# sourceMappingURL=CellSetCompositionBarPlot.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CellSetCompositionBarPlot.d.ts","sourceRoot":"","sources":["../src/CellSetCompositionBarPlot.js"],"names":[],"mappings":"AAOA;;GAEG;AACH,2EAkMC"}

package/dist-tsc/CellSetCompositionBarPlot.js

@@ -0,0 +1,166 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useCallback, useMemo } from 'react';
+import { clamp, isEqual } from 'lodash-es';
+import { v4 as uuidv4 } from 'uuid';
+import { VegaPlot, VEGA_THEMES } from '@vitessce/vega';
+import { capitalize } from '@vitessce/utils';
+import { getColorScale } from './utils.js';
+/**
+ * Cell set composition results displayed using a bar chart.
+ */
+export default function CellSetCompositionBarPlot(props) {
+    const { data, theme, width, height, marginRight = 200, marginBottom = 120, keyLength = 36, obsType, onBarSelect, obsSetsColumnNameMappingReversed, sampleSetsColumnNameMappingReversed, sampleSetSelection, obsSetSelection, obsSetColor, sampleSetColor, } = props;
+    const [obsSetColorScale, sampleSetColorScale] = useMemo(() => [
+        getColorScale(obsSetSelection, obsSetColor, theme),
+        getColorScale(sampleSetSelection, sampleSetColor, theme),
+    ], [obsSetSelection, sampleSetSelection, sampleSetColor, obsSetColor, theme]);
+    const computedData = useMemo(() => {
+        if (Array.isArray(data) && data.length === 1) {
+            // We expect only one returned data frame.
+            const { df, metadata } = data[0];
+            // Return in array-of-objects form that Vega-Lite likes.
+            const referenceCellType = metadata?.analysis_params?.reference_cell_type;
+            const coordinationValues = metadata?.coordination_values;
+            const obsSetColumnName = coordinationValues?.obsSetSelection?.[0]?.[0];
+            const obsSetGroupName = obsSetsColumnNameMappingReversed?.[obsSetColumnName];
+            const sampleSetColumnName = coordinationValues?.sampleSetFilter?.[0]?.[0];
+            const sampleSetGroupName = sampleSetsColumnNameMappingReversed?.[sampleSetColumnName];
+            // See https://github.com/keller-mark/compasce/issues/30 which should simplify this logic once implemented,
+            // so that we would no longer need to load/check the covariate column in the frontend.
+            const covariatePrefix = `${sampleSetColumnName}T.`;
+            const firstCovariateValue = df.covariate?.[0]?.substring(covariatePrefix.length);
+            const firstCovariateSetPath = [sampleSetGroupName, firstCovariateValue];
+            let shouldSwapFoldChangeDirection = false;
+            if (isEqual(firstCovariateSetPath, sampleSetSelection[0])) {
+                shouldSwapFoldChangeDirection = true;
+            }
+            return df.obsSetId.map((obsSetId, i) => {
+                const key = uuidv4();
+                const isReferenceSet = (obsSetId === referenceCellType);
+                const name = `${obsSetId}${(isReferenceSet ? ' (reference set)' : '')}`;
+                const obsSetPath = [obsSetGroupName, obsSetId];
+                const color = obsSetColorScale(obsSetPath);
+                return {
+                    name,
+                    // Reconstruct set path array.
+                    obsSetPath,
+                    color,
+                    // Unique key per bar
+                    key,
+                    // Add a property `keyName` which concatenates the key and the name,
+                    // which is both unique and can easily be converted
+                    // back to the name by taking a substring.
+                    keyName: `${key}${name}`,
+                    // Swap direction of foldChange/logFC if necessary
+                    obsSetFoldChange: df.obsSetFoldChange[i] * (shouldSwapFoldChangeDirection ? -1 : 1),
+                    logFoldChange: (Math.log2(df.obsSetFoldChange[i]) * (shouldSwapFoldChangeDirection ? -1 : 1)),
+                    interceptExpectedSample: df.interceptExpectedSample[i],
+                    effectExpectedSample: df.effectExpectedSample[i],
+                    isCredibleEffect: df.isCredibleEffect[i],
+                    // Boolean flag for wasReferenceObsSet (check metadata)
+                    isReferenceSet: (obsSetId === referenceCellType),
+                };
+            }).filter(d => obsSetSelection
+                ?.find(setNamePath => isEqual(setNamePath, d.obsSetPath)));
+        }
+        return null;
+    }, [data, sampleSetSelection, obsSetsColumnNameMappingReversed,
+        sampleSetsColumnNameMappingReversed, obsSetSelection,
+        obsSetColorScale, sampleSetColorScale,
+    ]);
+    // Get an array of keys for sorting purposes.
+    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),
+    };
+    const captializedObsType = capitalize(obsType);
+    const opacityScale = {
+        domain: [true, false],
+        range: [1.0, 0.3],
+    };
+    const strokeWidthScale = {
+        domain: [true, false],
+        range: [2.0, 0.5],
+    };
+    const spec = {
+        mark: { type: 'bar', stroke: 'black', cursor: 'pointer' },
+        params: [
+            {
+                name: 'bar_select',
+                select: {
+                    type: 'point',
+                    on: 'click[event.shiftKey === false]',
+                    fields: ['obsSetPath'],
+                    empty: 'none',
+                },
+            },
+            {
+                name: 'shift_bar_select',
+                select: {
+                    type: 'point',
+                    on: 'click[event.shiftKey]',
+                    fields: ['obsSetPath'],
+                    empty: 'none',
+                },
+            },
+        ],
+        encoding: {
+            y: {
+                field: 'keyName',
+                type: 'nominal',
+                axis: { labelExpr: `substring(datum.label, ${keyLength})` },
+                title: `${captializedObsType} Set`,
+                sort: keys,
+            },
+            x: {
+                // TODO: support using intercept+effect here based on user-selected options?
+                field: 'logFoldChange',
+                type: 'quantitative',
+                title: 'Log fold-change',
+            },
+            color: {
+                field: 'key',
+                type: 'nominal',
+                scale: colorScale,
+                legend: null,
+            },
+            fillOpacity: {
+                field: 'isCredibleEffect',
+                type: 'nominal',
+                scale: opacityScale,
+            },
+            strokeWidth: {
+                field: 'isReferenceSet',
+                type: 'nominal',
+                scale: strokeWidthScale,
+            },
+            tooltip: {
+                field: 'effectExpectedSample',
+                type: 'quantitative',
+            },
+        },
+        // TODO: for width, also subtract length of longest y-axis set name label.
+        width: clamp(width - marginRight, 10, Infinity),
+        height: clamp(height - marginBottom, 10, Infinity),
+        config: VEGA_THEMES[theme],
+    };
+    const handleSignal = (name, value) => {
+        if (name === 'bar_select') {
+            onBarSelect(value.obsSetPath);
+        }
+        else if (name === 'shift_bar_select') {
+            onBarSelect(value.obsSetPath, true);
+        }
+    };
+    const signalListeners = { bar_select: handleSignal, shift_bar_select: handleSignal };
+    const getTooltipText = useCallback(item => ({
+        [`${captializedObsType} Set`]: item.datum.name,
+        'Log fold-change': item.datum.logFoldChange,
+        interceptExpectedSample: item.datum.interceptExpectedSample,
+        effectExpectedSample: item.datum.effectExpectedSample,
+    }), [captializedObsType]);
+    return (_jsx(VegaPlot, { data: computedData, spec: spec, signalListeners: signalListeners, getTooltipText: getTooltipText }));
+}

package/dist-tsc/CellSetCompositionBarPlotSubscriber.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"CellSetCompositionBarPlotSubscriber.d.ts","sourceRoot":"","sources":["../src/CellSetCompositionBarPlotSubscriber.js"],"names":[],"mappings":"AAwBA,6EA8HC"}

package/dist-tsc/CellSetCompositionBarPlotSubscriber.js

@@ -0,0 +1,40 @@
+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, useReady, useGridItemSize, useObsSetStatsData, useMatchingLoader, useColumnNameMapping, } from '@vitessce/vit-s';
+import { ViewType, COMPONENT_COORDINATION_TYPES, ViewHelpMapping, DataType, } from '@vitessce/constants-internal';
+import { capitalize } from '@vitessce/utils';
+import CellSetCompositionBarPlot from './CellSetCompositionBarPlot.js';
+import { useStyles } from './styles.js';
+import { useRawSetPaths } from './utils.js';
+export function CellSetCompositionBarPlotSubscriber(props) {
+    const { coordinationScopes, removeGridComponent, theme, helpText = ViewHelpMapping.OBS_SET_COMPOSITION_BAR_PLOT, } = props;
+    const classes = useStyles();
+    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, featureLabelSignificanceThreshold, featureLabelFoldChangeThreshold, featureValueTransform, featureValueTransformCoefficient, gatingFeatureSelectionX, gatingFeatureSelectionY, featureSelection, sampleSetSelection, sampleSetColor, }, { setObsFilter: setCellFilter, setObsSetSelection, setObsHighlight: setCellHighlight, setObsSetColor: setCellSetColor, setObsColorEncoding: setCellColorEncoding, setAdditionalObsSets: setAdditionalCellSets, setFeaturePointSignificanceThreshold, setFeaturePointFoldChangeThreshold, setFeatureLabelSignificanceThreshold, setFeatureLabelFoldChangeThreshold, setFeatureValueTransform, setFeatureValueTransformCoefficient, setGatingFeatureSelectionX, setGatingFeatureSelectionY, setFeatureSelection, setSampleSetSelection, setSampleSetColor, }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType.OBS_SET_COMPOSITION_BAR_PLOT], coordinationScopes);
+    const [width, height, containerRef] = useGridItemSize();
+    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 [{ obsSetStats }, obsSetStatsStatus] = useObsSetStatsData(loaders, dataset, false, { obsType, sampleType }, 
+    // These volcanoOptions are passed to ObsSetStatsAnndataLoader.loadMulti():
+    { sampleSetSelection: rawSampleSetSelection, obsSetSelection: rawObsSetSelection });
+    const isReady = useReady([
+        obsSetStatsStatus,
+    ]);
+    // Support a click handler which selects individual cell set bars.
+    const onBarSelect = useCallback((setNamePath, isShiftDown = false) => {
+        // TODO: Implement different behavior when isShiftDown
+        setObsSetSelection([setNamePath]);
+    }, [setObsSetSelection]);
+    // 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."] })) }) }));
+}

package/dist-tsc/FeatureSetEnrichmentBarPlot.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Feature set enrichment test results displayed using a bar chart.
+ */
+export default function FeatureSetEnrichmentBarPlot(props: any): JSX.Element;
+//# sourceMappingURL=FeatureSetEnrichmentBarPlot.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FeatureSetEnrichmentBarPlot.d.ts","sourceRoot":"","sources":["../src/FeatureSetEnrichmentBarPlot.js"],"names":[],"mappings":"AAOA;;GAEG;AACH,6EAgMC"}

package/dist-tsc/FeatureSetEnrichmentBarPlot.js

@@ -0,0 +1,164 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useCallback, useMemo } from 'react';
+import { clamp } from 'lodash-es';
+import { v4 as uuidv4 } from 'uuid';
+import { VegaPlot, VEGA_THEMES } from '@vitessce/vega';
+import { capitalize } from '@vitessce/utils';
+import { getColorScale } from './utils.js';
+/**
+ * Feature set enrichment test results displayed using a bar chart.
+ */
+export default function FeatureSetEnrichmentBarPlot(props) {
+    const { data, theme, width, height, marginRight = 200, marginBottom = 120, keyLength = 36, featureType, onBarSelect, obsSetsColumnNameMappingReversed, sampleSetsColumnNameMappingReversed, sampleSetSelection, obsSetSelection, obsSetColor, sampleSetColor, pValueThreshold, } = props;
+    const [obsSetColorScale, sampleSetColorScale] = useMemo(() => [
+        getColorScale(obsSetSelection, obsSetColor, theme),
+        getColorScale(sampleSetSelection, sampleSetColor, theme),
+    ], [obsSetSelection, sampleSetSelection, sampleSetColor, obsSetColor, theme]);
+    const computedData = useMemo(() => {
+        if (Array.isArray(data)) {
+            let result = [];
+            data.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 color = obsSetColorScale(obsSetPath);
+                df.featureSetName.forEach((featureSetName, i) => {
+                    const key = uuidv4();
+                    result.push({
+                        key,
+                        name: featureSetName,
+                        term: df.featureSetTerm[i],
+                        color,
+                        obsSetPath,
+                        obsSetPaths: [obsSetPath],
+                        obsSetNameToPval: { [obsSetPath.at(-1)]: df.featureSetSignificance[i] },
+                        keyName: `${key}${featureSetName}`,
+                        featureSetSignificance: df.featureSetSignificance[i],
+                        minusLog10p: -Math.log10(df.featureSetSignificance[i]),
+                        // Color based on obsSet
+                    });
+                });
+            });
+            // TODO: instead of filtering, perhaps use virtual scrolling
+            // (would require custom renderer / not using Vega-Lite).
+            result = result
+                .map(d => ({
+                ...d,
+                minusLog10p: Math.min(50, d.minusLog10p), // Clamp infinite values at 50
+            }))
+                .filter(d => d.featureSetSignificance <= pValueThreshold)
+                .toSorted((a, b) => a.featureSetSignificance - b.featureSetSignificance)
+                .reduce((a, h) => {
+                // Only add the pathway once if it appears for multiple cell types?
+                const match = a.find(d => d.name === h.name);
+                if (match) {
+                    match.obsSetPaths.push(h.obsSetPath);
+                    match.obsSetNameToPval[h.obsSetPath.at(-1)] = h.featureSetSignificance;
+                    return a;
+                }
+                return [...a, h];
+            }, []);
+            const MAX_ROWS = 25;
+            result = result.slice(0, MAX_ROWS);
+            return result;
+        }
+        return null;
+    }, [data, sampleSetSelection, obsSetsColumnNameMappingReversed,
+        sampleSetsColumnNameMappingReversed, obsSetSelection,
+        obsSetColorScale, sampleSetColorScale, pValueThreshold,
+    ]);
+    // Get an array of keys for sorting purposes.
+    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),
+    };
+    const captializedFeatureType = capitalize(featureType);
+    const spec = {
+        mark: { type: 'bar', stroke: 'black', cursor: 'pointer' },
+        params: [
+            {
+                name: 'bar_select',
+                select: {
+                    type: 'point',
+                    on: 'click[event.shiftKey === false]',
+                    fields: ['name'],
+                    empty: 'none',
+                },
+            },
+            {
+                name: 'shift_bar_select',
+                select: {
+                    type: 'point',
+                    on: 'click[event.shiftKey]',
+                    fields: ['name'],
+                    empty: 'none',
+                },
+            },
+        ],
+        encoding: {
+            y: {
+                field: 'keyName',
+                type: 'nominal',
+                axis: { labelExpr: `substring(datum.label, ${keyLength})` },
+                title: `${captializedFeatureType} Set`,
+                sort: keys,
+            },
+            x: {
+                field: 'minusLog10p',
+                type: 'quantitative',
+                title: '- log10 p-value',
+            },
+            color: {
+                field: 'key',
+                type: 'nominal',
+                scale: colorScale,
+                legend: null,
+            },
+            /*
+            fillOpacity: {
+              field: 'isCredibleEffect',
+              type: 'nominal',
+              scale: opacityScale,
+            },
+            strokeWidth: {
+              field: 'isReferenceSet',
+              type: 'nominal',
+              scale: strokeWidthScale,
+            },
+            */
+            tooltip: {
+                field: 'featureSetSignificance',
+                type: 'quantitative',
+            },
+        },
+        // TODO: for width, also subtract length of longest y-axis set name label.
+        width: clamp(width - marginRight, 10, Infinity),
+        height: clamp(height - marginBottom, 10, Infinity),
+        config: VEGA_THEMES[theme],
+    };
+    const handleSignal = (name, value) => {
+        if (name === 'bar_select') {
+            onBarSelect(value.obsSetPath);
+        }
+        else if (name === 'shift_bar_select') {
+            onBarSelect(value.obsSetPath, true);
+        }
+    };
+    const signalListeners = { bar_select: handleSignal, shift_bar_select: handleSignal };
+    const getTooltipText = useCallback(item => ({
+        [`${captializedFeatureType} Set`]: item.datum.name,
+        'Ontology Term': item.datum.term,
+        ...Object.fromEntries(Object.entries(item.datum.obsSetNameToPval).map(([cellSetName, pVal]) => ([
+            `p-value for ${cellSetName}`,
+            pVal,
+        ]))),
+    }), [captializedFeatureType]);
+    return (_jsx(VegaPlot, { data: computedData, spec: spec, signalListeners: signalListeners, getTooltipText: getTooltipText }));
+}

package/dist-tsc/FeatureSetEnrichmentBarPlotSubscriber.d.ts

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

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

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

package/dist-tsc/FeatureSetEnrichmentBarPlotSubscriber.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable no-unused-vars */
+import React, { useCallback } from 'react';
+import { TitleInfo, useCoordination, useLoaders, useReady, useGridItemSize, useFeatureSetStatsData, useMatchingLoader, useColumnNameMapping, useAsyncFunction, } from '@vitessce/vit-s';
+import { ViewType, COMPONENT_COORDINATION_TYPES, ViewHelpMapping, DataType, AsyncFunctionType, } from '@vitessce/constants-internal';
+import { capitalize } from '@vitessce/utils';
+import FeatureSetEnrichmentBarPlot from './FeatureSetEnrichmentBarPlot.js';
+import { useStyles } from './styles.js';
+import { useRawSetPaths } from './utils.js';
+export function FeatureSetEnrichmentBarPlotSubscriber(props) {
+    const { coordinationScopes, removeGridComponent, theme, helpText = ViewHelpMapping.FEATURE_SET_ENRICHMENT_BAR_PLOT, } = props;
+    const classes = useStyles();
+    const loaders = useLoaders();
+    const transformFeature = useAsyncFunction(AsyncFunctionType.TRANSFORM_FEATURE);
+    // Get "props" from the coordination space.
+    const [{ dataset, obsType, sampleType, featureType, featureValueType, obsFilter: cellFilter, obsHighlight: cellHighlight, obsSetSelection, obsSetColor, obsColorEncoding: cellColorEncoding, additionalObsSets: additionalCellSets, featurePointSignificanceThreshold, featurePointFoldChangeThreshold, featureLabelSignificanceThreshold, featureLabelFoldChangeThreshold, featureValueTransform, featureValueTransformCoefficient, gatingFeatureSelectionX, gatingFeatureSelectionY, featureSelection, sampleSetSelection, sampleSetColor, }, { setObsFilter: setCellFilter, setObsSetSelection, setObsHighlight: setCellHighlight, setObsSetColor: setCellSetColor, setObsColorEncoding: setCellColorEncoding, setAdditionalObsSets: setAdditionalCellSets, setFeaturePointSignificanceThreshold, setFeaturePointFoldChangeThreshold, setFeatureLabelSignificanceThreshold, setFeatureLabelFoldChangeThreshold, setFeatureValueTransform, setFeatureValueTransformCoefficient, setGatingFeatureSelectionX, setGatingFeatureSelectionY, setFeatureSelection, setSampleSetSelection, setSampleSetColor, }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType.FEATURE_SET_ENRICHMENT_BAR_PLOT], coordinationScopes);
+    const [width, height, containerRef] = useGridItemSize();
+    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 [{ featureSetStats }, featureSetStatsStatus] = useFeatureSetStatsData(loaders, dataset, false, { obsType, featureType, sampleType }, 
+    // These volcanoOptions are passed to ObsSetStatsAnndataLoader.loadMulti():
+    { sampleSetSelection: rawSampleSetSelection, obsSetSelection: rawObsSetSelection });
+    const isReady = useReady([
+        featureSetStatsStatus,
+    ]);
+    // Support a click handler which selects individual cell set bars.
+    const onBarSelect = useCallback(async (featureSetName, featureSetTerm, isShiftDown = false) => {
+        // TODO: Implement different behavior when isShiftDown
+        // TODO: get feature IDs using AsyncFunction transformFeature
+        // (pathway term in, gene names out).
+        const kgNode = { nodeType: 'pathway', term: featureSetTerm };
+        const targetFeatureType = featureType;
+        // 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);
+    }, [setFeatureSelection]);
+    // TODO: support the following options
+    // - p-value threshold for which bars to show
+    // - max number of bars to show
+    // - Boolean flag: should same pathway which appears multiple times
+    //   be de-duplicated (one bar per pathway, using most-significant result)?
+    return (_jsx(TitleInfo, { title: `${capitalize(featureType)} Set Enrichment Plot`, removeGridComponent: removeGridComponent, theme: theme, isReady: isReady, helpText: helpText, children: _jsx("div", { ref: containerRef, className: classes.vegaContainer, children: featureSetStats ? (_jsx(FeatureSetEnrichmentBarPlot, { 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: featureSetStats, onBarSelect: onBarSelect, pValueThreshold: 0.01 })) : (_jsxs("span", { 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":"AAqCA;;;;;;;;GAQG;AACH,yDA0KC"}
+{"version":3,"file":"Treemap.d.ts","sourceRoot":"","sources":["../src/Treemap.js"],"names":[],"mappings":"AAsBA;;;;;;;;GAQG;AACH,yDA0KC"}

package/dist-tsc/Treemap.js

@@ -2,13 +2,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
 /* eslint-disable indent */
 /* eslint-disable camelcase */
 import React, { useMemo, useEffect, useRef } from 'react';
-import { scaleOrdinal } from 'd3-scale';
 import { select } from 'd3-selection';
 import { treemap, treemapBinary, hierarchy as d3_hierarchy } from 'd3-hierarchy';
 import { rollup as d3_rollup } from 'd3-array';
 import { isEqual } from 'lodash-es';
-import { colorArrayToString } from '@vitessce/sets-utils';
-import { getDefaultColor, pluralize as plur } from '@vitessce/utils';
+import { pluralize as plur } from '@vitessce/utils';
+import { getColorScale } from './utils.js';
 // Based on Observable's built-in DOM.uid function.
 // This is intended to be used with SVG clipPaths
 // which require a unique href value to reference
@@ -20,15 +19,6 @@ function uidGenerator(prefix) {
         return { id: `${prefix}-${i}`, href: `#${prefix}-${i}` };
     };
 }
-// Create a d3-scale ordinal scale mapping set paths to color strings.
-function getColorScale(setSelectionArr, setColorArr, theme) {
-    return scaleOrdinal()
-        .domain(setSelectionArr || [])
-        .range(setSelectionArr
-        ?.map(setNamePath => (setColorArr?.find(d => isEqual(d.path, setNamePath))?.color
-        || getDefaultColor(theme)))
-        ?.map(colorArrayToString) || []);
-}
 /**
  * Renders a treemap plot using D3.
  * References:

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

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

package/dist-tsc/TreemapSubscriber.js

@@ -96,6 +96,7 @@ export function TreemapSubscriber(props) {
         ];
     }, [obsIndex, sampleEdges, sampleSets, obsSetColor,
         sampleSetColor, mergedObsSets, obsSetSelection, mergedSampleSets,
+        sampleSetSelection,
         // TODO: consider filtering-related coordination values
     ]);
     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 }) }) }));

package/dist-tsc/VolcanoPlot.d.ts

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

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

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