@vitessce/statistical-plots 3.5.9 → 3.5.10

package/dist-tsc/VolcanoPlot.js

@@ -6,21 +6,20 @@ 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, getDefaultForegroundColor } from '@vitessce/utils';
 import { colorArrayToString } from '@vitessce/sets-utils';
-import { getColorScale } from './utils.js';
+import { getColorScale, useFilteredVolcanoData } 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 { theme, width, height, obsType, featureType, obsSetsColumnNameMappingReversed, sampleSetsColumnNameMappingReversed, 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 [computedData, filteredData] = useFilteredVolcanoData({
+        data,
+        obsSetsColumnNameMappingReversed,
+        sampleSetsColumnNameMappingReversed,
+        featurePointFoldChangeThreshold,
+        featurePointSignificanceThreshold,
+        sampleSetSelection,
+    });
     const [xExtent, yExtent] = useMemo(() => {
         if (!computedData) {
             return [null, null];
@@ -44,7 +43,7 @@ export default function VolcanoPlot(props) {
             .attr('height', height)
             .attr('viewBox', [0, 0, width, height])
             .attr('style', 'font: 10px sans-serif');
-        if (!computedData || !xExtent || !yExtent) {
+        if (!filteredData || !xExtent || !yExtent) {
             return;
         }
         // Render scatterplot
@@ -89,13 +88,6 @@ export default function VolcanoPlot(props) {
             .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';
@@ -150,39 +142,15 @@ export default function VolcanoPlot(props) {
             .style('fill', fgColor);
         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
                 ? 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')
@@ -214,12 +182,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 (_jsx("svg", { ref: svgRef, style: {
             top: 0,

package/dist-tsc/VolcanoPlotSubscriber.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VolcanoPlotSubscriber.d.ts","sourceRoot":"","sources":["../src/VolcanoPlotSubscriber.js"],"names":[],"mappings":"AAuBA,+DA0IC"}
+{"version":3,"file":"VolcanoPlotSubscriber.d.ts","sourceRoot":"","sources":["../src/VolcanoPlotSubscriber.js"],"names":[],"mappings":"AAuBA,+DA+IC"}

package/dist-tsc/VolcanoPlotSubscriber.js

@@ -8,7 +8,7 @@ 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 { title = 'Volcano Plot', coordinationScopes, removeGridComponent, theme, helpText = ViewHelpMapping.VOLCANO_PLOT, } = props;
     const classes = useStyles();
     const loaders = useLoaders();
     // Get "props" from the coordination space.
@@ -17,7 +17,9 @@ export function VolcanoPlotSubscriber(props) {
     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 }, 
@@ -29,5 +31,5 @@ export function VolcanoPlotSubscriber(props) {
     const onFeatureClick = useCallback((featureId) => {
         setFeatureSelection([featureId]);
     }, [setFeatureSelection]);
-    return (_jsx(TitleInfo, { title: "Volcano Plot", removeGridComponent: removeGridComponent, theme: theme, isReady: isReady, helpText: helpText, options: (_jsx(VolcanoPlotOptions, { obsType: obsType, featureType: featureType, featurePointSignificanceThreshold: featurePointSignificanceThreshold, featurePointFoldChangeThreshold: featurePointFoldChangeThreshold, featureLabelSignificanceThreshold: featureLabelSignificanceThreshold, featureLabelFoldChangeThreshold: featureLabelFoldChangeThreshold, setFeaturePointSignificanceThreshold: setFeaturePointSignificanceThreshold, setFeaturePointFoldChangeThreshold: setFeaturePointFoldChangeThreshold, setFeatureLabelSignificanceThreshold: setFeatureLabelSignificanceThreshold, setFeatureLabelFoldChangeThreshold: setFeatureLabelFoldChangeThreshold })), children: _jsx("div", { ref: containerRef, className: classes.vegaContainer, children: featureStats ? (_jsx(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 })) : (_jsxs("span", { children: ["Select at least one ", obsType, " set."] })) }) }));
+    return (_jsx(TitleInfo, { title: title, removeGridComponent: removeGridComponent, theme: theme, isReady: isReady, helpText: helpText, options: (_jsx(VolcanoPlotOptions, { obsType: obsType, featureType: featureType, featurePointSignificanceThreshold: featurePointSignificanceThreshold, featurePointFoldChangeThreshold: featurePointFoldChangeThreshold, featureLabelSignificanceThreshold: featureLabelSignificanceThreshold, featureLabelFoldChangeThreshold: featureLabelFoldChangeThreshold, setFeaturePointSignificanceThreshold: setFeaturePointSignificanceThreshold, setFeaturePointFoldChangeThreshold: setFeaturePointFoldChangeThreshold, setFeatureLabelSignificanceThreshold: setFeatureLabelSignificanceThreshold, setFeatureLabelFoldChangeThreshold: setFeatureLabelFoldChangeThreshold })), children: _jsx("div", { ref: containerRef, className: classes.vegaContainer, children: featureStats ? (_jsx(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 })) : (_jsxs("span", { children: ["Select at least one ", obsType, " set."] })) }) }));
 }

package/dist-tsc/index.d.ts

@@ -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/dist-tsc/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/dist-tsc/utils.d.ts

@@ -6,4 +6,5 @@ export function getColorScale(setSelectionArr: any, setColorArr: any, theme: any
  * @returns {string[][]} Transformed set paths.
  */
 export function useRawSetPaths(columnNameMapping: Record<string, string>, setPaths: string[][]): string[][];
+export function useFilteredVolcanoData(props: any): any[];
 //# sourceMappingURL=utils.d.ts.map

package/dist-tsc/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.js"],"names":[],"mappings":"AAcA,0GAeC;AAGD;;;;;GAKG;AACH,kDAJW,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,YACtB,MAAM,EAAE,EAAE,GACR,MAAM,EAAE,EAAE,CAUtB"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.js"],"names":[],"mappings":"AAcA,0GAeC;AAGD;;;;;GAKG;AACH,kDAJW,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,YACtB,MAAM,EAAE,EAAE,GACR,MAAM,EAAE,EAAE,CAUtB;AAID,0DA6EC"}

package/dist-tsc/utils.js

@@ -1,3 +1,4 @@
+/* eslint-disable camelcase */
 import { useMemo } from 'react';
 import { isEqual } from 'lodash-es';
 import { colorArrayToString } from '@vitessce/sets-utils';
@@ -38,3 +39,58 @@ 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];
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitessce/statistical-plots",
-  "version": "3.5.9",
+  "version": "3.5.10",
   "author": "HIDIVE Lab at HMS",
   "homepage": "http://vitessce.io",
   "repository": {
@@ -17,6 +17,7 @@
   ],
   "dependencies": {
     "@material-ui/core": "~4.12.3",
+    "@mui/x-data-grid": "^4.0.2",
     "d3-array": "^2.4.0",
     "d3-scale": "^4.0.0",
     "d3-shape": "^3.2.0",
@@ -29,12 +30,12 @@
     "react-aria": "^3.28.0",
     "internmap": "^2.0.3",
     "uuid": "^9.0.0",
-    "@vitessce/constants-internal": "3.5.9",
-    "@vitessce/sets-utils": "3.5.9",
-    "@vitessce/utils": "3.5.9",
-    "@vitessce/vega": "3.5.9",
-    "@vitessce/vit-s": "3.5.9",
-    "@vitessce/gl": "3.5.9"
+    "@vitessce/constants-internal": "3.5.10",
+    "@vitessce/sets-utils": "3.5.10",
+    "@vitessce/utils": "3.5.10",
+    "@vitessce/vega": "3.5.10",
+    "@vitessce/vit-s": "3.5.10",
+    "@vitessce/gl": "3.5.10"
   },
   "devDependencies": {
     "react": "^18.0.0",

package/src/CellSetCompositionBarPlot.js

@@ -95,13 +95,13 @@ export default function CellSetCompositionBarPlot(props) {
   ]);
 
   // Get an array of keys for sorting purposes.
-  const keys = computedData.map(d => d.keyName);
+  const keys = computedData?.map(d => d.keyName);
 
   const colorScale = {
     // Manually set the color scale so that Vega-Lite does
     // not choose the colors automatically.
-    domain: computedData.map(d => d.key),
-    range: computedData.map(d => d.color),
+    domain: computedData?.map(d => d.key),
+    range: computedData?.map(d => d.color),
   };
   const captializedObsType = capitalize(obsType);
 

package/src/CellSetCompositionBarPlotSubscriber.js

@@ -143,7 +143,7 @@ export function CellSetCompositionBarPlotSubscriber(props) {
             onBarSelect={onBarSelect}
           />
         ) : (
-          <span>Select at least one {obsType} set.</span>
+          <span>Select at least one {obsType} set and a pair of {sampleType} sets.</span>
         )}
       </div>
     </TitleInfo>

package/src/CellSetExpressionPlot.js

@@ -8,6 +8,7 @@ import { area as d3_area, curveBasis } from 'd3-shape';
 import { select } from 'd3-selection';
 import { colorArrayToString } from '@vitessce/sets-utils';
 import { capitalize } from '@vitessce/utils';
+import { getColorScale } from './utils.js';
 
 const scaleBand = vega_scale('band');
 
@@ -35,9 +36,11 @@ const scaleBand = vega_scale('band');
 export default function CellSetExpressionPlot(props) {
   const {
     yMin: yMinProp,
+    xAxisTitle = null,
     yUnits,
     jitter,
-    cellSetSelection,
+    obsSetSelection,
+    obsSetColor,
     sampleSetSelection,
     sampleSetColor,
     colors,
@@ -57,18 +60,22 @@ export default function CellSetExpressionPlot(props) {
 
   const svgRef = useRef();
 
+  const obsSetColorScale = useMemo(() => getColorScale(
+    obsSetSelection, obsSetColor, theme,
+  ), [obsSetSelection, obsSetColor, theme]);
+
   // Get the max characters in an axis label for autsizing the bottom margin.
   const maxCharactersForLabel = useMemo(() => {
-    if (!cellSetSelection) {
+    if (!obsSetSelection) {
       return 0;
     }
-    const cellSetNames = cellSetSelection.map(d => d.at(-1));
+    const cellSetNames = obsSetSelection.map(d => d.at(-1));
     return cellSetNames.reduce((acc, name) => {
       // eslint-disable-next-line no-param-reassign
       acc = acc === undefined || name.length > acc ? name.length : acc;
       return acc;
     }, 0);
-  }, [cellSetSelection]);
+  }, [obsSetSelection]);
 
   const isStratified = (Array.isArray(sampleSetSelection) && sampleSetSelection.length === 2);
 
@@ -81,7 +88,7 @@ export default function CellSetExpressionPlot(props) {
     const unitSuffix = yUnits ? ` (${yUnits})` : '';
     const yTitle = `${transformPrefix}${capitalize(featureValueType)}${unitSuffix}`;
 
-    const xTitle = `${capitalize(obsType)} Set`;
+    const xTitle = xAxisTitle ?? `${capitalize(obsType)} Set`;
 
     // Use a square-root term because the angle of the labels is 45 degrees (see below)
     // so the perpendicular distance to the bottom of the labels is proportional to the
@@ -146,7 +153,7 @@ export default function CellSetExpressionPlot(props) {
 
     const xGroup = scaleBand()
       .range([marginLeft, width - marginRight])
-      .domain(cellSetSelection)
+      .domain(obsSetSelection)
       .padding(0.1);
 
 
@@ -314,11 +321,12 @@ export default function CellSetExpressionPlot(props) {
         .style('font-size', '11px');
 
     // X-axis ticks
-    g
+    const xTickG = g
       .append('g')
         .attr('transform', `translate(0,${innerHeight})`)
-        .style('font-size', '14px')
-      .call(axisBottom(xGroup).tickFormat(d => d.at(-1)))
+        .style('font-size', '14px');
+
+    xTickG.call(axisBottom(xGroup).tickFormat(d => d.at(-1)))
       .selectAll('text')
         .style('font-size', '11px')
         .attr('dx', '-6px')
@@ -326,6 +334,20 @@ export default function CellSetExpressionPlot(props) {
         .attr('transform', 'rotate(-45)')
         .style('text-anchor', 'end');
 
+    if (isStratified) {
+      // Associate each X tick with a cell type color,
+      // since in the stratified case the violins are colored
+      // by sample set.
+      const tickWidth = xGroup.bandwidth();
+      xTickG.selectAll('.tick')
+        .append('rect')
+          .attr('x', -tickWidth / 2)
+          // .attr("y", -innerHeight)
+          .attr('width', tickWidth)
+          .attr('height', 4)
+          .style('fill', d => obsSetColorScale(d));
+    }
+
     // Y-axis title
     g
       .append('text')
@@ -394,7 +416,8 @@ export default function CellSetExpressionPlot(props) {
   }, [width, height, data, marginLeft, marginBottom, colors,
     jitter, theme, yMinProp, marginTop, marginRight, featureType,
     featureValueType, featureValueTransformName, yUnits, obsType,
-    maxCharactersForLabel, sampleSetSelection,
+    maxCharactersForLabel, sampleSetSelection, isStratified,
+    obsSetColorScale,
   ]);
 
   return (

package/src/CellSetExpressionPlotSubscriber.js

@@ -114,6 +114,8 @@ export function CellSetExpressionPlotSubscriber(props) {
     downloadButtonVisible,
     removeGridComponent,
     theme,
+    title,
+    xAxisTitle,
     jitter = false,
     yMin = null,
     yUnits = null,
@@ -222,11 +224,14 @@ export function CellSetExpressionPlotSubscriber(props) {
   const selectedTransformName = transformOptions.find(
     o => o.value === featureValueTransform,
   )?.name;
-
+    // Use empty string when firstGeneSelected is null
+  const titleSuffix = firstGeneSelected ? ` (${firstGeneSelected})` : '';
 
   return (
     <TitleInfo
-      title={`Expression by ${capitalize(obsType)} Set${(firstGeneSelected ? ` (${firstGeneSelected})` : '')}`}
+      title={title ? `${title}${titleSuffix}`
+        : `Expression by ${capitalize(obsType)} Set${titleSuffix}`
+      }
       closeButtonVisible={closeButtonVisible}
       downloadButtonVisible={downloadButtonVisible}
       removeGridComponent={removeGridComponent}
@@ -250,7 +255,8 @@ export function CellSetExpressionPlotSubscriber(props) {
             yMin={yMin}
             yUnits={yUnits}
             jitter={jitter}
-            cellSetSelection={cellSetSelection}
+            obsSetSelection={cellSetSelection}
+            obsSetColor={cellSetColor}
             sampleSetSelection={sampleSetSelection}
             sampleSetColor={sampleSetColor}
             colors={setArr}
@@ -263,6 +269,7 @@ export function CellSetExpressionPlotSubscriber(props) {
             featureType={featureType}
             featureValueType={featureValueType}
             featureValueTransformName={selectedTransformName}
+            xAxisTitle={xAxisTitle}
           />
         ) : (
           <span>Select a {featureType}.</span>

package/src/DotPlot.js

@@ -1,7 +1,9 @@
-import React from 'react';
+import React, { useRef, useEffect, useCallback, useState, useMemo } from 'react';
 import { clamp } from 'lodash-es';
 import { VegaPlot, VEGA_THEMES } from '@vitessce/vega';
 import { capitalize, pluralize as plur } from '@vitessce/utils';
+import { select } from 'd3-selection';
+import { getColorScale } from './utils.js';
 
 /**
  * Gene expression dot plot,
@@ -32,14 +34,18 @@ export default function DotPlot(props) {
     marginRight,
     marginBottom,
     obsType,
+    sampleType,
     keyLength = 36,
     featureType,
     featureValueType,
     featureValueTransformName,
     featureValueColormap,
-    cellSetSelection,
+    obsSetSelection,
+    obsSetColor,
   } = props;
 
+  const vegaContainerRef = useRef();
+
   // Add a property `keyGroup` and `keyFeature` which concatenates the key and the name,
   // which is both unique and can easily be converted
   // back to the name by taking a substring.
@@ -80,18 +86,17 @@ export default function DotPlot(props) {
     || 30 + Math.sqrt(maxCharactersForSampleSet / 2) * 30;
 
   const plotWidth = transpose
-    ? clamp(width - autoMarginForFeature - 180, 10, Infinity) / (cellSetSelection?.length || 1)
+    ? clamp(width - autoMarginForFeature - 180, 10, Infinity) / (obsSetSelection?.length || 1)
     : clamp(width - autoMarginForGroup - autoMarginForSampleSet - 200, 10, Infinity);
   const plotHeight = transpose
     ? clamp((height - autoMarginForGroup - autoMarginForSampleSet - 50), 10, Infinity)
-    : clamp((height - autoMarginForFeature - 80), 10, Infinity) / (cellSetSelection?.length || 1);
+    : clamp((height - autoMarginForFeature - 80), 10, Infinity) / (obsSetSelection?.length || 1);
 
   // Get an array of keys for sorting purposes.
   const groupKeys = data.map(d => d.keyGroup);
   const featureKeys = data.map(d => d.keyFeature);
   const groupSecondaryKeys = data.map(d => d.keyGroupSecondary);
 
-
   const meanTransform = (featureValueTransformName && featureValueTransformName !== 'None')
     // Mean Log-Transformed Normalized Expression
     ? [`Mean ${featureValueTransformName}-transformed`, `normalized ${featureValueType}`, 'in set']
@@ -150,6 +155,11 @@ export default function DotPlot(props) {
         legend: {
           symbolFillColor: 'white',
         },
+        scale: { domain: [0, 100] },
+      },
+      tooltip: {
+        field: 'pctPosInGroup',
+        type: 'quantitative',
       },
     },
     width: plotWidth,
@@ -166,10 +176,68 @@ export default function DotPlot(props) {
     },
   };
 
+  const getTooltipText = useCallback(item => ({
+    [`${capitalize(featureType)}`]: item.datum.feature,
+    [`${capitalize(obsType)} Set`]: item.datum.group,
+    ...(isStratified
+      ? ({ [`${capitalize(sampleType)} Set`]: item.datum.secondaryGroup })
+      : {}
+    ),
+    [`Percentage of ${plur(obsType, 2)} in set`]: item.datum.pctPosInGroup,
+    [meanTransform.join(' ')]: item.datum.meanExpInGroup,
+  }), [featureType, obsType, featureValueType, featureValueTransformName]);
+
+  const obsSetColorScale = useMemo(() => getColorScale(
+    obsSetSelection, obsSetColor, theme,
+  ), [obsSetSelection, obsSetColor, theme]);
+
+  const [vegaRenderIncrement, setVegaRenderIncrement] = useState(0);
+
+  useEffect(() => {
+    // If the dot plot is stratified by both obsSet and sampleSet,
+    // then we want to add cell set colors.
+    // TODO: do we also want to add these color bars
+    // when only stratified by obsSet?
+    const domElement = vegaContainerRef.current;
+
+    // Here, we assume that the Vega SVG renderer is being used.
+    const svg = select(domElement)
+      .select('svg');
+    // We use the following CSS selector to identify all of
+    // the <line> elements that we are interested to modify.
+    const tickEls = svg.selectAll('g.root g.column_footer g.role-axis g.role-axis-domain line');
+
+    tickEls
+      .attr('stroke-width', 5)
+      .attr('dy', 2.5)
+      .attr('stroke', (d, i) => {
+        const obsSetPath = obsSetSelection?.[i];
+        return obsSetColorScale(obsSetPath);
+      });
+  }, [vegaContainerRef, vegaRenderIncrement, obsSetSelection, obsSetColorScale]);
+
+
+  // We want to increment the counter whenever we detect that VegaPlot
+  // has re-rendered.
+  const onNewView = useCallback(() => {
+    setVegaRenderIncrement(prev => prev + 1);
+  }, []);
+
+  // This is kind of hacky, since it is possible that the useEffect runs prior
+  // to the Vega rendering, but in practice it seems to work.
+  useEffect(() => {
+    setVegaRenderIncrement(prev => prev + 1);
+  }, [rawData]);
+
   return (
-    <VegaPlot
-      data={data}
-      spec={spec}
-    />
+    <div ref={vegaContainerRef}>
+      <VegaPlot
+        data={data}
+        spec={spec}
+        onNewView={onNewView}
+        getTooltipText={getTooltipText}
+        renderer="svg"
+      />
+    </div>
   );
 }

package/src/DotPlotSubscriber.js

@@ -160,11 +160,13 @@ export function DotPlotSubscriber(props) {
             width={width}
             height={height}
             obsType={obsType}
+            sampleType={sampleType}
             featureType={featureType}
             featureValueType={featureValueType}
             featureValueTransformName={selectedTransformName}
             featureValueColormap={featureValueColormap}
-            cellSetSelection={cellSetSelection}
+            obsSetSelection={cellSetSelection}
+            obsSetColor={cellSetColor}
           />
         ) : (
           <span>Select at least one {featureType}.</span>