@vitessce/statistical-plots 3.5.8 → 3.5.10

package/src/FeatureStatsTable.js

@@ -0,0 +1,116 @@
+import React, { useMemo, useState, useCallback } from 'react';
+import { DataGrid } from '@mui/x-data-grid';
+import { capitalize } from '@vitessce/utils';
+import { useFilteredVolcanoData } from './utils.js';
+
+const ROW_ID_DELIMITER = '___';
+const INITIAL_SORT_MODEL = [
+  // We initially set the sorting this way
+  { field: 'logFoldChange', sort: 'desc' },
+];
+
+export default function FeatureStatsTable(props) {
+  const {
+    obsType,
+    featureType,
+    obsSetsColumnNameMappingReversed,
+    sampleSetsColumnNameMappingReversed,
+    sampleSetSelection,
+    data,
+    setFeatureSelection,
+    featurePointSignificanceThreshold,
+    featurePointFoldChangeThreshold,
+  } = props;
+
+  const [
+    // eslint-disable-next-line no-unused-vars
+    computedData,
+    filteredData,
+  ] = useFilteredVolcanoData({
+    data,
+    obsSetsColumnNameMappingReversed,
+    sampleSetsColumnNameMappingReversed,
+    featurePointFoldChangeThreshold,
+    featurePointSignificanceThreshold,
+    sampleSetSelection,
+  });
+
+  // Reference: https://v4.mui.com/api/data-grid/data-grid/
+  const columns = useMemo(() => ([
+    {
+      field: 'featureId',
+      headerName: capitalize(featureType),
+      width: 200,
+      editable: false,
+    },
+    {
+      field: 'logFoldChange',
+      headerName: 'Log Fold-Change',
+      width: 200,
+      editable: false,
+    },
+    {
+      field: 'featureSignificance',
+      headerName: 'P-value',
+      width: 200,
+      editable: false,
+    },
+    {
+      field: 'obsSetName',
+      headerName: `${capitalize(obsType)} Set`,
+      width: 200,
+      editable: false,
+    },
+  ]), [obsType, featureType]);
+
+  const rows = useMemo(() => {
+    let result = [];
+    if (filteredData) {
+      filteredData.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 obsSetName = obsSetPath.at(-1);
+
+        result = result.concat(df.map(row => ({
+          ...row,
+          id: `${row.featureId}${ROW_ID_DELIMITER}${obsSetName}`,
+          obsSetName,
+        })));
+      });
+    }
+    return result;
+  }, [filteredData, obsSetsColumnNameMappingReversed]);
+
+  const onSelectionModelChange = useCallback((rowIds) => {
+    const featureIds = rowIds.map(rowId => rowId.split(ROW_ID_DELIMITER)[0]);
+    setFeatureSelection(featureIds);
+  }, []);
+
+  const rowSelectionModel = useMemo(() => [], []);
+
+  const [sortModel, setSortModel] = useState(INITIAL_SORT_MODEL);
+
+  const getRowId = useCallback(row => row.id, []);
+
+  return (
+    <DataGrid
+      density="compact"
+      rows={rows}
+      columns={columns}
+      pageSize={10}
+      // checkboxSelection // TODO: uncomment to enable multiple-row selection
+      onSelectionModelChange={onSelectionModelChange}
+      rowSelectionModel={rowSelectionModel}
+      getRowId={getRowId}
+      sortModel={sortModel}
+      onSortModelChange={setSortModel}
+    />
+  );
+}

package/src/FeatureStatsTableSubscriber.js

@@ -0,0 +1,133 @@
+/* eslint-disable no-unused-vars */
+import React from 'react';
+import {
+  TitleInfo,
+  useCoordination,
+  useLoaders,
+  useReady,
+  useFeatureStatsData,
+  useMatchingLoader,
+  useColumnNameMapping,
+} from '@vitessce/vit-s';
+import {
+  ViewType,
+  COMPONENT_COORDINATION_TYPES,
+  ViewHelpMapping,
+  DataType,
+} from '@vitessce/constants-internal';
+import FeatureStatsTable from './FeatureStatsTable.js';
+import { useRawSetPaths } from './utils.js';
+
+export function FeatureStatsTableSubscriber(props) {
+  const {
+    title = 'Differential Expression Results',
+    coordinationScopes,
+    removeGridComponent,
+    theme,
+    helpText = ViewHelpMapping.FEATURE_STATS_TABLE,
+  } = props;
+
+  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,
+    featureValueTransform,
+    featureValueTransformCoefficient,
+    gatingFeatureSelectionX,
+    gatingFeatureSelectionY,
+    featureSelection,
+    sampleSetSelection,
+    sampleSetColor,
+  }, {
+    setObsFilter: setCellFilter,
+    setObsSetSelection,
+    setObsHighlight: setCellHighlight,
+    setObsSetColor: setCellSetColor,
+    setObsColorEncoding: setCellColorEncoding,
+    setAdditionalObsSets: setAdditionalCellSets,
+    setFeaturePointSignificanceThreshold,
+    setFeaturePointFoldChangeThreshold,
+    setFeatureValueTransform,
+    setFeatureValueTransformCoefficient,
+    setGatingFeatureSelectionX,
+    setGatingFeatureSelectionY,
+    setFeatureSelection,
+    setSampleSetSelection,
+    setSampleSetColor,
+  }] = useCoordination(
+    COMPONENT_COORDINATION_TYPES[ViewType.FEATURE_STATS_TABLE],
+    coordinationScopes,
+  );
+
+  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 [{ featureStats }, featureStatsStatus] = useFeatureStatsData(
+    loaders, dataset, false,
+    { obsType, featureType, sampleType },
+    // These volcanoOptions are passed to FeatureStatsAnndataLoader.loadMulti():
+    { sampleSetSelection: rawSampleSetSelection, obsSetSelection: rawObsSetSelection },
+  );
+
+  const isReady = useReady([
+    featureStatsStatus,
+  ]);
+
+  return (
+    <TitleInfo
+      title={title}
+      removeGridComponent={removeGridComponent}
+      theme={theme}
+      isReady={isReady}
+      helpText={helpText}
+      withPadding={false}
+    >
+      {featureStats ? (
+        <FeatureStatsTable
+          theme={theme}
+          obsType={obsType}
+          featureType={featureType}
+          obsSetsColumnNameMapping={obsSetsColumnNameMapping}
+          obsSetsColumnNameMappingReversed={obsSetsColumnNameMappingReversed}
+          sampleSetsColumnNameMapping={sampleSetsColumnNameMapping}
+          sampleSetsColumnNameMappingReversed={sampleSetsColumnNameMappingReversed}
+          sampleSetSelection={sampleSetSelection}
+          obsSetSelection={obsSetSelection}
+          obsSetColor={obsSetColor}
+          sampleSetColor={sampleSetColor}
+          data={featureStats}
+          featureSelection={featureSelection}
+          setFeatureSelection={setFeatureSelection}
+          featurePointSignificanceThreshold={featurePointSignificanceThreshold}
+          featurePointFoldChangeThreshold={featurePointFoldChangeThreshold}
+        />
+      ) : (
+        <p style={{ padding: '12px' }}>Select at least one {obsType} set.</p>
+      )}
+    </TitleInfo>
+  );
+}

package/src/Treemap.js

@@ -47,6 +47,7 @@ export default function Treemap(props) {
     marginRight = 5,
     marginLeft = 80,
     marginBottom,
+    onNodeClick,
   } = props;
 
   const hierarchyData = useMemo(() => {
@@ -104,6 +105,10 @@ export default function Treemap(props) {
   useEffect(() => {
     const domElement = svgRef.current;
 
+    if (!width || !height) {
+      return;
+    }
+
     const svg = select(domElement);
     svg.selectAll('g').remove();
     svg
@@ -112,7 +117,7 @@ export default function Treemap(props) {
       .attr('viewBox', [0, 0, width, height])
       .attr('style', 'font: 10px sans-serif');
 
-    if (!treemapLeaves || !obsSetSelection || !sampleSetSelection) {
+    if (!treemapLeaves || !obsSetSelection) {
       return;
     }
 
@@ -154,7 +159,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')
@@ -166,14 +178,28 @@ export default function Treemap(props) {
       .append('use')
         .attr('xlink:href', d => d.leafUid.href);
 
+    const hasSampleSetSelection = Array.isArray(sampleSetSelection);
+
     // 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),
+        ...(
+          hasSampleSetSelection
+          ? ([
+            d.data?.[0]?.at(-1),
+            d.parent?.data?.[0]?.at(-1),
+          ]) : ([
+            // Only use the cell set name
+            // for the line of text
+            // (since no sample set selection)
+            hierarchyLevels[0] === 'obsSet'
+              ? d.parent?.data?.[0].at(-1)
+              : d.data?.[0].at(-1),
+          ])
+        ),
         `${d.data?.[1].toLocaleString()} ${plur(obsType, d.data?.[1])}`,
       ]))
       .join('tspan')
@@ -184,7 +210,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,
@@ -173,12 +173,12 @@ export function TreemapSubscriber(props) {
       });
     });
 
-    const sampleSetSizes = treeToSetSizesBySetNames(
+    const sampleSetSizes = hasSampleSetSelection ? treeToSetSizesBySetNames(
       mergedSampleSets, sampleSetSelection, sampleSetSelection, sampleSetColor, theme,
-    );
+    ) : null;
 
     sampleSetKeys.forEach((sampleSetKey) => {
-      const sampleSetSize = sampleSetSizes.find(d => isEqual(d.setNamePath, sampleSetKey))?.size;
+      const sampleSetSize = sampleSetSizes?.find(d => isEqual(d.setNamePath, sampleSetKey))?.size;
       sampleResult.set(sampleSetKey, sampleSetSize || 0);
     });
 
@@ -193,7 +193,9 @@ export function TreemapSubscriber(props) {
 
         const cellSet = cellIdToSetMap?.get(obsId);
         const sampleId = sampleEdges?.get(obsId);
-        const sampleSet = sampleId ? sampleIdToSetMap?.get(sampleId) : null;
+        const sampleSet = sampleId && hasSampleSetSelection
+          ? sampleIdToSetMap?.get(sampleId)
+          : null;
 
         if (hasSampleSetSelection && !sampleSet) {
           // Skip this sample if it is not in the selected sample set.
@@ -215,6 +217,10 @@ export function TreemapSubscriber(props) {
     // TODO: consider filtering-related coordination values
   ]);
 
+  const onNodeClick = useCallback((obsSetPath) => {
+    setObsSetSelection([obsSetPath]);
+  }, [setObsSetSelection]);
+
   return (
     <TitleInfo
       title={`Treemap of ${capitalize(plur(obsType, 2))}`}
@@ -255,6 +261,7 @@ export function TreemapSubscriber(props) {
           sampleSetColor={sampleSetColor}
           obsSetSelection={obsSetSelection}
           sampleSetSelection={sampleSetSelection}
+          onNodeClick={onNodeClick}
         />
       </div>
     </TitleInfo>

package/src/VolcanoPlot.js

@@ -5,9 +5,9 @@ import { scaleLinear } from 'd3-scale';
 import { axisBottom, axisLeft } from 'd3-axis';
 import { extent as d3_extent } from 'd3-array';
 import { select } from 'd3-selection';
-import { isEqual } from 'lodash-es';
-import { capitalize } from '@vitessce/utils';
-import { getColorScale } from './utils.js';
+import { capitalize, getDefaultForegroundColor } from '@vitessce/utils';
+import { colorArrayToString } from '@vitessce/sets-utils';
+import { getColorScale, useFilteredVolcanoData } from './utils.js';
 
 export default function VolcanoPlot(props) {
   const {
@@ -16,8 +16,8 @@ export default function VolcanoPlot(props) {
     height,
     obsType,
     featureType,
-    obsSetsColumnNameMapping,
-    sampleSetsColumnNameMapping,
+    obsSetsColumnNameMappingReversed,
+    sampleSetsColumnNameMappingReversed,
     sampleSetSelection,
     obsSetSelection,
     obsSetColor,
@@ -36,14 +36,14 @@ export default function VolcanoPlot(props) {
 
   const svgRef = useRef();
 
-  const computedData = useMemo(() => data.map(d => ({
-        ...d,
-        df: {
-          ...d.df,
-          minusLog10p: d.df.featureSignificance.map(v => -Math.log10(v)),
-          logFoldChange: d.df.featureFoldChange.map(v => Math.log2(v)),
-        },
-      })), [data]);
+  const [computedData, filteredData] = useFilteredVolcanoData({
+    data,
+    obsSetsColumnNameMappingReversed,
+    sampleSetsColumnNameMappingReversed,
+    featurePointFoldChangeThreshold,
+    featurePointSignificanceThreshold,
+    sampleSetSelection,
+  });
 
   const [xExtent, yExtent] = useMemo(() => {
     if (!computedData) {
@@ -77,7 +77,7 @@ export default function VolcanoPlot(props) {
       .attr('viewBox', [0, 0, width, height])
       .attr('style', 'font: 10px sans-serif');
 
-    if (!computedData || !xExtent || !yExtent) {
+    if (!filteredData || !xExtent || !yExtent) {
       return;
     }
 
@@ -108,7 +108,9 @@ export default function VolcanoPlot(props) {
 
     // Axis titles
     const titleG = svg.append('g');
-    const fgColor = 'black'; // TODO: use theme to determine this
+    const fgColor = colorArrayToString(
+      getDefaultForegroundColor(theme),
+    );
 
     // Y-axis title
     titleG
@@ -131,19 +133,6 @@ export default function VolcanoPlot(props) {
       .style('font-size', '12px')
       .style('fill', fgColor);
 
-    // Get a mapping from column name to group name.
-    const obsSetsColumnNameMappingReversed = Object.fromEntries(
-      Object
-        .entries(obsSetsColumnNameMapping)
-        .map(([key, value]) => ([value, key])),
-    );
-
-    const sampleSetsColumnNameMappingReversed = Object.fromEntries(
-      Object
-        .entries(sampleSetsColumnNameMapping)
-        .map(([key, value]) => ([value, key])),
-    );
-
     // Horizontal and vertical rules to indicate currently-selected thresholds
     // Vertical lines
     const ruleColor = 'silver';
@@ -185,7 +174,6 @@ export default function VolcanoPlot(props) {
         : `${capitalize(obsType)} Set`
       );
 
-
     titleG
       .append('text')
       .attr('text-anchor', 'start')
@@ -208,10 +196,10 @@ export default function VolcanoPlot(props) {
     const g = svg.append('g');
 
     // Append a circle for each data point.
-    computedData.forEach((comparisonObject) => {
+    filteredData.forEach((comparisonObject) => {
       const obsSetG = g.append('g');
 
-      const { df, metadata } = comparisonObject;
+      const { df: filteredDf, metadata } = comparisonObject;
       const coordinationValues = metadata.coordination_values;
 
       const rawObsSetPath = coordinationValues.obsSetFilter
@@ -220,40 +208,6 @@ export default function VolcanoPlot(props) {
       const obsSetPath = [...rawObsSetPath];
       obsSetPath[0] = obsSetsColumnNameMappingReversed[rawObsSetPath[0]];
 
-      // Swap the foldchange direction if backwards with
-      // respect to the current sampleSetSelection pair.
-      // TODO: move this swapping into the computedData useMemo?
-      let shouldSwapFoldChangeDirection = false;
-      if (
-        coordinationValues.sampleSetFilter
-        && coordinationValues.sampleSetFilter.length === 2
-      ) {
-        const rawSampleSetPathA = coordinationValues.sampleSetFilter[0];
-        const sampleSetPathA = [...rawSampleSetPathA];
-        sampleSetPathA[0] = sampleSetsColumnNameMappingReversed[rawSampleSetPathA[0]];
-
-        const rawSampleSetPathB = coordinationValues.sampleSetFilter[1];
-        const sampleSetPathB = [...rawSampleSetPathB];
-        sampleSetPathB[0] = sampleSetsColumnNameMappingReversed[rawSampleSetPathB[0]];
-
-        if (
-          isEqual(sampleSetPathA, sampleSetSelection[1])
-          && isEqual(sampleSetPathB, sampleSetSelection[0])
-        ) {
-          shouldSwapFoldChangeDirection = true;
-        }
-      }
-
-      const filteredDf = df.featureId.map((featureId, i) => ({
-          featureId,
-          logFoldChange: df.logFoldChange[i] * (shouldSwapFoldChangeDirection ? -1 : 1),
-          featureSignificance: df.featureSignificance[i],
-          minusLog10p: df.minusLog10p[i],
-        })).filter(d => (
-        (Math.abs(d.logFoldChange) >= (featurePointFoldChangeThreshold ?? 1.0))
-        && (d.featureSignificance <= (featurePointSignificanceThreshold ?? 0.05))
-      ));
-
       const color = obsSetColorScale(obsSetPath);
 
       obsSetG.append('g')
@@ -290,12 +244,13 @@ export default function VolcanoPlot(props) {
         .text(d => `${featureType}: ${d.featureId}\nin ${obsSetPath?.at(-1)}\nlog2 fold-change: ${d.logFoldChange}\np-value: ${d.featureSignificance}`);
     });
   }, [width, height, theme, sampleSetColor, sampleSetSelection,
-    obsSetSelection, obsSetColor, featureType, computedData,
+    obsSetSelection, obsSetColor, featureType, filteredData,
     xExtent, yExtent, obsType,
     marginLeft, marginBottom, marginTop, marginRight,
     obsSetColorScale, sampleSetColorScale, onFeatureClick,
     featurePointSignificanceThreshold, featurePointFoldChangeThreshold,
     featureLabelSignificanceThreshold, featureLabelFoldChangeThreshold,
+    obsSetsColumnNameMappingReversed,
   ]);
 
   return (

package/src/VolcanoPlotSubscriber.js

@@ -23,6 +23,7 @@ import { useRawSetPaths } from './utils.js';
 
 export function VolcanoPlotSubscriber(props) {
   const {
+    title = 'Volcano Plot',
     coordinationScopes,
     removeGridComponent,
     theme,
@@ -87,7 +88,9 @@ export function VolcanoPlotSubscriber(props) {
     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);
@@ -109,7 +112,7 @@ export function VolcanoPlotSubscriber(props) {
 
   return (
     <TitleInfo
-      title="Volcano Plot"
+      title={title}
       removeGridComponent={removeGridComponent}
       theme={theme}
       isReady={isReady}
@@ -140,7 +143,9 @@ export function VolcanoPlotSubscriber(props) {
             obsType={obsType}
             featureType={featureType}
             obsSetsColumnNameMapping={obsSetsColumnNameMapping}
+            obsSetsColumnNameMappingReversed={obsSetsColumnNameMappingReversed}
             sampleSetsColumnNameMapping={sampleSetsColumnNameMapping}
+            sampleSetsColumnNameMappingReversed={sampleSetsColumnNameMappingReversed}
             sampleSetSelection={sampleSetSelection}
             obsSetSelection={obsSetSelection}
             obsSetColor={obsSetColor}

package/src/index.js

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

package/src/utils.js

@@ -1,9 +1,9 @@
+/* eslint-disable camelcase */
 import { useMemo } from 'react';
 import { isEqual } from 'lodash-es';
 import { colorArrayToString } from '@vitessce/sets-utils';
 import { getDefaultColor } from '@vitessce/utils';
 
-
 function createOrdinalScale(domainArr, rangeArr) {
   return (queryVal) => {
     const i = domainArr.findIndex(domainVal => isEqual(domainVal, queryVal));
@@ -45,3 +45,84 @@ export function useRawSetPaths(columnNameMapping, setPaths) {
     return newSetPath;
   }), [columnNameMapping, setPaths]);
 }
+
+// Data transformation hook function that is used both here
+// and in the FeatureStatsTable view.
+export function useFilteredVolcanoData(props) {
+  const {
+    data,
+    obsSetsColumnNameMappingReversed,
+    sampleSetsColumnNameMappingReversed,
+    featurePointFoldChangeThreshold,
+    featurePointSignificanceThreshold,
+    sampleSetSelection,
+  } = props;
+
+
+  const computedData = useMemo(() => data.map((d) => {
+    const { metadata } = d;
+
+    const coordinationValues = metadata.coordination_values;
+
+    const rawObsSetPath = coordinationValues.obsSetFilter
+      ? coordinationValues.obsSetFilter[0]
+      : coordinationValues.obsSetSelection[0];
+    const obsSetPath = [...rawObsSetPath];
+    obsSetPath[0] = obsSetsColumnNameMappingReversed[rawObsSetPath[0]];
+
+    // Swap the foldchange direction if backwards with
+    // respect to the current sampleSetSelection pair.
+    // TODO: move this swapping into the computedData useMemo?
+    let shouldSwapFoldChangeDirection = false;
+    if (
+      coordinationValues.sampleSetFilter
+      && coordinationValues.sampleSetFilter.length === 2
+    ) {
+      const rawSampleSetPathA = coordinationValues.sampleSetFilter[0];
+      const sampleSetPathA = [...rawSampleSetPathA];
+      sampleSetPathA[0] = sampleSetsColumnNameMappingReversed[rawSampleSetPathA[0]];
+
+      const rawSampleSetPathB = coordinationValues.sampleSetFilter[1];
+      const sampleSetPathB = [...rawSampleSetPathB];
+      sampleSetPathB[0] = sampleSetsColumnNameMappingReversed[rawSampleSetPathB[0]];
+
+      if (
+        isEqual(sampleSetPathA, sampleSetSelection[1])
+        && isEqual(sampleSetPathB, sampleSetSelection[0])
+      ) {
+        shouldSwapFoldChangeDirection = true;
+      }
+    }
+
+    return ({
+      ...d,
+      df: {
+        ...d.df,
+        minusLog10p: d.df.featureSignificance.map(v => -Math.log10(v)),
+        logFoldChange: d.df.featureFoldChange.map(v => (
+          Math.log2(v) * (shouldSwapFoldChangeDirection ? -1 : 1)
+        )),
+      },
+    });
+  }), [
+    data, obsSetsColumnNameMappingReversed, sampleSetsColumnNameMappingReversed,
+    sampleSetSelection,
+  ]);
+
+  const filteredData = useMemo(() => computedData.map(obj => ({
+    ...obj,
+    // Instead of an object of one array per column,
+    // this is now an array of one object per row.
+    df: obj.df.featureId.map((featureId, i) => ({
+      featureId,
+      logFoldChange: obj.df.logFoldChange[i],
+      featureSignificance: obj.df.featureSignificance[i],
+      minusLog10p: obj.df.minusLog10p[i],
+    })).filter(d => (
+      (Math.abs(d.logFoldChange) >= (featurePointFoldChangeThreshold ?? 1.0))
+      && (d.featureSignificance <= (featurePointSignificanceThreshold ?? 0.05))
+    )),
+  })), [computedData, featurePointFoldChangeThreshold, featurePointSignificanceThreshold]);
+
+  return [computedData, filteredData];
+}