@vitessce/statistical-plots 3.5.11 → 3.6.0

package/dist/{raw-0887baec.js → raw-Cg_bSi9Q.js}

@@ -1,7 +1,4 @@
-import { B as BaseDecoder } from "./index-134a71c6.js";
-import "react";
-import "@vitessce/vit-s";
-import "react-dom";
+import { B as BaseDecoder } from "./index-BWKMXz2z.js";
 class RawDecoder extends BaseDecoder {
   decodeBlock(buffer) {
     return buffer;

package/dist/{webimage-533922a5.js → webimage-BYRzhsjk.js}

@@ -1,7 +1,4 @@
-import { B as BaseDecoder } from "./index-134a71c6.js";
-import "react";
-import "@vitessce/vit-s";
-import "react-dom";
+import { B as BaseDecoder } from "./index-BWKMXz2z.js";
 class WebImageDecoder extends BaseDecoder {
   constructor() {
     super();

package/dist-tsc/CellSetCompositionBarPlotSubscriber.js

@@ -9,7 +9,7 @@ import { useStyles } from './styles.js';
 import { useRawSetPaths } from './utils.js';
 export function CellSetCompositionBarPlotSubscriber(props) {
     const { coordinationScopes, removeGridComponent, theme, helpText = ViewHelpMapping.OBS_SET_COMPOSITION_BAR_PLOT, } = props;
-    const classes = useStyles();
+    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.OBS_SET_COMPOSITION_BAR_PLOT], coordinationScopes);

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

@@ -1 +1 @@
-{"version":3,"file":"CellSetExpressionPlotOptions.d.ts","sourceRoot":"","sources":["../src/CellSetExpressionPlotOptions.js"],"names":[],"mappings":"AAUA,8EAyKC"}
+{"version":3,"file":"CellSetExpressionPlotOptions.d.ts","sourceRoot":"","sources":["../src/CellSetExpressionPlotOptions.js"],"names":[],"mappings":"AAUA,8EA0KC"}

package/dist-tsc/CellSetExpressionPlotOptions.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { useId } from 'react-aria';
-import { TableCell, TableRow, TextField, Slider } from '@material-ui/core';
+import { TableCell, TableRow, TextField, Slider } from '@vitessce/styles';
 import { usePlotOptionsStyles, OptionsContainer, OptionSelect } from '@vitessce/vit-s';
 import { GLSL_COLORMAPS } from '@vitessce/gl';
 import { capitalize } from '@vitessce/utils';
@@ -9,7 +9,7 @@ const FEATURE_AGGREGATION_STRATEGIES = ['first', 'last', 'sum', 'mean'];
 export default function CellSetExpressionPlotOptions(props) {
     const { featureValueTransform, setFeatureValueTransform, featureValueTransformCoefficient, setFeatureValueTransformCoefficient, transformOptions, featureValuePositivityThreshold, setFeatureValuePositivityThreshold, featureValueColormap, setFeatureValueColormap, featureAggregationStrategy, setFeatureAggregationStrategy, } = props;
     const cellSetExpressionPlotOptionsId = useId();
-    const classes = usePlotOptionsStyles();
+    const { classes } = usePlotOptionsStyles();
     function handleFeatureValueColormapChange(event) {
         setFeatureValueColormap(event.target.value);
     }
@@ -41,9 +41,10 @@ export default function CellSetExpressionPlotOptions(props) {
                                 id: `cellset-expression-feature-value-colormap-${cellSetExpressionPlotOptionsId}`,
                             }, children: GLSL_COLORMAPS.map(cmap => (_jsx("option", { value: cmap, children: cmap }, cmap))) }) })] })) : null, _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsx("label", { htmlFor: `cellset-expression-transform-select-${cellSetExpressionPlotOptionsId}`, children: "Transform" }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsx(OptionSelect, { className: classes.select, value: featureValueTransform === null ? '' : featureValueTransform, onChange: handleTransformChange, inputProps: {
                                 id: `cellset-expression-transform-select-${cellSetExpressionPlotOptionsId}`,
-                            }, children: transformOptions.map(opt => (_jsx("option", { value: opt.value === null ? '' : opt.value, children: opt.name }, opt.name))) }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsx("label", { htmlFor: `cellset-expression-transform-coeff-${cellSetExpressionPlotOptionsId}`, children: "Transform Coefficient" }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsx(TextField, { label: "Transform Coefficient", type: "number", onChange: handleTransformCoefficientChange, value: featureValueTransformCoefficient, InputLabelProps: {
-                                shrink: true,
-                            }, id: `cellset-expression-transform-coeff-${cellSetExpressionPlotOptionsId}` }) })] }), setFeatureAggregationStrategy ? (_jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsx("label", { htmlFor: `feature-aggregation-strategy-${cellSetExpressionPlotOptionsId}`, children: "Feature Aggregation Strategy" }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsx(OptionSelect, { className: classes.select, value: featureAggregationStrategy ?? 'first', onChange: handleFeatureAggregationStrategyChange, inputProps: {
+                            }, children: transformOptions.map(opt => (_jsx("option", { value: opt.value === null ? '' : opt.value, children: opt.name }, opt.name))) }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsx("label", { htmlFor: `cellset-expression-transform-coeff-${cellSetExpressionPlotOptionsId}`, children: "Transform Coefficient" }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsx(TextField, { label: "Transform Coefficient", type: "number", onChange: handleTransformCoefficientChange, value: featureValueTransformCoefficient, slotProps: { input: { shrink: true } }, id: `cellset-expression-transform-coeff-${cellSetExpressionPlotOptionsId}` }) })] }), setFeatureAggregationStrategy ? (_jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsx("label", { htmlFor: `feature-aggregation-strategy-${cellSetExpressionPlotOptionsId}`, children: "Feature Aggregation Strategy" }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsx(OptionSelect, { className: classes.select, value: featureAggregationStrategy ?? 'first', onChange: handleFeatureAggregationStrategyChange, inputProps: {
                                 id: `feature-aggregation-strategy-${cellSetExpressionPlotOptionsId}`,
-                            }, children: FEATURE_AGGREGATION_STRATEGIES.map(opt => (_jsx("option", { value: opt, children: capitalize(opt) }, opt))) }) })] })) : null, setFeatureValuePositivityThreshold ? (_jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, children: "Positivity Threshold" }), _jsx(TableCell, { className: classes.inputCell, children: _jsx(Slider, { classes: { root: classes.slider, valueLabel: classes.sliderValueLabel }, value: featureValuePositivityThreshold, onChange: handlePositivityThresholdChange, "aria-labelledby": "pos-threshold-slider", valueLabelDisplay: "auto", step: 1.0, min: 0.0, max: 100.0 }) })] }, "transform-coefficient-option-row")) : null] }));
+                            }, children: FEATURE_AGGREGATION_STRATEGIES.map(opt => (_jsx("option", { value: opt, children: capitalize(opt) }, opt))) }) })] })) : null, setFeatureValuePositivityThreshold ? (_jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, children: "Positivity Threshold" }), _jsx(TableCell, { className: classes.inputCell, children: _jsx(Slider, { slotProps: {
+                                root: { className: classes.slider },
+                                valueLabel: { className: classes.sliderValueLabel },
+                            }, value: featureValuePositivityThreshold, onChange: handlePositivityThresholdChange, "aria-labelledby": "pos-threshold-slider", valueLabelDisplay: "auto", step: 1.0, min: 0.0, max: 100.0 }) })] }, "transform-coefficient-option-row")) : null] }));
 }

package/dist-tsc/CellSetExpressionPlotSubscriber.js

@@ -90,7 +90,7 @@ function useExpressionByCellSet(sampleEdges, sampleSets, sampleSetSelection, exp
  */
 export function CellSetExpressionPlotSubscriber(props) {
     const { coordinationScopes, closeButtonVisible, downloadButtonVisible, removeGridComponent, theme, title, xAxisTitle, jitter = false, yMin = null, yUnits = null, helpText = ViewHelpMapping.OBS_SET_FEATURE_VALUE_DISTRIBUTION, } = props;
-    const classes = useStyles();
+    const { classes } = useStyles();
     const loaders = useLoaders();
     // Get "props" from the coordination space.
     const [{ dataset, obsType, featureType, featureValueType, featureSelection: geneSelection, featureValueTransform, featureValueTransformCoefficient, obsSetSelection: cellSetSelection, obsSetColor: cellSetColor, additionalObsSets: additionalCellSets, sampleType, sampleSetSelection, sampleSetColor, featureAggregationStrategy, }, { setFeatureValueTransform, setFeatureValueTransformCoefficient, setSampleSetColor, setFeatureAggregationStrategy, }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType.OBS_SET_FEATURE_VALUE_DISTRIBUTION], coordinationScopes);

package/dist-tsc/CellSetSizesPlotSubscriber.js

@@ -20,7 +20,7 @@ import { useStyles } from './styles.js';
  */
 export function CellSetSizesPlotSubscriber(props) {
     const { coordinationScopes, closeButtonVisible, downloadButtonVisible, removeGridComponent, theme, title: titleOverride, helpText = ViewHelpMapping.OBS_SET_SIZES, } = props;
-    const classes = useStyles();
+    const { classes } = useStyles();
     const loaders = useLoaders();
     // Get "props" from the coordination space.
     const [{ dataset, obsType, obsSetSelection: cellSetSelection, obsSetColor: cellSetColor, additionalObsSets: additionalCellSets, obsSetExpansion: cellSetExpansion, }, { setObsSetSelection: setCellSetSelection, setObsSetColor: setCellSetColor, }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType.OBS_SET_SIZES], coordinationScopes);

package/dist-tsc/DotPlotSubscriber.js

@@ -17,7 +17,7 @@ import { useExpressionSummaries } from './dot-plot-hook.js';
  */
 export function DotPlotSubscriber(props) {
     const { coordinationScopes, removeGridComponent, theme, title = 'Dot Plot', transpose = true, helpText = ViewHelpMapping.DOT_PLOT, } = props;
-    const classes = useStyles();
+    const { classes } = useStyles();
     const loaders = useLoaders();
     // Get "props" from the coordination space.
     const [{ dataset, obsType, featureType, featureValueType, featureSelection: geneSelection, featureValueTransform, featureValueTransformCoefficient, featureValuePositivityThreshold: posThreshold, featureValueColormap, obsSetSelection: cellSetSelection, obsSetColor: cellSetColor, additionalObsSets: additionalCellSets, sampleType, sampleSetSelection, }, { setFeatureValueTransform, setFeatureValueTransformCoefficient, setFeatureValuePositivityThreshold: setPosThreshold, setFeatureValueColormap, }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType.DOT_PLOT], coordinationScopes);

package/dist-tsc/ExpressionHistogramSubscriber.js

@@ -18,7 +18,7 @@ import { useStyles } from './styles.js';
  */
 export function ExpressionHistogramSubscriber(props) {
     const { coordinationScopes, closeButtonVisible, downloadButtonVisible, removeGridComponent, theme, helpText = ViewHelpMapping.FEATURE_VALUE_HISTOGRAM, } = props;
-    const classes = useStyles();
+    const { classes } = useStyles();
     const loaders = useLoaders();
     // Get "props" from the coordination space.
     const [{ dataset, obsType, featureType, featureValueType, featureSelection: geneSelection, additionalObsSets: additionalCellSets, obsSetColor: cellSetColor, }, { setAdditionalObsSets: setAdditionalCellSets, setObsSetColor: setCellSetColor, setObsColorEncoding: setCellColorEncoding, setObsSetSelection: setCellSetSelection, }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType.FEATURE_VALUE_HISTOGRAM], coordinationScopes);

package/dist-tsc/FeatureBarPlotSubscriber.js

@@ -7,7 +7,7 @@ import FeatureBarPlot from './FeatureBarPlot.js';
 import { useStyles } from './styles.js';
 export function FeatureBarPlotSubscriber(props) {
     const { coordinationScopes, removeGridComponent, theme, yMin = 0, yUnits = null, helpText = ViewHelpMapping.FEATURE_BAR_PLOT, } = props;
-    const classes = useStyles();
+    const { classes } = useStyles();
     const loaders = useLoaders();
     // Get "props" from the coordination space.
     const [{ dataset, obsType, featureType, featureValueType, featureSelection: geneSelection, featureValueTransform, featureValueTransformCoefficient, obsHighlight: cellHighlight, additionalObsSets: additionalCellSets, obsSetSelection: cellSetSelection, obsSetColor: cellSetColor, }, { setObsSetSelection: setCellSetSelection, setObsHighlight: setCellHighlight, setObsSetColor: setCellSetColor, setObsColorEncoding: setCellColorEncoding, setAdditionalObsSets: setAdditionalCellSets, }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType.FEATURE_BAR_PLOT], coordinationScopes);

package/dist-tsc/FeatureSetEnrichmentBarPlotSubscriber.js

@@ -9,7 +9,7 @@ import { useStyles } from './styles.js';
 import { useRawSetPaths } from './utils.js';
 export function FeatureSetEnrichmentBarPlotSubscriber(props) {
     const { coordinationScopes, removeGridComponent, theme, helpText = ViewHelpMapping.FEATURE_SET_ENRICHMENT_BAR_PLOT, } = props;
-    const classes = useStyles();
+    const { classes } = useStyles();
     const loaders = useLoaders();
     const transformFeature = useAsyncFunction(AsyncFunctionType.TRANSFORM_FEATURE);
     // Get "props" from the coordination space.

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

@@ -1 +1 @@
-{"version":3,"file":"FeatureStatsTable.d.ts","sourceRoot":"","sources":["../src/FeatureStatsTable.js"],"names":[],"mappings":"AAWA,mEAwGC"}
+{"version":3,"file":"FeatureStatsTable.d.ts","sourceRoot":"","sources":["../src/FeatureStatsTable.js"],"names":[],"mappings":"AAoBA,mEAyGC"}

package/dist-tsc/FeatureStatsTable.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useMemo, useState, useCallback } from 'react';
-import { DataGrid } from '@mui/x-data-grid';
+import { DataGrid } from '@vitessce/styles';
 import { capitalize } from '@vitessce/utils';
 import { useFilteredVolcanoData } from './utils.js';
 const ROW_ID_DELIMITER = '___';
@@ -8,6 +8,14 @@ const INITIAL_SORT_MODEL = [
     // We initially set the sorting this way
     { field: 'logFoldChange', sort: 'desc' },
 ];
+const initialState = {
+    pagination: {
+        paginationModel: {
+            pageSize: 10,
+        },
+    },
+};
+const pageSizeOptions = [10];
 export default function FeatureStatsTable(props) {
     const { obsType, featureType, obsSetsColumnNameMappingReversed, sampleSetsColumnNameMappingReversed, sampleSetSelection, data, setFeatureSelection, featurePointSignificanceThreshold, featurePointFoldChangeThreshold, } = props;
     const [
@@ -69,13 +77,13 @@ export default function FeatureStatsTable(props) {
         return result;
     }, [filteredData, obsSetsColumnNameMappingReversed]);
     const onSelectionModelChange = useCallback((rowIds) => {
-        const featureIds = rowIds.map(rowId => rowId.split(ROW_ID_DELIMITER)[0]);
+        const featureIds = Array.from(rowIds.ids).map(rowId => rowId.split(ROW_ID_DELIMITER)[0]);
         setFeatureSelection(featureIds);
     }, []);
-    const rowSelectionModel = useMemo(() => [], []);
+    const rowSelectionModel = useMemo(() => ({ ids: new Set([]), type: 'include' }), []);
     const [sortModel, setSortModel] = useState(INITIAL_SORT_MODEL);
     const getRowId = useCallback(row => row.id, []);
-    return (_jsx(DataGrid, { density: "compact", rows: rows, columns: columns, pageSize: 10, 
+    return (_jsx(DataGrid, { density: "compact", rows: rows, columns: columns, initialState: initialState, pageSizeOptions: pageSizeOptions, 
         // checkboxSelection // TODO: uncomment to enable multiple-row selection
-        onSelectionModelChange: onSelectionModelChange, rowSelectionModel: rowSelectionModel, getRowId: getRowId, sortModel: sortModel, onSortModelChange: setSortModel }));
+        onRowSelectionModelChange: onSelectionModelChange, rowSelectionModel: rowSelectionModel, getRowId: getRowId, sortModel: sortModel, onSortModelChange: setSortModel }));
 }

package/dist-tsc/TreemapOptions.js

@@ -2,13 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { useId } from 'react-aria';
 import { isEqual } from 'lodash-es';
-import { TableCell, TableRow } from '@material-ui/core';
+import { TableCell, TableRow } from '@vitessce/styles';
 import { capitalize } from '@vitessce/utils';
 import { usePlotOptionsStyles, OptionSelect, OptionsContainer, } from '@vitessce/vit-s';
 export default function TreemapOptions(props) {
     const { children, obsType, sampleType, hierarchyLevels, setHierarchyLevels, obsColorEncoding, setObsColorEncoding, } = props;
     const treemapOptionsId = useId();
-    const classes = usePlotOptionsStyles();
+    const { classes } = usePlotOptionsStyles();
     function handleColorEncodingChange(event) {
         setObsColorEncoding(event.target.value);
     }

package/dist-tsc/TreemapSubscriber.js

@@ -13,7 +13,7 @@ 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 { 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);

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

@@ -1 +1 @@
-{"version":3,"file":"VolcanoPlotOptions.d.ts","sourceRoot":"","sources":["../src/VolcanoPlotOptions.js"],"names":[],"mappings":"AAOA,oEAgIC"}
+{"version":3,"file":"VolcanoPlotOptions.d.ts","sourceRoot":"","sources":["../src/VolcanoPlotOptions.js"],"names":[],"mappings":"AAOA,oEA4IC"}

package/dist-tsc/VolcanoPlotOptions.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { useId } from 'react-aria';
-import { TableCell, TableRow, Slider } from '@material-ui/core';
+import { TableCell, TableRow, Slider } from '@vitessce/styles';
 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();
+    const { classes } = usePlotOptionsStyles();
     function handlePointSignificanceChange(event, value) {
         setFeaturePointSignificanceThreshold(10 ** -value);
     }
@@ -19,5 +19,17 @@ export default function VolcanoPlotOptions(props) {
     function handleLabelFoldChangeChange(event, value) {
         setFeatureLabelFoldChangeThreshold(value);
     }
-    return (_jsxs(OptionsContainer, { children: [children, _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsx("label", { htmlFor: `volcano-label-significance-${volcanoOptionsId}`, children: "Label Significance Threshold" }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsx(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 }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsx("label", { htmlFor: `volcano-label-fc-${volcanoOptionsId}`, children: "Label Fold-Change Threshold" }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsx(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 }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsx("label", { htmlFor: `volcano-point-significance-${volcanoOptionsId}`, children: "Point Significance Threshold" }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsx(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 }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsx("label", { htmlFor: `volcano-point-fc-${volcanoOptionsId}`, children: "Point Fold-Change Threshold" }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsx(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 }) })] })] }));
+    return (_jsxs(OptionsContainer, { children: [children, _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsx("label", { htmlFor: `volcano-label-significance-${volcanoOptionsId}`, children: "Label Significance Threshold" }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsx(Slider, { slotProps: {
+                                root: { className: classes.slider },
+                                valueLabel: { className: 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 }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsx("label", { htmlFor: `volcano-label-fc-${volcanoOptionsId}`, children: "Label Fold-Change Threshold" }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsx(Slider, { slotProps: {
+                                root: { className: classes.slider },
+                                valueLabel: { className: 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 }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsx("label", { htmlFor: `volcano-point-significance-${volcanoOptionsId}`, children: "Point Significance Threshold" }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsx(Slider, { slotProps: {
+                                root: { className: classes.slider },
+                                valueLabel: { className: 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 }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsx("label", { htmlFor: `volcano-point-fc-${volcanoOptionsId}`, children: "Point Fold-Change Threshold" }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsx(Slider, { slotProps: {
+                                root: { className: classes.slider },
+                                valueLabel: { className: 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 }) })] })] }));
 }

package/dist-tsc/VolcanoPlotSubscriber.js

@@ -9,7 +9,7 @@ import VolcanoPlotOptions from './VolcanoPlotOptions.js';
 import { useRawSetPaths } from './utils.js';
 export function VolcanoPlotSubscriber(props) {
     const { title = 'Volcano Plot', coordinationScopes, removeGridComponent, theme, helpText = ViewHelpMapping.VOLCANO_PLOT, } = props;
-    const classes = useStyles();
+    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);

package/dist-tsc/styles.d.ts

@@ -1,2 +1,10 @@
-export const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"vegaContainer">;
+export const useStyles: (params: void, muiStyleOverridesParams?: {
+    props: Record<string, unknown>;
+    ownerState?: Record<string, unknown> | undefined;
+} | undefined) => {
+    classes: Record<"vegaContainer", string>;
+    theme: import("@mui/material").Theme;
+    css: import("tss-react").Css;
+    cx: import("tss-react").Cx;
+};
 //# sourceMappingURL=styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../src/styles.js"],"names":[],"mappings":"AAEA,qHAMI"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../src/styles.js"],"names":[],"mappings":"AAEA;;cAO6hB,CAAC;;;kBAAoH,eAAsB;gBAAyB,WAAU;eAAsB,WAAU;EADvuB"}

package/dist-tsc/styles.js

@@ -1,5 +1,5 @@
-import { makeStyles } from '@material-ui/core';
-export const useStyles = makeStyles(() => ({
+import { makeStyles } from '@vitessce/styles';
+export const useStyles = makeStyles()(() => ({
     vegaContainer: {
         display: 'flex',
         flex: '1 1 auto',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitessce/statistical-plots",
-  "version": "3.5.11",
+  "version": "3.6.0",
   "author": "HIDIVE Lab at HMS",
   "homepage": "http://vitessce.io",
   "repository": {
@@ -16,8 +16,6 @@
     "dist-tsc"
   ],
   "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",
@@ -30,20 +28,21 @@
     "react-aria": "^3.28.0",
     "internmap": "^2.0.3",
     "uuid": "^9.0.0",
-    "@vitessce/constants-internal": "3.5.11",
-    "@vitessce/sets-utils": "3.5.11",
-    "@vitessce/utils": "3.5.11",
-    "@vitessce/vega": "3.5.11",
-    "@vitessce/vit-s": "3.5.11",
-    "@vitessce/gl": "3.5.11"
+    "@vitessce/styles": "3.6.0",
+    "@vitessce/constants-internal": "3.6.0",
+    "@vitessce/sets-utils": "3.6.0",
+    "@vitessce/utils": "3.6.0",
+    "@vitessce/vega": "3.6.0",
+    "@vitessce/vit-s": "3.6.0",
+    "@vitessce/gl": "3.6.0"
   },
   "devDependencies": {
     "react": "^18.0.0",
-    "vite": "^4.3.0",
-    "vitest": "^0.32.2"
+    "vite": "^6.3.5",
+    "vitest": "^3.1.4"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "scripts": {
     "bundle": "pnpm exec vite build -c ../../../scripts/vite.config.js",

package/src/CellSetCompositionBarPlotSubscriber.js

@@ -30,7 +30,7 @@ export function CellSetCompositionBarPlotSubscriber(props) {
     helpText = ViewHelpMapping.OBS_SET_COMPOSITION_BAR_PLOT,
   } = props;
 
-  const classes = useStyles();
+  const { classes } = useStyles();
   const loaders = useLoaders();
 
   // Get "props" from the coordination space.

package/src/CellSetExpressionPlotOptions.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useId } from 'react-aria';
-import { TableCell, TableRow, TextField, Slider } from '@material-ui/core';
+import { TableCell, TableRow, TextField, Slider } from '@vitessce/styles';
 import { usePlotOptionsStyles, OptionsContainer, OptionSelect } from '@vitessce/vit-s';
 import { GLSL_COLORMAPS } from '@vitessce/gl';
 import { capitalize } from '@vitessce/utils';
@@ -25,7 +25,7 @@ export default function CellSetExpressionPlotOptions(props) {
 
   const cellSetExpressionPlotOptionsId = useId();
 
-  const classes = usePlotOptionsStyles();
+  const { classes } = usePlotOptionsStyles();
 
   function handleFeatureValueColormapChange(event) {
     setFeatureValueColormap(event.target.value);
@@ -122,9 +122,7 @@ export default function CellSetExpressionPlotOptions(props) {
             type="number"
             onChange={handleTransformCoefficientChange}
             value={featureValueTransformCoefficient}
-            InputLabelProps={{
-              shrink: true,
-            }}
+            slotProps={{ input: { shrink: true } }}
             id={`cellset-expression-transform-coeff-${cellSetExpressionPlotOptionsId}`}
           />
         </TableCell>
@@ -163,7 +161,10 @@ export default function CellSetExpressionPlotOptions(props) {
           </TableCell>
           <TableCell className={classes.inputCell}>
             <Slider
-              classes={{ root: classes.slider, valueLabel: classes.sliderValueLabel }}
+              slotProps={{
+                root: { className: classes.slider },
+                valueLabel: { className: classes.sliderValueLabel },
+              }}
               value={featureValuePositivityThreshold}
               onChange={handlePositivityThresholdChange}
               aria-labelledby="pos-threshold-slider"

package/src/CellSetExpressionPlotSubscriber.js

@@ -145,7 +145,7 @@ export function CellSetExpressionPlotSubscriber(props) {
     helpText = ViewHelpMapping.OBS_SET_FEATURE_VALUE_DISTRIBUTION,
   } = props;
 
-  const classes = useStyles();
+  const { classes } = useStyles();
   const loaders = useLoaders();
 
   // Get "props" from the coordination space.

package/src/CellSetSizesPlotSubscriber.js

@@ -36,7 +36,7 @@ export function CellSetSizesPlotSubscriber(props) {
     helpText = ViewHelpMapping.OBS_SET_SIZES,
   } = props;
 
-  const classes = useStyles();
+  const { classes } = useStyles();
 
   const loaders = useLoaders();
 

package/src/DotPlotSubscriber.js

@@ -35,7 +35,7 @@ export function DotPlotSubscriber(props) {
     helpText = ViewHelpMapping.DOT_PLOT,
   } = props;
 
-  const classes = useStyles();
+  const { classes } = useStyles();
   const loaders = useLoaders();
 
   // Get "props" from the coordination space.

package/src/ExpressionHistogramSubscriber.js

@@ -32,7 +32,7 @@ export function ExpressionHistogramSubscriber(props) {
     helpText = ViewHelpMapping.FEATURE_VALUE_HISTOGRAM,
   } = props;
 
-  const classes = useStyles();
+  const { classes } = useStyles();
   const loaders = useLoaders();
 
   // Get "props" from the coordination space.

package/src/FeatureBarPlotSubscriber.js

@@ -26,7 +26,7 @@ export function FeatureBarPlotSubscriber(props) {
     helpText = ViewHelpMapping.FEATURE_BAR_PLOT,
   } = props;
 
-  const classes = useStyles();
+  const { classes } = useStyles();
   const loaders = useLoaders();
 
   // Get "props" from the coordination space.

package/src/FeatureSetEnrichmentBarPlotSubscriber.js

@@ -32,7 +32,7 @@ export function FeatureSetEnrichmentBarPlotSubscriber(props) {
     helpText = ViewHelpMapping.FEATURE_SET_ENRICHMENT_BAR_PLOT,
   } = props;
 
-  const classes = useStyles();
+  const { classes } = useStyles();
   const loaders = useLoaders();
   const transformFeature = useAsyncFunction(AsyncFunctionType.TRANSFORM_FEATURE);
 

package/src/FeatureStatsTable.js

@@ -1,5 +1,5 @@
 import React, { useMemo, useState, useCallback } from 'react';
-import { DataGrid } from '@mui/x-data-grid';
+import { DataGrid } from '@vitessce/styles';
 import { capitalize } from '@vitessce/utils';
 import { useFilteredVolcanoData } from './utils.js';
 
@@ -9,6 +9,15 @@ const INITIAL_SORT_MODEL = [
   { field: 'logFoldChange', sort: 'desc' },
 ];
 
+const initialState = {
+  pagination: {
+    paginationModel: {
+      pageSize: 10,
+    },
+  },
+};
+const pageSizeOptions = [10];
+
 export default function FeatureStatsTable(props) {
   const {
     obsType,
@@ -89,11 +98,11 @@ export default function FeatureStatsTable(props) {
   }, [filteredData, obsSetsColumnNameMappingReversed]);
 
   const onSelectionModelChange = useCallback((rowIds) => {
-    const featureIds = rowIds.map(rowId => rowId.split(ROW_ID_DELIMITER)[0]);
+    const featureIds = Array.from(rowIds.ids).map(rowId => rowId.split(ROW_ID_DELIMITER)[0]);
     setFeatureSelection(featureIds);
   }, []);
 
-  const rowSelectionModel = useMemo(() => [], []);
+  const rowSelectionModel = useMemo(() => ({ ids: new Set([]), type: 'include' }), []);
 
   const [sortModel, setSortModel] = useState(INITIAL_SORT_MODEL);
 
@@ -104,9 +113,10 @@ export default function FeatureStatsTable(props) {
       density="compact"
       rows={rows}
       columns={columns}
-      pageSize={10}
+      initialState={initialState}
+      pageSizeOptions={pageSizeOptions}
       // checkboxSelection // TODO: uncomment to enable multiple-row selection
-      onSelectionModelChange={onSelectionModelChange}
+      onRowSelectionModelChange={onSelectionModelChange}
       rowSelectionModel={rowSelectionModel}
       getRowId={getRowId}
       sortModel={sortModel}

package/src/TreemapOptions.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useId } from 'react-aria';
 import { isEqual } from 'lodash-es';
-import { TableCell, TableRow } from '@material-ui/core';
+import { TableCell, TableRow } from '@vitessce/styles';
 import { capitalize } from '@vitessce/utils';
 import {
   usePlotOptionsStyles, OptionSelect, OptionsContainer,
@@ -22,7 +22,7 @@ export default function TreemapOptions(props) {
   } = props;
 
   const treemapOptionsId = useId();
-  const classes = usePlotOptionsStyles();
+  const { classes } = usePlotOptionsStyles();
 
   function handleColorEncodingChange(event) {
     setObsColorEncoding(event.target.value);

package/src/TreemapSubscriber.js

@@ -31,7 +31,7 @@ export function TreemapSubscriber(props) {
     helpText = ViewHelpMapping.TREEMAP,
   } = props;
 
-  const classes = useStyles();
+  const { classes } = useStyles();
   const loaders = useLoaders();
 
   // Get "props" from the coordination space.

package/src/VolcanoPlotOptions.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useId } from 'react-aria';
-import { TableCell, TableRow, Slider } from '@material-ui/core';
+import { TableCell, TableRow, Slider } from '@vitessce/styles';
 import {
   usePlotOptionsStyles, OptionsContainer,
 } from '@vitessce/vit-s';
@@ -21,7 +21,7 @@ export default function VolcanoPlotOptions(props) {
   } = props;
 
   const volcanoOptionsId = useId();
-  const classes = usePlotOptionsStyles();
+  const { classes } = usePlotOptionsStyles();
 
   function handlePointSignificanceChange(event, value) {
     setFeaturePointSignificanceThreshold(10 ** -value);
@@ -53,7 +53,10 @@ export default function VolcanoPlotOptions(props) {
         </TableCell>
         <TableCell className={classes.inputCell} variant="body">
           <Slider
-            classes={{ root: classes.slider, valueLabel: classes.sliderValueLabel }}
+            slotProps={{
+              root: { className: classes.slider },
+              valueLabel: { className: classes.sliderValueLabel },
+            }}
             value={-Math.log10(featureLabelSignificanceThreshold)}
             onChange={handleLabelSignificanceChange}
             aria-label="Volcano plot label significance threshold slider"
@@ -75,7 +78,10 @@ export default function VolcanoPlotOptions(props) {
         </TableCell>
         <TableCell className={classes.inputCell} variant="body">
           <Slider
-            classes={{ root: classes.slider, valueLabel: classes.sliderValueLabel }}
+            slotProps={{
+              root: { className: classes.slider },
+              valueLabel: { className: classes.sliderValueLabel },
+            }}
             value={featureLabelFoldChangeThreshold}
             onChange={handleLabelFoldChangeChange}
             aria-label="Volcano plot label fold-change threshold slider"
@@ -97,7 +103,10 @@ export default function VolcanoPlotOptions(props) {
         </TableCell>
         <TableCell className={classes.inputCell} variant="body">
           <Slider
-            classes={{ root: classes.slider, valueLabel: classes.sliderValueLabel }}
+            slotProps={{
+              root: { className: classes.slider },
+              valueLabel: { className: classes.sliderValueLabel },
+            }}
             value={-Math.log10(featurePointSignificanceThreshold)}
             onChange={handlePointSignificanceChange}
             aria-label="Volcano plot point significance threshold slider"
@@ -119,7 +128,10 @@ export default function VolcanoPlotOptions(props) {
         </TableCell>
         <TableCell className={classes.inputCell} variant="body">
           <Slider
-            classes={{ root: classes.slider, valueLabel: classes.sliderValueLabel }}
+            slotProps={{
+              root: { className: classes.slider },
+              valueLabel: { className: classes.sliderValueLabel },
+            }}
             value={featurePointFoldChangeThreshold}
             onChange={handlePointFoldChangeChange}
             aria-label="Volcano plot point fold-change threshold slider"

package/src/VolcanoPlotSubscriber.js

@@ -30,7 +30,7 @@ export function VolcanoPlotSubscriber(props) {
     helpText = ViewHelpMapping.VOLCANO_PLOT,
   } = props;
 
-  const classes = useStyles();
+  const { classes } = useStyles();
   const loaders = useLoaders();
 
   // Get "props" from the coordination space.