@jbrowse/plugin-data-management 1.7.11 → 2.0.0

package/src/AddConnectionWidget/components/ConnectionTypeSelect.tsx

@@ -1,8 +1,6 @@
-import IconButton from '@material-ui/core/IconButton'
-import MenuItem from '@material-ui/core/MenuItem'
-import TextField from '@material-ui/core/TextField'
 import React, { useEffect } from 'react'
-import OpenInNewIcon from '@material-ui/icons/OpenInNew'
+import { IconButton, MenuItem, TextField } from '@mui/material'
+import OpenInNewIcon from '@mui/icons-material/OpenInNew'
 
 import ConnectionType from '@jbrowse/core/pluggableElementTypes/ConnectionType'
 

package/src/AddConnectionWidget/components/__snapshots__/AddConnectionWidget.test.js.snap

@@ -2,23 +2,23 @@
 
 exports[`<AddConnectionWidget /> renders 1`] = `
 <div
-  class="makeStyles-root"
+  class="tss-1ohm0fb-root"
 >
   <div
-    class="MuiPaper-root MuiStepper-root MuiStepper-vertical makeStyles-stepper MuiPaper-elevation0"
+    class="MuiStepper-root MuiStepper-vertical tss-1v8zuu8-stepper css-9tmuzo-MuiStepper-root"
   >
     <div
-      class="MuiStep-root MuiStep-vertical"
+      class="MuiStep-root MuiStep-vertical css-8wcvy5-MuiStep-root"
     >
       <span
-        class="MuiStepLabel-root MuiStepLabel-vertical"
+        class="MuiStepLabel-root MuiStepLabel-vertical css-14sza3e-MuiStepLabel-root"
       >
         <span
-          class="MuiStepLabel-iconContainer"
+          class="MuiStepLabel-iconContainer css-vnkopk-MuiStepLabel-iconContainer"
         >
           <svg
             aria-hidden="true"
-            class="MuiSvgIcon-root MuiStepIcon-root MuiStepIcon-active"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiStepIcon-root Mui-active css-1u4zpwo-MuiSvgIcon-root-MuiStepIcon-root"
             focusable="false"
             viewBox="0 0 24 24"
           >
@@ -28,57 +28,64 @@ exports[`<AddConnectionWidget /> renders 1`] = `
               r="12"
             />
             <text
-              class="MuiStepIcon-text"
+              class="MuiStepIcon-text css-117w1su-MuiStepIcon-text"
+              dominant-baseline="central"
               text-anchor="middle"
               x="12"
-              y="16"
+              y="12"
             >
               1
             </text>
           </svg>
         </span>
         <span
-          class="MuiStepLabel-labelContainer"
+          class="MuiStepLabel-labelContainer css-16ubnlw-MuiStepLabel-labelContainer"
         >
           <span
-            class="MuiTypography-root MuiStepLabel-label MuiStepLabel-active MuiTypography-body2 MuiTypography-displayBlock"
+            class="MuiStepLabel-label Mui-active css-qivjh0-MuiStepLabel-label"
           >
             Select a Connection Type
           </span>
         </span>
       </span>
       <div
-        class="MuiStepContent-root"
-        icon="1"
+        class="MuiStepContent-root css-14yr603-MuiStepContent-root"
       >
         <div
-          class="MuiCollapse-root MuiStepContent-transition MuiCollapse-entered"
+          class="MuiCollapse-root MuiCollapse-vertical MuiStepContent-transition MuiCollapse-entered css-1rw7nzj-MuiCollapse-root-MuiStepContent-transition"
           style="min-height: 0px;"
         >
           <div
-            class="MuiCollapse-wrapper"
+            class="MuiCollapse-wrapper MuiCollapse-vertical css-smkl36-MuiCollapse-wrapper"
           >
             <div
-              class="MuiCollapse-wrapperInner"
+              class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
             >
               <form
                 autocomplete="off"
               >
                 <div
-                  class="MuiFormControl-root MuiTextField-root MuiFormControl-fullWidth"
+                  class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-wb57ya-MuiFormControl-root-MuiTextField-root"
                 >
                   <label
-                    class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-filled"
+                    class="MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-root MuiFormLabel-colorPrimary MuiFormLabel-filled css-1sumxir-MuiFormLabel-root-MuiInputLabel-root"
                     data-shrink="true"
+                    for="mui-1"
+                    id="mui-1-label"
                   >
                     connectionType
                   </label>
                   <div
-                    class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
+                    class="MuiOutlinedInput-root MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl css-md26zr-MuiInputBase-root-MuiOutlinedInput-root"
+                    variant="outlined"
                   >
                     <div
+                      aria-describedby="mui-1-helper-text"
+                      aria-expanded="false"
                       aria-haspopup="listbox"
-                      class="MuiSelect-root MuiSelect-select MuiSelect-selectMenu MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input"
+                      aria-labelledby="mui-1-label mui-1"
+                      class="MuiSelect-select MuiSelect-outlined MuiOutlinedInput-input MuiInputBase-input css-11u53oe-MuiSelect-select-MuiInputBase-input-MuiOutlinedInput-input"
+                      id="mui-1"
                       role="button"
                       tabindex="0"
                     >
@@ -86,13 +93,14 @@ exports[`<AddConnectionWidget /> renders 1`] = `
                     </div>
                     <input
                       aria-hidden="true"
-                      class="MuiSelect-nativeInput"
+                      class="MuiSelect-nativeInput css-yf8vq0-MuiSelect-nativeInput"
                       tabindex="-1"
                       value="UCSCTrackHubConnection"
                     />
                     <svg
                       aria-hidden="true"
-                      class="MuiSvgIcon-root MuiSelect-icon MuiSelect-iconOutlined"
+                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSelect-icon MuiSelect-iconOutlined css-hfutr2-MuiSvgIcon-root-MuiSelect-icon"
+                      data-testid="ArrowDropDownIcon"
                       focusable="false"
                       viewBox="0 0 24 24"
                     >
@@ -102,10 +110,10 @@ exports[`<AddConnectionWidget /> renders 1`] = `
                     </svg>
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root MuiOutlinedInput-notchedOutline"
+                      class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled PrivateNotchedOutline-legendNotched"
+                        class="css-1in441m"
                       >
                         <span>
                           connectionType
@@ -114,66 +122,55 @@ exports[`<AddConnectionWidget /> renders 1`] = `
                     </fieldset>
                   </div>
                   <p
-                    class="MuiFormHelperText-root MuiFormHelperText-contained MuiFormHelperText-filled"
+                    class="MuiFormHelperText-root MuiFormHelperText-sizeMedium MuiFormHelperText-contained MuiFormHelperText-filled css-1wc848c-MuiFormHelperText-root"
+                    id="mui-1-helper-text"
                   >
                     A track or assembly hub in the Track Hub format
                     <a
-                      aria-disabled="false"
-                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorSecondary"
+                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorSecondary MuiIconButton-sizeMedium css-1gws2xf-MuiButtonBase-root-MuiIconButton-root"
                       href="//genome.ucsc.edu/goldenPath/help/hgTrackHubHelp.html#Intro"
                       rel="noopener noreferrer"
                       tabindex="0"
                       target="_blank"
                     >
-                      <span
-                        class="MuiIconButton-label"
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+                        data-testid="OpenInNewIcon"
+                        focusable="false"
+                        viewBox="0 0 24 24"
                       >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"
-                          />
-                        </svg>
-                      </span>
+                        <path
+                          d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"
+                        />
+                      </svg>
                       <span
-                        class="MuiTouchRipple-root"
+                        class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
                       />
                     </a>
                   </p>
                 </div>
               </form>
               <div
-                class="makeStyles-actionsContainer"
+                class="tss-1spe31o-actionsContainer"
               >
                 <button
-                  class="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-button MuiButton-disabled MuiButtonBase-disabled"
+                  class="MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButtonBase-root Mui-disabled tss-11xjtta-button css-1e6y48t-MuiButtonBase-root-MuiButton-root"
                   disabled=""
                   tabindex="-1"
                   type="button"
                 >
-                  <span
-                    class="MuiButton-label"
-                  >
-                    Back
-                  </span>
+                  Back
                 </button>
                 <button
-                  class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-button MuiButton-containedPrimary"
+                  class="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButtonBase-root tss-11xjtta-button css-sghohy-MuiButtonBase-root-MuiButton-root"
                   data-testid="addConnectionNext"
                   tabindex="0"
                   type="button"
                 >
+                  Next
                   <span
-                    class="MuiButton-label"
-                  >
-                    Next
-                  </span>
-                  <span
-                    class="MuiTouchRipple-root"
+                    class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
                   />
                 </button>
               </div>
@@ -183,24 +180,24 @@ exports[`<AddConnectionWidget /> renders 1`] = `
       </div>
     </div>
     <div
-      class="MuiStepConnector-root MuiStepConnector-vertical MuiStepConnector-disabled"
+      class="MuiStepConnector-root MuiStepConnector-vertical Mui-disabled css-1pe7n21-MuiStepConnector-root"
     >
       <span
-        class="MuiStepConnector-line MuiStepConnector-lineVertical"
+        class="MuiStepConnector-line MuiStepConnector-lineVertical css-8t49rw-MuiStepConnector-line"
       />
     </div>
     <div
-      class="MuiStep-root MuiStep-vertical"
+      class="MuiStep-root MuiStep-vertical css-8wcvy5-MuiStep-root"
     >
       <span
-        class="MuiStepLabel-root MuiStepLabel-vertical MuiStepLabel-disabled"
+        class="MuiStepLabel-root MuiStepLabel-vertical Mui-disabled css-14sza3e-MuiStepLabel-root"
       >
         <span
-          class="MuiStepLabel-iconContainer"
+          class="MuiStepLabel-iconContainer css-vnkopk-MuiStepLabel-iconContainer"
         >
           <svg
             aria-hidden="true"
-            class="MuiSvgIcon-root MuiStepIcon-root"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiStepIcon-root css-1u4zpwo-MuiSvgIcon-root-MuiStepIcon-root"
             focusable="false"
             viewBox="0 0 24 24"
           >
@@ -210,29 +207,28 @@ exports[`<AddConnectionWidget /> renders 1`] = `
               r="12"
             />
             <text
-              class="MuiStepIcon-text"
+              class="MuiStepIcon-text css-117w1su-MuiStepIcon-text"
+              dominant-baseline="central"
               text-anchor="middle"
               x="12"
-              y="16"
+              y="12"
             >
               2
             </text>
           </svg>
         </span>
         <span
-          class="MuiStepLabel-labelContainer"
+          class="MuiStepLabel-labelContainer css-16ubnlw-MuiStepLabel-labelContainer"
         >
           <span
-            class="MuiTypography-root MuiStepLabel-label MuiTypography-body2 MuiTypography-displayBlock"
+            class="MuiStepLabel-label Mui-disabled css-qivjh0-MuiStepLabel-label"
           >
             Configure Connection
           </span>
         </span>
       </span>
       <div
-        class="MuiStepContent-root MuiStepContent-last"
-        disabled=""
-        icon="2"
+        class="MuiStepContent-root MuiStepContent-last css-1mz1l2x-MuiStepContent-root"
       />
     </div>
   </div>

package/src/AddTrackWidget/components/AddTrackWidget.test.js

@@ -107,7 +107,7 @@ describe('<AddTrackWidget />', () => {
     fireEvent.change(getAllByTestId('urlInput')[0], {
       target: { value: 'test.txt' },
     })
-    fireEvent.click(getByTestId('addTrackNextButton'))
+    fireEvent.click(getAllByTestId('addTrackNextButton')[0])
     fireEvent.mouseDown(getByTestId('adapterTypeSelect'))
     const bamAdapter = await findByText('BamAdapter')
     fireEvent.click(bamAdapter)
@@ -122,7 +122,7 @@ describe('<AddTrackWidget />', () => {
     fireEvent.mouseDown(assemblyNameSelect)
     const volMyt1 = await findAllByText('volMyt1')
     fireEvent.click(volMyt1[1])
-    fireEvent.click(getByTestId('addTrackNextButton'))
+    fireEvent.click(getAllByTestId('addTrackNextButton')[0])
     expect(session.sessionTracks.length).toBe(2)
   })
 
@@ -134,11 +134,11 @@ describe('<AddTrackWidget />', () => {
     fireEvent.change(getAllByTestId('urlInput')[0], {
       target: { value: 'test.txt' },
     })
-    fireEvent.click(getByTestId('addTrackNextButton'))
+    fireEvent.click(getAllByTestId('addTrackNextButton')[0])
     fireEvent.mouseDown(getByTestId('adapterTypeSelect'))
     const chrom = await findByText('ChromSizesAdapter')
     fireEvent.click(chrom)
-    fireEvent.click(getByTestId('addTrackNextButton'))
+    fireEvent.click(getAllByTestId('addTrackNextButton')[0])
     expect(session.sessionTracks.length).toBe(2)
   })
 })

package/src/AddTrackWidget/components/AddTrackWidget.tsx

@@ -1,13 +1,14 @@
 import React, { useState } from 'react'
 import {
+  Alert,
   Button,
   Step,
   StepContent,
   StepLabel,
   Stepper,
   Typography,
-  makeStyles,
-} from '@material-ui/core'
+} from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
 import {
   getSession,
   isElectron,
@@ -16,14 +17,13 @@ import {
 import { getConf } from '@jbrowse/core/configuration'
 import { observer } from 'mobx-react'
 import { getEnv } from 'mobx-state-tree'
-import { Alert } from '@material-ui/lab'
 
 // locals
 import ConfirmTrack from './ConfirmTrack'
 import TrackSourceSelect from './TrackSourceSelect'
 import { AddTrackModel } from '../model'
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles()(theme => ({
   root: {
     marginTop: theme.spacing(1),
   },
@@ -49,7 +49,7 @@ const steps = ['Enter track data', 'Confirm track type']
 
 function AddTrackWidget({ model }: { model: AddTrackModel }) {
   const [activeStep, setActiveStep] = useState(0)
-  const classes = useStyles()
+  const { classes } = useStyles()
   const session = getSession(model)
   const { pluginManager } = getEnv(session)
   const { rootModel } = pluginManager

package/src/AddTrackWidget/components/ConfirmTrack.tsx

@@ -6,28 +6,28 @@ import {
   isElectron,
 } from '@jbrowse/core/util'
 import {
-  Link,
-  MenuItem,
-  TextField,
-  ListSubheader,
-  Typography,
-  FormControl,
-  FormControlLabel,
-  Checkbox,
-  Paper,
   Card,
-  List,
-  ListItem,
   CardContent,
+  Checkbox,
+  FormControl,
+  FormControlLabel,
   IconButton,
   InputLabel,
   InputAdornment,
-  makeStyles,
-} from '@material-ui/core'
+  ListSubheader,
+  Link,
+  List,
+  ListItem,
+  MenuItem,
+  Paper,
+  TextField,
+  Typography,
+} from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
 
 // icons
-import DeleteIcon from '@material-ui/icons/Delete'
-import AddIcon from '@material-ui/icons/Add'
+import DeleteIcon from '@mui/icons-material/Delete'
+import AddIcon from '@mui/icons-material//Add'
 // other
 import PluginManager from '@jbrowse/core/PluginManager'
 import { observer } from 'mobx-react'
@@ -38,7 +38,7 @@ import { UNKNOWN } from '@jbrowse/core/util/tracks'
 import { AddTrackModel } from '../model'
 import { AdapterMetadata } from '@jbrowse/core/pluggableElementTypes/AdapterType'
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles()(theme => ({
   spacing: {
     marginBottom: theme.spacing(3),
   },
@@ -62,7 +62,7 @@ function StatusMessage({
   trackAdapter: { type: string; subadapter?: { type: string } }
   trackType: string
 }) {
-  const classes = useStyles()
+  const { classes } = useStyles()
   return trackAdapter.type === 'SNPCoverageAdapter' ? (
     <Typography className={classes.spacing}>
       Selected <code>{trackType}</code>. Using adapter{' '}
@@ -130,7 +130,7 @@ function getTrackTypes(pluginManager: PluginManager) {
 }
 
 const TextIndexingConfig = observer(({ model }: { model: AddTrackModel }) => {
-  const classes = useStyles()
+  const { classes } = useStyles()
   const [value1, setValue1] = useState('')
   const [value2, setValue2] = useState('')
   const [attributes, setAttributes] = useState(['Name', 'ID'])
@@ -229,7 +229,7 @@ const TextIndexingConfig = observer(({ model }: { model: AddTrackModel }) => {
 })
 
 const TrackAdapterSelector = observer(({ model }: { model: AddTrackModel }) => {
-  const classes = useStyles()
+  const { classes } = useStyles()
   const session = getSession(model)
   const { trackAdapter } = model
   // prettier-ignore
@@ -273,7 +273,7 @@ const TrackAdapterSelector = observer(({ model }: { model: AddTrackModel }) => {
 })
 
 function UnknownAdapterPrompt({ model }: { model: AddTrackModel }) {
-  const classes = useStyles()
+  const { classes } = useStyles()
   return (
     <>
       <Typography className={classes.spacing}>
@@ -302,7 +302,7 @@ function UnknownAdapterPrompt({ model }: { model: AddTrackModel }) {
 }
 
 const TrackTypeSelector = observer(({ model }: { model: AddTrackModel }) => {
-  const classes = useStyles()
+  const { classes } = useStyles()
   const session = getSession(model)
   const { trackType } = model
   const trackTypes = getTrackTypes(getEnv(session).pluginManager)
@@ -362,7 +362,7 @@ const TrackAssemblySelector = observer(
 )
 
 function ConfirmTrack({ model }: { model: AddTrackModel }) {
-  const classes = useStyles()
+  const { classes } = useStyles()
   const [check, setCheck] = useState(true)
   const { trackName, trackAdapter, trackType, warningMessage, adapterHint } =
     model

package/src/AddTrackWidget/components/TrackSourceSelect.tsx

@@ -1,11 +1,14 @@
 import React from 'react'
 import { FileSelector } from '@jbrowse/core/ui'
-import { Paper, makeStyles } from '@material-ui/core'
-import { AddTrackModel } from '../model'
+import { Paper } from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
 import { getRoot } from 'mobx-state-tree'
 import { observer } from 'mobx-react'
 
-const useStyles = makeStyles(theme => ({
+// locals
+import { AddTrackModel } from '../model'
+
+const useStyles = makeStyles()(theme => ({
   paper: {
     display: 'flex',
     flexDirection: 'column',
@@ -17,8 +20,9 @@ const useStyles = makeStyles(theme => ({
 }))
 
 function TrackSourceSelect({ model }: { model: AddTrackModel }) {
-  const classes = useStyles()
-  const rootModel = getRoot(model)
+  const { classes } = useStyles()
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const rootModel = getRoot<any>(model)
 
   return (
     <Paper className={classes.paper}>