@vitessce/statistical-plots 2.0.3 → 3.0.1

package/src/CellSetSizesPlot.js

@@ -1,8 +1,8 @@
-import React from 'react';
-import clamp from 'lodash/clamp';
+import React, { useCallback } from 'react';
+import { clamp } from 'lodash-es';
 import { VegaPlot, VEGA_THEMES } from '@vitessce/vega';
 import { colorArrayToString } from '@vitessce/sets-utils';
-import { capitalize } from '@vitessce/utils';
+import { capitalize, getDefaultColor } from '@vitessce/utils';
 
 /**
  * Cell set sizes displayed as a bar chart,
@@ -33,6 +33,7 @@ export default function CellSetSizesPlot(props) {
     marginBottom = 120,
     keyLength = 36,
     obsType,
+    onBarSelect,
   } = props;
 
   // Add a property `keyName` which concatenates the key and the name,
@@ -46,18 +47,53 @@ export default function CellSetSizesPlot(props) {
     colorString: colorArrayToString(d.color),
   }));
 
-  // Manually set the color scale so that Vega-Lite does
-  // not choose the colors automatically.
-  const colors = {
-    domain: data.map(d => d.key),
-    range: data.map(d => d.colorString),
-  };
-
   // Get an array of keys for sorting purposes.
   const keys = data.map(d => d.keyName);
 
+  const colorScale = {
+    // Manually set the color scale so that Vega-Lite does
+    // not choose the colors automatically.
+    domain: data.map(d => d.key),
+    range: data.map((d) => {
+      const [r, g, b] = !d.isGrayedOut ? d.color : getDefaultColor(theme);
+      return `rgba(${r}, ${g}, ${b}, 1)`;
+    }),
+  };
+  const captializedObsType = capitalize(obsType);
+
   const spec = {
-    mark: { type: 'bar' },
+    mark: { type: 'bar', stroke: 'black', cursor: 'pointer' },
+    params: [
+      {
+        name: 'highlight',
+        select: {
+          type: 'point',
+          on: 'mouseover',
+        },
+      },
+      {
+        name: 'select',
+        select: 'point',
+      },
+      {
+        name: 'bar_select',
+        select: {
+          type: 'point',
+          on: 'click[event.shiftKey === false]',
+          fields: ['setNamePath', 'isGrayedOut'],
+          empty: 'none',
+        },
+      },
+      {
+        name: 'shift_bar_select',
+        select: {
+          type: 'point',
+          on: 'click[event.shiftKey]',
+          fields: ['setNamePath', 'isGrayedOut'],
+          empty: 'none',
+        },
+      },
+    ],
     encoding: {
       x: {
         field: 'keyName',
@@ -69,28 +105,69 @@ export default function CellSetSizesPlot(props) {
       y: {
         field: 'size',
         type: 'quantitative',
-        title: `${capitalize(obsType)} Set Size`,
+        title: `${captializedObsType} Set Size`,
       },
       color: {
         field: 'key',
         type: 'nominal',
-        scale: colors,
+        scale: colorScale,
         legend: null,
       },
       tooltip: {
         field: 'size',
         type: 'quantitative',
       },
+      fillOpacity: {
+        condition: {
+          param: 'select',
+          value: 1,
+        },
+        value: 0.3,
+      },
+      strokeWidth: {
+        condition: [
+          {
+            param: 'select',
+            empty: false,
+            value: 1,
+          },
+          {
+            param: 'highlight',
+            empty: false,
+            value: 2,
+          },
+        ],
+        value: 0,
+      },
     },
     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.setNamePath, value.isGrayedOut[0]);
+    } else if (name === 'shift_bar_select') {
+      const isGrayedOut = false;
+      const selectOnlyEnabled = true;
+      onBarSelect(value.setNamePath, isGrayedOut, selectOnlyEnabled);
+    }
+  };
+
+  const signalListeners = { bar_select: handleSignal, shift_bar_select: handleSignal };
+  const getTooltipText = useCallback(item => ({
+    [`${captializedObsType} Set`]: item.datum.name,
+    [`${captializedObsType} Set Size`]: item.datum.size,
+  }
+  ), [captializedObsType]);
+
   return (
     <VegaPlot
       data={data}
       spec={spec}
+      signalListeners={signalListeners}
+      getTooltipText={getTooltipText}
     />
   );
 }

package/src/CellSetSizesPlotSubscriber.js

@@ -1,16 +1,18 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import {
   TitleInfo,
   useCoordination, useLoaders,
   useUrls, useReady, useGridItemSize,
   useObsSetsData,
-  registerPluginViewType,
 } from '@vitessce/vit-s';
+import { isEqual } from 'lodash-es';
 import { ViewType, COMPONENT_COORDINATION_TYPES } from '@vitessce/constants-internal';
-import { mergeObsSets, treeToSetSizesBySetNames } from '@vitessce/sets-utils';
+import {
+  mergeObsSets, treeToSetSizesBySetNames, filterPathsByExpansionAndSelection, findChangedHierarchy,
+} from '@vitessce/sets-utils';
 import { capitalize } from '@vitessce/utils';
-import CellSetSizesPlot from './CellSetSizesPlot';
-import { useStyles } from './styles';
+import CellSetSizesPlot from './CellSetSizesPlot.js';
+import { useStyles } from './styles.js';
 
 /**
  * A subscriber component for `CellSetSizePlot`,
@@ -42,6 +44,7 @@ export function CellSetSizesPlotSubscriber(props) {
     obsSetSelection: cellSetSelection,
     obsSetColor: cellSetColor,
     additionalObsSets: additionalCellSets,
+    obsSetExpansion: cellSetExpansion,
   }, {
     setObsSetSelection: setCellSetSelection,
     setObsSetColor: setCellSetColor,
@@ -50,30 +53,78 @@ export function CellSetSizesPlotSubscriber(props) {
   const title = titleOverride || `${capitalize(obsType)} Set Sizes`;
 
   const [width, height, containerRef] = useGridItemSize();
-  const [urls, addUrl] = useUrls(loaders, dataset);
+
+  // the name of the hierarchy that was clicked on last
+  const [currentHierarchy, setCurrentHierarchy] = useState([]);
+  // the previous cell set that was selected
+  const [prevCellSetSelection, setPrevCellSetSelection] = useState([]);
 
   // Get data from loaders using the data hooks.
-  const [{ obsSets: cellSets }, obsSetsStatus] = useObsSetsData(
-    loaders, dataset, addUrl, true,
+  const [{ obsSets: cellSets }, obsSetsStatus, obsSetsUrls] = useObsSetsData(
+    loaders, dataset, true,
     { setObsSetSelection: setCellSetSelection, setObsSetColor: setCellSetColor },
     { obsSetSelection: cellSetSelection, obsSetColor: cellSetColor },
     { obsType },
   );
-  const isReady = useReady([
-    obsSetsStatus,
-  ]);
+  const isReady = useReady([obsSetsStatus]);
+  const urls = useUrls([obsSetsUrls]);
 
   const mergedCellSets = useMemo(
     () => mergeObsSets(cellSets, additionalCellSets),
     [cellSets, additionalCellSets],
   );
 
-  // From the cell sets hierarchy and the list of selected cell sets,
-  // generate the array of set sizes data points for the bar plot.
-  const data = useMemo(() => (mergedCellSets && cellSetSelection && cellSetColor
-    ? treeToSetSizesBySetNames(mergedCellSets, cellSetSelection, cellSetColor, theme)
-    : []
-  ), [mergedCellSets, cellSetSelection, cellSetColor, theme]);
+  const data = useMemo(() => {
+    if (cellSetSelection && cellSetColor && mergedCellSets && cellSets) {
+      let newHierarchy = currentHierarchy;
+
+      if (cellSetSelection) {
+        const changedHierarchy = findChangedHierarchy(prevCellSetSelection, cellSetSelection);
+        setPrevCellSetSelection(cellSetSelection);
+
+        if (changedHierarchy) {
+          setCurrentHierarchy(changedHierarchy);
+          newHierarchy = changedHierarchy;
+        }
+      }
+
+      const cellSetPaths = filterPathsByExpansionAndSelection(
+        mergedCellSets,
+        newHierarchy,
+        cellSetExpansion,
+        cellSetSelection,
+      );
+
+      if (mergedCellSets && cellSets && cellSetSelection && cellSetColor) {
+        return treeToSetSizesBySetNames(
+          mergedCellSets,
+          cellSetPaths,
+          cellSetSelection,
+          cellSetColor,
+          theme,
+        );
+      }
+    }
+    return [];
+  }, [
+    mergedCellSets,
+    cellSetSelection,
+    cellSetExpansion,
+    cellSetColor,
+    theme,
+  ]);
+
+  const onBarSelect = (setNamePath, wasGrayedOut, selectOnlyEnabled = false) => {
+    if (selectOnlyEnabled) {
+      setCellSetSelection([setNamePath]);
+      return;
+    }
+    if (!wasGrayedOut) {
+      setCellSetSelection(cellSetSelection.filter(d => !isEqual(d, setNamePath)));
+    } else if (wasGrayedOut) {
+      setCellSetSelection([...cellSetSelection, setNamePath]);
+    }
+  };
 
   return (
     <TitleInfo
@@ -86,6 +137,7 @@ export function CellSetSizesPlotSubscriber(props) {
       <div ref={containerRef} className={classes.vegaContainer}>
         <CellSetSizesPlot
           data={data}
+          onBarSelect={onBarSelect}
           theme={theme}
           width={width}
           height={height}
@@ -95,11 +147,3 @@ export function CellSetSizesPlotSubscriber(props) {
     </TitleInfo>
   );
 }
-
-export function register() {
-  registerPluginViewType(
-    ViewType.OBS_SET_SIZES,
-    CellSetSizesPlotSubscriber,
-    COMPONENT_COORDINATION_TYPES[ViewType.OBS_SET_SIZES],
-  );
-}

package/src/ExpressionHistogram.js

@@ -1,7 +1,14 @@
-import React from 'react';
-import clamp from 'lodash/clamp';
+import React, { useState, useEffect, useCallback } from 'react';
+import { clamp, debounce } from 'lodash-es';
 import { VegaPlot, VEGA_THEMES } from '@vitessce/vega';
 
+/**
+ * We use debounce, so that onSelect is called only after the user has finished the selection.
+ * Due to vega-lite limitations, we cannot use the vega-lite signals to implement this.
+ * See this issue: https://github.com/vega/vega-lite/issues/5728
+ * See this for reference on what is supported: https://vega.github.io/vega-lite/docs/selection.html
+ */
+
 /**
  * Gene expression histogram displayed as a bar chart,
  * implemented with the VegaPlot component.
@@ -29,14 +36,18 @@ export default function ExpressionHistogram(props) {
     height,
     marginRight = 90,
     marginBottom = 50,
+    onSelect,
   } = props;
 
+  const [selectedRanges, setSelectedRanges] = useState([]);
+
   const xTitle = geneSelection && geneSelection.length >= 1
     ? 'Normalized Expression Value'
     : 'Total Normalized Transcript Count';
 
   const spec = {
-    mark: { type: 'bar' },
+    data: { values: data },
+    mark: 'bar',
     encoding: {
       x: {
         field: 'value',
@@ -50,15 +61,59 @@ export default function ExpressionHistogram(props) {
         title: 'Number of Cells',
       },
       color: { value: 'gray' },
+      opacity: {
+        condition: { selection: 'brush', value: 1 },
+        value: 0.7,
+      },
     },
+    params: [
+      {
+        name: 'brush',
+        select: { type: 'interval', encodings: ['x'] },
+      },
+    ],
     width: clamp(width - marginRight, 10, Infinity),
     height: clamp(height - marginBottom, 10, Infinity),
     config: VEGA_THEMES[theme],
   };
 
+
+  const handleSignal = (name, value) => {
+    if (name === 'brush') {
+      setSelectedRanges(value.value);
+    }
+  };
+
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const debouncedOnSelect = useCallback(debounce((ranges, latestOnSelect) => {
+    latestOnSelect(ranges);
+    // We set a debounce timer of 1000ms: the assumption here is that the user has
+    // finished the selection when there's been no mouse movement on the histogram for a second.
+    // We do not pass any dependencies for the useCallback
+    // since we only want to define the debounced function once (on the initial render).
+  }, 1000), []);
+
+  useEffect(() => {
+    if (!selectedRanges || selectedRanges.length === 0) return () => {};
+
+    // Call the debounced function instead of directly calling onSelect
+    debouncedOnSelect(selectedRanges, onSelect);
+
+    // Clean up the debounce timer when the component unmounts or the dependency changes
+    return () => {
+      debouncedOnSelect.cancel();
+    };
+  // We only want to call the debounced function when the selectedRanges changes.
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedRanges]);
+
+  const signalListeners = { brush: handleSignal };
+
   return (
     <VegaPlot
       data={data}
+      signalListeners={signalListeners}
       spec={spec}
     />
   );

package/src/ExpressionHistogramSubscriber.js

@@ -1,16 +1,17 @@
-import React, { useMemo } from 'react';
+import React, {
+  useMemo, useCallback,
+} from 'react';
 import { sum } from 'd3-array';
 import {
   TitleInfo,
   useCoordination, useLoaders,
   useUrls, useReady, useGridItemSize,
   useObsFeatureMatrixData, useFeatureSelection,
-  registerPluginViewType,
 } from '@vitessce/vit-s';
 import { ViewType, COMPONENT_COORDINATION_TYPES } from '@vitessce/constants-internal';
-import ExpressionHistogram from './ExpressionHistogram';
-import { useStyles } from './styles';
-
+import { setObsSelection, getObsInfoFromDataWithinRange } from '@vitessce/sets-utils';
+import ExpressionHistogram from './ExpressionHistogram.js';
+import { useStyles } from './styles.js';
 /**
  * A subscriber component for `ExpressionHistogram`,
  * which listens for gene selection updates and
@@ -38,17 +39,25 @@ export function ExpressionHistogramSubscriber(props) {
     featureType,
     featureValueType,
     featureSelection: geneSelection,
+    additionalObsSets: additionalCellSets,
+    obsSetColor: cellSetColor,
+  }, {
+    setAdditionalObsSets: setAdditionalCellSets,
+    setObsSetColor: setCellSetColor,
+    setObsColorEncoding: setCellColorEncoding,
+    setObsSetSelection: setCellSetSelection,
   }] = useCoordination(
     COMPONENT_COORDINATION_TYPES[ViewType.FEATURE_VALUE_HISTOGRAM],
     coordinationScopes,
   );
 
   const [width, height, containerRef] = useGridItemSize();
-  const [urls, addUrl] = useUrls(loaders, dataset);
 
   // Get data from loaders using the data hooks.
-  const [{ obsIndex, featureIndex, obsFeatureMatrix }, matrixStatus] = useObsFeatureMatrixData(
-    loaders, dataset, addUrl, true, {}, {},
+  const [
+    { obsIndex, featureIndex, obsFeatureMatrix }, matrixStatus, matrixUrls,
+  ] = useObsFeatureMatrixData(
+    loaders, dataset, true, {}, {},
     { obsType, featureType, featureValueType },
   );
   // eslint-disable-next-line no-unused-vars
@@ -60,6 +69,9 @@ export function ExpressionHistogramSubscriber(props) {
     matrixStatus,
     featureSelectionStatus,
   ]);
+  const urls = useUrls([
+    matrixUrls,
+  ]);
 
   const firstGeneSelected = geneSelection && geneSelection.length >= 1
     ? geneSelection[0]
@@ -69,11 +81,12 @@ export function ExpressionHistogramSubscriber(props) {
   // generate the array of data points for the histogram.
   const data = useMemo(() => {
     if (firstGeneSelected && obsFeatureMatrix && expressionData) {
-      // Create new cellColors map based on the selected gene.
-      return Array.from(expressionData[0]).map((_, index) => {
-        const value = expressionData[0][index];
+      return obsIndex.map((cellId, cellIndex) => {
+        const value = expressionData[0][cellIndex];
+        // Create new cellColors map based on the selected gene.
         const normValue = value * 100 / 255;
-        return { value: normValue, gene: firstGeneSelected };
+        const newItem = { value: normValue, gene: firstGeneSelected, cellId };
+        return newItem;
       });
     }
     if (obsFeatureMatrix) {
@@ -82,12 +95,28 @@ export function ExpressionHistogramSubscriber(props) {
         const values = obsFeatureMatrix.data
           .subarray(cellIndex * numGenes, (cellIndex + 1) * numGenes);
         const sumValue = sum(values) * 100 / 255;
-        return { value: sumValue, gene: null };
+        const newItem = { value: sumValue, gene: null, cellId };
+        return newItem;
       });
     }
     return null;
   }, [obsIndex, featureIndex, obsFeatureMatrix, firstGeneSelected, expressionData]);
 
+  const onSelect = useCallback((value) => {
+    const geneName = firstGeneSelected ? [firstGeneSelected, 'values'].join(' ') : 'transcript count';
+
+    const selectedCellIds = getObsInfoFromDataWithinRange(value, data);
+    setObsSelection(
+      selectedCellIds, additionalCellSets, cellSetColor,
+      setCellSetSelection, setAdditionalCellSets, setCellSetColor,
+      setCellColorEncoding,
+      'Selection ',
+      `: based on ${geneName} in range [${value[0].toFixed(1)}, ${value[1].toFixed(1)}] `,
+    );
+  }, [additionalCellSets, cellSetColor, data, setAdditionalCellSets,
+    setCellColorEncoding, setCellSetColor, setCellSetSelection, firstGeneSelected,
+  ]);
+
   return (
     <TitleInfo
       title={`Expression Histogram${(firstGeneSelected ? ` (${firstGeneSelected})` : '')}`}
@@ -99,6 +128,7 @@ export function ExpressionHistogramSubscriber(props) {
       <div ref={containerRef} className={classes.vegaContainer}>
         <ExpressionHistogram
           geneSelection={geneSelection}
+          onSelect={onSelect}
           data={data}
           theme={theme}
           width={width}
@@ -108,11 +138,3 @@ export function ExpressionHistogramSubscriber(props) {
     </TitleInfo>
   );
 }
-
-export function register() {
-  registerPluginViewType(
-    ViewType.FEATURE_VALUE_HISTOGRAM,
-    ExpressionHistogramSubscriber,
-    COMPONENT_COORDINATION_TYPES[ViewType.FEATURE_VALUE_HISTOGRAM],
-  );
-}

package/src/index.js

@@ -1,6 +1,6 @@
-export { CellSetExpressionPlotSubscriber, register as registerCellSetExpression } from './CellSetExpressionPlotSubscriber';
-export { CellSetSizesPlotSubscriber, register as registerCellSetSizes } from './CellSetSizesPlotSubscriber';
-export { ExpressionHistogramSubscriber, register as registerExpressionHistogram } from './ExpressionHistogramSubscriber';
-export { default as CellSetSizesPlot } from './CellSetSizesPlot';
-export { default as CellSetExpressionPlot } from './CellSetExpressionPlot';
-export { default as ExpressionHistogram } from './ExpressionHistogram';
+export { CellSetExpressionPlotSubscriber } from './CellSetExpressionPlotSubscriber.js';
+export { CellSetSizesPlotSubscriber } from './CellSetSizesPlotSubscriber.js';
+export { ExpressionHistogramSubscriber } from './ExpressionHistogramSubscriber.js';
+export { default as CellSetSizesPlot } from './CellSetSizesPlot.js';
+export { default as CellSetExpressionPlot } from './CellSetExpressionPlot.js';
+export { default as ExpressionHistogram } from './ExpressionHistogram.js';

package/src/styles.js

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core';
 
 export const useStyles = makeStyles(() => ({
   vegaContainer: {