@jbrowse/plugin-data-management 1.7.11 → 2.0.0

package/src/HierarchicalTrackSelectorWidget/components/ManageConnectionsDialog.tsx

@@ -1,16 +1,16 @@
 import React from 'react'
 import {
+  Button,
   Dialog,
   DialogTitle,
   DialogContent,
   DialogActions,
-  Button,
   IconButton,
   Tooltip,
   Typography,
-  makeStyles,
-} from '@material-ui/core'
-import CloseIcon from '@material-ui/icons/Close'
+} from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
+import CloseIcon from '@mui/icons-material/Close'
 import { observer } from 'mobx-react'
 import {
   AnyConfigurationModel,
@@ -18,7 +18,7 @@ import {
 } from '@jbrowse/core/configuration'
 import { AbstractSessionModel } from '@jbrowse/core/util'
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles()(theme => ({
   closeButton: {
     position: 'absolute',
     right: theme.spacing(1),
@@ -41,7 +41,7 @@ function ManageConnectionsDlg({
   session: AbstractSessionModel
   breakConnection: (conf: AnyConfigurationModel, arg: boolean) => void
 }) {
-  const classes = useStyles()
+  const { classes } = useStyles()
   const { adminMode, connections, sessionConnections } = session
   return (
     <Dialog open onClose={handleClose} maxWidth="lg">

package/src/HierarchicalTrackSelectorWidget/components/ToggleConnectionsDialog.tsx

@@ -1,17 +1,17 @@
 import React from 'react'
 import {
+  Button,
+  Checkbox,
   Dialog,
   DialogTitle,
   DialogContent,
   DialogActions,
-  Button,
   FormControlLabel,
-  Checkbox,
   IconButton,
   Typography,
-  makeStyles,
-} from '@material-ui/core'
-import CloseIcon from '@material-ui/icons/Close'
+} from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
+import CloseIcon from '@mui/icons-material/Close'
 import { observer } from 'mobx-react'
 import {
   AnyConfigurationModel,
@@ -19,7 +19,7 @@ import {
 } from '@jbrowse/core/configuration'
 import { AbstractSessionModel } from '@jbrowse/core/util'
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles()(theme => ({
   closeButton: {
     position: 'absolute',
     right: theme.spacing(1),
@@ -44,7 +44,7 @@ function ToggleConnectionDialog({
   assemblyName: string
   breakConnection: (arg: AnyConfigurationModel) => void
 }) {
-  const classes = useStyles()
+  const { classes } = useStyles()
   const { connections, connectionInstances: instances = [] } = session
   const assemblySpecificConnections = connections.filter(c => {
     const configAssemblyNames = readConfObject(c, 'assemblyNames')

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

@@ -2,26 +2,23 @@
 
 exports[`HierarchicalTrackSelector widget renders nothing with no assembly 1`] = `
 <button
-  class="MuiButtonBase-root MuiFab-root makeStyles-fab MuiFab-secondary"
+  class="MuiButtonBase-root MuiFab-root MuiFab-circular MuiFab-sizeLarge MuiFab-secondary tss-jdumxy-fab css-kznubb-MuiButtonBase-root-MuiFab-root"
   tabindex="0"
   type="button"
 >
-  <span
-    class="MuiFab-label"
+  <svg
+    aria-hidden="true"
+    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+    data-testid="AddIcon"
+    focusable="false"
+    viewBox="0 0 24 24"
   >
-    <svg
-      aria-hidden="true"
-      class="MuiSvgIcon-root"
-      focusable="false"
-      viewBox="0 0 24 24"
-    >
-      <path
-        d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
-      />
-    </svg>
-  </span>
+    <path
+      d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
+    />
+  </svg>
   <span
-    class="MuiTouchRipple-root"
+    class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
   />
 </button>
 `;
@@ -34,96 +31,101 @@ exports[`HierarchicalTrackSelector widget renders with a couple of categorized t
     style="display: flex;"
   >
     <button
-      class="MuiButtonBase-root MuiIconButton-root makeStyles-menuIcon"
+      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium tss-1imaff4-menuIcon css-78trlr-MuiButtonBase-root-MuiIconButton-root"
       tabindex="0"
       type="button"
     >
-      <span
-        class="MuiIconButton-label"
+      <svg
+        aria-hidden="true"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+        data-testid="MenuIcon"
+        focusable="false"
+        viewBox="0 0 24 24"
       >
-        <svg
-          aria-hidden="true"
-          class="MuiSvgIcon-root"
-          focusable="false"
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
-          />
-        </svg>
-      </span>
+        <path
+          d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
+        />
+      </svg>
       <span
-        class="MuiTouchRipple-root"
+        class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
       />
     </button>
     <button
-      class="MuiButtonBase-root MuiIconButton-root makeStyles-menuIcon"
+      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium tss-1imaff4-menuIcon css-78trlr-MuiButtonBase-root-MuiIconButton-root"
       tabindex="0"
       type="button"
     >
-      <span
-        class="MuiIconButton-label"
+      <svg
+        aria-hidden="true"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+        focusable="false"
+        viewBox="0 0 24 24"
       >
-        <svg
-          aria-hidden="true"
-          class="MuiSvgIcon-root"
-          focusable="false"
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M20 5V4c0-.55-.45-1-1-1h-2c-.55 0-1 .45-1 1v1h-1v4c0 .55.45 1 1 1h1v7c0 1.1-.9 2-2 2s-2-.9-2-2V7c0-2.21-1.79-4-4-4S5 4.79 5 7v7H4c-.55 0-1 .45-1 1v4h1v1c0 .55.45 1 1 1h2c.55 0 1-.45 1-1v-1h1v-4c0-.55-.45-1-1-1H7V7c0-1.1.9-2 2-2s2 .9 2 2v10c0 2.21 1.79 4 4 4s4-1.79 4-4v-7h1c.55 0 1-.45 1-1V5h-1z"
-          />
-        </svg>
-      </span>
+        <path
+          d="M20 5V4c0-.55-.45-1-1-1h-2c-.55 0-1 .45-1 1v1h-1v4c0 .55.45 1 1 1h1v7c0 1.1-.9 2-2 2s-2-.9-2-2V7c0-2.21-1.79-4-4-4S5 4.79 5 7v7H4c-.55 0-1 .45-1 1v4h1v1c0 .55.45 1 1 1h2c.55 0 1-.45 1-1v-1h1v-4c0-.55-.45-1-1-1H7V7c0-1.1.9-2 2-2s2 .9 2 2v10c0 2.21 1.79 4 4 4s4-1.79 4-4v-7h1c.55 0 1-.45 1-1V5h-1z"
+        />
+      </svg>
       <span
-        class="MuiTouchRipple-root"
+        class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
       />
     </button>
     <div
-      class="MuiFormControl-root MuiTextField-root makeStyles-searchBox MuiFormControl-fullWidth"
+      class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root tss-11q958z-searchBox css-wb57ya-MuiFormControl-root-MuiTextField-root"
     >
       <label
-        class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated"
+        class="MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined MuiFormLabel-root MuiFormLabel-colorPrimary css-14s5rfu-MuiFormLabel-root-MuiInputLabel-root"
         data-shrink="false"
+        for="mui-5"
+        id="mui-5-label"
       >
         Filter tracks
       </label>
       <div
-        class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedEnd"
+        class="MuiOutlinedInput-root MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd css-154xyx0-MuiInputBase-root-MuiOutlinedInput-root"
       >
         <input
           aria-invalid="false"
-          class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd"
+          class="MuiOutlinedInput-input MuiInputBase-input MuiInputBase-inputAdornedEnd css-nxo287-MuiInputBase-input-MuiOutlinedInput-input"
+          id="mui-5"
           type="text"
           value=""
         />
         <div
-          class="MuiInputAdornment-root MuiInputAdornment-positionEnd"
+          class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-outlined MuiInputAdornment-sizeMedium css-1laqsz7-MuiInputAdornment-root"
         >
           <button
-            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorSecondary"
+            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorSecondary MuiIconButton-sizeMedium css-1gws2xf-MuiButtonBase-root-MuiIconButton-root"
             tabindex="0"
             type="button"
           >
-            <span
-              class="MuiIconButton-label"
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+              data-testid="ClearIcon"
+              focusable="false"
+              viewBox="0 0 24 24"
             >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root"
-                focusable="false"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-                />
-              </svg>
-            </span>
+              <path
+                d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+              />
+            </svg>
             <span
-              class="MuiTouchRipple-root"
+              class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
             />
           </button>
         </div>
+        <fieldset
+          aria-hidden="true"
+          class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
+        >
+          <legend
+            class="css-1ftyaf0"
+          >
+            <span>
+              Filter tracks
+            </span>
+          </legend>
+        </fieldset>
       </div>
     </div>
   </div>
@@ -138,96 +140,101 @@ exports[`HierarchicalTrackSelector widget renders with a couple of uncategorized
     style="display: flex;"
   >
     <button
-      class="MuiButtonBase-root MuiIconButton-root makeStyles-menuIcon"
+      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium tss-1imaff4-menuIcon css-78trlr-MuiButtonBase-root-MuiIconButton-root"
       tabindex="0"
       type="button"
     >
-      <span
-        class="MuiIconButton-label"
+      <svg
+        aria-hidden="true"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+        data-testid="MenuIcon"
+        focusable="false"
+        viewBox="0 0 24 24"
       >
-        <svg
-          aria-hidden="true"
-          class="MuiSvgIcon-root"
-          focusable="false"
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
-          />
-        </svg>
-      </span>
+        <path
+          d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
+        />
+      </svg>
       <span
-        class="MuiTouchRipple-root"
+        class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
       />
     </button>
     <button
-      class="MuiButtonBase-root MuiIconButton-root makeStyles-menuIcon"
+      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium tss-1imaff4-menuIcon css-78trlr-MuiButtonBase-root-MuiIconButton-root"
       tabindex="0"
       type="button"
     >
-      <span
-        class="MuiIconButton-label"
+      <svg
+        aria-hidden="true"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+        focusable="false"
+        viewBox="0 0 24 24"
       >
-        <svg
-          aria-hidden="true"
-          class="MuiSvgIcon-root"
-          focusable="false"
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M20 5V4c0-.55-.45-1-1-1h-2c-.55 0-1 .45-1 1v1h-1v4c0 .55.45 1 1 1h1v7c0 1.1-.9 2-2 2s-2-.9-2-2V7c0-2.21-1.79-4-4-4S5 4.79 5 7v7H4c-.55 0-1 .45-1 1v4h1v1c0 .55.45 1 1 1h2c.55 0 1-.45 1-1v-1h1v-4c0-.55-.45-1-1-1H7V7c0-1.1.9-2 2-2s2 .9 2 2v10c0 2.21 1.79 4 4 4s4-1.79 4-4v-7h1c.55 0 1-.45 1-1V5h-1z"
-          />
-        </svg>
-      </span>
+        <path
+          d="M20 5V4c0-.55-.45-1-1-1h-2c-.55 0-1 .45-1 1v1h-1v4c0 .55.45 1 1 1h1v7c0 1.1-.9 2-2 2s-2-.9-2-2V7c0-2.21-1.79-4-4-4S5 4.79 5 7v7H4c-.55 0-1 .45-1 1v4h1v1c0 .55.45 1 1 1h2c.55 0 1-.45 1-1v-1h1v-4c0-.55-.45-1-1-1H7V7c0-1.1.9-2 2-2s2 .9 2 2v10c0 2.21 1.79 4 4 4s4-1.79 4-4v-7h1c.55 0 1-.45 1-1V5h-1z"
+        />
+      </svg>
       <span
-        class="MuiTouchRipple-root"
+        class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
       />
     </button>
     <div
-      class="MuiFormControl-root MuiTextField-root makeStyles-searchBox MuiFormControl-fullWidth"
+      class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root tss-11q958z-searchBox css-wb57ya-MuiFormControl-root-MuiTextField-root"
     >
       <label
-        class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated"
+        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"
       >
         Filter tracks
       </label>
       <div
-        class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedEnd"
+        class="MuiOutlinedInput-root MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd css-154xyx0-MuiInputBase-root-MuiOutlinedInput-root"
       >
         <input
           aria-invalid="false"
-          class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd"
+          class="MuiOutlinedInput-input MuiInputBase-input MuiInputBase-inputAdornedEnd css-nxo287-MuiInputBase-input-MuiOutlinedInput-input"
+          id="mui-1"
           type="text"
           value=""
         />
         <div
-          class="MuiInputAdornment-root MuiInputAdornment-positionEnd"
+          class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-outlined MuiInputAdornment-sizeMedium css-1laqsz7-MuiInputAdornment-root"
         >
           <button
-            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorSecondary"
+            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorSecondary MuiIconButton-sizeMedium css-1gws2xf-MuiButtonBase-root-MuiIconButton-root"
             tabindex="0"
             type="button"
           >
-            <span
-              class="MuiIconButton-label"
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+              data-testid="ClearIcon"
+              focusable="false"
+              viewBox="0 0 24 24"
             >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root"
-                focusable="false"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-                />
-              </svg>
-            </span>
+              <path
+                d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+              />
+            </svg>
             <span
-              class="MuiTouchRipple-root"
+              class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
             />
           </button>
         </div>
+        <fieldset
+          aria-hidden="true"
+          class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
+        >
+          <legend
+            class="css-1ftyaf0"
+          >
+            <span>
+              Filter tracks
+            </span>
+          </legend>
+        </fieldset>
       </div>
     </div>
   </div>

package/src/PluginStoreWidget/components/CustomPluginForm.tsx

@@ -1,8 +1,7 @@
 import React, { useState } from 'react'
 import { observer } from 'mobx-react'
 import { getRoot } from 'mobx-state-tree'
-import clsx from 'clsx'
-
+import { PluginDefinition } from '@jbrowse/core/PluginLoader'
 import {
   Button,
   Collapse,
@@ -12,20 +11,18 @@ import {
   DialogContent,
   DialogContentText,
   TextField,
-  makeStyles,
-} from '@material-ui/core'
+} from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
 
 // icons
-import IconButton from '@material-ui/core/IconButton'
-import CloseIcon from '@material-ui/icons/Close'
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore'
-
-import { PluginDefinition } from '@jbrowse/core/PluginLoader'
+import IconButton from '@mui/material/IconButton'
+import CloseIcon from '@mui/icons-material/Close'
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
 
 // locals
 import { PluginStoreModel } from '../model'
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles()(theme => ({
   closeButton: {
     position: 'absolute',
     right: theme.spacing(1),
@@ -56,7 +53,7 @@ function CustomPluginForm({
   onClose(): void
   model: PluginStoreModel
 }) {
-  const classes = useStyles()
+  const { classes, cx } = useStyles()
   const [umdPluginName, setUMDPluginName] = useState('')
   const [umdPluginUrl, setUMDPluginUrl] = useState('')
   const [esmPluginUrl, setESMPluginUrl] = useState('')
@@ -83,8 +80,8 @@ function CustomPluginForm({
     setAdvancedOptionsOpen(!advancedOptionsOpen)
   }
 
-  const rootModel = getRoot(model)
-  const { jbrowse } = rootModel
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const { jbrowse } = getRoot<any>(model)
 
   const ready = Boolean(
     (umdPluginName && umdPluginUrl) || esmPluginUrl || cjsPluginUrl,
@@ -152,7 +149,7 @@ function CustomPluginForm({
           />
           <DialogContentText onClick={handleOpenAdvancedOptions}>
             <IconButton
-              className={clsx(classes.expand, {
+              className={cx(classes.expand, {
                 [classes.expandOpen]: advancedOptionsOpen,
               })}
               aria-expanded={advancedOptionsOpen}

package/src/PluginStoreWidget/components/InstalledPlugin.tsx

@@ -11,11 +11,11 @@ import {
   ListItem,
   Tooltip,
   Typography,
-  makeStyles,
-} from '@material-ui/core'
+} from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
 
-import CloseIcon from '@material-ui/icons/Close'
-import LockIcon from '@material-ui/icons/Lock'
+import CloseIcon from '@mui/icons-material/Close'
+import LockIcon from '@mui/icons-material/Lock'
 
 import PluginManager from '@jbrowse/core/PluginManager'
 import { getSession } from '@jbrowse/core/util'
@@ -25,7 +25,7 @@ import {
 } from '@jbrowse/core/util/types'
 import { PluginStoreModel } from '../model'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles()(() => ({
   closeDialog: {
     position: 'absolute',
     right: 0,
@@ -40,7 +40,7 @@ const useStyles = makeStyles(() => ({
 }))
 
 function LockedPlugin() {
-  const classes = useStyles()
+  const { classes } = useStyles()
   return (
     <Tooltip
       className={classes.lockedPluginTooltip}
@@ -58,7 +58,7 @@ function PluginDialog({
   plugin: string
   onClose: (s?: string) => void
 }) {
-  const classes = useStyles()
+  const { classes } = useStyles()
   return (
     <Dialog open onClose={() => onClose()}>
       <DialogTitle>
@@ -123,7 +123,8 @@ function InstalledPlugin({
     p => pluginManager.pluginMetadata[plugin.name].url === p.url,
   )
 
-  const rootModel = getParent(model, 3)
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const rootModel = getParent<any>(model, 3)
   const { jbrowse, adminMode } = rootModel
 
   return (

package/src/PluginStoreWidget/components/InstalledPluginsList.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { observer } from 'mobx-react'
-import { List, Typography } from '@material-ui/core'
+import { List, Typography } from '@mui/material'
 import PluginManager from '@jbrowse/core/PluginManager'
 import { PluginStoreModel } from '../model'
 import InstalledPlugin from './InstalledPlugin'

package/src/PluginStoreWidget/components/PluginCard.tsx

@@ -14,16 +14,16 @@ import {
   Button,
   Link,
   Typography,
-  makeStyles,
-} from '@material-ui/core'
+} from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
 
 // icons
-import PersonIcon from '@material-ui/icons/Person'
-import AddIcon from '@material-ui/icons/Add'
-import CheckIcon from '@material-ui/icons/Check'
+import PersonIcon from '@mui/icons-material/Person'
+import AddIcon from '@mui/icons-material/Add'
+import CheckIcon from '@mui/icons-material/Check'
 import { PluginStoreModel } from '../model'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles()(() => ({
   card: {
     margin: '1em',
   },
@@ -50,18 +50,17 @@ function PluginCard({
   model: PluginStoreModel
   adminMode: boolean
 }) {
-  const classes = useStyles()
+  const { classes } = useStyles()
   const session = getSession(model)
   const { pluginManager } = getEnv(model) as { pluginManager: PluginManager }
   const isInstalled = Boolean(
-    pluginManager.runtimePluginDefinitions.find(
-      pluginDefinition => pluginDefinition.url === plugin.url,
-    ),
+    pluginManager.runtimePluginDefinitions.find(def => def.url === plugin.url),
   )
   const [tempDisabled, setTempDisabled] = useState(false)
   const disableButton = isInstalled || tempDisabled
 
-  const rootModel = getParent(model, 3)
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const rootModel = getParent<any>(model, 3)
   const { jbrowse } = rootModel
 
   return (

package/src/PluginStoreWidget/components/PluginStoreWidget.tsx

@@ -5,21 +5,21 @@ import { getEnv } from 'mobx-state-tree'
 import {
   Accordion,
   AccordionSummary,
-  TextField,
-  InputAdornment,
   Button,
   IconButton,
+  InputAdornment,
+  TextField,
   Typography,
-  makeStyles,
-} from '@material-ui/core'
+} from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
 
 import { JBrowsePlugin } from '@jbrowse/core/util/types'
 import { getSession, isElectron } from '@jbrowse/core/util'
 
 // icons
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore'
-import ClearIcon from '@material-ui/icons/Clear'
-import InfoOutlinedIcon from '@material-ui/icons/InfoOutlined'
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
+import ClearIcon from '@mui/icons-material/Clear'
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'
 
 // locals
 import InstalledPluginsList from './InstalledPluginsList'
@@ -27,7 +27,7 @@ import PluginCard from './PluginCard'
 import CustomPluginForm from './CustomPluginForm'
 import { PluginStoreModel } from '../model'
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles()(theme => ({
   root: {
     margin: theme.spacing(1),
   },
@@ -51,7 +51,7 @@ const useStyles = makeStyles(theme => ({
 }))
 
 function PluginStoreWidget({ model }: { model: PluginStoreModel }) {
-  const classes = useStyles()
+  const { classes } = useStyles()
   const [pluginArray, setPluginArray] = useState<JBrowsePlugin[]>()
   const [error, setError] = useState<unknown>()
   const [customPluginFormOpen, setCustomPluginFormOpen] = useState(false)