@vitessce/statistical-plots 3.5.6 → 3.5.8

package/dist-tsc/Treemap.js

@@ -0,0 +1,154 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/* eslint-disable indent */
+/* eslint-disable camelcase */
+import React, { useMemo, useEffect, useRef } from 'react';
+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 { 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
+// other elements contained in the DOM.
+function uidGenerator(prefix) {
+    let i = 0;
+    return () => {
+        i += 1;
+        return { id: `${prefix}-${i}`, href: `#${prefix}-${i}` };
+    };
+}
+/**
+ * Renders a treemap plot using D3.
+ * References:
+ * - https://observablehq.com/@d3/treemap-component
+ * - https://observablehq.com/@d3/treemap-stratify
+ * - https://observablehq.com/@d3/json-treemap
+ * - https://observablehq.com/@d3/nested-treemap
+ * @returns
+ */
+export default function Treemap(props) {
+    const { obsCounts, obsColorEncoding, hierarchyLevels, theme, width, height, obsType, sampleType, obsSetColor, sampleSetColor, obsSetSelection, sampleSetSelection, marginTop = 5, marginRight = 5, marginLeft = 80, marginBottom, } = props;
+    const hierarchyData = useMemo(() => {
+        // Support both sampleSet->obsSet and
+        // obsSet->sampleSet hierarchy modes
+        if (!obsCounts) {
+            return null;
+        }
+        let map;
+        if (isEqual(hierarchyLevels, ['sampleSet', 'obsSet'])) {
+            map = d3_rollup(obsCounts, D => D[0].value, d => d.sampleSetPath, d => d.obsSetPath);
+        }
+        else if (isEqual(hierarchyLevels, ['obsSet', 'sampleSet'])) {
+            map = d3_rollup(obsCounts, D => D[0].value, d => d.obsSetPath, d => d.sampleSetPath);
+        }
+        else {
+            throw new Error('Unexpected levels value.');
+        }
+        return d3_hierarchy(map);
+    }, [obsCounts, hierarchyLevels]);
+    const [obsSetColorScale, sampleSetColorScale] = useMemo(() => [
+        getColorScale(obsSetSelection, obsSetColor, theme),
+        getColorScale(sampleSetSelection, sampleSetColor, theme),
+    ], [obsSetSelection, sampleSetSelection, sampleSetColor, obsSetColor, theme]);
+    const treemapLeaves = useMemo(() => {
+        const treemapFunc = treemap()
+            .tile(treemapBinary)
+            .size([width, height])
+            .padding(1)
+            .round(true);
+        // When d3.hierarchy is passed a Map object,
+        // the nodes are represented like [key, value] tuples.
+        // So in `.sum` and `.sort` below,
+        // `d[1]` accesses the value (i.e., cell count).
+        // Reference: https://d3js.org/d3-hierarchy/hierarchy#hierarchy
+        const treemapLayout = treemapFunc(hierarchyData
+            .sum(d => d[1])
+            .sort((a, b) => b[1] - a[1]));
+        return treemapLayout.leaves();
+    }, [hierarchyData, width, height]);
+    const svgRef = useRef();
+    useEffect(() => {
+        const domElement = svgRef.current;
+        const svg = select(domElement);
+        svg.selectAll('g').remove();
+        svg
+            .attr('width', width)
+            .attr('height', height)
+            .attr('viewBox', [0, 0, width, height])
+            .attr('style', 'font: 10px sans-serif');
+        if (!treemapLeaves || !obsSetSelection || !sampleSetSelection) {
+            return;
+        }
+        // Add a group for each leaf of the hierarchy.
+        const leaf = svg.selectAll('g')
+            .data(treemapLeaves)
+            .join('g')
+            .attr('transform', d => `translate(${d.x0},${d.y0})`);
+        // Append a tooltip.
+        leaf.append('title')
+            .text((d) => {
+            const cellCount = d.data?.[1];
+            const primaryPathString = JSON.stringify(d.data[0]);
+            const secondaryPathString = JSON.stringify(d.parent.data[0]);
+            return `${cellCount.toLocaleString()} ${plur(obsType, cellCount)} in ${primaryPathString} and ${secondaryPathString}`;
+        });
+        const getLeafUid = uidGenerator('leaf');
+        const getClipUid = uidGenerator('clip');
+        const colorScale = obsColorEncoding === 'sampleSetSelection'
+            ? sampleSetColorScale
+            : obsSetColorScale;
+        const getPathForColoring = d => (
+        // eslint-disable-next-line no-nested-ternary
+        obsColorEncoding === 'sampleSetSelection'
+            ? (hierarchyLevels[0] === 'obsSet' ? d.data?.[0] : d.parent?.data?.[0])
+            : (hierarchyLevels[0] === 'sampleSet' ? d.data?.[0] : d.parent?.data?.[0]));
+        // Append a color rectangle for each leaf.
+        leaf.append('rect')
+            .attr('id', (d) => {
+            // eslint-disable-next-line no-param-reassign
+            d.leafUid = getLeafUid();
+            return d.leafUid.id;
+        })
+            .attr('fill', d => colorScale(getPathForColoring(d)))
+            .attr('fill-opacity', 0.8)
+            .attr('width', d => d.x1 - d.x0)
+            .attr('height', d => d.y1 - d.y0);
+        // Append a clipPath to ensure text does not overflow.
+        leaf.append('clipPath')
+            .attr('id', (d) => {
+            // eslint-disable-next-line no-param-reassign
+            d.clipUid = getClipUid();
+            return d.clipUid.id;
+        })
+            .append('use')
+            .attr('xlink:href', d => d.leafUid.href);
+        // 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),
+            `${d.data?.[1].toLocaleString()} ${plur(obsType, d.data?.[1])}`,
+        ]))
+            .join('tspan')
+            .attr('x', 3)
+            // eslint-disable-next-line no-unused-vars
+            .attr('y', (d, i, nodes) => `${(i === nodes.length - 1) * 0.3 + 1.1 + i * 0.9}em`)
+            .text(d => d);
+    }, [width, height, marginLeft, marginBottom, theme, marginTop, marginRight,
+        obsType, sampleType, treemapLeaves, sampleSetColor, sampleSetSelection,
+        obsSetSelection, obsSetColor, obsSetColorScale, sampleSetColorScale,
+        obsColorEncoding, hierarchyLevels,
+    ]);
+    return (_jsx("svg", { ref: svgRef, style: {
+            top: 0,
+            left: 0,
+            width: `${width}px`,
+            height: `${height}px`,
+            position: 'relative',
+        } }));
+}

package/dist-tsc/TreemapOptions.d.ts

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

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

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

package/dist-tsc/TreemapOptions.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { useId } from 'react-aria';
+import { isEqual } from 'lodash-es';
+import { TableCell, TableRow } from '@material-ui/core';
+import { capitalize } from '@vitessce/utils';
+import { usePlotOptionsStyles, OptionSelect, OptionsContainer, } from '@vitessce/vit-s';
+export default function TreemapOptions(props) {
+    const { children, obsType, sampleType, hierarchyLevels, setHierarchyLevels, obsColorEncoding, setObsColorEncoding, } = props;
+    const treemapOptionsId = useId();
+    const classes = usePlotOptionsStyles();
+    function handleColorEncodingChange(event) {
+        setObsColorEncoding(event.target.value);
+    }
+    function handleHierarchyLevelsOrderingChange(event) {
+        if (event.target.value === 'sampleSet') {
+            setHierarchyLevels(['sampleSet', 'obsSet']);
+        }
+        else {
+            setHierarchyLevels(['obsSet', 'sampleSet']);
+        }
+    }
+    const primaryHierarchyLevel = isEqual(hierarchyLevels, ['sampleSet', 'obsSet']) ? 'sampleSet' : 'obsSet';
+    return (_jsxs(OptionsContainer, { children: [children, _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsx("label", { htmlFor: `cell-color-encoding-select-${treemapOptionsId}`, children: "Color Encoding" }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsxs(OptionSelect, { className: classes.select, value: obsColorEncoding, onChange: handleColorEncodingChange, inputProps: {
+                                id: `cell-color-encoding-select-${treemapOptionsId}`,
+                            }, children: [_jsxs("option", { value: "cellSetSelection", children: [capitalize(obsType), " Sets"] }), _jsxs("option", { value: "sampleSetSelection", children: [capitalize(sampleType), " Sets"] })] }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsx("label", { htmlFor: `treemap-set-hierarchy-levels-${treemapOptionsId}`, children: "Primary Hierarchy Level" }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsxs(OptionSelect, { className: classes.select, value: primaryHierarchyLevel, onChange: handleHierarchyLevelsOrderingChange, inputProps: {
+                                id: `hierarchy-level-select-${treemapOptionsId}`,
+                            }, children: [_jsxs("option", { value: "obsSet", children: [capitalize(obsType), " Sets"] }), _jsxs("option", { value: "sampleSet", children: [capitalize(sampleType), " Sets"] })] }) })] })] }));
+}

package/dist-tsc/TreemapSubscriber.d.ts

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

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

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

package/dist-tsc/TreemapSubscriber.js

@@ -0,0 +1,103 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/* eslint-disable no-unused-vars */
+import React, { useMemo } from 'react';
+import { TitleInfo, useCoordination, useLoaders, useUrls, useReady, useGridItemSize, useObsFeatureMatrixIndices, useObsSetsData, useSampleEdgesData, useSampleSetsData, } from '@vitessce/vit-s';
+import { ViewType, COMPONENT_COORDINATION_TYPES, ViewHelpMapping } from '@vitessce/constants-internal';
+import { treeToSelectedSetMap, treeToSetSizesBySetNames, mergeObsSets } from '@vitessce/sets-utils';
+import { pluralize as plur, commaNumber, unnestMap, capitalize } from '@vitessce/utils';
+import { InternMap } from 'internmap';
+import { isEqual } from 'lodash-es';
+import Treemap from './Treemap.js';
+import { useStyles } from './styles.js';
+import TreemapOptions from './TreemapOptions.js';
+const DEFAULT_HIERARCHY_LEVELS = ['obsSet', 'sampleSet'];
+export function TreemapSubscriber(props) {
+    const { coordinationScopes, removeGridComponent, theme, helpText = ViewHelpMapping.TREEMAP, } = props;
+    const classes = useStyles();
+    const loaders = useLoaders();
+    // Get "props" from the coordination space.
+    const [{ dataset, obsType, featureType, featureValueType, obsFilter, obsHighlight, obsSetSelection, obsSetFilter, obsSelection, obsSelectionMode, obsSetHighlight, obsSetColor, obsColorEncoding, additionalObsSets, sampleType, sampleSetSelection, sampleSetFilter, sampleSetColor, sampleSelection, sampleSelectionMode, sampleFilter, sampleFilterMode, sampleHighlight, hierarchyLevels, }, { setObsFilter, setObsSelection, setObsSetFilter, setObsSetSelection, setObsSelectionMode, setObsFilterMode, setObsHighlight, setObsSetColor, setObsColorEncoding, setAdditionalObsSets, setSampleFilter, setSampleSetFilter, setSampleFilterMode, setSampleSelection, setSampleSetSelection, setSampleSelectionMode, setSampleHighlight, setSampleSetColor, setHierarchyLevels, }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType.TREEMAP], coordinationScopes);
+    const [width, height, containerRef] = useGridItemSize();
+    // TODO: how to deal with multimodal cases (multiple obsIndex, one per modality)?
+    const [{ obsIndex }, matrixIndicesStatus, matrixIndicesUrls] = useObsFeatureMatrixIndices(loaders, dataset, false, { obsType, featureType, featureValueType });
+    const [{ obsSets }, obsSetsStatus, obsSetsUrls] = useObsSetsData(loaders, dataset, true, {}, {}, { obsType });
+    const [{ sampleIndex, sampleSets }, sampleSetsStatus, sampleSetsUrls] = useSampleSetsData(loaders, dataset, 
+    // TODO: support `false`, i.e., configurations in which
+    // there are no sampleSets
+    true, { setSampleSetColor }, { sampleSetColor }, { sampleType });
+    const [{ sampleEdges }, sampleEdgesStatus, sampleEdgesUrls] = useSampleEdgesData(loaders, dataset, 
+    // TODO: support `false`, i.e., configurations in which
+    // there are no sampleEdges
+    true, {}, {}, { obsType, sampleType });
+    const isReady = useReady([
+        matrixIndicesStatus,
+        obsSetsStatus,
+        sampleSetsStatus,
+        sampleEdgesStatus,
+    ]);
+    const urls = useUrls([
+        matrixIndicesUrls,
+        obsSetsUrls,
+        sampleSetsUrls,
+        sampleEdgesUrls,
+    ]);
+    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
+    // the _selected_ samples in color in the foreground.
+    const [obsCounts, sampleCounts] = useMemo(() => {
+        const obsResult = new InternMap([], JSON.stringify);
+        const sampleResult = new InternMap([], JSON.stringify);
+        const hasSampleSetSelection = (Array.isArray(sampleSetSelection)
+            && sampleSetSelection.length > 0);
+        const hasCellSetSelection = (Array.isArray(obsSetSelection)
+            && obsSetSelection.length > 0);
+        const sampleSetKeys = hasSampleSetSelection ? sampleSetSelection : [null];
+        const cellSetKeys = hasCellSetSelection ? obsSetSelection : [null];
+        // First level: cell set
+        cellSetKeys.forEach((cellSetKey) => {
+            obsResult.set(cellSetKey, new InternMap([], JSON.stringify));
+            // Second level: sample set
+            sampleSetKeys.forEach((sampleSetKey) => {
+                obsResult.get(cellSetKey).set(sampleSetKey, 0);
+            });
+        });
+        const sampleSetSizes = treeToSetSizesBySetNames(mergedSampleSets, sampleSetSelection, sampleSetSelection, sampleSetColor, theme);
+        sampleSetKeys.forEach((sampleSetKey) => {
+            const sampleSetSize = sampleSetSizes.find(d => isEqual(d.setNamePath, sampleSetKey))?.size;
+            sampleResult.set(sampleSetKey, sampleSetSize || 0);
+        });
+        if (mergedObsSets && obsSetSelection) {
+            const sampleIdToSetMap = sampleSets && sampleSetSelection
+                ? treeToSelectedSetMap(sampleSets, sampleSetSelection)
+                : null;
+            const cellIdToSetMap = treeToSelectedSetMap(mergedObsSets, obsSetSelection);
+            for (let i = 0; i < obsIndex.length; i += 1) {
+                const obsId = obsIndex[i];
+                const cellSet = cellIdToSetMap?.get(obsId);
+                const sampleId = sampleEdges?.get(obsId);
+                const sampleSet = sampleId ? 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
+                    continue;
+                }
+                const prevObsCount = obsResult.get(cellSet)?.get(sampleSet);
+                obsResult.get(cellSet)?.set(sampleSet, prevObsCount + 1);
+            }
+        }
+        return [
+            unnestMap(obsResult, ['obsSetPath', 'sampleSetPath', 'value']),
+            unnestMap(sampleResult, ['sampleSetPath', 'value']),
+        ];
+    }, [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"}

package/dist-tsc/VolcanoPlot.js

@@ -0,0 +1,230 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/* eslint-disable indent */
+/* eslint-disable camelcase */
+import React, { useMemo, useEffect, useRef } from 'react';
+import { scaleLinear } from 'd3-scale';
+import { 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 } from '@vitessce/utils';
+import { getColorScale } 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 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 [xExtent, yExtent] = useMemo(() => {
+        if (!computedData) {
+            return [null, null];
+        }
+        let xExtentResult = d3_extent(computedData.flatMap(d => d3_extent(d.df.logFoldChange)));
+        const xAbsMax = Math.max(Math.abs(xExtentResult[0]), Math.abs(xExtentResult[1]));
+        xExtentResult = [-xAbsMax, xAbsMax];
+        const yExtentResult = d3_extent(computedData.flatMap(d => d3_extent(d.df.minusLog10p.filter(v => Number.isFinite(v)))));
+        return [xExtentResult, yExtentResult];
+    }, [computedData]);
+    const [obsSetColorScale, sampleSetColorScale] = useMemo(() => [
+        getColorScale(obsSetSelection, obsSetColor, theme),
+        getColorScale(sampleSetSelection, sampleSetColor, theme),
+    ], [obsSetSelection, sampleSetSelection, sampleSetColor, obsSetColor, theme]);
+    useEffect(() => {
+        const domElement = svgRef.current;
+        const svg = select(domElement);
+        svg.selectAll('g').remove();
+        svg
+            .attr('width', width)
+            .attr('height', height)
+            .attr('viewBox', [0, 0, width, height])
+            .attr('style', 'font: 10px sans-serif');
+        if (!computedData || !xExtent || !yExtent) {
+            return;
+        }
+        // Render scatterplot
+        const innerWidth = width - marginLeft;
+        const innerHeight = height - marginBottom;
+        const xScale = scaleLinear()
+            .range([marginLeft, width - marginRight])
+            .domain(xExtent);
+        // For the y domain, use the yMin prop
+        // to support a use case such as 'Aspect Ratio',
+        // where the domain minimum should be 1 rather than 0.
+        const yScale = scaleLinear()
+            .domain(yExtent)
+            .range([innerHeight, marginTop])
+            .clamp(true);
+        // Add the axes.
+        svg.append('g')
+            .attr('transform', `translate(0,${height - marginBottom})`)
+            .call(axisBottom(xScale));
+        svg.append('g')
+            .attr('transform', `translate(${marginLeft},0)`)
+            .call(axisLeft(yScale));
+        // Axis titles
+        const titleG = svg.append('g');
+        const fgColor = 'black'; // TODO: use theme to determine this
+        // Y-axis title
+        titleG
+            .append('text')
+            .attr('text-anchor', 'middle')
+            .attr('x', -innerHeight / 2)
+            .attr('y', 15)
+            .attr('transform', 'rotate(-90)')
+            .text('-log10 p-value')
+            .style('font-size', '12px')
+            .style('fill', fgColor);
+        // X-axis title
+        titleG
+            .append('text')
+            .attr('text-anchor', 'middle')
+            .attr('x', marginLeft + innerWidth / 2)
+            .attr('y', height - 10)
+            .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';
+        const ruleDash = '2,2';
+        titleG.append('line')
+            .attr('x1', xScale(featurePointFoldChangeThreshold))
+            .attr('x2', xScale(featurePointFoldChangeThreshold))
+            .attr('y1', yScale.range()[0])
+            .attr('y2', yScale.range()[1])
+            .style('stroke', ruleColor)
+            .style('stroke-dasharray', ruleDash);
+        titleG.append('line')
+            .attr('x1', xScale(-featurePointFoldChangeThreshold))
+            .attr('x2', xScale(-featurePointFoldChangeThreshold))
+            .attr('y1', yScale.range()[0])
+            .attr('y2', yScale.range()[1])
+            .style('stroke', ruleColor)
+            .style('stroke-dasharray', ruleDash);
+        // Horizontal lines
+        titleG.append('line')
+            .attr('x1', xScale.range()[0])
+            .attr('x2', xScale.range()[1])
+            .attr('y1', yScale(-Math.log10(featurePointSignificanceThreshold)))
+            .attr('y2', yScale(-Math.log10(featurePointSignificanceThreshold)))
+            .style('stroke', ruleColor)
+            .style('stroke-dasharray', ruleDash);
+        // Upregulated/downregulated and sampleSet directional indicators.
+        const lhsText = sampleSetSelection && sampleSetSelection.length === 2
+            ? sampleSetSelection[0].at(-1)
+            : '__rest__';
+        // eslint-disable-next-line no-nested-ternary
+        const rhsText = sampleSetSelection && sampleSetSelection.length === 2
+            ? sampleSetSelection[1].at(-1)
+            : (obsSetSelection && obsSetSelection.length === 1
+                ? obsSetSelection?.[0]?.at(-1)
+                : `${capitalize(obsType)} Set`);
+        titleG
+            .append('text')
+            .attr('text-anchor', 'start')
+            .attr('x', marginLeft)
+            .attr('y', height - 10)
+            .text(`\u2190 ${lhsText}`)
+            .style('font-size', '12px')
+            .style('fill', fgColor);
+        titleG
+            .append('text')
+            .attr('text-anchor', 'end')
+            .attr('x', marginLeft + innerWidth)
+            .attr('y', height - 10)
+            .text(`${rhsText} \u2192`)
+            .style('font-size', '12px')
+            .style('fill', fgColor);
+        const g = svg.append('g');
+        // Append a circle for each data point.
+        computedData.forEach((comparisonObject) => {
+            const obsSetG = g.append('g');
+            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]];
+            // 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')
+                .data(filteredDf)
+                .join('circle')
+                .attr('cx', d => xScale(d.logFoldChange))
+                .attr('cy', d => yScale(d.minusLog10p))
+                .attr('r', 3)
+                .attr('opacity', 0.5)
+                .attr('fill', color)
+                .on('click', (event, d) => {
+                onFeatureClick(d.featureId);
+            });
+            const textElements = obsSetG.append('g')
+                .selectAll('text')
+                .data(filteredDf)
+                .join('text')
+                .text(d => d.featureId)
+                .attr('text-anchor', d => (d.logFoldChange < 0 ? 'end' : 'start'))
+                .attr('x', d => xScale(d.logFoldChange))
+                .attr('y', d => yScale(d.minusLog10p))
+                .style('display', d => ((Math.abs(d.logFoldChange) < (featureLabelFoldChangeThreshold ?? 5.0)
+                || (d.featureSignificance >= (featureLabelSignificanceThreshold ?? 0.01))) ? 'none' : undefined))
+                .attr('fill', color)
+                .on('click', (event, d) => {
+                onFeatureClick(d.featureId);
+            });
+            textElements.append('title')
+                .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,
+        xExtent, yExtent, obsType,
+        marginLeft, marginBottom, marginTop, marginRight,
+        obsSetColorScale, sampleSetColorScale, onFeatureClick,
+        featurePointSignificanceThreshold, featurePointFoldChangeThreshold,
+        featureLabelSignificanceThreshold, featureLabelFoldChangeThreshold,
+    ]);
+    return (_jsx("svg", { ref: svgRef, style: {
+            top: 0,
+            left: 0,
+            width: `${width}px`,
+            height: `${height}px`,
+            position: 'relative',
+        } }));
+}

package/dist-tsc/VolcanoPlotOptions.d.ts

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

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

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

package/dist-tsc/VolcanoPlotOptions.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { useId } from 'react-aria';
+import { TableCell, TableRow, Slider } from '@material-ui/core';
+import { usePlotOptionsStyles, OptionsContainer, } from '@vitessce/vit-s';
+export default function VolcanoPlotOptions(props) {
+    const { children, featurePointSignificanceThreshold, featurePointFoldChangeThreshold, featureLabelSignificanceThreshold, featureLabelFoldChangeThreshold, setFeaturePointSignificanceThreshold, setFeaturePointFoldChangeThreshold, setFeatureLabelSignificanceThreshold, setFeatureLabelFoldChangeThreshold, } = props;
+    const volcanoOptionsId = useId();
+    const classes = usePlotOptionsStyles();
+    function handlePointSignificanceChange(event, value) {
+        setFeaturePointSignificanceThreshold(10 ** -value);
+    }
+    function handlePointFoldChangeChange(event, value) {
+        setFeaturePointFoldChangeThreshold(value);
+    }
+    function handleLabelSignificanceChange(event, value) {
+        setFeatureLabelSignificanceThreshold(10 ** -value);
+    }
+    function handleLabelFoldChangeChange(event, value) {
+        setFeatureLabelFoldChangeThreshold(value);
+    }
+    return (_jsxs(OptionsContainer, { children: [children, _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsx("label", { htmlFor: `volcano-label-significance-${volcanoOptionsId}`, children: "Label Significance Threshold" }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsx(Slider, { classes: { root: classes.slider, valueLabel: classes.sliderValueLabel }, value: -Math.log10(featureLabelSignificanceThreshold), onChange: handleLabelSignificanceChange, "aria-label": "Volcano plot label significance threshold slider", id: `volcano-label-significance-${volcanoOptionsId}`, valueLabelDisplay: "auto", step: 1, min: 0, max: 100 }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsx("label", { htmlFor: `volcano-label-fc-${volcanoOptionsId}`, children: "Label Fold-Change Threshold" }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsx(Slider, { classes: { root: classes.slider, valueLabel: classes.sliderValueLabel }, value: featureLabelFoldChangeThreshold, onChange: handleLabelFoldChangeChange, "aria-label": "Volcano plot label fold-change threshold slider", id: `volcano-label-fc-${volcanoOptionsId}`, valueLabelDisplay: "auto", step: 0.5, min: 0, max: 50 }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsx("label", { htmlFor: `volcano-point-significance-${volcanoOptionsId}`, children: "Point Significance Threshold" }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsx(Slider, { classes: { root: classes.slider, valueLabel: classes.sliderValueLabel }, value: -Math.log10(featurePointSignificanceThreshold), onChange: handlePointSignificanceChange, "aria-label": "Volcano plot point significance threshold slider", id: `volcano-point-significance-${volcanoOptionsId}`, valueLabelDisplay: "auto", step: 1, min: 0, max: 100 }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsx("label", { htmlFor: `volcano-point-fc-${volcanoOptionsId}`, children: "Point Fold-Change Threshold" }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsx(Slider, { classes: { root: classes.slider, valueLabel: classes.sliderValueLabel }, value: featurePointFoldChangeThreshold, onChange: handlePointFoldChangeChange, "aria-label": "Volcano plot point fold-change threshold slider", id: `volcano-point-fc-${volcanoOptionsId}`, valueLabelDisplay: "auto", step: 0.5, min: 0, max: 50 }) })] })] }));
+}

package/dist-tsc/VolcanoPlotSubscriber.d.ts

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

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

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

package/dist-tsc/VolcanoPlotSubscriber.js

@@ -0,0 +1,33 @@
+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, useFeatureStatsData, useMatchingLoader, useColumnNameMapping, } from '@vitessce/vit-s';
+import { ViewType, COMPONENT_COORDINATION_TYPES, ViewHelpMapping, DataType, } from '@vitessce/constants-internal';
+import VolcanoPlot from './VolcanoPlot.js';
+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 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.VOLCANO_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 sampleSetsColumnNameMapping = useColumnNameMapping(sampleSetsLoader);
+    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,
+    ]);
+    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."] })) }) }));
+}

package/dist-tsc/index.d.ts

@@ -3,6 +3,10 @@ export { CellSetSizesPlotSubscriber } from "./CellSetSizesPlotSubscriber.js";
 export { ExpressionHistogramSubscriber } from "./ExpressionHistogramSubscriber.js";
 export { DotPlotSubscriber } from "./DotPlotSubscriber.js";
 export { FeatureBarPlotSubscriber } from "./FeatureBarPlotSubscriber.js";
+export { TreemapSubscriber } from "./TreemapSubscriber.js";
+export { VolcanoPlotSubscriber } from "./VolcanoPlotSubscriber.js";
+export { CellSetCompositionBarPlotSubscriber } from "./CellSetCompositionBarPlotSubscriber.js";
+export { FeatureSetEnrichmentBarPlotSubscriber } from "./FeatureSetEnrichmentBarPlotSubscriber.js";
 export { default as CellSetSizesPlot } from "./CellSetSizesPlot.js";
 export { default as CellSetExpressionPlot } from "./CellSetExpressionPlot.js";
 export { default as ExpressionHistogram } from "./ExpressionHistogram.js";