@vitessce/statistical-plots 3.5.6 → 3.5.8

package/dist-tsc/index.js

@@ -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';

package/dist-tsc/utils.d.ts

@@ -0,0 +1,9 @@
+export function getColorScale(setSelectionArr: any, setColorArr: any, theme: any): (queryVal: any) => any;
+/**
+ * Transform set paths which use group names to those which use column names.
+ * @param {Record<string, string>} columnNameMapping Return value of useColumnNameMapping.
+ * @param {string[][]} setPaths Array of set paths, such as obsSetSelection.
+ * @returns {string[][]} Transformed set paths.
+ */
+export function useRawSetPaths(columnNameMapping: Record<string, string>, setPaths: string[][]): string[][];
+//# sourceMappingURL=utils.d.ts.map

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

@@ -0,0 +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"}

package/dist-tsc/utils.js

@@ -0,0 +1,40 @@
+import { useMemo } from 'react';
+import { isEqual } from 'lodash-es';
+import { colorArrayToString } from '@vitessce/sets-utils';
+import { getDefaultColor } from '@vitessce/utils';
+function createOrdinalScale(domainArr, rangeArr) {
+    return (queryVal) => {
+        const i = domainArr.findIndex(domainVal => isEqual(domainVal, queryVal));
+        return rangeArr[i];
+    };
+}
+// Create a d3-scale ordinal scale mapping set paths to color strings.
+export function getColorScale(setSelectionArr, setColorArr, theme) {
+    /*
+    // The equality seems incorrect with d3.scaleOrdinal
+    return scaleOrdinal()
+      .domain(setSelectionArr || [])
+      .range(
+      */
+    const domainArr = setSelectionArr || [];
+    const rangeArr = setSelectionArr
+        ?.map(setNamePath => (setColorArr?.find(d => isEqual(d.path, setNamePath))?.color
+        || getDefaultColor(theme)))
+        ?.map(colorArrayToString) || [];
+    return createOrdinalScale(domainArr, rangeArr);
+}
+/**
+ * Transform set paths which use group names to those which use column names.
+ * @param {Record<string, string>} columnNameMapping Return value of useColumnNameMapping.
+ * @param {string[][]} setPaths Array of set paths, such as obsSetSelection.
+ * @returns {string[][]} Transformed set paths.
+ */
+export function useRawSetPaths(columnNameMapping, setPaths) {
+    return useMemo(() => setPaths?.map((setPath) => {
+        const newSetPath = [...setPath];
+        if (newSetPath?.[0] && columnNameMapping[newSetPath[0]]) {
+            newSetPath[0] = columnNameMapping[newSetPath[0]];
+        }
+        return newSetPath;
+    }), [columnNameMapping, setPaths]);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitessce/statistical-plots",
-  "version": "3.5.6",
+  "version": "3.5.8",
   "author": "HIDIVE Lab at HMS",
   "homepage": "http://vitessce.io",
   "repository": {
@@ -23,17 +23,18 @@
     "d3-axis": "^3.0.0",
     "d3-selection": "^3.0.0",
     "d3-format": "^3.1.0",
+    "d3-hierarchy": "^3.1.2",
     "vega-scale": "^6.0.0",
     "lodash-es": "^4.17.21",
     "react-aria": "^3.28.0",
     "internmap": "^2.0.3",
     "uuid": "^9.0.0",
-    "@vitessce/constants-internal": "3.5.6",
-    "@vitessce/sets-utils": "3.5.6",
-    "@vitessce/utils": "3.5.6",
-    "@vitessce/vega": "3.5.6",
-    "@vitessce/vit-s": "3.5.6",
-    "@vitessce/gl": "3.5.6"
+    "@vitessce/constants-internal": "3.5.8",
+    "@vitessce/sets-utils": "3.5.8",
+    "@vitessce/utils": "3.5.8",
+    "@vitessce/vega": "3.5.8",
+    "@vitessce/vit-s": "3.5.8",
+    "@vitessce/gl": "3.5.8"
   },
   "devDependencies": {
     "react": "^18.0.0",

package/src/CellSetCompositionBarPlot.js

@@ -0,0 +1,205 @@
+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 (
+    <VegaPlot
+      data={computedData}
+      spec={spec}
+      signalListeners={signalListeners}
+      getTooltipText={getTooltipText}
+    />
+  );
+}

package/src/CellSetCompositionBarPlotSubscriber.js

@@ -0,0 +1,151 @@
+/* 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 (
+    <TitleInfo
+      title={`${capitalize(obsType)} Set Composition Analysis Plot`}
+      removeGridComponent={removeGridComponent}
+      theme={theme}
+      isReady={isReady}
+      helpText={helpText}
+    >
+      <div ref={containerRef} className={classes.vegaContainer}>
+        {obsSetStats ? (
+          <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}
+          />
+        ) : (
+          <span>Select at least one {obsType} set.</span>
+        )}
+      </div>
+    </TitleInfo>
+  );
+}

package/src/CellSetExpressionPlot.js

@@ -124,7 +124,10 @@ export default function CellSetExpressionPlot(props) {
         .range(
           // TODO: check for full path equality here.
           sampleSetNames
-            .map(name => sampleSetColor?.find(d => d.path.at(-1) === name).color)
+            .map(name => (
+              sampleSetColor?.find(d => d.path.at(-1) === name)?.color
+              || [125, 125, 125]
+            ))
             .map(colorArrayToString),
         );
     }

package/src/FeatureSetEnrichmentBarPlot.js

@@ -0,0 +1,203 @@
+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 (
+    <VegaPlot
+      data={computedData}
+      spec={spec}
+      signalListeners={signalListeners}
+      getTooltipText={getTooltipText}
+    />
+  );
+}