@vitessce/biomarker-select 3.5.11 → 3.6.0

package/dist-tsc/ComparativeHeadingSubscriber.js

@@ -2,8 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback } from 'react';
 import { useCoordination, } from '@vitessce/vit-s';
 import { ViewType, COMPONENT_COORDINATION_TYPES } from '@vitessce/constants-internal';
-import { makeStyles } from '@material-ui/core';
-const useStyles = makeStyles(theme => ({
+import { makeStyles } from '@vitessce/styles';
+const useStyles = makeStyles()(theme => ({
     buttonContainer: {
         position: 'absolute',
         right: 0,
@@ -36,7 +36,7 @@ const useStyles = makeStyles(theme => ({
 export function ComparativeHeadingSubscriber(props) {
     const { coordinationScopes, } = props;
     const [{ sampleSetSelection, featureSelection, }, { setSampleSetSelection, setFeatureSelection, }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType.COMPARATIVE_HEADING], coordinationScopes);
-    const classes = useStyles();
+    const { classes } = useStyles();
     const swapSampleSets = useCallback(() => {
         if (sampleSetSelection?.length === 2) {
             setSampleSetSelection([

package/dist-tsc/SampleSetPairManagerSubscriber.js

@@ -2,10 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useMemo, useCallback } from 'react';
 import { isEqual } from 'lodash-es';
 import clsx from 'clsx';
-import { makeStyles } from '@material-ui/core';
+import { makeStyles } from '@vitessce/styles';
 import { TitleInfo, useReady, useCoordination, useLoaders, useComparisonMetadata, useMatchingLoader, useColumnNameMapping, } from '@vitessce/vit-s';
 import { ViewType, DataType, COMPONENT_COORDINATION_TYPES, ViewHelpMapping } from '@vitessce/constants-internal';
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles()(() => ({
     selectedPair: {
         fontWeight: 'bold',
     },
@@ -20,7 +20,7 @@ const useStyles = makeStyles(() => ({
 }));
 export function SampleSetPairManagerSubscriber(props) {
     const { coordinationScopes, removeGridComponent, theme, title = 'Sample Sets', closeButtonVisible, helpText = ViewHelpMapping.SAMPLE_SET_PAIR_MANAGER, } = props;
-    const classes = useStyles();
+    const { classes } = useStyles();
     const loaders = useLoaders();
     // Get "props" from the coordination space.
     const [{ dataset, obsType, sampleType, sampleSetSelection, }, { setSampleSetSelection, }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType.SAMPLE_SET_PAIR_MANAGER], coordinationScopes);

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

@@ -1 +1 @@
-{"version":3,"file":"cart.d.ts","sourceRoot":"","sources":["../src/cart.js"],"names":[],"mappings":"AAMA,0DAwFC"}
+{"version":3,"file":"cart.d.ts","sourceRoot":"","sources":["../src/cart.js"],"names":[],"mappings":"AAKA,0DAwFC"}

package/dist-tsc/cart.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from 'react';
-import { Accordion, AccordionDetails, AccordionSummary, Typography } from '@material-ui/core';
-import { ExpandMore as ExpandMoreIcon } from '@material-ui/icons';
+import { Accordion, AccordionDetails, AccordionSummary, Typography, ExpandMore as ExpandMoreIcon } from '@vitessce/styles';
 import { useStyles } from './styles.js';
 export function ConfirmatoryCart(props) {
     const { currentModalityAgnosticSelection, 
@@ -11,7 +10,7 @@ export function ConfirmatoryCart(props) {
     setCurrentModalitySpecificSelection, currentStratificationSelection, 
     // eslint-disable-next-line no-unused-vars
     setCurrentStratificationSelection, } = props;
-    const classes = useStyles();
+    const { classes } = useStyles();
     const [expandedAccordions, setExpandedAccordions] = React.useState([
         'agnostic', 'specific', 'stratification',
     ]);

package/dist-tsc/scmd-ui.js

@@ -1,16 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable no-unused-vars */
 import React, { useState } from 'react';
-import { Button, ButtonGroup, Grid, Tooltip } from '@material-ui/core';
+import { Button, ButtonGroup, Grid, Tooltip } from '@vitessce/styles';
 import { ConfirmatoryStepper } from './stepper-confirmatory.js';
 import { ExploratoryStepper } from './stepper-exploratory.js';
 import { useStyles } from './styles.js';
 export function ScmdUi(props) {
     const { mode: modeProp, setMode, step: stepProp, setStep, currentModalityAgnosticSelection, setCurrentModalityAgnosticSelection, currentModalitySpecificSelection, setCurrentModalitySpecificSelection, currentStratificationSelection, setCurrentStratificationSelection, autocompleteNode, getEdges, stratifications, onFinish, } = props;
-    const classes = useStyles();
+    const { classes } = useStyles();
     const mode = modeProp || 'confirmatory';
     const step = mode === 'confirmatory' ? (stepProp || 'select-biomarkers') : (stepProp || 'define-stratification');
     const [tempIsVisible, setTempIsVisible] = useState(true);
     const isConfirmatoryMode = mode === 'confirmatory';
-    return (_jsxs(Grid, { container: true, style: { border: '0px solid red' }, children: [_jsxs(Grid, { item: true, container: true, xs: 12, className: classes.header, children: [_jsx(Grid, { item: true, xs: 8 }), _jsx(Grid, { item: true, container: true, xs: 4, justifyContent: "flex-end", children: _jsxs(ButtonGroup, { variant: "outlined", size: "small", color: "secondary", "aria-label": "Toggle between confirmatory and exploratory modes", children: [_jsx(Tooltip, { arrow: true, title: "Start from biomarker(s) of interest", children: _jsx(Button, { variant: isConfirmatoryMode ? 'contained' : 'outlined', onClick: () => setMode('confirmatory'), children: "Confirmatory (Hypothesis-driven)" }) }), _jsx(Tooltip, { arrow: true, title: "Lacking biomarker(s) of interest", children: _jsx(Button, { variant: !isConfirmatoryMode ? 'contained' : 'outlined', onClick: () => setMode('exploratory'), children: "Exploratory (Hypothesis-generating)" }) })] }) })] }), tempIsVisible ? (_jsxs("div", { style: { border: '2px solid #eee', borderRadius: '5px' }, children: [mode === 'confirmatory' ? (_jsx(ConfirmatoryStepper, { autocompleteNode: autocompleteNode, currentModalityAgnosticSelection: currentModalityAgnosticSelection, setCurrentModalityAgnosticSelection: setCurrentModalityAgnosticSelection, currentModalitySpecificSelection: currentModalitySpecificSelection, setCurrentModalitySpecificSelection: setCurrentModalitySpecificSelection, currentStratificationSelection: currentStratificationSelection, setCurrentStratificationSelection: setCurrentStratificationSelection, getEdges: getEdges, stratifications: stratifications, onFinish: onFinish })) : null, mode === 'exploratory' ? (_jsx(ExploratoryStepper, { autocompleteNode: autocompleteNode, currentModalityAgnosticSelection: currentModalityAgnosticSelection, setCurrentModalityAgnosticSelection: setCurrentModalityAgnosticSelection, currentModalitySpecificSelection: currentModalitySpecificSelection, setCurrentModalitySpecificSelection: setCurrentModalitySpecificSelection, currentStratificationSelection: currentStratificationSelection, setCurrentStratificationSelection: setCurrentStratificationSelection, getEdges: getEdges, stratifications: stratifications, onFinish: onFinish })) : null] })) : null] }));
+    return (_jsxs(Grid, { container: true, sx: { border: '0px solid red' }, children: [_jsxs(Grid, { container: true, size: 12, className: classes.header, children: [_jsx(Grid, { size: 8 }), _jsx(Grid, { container: true, size: 4, justifyContent: "flex-end", children: _jsxs(ButtonGroup, { variant: "outlined", size: "small", color: "secondary", "aria-label": "Toggle between confirmatory and exploratory modes", children: [_jsx(Tooltip, { arrow: true, title: "Start from biomarker(s) of interest", children: _jsx(Button, { variant: isConfirmatoryMode ? 'contained' : 'outlined', onClick: () => setMode('confirmatory'), children: "Confirmatory (Hypothesis-driven)" }) }), _jsx(Tooltip, { arrow: true, title: "Lacking biomarker(s) of interest", children: _jsx(Button, { variant: !isConfirmatoryMode ? 'contained' : 'outlined', onClick: () => setMode('exploratory'), children: "Exploratory (Hypothesis-generating)" }) })] }) })] }), tempIsVisible ? (_jsxs("div", { style: { border: '2px solid #eee', borderRadius: '5px' }, children: [mode === 'confirmatory' ? (_jsx(ConfirmatoryStepper, { autocompleteNode: autocompleteNode, currentModalityAgnosticSelection: currentModalityAgnosticSelection, setCurrentModalityAgnosticSelection: setCurrentModalityAgnosticSelection, currentModalitySpecificSelection: currentModalitySpecificSelection, setCurrentModalitySpecificSelection: setCurrentModalitySpecificSelection, currentStratificationSelection: currentStratificationSelection, setCurrentStratificationSelection: setCurrentStratificationSelection, getEdges: getEdges, stratifications: stratifications, onFinish: onFinish })) : null, mode === 'exploratory' ? (_jsx(ExploratoryStepper, { autocompleteNode: autocompleteNode, currentModalityAgnosticSelection: currentModalityAgnosticSelection, setCurrentModalityAgnosticSelection: setCurrentModalityAgnosticSelection, currentModalitySpecificSelection: currentModalitySpecificSelection, setCurrentModalitySpecificSelection: setCurrentModalitySpecificSelection, currentStratificationSelection: currentStratificationSelection, setCurrentStratificationSelection: setCurrentStratificationSelection, getEdges: getEdges, stratifications: stratifications, onFinish: onFinish })) : null] })) : null] }));
 }

package/dist-tsc/select-agnostic.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select-agnostic.d.ts","sourceRoot":"","sources":["../src/select-agnostic.js"],"names":[],"mappings":"AAoEA,wDAuGC"}
+{"version":3,"file":"select-agnostic.d.ts","sourceRoot":"","sources":["../src/select-agnostic.js"],"names":[],"mappings":"AA0EA,wDA0GC"}

package/dist-tsc/select-agnostic.js

@@ -1,8 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useRef, useEffect } from 'react';
-import { Grid, Button, TextField, Typography } from '@material-ui/core';
-import { Add as AddIcon, Info as InfoIcon } from '@material-ui/icons';
-import { Autocomplete } from '@material-ui/lab';
+import { Grid, Button, TextField, Typography, Add as AddIcon, Info as InfoIcon, Autocomplete } from '@vitessce/styles';
 import { VariableSizeList } from 'react-window';
 import { useStyles } from './styles.js';
 const LIST_ROW_HEIGHT = 48;
@@ -14,12 +12,15 @@ const OuterElementType = React.forwardRef((props, ref) => {
 });
 function ListRow(props) {
     const { data, index, style } = props;
-    return React.cloneElement(data[index], {
-        style: {
-            ...style,
-            top: style.top + 8,
-        },
-    });
+    const dataSet = data[index];
+    const inlineStyle = {
+        ...style,
+        top: style.top + 8,
+    };
+    // This array is created by the renderOption function in the Autocomplete component.
+    const [props0, option] = dataSet;
+    const { key, ...optionProps } = props0;
+    return (_jsxs(Typography, { component: "li", ...optionProps, noWrap: true, style: inlineStyle, children: [option.label, " (", option.nodeType, ")"] }, key));
 }
 function useResetCache(itemCount) {
     const ref = useRef(null);
@@ -39,7 +40,7 @@ const ListboxComponent = React.forwardRef((props, ref) => {
 });
 export function SelectAgnostic(props) {
     const { autocompleteNode, currentModalityAgnosticSelection, setCurrentModalityAgnosticSelection, } = props;
-    const classes = useStyles();
+    const { classes } = useStyles();
     const [selectedItem, setSelectedItem] = React.useState(null);
     const [potentialItems, setPotentialItems] = React.useState([]);
     const handleChange = async (event) => {
@@ -59,8 +60,12 @@ export function SelectAgnostic(props) {
             ]);
         }
     }
-    return (_jsxs(_Fragment, { children: [_jsx(Grid, { item: true, container: true, xs: 12, children: _jsx(Typography, { variant: "h6", children: "Search by gene, protein, pathway (by term name), or cell type:" }) }), _jsxs(Grid, { item: true, container: true, xs: 12, children: [_jsx(Grid, { item: true, xs: 4, children: _jsx(Autocomplete, { options: potentialItems, autoComplete: true, includeInputInList: true, onInputChange: handleChange, onChange: (event, item) => setSelectedItem(item), classes: { input: classes.searchInput }, renderInput: params => (_jsx(TextField, { label: "Search", variant: "outlined", onChange: handleChange, ...params })), ListboxComponent: ListboxComponent, getOptionLabel: option => option.label, renderOption: option => (_jsxs(Typography, { noWrap: true, children: [option.label, " (", option.nodeType, ")"] })) }) }), _jsx(Grid, { item: true, xs: 8, style: {
+    return (_jsxs(_Fragment, { children: [_jsx(Grid, { container: true, size: 12, children: _jsx(Typography, { variant: "h6", children: "Search by gene, protein, pathway (by term name), or cell type:" }) }), _jsxs(Grid, { container: true, size: 12, children: [_jsx(Grid, { size: 4, children: _jsx(Autocomplete, { options: potentialItems, autoComplete: true, includeInputInList: true, onInputChange: handleChange, onChange: (event, item) => setSelectedItem(item), classes: { input: classes.searchInput }, renderInput: params => (_jsx(TextField, { label: "Search", variant: "outlined", onChange: handleChange, ...params })), getOptionLabel: option => option.label, renderOption: (props0, option, state) => ([props0, option, state.index]), slotProps: {
+                                listbox: {
+                                    component: ListboxComponent,
+                                },
+                            } }) }), _jsx(Grid, { size: 8, style: {
                             border: selectedItem ? '1px solid gray' : '1px solid transparent',
                             borderRadius: '4px',
-                        }, children: selectedItem ? (_jsxs(_Fragment, { children: [_jsxs(Grid, { container: true, item: true, xs: 12, children: [_jsx(Grid, { item: true, xs: 9, children: _jsx(Typography, { variant: "h4", title: selectedItem.term, children: selectedItem.label }) }), _jsx(Grid, { item: true, xs: 3, style: { position: 'relative' }, children: _jsx(Button, { className: classes.selectButton, variant: "contained", startIcon: _jsx(AddIcon, {}), onClick: confirmSelectedItem, children: "Select" }) })] }), _jsxs(Grid, { container: true, item: true, xs: 12, children: [_jsx(InfoIcon, {}), _jsxs(Typography, { variant: "h6", children: ["About this ", selectedItem.nodeType] })] }), _jsx(Grid, { container: true, item: true, xs: 12, children: _jsx("iframe", { title: `Embedded metadata page for ontology term ${selectedItem.term}`, src: `https://identifiers.org/${selectedItem.term}`, width: "100%", height: "500", style: { border: 0 } }) }, selectedItem.term)] })) : null })] })] }));
+                        }, children: selectedItem ? (_jsxs(_Fragment, { children: [_jsxs(Grid, { container: true, size: 12, children: [_jsx(Grid, { size: 9, children: _jsx(Typography, { variant: "h4", title: selectedItem.term, children: selectedItem.label }) }), _jsx(Grid, { size: 3, sx: { position: 'relative' }, children: _jsx(Button, { className: classes.selectButton, variant: "contained", startIcon: _jsx(AddIcon, {}), onClick: confirmSelectedItem, children: "Select" }) })] }), _jsxs(Grid, { container: true, size: 12, children: [_jsx(InfoIcon, {}), _jsxs(Typography, { variant: "h6", children: ["About this ", selectedItem.nodeType] })] }), _jsx(Grid, { container: true, size: 12, children: _jsx("iframe", { title: `Embedded metadata page for ontology term ${selectedItem.term}`, src: `https://identifiers.org/${selectedItem.term}`, width: "100%", height: "500", style: { border: 0 } }) }, selectedItem.term)] })) : null })] })] }));
 }

package/dist-tsc/select-specific.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select-specific.d.ts","sourceRoot":"","sources":["../src/select-specific.js"],"names":[],"mappings":"AAuBA,wDAuFC"}
+{"version":3,"file":"select-specific.d.ts","sourceRoot":"","sources":["../src/select-specific.js"],"names":[],"mappings":"AA+BA,wDA0FC"}

package/dist-tsc/select-specific.js

@@ -1,8 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useMemo } from 'react';
 import { useQueries } from '@tanstack/react-query';
-import { Grid, FormHelperText, Typography, Select, FormControl } from '@material-ui/core';
-import { DataGrid } from '@mui/x-data-grid';
+import { Grid, FormHelperText, Typography, NativeSelect, FormControl, DataGrid } from '@vitessce/styles';
 import { useStyles } from './styles.js';
 const columns = [
     {
@@ -18,9 +17,17 @@ const columns = [
         editable: false,
     },
 ];
+const initialState = {
+    pagination: {
+        paginationModel: {
+            pageSize: 10,
+        },
+    },
+};
+const pageSizeOptions = [10];
 export function SelectSpecific(props) {
     const { currentModalityAgnosticSelection, currentModalitySpecificSelection, setCurrentModalitySpecificSelection, getEdges, } = props;
-    const classes = useStyles();
+    const { classes } = useStyles();
     const queries = useQueries({
         queries: currentModalityAgnosticSelection?.map(item => ({
             queryKey: [item.nodeType, item.kgId],
@@ -47,15 +54,18 @@ export function SelectSpecific(props) {
     })), [currentModalityAgnosticSelection, dataStatus]);
     // Derive the set of selected row ids from the
     // currentModalitySpecificSelection.
-    const rowSelectionModel = useMemo(() => currentModalitySpecificSelection?.map(d => d.kgId) || [], [rows, currentModalitySpecificSelection]);
+    const rowSelectionModel = useMemo(() => ({
+        ids: new Set(currentModalitySpecificSelection?.map(d => d.kgId) || []),
+        type: 'include',
+    }), [rows, currentModalitySpecificSelection]);
     function handleSelection(newRowSelectionModel) {
-        const newSelection = newRowSelectionModel
+        const newSelection = Array.from(newRowSelectionModel.ids)
             .map(kgId => data.find(d => d.target.kgId === kgId)?.target)
             .filter(Boolean);
         setCurrentModalitySpecificSelection(newSelection);
     }
-    return (_jsxs(_Fragment, { children: [_jsx(Grid, { item: true, xs: 6, children: _jsx(Typography, { variant: "h6", children: "Select a feature type:" }) }), _jsx(Grid, { item: true, container: true, xs: 6, children: _jsx(Grid, { item: true, children: _jsxs(FormControl, { fullWidth: true, children: [_jsx(Select, { native: true, defaultValue: "gene", classes: { select: classes.selectInput }, inputProps: {
+    return (_jsxs(_Fragment, { children: [_jsx(Grid, { size: 6, children: _jsx(Typography, { variant: "h6", children: "Select a feature type:" }) }), _jsx(Grid, { container: true, size: 6, children: _jsx(Grid, { children: _jsxs(FormControl, { fullWidth: true, children: [_jsx(NativeSelect, { defaultValue: "gene", classes: { select: classes.selectInput }, inputProps: {
                                     name: 'age',
                                     id: 'uncontrolled-native',
-                                }, children: _jsx("option", { value: "gene", children: "Gene (RNA-seq)" }) }), _jsx(FormHelperText, { children: "Feature type (experimental modality)" })] }) }) }), _jsx(Grid, { item: true, container: true, xs: 12, style: { height: '450px' }, children: _jsx(DataGrid, { rows: rows, columns: columns, pageSize: 10, checkboxSelection: true, onSelectionModelChange: handleSelection, rowSelectionModel: rowSelectionModel }) })] }));
+                                }, children: _jsx("option", { value: "gene", children: "Gene (RNA-seq)" }) }), _jsx(FormHelperText, { children: "Feature type (experimental modality)" })] }) }) }), _jsx(Grid, { container: true, size: 12, sx: { height: '450px' }, children: _jsx(DataGrid, { rows: rows, columns: columns, initialState: initialState, pageSizeOptions: pageSizeOptions, checkboxSelection: true, onRowSelectionModelChange: handleSelection, rowSelectionModel: rowSelectionModel }) })] }));
 }

package/dist-tsc/select-stratification.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import { Grid, RadioGroup, FormControl, FormLabel, Radio, FormControlLabel, Typography } from '@material-ui/core';
+import { Grid, RadioGroup, FormControl, FormLabel, Radio, FormControlLabel, Typography } from '@vitessce/styles';
 export function SelectStratification(props) {
     const { stratifications, currentStratificationSelection: currentStratificationSelectionProp, setCurrentStratificationSelection: setCurrentStratificationSelectionProp, } = props;
     // Convert back and forth from the special value '__all__' to null.
@@ -14,5 +14,5 @@ export function SelectStratification(props) {
     const structuralRegionOptions = stratifications?.filter(s => s.stratificationType === 'structural-region');
     const hasSampleSetOptions = sampleSetOptions && sampleSetOptions.length > 0;
     const hasStructuralRegionOptions = structuralRegionOptions && structuralRegionOptions.length > 0;
-    return (_jsxs(Grid, { item: true, xs: 12, children: [_jsx(Typography, { variant: "h6", children: "Select a stratification option:" }), _jsx(FormControl, { children: _jsxs(RadioGroup, { "aria-labelledby": "demo-radio-buttons-group-label", value: currentStratificationSelection, onChange: setCurrentStratificationSelection, name: "radio-buttons-group", children: [_jsx(FormControlLabel, { value: "__all__", control: _jsx(Radio, {}), label: "No stratification" }), hasSampleSetOptions ? (_jsxs(_Fragment, { children: [_jsx(FormLabel, { children: "By participant group (clinical):" }), sampleSetOptions.map(s => (_jsx(FormControlLabel, { value: s.stratificationId, control: _jsx(Radio, {}), label: s.name }, s.name)))] })) : null, hasStructuralRegionOptions ? (_jsxs(_Fragment, { children: [_jsx(FormLabel, { children: "By segmentation-defined spatial region (structural):" }), structuralRegionOptions.map(s => (_jsx(FormControlLabel, { value: s.stratificationId, control: _jsx(Radio, {}), label: s.name }, s.name)))] })) : null] }) })] }));
+    return (_jsxs(Grid, { size: 12, children: [_jsx(Typography, { variant: "h6", children: "Select a stratification option:" }), _jsx(FormControl, { children: _jsxs(RadioGroup, { "aria-labelledby": "demo-radio-buttons-group-label", value: currentStratificationSelection, onChange: setCurrentStratificationSelection, name: "radio-buttons-group", children: [_jsx(FormControlLabel, { value: "__all__", control: _jsx(Radio, {}), label: "No stratification" }), hasSampleSetOptions ? (_jsxs(_Fragment, { children: [_jsx(FormLabel, { children: "By participant group (clinical):" }), sampleSetOptions.map(s => (_jsx(FormControlLabel, { value: s.stratificationId, control: _jsx(Radio, {}), label: s.name }, s.name)))] })) : null, hasStructuralRegionOptions ? (_jsxs(_Fragment, { children: [_jsx(FormLabel, { children: "By segmentation-defined spatial region (structural):" }), structuralRegionOptions.map(s => (_jsx(FormControlLabel, { value: s.stratificationId, control: _jsx(Radio, {}), label: s.name }, s.name)))] })) : null] }) })] }));
 }

package/dist-tsc/stepper-confirmatory.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect } from 'react';
-import { Stepper, Step, StepLabel, Button, Grid, Box, Typography } from '@material-ui/core';
+import { Stepper, Step, StepLabel, Button, Grid, Box, Typography } from '@vitessce/styles';
 import { ConfirmatoryCart } from './cart.js';
 import { SelectAgnostic } from './select-agnostic.js';
 import { SelectSpecific } from './select-specific.js';
@@ -13,7 +13,7 @@ const steps = [
 ];
 export function ConfirmatoryStepper(props) {
     const { autocompleteNode, currentModalityAgnosticSelection, setCurrentModalityAgnosticSelection, currentModalitySpecificSelection, setCurrentModalitySpecificSelection, currentStratificationSelection, setCurrentStratificationSelection, getEdges, stratifications, onFinish, } = props;
-    const classes = useStyles();
+    const { classes } = useStyles();
     const [activeStep, setActiveStep] = React.useState(0);
     const [skipped, setSkipped] = React.useState(new Set());
     const isStepOptional = step => step === 2;
@@ -51,7 +51,7 @@ export function ConfirmatoryStepper(props) {
             onFinish();
         }
     }, [activeStep, steps]);
-    return (_jsxs(Grid, { item: true, container: true, xs: 12, children: [_jsx(Grid, { item: true, container: true, xs: 12, children: _jsx(Box, { className: classes.fullWidthBox, children: _jsx(Stepper, { activeStep: activeStep, children: steps.map((label, index) => {
+    return (_jsxs(Grid, { container: true, size: 12, children: [_jsx(Grid, { container: true, size: 12, children: _jsx(Box, { className: classes.fullWidthBox, children: _jsx(Stepper, { activeStep: activeStep, children: steps.map((label, index) => {
                             const stepProps = {};
                             const labelProps = {};
                             if (isStepOptional(index)) {
@@ -61,5 +61,5 @@ export function ConfirmatoryStepper(props) {
                                 stepProps.completed = false;
                             }
                             return (_jsx(Step, { ...stepProps, children: _jsx(StepLabel, { ...labelProps, children: label }) }, label));
-                        }) }) }) }), _jsxs(Grid, { item: true, container: true, xs: 12, style: { marginTop: '20px' }, alignItems: "flex-start", children: [_jsx(Grid, { item: true, container: true, xs: 8, children: activeStep === steps.length ? (_jsx(_Fragment, { children: _jsx(Typography, { style: { marginTop: '20px', marginBottom: '10px' }, children: "All steps completed - you're finished" }) })) : (_jsxs(_Fragment, { children: [activeStep === 0 ? (_jsx(SelectAgnostic, { autocompleteNode: autocompleteNode, currentModalityAgnosticSelection: currentModalityAgnosticSelection, setCurrentModalityAgnosticSelection: setCurrentModalityAgnosticSelection, currentModalitySpecificSelection: currentModalitySpecificSelection, setCurrentModalitySpecificSelection: setCurrentModalitySpecificSelection, currentStratificationSelection: currentStratificationSelection, setCurrentStratificationSelection: setCurrentStratificationSelection, getEdges: getEdges, stratifications: stratifications })) : null, activeStep === 1 ? (_jsx(SelectSpecific, { autocompleteNode: autocompleteNode, currentModalityAgnosticSelection: currentModalityAgnosticSelection, setCurrentModalityAgnosticSelection: setCurrentModalityAgnosticSelection, currentModalitySpecificSelection: currentModalitySpecificSelection, setCurrentModalitySpecificSelection: setCurrentModalitySpecificSelection, currentStratificationSelection: currentStratificationSelection, setCurrentStratificationSelection: setCurrentStratificationSelection, getEdges: getEdges, stratifications: stratifications })) : null, activeStep === 2 ? (_jsx(SelectStratification, { autocompleteNode: autocompleteNode, currentModalityAgnosticSelection: currentModalityAgnosticSelection, setCurrentModalityAgnosticSelection: setCurrentModalityAgnosticSelection, currentModalitySpecificSelection: currentModalitySpecificSelection, setCurrentModalitySpecificSelection: setCurrentModalitySpecificSelection, currentStratificationSelection: currentStratificationSelection, setCurrentStratificationSelection: setCurrentStratificationSelection, getEdges: getEdges, stratifications: stratifications })) : null] })) }), _jsx(Grid, { item: true, container: true, xs: 4, children: _jsx(ConfirmatoryCart, { currentModalityAgnosticSelection: currentModalityAgnosticSelection, setCurrentModalityAgnosticSelection: setCurrentModalityAgnosticSelection, currentModalitySpecificSelection: currentModalitySpecificSelection, setCurrentModalitySpecificSelection: setCurrentModalitySpecificSelection, currentStratificationSelection: currentStratificationSelection, setCurrentStratificationSelection: setCurrentStratificationSelection, stratifications: stratifications }) }), _jsx(Box, { className: classes.fullWidthBox, children: activeStep === steps.length ? (_jsx(_Fragment, { children: _jsxs(Box, { style: { display: 'flex', flexDirection: 'row', paddingTop: '20px' }, children: [_jsx(Box, { style: { flex: '1 1 auto' } }), _jsx(Button, { onClick: handleReset, children: "Reset" })] }) })) : (_jsxs(Box, { style: { display: 'flex', flexDirection: 'row', paddingTop: '20px' }, children: [_jsx(Button, { color: "inherit", disabled: activeStep === 0, onClick: handleBack, style: { mr: 1 }, children: "Back" }), _jsx(Box, { style: { flex: '1 1 auto' } }), isStepOptional(activeStep) && (_jsx(Button, { color: "inherit", onClick: handleSkip, style: { marginRight: '10px' }, children: "Skip" })), _jsx(Button, { onClick: handleNext, children: activeStep === steps.length - 1 ? 'Finish' : 'Next' })] })) })] })] }));
+                        }) }) }) }), _jsxs(Grid, { container: true, size: 12, sx: { marginTop: '20px' }, alignItems: "flex-start", children: [_jsx(Grid, { container: true, size: 8, children: activeStep === steps.length ? (_jsx(_Fragment, { children: _jsx(Typography, { style: { marginTop: '20px', marginBottom: '10px' }, children: "All steps completed - you're finished" }) })) : (_jsxs(_Fragment, { children: [activeStep === 0 ? (_jsx(SelectAgnostic, { autocompleteNode: autocompleteNode, currentModalityAgnosticSelection: currentModalityAgnosticSelection, setCurrentModalityAgnosticSelection: setCurrentModalityAgnosticSelection, currentModalitySpecificSelection: currentModalitySpecificSelection, setCurrentModalitySpecificSelection: setCurrentModalitySpecificSelection, currentStratificationSelection: currentStratificationSelection, setCurrentStratificationSelection: setCurrentStratificationSelection, getEdges: getEdges, stratifications: stratifications })) : null, activeStep === 1 ? (_jsx(SelectSpecific, { autocompleteNode: autocompleteNode, currentModalityAgnosticSelection: currentModalityAgnosticSelection, setCurrentModalityAgnosticSelection: setCurrentModalityAgnosticSelection, currentModalitySpecificSelection: currentModalitySpecificSelection, setCurrentModalitySpecificSelection: setCurrentModalitySpecificSelection, currentStratificationSelection: currentStratificationSelection, setCurrentStratificationSelection: setCurrentStratificationSelection, getEdges: getEdges, stratifications: stratifications })) : null, activeStep === 2 ? (_jsx(SelectStratification, { autocompleteNode: autocompleteNode, currentModalityAgnosticSelection: currentModalityAgnosticSelection, setCurrentModalityAgnosticSelection: setCurrentModalityAgnosticSelection, currentModalitySpecificSelection: currentModalitySpecificSelection, setCurrentModalitySpecificSelection: setCurrentModalitySpecificSelection, currentStratificationSelection: currentStratificationSelection, setCurrentStratificationSelection: setCurrentStratificationSelection, getEdges: getEdges, stratifications: stratifications })) : null] })) }), _jsx(Grid, { container: true, size: 4, children: _jsx(ConfirmatoryCart, { currentModalityAgnosticSelection: currentModalityAgnosticSelection, setCurrentModalityAgnosticSelection: setCurrentModalityAgnosticSelection, currentModalitySpecificSelection: currentModalitySpecificSelection, setCurrentModalitySpecificSelection: setCurrentModalitySpecificSelection, currentStratificationSelection: currentStratificationSelection, setCurrentStratificationSelection: setCurrentStratificationSelection, stratifications: stratifications }) }), _jsx(Box, { className: classes.fullWidthBox, children: activeStep === steps.length ? (_jsx(_Fragment, { children: _jsxs(Box, { style: { display: 'flex', flexDirection: 'row', paddingTop: '20px' }, children: [_jsx(Box, { style: { flex: '1 1 auto' } }), _jsx(Button, { onClick: handleReset, children: "Reset" })] }) })) : (_jsxs(Box, { style: { display: 'flex', flexDirection: 'row', paddingTop: '20px' }, children: [_jsx(Button, { color: "inherit", disabled: activeStep === 0, onClick: handleBack, style: { mr: 1 }, children: "Back" }), _jsx(Box, { style: { flex: '1 1 auto' } }), isStepOptional(activeStep) && (_jsx(Button, { color: "inherit", onClick: handleSkip, style: { marginRight: '10px' }, children: "Skip" })), _jsx(Button, { onClick: handleNext, children: activeStep === steps.length - 1 ? 'Finish' : 'Next' })] })) })] })] }));
 }

package/dist-tsc/stepper-exploratory.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect } from 'react';
-import { Stepper, Step, StepLabel, Button, Grid, Box, Typography } from '@material-ui/core';
+import { Stepper, Step, StepLabel, Button, Grid, Box, Typography } from '@vitessce/styles';
 import { ConfirmatoryCart } from './cart.js';
 import { SelectStratification } from './select-stratification.js';
 import { useStyles } from './styles.js';
@@ -9,7 +9,7 @@ const steps = [
 ];
 export function ExploratoryStepper(props) {
     const { autocompleteNode, currentModalityAgnosticSelection, setCurrentModalityAgnosticSelection, currentModalitySpecificSelection, setCurrentModalitySpecificSelection, currentStratificationSelection, setCurrentStratificationSelection, getEdges, stratifications, onFinish, } = props;
-    const classes = useStyles();
+    const { classes } = useStyles();
     const [activeStep, setActiveStep] = React.useState(0);
     const [skipped, setSkipped] = React.useState(new Set());
     const isStepOptional = step => step === 2;
@@ -47,7 +47,7 @@ export function ExploratoryStepper(props) {
             onFinish();
         }
     }, [activeStep, steps]);
-    return (_jsxs(Grid, { item: true, container: true, xs: 12, children: [_jsx(Grid, { item: true, container: true, xs: 12, children: _jsx(Box, { className: classes.fullWidthBox, children: _jsx(Stepper, { activeStep: activeStep, children: steps.map((label, index) => {
+    return (_jsxs(Grid, { container: true, size: 12, children: [_jsx(Grid, { container: true, size: 12, children: _jsx(Box, { className: classes.fullWidthBox, children: _jsx(Stepper, { activeStep: activeStep, children: steps.map((label, index) => {
                             const stepProps = {};
                             const labelProps = {};
                             if (isStepOptional(index)) {
@@ -57,5 +57,5 @@ export function ExploratoryStepper(props) {
                                 stepProps.completed = false;
                             }
                             return (_jsx(Step, { ...stepProps, children: _jsx(StepLabel, { ...labelProps, children: label }) }, label));
-                        }) }) }) }), _jsxs(Grid, { item: true, container: true, xs: 12, style: { marginTop: '20px' }, alignItems: "flex-start", children: [_jsx(Grid, { item: true, container: true, xs: 8, children: activeStep === steps.length ? (_jsx(_Fragment, { children: _jsx(Typography, { style: { marginTop: '20px', marginBottom: '10px' }, children: "All steps completed - you're finished" }) })) : (_jsx(_Fragment, { children: activeStep === 0 ? (_jsx(SelectStratification, { autocompleteNode: autocompleteNode, currentModalityAgnosticSelection: currentModalityAgnosticSelection, setCurrentModalityAgnosticSelection: setCurrentModalityAgnosticSelection, currentModalitySpecificSelection: currentModalitySpecificSelection, setCurrentModalitySpecificSelection: setCurrentModalitySpecificSelection, currentStratificationSelection: currentStratificationSelection, setCurrentStratificationSelection: setCurrentStratificationSelection, getEdges: getEdges, stratifications: stratifications })) : null })) }), _jsx(Grid, { item: true, container: true, xs: 4, children: _jsx(ConfirmatoryCart, { currentModalityAgnosticSelection: currentModalityAgnosticSelection, setCurrentModalityAgnosticSelection: setCurrentModalityAgnosticSelection, currentModalitySpecificSelection: currentModalitySpecificSelection, setCurrentModalitySpecificSelection: setCurrentModalitySpecificSelection, currentStratificationSelection: currentStratificationSelection, setCurrentStratificationSelection: setCurrentStratificationSelection, stratifications: stratifications }) }), _jsx(Box, { className: classes.fullWidthBox, children: activeStep === steps.length ? (_jsx(_Fragment, { children: _jsxs(Box, { style: { display: 'flex', flexDirection: 'row', paddingTop: '20px' }, children: [_jsx(Box, { style: { flex: '1 1 auto' } }), _jsx(Button, { onClick: handleReset, children: "Reset" })] }) })) : (_jsxs(Box, { style: { display: 'flex', flexDirection: 'row', paddingTop: '20px' }, children: [_jsx(Button, { color: "inherit", disabled: activeStep === 0, onClick: handleBack, style: { mr: 1 }, children: "Back" }), _jsx(Box, { style: { flex: '1 1 auto' } }), isStepOptional(activeStep) && (_jsx(Button, { color: "inherit", onClick: handleSkip, style: { marginRight: '10px' }, children: "Skip" })), _jsx(Button, { onClick: handleNext, children: activeStep === steps.length - 1 ? 'Finish' : 'Next' })] })) })] })] }));
+                        }) }) }) }), _jsxs(Grid, { container: true, size: 12, sx: { marginTop: '20px' }, alignItems: "flex-start", children: [_jsx(Grid, { container: true, size: 8, children: activeStep === steps.length ? (_jsx(_Fragment, { children: _jsx(Typography, { style: { marginTop: '20px', marginBottom: '10px' }, children: "All steps completed - you're finished" }) })) : (_jsx(_Fragment, { children: activeStep === 0 ? (_jsx(SelectStratification, { autocompleteNode: autocompleteNode, currentModalityAgnosticSelection: currentModalityAgnosticSelection, setCurrentModalityAgnosticSelection: setCurrentModalityAgnosticSelection, currentModalitySpecificSelection: currentModalitySpecificSelection, setCurrentModalitySpecificSelection: setCurrentModalitySpecificSelection, currentStratificationSelection: currentStratificationSelection, setCurrentStratificationSelection: setCurrentStratificationSelection, getEdges: getEdges, stratifications: stratifications })) : null })) }), _jsx(Grid, { container: true, size: 4, children: _jsx(ConfirmatoryCart, { currentModalityAgnosticSelection: currentModalityAgnosticSelection, setCurrentModalityAgnosticSelection: setCurrentModalityAgnosticSelection, currentModalitySpecificSelection: currentModalitySpecificSelection, setCurrentModalitySpecificSelection: setCurrentModalitySpecificSelection, currentStratificationSelection: currentStratificationSelection, setCurrentStratificationSelection: setCurrentStratificationSelection, stratifications: stratifications }) }), _jsx(Box, { className: classes.fullWidthBox, children: activeStep === steps.length ? (_jsx(_Fragment, { children: _jsxs(Box, { style: { display: 'flex', flexDirection: 'row', paddingTop: '20px' }, children: [_jsx(Box, { style: { flex: '1 1 auto' } }), _jsx(Button, { onClick: handleReset, children: "Reset" })] }) })) : (_jsxs(Box, { style: { display: 'flex', flexDirection: 'row', paddingTop: '20px' }, children: [_jsx(Button, { color: "inherit", disabled: activeStep === 0, onClick: handleBack, style: { mr: 1 }, children: "Back" }), _jsx(Box, { style: { flex: '1 1 auto' } }), isStepOptional(activeStep) && (_jsx(Button, { color: "inherit", onClick: handleSkip, style: { marginRight: '10px' }, children: "Skip" })), _jsx(Button, { onClick: handleNext, children: activeStep === steps.length - 1 ? 'Finish' : 'Next' })] })) })] })] }));
 }

package/dist-tsc/styles.d.ts

@@ -1,2 +1,10 @@
-export const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"header" | "fullWidthBox" | "selectButton" | "accordion" | "accordionDetails" | "cartUl" | "selectInput" | "searchInput">;
+export const useStyles: (params: void, muiStyleOverridesParams?: {
+    props: Record<string, unknown>;
+    ownerState?: Record<string, unknown> | undefined;
+} | undefined) => {
+    classes: Record<"header" | "fullWidthBox" | "selectButton" | "accordion" | "accordionDetails" | "cartUl" | "selectInput" | "searchInput", 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,8NA8BI"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../src/styles.js"],"names":[],"mappings":"AAEA;;cA+B+J,CAAC;;;kBAAoH,eAAsB;gBAAyB,WAAU;eAAsB,WAAU;EADzW"}

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()(() => ({
     header: {
         marginTop: '10px',
         marginBottom: '10px',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitessce/biomarker-select",
-  "version": "3.5.11",
+  "version": "3.6.0",
   "author": "Gehlenborg Lab",
   "homepage": "http://vitessce.io",
   "repository": {
@@ -16,28 +16,26 @@
     "dist-tsc"
   ],
   "dependencies": {
-    "@material-ui/core": "~4.12.3",
-    "@material-ui/icons": "~4.11.2",
-    "@material-ui/lab": "^4.0.0-alpha.61",
-    "@mui/x-data-grid": "^4.0.2",
     "@tanstack/react-query": "^4.29.12",
     "react-window": "^1.8.10",
     "fuse.js": "^7.0.0",
     "d3-dsv": "^1.1.1",
     "clsx": "^1.1.1",
-    "@vitessce/constants-internal": "3.5.11",
-    "@vitessce/vit-s": "3.5.11",
-    "@vitessce/types": "3.5.11"
+    "@vitessce/styles": "3.6.0",
+    "@vitessce/constants-internal": "3.6.0",
+    "@vitessce/vit-s": "3.6.0",
+    "@vitessce/types": "3.6.0"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^13.3.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
     "react": "^18.0.0",
-    "vite": "^4.3.0",
-    "vitest": "^0.32.2"
+    "react-dom": "^18.0.0",
+    "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/ComparativeHeadingSubscriber.js

@@ -3,9 +3,9 @@ import {
   useCoordination,
 } from '@vitessce/vit-s';
 import { ViewType, COMPONENT_COORDINATION_TYPES } from '@vitessce/constants-internal';
-import { makeStyles } from '@material-ui/core';
+import { makeStyles } from '@vitessce/styles';
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles()(theme => ({
   buttonContainer: {
     position: 'absolute',
     right: 0,
@@ -52,7 +52,7 @@ export function ComparativeHeadingSubscriber(props) {
     coordinationScopes,
   );
 
-  const classes = useStyles();
+  const { classes } = useStyles();
 
   const swapSampleSets = useCallback(() => {
     if (sampleSetSelection?.length === 2) {

package/src/SampleSetPairManagerSubscriber.js

@@ -1,7 +1,7 @@
 import React, { useMemo, useCallback } from 'react';
 import { isEqual } from 'lodash-es';
 import clsx from 'clsx';
-import { makeStyles } from '@material-ui/core';
+import { makeStyles } from '@vitessce/styles';
 import {
   TitleInfo,
   useReady,
@@ -13,7 +13,7 @@ import {
 } from '@vitessce/vit-s';
 import { ViewType, DataType, COMPONENT_COORDINATION_TYPES, ViewHelpMapping } from '@vitessce/constants-internal';
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles()(() => ({
   selectedPair: {
     fontWeight: 'bold',
   },
@@ -37,7 +37,7 @@ export function SampleSetPairManagerSubscriber(props) {
     helpText = ViewHelpMapping.SAMPLE_SET_PAIR_MANAGER,
   } = props;
 
-  const classes = useStyles();
+  const { classes } = useStyles();
   const loaders = useLoaders();
 
   // Get "props" from the coordination space.

package/src/cart.js

@@ -1,6 +1,5 @@
 import React from 'react';
-import { Accordion, AccordionDetails, AccordionSummary, Typography } from '@material-ui/core';
-import { ExpandMore as ExpandMoreIcon } from '@material-ui/icons';
+import { Accordion, AccordionDetails, AccordionSummary, Typography, ExpandMore as ExpandMoreIcon } from '@vitessce/styles';
 import { useStyles } from './styles.js';
 
 
@@ -16,7 +15,7 @@ export function ConfirmatoryCart(props) {
     // eslint-disable-next-line no-unused-vars
     setCurrentStratificationSelection,
   } = props;
-  const classes = useStyles();
+  const { classes } = useStyles();
   const [expandedAccordions, setExpandedAccordions] = React.useState([
     'agnostic', 'specific', 'stratification',
   ]);

package/src/scmd-ui.js

@@ -1,6 +1,6 @@
 /* eslint-disable no-unused-vars */
 import React, { useState } from 'react';
-import { Button, ButtonGroup, Grid, Tooltip } from '@material-ui/core';
+import { Button, ButtonGroup, Grid, Tooltip } from '@vitessce/styles';
 import { ConfirmatoryStepper } from './stepper-confirmatory.js';
 import { ExploratoryStepper } from './stepper-exploratory.js';
 import { useStyles } from './styles.js';
@@ -25,7 +25,7 @@ export function ScmdUi(props) {
     stratifications,
     onFinish,
   } = props;
-  const classes = useStyles();
+  const { classes } = useStyles();
 
   const mode = modeProp || 'confirmatory';
   const step = mode === 'confirmatory' ? (stepProp || 'select-biomarkers') : (stepProp || 'define-stratification');
@@ -34,11 +34,11 @@ export function ScmdUi(props) {
 
   const isConfirmatoryMode = mode === 'confirmatory';
   return (
-    <Grid container style={{ border: '0px solid red' }}>
+    <Grid container sx={{ border: '0px solid red' }}>
       {/* Header */}
-      <Grid item container xs={12} className={classes.header}>
-        <Grid item xs={8} />
-        <Grid item container xs={4} justifyContent="flex-end">
+      <Grid container size={12} className={classes.header}>
+        <Grid size={8} />
+        <Grid container size={4} justifyContent="flex-end">
           <ButtonGroup variant="outlined" size="small" color="secondary" aria-label="Toggle between confirmatory and exploratory modes">
             <Tooltip arrow title="Start from biomarker(s) of interest">
               <Button variant={isConfirmatoryMode ? 'contained' : 'outlined'} onClick={() => setMode('confirmatory')}>Confirmatory (Hypothesis-driven)</Button>