@vitessce/statistical-plots 4.0.6 → 4.0.8

package/src/CellSetCompositionBarPlot.js

@@ -88,6 +88,7 @@ export default function CellSetCompositionBarPlot(props) {
           interceptExpectedSample: df.interceptExpectedSample[i],
           effectExpectedSample: df.effectExpectedSample[i],
           isCredibleEffect: df.isCredibleEffect[i],
+          significanceText: df.isCredibleEffect[i] ? ' ' : 'NS',
           // Boolean flag for wasReferenceObsSet (check metadata)
           isReferenceSet: (obsSetId === referenceCellType),
         };
@@ -134,69 +135,107 @@ export default function CellSetCompositionBarPlot(props) {
     return undefined;
   }, [computedData]);
 
+  const nsTextAlign = useMemo(() => {
+    if (computedData) {
+      const firstNotSig = computedData.find(d => !d.isCredibleEffect);
+      return firstNotSig?.logFoldChange < 0 ? 'right' : 'left';
+    }
+    return 'center';
+  }, [computedData]);
+
+  const areAnySignificant = useMemo(() => computedData?.some(
+    d => d.isCredibleEffect,
+  ), [computedData]);
+
   const xScale = {
     domain: xExtent,
   };
 
   const spec = {
-    mark: { type: 'bar', stroke: 'black', cursor: 'pointer' },
-    params: [
+    layer: [
       {
-        name: 'bar_select',
-        select: {
-          type: 'point',
-          on: 'click[event.shiftKey === false]',
-          fields: ['obsSetPath'],
-          empty: 'none',
+        params: [
+          {
+            name: 'bar_select',
+            select: {
+              type: 'point',
+              on: 'click[event.shiftKey === false]',
+              fields: ['obsSetPath'],
+              empty: 'none',
+            },
+          },
+          {
+            name: 'shift_bar_select',
+            select: {
+              type: 'point',
+              on: 'click[event.shiftKey]',
+              fields: ['obsSetPath'],
+              empty: 'none',
+            },
+          },
+        ],
+        mark: { type: 'bar', stroke: 'black', cursor: 'pointer' },
+        encoding: {
+          y: {
+            field: 'keyName',
+            type: 'nominal',
+            axis: { labelExpr: `substring(datum.label, ${keyLength})` },
+            title: `${captializedObsType} Set`,
+            sort: keys,
+          },
+          x: {
+            // TODO: support using intercept+effect here based on user-selected options?
+            field: 'logFoldChange',
+            type: 'quantitative',
+            title: 'Log fold-change',
+            scale: xScale,
+          },
+          color: {
+            field: 'key',
+            type: 'nominal',
+            scale: colorScale,
+            legend: null,
+          },
+          fillOpacity: {
+            field: 'isCredibleEffect',
+            type: 'nominal',
+            scale: opacityScale,
+          },
+          strokeWidth: {
+            field: 'isReferenceSet',
+            type: 'nominal',
+            scale: strokeWidthScale,
+            legend: null,
+          },
+          tooltip: {
+            field: 'effectExpectedSample',
+            type: 'quantitative',
+          },
         },
       },
       {
-        name: 'shift_bar_select',
-        select: {
-          type: 'point',
-          on: 'click[event.shiftKey]',
-          fields: ['obsSetPath'],
-          empty: 'none',
+        mark: { type: 'text', align: nsTextAlign, dx: nsTextAlign === 'right' ? -5 : 5 },
+        encoding: {
+          y: {
+            field: 'keyName',
+            type: 'nominal',
+            axis: { labelExpr: `substring(datum.label, ${keyLength})` },
+            title: `${captializedObsType} Set`,
+            sort: keys,
+          },
+          x: {
+            field: 'logFoldChange',
+            type: 'quantitative',
+            title: 'Log fold-change',
+            scale: xScale,
+          },
+          text: {
+            field: 'significanceText',
+          },
         },
       },
     ],
-    encoding: {
-      y: {
-        field: 'keyName',
-        type: 'nominal',
-        axis: { labelExpr: `substring(datum.label, ${keyLength})` },
-        title: `${captializedObsType} Set`,
-        sort: keys,
-      },
-      x: {
-        // TODO: support using intercept+effect here based on user-selected options?
-        field: 'logFoldChange',
-        type: 'quantitative',
-        title: 'Log fold-change',
-        scale: xScale,
-      },
-      color: {
-        field: 'key',
-        type: 'nominal',
-        scale: colorScale,
-        legend: null,
-      },
-      fillOpacity: {
-        field: 'isCredibleEffect',
-        type: 'nominal',
-        scale: opacityScale,
-      },
-      strokeWidth: {
-        field: 'isReferenceSet',
-        type: 'nominal',
-        scale: strokeWidthScale,
-        legend: null,
-      },
-      tooltip: {
-        field: 'effectExpectedSample',
-        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),
@@ -221,11 +260,17 @@ export default function CellSetCompositionBarPlot(props) {
   ), [captializedObsType]);
 
   return (
-    <VegaPlot
-      data={computedData}
-      spec={spec}
-      signalListeners={signalListeners}
-      getTooltipText={getTooltipText}
-    />
+    <>
+      {areAnySignificant ? (
+        <VegaPlot
+          data={computedData}
+          spec={spec}
+          signalListeners={signalListeners}
+          getTooltipText={getTooltipText}
+        />
+      ) : (
+        <p>No results were significant for the selected conditions.</p>
+      )}
+    </>
   );
 }

package/src/SingleCellSetSelector.js

@@ -0,0 +1,54 @@
+import React, { useCallback } from 'react';
+import { Grid, NativeSelect } from '@vitessce/styles';
+
+function pathToKey(pathArr) {
+  return pathArr.join('___');
+}
+
+function keyToPath(keyStr) {
+  return keyStr.split('___');
+}
+
+export default function SingleCellSetSelector(props) {
+  const {
+    multiObsSetSelection,
+    singleObsSetSelection,
+    setSingleObsSetSelection,
+  } = props;
+
+  const handleChange = useCallback((event) => {
+    if (event.target.value === '__none__') {
+      setSingleObsSetSelection(null);
+    } else {
+      const nextPath = keyToPath(event.target.value);
+      setSingleObsSetSelection([
+        nextPath,
+      ]);
+    }
+  }, []);
+
+  const hasMultiOptions = (
+    Array.isArray(multiObsSetSelection)
+    && multiObsSetSelection.length > 0
+  );
+
+  return (
+    <Grid container size={12}>
+      <NativeSelect
+        onChange={handleChange}
+        value={singleObsSetSelection ? pathToKey(singleObsSetSelection) : '__none__'}
+        variant="standard"
+        sx={{ width: '100%' }}
+      >
+        <option value="__none__">None</option>
+        {hasMultiOptions ? (
+          <>
+            {multiObsSetSelection.map(o => (
+              <option value={pathToKey(o)}>{o.at(-1)}</option>
+            ))}
+          </>
+        ) : null}
+      </NativeSelect>
+    </Grid>
+  );
+}

package/src/SingleCellSetSelectorSubscriber.js

@@ -0,0 +1,124 @@
+/* eslint-disable no-unused-vars */
+import React, { useEffect } from 'react';
+import {
+  TitleInfo,
+  useCoordination,
+  useLoaders,
+  useReady,
+  useFeatureStatsData,
+  useMatchingLoader,
+  useColumnNameMapping,
+  useCoordinationScopes,
+  useMultiCoordinationScopes,
+} from '@vitessce/vit-s';
+import {
+  ViewType,
+  COMPONENT_COORDINATION_TYPES,
+  ViewHelpMapping,
+  DataType,
+  CoordinationType,
+} from '@vitessce/constants-internal';
+import { isEqual } from 'lodash-es';
+import SingleCellSetSelector from './SingleCellSetSelector.js';
+
+export function SingleCellSetSelectorSubscriber(props) {
+  const {
+    title = 'Cell Type of Interest',
+    coordinationScopes: coordinationScopesRaw,
+    removeGridComponent,
+    theme,
+    helpText = ViewHelpMapping.SINGLE_OBS_SET_SELECTOR,
+  } = props;
+
+  const loaders = useLoaders();
+  const coordinationScopes = useCoordinationScopes(coordinationScopesRaw);
+
+  // Get "props" from the coordination space.
+  const [{
+    obsType,
+    obsSetColor,
+  }, {
+    setObsType,
+    setObsSetColor,
+  }] = useCoordination(
+    COMPONENT_COORDINATION_TYPES[ViewType.SINGLE_OBS_SET_SELECTOR],
+    coordinationScopes,
+  );
+
+
+  const obsSetSelectionScopes = useMultiCoordinationScopes(
+    CoordinationType.OBS_SET_SELECTION,
+    coordinationScopes,
+  );
+
+  const [{
+    obsSetSelection: multiObsSetSelection,
+  }, {
+    setObsSetSelection: setMultiObsSetSelection,
+  }] = useCoordination(
+    COMPONENT_COORDINATION_TYPES[ViewType.SINGLE_OBS_SET_SELECTOR],
+    { obsSetSelection: obsSetSelectionScopes?.[0] },
+  );
+
+  const [{
+    obsSetSelection: singleObsSetSelectionArr,
+  }, {
+    setObsSetSelection: setSingleObsSetSelection,
+  }] = useCoordination(
+    COMPONENT_COORDINATION_TYPES[ViewType.SINGLE_OBS_SET_SELECTOR],
+    { obsSetSelection: obsSetSelectionScopes?.[1] },
+  );
+
+  const singleObsSetSelection = singleObsSetSelectionArr?.[0];
+
+
+  useEffect(() => {
+    // If multiObsSetSelection changes, there are multiple things that can occur:
+    // - length is one and does not match the current singleObsSetSelection
+    //   -> we update singleObsSetSelection.
+    // - length is zero or does not contain the current singleObsSetSelection
+    //   -> we set singleObsSetSelection to null or the first entry of the
+    //      multiple selection array.
+    // - otherwise, do nothing.
+
+    if (!Array.isArray(multiObsSetSelection) || multiObsSetSelection.length === 0) {
+      setSingleObsSetSelection(null);
+    } else {
+      const multiContainsSingle = multiObsSetSelection.some(
+        setPath => isEqual(setPath, singleObsSetSelection),
+      );
+      if (!multiContainsSingle) {
+        setSingleObsSetSelection([multiObsSetSelection?.[0]]);
+      }
+    }
+  }, [multiObsSetSelection]);
+
+  const errors = [];
+
+  const isReady = useReady([]);
+
+  return (
+    <TitleInfo
+      title={title}
+      removeGridComponent={removeGridComponent}
+      theme={theme}
+      isReady={isReady}
+      helpText={helpText}
+      errors={errors}
+      withPadding={false}
+    >
+      {Array.isArray(multiObsSetSelection) && multiObsSetSelection.length > 0 ? (
+        <SingleCellSetSelector
+          theme={theme}
+          obsType={obsType}
+          obsSetColor={obsSetColor}
+          multiObsSetSelection={multiObsSetSelection}
+          singleObsSetSelection={singleObsSetSelection}
+          setSingleObsSetSelection={setSingleObsSetSelection}
+        />
+      ) : (
+        <p style={{ padding: '12px' }}>Select at least one {obsType} set.</p>
+      )}
+    </TitleInfo>
+  );
+}

package/src/VolcanoPlot.js

@@ -58,7 +58,7 @@ export default function VolcanoPlot(props) {
       return [null, null];
     }
     let xExtentResult = d3_extent(
-      computedData.flatMap(d => d3_extent(d.df.logFoldChange)),
+      computedData.flatMap(d => d3_extent(d.df.logFoldChange.filter(v => Number.isFinite(v)))),
     );
     const xAbsMax = Math.max(Math.abs(xExtentResult[0]), Math.abs(xExtentResult[1]));
     xExtentResult = [-xAbsMax, xAbsMax];
@@ -207,7 +207,13 @@ export default function VolcanoPlot(props) {
     filteredData.forEach((comparisonObject) => {
       const obsSetG = g.append('g');
 
-      const { df: filteredDf, metadata } = comparisonObject;
+      const { df: rawFilteredDf, metadata } = comparisonObject;
+      // Points with a NaN logFoldChange or minusLog10p (e.g. missing/invalid p-value) cannot be
+      // positioned on the y-axis, even with clamping/jitter, so drop them here.
+      // Note that we still try to position points with -inf or inf values below, just not NaN.
+      const filteredDf = rawFilteredDf.filter(d => (
+        !Number.isNaN(d.minusLog10p) && !Number.isNaN(d.logFoldChange)
+      ));
       const coordinationValues = metadata.coordination_values;
 
       const rawObsSetPath = coordinationValues.obsSetFilter

package/src/VolcanoPlotOptions.js

@@ -64,7 +64,7 @@ export default function VolcanoPlotOptions(props) {
             valueLabelDisplay="auto"
             step={1}
             min={0}
-            max={100}
+            max={50}
           />
         </TableCell>
       </TableRow>
@@ -89,7 +89,7 @@ export default function VolcanoPlotOptions(props) {
             valueLabelDisplay="auto"
             step={0.5}
             min={0}
-            max={50}
+            max={10}
           />
         </TableCell>
       </TableRow>

package/src/VolcanoPlotSubscriber.js

@@ -1,4 +1,5 @@
 /* eslint-disable no-unused-vars */
+/* eslint-disable no-nested-ternary */
 import React, { useMemo, useCallback } from 'react';
 import {
   TitleInfo,
@@ -122,6 +123,10 @@ export function VolcanoPlotSubscriber(props) {
     setFeatureSelection([featureId]);
   }, [setFeatureSelection]);
 
+  const anyNonEmpty = useMemo(() => featureStats?.some(
+    d => !d.metadata?.analysis_params?.is_empty,
+  ), [featureStats]);
+
   return (
     <TitleInfo
       title={title}
@@ -149,28 +154,35 @@ export function VolcanoPlotSubscriber(props) {
     >
       <div ref={containerRef} className={classes.vegaContainer}>
         {featureStats ? (
-          <VolcanoPlot
-            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={featureStats}
-            onFeatureClick={onFeatureClick}
+          anyNonEmpty ? (
+            <VolcanoPlot
+              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={featureStats}
+              onFeatureClick={onFeatureClick}
 
-            featurePointSignificanceThreshold={featurePointSignificanceThreshold}
-            featurePointFoldChangeThreshold={featurePointFoldChangeThreshold}
-            featureLabelSignificanceThreshold={featureLabelSignificanceThreshold}
-            featureLabelFoldChangeThreshold={featureLabelFoldChangeThreshold}
-          />
+              featurePointSignificanceThreshold={featurePointSignificanceThreshold}
+              featurePointFoldChangeThreshold={featurePointFoldChangeThreshold}
+              featureLabelSignificanceThreshold={featureLabelSignificanceThreshold}
+              featureLabelFoldChangeThreshold={featureLabelFoldChangeThreshold}
+            />
+          ) : (
+            <span>
+              Differential expression tests were not performed
+              for the currently selected groups due to insufficient data.
+            </span>
+          )
         ) : (
           <span>Select at least one {obsType} set.</span>
         )}

package/src/index.js

@@ -8,6 +8,7 @@ export { VolcanoPlotSubscriber } from './VolcanoPlotSubscriber.js';
 export { CellSetCompositionBarPlotSubscriber } from './CellSetCompositionBarPlotSubscriber.js';
 export { FeatureSetEnrichmentBarPlotSubscriber } from './FeatureSetEnrichmentBarPlotSubscriber.js';
 export { FeatureStatsTableSubscriber } from './FeatureStatsTableSubscriber.js';
+export { SingleCellSetSelectorSubscriber } from './SingleCellSetSelectorSubscriber.js';
 export { default as CellSetSizesPlot } from './CellSetSizesPlot.js';
 export { default as CellSetExpressionPlot } from './CellSetExpressionPlot.js';
 export { default as ExpressionHistogram } from './ExpressionHistogram.js';