@vitessce/statistical-plots 3.5.6 → 3.5.8

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

@@ -0,0 +1,202 @@
+/* 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 (
+    <svg
+      ref={svgRef}
+      style={{
+        top: 0,
+        left: 0,
+        width: `${width}px`,
+        height: `${height}px`,
+        position: 'relative',
+      }}
+    />
+  );
+}

package/src/TreemapOptions.js

@@ -0,0 +1,90 @@
+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 (
+    <OptionsContainer>
+      {children}
+      <TableRow>
+        <TableCell className={classes.labelCell} variant="head" scope="row">
+          <label
+            htmlFor={`cell-color-encoding-select-${treemapOptionsId}`}
+          >
+            Color Encoding
+          </label>
+        </TableCell>
+        <TableCell className={classes.inputCell} variant="body">
+          <OptionSelect
+            className={classes.select}
+            value={obsColorEncoding}
+            onChange={handleColorEncodingChange}
+            inputProps={{
+              id: `cell-color-encoding-select-${treemapOptionsId}`,
+            }}
+          >
+            <option value="cellSetSelection">{capitalize(obsType)} Sets</option>
+            <option value="sampleSetSelection">{capitalize(sampleType)} Sets</option>
+          </OptionSelect>
+        </TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell className={classes.labelCell} variant="head" scope="row">
+          <label
+            htmlFor={`treemap-set-hierarchy-levels-${treemapOptionsId}`}
+          >
+            Primary Hierarchy Level
+          </label>
+        </TableCell>
+        <TableCell className={classes.inputCell} variant="body">
+          <OptionSelect
+            className={classes.select}
+            value={primaryHierarchyLevel}
+            onChange={handleHierarchyLevelsOrderingChange}
+            inputProps={{
+              id: `hierarchy-level-select-${treemapOptionsId}`,
+            }}
+          >
+            <option value="obsSet">{capitalize(obsType)} Sets</option>
+            <option value="sampleSet">{capitalize(sampleType)} Sets</option>
+          </OptionSelect>
+        </TableCell>
+      </TableRow>
+    </OptionsContainer>
+  );
+}