@jbrowse/plugin-data-management 1.7.10 → 2.0.1

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

@@ -2,23 +2,23 @@
 
 exports[`<AddTrackWidget /> 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,125 +28,120 @@ exports[`<AddTrackWidget /> 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"
           >
             Enter track data
           </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"
             >
               <div
-                class="MuiPaper-root makeStyles-paper MuiPaper-elevation1 MuiPaper-rounded"
+                class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 tss-hhqfdh-paper css-1ps6pg7-MuiPaper-root"
               >
                 <div
-                  class="MuiBox-root MuiBox-root"
+                  class="MuiBox-root css-k008qs"
                 >
                   <label
-                    class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-animated MuiInputLabel-shrink"
+                    class="MuiInputLabel-root MuiInputLabel-animated MuiInputLabel-shrink MuiFormLabel-root MuiFormLabel-colorPrimary css-1foa3kv-MuiFormLabel-root-MuiInputLabel-root"
                     data-shrink="true"
                   >
                     Main file
                   </label>
                 </div>
                 <div
-                  class="MuiBox-root MuiBox-root"
+                  class="MuiBox-root css-1xhj18k"
                 >
                   <div
-                    class="MuiBox-root MuiBox-root"
+                    class="MuiBox-root css-0"
                   >
                     <div
                       aria-label="file, url, or account picker"
-                      class="MuiToggleButtonGroup-root"
+                      class="MuiToggleButtonGroup-root css-1gjgmky-MuiToggleButtonGroup-root"
                       role="group"
                     >
                       <button
                         aria-label="local file"
                         aria-pressed="false"
-                        class="MuiButtonBase-root MuiToggleButton-root MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedHorizontal"
+                        class="MuiButtonBase-root MuiToggleButton-root MuiToggleButton-sizeMedium MuiToggleButton-standard MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedHorizontal css-ueukts-MuiButtonBase-root-MuiToggleButton-root"
                         tabindex="0"
                         type="button"
                         value="file"
                       >
+                        File
                         <span
-                          class="MuiToggleButton-label"
-                        >
-                          File
-                        </span>
-                        <span
-                          class="MuiTouchRipple-root"
+                          class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
                         />
                       </button>
                       <button
                         aria-label="url"
                         aria-pressed="true"
-                        class="MuiButtonBase-root MuiToggleButton-root MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedHorizontal MuiToggleButton-selected"
+                        class="MuiButtonBase-root MuiToggleButton-root Mui-selected MuiToggleButton-sizeMedium MuiToggleButton-standard MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedHorizontal css-ueukts-MuiButtonBase-root-MuiToggleButton-root"
                         tabindex="0"
                         type="button"
                         value="url"
                       >
+                        URL
                         <span
-                          class="MuiToggleButton-label"
-                        >
-                          URL
-                        </span>
-                        <span
-                          class="MuiTouchRipple-root"
+                          class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
                         />
                       </button>
                     </div>
                   </div>
                 </div>
                 <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-outlined"
+                    class="MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined MuiFormLabel-root MuiFormLabel-colorPrimary css-14s5rfu-MuiFormLabel-root-MuiInputLabel-root"
                     data-shrink="false"
+                    for="mui-1"
+                    id="mui-1-label"
                   >
                     Enter URL
                   </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"
                   >
                     <input
                       aria-invalid="false"
-                      class="MuiInputBase-input MuiOutlinedInput-input"
+                      class="MuiOutlinedInput-input MuiInputBase-input css-1t8l2tu-MuiInputBase-input-MuiOutlinedInput-input"
                       data-testid="urlInput"
+                      id="mui-1"
                       type="text"
                       value=""
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root MuiOutlinedInput-notchedOutline"
+                      class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled"
+                        class="css-1ftyaf0"
                       >
                         <span>
                           Enter URL
@@ -156,94 +151,89 @@ exports[`<AddTrackWidget /> renders 1`] = `
                   </div>
                 </div>
                 <p
-                  class="MuiFormHelperText-root"
+                  class="MuiFormHelperText-root css-1d1r5q-MuiFormHelperText-root"
                 />
                 <div
-                  class="makeStyles-spacer"
+                  class="tss-ehv88g-spacer"
                 />
                 <div
-                  class="MuiBox-root MuiBox-root"
+                  class="MuiBox-root css-k008qs"
                 >
                   <label
-                    class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-animated MuiInputLabel-shrink"
+                    class="MuiInputLabel-root MuiInputLabel-animated MuiInputLabel-shrink MuiFormLabel-root MuiFormLabel-colorPrimary css-1foa3kv-MuiFormLabel-root-MuiInputLabel-root"
                     data-shrink="true"
                   >
                     Index file
                   </label>
                 </div>
                 <div
-                  class="MuiBox-root MuiBox-root"
+                  class="MuiBox-root css-1xhj18k"
                 >
                   <div
-                    class="MuiBox-root MuiBox-root"
+                    class="MuiBox-root css-0"
                   >
                     <div
                       aria-label="file, url, or account picker"
-                      class="MuiToggleButtonGroup-root"
+                      class="MuiToggleButtonGroup-root css-1gjgmky-MuiToggleButtonGroup-root"
                       role="group"
                     >
                       <button
                         aria-label="local file"
                         aria-pressed="false"
-                        class="MuiButtonBase-root MuiToggleButton-root MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedHorizontal"
+                        class="MuiButtonBase-root MuiToggleButton-root MuiToggleButton-sizeMedium MuiToggleButton-standard MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedHorizontal css-ueukts-MuiButtonBase-root-MuiToggleButton-root"
                         tabindex="0"
                         type="button"
                         value="file"
                       >
+                        File
                         <span
-                          class="MuiToggleButton-label"
-                        >
-                          File
-                        </span>
-                        <span
-                          class="MuiTouchRipple-root"
+                          class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
                         />
                       </button>
                       <button
                         aria-label="url"
                         aria-pressed="true"
-                        class="MuiButtonBase-root MuiToggleButton-root MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedHorizontal MuiToggleButton-selected"
+                        class="MuiButtonBase-root MuiToggleButton-root Mui-selected MuiToggleButton-sizeMedium MuiToggleButton-standard MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedHorizontal css-ueukts-MuiButtonBase-root-MuiToggleButton-root"
                         tabindex="0"
                         type="button"
                         value="url"
                       >
+                        URL
                         <span
-                          class="MuiToggleButton-label"
-                        >
-                          URL
-                        </span>
-                        <span
-                          class="MuiTouchRipple-root"
+                          class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
                         />
                       </button>
                     </div>
                   </div>
                 </div>
                 <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-outlined"
+                    class="MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined MuiFormLabel-root MuiFormLabel-colorPrimary css-14s5rfu-MuiFormLabel-root-MuiInputLabel-root"
                     data-shrink="false"
+                    for="mui-2"
+                    id="mui-2-label"
                   >
                     Enter URL
                   </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"
                   >
                     <input
                       aria-invalid="false"
-                      class="MuiInputBase-input MuiOutlinedInput-input"
+                      class="MuiOutlinedInput-input MuiInputBase-input css-1t8l2tu-MuiInputBase-input-MuiOutlinedInput-input"
                       data-testid="urlInput"
+                      id="mui-2"
                       type="text"
                       value=""
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root MuiOutlinedInput-notchedOutline"
+                      class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled"
+                        class="css-1ftyaf0"
                       >
                         <span>
                           Enter URL
@@ -253,38 +243,30 @@ exports[`<AddTrackWidget /> renders 1`] = `
                   </div>
                 </div>
                 <p
-                  class="MuiFormHelperText-root"
+                  class="MuiFormHelperText-root css-1d1r5q-MuiFormHelperText-root"
                 >
                   (Optional) The URL of the index file is automatically inferred from the URL of the main file if it is not supplied.
                 </p>
               </div>
               <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 MuiButton-disabled MuiButtonBase-disabled"
+                  class="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButtonBase-root Mui-disabled tss-11xjtta-button css-sghohy-MuiButtonBase-root-MuiButton-root"
                   data-testid="addTrackNextButton"
                   disabled=""
                   tabindex="-1"
                   type="button"
                 >
-                  <span
-                    class="MuiButton-label"
-                  >
-                    Next
-                  </span>
+                  Next
                 </button>
               </div>
             </div>
@@ -293,24 +275,24 @@ exports[`<AddTrackWidget /> 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"
           >
@@ -320,29 +302,28 @@ exports[`<AddTrackWidget /> 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"
           >
             Confirm track type
           </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/AssemblyManager/AssemblyAddForm.tsx

@@ -2,17 +2,11 @@ import React, { useState } from 'react'
 import { observer } from 'mobx-react'
 import FileSelector from '@jbrowse/core/ui/FileSelector'
 import { FileLocation } from '@jbrowse/core/util/types'
-import {
-  Button,
-  Grid,
-  MenuItem,
-  Paper,
-  TextField,
-  makeStyles,
-} from '@material-ui/core'
-import AddIcon from '@material-ui/icons/Add'
+import { Button, Grid, MenuItem, Paper, TextField } from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
+import AddIcon from '@mui/icons-material/Add'
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles()(theme => ({
   root: {
     flexGrow: 1,
     overflow: 'hidden',
@@ -160,7 +154,7 @@ const AssemblyAddForm = observer(
     rootModel: any
     setFormOpen: Function
   }) => {
-    const classes = useStyles()
+    const { classes } = useStyles()
 
     const adapterTypes = [
       'IndexedFastaAdapter',

package/src/AssemblyManager/AssemblyManager.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import { observer } from 'mobx-react'
-import { makeStyles } from '@material-ui/core/styles'
-import { AnyConfigurationModel } from '@jbrowse/core/configuration/configurationSchema'
+import { makeStyles } from 'tss-react/mui'
+import { AnyConfigurationModel } from '@jbrowse/core/configuration'
 import {
   Button,
   Dialog,
@@ -9,16 +9,16 @@ import {
   DialogContent,
   DialogTitle,
   IconButton,
-} from '@material-ui/core'
-import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos'
-import CloseIcon from '@material-ui/icons/Close'
-import AddIcon from '@material-ui/icons/Add'
+} from '@mui/material'
+import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos'
+import CloseIcon from '@mui/icons-material/Close'
+import AddIcon from '@mui/icons-material/Add'
 
 import AssemblyTable from './AssemblyTable'
 import AssemblyAddForm from './AssemblyAddForm'
 import AssemblyEditor from './AssemblyEditor'
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles()(theme => ({
   titleBox: {
     color: '#fff',
     backgroundColor: theme.palette.primary.main,
@@ -50,7 +50,7 @@ const AssemblyManager = observer(
     rootModel: any
     onClose: (arg: boolean) => void
   }) => {
-    const classes = useStyles()
+    const { classes } = useStyles()
     const [isFormOpen, setFormOpen] = useState(false)
     const [isAssemblyBeingEdited, setIsAssemblyBeingEdited] = useState(false)
     const [assemblyBeingEdited, setAssemblyBeingEdited] =

package/src/AssemblyManager/AssemblyTable.tsx

@@ -10,17 +10,17 @@ import {
   TableRow,
   Paper,
   Typography,
-  makeStyles,
-} from '@material-ui/core'
+} from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
 
-import CreateIcon from '@material-ui/icons/Create'
-import DeleteIcon from '@material-ui/icons/Delete'
-import { AnyConfigurationModel } from '@jbrowse/core/configuration/configurationSchema'
-
-// local
-import { readConfObject } from '@jbrowse/core/configuration'
+import CreateIcon from '@mui/icons-material/Create'
+import DeleteIcon from '@mui/icons-material/Delete'
+import {
+  readConfObject,
+  AnyConfigurationModel,
+} from '@jbrowse/core/configuration'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles()(() => ({
   table: {
     minWidth: 500,
     minHeight: 150,
@@ -51,7 +51,7 @@ const AssemblyTable = observer(
     setIsAssemblyBeingEdited(arg: boolean): void
     setAssemblyBeingEdited(arg: AnyConfigurationModel): void
   }) => {
-    const classes = useStyles()
+    const { classes } = useStyles()
 
     function removeAssembly(name: string) {
       rootModel.jbrowse.removeAssemblyConf(name)

package/src/HierarchicalTrackSelectorWidget/components/CloseConnectionDialog.tsx

@@ -8,15 +8,18 @@ import {
   List,
   ListItem,
   DialogActions,
-} from '@material-ui/core'
+} from '@mui/material'
 import { observer } from 'mobx-react'
 
 function CloseConnectionDialog({
   modalInfo = {},
   setModalInfo,
 }: {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  modalInfo: any
+  modalInfo?: {
+    name?: string
+    dereferenceTypeCount?: { [key: string]: number }
+    safelyBreakConnection?: Function
+  }
   setModalInfo: Function
 }) {
   const { name, dereferenceTypeCount, safelyBreakConnection } = modalInfo
@@ -41,12 +44,7 @@ function CloseConnectionDialog({
         </DialogContentText>
       </DialogContent>
       <DialogActions>
-        <Button
-          onClick={() => {
-            setModalInfo()
-          }}
-          color="primary"
-        >
+        <Button onClick={() => setModalInfo()} color="primary">
           Cancel
         </Button>
         <Button
@@ -54,9 +52,7 @@ function CloseConnectionDialog({
           onClick={
             modalInfo
               ? () => {
-                  if (safelyBreakConnection) {
-                    safelyBreakConnection()
-                  }
+                  safelyBreakConnection?.()
                   setModalInfo()
                 }
               : () => {}

package/src/HierarchicalTrackSelectorWidget/components/DeleteConnectionDialog.tsx

@@ -6,7 +6,7 @@ import {
   DialogContentText,
   DialogActions,
   Button,
-} from '@material-ui/core'
+} from '@mui/material'
 import { observer } from 'mobx-react'
 import { AnyConfigurationModel } from '@jbrowse/core/configuration/configurationSchema'
 import { AbstractSessionModel } from '@jbrowse/core/util'
@@ -18,7 +18,7 @@ function DeleteConnectionDialog({
 }: {
   deleteDialogDetails: { name: string; connectionConf: AnyConfigurationModel }
   session: AbstractSessionModel
-  handleClose: Function
+  handleClose: () => void
 }) {
   const { connectionConf, name } = deleteDialogDetails
   return (

package/src/HierarchicalTrackSelectorWidget/components/HierarchicalTrackSelector.test.js

@@ -1,5 +1,5 @@
 import { createTestSession } from '@jbrowse/web/src/rootModel'
-import { createTheme, ThemeProvider } from '@material-ui/core/styles'
+import { createTheme, ThemeProvider } from '@mui/material/styles'
 import { cleanup, render } from '@testing-library/react'
 import React from 'react'
 import HierarchicalTrackSelector from './HierarchicalTrackSelector'