@vitessce/biomarker-select 3.5.11 → 3.6.0

package/src/select-agnostic.js

@@ -1,7 +1,5 @@
 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';
 
@@ -19,13 +17,21 @@ const OuterElementType = React.forwardRef((props, ref) => {
 
 function ListRow(props) {
   const { data, index, style } = props;
+  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 React.cloneElement(data[index], {
-    style: {
-      ...style,
-      top: style.top + 8,
-    },
-  });
+  return (
+    <Typography key={key} component="li" {...optionProps} noWrap style={inlineStyle}>
+      {option.label} ({option.nodeType})
+    </Typography>
+  );
 }
 
 function useResetCache(itemCount) {
@@ -72,7 +78,7 @@ export function SelectAgnostic(props) {
     currentModalityAgnosticSelection,
     setCurrentModalityAgnosticSelection,
   } = props;
-  const classes = useStyles();
+  const { classes } = useStyles();
 
   const [selectedItem, setSelectedItem] = React.useState(null);
 
@@ -99,13 +105,13 @@ export function SelectAgnostic(props) {
   }
   return (
     <>
-      <Grid item container xs={12}>
+      <Grid container size={12}>
         <Typography variant="h6">
           Search by gene, protein, pathway (by term name), or cell type:
         </Typography>
       </Grid>
-      <Grid item container xs={12}>
-        <Grid item xs={4}>
+      <Grid container size={12}>
+        <Grid size={4}>
           <Autocomplete
             options={potentialItems}
             autoComplete
@@ -116,16 +122,19 @@ export function SelectAgnostic(props) {
             renderInput={params => (
               <TextField label="Search" variant="outlined" onChange={handleChange} {...params} />
             )}
-            ListboxComponent={ListboxComponent}
             getOptionLabel={option => option.label}
-            renderOption={option => (
-              <Typography noWrap>{option.label} ({option.nodeType})</Typography>
+            renderOption={(props0, option, state) => (
+              [props0, option, state.index]
             )}
+            slotProps={{
+              listbox: {
+                component: ListboxComponent,
+              },
+            }}
           />
         </Grid>
         <Grid
-          item
-          xs={8}
+          size={8}
           style={{
             border: selectedItem ? '1px solid gray' : '1px solid transparent',
             borderRadius: '4px',
@@ -133,13 +142,13 @@ export function SelectAgnostic(props) {
         >
           {selectedItem ? (
             <>
-              <Grid container item xs={12}>
-                <Grid item xs={9}>
+              <Grid container size={12}>
+                <Grid size={9}>
                   <Typography variant="h4" title={selectedItem.term}>
                     {selectedItem.label}
                   </Typography>
                 </Grid>
-                <Grid item xs={3} style={{ position: 'relative' }}>
+                <Grid size={3} sx={{ position: 'relative' }}>
                   <Button
                     className={classes.selectButton}
                     variant="contained"
@@ -150,11 +159,11 @@ export function SelectAgnostic(props) {
                   </Button>
                 </Grid>
               </Grid>
-              <Grid container item xs={12}>
+              <Grid container size={12}>
                 <InfoIcon />
                 <Typography variant="h6">About this {selectedItem.nodeType}</Typography>
               </Grid>
-              <Grid container item xs={12} key={selectedItem.term}>
+              <Grid container size={12} key={selectedItem.term}>
                 <iframe
                   title={`Embedded metadata page for ontology term ${selectedItem.term}`}
                   src={`https://identifiers.org/${selectedItem.term}`}

package/src/select-specific.js

@@ -1,7 +1,6 @@
 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';
 
 
@@ -20,6 +19,15 @@ const columns = [
   },
 ];
 
+const initialState = {
+  pagination: {
+    paginationModel: {
+      pageSize: 10,
+    },
+  },
+};
+const pageSizeOptions = [10];
+
 
 export function SelectSpecific(props) {
   const {
@@ -28,7 +36,7 @@ export function SelectSpecific(props) {
     setCurrentModalitySpecificSelection,
     getEdges,
   } = props;
-  const classes = useStyles();
+  const { classes } = useStyles();
 
   const queries = useQueries({
     queries: currentModalityAgnosticSelection?.map(item => ({
@@ -62,12 +70,15 @@ export function SelectSpecific(props) {
   // Derive the set of selected row ids from the
   // currentModalitySpecificSelection.
   const rowSelectionModel = useMemo(
-    () => currentModalitySpecificSelection?.map(d => d.kgId) || [],
+    () => ({
+      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);
@@ -75,14 +86,13 @@ export function SelectSpecific(props) {
 
   return (
     <>
-      <Grid item xs={6}>
+      <Grid size={6}>
         <Typography variant="h6">Select a feature type:</Typography>
       </Grid>
-      <Grid item container xs={6}>
-        <Grid item>
+      <Grid container size={6}>
+        <Grid>
           <FormControl fullWidth>
-            <Select
-              native
+            <NativeSelect
               defaultValue="gene"
               classes={{ select: classes.selectInput }}
               inputProps={{
@@ -91,18 +101,19 @@ export function SelectSpecific(props) {
               }}
             >
               <option value="gene">Gene (RNA-seq)</option>
-            </Select>
+            </NativeSelect>
             <FormHelperText>Feature type (experimental modality)</FormHelperText>
           </FormControl>
         </Grid>
       </Grid>
-      <Grid item container xs={12} style={{ height: '450px' }}>
+      <Grid container size={12} sx={{ height: '450px' }}>
         <DataGrid
           rows={rows}
           columns={columns}
-          pageSize={10}
+          initialState={initialState}
+          pageSizeOptions={pageSizeOptions}
           checkboxSelection
-          onSelectionModelChange={handleSelection}
+          onRowSelectionModelChange={handleSelection}
           rowSelectionModel={rowSelectionModel}
         />
       </Grid>

package/src/select-stratification.js

@@ -1,5 +1,5 @@
 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) {
@@ -26,7 +26,7 @@ export function SelectStratification(props) {
   const hasStructuralRegionOptions = structuralRegionOptions && structuralRegionOptions.length > 0;
 
   return (
-    <Grid item xs={12}>
+    <Grid size={12}>
       <Typography variant="h6">
         Select a stratification option:
       </Typography>

package/src/stepper-confirmatory.js

@@ -1,5 +1,5 @@
 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';
@@ -27,7 +27,7 @@ export function ConfirmatoryStepper(props) {
     stratifications,
     onFinish,
   } = props;
-  const classes = useStyles();
+  const { classes } = useStyles();
   const [activeStep, setActiveStep] = React.useState(0);
   const [skipped, setSkipped] = React.useState(new Set());
 
@@ -77,8 +77,8 @@ export function ConfirmatoryStepper(props) {
 
 
   return (
-    <Grid item container xs={12}>
-      <Grid item container xs={12}>
+    <Grid container size={12}>
+      <Grid container size={12}>
         <Box className={classes.fullWidthBox}>
           <Stepper activeStep={activeStep}>
             {steps.map((label, index) => {
@@ -101,9 +101,9 @@ export function ConfirmatoryStepper(props) {
           </Stepper>
         </Box>
       </Grid>
-      <Grid item container xs={12} style={{ marginTop: '20px' }} alignItems="flex-start">
+      <Grid container size={12} sx={{ marginTop: '20px' }} alignItems="flex-start">
         {/* Step contents to left of cart */}
-        <Grid item container xs={8}>
+        <Grid container size={8}>
           {activeStep === steps.length ? (
             <>
               <Typography style={{ marginTop: '20px', marginBottom: '10px' }}>
@@ -161,7 +161,7 @@ export function ConfirmatoryStepper(props) {
           )}
         </Grid>
         {/* Cart */}
-        <Grid item container xs={4}>
+        <Grid container size={4}>
           <ConfirmatoryCart
             currentModalityAgnosticSelection={currentModalityAgnosticSelection}
             setCurrentModalityAgnosticSelection={setCurrentModalityAgnosticSelection}

package/src/stepper-exploratory.js

@@ -1,5 +1,5 @@
 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';
@@ -23,7 +23,7 @@ export function ExploratoryStepper(props) {
     stratifications,
     onFinish,
   } = props;
-  const classes = useStyles();
+  const { classes } = useStyles();
   const [activeStep, setActiveStep] = React.useState(0);
   const [skipped, setSkipped] = React.useState(new Set());
 
@@ -73,8 +73,8 @@ export function ExploratoryStepper(props) {
 
 
   return (
-    <Grid item container xs={12}>
-      <Grid item container xs={12}>
+    <Grid container size={12}>
+      <Grid container size={12}>
         <Box className={classes.fullWidthBox}>
           <Stepper activeStep={activeStep}>
             {steps.map((label, index) => {
@@ -97,9 +97,9 @@ export function ExploratoryStepper(props) {
           </Stepper>
         </Box>
       </Grid>
-      <Grid item container xs={12} style={{ marginTop: '20px' }} alignItems="flex-start">
+      <Grid container size={12} sx={{ marginTop: '20px' }} alignItems="flex-start">
         {/* Step contents to left of cart */}
-        <Grid item container xs={8}>
+        <Grid container size={8}>
           {activeStep === steps.length ? (
             <>
               <Typography style={{ marginTop: '20px', marginBottom: '10px' }}>
@@ -127,7 +127,7 @@ export function ExploratoryStepper(props) {
           )}
         </Grid>
         {/* Cart */}
-        <Grid item container xs={4}>
+        <Grid container size={4}>
           <ConfirmatoryCart
             currentModalityAgnosticSelection={currentModalityAgnosticSelection}
             setCurrentModalityAgnosticSelection={setCurrentModalityAgnosticSelection}

package/src/styles.js

@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core';
+import { makeStyles } from '@vitessce/styles';
 
-export const useStyles = makeStyles(() => ({
+export const useStyles = makeStyles()(() => ({
   header: {
     marginTop: '10px',
     marginBottom: '10px',