@vitessce/statistical-plots 3.5.7 → 3.5.9

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

package/src/FeatureSetEnrichmentBarPlotSubscriber.js

@@ -0,0 +1,166 @@
+/* eslint-disable no-unused-vars */
+import React, { useCallback } from 'react';
+import {
+  TitleInfo,
+  useCoordination,
+  useLoaders,
+  useReady,
+  useGridItemSize,
+  useFeatureSetStatsData,
+  useMatchingLoader,
+  useColumnNameMapping,
+  useAsyncFunction,
+} from '@vitessce/vit-s';
+import {
+  ViewType,
+  COMPONENT_COORDINATION_TYPES,
+  ViewHelpMapping,
+  DataType,
+  AsyncFunctionType,
+} from '@vitessce/constants-internal';
+import { capitalize } from '@vitessce/utils';
+import FeatureSetEnrichmentBarPlot from './FeatureSetEnrichmentBarPlot.js';
+import { useStyles } from './styles.js';
+import { useRawSetPaths } from './utils.js';
+
+
+export function FeatureSetEnrichmentBarPlotSubscriber(props) {
+  const {
+    coordinationScopes,
+    removeGridComponent,
+    theme,
+    helpText = ViewHelpMapping.FEATURE_SET_ENRICHMENT_BAR_PLOT,
+  } = props;
+
+  const classes = useStyles();
+  const loaders = useLoaders();
+  const transformFeature = useAsyncFunction(AsyncFunctionType.TRANSFORM_FEATURE);
+
+  // Get "props" from the coordination space.
+  const [{
+    dataset,
+    obsType,
+    sampleType,
+    featureType,
+    featureValueType,
+    obsFilter: cellFilter,
+    obsHighlight: cellHighlight,
+    obsSetSelection,
+    obsSetColor,
+    obsColorEncoding: cellColorEncoding,
+    additionalObsSets: additionalCellSets,
+    featurePointSignificanceThreshold,
+    featurePointFoldChangeThreshold,
+    featureLabelSignificanceThreshold,
+    featureLabelFoldChangeThreshold,
+    featureValueTransform,
+    featureValueTransformCoefficient,
+    gatingFeatureSelectionX,
+    gatingFeatureSelectionY,
+    featureSelection,
+    sampleSetSelection,
+    sampleSetColor,
+  }, {
+    setObsFilter: setCellFilter,
+    setObsSetSelection,
+    setObsHighlight: setCellHighlight,
+    setObsSetColor: setCellSetColor,
+    setObsColorEncoding: setCellColorEncoding,
+    setAdditionalObsSets: setAdditionalCellSets,
+    setFeaturePointSignificanceThreshold,
+    setFeaturePointFoldChangeThreshold,
+    setFeatureLabelSignificanceThreshold,
+    setFeatureLabelFoldChangeThreshold,
+    setFeatureValueTransform,
+    setFeatureValueTransformCoefficient,
+    setGatingFeatureSelectionX,
+    setGatingFeatureSelectionY,
+    setFeatureSelection,
+    setSampleSetSelection,
+    setSampleSetColor,
+  }] = useCoordination(
+    COMPONENT_COORDINATION_TYPES[ViewType.FEATURE_SET_ENRICHMENT_BAR_PLOT],
+    coordinationScopes,
+  );
+  const [width, height, containerRef] = useGridItemSize();
+
+  const obsSetsLoader = useMatchingLoader(
+    loaders, dataset, DataType.OBS_SETS, { obsType },
+  );
+  const sampleSetsLoader = useMatchingLoader(
+    loaders, dataset, DataType.SAMPLE_SETS, { sampleType },
+  );
+  const obsSetsColumnNameMapping = useColumnNameMapping(obsSetsLoader);
+  const obsSetsColumnNameMappingReversed = useColumnNameMapping(obsSetsLoader, true);
+  const sampleSetsColumnNameMapping = useColumnNameMapping(sampleSetsLoader);
+  const sampleSetsColumnNameMappingReversed = useColumnNameMapping(sampleSetsLoader, true);
+
+  const rawSampleSetSelection = useRawSetPaths(sampleSetsColumnNameMapping, sampleSetSelection);
+  const rawObsSetSelection = useRawSetPaths(obsSetsColumnNameMapping, obsSetSelection);
+
+  const [{ featureSetStats }, featureSetStatsStatus] = useFeatureSetStatsData(
+    loaders, dataset, false,
+    { obsType, featureType, sampleType },
+    // These volcanoOptions are passed to ObsSetStatsAnndataLoader.loadMulti():
+    { sampleSetSelection: rawSampleSetSelection, obsSetSelection: rawObsSetSelection },
+  );
+
+  const isReady = useReady([
+    featureSetStatsStatus,
+  ]);
+
+  // Support a click handler which selects individual cell set bars.
+  const onBarSelect = useCallback(async (featureSetName, featureSetTerm, isShiftDown = false) => {
+    // TODO: Implement different behavior when isShiftDown
+    // TODO: get feature IDs using AsyncFunction transformFeature
+    // (pathway term in, gene names out).
+    const kgNode = { nodeType: 'pathway', term: featureSetTerm };
+    const targetFeatureType = featureType;
+    // Will not work since transformFeature currently:
+    // - matches based on kgId (rather than term)
+    // - only knows about Reactome pathways (not GO terms).
+    // console.log(await transformFeature(kgNode, targetFeatureType))
+    // setFeatureSelection(featureIds);
+  }, [setFeatureSelection]);
+
+  // TODO: support the following options
+  // - p-value threshold for which bars to show
+  // - max number of bars to show
+  // - Boolean flag: should same pathway which appears multiple times
+  //   be de-duplicated (one bar per pathway, using most-significant result)?
+
+  return (
+    <TitleInfo
+      title={`${capitalize(featureType)} Set Enrichment Plot`}
+      removeGridComponent={removeGridComponent}
+      theme={theme}
+      isReady={isReady}
+      helpText={helpText}
+    >
+      <div ref={containerRef} className={classes.vegaContainer}>
+        {featureSetStats ? (
+          <FeatureSetEnrichmentBarPlot
+            theme={theme}
+            width={width}
+            height={height}
+            obsType={obsType}
+            featureType={featureType}
+            obsSetsColumnNameMapping={obsSetsColumnNameMapping}
+            obsSetsColumnNameMappingReversed={obsSetsColumnNameMappingReversed}
+            sampleSetsColumnNameMapping={sampleSetsColumnNameMapping}
+            sampleSetsColumnNameMappingReversed={sampleSetsColumnNameMappingReversed}
+            sampleSetSelection={sampleSetSelection}
+            obsSetSelection={obsSetSelection}
+            obsSetColor={obsSetColor}
+            sampleSetColor={sampleSetColor}
+            data={featureSetStats}
+            onBarSelect={onBarSelect}
+            pValueThreshold={0.01}
+          />
+        ) : (
+          <span>Select at least one {obsType} set.</span>
+        )}
+      </div>
+    </TitleInfo>
+  );
+}

package/src/Treemap.js

@@ -1,13 +1,12 @@
 /* eslint-disable indent */
 /* eslint-disable camelcase */
 import React, { useMemo, useEffect, useRef } from 'react';
-import { scaleOrdinal } from 'd3-scale';
 import { select } from 'd3-selection';
 import { treemap, treemapBinary, hierarchy as d3_hierarchy } from 'd3-hierarchy';
 import { rollup as d3_rollup } from 'd3-array';
 import { isEqual } from 'lodash-es';
-import { colorArrayToString } from '@vitessce/sets-utils';
-import { getDefaultColor, pluralize as plur } from '@vitessce/utils';
+import { pluralize as plur } from '@vitessce/utils';
+import { getColorScale } from './utils.js';
 
 // Based on Observable's built-in DOM.uid function.
 // This is intended to be used with SVG clipPaths
@@ -21,20 +20,6 @@ function uidGenerator(prefix) {
   };
 }
 
-// Create a d3-scale ordinal scale mapping set paths to color strings.
-function getColorScale(setSelectionArr, setColorArr, theme) {
-  return scaleOrdinal()
-    .domain(setSelectionArr || [])
-    .range(
-      setSelectionArr
-        ?.map(setNamePath => (
-          setColorArr?.find(d => isEqual(d.path, setNamePath))?.color
-          || getDefaultColor(theme)
-        ))
-        ?.map(colorArrayToString) || [],
-    );
-}
-
 /**
  * Renders a treemap plot using D3.
  * References:
@@ -62,6 +47,7 @@ export default function Treemap(props) {
     marginRight = 5,
     marginLeft = 80,
     marginBottom,
+    onNodeClick,
   } = props;
 
   const hierarchyData = useMemo(() => {
@@ -169,7 +155,14 @@ export default function Treemap(props) {
         .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);
+        .attr('height', d => d.y1 - d.y0)
+        .on('click', (e, d) => {
+          const obsSetPath = (hierarchyLevels[0] === 'obsSet'
+            ? d.parent?.data?.[0]
+            : d.data?.[0]
+          );
+          onNodeClick(obsSetPath);
+        });
 
     // Append a clipPath to ensure text does not overflow.
     leaf.append('clipPath')
@@ -199,7 +192,7 @@ export default function Treemap(props) {
   }, [width, height, marginLeft, marginBottom, theme, marginTop, marginRight,
     obsType, sampleType, treemapLeaves, sampleSetColor, sampleSetSelection,
     obsSetSelection, obsSetColor, obsSetColorScale, sampleSetColorScale,
-    obsColorEncoding, hierarchyLevels,
+    obsColorEncoding, hierarchyLevels, onNodeClick,
   ]);
 
   return (

package/src/TreemapSubscriber.js

@@ -1,5 +1,5 @@
 /* eslint-disable no-unused-vars */
-import React, { useMemo } from 'react';
+import React, { useMemo, useCallback } from 'react';
 import {
   TitleInfo,
   useCoordination,
@@ -211,9 +211,14 @@ export function TreemapSubscriber(props) {
     ];
   }, [obsIndex, sampleEdges, sampleSets, obsSetColor,
     sampleSetColor, mergedObsSets, obsSetSelection, mergedSampleSets,
+    sampleSetSelection,
     // TODO: consider filtering-related coordination values
   ]);
 
+  const onNodeClick = useCallback((obsSetPath) => {
+    setObsSetSelection([obsSetPath]);
+  }, [setObsSetSelection]);
+
   return (
     <TitleInfo
       title={`Treemap of ${capitalize(plur(obsType, 2))}`}
@@ -254,6 +259,7 @@ export function TreemapSubscriber(props) {
           sampleSetColor={sampleSetColor}
           obsSetSelection={obsSetSelection}
           sampleSetSelection={sampleSetSelection}
+          onNodeClick={onNodeClick}
         />
       </div>
     </TitleInfo>