@vitessce/statistical-plots 3.5.7 → 3.5.8

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>
+  );
+}

package/src/VolcanoPlotSubscriber.js

@@ -0,0 +1,162 @@
+/* eslint-disable no-unused-vars */
+import React, { useMemo, useCallback } from 'react';
+import {
+  TitleInfo,
+  useCoordination,
+  useLoaders,
+  useReady,
+  useGridItemSize,
+  useFeatureStatsData,
+  useMatchingLoader,
+  useColumnNameMapping,
+} from '@vitessce/vit-s';
+import {
+  ViewType,
+  COMPONENT_COORDINATION_TYPES,
+  ViewHelpMapping,
+  DataType,
+} from '@vitessce/constants-internal';
+import VolcanoPlot from './VolcanoPlot.js';
+import { useStyles } from './styles.js';
+import VolcanoPlotOptions from './VolcanoPlotOptions.js';
+import { useRawSetPaths } from './utils.js';
+
+export function VolcanoPlotSubscriber(props) {
+  const {
+    coordinationScopes,
+    removeGridComponent,
+    theme,
+    helpText = ViewHelpMapping.VOLCANO_PLOT,
+  } = props;
+
+  const classes = useStyles();
+  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,
+    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.VOLCANO_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 sampleSetsColumnNameMapping = useColumnNameMapping(sampleSetsLoader);
+
+  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,
+  ]);
+
+  const onFeatureClick = useCallback((featureId) => {
+    setFeatureSelection([featureId]);
+  }, [setFeatureSelection]);
+
+  return (
+    <TitleInfo
+      title="Volcano Plot"
+      removeGridComponent={removeGridComponent}
+      theme={theme}
+      isReady={isReady}
+      helpText={helpText}
+      options={(
+        <VolcanoPlotOptions
+          obsType={obsType}
+          featureType={featureType}
+
+          featurePointSignificanceThreshold={featurePointSignificanceThreshold}
+          featurePointFoldChangeThreshold={featurePointFoldChangeThreshold}
+          featureLabelSignificanceThreshold={featureLabelSignificanceThreshold}
+          featureLabelFoldChangeThreshold={featureLabelFoldChangeThreshold}
+
+          setFeaturePointSignificanceThreshold={setFeaturePointSignificanceThreshold}
+          setFeaturePointFoldChangeThreshold={setFeaturePointFoldChangeThreshold}
+          setFeatureLabelSignificanceThreshold={setFeatureLabelSignificanceThreshold}
+          setFeatureLabelFoldChangeThreshold={setFeatureLabelFoldChangeThreshold}
+        />
+      )}
+    >
+      <div ref={containerRef} className={classes.vegaContainer}>
+        {featureStats ? (
+          <VolcanoPlot
+            theme={theme}
+            width={width}
+            height={height}
+            obsType={obsType}
+            featureType={featureType}
+            obsSetsColumnNameMapping={obsSetsColumnNameMapping}
+            sampleSetsColumnNameMapping={sampleSetsColumnNameMapping}
+            sampleSetSelection={sampleSetSelection}
+            obsSetSelection={obsSetSelection}
+            obsSetColor={obsSetColor}
+            sampleSetColor={sampleSetColor}
+            data={featureStats}
+            onFeatureClick={onFeatureClick}
+
+            featurePointSignificanceThreshold={featurePointSignificanceThreshold}
+            featurePointFoldChangeThreshold={featurePointFoldChangeThreshold}
+            featureLabelSignificanceThreshold={featureLabelSignificanceThreshold}
+            featureLabelFoldChangeThreshold={featureLabelFoldChangeThreshold}
+          />
+        ) : (
+          <span>Select at least one {obsType} set.</span>
+        )}
+      </div>
+    </TitleInfo>
+  );
+}

package/src/index.js

@@ -4,6 +4,9 @@ export { ExpressionHistogramSubscriber } from './ExpressionHistogramSubscriber.j
 export { DotPlotSubscriber } from './DotPlotSubscriber.js';
 export { FeatureBarPlotSubscriber } from './FeatureBarPlotSubscriber.js';
 export { TreemapSubscriber } from './TreemapSubscriber.js';
+export { VolcanoPlotSubscriber } from './VolcanoPlotSubscriber.js';
+export { CellSetCompositionBarPlotSubscriber } from './CellSetCompositionBarPlotSubscriber.js';
+export { FeatureSetEnrichmentBarPlotSubscriber } from './FeatureSetEnrichmentBarPlotSubscriber.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

@@ -0,0 +1,47 @@
+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));
+    return rangeArr[i];
+  };
+}
+
+// Create a d3-scale ordinal scale mapping set paths to color strings.
+export function getColorScale(setSelectionArr, setColorArr, theme) {
+  /*
+  // The equality seems incorrect with d3.scaleOrdinal
+  return scaleOrdinal()
+    .domain(setSelectionArr || [])
+    .range(
+    */
+  const domainArr = setSelectionArr || [];
+  const rangeArr = setSelectionArr
+    ?.map(setNamePath => (
+      setColorArr?.find(d => isEqual(d.path, setNamePath))?.color
+          || getDefaultColor(theme)
+    ))
+    ?.map(colorArrayToString) || [];
+  return createOrdinalScale(domainArr, rangeArr);
+}
+
+
+/**
+ * Transform set paths which use group names to those which use column names.
+ * @param {Record<string, string>} columnNameMapping Return value of useColumnNameMapping.
+ * @param {string[][]} setPaths Array of set paths, such as obsSetSelection.
+ * @returns {string[][]} Transformed set paths.
+ */
+export function useRawSetPaths(columnNameMapping, setPaths) {
+  return useMemo(() => setPaths?.map((setPath) => {
+    const newSetPath = [...setPath];
+    if (newSetPath?.[0] && columnNameMapping[newSetPath[0]]) {
+      newSetPath[0] = columnNameMapping[newSetPath[0]];
+    }
+    return newSetPath;
+  }), [columnNameMapping, setPaths]);
+}