@vitessce/statistical-plots 3.5.6 → 3.5.8

package/src/TreemapSubscriber.js

@@ -0,0 +1,262 @@
+/* eslint-disable no-unused-vars */
+import React, { useMemo } from 'react';
+import {
+  TitleInfo,
+  useCoordination,
+  useLoaders,
+  useUrls,
+  useReady,
+  useGridItemSize,
+  useObsFeatureMatrixIndices,
+  useObsSetsData,
+  useSampleEdgesData,
+  useSampleSetsData,
+} from '@vitessce/vit-s';
+import { ViewType, COMPONENT_COORDINATION_TYPES, ViewHelpMapping } from '@vitessce/constants-internal';
+import { treeToSelectedSetMap, treeToSetSizesBySetNames, mergeObsSets } from '@vitessce/sets-utils';
+import { pluralize as plur, commaNumber, unnestMap, capitalize } from '@vitessce/utils';
+import { InternMap } from 'internmap';
+import { isEqual } from 'lodash-es';
+import Treemap from './Treemap.js';
+import { useStyles } from './styles.js';
+import TreemapOptions from './TreemapOptions.js';
+
+const DEFAULT_HIERARCHY_LEVELS = ['obsSet', 'sampleSet'];
+
+export function TreemapSubscriber(props) {
+  const {
+    coordinationScopes,
+    removeGridComponent,
+    theme,
+    helpText = ViewHelpMapping.TREEMAP,
+  } = props;
+
+  const classes = useStyles();
+  const loaders = useLoaders();
+
+  // Get "props" from the coordination space.
+  const [{
+    dataset,
+    obsType,
+    featureType,
+    featureValueType,
+    obsFilter,
+    obsHighlight,
+    obsSetSelection,
+    obsSetFilter,
+    obsSelection,
+    obsSelectionMode,
+    obsSetHighlight,
+    obsSetColor,
+    obsColorEncoding,
+    additionalObsSets,
+    sampleType,
+    sampleSetSelection,
+    sampleSetFilter,
+    sampleSetColor,
+    sampleSelection,
+    sampleSelectionMode,
+    sampleFilter,
+    sampleFilterMode,
+    sampleHighlight,
+    hierarchyLevels,
+  }, {
+    setObsFilter,
+    setObsSelection,
+    setObsSetFilter,
+    setObsSetSelection,
+    setObsSelectionMode,
+    setObsFilterMode,
+    setObsHighlight,
+    setObsSetColor,
+    setObsColorEncoding,
+    setAdditionalObsSets,
+    setSampleFilter,
+    setSampleSetFilter,
+    setSampleFilterMode,
+    setSampleSelection,
+    setSampleSetSelection,
+    setSampleSelectionMode,
+    setSampleHighlight,
+    setSampleSetColor,
+    setHierarchyLevels,
+  }] = useCoordination(
+    COMPONENT_COORDINATION_TYPES[ViewType.TREEMAP],
+    coordinationScopes,
+  );
+
+  const [width, height, containerRef] = useGridItemSize();
+
+  // TODO: how to deal with multimodal cases (multiple obsIndex, one per modality)?
+  const [{ obsIndex }, matrixIndicesStatus, matrixIndicesUrls] = useObsFeatureMatrixIndices(
+    loaders, dataset, false,
+    { obsType, featureType, featureValueType },
+  );
+  const [{ obsSets }, obsSetsStatus, obsSetsUrls] = useObsSetsData(
+    loaders, dataset, true, {}, {},
+    { obsType },
+  );
+
+  const [{ sampleIndex, sampleSets }, sampleSetsStatus, sampleSetsUrls] = useSampleSetsData(
+    loaders,
+    dataset,
+    // TODO: support `false`, i.e., configurations in which
+    // there are no sampleSets
+    true,
+    { setSampleSetColor },
+    { sampleSetColor },
+    { sampleType },
+  );
+
+  const [{ sampleEdges }, sampleEdgesStatus, sampleEdgesUrls] = useSampleEdgesData(
+    loaders,
+    dataset,
+    // TODO: support `false`, i.e., configurations in which
+    // there are no sampleEdges
+    true,
+    {},
+    {},
+    { obsType, sampleType },
+  );
+
+  const isReady = useReady([
+    matrixIndicesStatus,
+    obsSetsStatus,
+    sampleSetsStatus,
+    sampleEdgesStatus,
+  ]);
+  const urls = useUrls([
+    matrixIndicesUrls,
+    obsSetsUrls,
+    sampleSetsUrls,
+    sampleEdgesUrls,
+  ]);
+
+  const mergedObsSets = useMemo(
+    () => mergeObsSets(obsSets, additionalObsSets),
+    [obsSets, additionalObsSets],
+  );
+  const mergedSampleSets = useMemo(
+    () => mergeObsSets(sampleSets, null),
+    [sampleSets],
+  );
+
+  const obsCount = obsIndex?.length || 0;
+  const sampleCount = sampleIndex?.length || 0;
+
+  // TODO: use obsFilter / sampleFilter to display
+  // _all_ cells/samples in gray / transparent in background,
+  // and use obsSetSelection/sampleSetSelection to display
+  // the _selected_ samples in color in the foreground.
+  const [obsCounts, sampleCounts] = useMemo(() => {
+    const obsResult = new InternMap([], JSON.stringify);
+    const sampleResult = new InternMap([], JSON.stringify);
+
+    const hasSampleSetSelection = (
+      Array.isArray(sampleSetSelection)
+      && sampleSetSelection.length > 0
+    );
+    const hasCellSetSelection = (
+      Array.isArray(obsSetSelection)
+      && obsSetSelection.length > 0
+    );
+
+    const sampleSetKeys = hasSampleSetSelection ? sampleSetSelection : [null];
+    const cellSetKeys = hasCellSetSelection ? obsSetSelection : [null];
+
+    // First level: cell set
+    cellSetKeys.forEach((cellSetKey) => {
+      obsResult.set(cellSetKey, new InternMap([], JSON.stringify));
+      // Second level: sample set
+      sampleSetKeys.forEach((sampleSetKey) => {
+        obsResult.get(cellSetKey).set(sampleSetKey, 0);
+      });
+    });
+
+    const sampleSetSizes = treeToSetSizesBySetNames(
+      mergedSampleSets, sampleSetSelection, sampleSetSelection, sampleSetColor, theme,
+    );
+
+    sampleSetKeys.forEach((sampleSetKey) => {
+      const sampleSetSize = sampleSetSizes.find(d => isEqual(d.setNamePath, sampleSetKey))?.size;
+      sampleResult.set(sampleSetKey, sampleSetSize || 0);
+    });
+
+    if (mergedObsSets && obsSetSelection) {
+      const sampleIdToSetMap = sampleSets && sampleSetSelection
+        ? treeToSelectedSetMap(sampleSets, sampleSetSelection)
+        : null;
+      const cellIdToSetMap = treeToSelectedSetMap(mergedObsSets, obsSetSelection);
+
+      for (let i = 0; i < obsIndex.length; i += 1) {
+        const obsId = obsIndex[i];
+
+        const cellSet = cellIdToSetMap?.get(obsId);
+        const sampleId = sampleEdges?.get(obsId);
+        const sampleSet = sampleId ? sampleIdToSetMap?.get(sampleId) : null;
+
+        if (hasSampleSetSelection && !sampleSet) {
+          // Skip this sample if it is not in the selected sample set.
+          // eslint-disable-next-line no-continue
+          continue;
+        }
+        const prevObsCount = obsResult.get(cellSet)?.get(sampleSet);
+        obsResult.get(cellSet)?.set(sampleSet, prevObsCount + 1);
+      }
+    }
+
+    return [
+      unnestMap(obsResult, ['obsSetPath', 'sampleSetPath', 'value']),
+      unnestMap(sampleResult, ['sampleSetPath', 'value']),
+    ];
+  }, [obsIndex, sampleEdges, sampleSets, obsSetColor,
+    sampleSetColor, mergedObsSets, obsSetSelection, mergedSampleSets,
+    sampleSetSelection,
+    // TODO: consider filtering-related coordination values
+  ]);
+
+  return (
+    <TitleInfo
+      title={`Treemap of ${capitalize(plur(obsType, 2))}`}
+      info={`${commaNumber(obsCount)} ${plur(obsType, obsCount)} from ${commaNumber(sampleCount)} ${plur(sampleType, sampleCount)}`}
+      removeGridComponent={removeGridComponent}
+      urls={urls}
+      theme={theme}
+      isReady={isReady}
+      helpText={helpText}
+      options={(
+        <TreemapOptions
+          obsType={obsType}
+          sampleType={sampleType}
+          obsColorEncoding={obsColorEncoding}
+          setObsColorEncoding={setObsColorEncoding}
+          hierarchyLevels={hierarchyLevels || DEFAULT_HIERARCHY_LEVELS}
+          setHierarchyLevels={setHierarchyLevels}
+          // TODO:
+          // - Add option to only include cells in treemap which express selected gene
+          //   above some threshold (kind of like a dot plot)
+          // - Add option to _only_ consider sampleSets or obsSets
+          //   (not both sampleSets and obsSets)
+        />
+      )}
+    >
+      <div ref={containerRef} className={classes.vegaContainer}>
+        <Treemap
+          obsCounts={obsCounts}
+          sampleCounts={sampleCounts}
+          obsColorEncoding={obsColorEncoding}
+          hierarchyLevels={hierarchyLevels || DEFAULT_HIERARCHY_LEVELS}
+          theme={theme}
+          width={width}
+          height={height}
+          obsType={obsType}
+          sampleType={sampleType}
+          obsSetColor={obsSetColor}
+          sampleSetColor={sampleSetColor}
+          obsSetSelection={obsSetSelection}
+          sampleSetSelection={sampleSetSelection}
+        />
+      </div>
+    </TitleInfo>
+  );
+}

package/src/VolcanoPlot.js

@@ -0,0 +1,313 @@
+/* eslint-disable indent */
+/* eslint-disable camelcase */
+import React, { useMemo, useEffect, useRef } from 'react';
+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';
+
+export default function VolcanoPlot(props) {
+  const {
+    theme,
+    width,
+    height,
+    obsType,
+    featureType,
+    obsSetsColumnNameMapping,
+    sampleSetsColumnNameMapping,
+    sampleSetSelection,
+    obsSetSelection,
+    obsSetColor,
+    sampleSetColor,
+    data,
+    marginTop = 5,
+    marginRight = 5,
+    marginLeft = 50,
+    marginBottom = 50,
+    onFeatureClick,
+    featurePointSignificanceThreshold,
+    featurePointFoldChangeThreshold,
+    featureLabelSignificanceThreshold,
+    featureLabelFoldChangeThreshold,
+  } = 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 [xExtent, yExtent] = useMemo(() => {
+    if (!computedData) {
+      return [null, null];
+    }
+    let xExtentResult = d3_extent(
+      computedData.flatMap(d => d3_extent(d.df.logFoldChange)),
+    );
+    const xAbsMax = Math.max(Math.abs(xExtentResult[0]), Math.abs(xExtentResult[1]));
+    xExtentResult = [-xAbsMax, xAbsMax];
+
+    const yExtentResult = d3_extent(
+      computedData.flatMap(d => d3_extent(d.df.minusLog10p.filter(v => Number.isFinite(v)))),
+    );
+    return [xExtentResult, yExtentResult];
+  }, [computedData]);
+
+  const [obsSetColorScale, sampleSetColorScale] = useMemo(() => [
+    getColorScale(obsSetSelection, obsSetColor, theme),
+    getColorScale(sampleSetSelection, sampleSetColor, theme),
+  ], [obsSetSelection, sampleSetSelection, sampleSetColor, obsSetColor, theme]);
+
+  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 (!computedData || !xExtent || !yExtent) {
+      return;
+    }
+
+    // Render scatterplot
+    const innerWidth = width - marginLeft;
+    const innerHeight = height - marginBottom;
+
+    const xScale = scaleLinear()
+      .range([marginLeft, width - marginRight])
+      .domain(xExtent);
+
+    // For the y domain, use the yMin prop
+    // to support a use case such as 'Aspect Ratio',
+    // where the domain minimum should be 1 rather than 0.
+    const yScale = scaleLinear()
+      .domain(yExtent)
+      .range([innerHeight, marginTop])
+      .clamp(true);
+
+    // Add the axes.
+    svg.append('g')
+      .attr('transform', `translate(0,${height - marginBottom})`)
+      .call(axisBottom(xScale));
+
+    svg.append('g')
+      .attr('transform', `translate(${marginLeft},0)`)
+      .call(axisLeft(yScale));
+
+    // Axis titles
+    const titleG = svg.append('g');
+    const fgColor = 'black'; // TODO: use theme to determine this
+
+    // Y-axis title
+    titleG
+      .append('text')
+      .attr('text-anchor', 'middle')
+      .attr('x', -innerHeight / 2)
+      .attr('y', 15)
+      .attr('transform', 'rotate(-90)')
+      .text('-log10 p-value')
+      .style('font-size', '12px')
+      .style('fill', fgColor);
+
+    // X-axis title
+    titleG
+      .append('text')
+      .attr('text-anchor', 'middle')
+      .attr('x', marginLeft + innerWidth / 2)
+      .attr('y', height - 10)
+      .text('log2 fold-change')
+      .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';
+    const ruleDash = '2,2';
+    titleG.append('line')
+      .attr('x1', xScale(featurePointFoldChangeThreshold))
+      .attr('x2', xScale(featurePointFoldChangeThreshold))
+      .attr('y1', yScale.range()[0])
+      .attr('y2', yScale.range()[1])
+      .style('stroke', ruleColor)
+      .style('stroke-dasharray', ruleDash);
+    titleG.append('line')
+      .attr('x1', xScale(-featurePointFoldChangeThreshold))
+      .attr('x2', xScale(-featurePointFoldChangeThreshold))
+      .attr('y1', yScale.range()[0])
+      .attr('y2', yScale.range()[1])
+      .style('stroke', ruleColor)
+      .style('stroke-dasharray', ruleDash);
+    // Horizontal lines
+    titleG.append('line')
+      .attr('x1', xScale.range()[0])
+      .attr('x2', xScale.range()[1])
+      .attr('y1', yScale(-Math.log10(featurePointSignificanceThreshold)))
+      .attr('y2', yScale(-Math.log10(featurePointSignificanceThreshold)))
+      .style('stroke', ruleColor)
+      .style('stroke-dasharray', ruleDash);
+
+
+    // Upregulated/downregulated and sampleSet directional indicators.
+    const lhsText = sampleSetSelection && sampleSetSelection.length === 2
+      ? sampleSetSelection[0].at(-1)
+      : '__rest__';
+
+    // eslint-disable-next-line no-nested-ternary
+    const rhsText = sampleSetSelection && sampleSetSelection.length === 2
+      ? sampleSetSelection[1].at(-1)
+      : (obsSetSelection && obsSetSelection.length === 1
+        ? obsSetSelection?.[0]?.at(-1)
+        : `${capitalize(obsType)} Set`
+      );
+
+
+    titleG
+      .append('text')
+      .attr('text-anchor', 'start')
+      .attr('x', marginLeft)
+      .attr('y', height - 10)
+      .text(`\u2190 ${lhsText}`)
+      .style('font-size', '12px')
+      .style('fill', fgColor);
+
+    titleG
+      .append('text')
+      .attr('text-anchor', 'end')
+      .attr('x', marginLeft + innerWidth)
+      .attr('y', height - 10)
+      .text(`${rhsText} \u2192`)
+      .style('font-size', '12px')
+      .style('fill', fgColor);
+
+
+    const g = svg.append('g');
+
+    // Append a circle for each data point.
+    computedData.forEach((comparisonObject) => {
+      const obsSetG = g.append('g');
+
+      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]];
+
+      // 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')
+        .selectAll('circle')
+        .data(filteredDf)
+        .join('circle')
+          .attr('cx', d => xScale(d.logFoldChange))
+          .attr('cy', d => yScale(d.minusLog10p))
+          .attr('r', 3)
+          .attr('opacity', 0.5)
+          .attr('fill', color)
+          .on('click', (event, d) => {
+            onFeatureClick(d.featureId);
+          });
+
+      const textElements = obsSetG.append('g')
+        .selectAll('text')
+        .data(filteredDf)
+        .join('text')
+          .text(d => d.featureId)
+          .attr('text-anchor', d => (d.logFoldChange < 0 ? 'end' : 'start'))
+          .attr('x', d => xScale(d.logFoldChange))
+          .attr('y', d => yScale(d.minusLog10p))
+          .style('display', d => ((
+            Math.abs(d.logFoldChange) < (featureLabelFoldChangeThreshold ?? 5.0)
+            || (d.featureSignificance >= (featureLabelSignificanceThreshold ?? 0.01))
+          ) ? 'none' : undefined))
+          .attr('fill', color)
+          .on('click', (event, d) => {
+            onFeatureClick(d.featureId);
+          });
+
+      textElements.append('title')
+        .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,
+    xExtent, yExtent, obsType,
+    marginLeft, marginBottom, marginTop, marginRight,
+    obsSetColorScale, sampleSetColorScale, onFeatureClick,
+    featurePointSignificanceThreshold, featurePointFoldChangeThreshold,
+    featureLabelSignificanceThreshold, featureLabelFoldChangeThreshold,
+  ]);
+
+  return (
+    <svg
+      ref={svgRef}
+      style={{
+        top: 0,
+        left: 0,
+        width: `${width}px`,
+        height: `${height}px`,
+        position: 'relative',
+      }}
+    />
+  );
+}

package/src/VolcanoPlotOptions.js

@@ -0,0 +1,136 @@
+import React from 'react';
+import { useId } from 'react-aria';
+import { TableCell, TableRow, Slider } from '@material-ui/core';
+import {
+  usePlotOptionsStyles, OptionsContainer,
+} from '@vitessce/vit-s';
+
+export default function VolcanoPlotOptions(props) {
+  const {
+    children,
+
+    featurePointSignificanceThreshold,
+    featurePointFoldChangeThreshold,
+    featureLabelSignificanceThreshold,
+    featureLabelFoldChangeThreshold,
+
+    setFeaturePointSignificanceThreshold,
+    setFeaturePointFoldChangeThreshold,
+    setFeatureLabelSignificanceThreshold,
+    setFeatureLabelFoldChangeThreshold,
+  } = props;
+
+  const volcanoOptionsId = useId();
+  const classes = usePlotOptionsStyles();
+
+  function handlePointSignificanceChange(event, value) {
+    setFeaturePointSignificanceThreshold(10 ** -value);
+  }
+
+  function handlePointFoldChangeChange(event, value) {
+    setFeaturePointFoldChangeThreshold(value);
+  }
+
+  function handleLabelSignificanceChange(event, value) {
+    setFeatureLabelSignificanceThreshold(10 ** -value);
+  }
+
+  function handleLabelFoldChangeChange(event, value) {
+    setFeatureLabelFoldChangeThreshold(value);
+  }
+
+
+  return (
+    <OptionsContainer>
+      {children}
+      <TableRow>
+        <TableCell className={classes.labelCell} variant="head" scope="row">
+          <label
+            htmlFor={`volcano-label-significance-${volcanoOptionsId}`}
+          >
+            Label Significance Threshold
+          </label>
+        </TableCell>
+        <TableCell className={classes.inputCell} variant="body">
+          <Slider
+            classes={{ root: classes.slider, valueLabel: classes.sliderValueLabel }}
+            value={-Math.log10(featureLabelSignificanceThreshold)}
+            onChange={handleLabelSignificanceChange}
+            aria-label="Volcano plot label significance threshold slider"
+            id={`volcano-label-significance-${volcanoOptionsId}`}
+            valueLabelDisplay="auto"
+            step={1}
+            min={0}
+            max={100}
+          />
+        </TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell className={classes.labelCell} variant="head" scope="row">
+          <label
+            htmlFor={`volcano-label-fc-${volcanoOptionsId}`}
+          >
+            Label Fold-Change Threshold
+          </label>
+        </TableCell>
+        <TableCell className={classes.inputCell} variant="body">
+          <Slider
+            classes={{ root: classes.slider, valueLabel: classes.sliderValueLabel }}
+            value={featureLabelFoldChangeThreshold}
+            onChange={handleLabelFoldChangeChange}
+            aria-label="Volcano plot label fold-change threshold slider"
+            id={`volcano-label-fc-${volcanoOptionsId}`}
+            valueLabelDisplay="auto"
+            step={0.5}
+            min={0}
+            max={50}
+          />
+        </TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell className={classes.labelCell} variant="head" scope="row">
+          <label
+            htmlFor={`volcano-point-significance-${volcanoOptionsId}`}
+          >
+            Point Significance Threshold
+          </label>
+        </TableCell>
+        <TableCell className={classes.inputCell} variant="body">
+          <Slider
+            classes={{ root: classes.slider, valueLabel: classes.sliderValueLabel }}
+            value={-Math.log10(featurePointSignificanceThreshold)}
+            onChange={handlePointSignificanceChange}
+            aria-label="Volcano plot point significance threshold slider"
+            id={`volcano-point-significance-${volcanoOptionsId}`}
+            valueLabelDisplay="auto"
+            step={1}
+            min={0}
+            max={100}
+          />
+        </TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell className={classes.labelCell} variant="head" scope="row">
+          <label
+            htmlFor={`volcano-point-fc-${volcanoOptionsId}`}
+          >
+            Point Fold-Change Threshold
+          </label>
+        </TableCell>
+        <TableCell className={classes.inputCell} variant="body">
+          <Slider
+            classes={{ root: classes.slider, valueLabel: classes.sliderValueLabel }}
+            value={featurePointFoldChangeThreshold}
+            onChange={handlePointFoldChangeChange}
+            aria-label="Volcano plot point fold-change threshold slider"
+            id={`volcano-point-fc-${volcanoOptionsId}`}
+            valueLabelDisplay="auto"
+            step={0.5}
+            min={0}
+            max={50}
+          />
+        </TableCell>
+      </TableRow>
+    </OptionsContainer>
+  );
+}