@vitessce/statistical-plots 3.5.9 → 3.5.11

package/src/CellSetCompositionBarPlot.js

@@ -1,10 +1,13 @@
 import React, { useCallback, useMemo } from 'react';
 import { clamp, isEqual } from 'lodash-es';
 import { v4 as uuidv4 } from 'uuid';
+import { extent } from 'd3-array';
 import { VegaPlot, VEGA_THEMES } from '@vitessce/vega';
 import { capitalize } from '@vitessce/utils';
 import { getColorScale } from './utils.js';
 
+const MAX_BAR_SIZE = 40;
+
 /**
  * Cell set composition results displayed using a bar chart.
  */
@@ -13,9 +16,9 @@ export default function CellSetCompositionBarPlot(props) {
     data,
     theme,
     width,
-    height,
+    height: heightProp,
     marginRight = 200,
-    marginBottom = 120,
+    marginBottom = 60,
     keyLength = 36,
     obsType,
     onBarSelect,
@@ -27,6 +30,13 @@ export default function CellSetCompositionBarPlot(props) {
     sampleSetColor,
   } = props;
 
+  const height = (
+    Array.isArray(obsSetSelection)
+      && ((heightProp - marginBottom) / obsSetSelection.length >= MAX_BAR_SIZE)
+  )
+    ? MAX_BAR_SIZE * obsSetSelection.length + marginBottom
+    : heightProp;
+
   const [obsSetColorScale, sampleSetColorScale] = useMemo(() => [
     getColorScale(obsSetSelection, obsSetColor, theme),
     getColorScale(sampleSetSelection, sampleSetColor, theme),
@@ -39,21 +49,17 @@ export default function CellSetCompositionBarPlot(props) {
       // Return in array-of-objects form that Vega-Lite likes.
 
       const referenceCellType = metadata?.analysis_params?.reference_cell_type;
+      const covariateValue = metadata?.analysis_params?.covariate_value;
       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];
+      const covariateSetPath = [sampleSetGroupName, covariateValue];
 
       let shouldSwapFoldChangeDirection = false;
-      if (isEqual(firstCovariateSetPath, sampleSetSelection[0])) {
+      if (isEqual(covariateSetPath, sampleSetSelection[0])) {
         shouldSwapFoldChangeDirection = true;
       }
 
@@ -95,13 +101,13 @@ export default function CellSetCompositionBarPlot(props) {
   ]);
 
   // Get an array of keys for sorting purposes.
-  const keys = computedData.map(d => d.keyName);
+  const keys = computedData?.map(d => d.keyName);
 
   const colorScale = {
     // Manually set the color scale so that Vega-Lite does
     // not choose the colors automatically.
-    domain: computedData.map(d => d.key),
-    range: computedData.map(d => d.color),
+    domain: computedData?.map(d => d.key),
+    range: computedData?.map(d => d.color),
   };
   const captializedObsType = capitalize(obsType);
 
@@ -114,6 +120,24 @@ export default function CellSetCompositionBarPlot(props) {
     range: [2.0, 0.5],
   };
 
+  const xExtent = useMemo(() => {
+    if (computedData) {
+      const [min, max] = extent(computedData.map(d => d.logFoldChange));
+      const buffer = 1.05; // Ensure some extra space
+      const minAbs = Math.abs(min) * buffer;
+      const maxAbs = Math.abs(max) * buffer;
+      if (minAbs > maxAbs) {
+        return [-minAbs, minAbs];
+      }
+      return [-maxAbs, maxAbs];
+    }
+    return undefined;
+  }, [computedData]);
+
+  const xScale = {
+    domain: xExtent,
+  };
+
   const spec = {
     mark: { type: 'bar', stroke: 'black', cursor: 'pointer' },
     params: [
@@ -149,6 +173,7 @@ export default function CellSetCompositionBarPlot(props) {
         field: 'logFoldChange',
         type: 'quantitative',
         title: 'Log fold-change',
+        scale: xScale,
       },
       color: {
         field: 'key',
@@ -165,6 +190,7 @@ export default function CellSetCompositionBarPlot(props) {
         field: 'isReferenceSet',
         type: 'nominal',
         scale: strokeWidthScale,
+        legend: null,
       },
       tooltip: {
         field: 'effectExpectedSample',

package/src/CellSetCompositionBarPlotSubscriber.js

@@ -143,7 +143,7 @@ export function CellSetCompositionBarPlotSubscriber(props) {
             onBarSelect={onBarSelect}
           />
         ) : (
-          <span>Select at least one {obsType} set.</span>
+          <span>Select at least one {obsType} set and a pair of {sampleType} sets.</span>
         )}
       </div>
     </TitleInfo>

package/src/CellSetExpressionPlot.js

@@ -8,6 +8,7 @@ import { area as d3_area, curveBasis } from 'd3-shape';
 import { select } from 'd3-selection';
 import { colorArrayToString } from '@vitessce/sets-utils';
 import { capitalize } from '@vitessce/utils';
+import { getColorScale } from './utils.js';
 
 const scaleBand = vega_scale('band');
 
@@ -35,9 +36,11 @@ const scaleBand = vega_scale('band');
 export default function CellSetExpressionPlot(props) {
   const {
     yMin: yMinProp,
+    xAxisTitle = null,
     yUnits,
     jitter,
-    cellSetSelection,
+    obsSetSelection,
+    obsSetColor,
     sampleSetSelection,
     sampleSetColor,
     colors,
@@ -57,18 +60,22 @@ export default function CellSetExpressionPlot(props) {
 
   const svgRef = useRef();
 
+  const obsSetColorScale = useMemo(() => getColorScale(
+    obsSetSelection, obsSetColor, theme,
+  ), [obsSetSelection, obsSetColor, theme]);
+
   // Get the max characters in an axis label for autsizing the bottom margin.
   const maxCharactersForLabel = useMemo(() => {
-    if (!cellSetSelection) {
+    if (!obsSetSelection) {
       return 0;
     }
-    const cellSetNames = cellSetSelection.map(d => d.at(-1));
+    const cellSetNames = obsSetSelection.map(d => d.at(-1));
     return cellSetNames.reduce((acc, name) => {
       // eslint-disable-next-line no-param-reassign
       acc = acc === undefined || name.length > acc ? name.length : acc;
       return acc;
     }, 0);
-  }, [cellSetSelection]);
+  }, [obsSetSelection]);
 
   const isStratified = (Array.isArray(sampleSetSelection) && sampleSetSelection.length === 2);
 
@@ -81,7 +88,7 @@ export default function CellSetExpressionPlot(props) {
     const unitSuffix = yUnits ? ` (${yUnits})` : '';
     const yTitle = `${transformPrefix}${capitalize(featureValueType)}${unitSuffix}`;
 
-    const xTitle = `${capitalize(obsType)} Set`;
+    const xTitle = xAxisTitle ?? `${capitalize(obsType)} Set`;
 
     // Use a square-root term because the angle of the labels is 45 degrees (see below)
     // so the perpendicular distance to the bottom of the labels is proportional to the
@@ -146,7 +153,7 @@ export default function CellSetExpressionPlot(props) {
 
     const xGroup = scaleBand()
       .range([marginLeft, width - marginRight])
-      .domain(cellSetSelection)
+      .domain(obsSetSelection)
       .padding(0.1);
 
 
@@ -314,11 +321,12 @@ export default function CellSetExpressionPlot(props) {
         .style('font-size', '11px');
 
     // X-axis ticks
-    g
+    const xTickG = g
       .append('g')
         .attr('transform', `translate(0,${innerHeight})`)
-        .style('font-size', '14px')
-      .call(axisBottom(xGroup).tickFormat(d => d.at(-1)))
+        .style('font-size', '14px');
+
+    xTickG.call(axisBottom(xGroup).tickFormat(d => d.at(-1)))
       .selectAll('text')
         .style('font-size', '11px')
         .attr('dx', '-6px')
@@ -326,6 +334,20 @@ export default function CellSetExpressionPlot(props) {
         .attr('transform', 'rotate(-45)')
         .style('text-anchor', 'end');
 
+    if (isStratified) {
+      // Associate each X tick with a cell type color,
+      // since in the stratified case the violins are colored
+      // by sample set.
+      const tickWidth = xGroup.bandwidth();
+      xTickG.selectAll('.tick')
+        .append('rect')
+          .attr('x', -tickWidth / 2)
+          // .attr("y", -innerHeight)
+          .attr('width', tickWidth)
+          .attr('height', 4)
+          .style('fill', d => obsSetColorScale(d));
+    }
+
     // Y-axis title
     g
       .append('text')
@@ -394,7 +416,8 @@ export default function CellSetExpressionPlot(props) {
   }, [width, height, data, marginLeft, marginBottom, colors,
     jitter, theme, yMinProp, marginTop, marginRight, featureType,
     featureValueType, featureValueTransformName, yUnits, obsType,
-    maxCharactersForLabel, sampleSetSelection,
+    maxCharactersForLabel, sampleSetSelection, isStratified,
+    obsSetColorScale,
   ]);
 
   return (

package/src/CellSetExpressionPlotOptions.js

@@ -3,6 +3,10 @@ import { useId } from 'react-aria';
 import { TableCell, TableRow, TextField, Slider } from '@material-ui/core';
 import { usePlotOptionsStyles, OptionsContainer, OptionSelect } from '@vitessce/vit-s';
 import { GLSL_COLORMAPS } from '@vitessce/gl';
+import { capitalize } from '@vitessce/utils';
+
+
+const FEATURE_AGGREGATION_STRATEGIES = ['first', 'last', 'sum', 'mean'];
 
 export default function CellSetExpressionPlotOptions(props) {
   const {
@@ -15,6 +19,8 @@ export default function CellSetExpressionPlotOptions(props) {
     setFeatureValuePositivityThreshold,
     featureValueColormap,
     setFeatureValueColormap,
+    featureAggregationStrategy,
+    setFeatureAggregationStrategy,
   } = props;
 
   const cellSetExpressionPlotOptionsId = useId();
@@ -25,9 +31,13 @@ export default function CellSetExpressionPlotOptions(props) {
     setFeatureValueColormap(event.target.value);
   }
 
-  const handleTransformChange = (event) => {
+  function handleTransformChange(event) {
     setFeatureValueTransform(event.target.value === '' ? null : event.target.value);
-  };
+  }
+
+  function handleFeatureAggregationStrategyChange(event) {
+    setFeatureAggregationStrategy(event.target.value);
+  }
 
   function handlePositivityThresholdChange(event, value) {
     setFeatureValuePositivityThreshold(value);
@@ -119,6 +129,33 @@ export default function CellSetExpressionPlotOptions(props) {
           />
         </TableCell>
       </TableRow>
+      {setFeatureAggregationStrategy ? (
+        <TableRow>
+          <TableCell className={classes.labelCell} variant="head" scope="row">
+            <label
+              htmlFor={`feature-aggregation-strategy-${cellSetExpressionPlotOptionsId}`}
+            >
+              Feature Aggregation Strategy
+            </label>
+          </TableCell>
+          <TableCell className={classes.inputCell} variant="body">
+            <OptionSelect
+              className={classes.select}
+              value={featureAggregationStrategy ?? 'first'}
+              onChange={handleFeatureAggregationStrategyChange}
+              inputProps={{
+                id: `feature-aggregation-strategy-${cellSetExpressionPlotOptionsId}`,
+              }}
+            >
+              {FEATURE_AGGREGATION_STRATEGIES.map(opt => (
+                <option key={opt} value={opt}>
+                  {capitalize(opt)}
+                </option>
+              ))}
+            </OptionSelect>
+          </TableCell>
+        </TableRow>
+      ) : null}
       {setFeatureValuePositivityThreshold ? (
         <TableRow key="transform-coefficient-option-row">
           <TableCell className={classes.labelCell}>

package/src/CellSetExpressionPlotSubscriber.js

@@ -26,6 +26,28 @@ import {
   histogramStratifiedExpressionData,
 } from './expr-hooks.js';
 
+const DEFAULT_FEATURE_AGGREGATION_STRATEGY = 'first';
+
+function featureSummary(geneSelection, featureAggregationStrategy) {
+  if (featureAggregationStrategy === 'first') {
+    return geneSelection?.[0];
+  } if (featureAggregationStrategy === 'last') {
+    return geneSelection?.at(-1);
+  } if (typeof featureAggregationStrategy === 'number') {
+    const i = featureAggregationStrategy;
+    return geneSelection?.[i];
+  } if (featureAggregationStrategy === 'sum') {
+    // TODO: make these .join()-ed labels more scalable,
+    // in particular, if more than 10 or so elements.
+    return geneSelection?.join(' + ');
+  } if (featureAggregationStrategy === 'mean') {
+    return `Mean of ${geneSelection?.join(', ')}`;
+  } if (featureAggregationStrategy === 'difference') {
+    return geneSelection?.join(' - ');
+  }
+  return '';
+}
+
 /**
  * Get expression data for the cells
  * in the selected cell sets.
@@ -50,7 +72,7 @@ function useExpressionByCellSet(
   expressionData, obsIndex, cellSets, additionalCellSets,
   geneSelection, cellSetSelection, cellSetColor,
   featureValueTransform, featureValueTransformCoefficient,
-  theme, yMinProp,
+  theme, yMinProp, featureAggregationStrategy,
 ) {
   const mergedCellSets = useMemo(
     () => mergeObsSets(cellSets, additionalCellSets),
@@ -68,7 +90,7 @@ function useExpressionByCellSet(
     );
     if (stratifiedData) {
       const aggregateData = aggregateStratifiedExpressionData(
-        stratifiedData, geneSelection,
+        stratifiedData, geneSelection, featureAggregationStrategy,
       );
       const summarizedData = summarizeStratifiedExpressionData(
         aggregateData, true,
@@ -83,6 +105,7 @@ function useExpressionByCellSet(
     mergedCellSets, cellSetSelection, cellSetColor,
     featureValueTransform, featureValueTransformCoefficient,
     yMinProp, sampleEdges, sampleSets, sampleSetSelection,
+    featureAggregationStrategy,
   ]);
 
   // From the cell sets hierarchy and the list of selected cell sets,
@@ -114,6 +137,8 @@ export function CellSetExpressionPlotSubscriber(props) {
     downloadButtonVisible,
     removeGridComponent,
     theme,
+    title,
+    xAxisTitle,
     jitter = false,
     yMin = null,
     yUnits = null,
@@ -138,10 +163,12 @@ export function CellSetExpressionPlotSubscriber(props) {
     sampleType,
     sampleSetSelection,
     sampleSetColor,
+    featureAggregationStrategy,
   }, {
     setFeatureValueTransform,
     setFeatureValueTransformCoefficient,
     setSampleSetColor,
+    setFeatureAggregationStrategy,
   }] = useCoordination(
     COMPONENT_COORDINATION_TYPES[ViewType.OBS_SET_FEATURE_VALUE_DISTRIBUTION],
     coordinationScopes,
@@ -204,29 +231,41 @@ export function CellSetExpressionPlotSubscriber(props) {
     sampleEdgesUrls,
   ]);
 
+  const featureAggregationStrategyToUse = featureAggregationStrategy
+    ?? DEFAULT_FEATURE_AGGREGATION_STRATEGY;
+
   const [histogramData, setArr, exprMax] = useExpressionByCellSet(
     sampleEdges, sampleSets, sampleSetSelection,
     expressionData, obsIndex, cellSets, additionalCellSets,
     geneSelection, cellSetSelection, cellSetColor,
     featureValueTransform, featureValueTransformCoefficient,
-    theme, yMin,
+    theme, yMin, featureAggregationStrategyToUse,
   );
 
-  const firstGeneSelected = geneSelection && geneSelection.length >= 1
-    ? (
-      featureLabelsMap?.get(geneSelection[0])
-      || featureLabelsMap?.get(cleanFeatureId(geneSelection[0]))
-      || geneSelection[0]
-    )
-    : null;
+  const featureSuffix = useMemo(() => {
+    const cleanedGeneSelection = geneSelection?.map(geneName => (
+      featureLabelsMap?.get(geneName)
+      || featureLabelsMap?.get(cleanFeatureId(geneName))
+      || geneName
+    ));
+    if (Array.isArray(cleanedGeneSelection)) {
+      return featureSummary(cleanedGeneSelection, featureAggregationStrategyToUse);
+    }
+    return null;
+  }, [geneSelection, featureAggregationStrategyToUse]);
+
+
   const selectedTransformName = transformOptions.find(
     o => o.value === featureValueTransform,
   )?.name;
-
+    // Use empty string when firstGeneSelected is null
+  const titleSuffix = featureSuffix ? ` (${featureSuffix})` : '';
 
   return (
     <TitleInfo
-      title={`Expression by ${capitalize(obsType)} Set${(firstGeneSelected ? ` (${firstGeneSelected})` : '')}`}
+      title={title ? `${title}${titleSuffix}`
+        : `Expression by ${capitalize(obsType)} Set${titleSuffix}`
+      }
       closeButtonVisible={closeButtonVisible}
       downloadButtonVisible={downloadButtonVisible}
       removeGridComponent={removeGridComponent}
@@ -241,6 +280,8 @@ export function CellSetExpressionPlotSubscriber(props) {
           featureValueTransformCoefficient={featureValueTransformCoefficient}
           setFeatureValueTransformCoefficient={setFeatureValueTransformCoefficient}
           transformOptions={transformOptions}
+          featureAggregationStrategy={featureAggregationStrategy}
+          setFeatureAggregationStrategy={setFeatureAggregationStrategy}
         />
       )}
     >
@@ -250,7 +291,8 @@ export function CellSetExpressionPlotSubscriber(props) {
             yMin={yMin}
             yUnits={yUnits}
             jitter={jitter}
-            cellSetSelection={cellSetSelection}
+            obsSetSelection={cellSetSelection}
+            obsSetColor={cellSetColor}
             sampleSetSelection={sampleSetSelection}
             sampleSetColor={sampleSetColor}
             colors={setArr}
@@ -263,6 +305,7 @@ export function CellSetExpressionPlotSubscriber(props) {
             featureType={featureType}
             featureValueType={featureValueType}
             featureValueTransformName={selectedTransformName}
+            xAxisTitle={xAxisTitle}
           />
         ) : (
           <span>Select a {featureType}.</span>

package/src/DotPlot.js

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

package/src/DotPlotSubscriber.js

@@ -160,11 +160,13 @@ export function DotPlotSubscriber(props) {
             width={width}
             height={height}
             obsType={obsType}
+            sampleType={sampleType}
             featureType={featureType}
             featureValueType={featureValueType}
             featureValueTransformName={selectedTransformName}
             featureValueColormap={featureValueColormap}
-            cellSetSelection={cellSetSelection}
+            obsSetSelection={cellSetSelection}
+            obsSetColor={cellSetColor}
           />
         ) : (
           <span>Select at least one {featureType}.</span>

package/src/FeatureSetEnrichmentBarPlot.js

@@ -14,7 +14,7 @@ export default function FeatureSetEnrichmentBarPlot(props) {
     theme,
     width,
     height,
-    marginRight = 200,
+    marginRight = 300,
     marginBottom = 120,
     keyLength = 36,
     featureType,
@@ -86,7 +86,7 @@ export default function FeatureSetEnrichmentBarPlot(props) {
           return [...a, h];
         }, []);
 
-      const MAX_ROWS = 25;
+      const MAX_ROWS = 50;
       result = result.slice(0, MAX_ROWS);
       return result;
     }
@@ -115,7 +115,7 @@ export default function FeatureSetEnrichmentBarPlot(props) {
         select: {
           type: 'point',
           on: 'click[event.shiftKey === false]',
-          fields: ['name'],
+          fields: ['name', 'term'],
           empty: 'none',
         },
       },
@@ -124,7 +124,7 @@ export default function FeatureSetEnrichmentBarPlot(props) {
         select: {
           type: 'point',
           on: 'click[event.shiftKey]',
-          fields: ['name'],
+          fields: ['name', 'term'],
           empty: 'none',
         },
       },
@@ -173,9 +173,10 @@ export default function FeatureSetEnrichmentBarPlot(props) {
 
   const handleSignal = (name, value) => {
     if (name === 'bar_select') {
-      onBarSelect(value.obsSetPath);
+      onBarSelect(value.name?.[0], value.term?.[0]);
     } else if (name === 'shift_bar_select') {
-      onBarSelect(value.obsSetPath, true);
+      // Name and term may be arrays
+      onBarSelect(value.name, value.term, true);
     }
   };