@jbrowse/plugin-data-management 1.7.11 → 2.0.0

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,7 +8,7 @@ import {
   List,
   ListItem,
   DialogActions,
-} from '@material-ui/core'
+} from '@mui/material'
 import { observer } from 'mobx-react'
 
 function CloseConnectionDialog({

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'

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'

package/src/HierarchicalTrackSelectorWidget/components/HierarchicalTrackSelector.tsx

@@ -18,16 +18,15 @@ import {
   TextField,
   Tooltip,
   Typography,
-  makeStyles,
-} from '@material-ui/core'
-
+} from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
 // icons
-import ClearIcon from '@material-ui/icons/Clear'
-import AddIcon from '@material-ui/icons/Add'
-import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown'
-import ArrowRightIcon from '@material-ui/icons/ArrowRight'
-import MenuIcon from '@material-ui/icons/Menu'
-import MoreIcon from '@material-ui/icons/MoreHoriz'
+import ClearIcon from '@mui/icons-material/Clear'
+import AddIcon from '@mui/icons-material/Add'
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'
+import ArrowRightIcon from '@mui/icons-material/ArrowRight'
+import MenuIcon from '@mui/icons-material/Menu'
+import MoreIcon from '@mui/icons-material/MoreHoriz'
 import { Cable } from '@jbrowse/core/ui/Icons'
 
 // other
@@ -55,7 +54,7 @@ const DeleteConnectionDialog = lazy(() => import('./DeleteConnectionDialog'))
 const ManageConnectionsDialog = lazy(() => import('./ManageConnectionsDialog'))
 const ToggleConnectionsDialog = lazy(() => import('./ToggleConnectionsDialog'))
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles()(theme => ({
   searchBox: {
     margin: theme.spacing(2),
   },
@@ -99,7 +98,9 @@ const useStyles = makeStyles(theme => ({
   // accordionColor set's display:flex so that the child accordionText use
   // vertically centered text
   accordionColor: {
+    // @ts-ignore
     background: theme.palette.tertiary?.main,
+    // @ts-ignore
     color: theme.palette.tertiary?.contrastText,
     width: '100%',
     display: 'flex',
@@ -151,7 +152,7 @@ function Node(props: {
     drawerPosition,
   } = data
 
-  const classes = useStyles()
+  const { classes } = useStyles()
   const width = 10
   const marginLeft = nestingLevel * width + (isLeaf ? width : 0)
   const unsupported =
@@ -213,6 +214,7 @@ function Node(props: {
               </Tooltip>
               <IconButton
                 onClick={e => onMoreInfo({ target: e.currentTarget, id, conf })}
+                style={{ padding: 0 }}
                 color="secondary"
                 data-testid={`htsTrackEntryMenu-${id}`}
               >
@@ -379,7 +381,7 @@ const HierarchicalTrackSelectorContainer = observer(
     toolbarHeight: number
     overrideDimensions?: { width: number; height: number }
   }) => {
-    const classes = useStyles()
+    const { classes } = useStyles()
     const session = getSession(model)
     const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null)
 
@@ -461,7 +463,7 @@ const HierarchicalTrackSelectorHeader = observer(
     setAssemblyIdx: (n: number) => void
     assemblyIdx: number
   }) => {
-    const classes = useStyles()
+    const { classes } = useStyles()
     const session = getSession(model)
     const [connectionAnchorEl, setConnectionAnchorEl] =
       useState<HTMLButtonElement>()