@vitessce/statistical-plots 3.5.10 → 3.5.12

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,
@@ -140,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,
@@ -206,26 +231,35 @@ 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 = firstGeneSelected ? ` (${firstGeneSelected})` : '';
+  const titleSuffix = featureSuffix ? ` (${featureSuffix})` : '';
 
   return (
     <TitleInfo
@@ -246,6 +280,8 @@ export function CellSetExpressionPlotSubscriber(props) {
           featureValueTransformCoefficient={featureValueTransformCoefficient}
           setFeatureValueTransformCoefficient={setFeatureValueTransformCoefficient}
           transformOptions={transformOptions}
+          featureAggregationStrategy={featureAggregationStrategy}
+          setFeatureAggregationStrategy={setFeatureAggregationStrategy}
         />
       )}
     >

package/src/DotPlot.js

@@ -39,7 +39,8 @@ export default function DotPlot(props) {
     featureType,
     featureValueType,
     featureValueTransformName,
-    featureValueColormap,
+    // TODO: re-enable featureValueColormap coordination
+    // featureValueColormap,
     obsSetSelection,
     obsSetColor,
   } = props;
@@ -134,7 +135,8 @@ export default function DotPlot(props) {
         type: 'quantitative',
         title: meanTransform,
         scale: {
-          scheme: featureValueColormap,
+          // scheme: featureValueColormap,
+          scheme: 'greys',
         },
         legend: {
           direction: 'horizontal',

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);
     }
   };
 

package/src/FeatureSetEnrichmentBarPlotSubscriber.js

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

package/src/TreemapSubscriber.js

@@ -141,9 +141,6 @@ export function TreemapSubscriber(props) {
     [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
@@ -182,7 +179,7 @@ export function TreemapSubscriber(props) {
       sampleResult.set(sampleSetKey, sampleSetSize || 0);
     });
 
-    if (mergedObsSets && obsSetSelection) {
+    if (mergedObsSets && obsSetSelection && obsIndex) {
       const sampleIdToSetMap = sampleSets && sampleSetSelection
         ? treeToSelectedSetMap(sampleSets, sampleSetSelection)
         : null;
@@ -213,10 +210,20 @@ export function TreemapSubscriber(props) {
     ];
   }, [obsIndex, sampleEdges, sampleSets, obsSetColor,
     sampleSetColor, mergedObsSets, obsSetSelection, mergedSampleSets,
-    sampleSetSelection,
+    sampleSetSelection, obsIndex,
     // TODO: consider filtering-related coordination values
   ]);
 
+  const totalObsCount = obsIndex?.length || 0;
+  const totalSampleCount = sampleIndex?.length || 0;
+
+  const selectedObsCount = obsCounts.reduce((a, h) => a + h.value, 0);
+  const selectedSampleCount = sampleCounts.reduce((a, h) => a + h.value, 0);
+
+  const unselectedObsCount = totalObsCount - selectedObsCount;
+  const unselectedSampleCount = totalSampleCount - selectedSampleCount;
+
+
   const onNodeClick = useCallback((obsSetPath) => {
     setObsSetSelection([obsSetPath]);
   }, [setObsSetSelection]);
@@ -224,12 +231,13 @@ export function TreemapSubscriber(props) {
   return (
     <TitleInfo
       title={`Treemap of ${capitalize(plur(obsType, 2))}`}
-      info={`${commaNumber(obsCount)} ${plur(obsType, obsCount)} from ${commaNumber(sampleCount)} ${plur(sampleType, sampleCount)}`}
+      info={`${commaNumber(selectedObsCount)} ${plur(obsType, selectedObsCount)} from ${commaNumber(selectedSampleCount)} ${plur(sampleType, selectedSampleCount)}`}
       removeGridComponent={removeGridComponent}
       urls={urls}
       theme={theme}
       isReady={isReady}
       helpText={helpText}
+      withPadding={false}
       options={(
         <TreemapOptions
           obsType={obsType}
@@ -254,7 +262,7 @@ export function TreemapSubscriber(props) {
           hierarchyLevels={hierarchyLevels || DEFAULT_HIERARCHY_LEVELS}
           theme={theme}
           width={width}
-          height={height}
+          height={Math.max(height * (selectedObsCount / totalObsCount), 40)}
           obsType={obsType}
           sampleType={sampleType}
           obsSetColor={obsSetColor}
@@ -264,6 +272,11 @@ export function TreemapSubscriber(props) {
           onNodeClick={onNodeClick}
         />
       </div>
+      <div style={{ position: 'absolute', right: '2px', bottom: '2px', fontSize: '10px' }}>
+        {unselectedObsCount > 0 ? (
+          <span>{`${commaNumber(unselectedObsCount)} ${plur(obsType, unselectedObsCount)} from ${commaNumber(unselectedSampleCount)} ${plur(sampleType, unselectedSampleCount)} currently omitted`}</span>
+        ) : null}
+      </div>
     </TitleInfo>
   );
 }

package/src/expr-hooks.js

@@ -92,7 +92,6 @@ export function summarizeStratifiedExpressionData(
   stratifiedResult, keepZeros,
 ) {
   const summarizedResult = new InternMap([], JSON.stringify);
-
   Array.from(stratifiedResult.entries()).forEach(([cellSetKey, firstLevelInternMap]) => {
     summarizedResult.set(cellSetKey, new InternMap([], JSON.stringify));
     Array.from(firstLevelInternMap.entries()).forEach(([sampleSetKey, secondLevelInternMap]) => {

package/src/expr-hooks.test.js

@@ -78,6 +78,7 @@ describe('Utility functions for processing expression data for statistical plots
       ];
       const featureValueTransform = null;
       const featureValueTransformCoefficient = 1;
+      const featureAggregationStrategy = 'first';
 
       const [result] = stratifyExpressionData(
         sampleEdges, sampleSets, sampleSetSelection,
@@ -86,7 +87,7 @@ describe('Utility functions for processing expression data for statistical plots
         featureValueTransform, featureValueTransformCoefficient,
       );
       const aggregateData = aggregateStratifiedExpressionData(
-        result, geneSelection,
+        result, geneSelection, featureAggregationStrategy,
       );
       const summaryResult = summarizeStratifiedExpressionData(aggregateData, true);