@jbrowse/plugin-linear-genome-view 1.7.10 → 2.0.1

package/esm/index.js

@@ -0,0 +1,127 @@
+import { lazy } from 'react';
+import { when } from 'mobx';
+import { ConfigurationSchema } from '@jbrowse/core/configuration';
+import { createBaseTrackConfig, createBaseTrackModel, } from '@jbrowse/core/pluggableElementTypes/models';
+import TrackType from '@jbrowse/core/pluggableElementTypes/TrackType';
+import DisplayType from '@jbrowse/core/pluggableElementTypes/DisplayType';
+import ViewType from '@jbrowse/core/pluggableElementTypes/ViewType';
+import Plugin from '@jbrowse/core/Plugin';
+import { isAbstractMenuManager } from '@jbrowse/core/util';
+import LineStyleIcon from '@mui/icons-material/LineStyle';
+import { BaseLinearDisplay, BaseLinearDisplayComponent, baseLinearDisplayConfigSchema, } from './BaseLinearDisplay';
+import { configSchemaFactory as linearBareDisplayConfigSchemaFactory, stateModelFactory as LinearBareDisplayStateModelFactory, } from './LinearBareDisplay';
+import { stateModelFactory as linearGenomeViewStateModelFactory, renderToSvg, RefNameAutocomplete, SearchBox, } from './LinearGenomeView';
+import { configSchema as linearBasicDisplayConfigSchemaFactory, modelFactory as linearBasicDisplayModelFactory, } from './LinearBasicDisplay';
+export default class LinearGenomeViewPlugin extends Plugin {
+    constructor() {
+        super(...arguments);
+        this.name = 'LinearGenomeViewPlugin';
+        this.exports = {
+            BaseLinearDisplayComponent,
+            BaseLinearDisplay,
+            baseLinearDisplayConfigSchema,
+        };
+    }
+    install(pluginManager) {
+        pluginManager.addTrackType(() => {
+            const configSchema = ConfigurationSchema('FeatureTrack', {}, {
+                baseConfiguration: createBaseTrackConfig(pluginManager),
+                explicitIdentifier: 'trackId',
+            });
+            return new TrackType({
+                name: 'FeatureTrack',
+                configSchema,
+                stateModel: createBaseTrackModel(pluginManager, 'FeatureTrack', configSchema),
+            });
+        });
+        pluginManager.addTrackType(() => {
+            const configSchema = ConfigurationSchema('BasicTrack', {}, {
+                baseConfiguration: createBaseTrackConfig(pluginManager),
+                explicitIdentifier: 'trackId',
+            });
+            return new TrackType({
+                name: 'BasicTrack',
+                configSchema,
+                stateModel: createBaseTrackModel(pluginManager, 'BasicTrack', configSchema),
+            });
+        });
+        pluginManager.addDisplayType(() => {
+            const configSchema = linearBareDisplayConfigSchemaFactory(pluginManager);
+            return new DisplayType({
+                name: 'LinearBareDisplay',
+                configSchema,
+                stateModel: LinearBareDisplayStateModelFactory(configSchema),
+                trackType: 'BasicTrack',
+                viewType: 'LinearGenomeView',
+                ReactComponent: BaseLinearDisplayComponent,
+            });
+        });
+        pluginManager.addDisplayType(() => {
+            const configSchema = linearBasicDisplayConfigSchemaFactory(pluginManager);
+            return new DisplayType({
+                name: 'LinearBasicDisplay',
+                configSchema,
+                stateModel: linearBasicDisplayModelFactory(configSchema),
+                trackType: 'FeatureTrack',
+                viewType: 'LinearGenomeView',
+                ReactComponent: BaseLinearDisplayComponent,
+            });
+        });
+        pluginManager.addViewType(() => new ViewType({
+            name: 'LinearGenomeView',
+            stateModel: linearGenomeViewStateModelFactory(pluginManager),
+            ReactComponent: lazy(() => import('./LinearGenomeView/components/LinearGenomeView')),
+        }));
+        pluginManager.addToExtensionPoint('LaunchView-LinearGenomeView', 
+        // @ts-ignore
+        async ({ session, assembly, loc, tracks = [], }) => {
+            try {
+                const { assemblyManager } = session;
+                const view = session.addView('LinearGenomeView', {});
+                await when(() => !!view.volatileWidth);
+                if (!assembly) {
+                    throw new Error('No assembly provided when launching linear genome view');
+                }
+                const asm = await assemblyManager.waitForAssembly(assembly);
+                if (!asm) {
+                    throw new Error(`Assembly "${assembly}" not found when launching linear genome view`);
+                }
+                view.navToLocString(loc, assembly);
+                const idsNotFound = [];
+                tracks.forEach(track => {
+                    try {
+                        view.showTrack(track);
+                    }
+                    catch (e) {
+                        if (`${e}`.match('Could not resolve identifier')) {
+                            idsNotFound.push(track);
+                        }
+                        else {
+                            throw e;
+                        }
+                    }
+                });
+                if (idsNotFound.length) {
+                    throw new Error(`Could not resolve identifiers: ${idsNotFound.join(',')}`);
+                }
+            }
+            catch (e) {
+                session.notify(`${e}`, 'error');
+                throw e;
+            }
+        });
+    }
+    configure(pluginManager) {
+        if (isAbstractMenuManager(pluginManager.rootModel)) {
+            pluginManager.rootModel.appendToSubMenu(['Add'], {
+                label: 'Linear genome view',
+                icon: LineStyleIcon,
+                onClick: (session) => {
+                    session.addView('LinearGenomeView', {});
+                },
+            });
+        }
+    }
+}
+export { baseLinearDisplayConfigSchema, linearBareDisplayConfigSchemaFactory, linearBasicDisplayConfigSchemaFactory, linearBasicDisplayModelFactory, renderToSvg, BaseLinearDisplayComponent, BaseLinearDisplay, RefNameAutocomplete, SearchBox, };
+//# sourceMappingURL=index.js.map

package/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-linear-genome-view",
-  "version": "1.7.10",
+  "version": "2.0.1",
   "description": "JBrowse 2 linear genome view",
   "keywords": [
     "jbrowse",
@@ -16,47 +16,54 @@
   },
   "author": "JBrowse Team",
   "distMain": "dist/index.js",
+  "distModule": "esm/index.js",
   "srcMain": "src/index.ts",
+  "srcModule": "src/index.ts",
   "main": "dist/index.js",
   "files": [
     "dist",
-    "src"
+    "src",
+    "esm"
   ],
   "scripts": {
-    "build": "babel src --root-mode upward --out-dir dist --extensions .ts,.js,.tsx,.jsx",
+    "prebuild": "npm run clean",
+    "build": "npm-run-all build:*",
+    "build:esm": "tsc --build tsconfig.build.esm.json",
+    "build:es5": "tsc --build tsconfig.build.es5.json",
+    "clean": "rimraf dist esm *.tsbuildinfo",
     "test": "cd ../..; jest plugins/linear-genome-view",
     "prepublishOnly": "yarn test",
     "prepack": "yarn build; yarn useDist",
     "postpack": "yarn useSrc",
     "useDist": "node ../../scripts/useDist.js",
-    "useSrc": "node ../../scripts/useSrc.js",
-    "postbuild": "tsc --build tsconfig.build.json"
+    "useSrc": "node ../../scripts/useSrc.js"
   },
   "dependencies": {
     "@babel/runtime": "^7.17.9",
-    "@material-ui/icons": "^4.9.1",
+    "@mui/icons-material": "^5.0.1",
     "@popperjs/core": "^2.11.0",
     "clone": "^2.1.2",
     "clsx": "^1.0.4",
     "copy-to-clipboard": "^3.3.1",
     "file-saver": "^2.0.0",
-    "material-ui-popup-state": "^1.9.3",
+    "material-ui-popup-state": "^3.0.0",
     "normalize-wheel": "^1.0.1",
     "react-popper": "^2.0.0"
   },
   "peerDependencies": {
-    "@jbrowse/core": "^1.0.0",
-    "@material-ui/core": "^4.12.2",
-    "@material-ui/lab": "^4.0.0-alpha.45",
-    "mobx": "^5.0.0",
-    "mobx-react": "^6.0.0",
-    "mobx-state-tree": "3.14.1",
+    "@jbrowse/core": "^2.0.0",
+    "@mui/material": "^5.0.0",
+    "mobx": "^6.0.0",
+    "mobx-react": "^7.0.0",
+    "mobx-state-tree": "^5.0.0",
     "prop-types": "^15.0.0",
     "react": ">=16.8.0",
-    "react-dom": ">=16.8.0"
+    "react-dom": ">=16.8.0",
+    "tss-react": "^3.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "02d8c1e88e5603ea5855faed4ccb814e28071b32"
+  "module": "esm/index.js",
+  "gitHead": "ed935bf5612af3818abdc8ef52d100d5d81d33a2"
 }

package/src/BaseLinearDisplay/components/BaseLinearDisplay.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useRef } from 'react'
 import { observer } from 'mobx-react'
-import { useTheme, makeStyles } from '@material-ui/core'
+import { useTheme } from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
 import { getConf } from '@jbrowse/core/configuration'
 import { Menu } from '@jbrowse/core/ui'
 
@@ -9,7 +10,7 @@ import Tooltip from './Tooltip'
 import LinearBlocks from './LinearBlocks'
 import { BaseLinearDisplayModel } from '../models/BaseLinearDisplayModel'
 
-const useStyles = makeStyles({
+const useStyles = makeStyles()({
   display: {
     position: 'relative',
     whiteSpace: 'nowrap',
@@ -22,7 +23,7 @@ const useStyles = makeStyles({
 type Coord = [number, number]
 const BaseLinearDisplay = observer(
   (props: { model: BaseLinearDisplayModel; children?: React.ReactNode }) => {
-    const classes = useStyles()
+    const { classes } = useStyles()
     const theme = useTheme()
     const ref = useRef<HTMLDivElement>(null)
     const [clientRect, setClientRect] = useState<DOMRect>()

package/src/BaseLinearDisplay/components/Block.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
 import { BaseBlock } from '@jbrowse/core/util/blockTypes'
-import { makeStyles } from '@material-ui/core/styles'
+import { makeStyles } from 'tss-react/mui'
 import { observer } from 'mobx-react'
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles()(theme => ({
   contentBlock: {
     position: 'relative',
     minHeight: '100%',
@@ -30,7 +30,7 @@ const useStyles = makeStyles(theme => ({
 
 const ContentBlock = observer(
   ({ block, children }: { block: BaseBlock; children: React.ReactNode }) => {
-    const classes = useStyles()
+    const { classes } = useStyles()
     const { widthPx } = block
     return (
       <div style={{ width: widthPx }} className={classes.contentBlock}>
@@ -41,7 +41,7 @@ const ContentBlock = observer(
 )
 
 function ElidedBlock({ width }: { width: number }) {
-  const classes = useStyles()
+  const { classes } = useStyles()
   return <div className={classes.elidedBlock} style={{ width }} />
 }
 
@@ -54,7 +54,7 @@ function InterRegionPaddingBlock({
   width: number
   style?: React.CSSProperties
 }) {
-  const classes = useStyles()
+  const { classes } = useStyles()
   return (
     <div
       style={{

package/src/BaseLinearDisplay/components/LinearBlocks.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { makeStyles } from '@material-ui/core/styles'
+import { makeStyles } from 'tss-react/mui'
 import { getContainingView } from '@jbrowse/core/util'
 import { observer } from 'mobx-react'
 import {
@@ -16,7 +16,7 @@ import {
 } from './Block'
 import { LinearGenomeViewModel } from '../../LinearGenomeView'
 
-const useStyles = makeStyles({
+const useStyles = makeStyles()({
   linearBlocks: {
     whiteSpace: 'nowrap',
     textAlign: 'left',
@@ -39,7 +39,7 @@ const useStyles = makeStyles({
 })
 const RenderedBlocks = observer(
   ({ model }: { model: BaseLinearDisplayModel }) => {
-    const classes = useStyles()
+    const { classes } = useStyles()
     const { blockDefinitions, blockState } = model
     return (
       <>
@@ -95,7 +95,7 @@ const RenderedBlocks = observer(
   },
 )
 function LinearBlocks({ model }: { model: BaseLinearDisplayModel }) {
-  const classes = useStyles()
+  const { classes } = useStyles()
   const { blockDefinitions } = model
   const viewModel = getContainingView(model) as LinearGenomeViewModel
   return (

package/src/BaseLinearDisplay/components/ServerSideRenderedBlockContent.tsx

@@ -1,13 +1,12 @@
 import React, { useEffect, useState } from 'react'
-import Typography from '@material-ui/core/Typography'
-import { makeStyles } from '@material-ui/core/styles'
+import { Typography, Button } from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
 import { observer } from 'mobx-react'
 import { getParent } from 'mobx-state-tree'
 import { getParentRenderProps } from '@jbrowse/core/util/tracks'
-import Button from '@material-ui/core/Button'
-import RefreshIcon from '@material-ui/icons/Refresh'
+import RefreshIcon from '@mui/icons-material/Refresh'
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles()(theme => ({
   loading: {
     paddingLeft: '0.6em',
     backgroundColor: theme.palette.action.disabledBackground,
@@ -73,7 +72,7 @@ function Repeater({ children }: { children: React.ReactNode }) {
 const LoadingMessage = observer(({ model }: { model: any }) => {
   // only show the loading message after 300ms to prevent excessive flickering
   const [shown, setShown] = useState(false)
-  const classes = useStyles()
+  const { classes } = useStyles()
   useEffect(() => {
     let killed = false
     const timeout = setTimeout(() => {
@@ -108,7 +107,7 @@ function BlockMessage({
 }: {
   messageContent: string | React.ReactNode
 }) {
-  const classes = useStyles()
+  const { classes } = useStyles()
 
   return React.isValidElement(messageContent) ? (
     <div className={classes.blockReactNodeMessage}>{messageContent}</div>
@@ -128,7 +127,7 @@ function BlockError({
   reload: () => void
   displayHeight: number
 }) {
-  const classes = useStyles()
+  const { classes } = useStyles()
   return (
     <div className={classes.blockError} style={{ height: displayHeight }}>
       {reload ? (

package/src/BaseLinearDisplay/components/Tooltip.tsx

@@ -1,7 +1,9 @@
 import React, { useState, useMemo } from 'react'
 import { getConf } from '@jbrowse/core/configuration'
+import { SanitizedHTML } from '@jbrowse/core/ui'
 import { observer } from 'mobx-react'
-import { Portal, alpha, makeStyles } from '@material-ui/core'
+import { Portal, alpha } from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
 import { usePopper } from 'react-popper'
 
 // locals
@@ -10,7 +12,7 @@ import { BaseLinearDisplayModel } from '../models/BaseLinearDisplayModel'
 function round(value: number) {
   return Math.round(value * 1e5) / 1e5
 }
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles()(theme => ({
   // these styles come from
   // https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Tooltip/Tooltip.js
   tooltip: {
@@ -31,7 +33,15 @@ const TooltipContents = React.forwardRef<
   HTMLDivElement,
   { message: React.ReactNode | string }
 >(({ message }: { message: React.ReactNode | string }, ref) => {
-  return <div ref={ref}>{message}</div>
+  return (
+    <div ref={ref}>
+      {React.isValidElement(message) ? (
+        message
+      ) : message ? (
+        <SanitizedHTML html={String(message)} />
+      ) : null}
+    </div>
+  )
 })
 
 type Coord = [number, number]
@@ -43,7 +53,7 @@ const Tooltip = observer(
     model: BaseLinearDisplayModel
     clientMouseCoord: Coord
   }) => {
-    const classes = useStyles()
+    const { classes } = useStyles()
     const { featureUnderMouse } = model
     const [width, setWidth] = useState(0)
     const [popperElt, setPopperElt] = useState<HTMLDivElement | null>(null)

package/src/BaseLinearDisplay/models/BaseLinearDisplayModel.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import React from 'react'
-import { Button, Typography } from '@material-ui/core'
+import { Button, Typography } from '@mui/material'
 import { BaseDisplay } from '@jbrowse/core/pluggableElementTypes/models'
 import { getConf } from '@jbrowse/core/configuration'
 import { MenuItem } from '@jbrowse/core/ui'
@@ -25,7 +25,7 @@ import {
 import { autorun } from 'mobx'
 import { addDisposer, isAlive, types, Instance } from 'mobx-state-tree'
 // icons
-import MenuOpenIcon from '@material-ui/icons/MenuOpen'
+import MenuOpenIcon from '@mui/icons-material/MenuOpen'
 
 import { LinearGenomeViewModel, ExportSvgOptions } from '../../LinearGenomeView'
 import { Tooltip } from '../components/BaseLinearDisplay'
@@ -552,7 +552,7 @@ export const BaseLinearDisplay = types
     renderProps() {
       const view = getContainingView(self) as LGV
       return {
-        ...getParentRenderProps(self),
+        ...(getParentRenderProps(self) as any),
         notReady:
           self.currBpPerPx !== view.bpPerPx || !self.estimatedRegionStats,
         rpcDriverName: self.rpcDriverName,
@@ -679,7 +679,9 @@ export const BaseLinearDisplay = types
     },
   }))
   .postProcessSnapshot(self => {
-    const { blockState, ...rest } = self
+    // xref https://github.com/mobxjs/mobx-state-tree/issues/1524 for Omit
+    const r = self as Omit<typeof self, symbol>
+    const { blockState, ...rest } = r
     return rest
   })
 

package/src/BaseLinearDisplay/models/serverSideRenderedBlock.ts

@@ -163,7 +163,7 @@ const blockState = types
         self.maxHeightReached = false
         self.ReactComponent = ServerSideRenderedBlockContent
         self.renderProps = undefined
-        getParent(self, 2).reload()
+        getParent<any>(self, 2).reload()
       },
       beforeDestroy() {
         if (renderInProgress && !renderInProgress.signal.aborted) {

package/src/LinearBasicDisplay/components/SetMaxHeight.tsx

@@ -9,12 +9,12 @@ import {
   IconButton,
   Typography,
   TextField,
-  makeStyles,
-} from '@material-ui/core'
+} from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
 
-import CloseIcon from '@material-ui/icons/Close'
+import CloseIcon from '@mui/icons-material/Close'
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles()(theme => ({
   root: {
     width: 500,
   },
@@ -29,15 +29,17 @@ const useStyles = makeStyles(theme => ({
   },
 }))
 
-function SetMaxHeightDlg(props: {
+function SetMaxHeightDlg({
+  model,
+  handleClose,
+}: {
   model: {
     maxHeight?: number
     setMaxHeight: Function
   }
   handleClose: () => void
 }) {
-  const { model, handleClose } = props
-  const classes = useStyles()
+  const { classes } = useStyles()
   const { maxHeight = '' } = model
   const [max, setMax] = useState(`${maxHeight}`)
 
@@ -54,6 +56,7 @@ function SetMaxHeightDlg(props: {
           aria-label="close"
           className={classes.closeButton}
           onClick={handleClose}
+          size="large"
         >
           <CloseIcon />
         </IconButton>

package/src/LinearBasicDisplay/model.ts

@@ -9,7 +9,7 @@ import { MenuItem } from '@jbrowse/core/ui'
 import { types, getEnv, Instance } from 'mobx-state-tree'
 
 // icons
-import VisibilityIcon from '@material-ui/icons/Visibility'
+import VisibilityIcon from '@mui/icons-material/Visibility'
 
 // locals
 import { BaseLinearDisplay } from '../BaseLinearDisplay'
@@ -42,7 +42,7 @@ const stateModelFactory = (configSchema: AnyConfigurationSchemaType) =>
       get showDescriptions() {
         return (
           self.trackShowDescriptions ??
-          getConf(self, ['renderer', 'showLabels'])
+          getConf(self, ['renderer', 'showDescriptions'])
         )
       },
 
@@ -51,19 +51,23 @@ const stateModelFactory = (configSchema: AnyConfigurationSchemaType) =>
       },
 
       get displayMode() {
-        const displayMode = getConf(self, ['renderer', 'displayMode'])
-        return self.trackDisplayMode ?? displayMode
+        return (
+          self.trackDisplayMode ?? getConf(self, ['renderer', 'displayMode'])
+        )
       },
+    }))
+    .views(self => ({
       get rendererConfig() {
         const configBlob = getConf(self, ['renderer']) || {}
+        const config = configBlob as Omit<typeof configBlob, symbol>
 
         return self.rendererType.configSchema.create(
           {
-            ...configBlob,
-            showLabels: this.showLabels,
-            showDescriptions: this.showDescriptions,
-            displayMode: this.displayMode,
-            maxHeight: this.maxHeight,
+            ...config,
+            showLabels: self.showLabels,
+            showDescriptions: self.showDescriptions,
+            displayMode: self.displayMode,
+            maxHeight: self.maxHeight,
           },
           getEnv(self),
         )
@@ -92,9 +96,13 @@ const stateModelFactory = (configSchema: AnyConfigurationSchemaType) =>
       return {
         renderProps() {
           const config = self.rendererConfig
+          const superProps = superRenderProps()
+
+          const superPropsOmit = superProps as Omit<typeof superProps, symbol>
 
           return {
-            ...superRenderProps(),
+            ...superPropsOmit,
+
             config,
           }
         },
@@ -116,9 +124,7 @@ const stateModelFactory = (configSchema: AnyConfigurationSchemaType) =>
               icon: VisibilityIcon,
               type: 'checkbox',
               checked: self.showDescriptions,
-              onClick: () => {
-                self.toggleShowDescriptions()
-              },
+              onClick: () => self.toggleShowDescriptions(),
             },
             {
               label: 'Display mode',
@@ -138,9 +144,9 @@ const stateModelFactory = (configSchema: AnyConfigurationSchemaType) =>
             {
               label: 'Set max height',
               onClick: () => {
-                getSession(self).queueDialog(doneCallback => [
+                getSession(self).queueDialog(handleClose => [
                   SetMaxHeightDlg,
-                  { model: self, handleClose: doneCallback },
+                  { model: self, handleClose },
                 ])
               },
             },

package/src/LinearGenomeView/components/CenterLine.tsx

@@ -1,12 +1,11 @@
-import { makeStyles } from '@material-ui/core/styles'
-import { observer, PropTypes as MobxPropTypes } from 'mobx-react'
 import React, { useRef } from 'react'
-import { Instance } from 'mobx-state-tree'
-import { LinearGenomeViewStateModel } from '..'
+import { makeStyles } from 'tss-react/mui'
+import { observer } from 'mobx-react'
+import { LinearGenomeViewModel } from '..'
 
-type LGV = Instance<LinearGenomeViewStateModel>
+type LGV = LinearGenomeViewModel
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles()(() => ({
   centerLineContainer: {
     background: 'transparent',
     height: '100%',
@@ -28,7 +27,7 @@ const useStyles = makeStyles(() => ({
 function CenterLine({ model }: { model: LGV }) {
   const { bpPerPx, centerLineInfo, trackHeights, tracks, width } = model
   const ref = useRef<HTMLDivElement>(null)
-  const classes = useStyles()
+  const { classes } = useStyles()
   const startingPosition = width / 2
 
   return tracks.length ? (
@@ -63,8 +62,4 @@ function CenterLine({ model }: { model: LGV }) {
   ) : null
 }
 
-CenterLine.propTypes = {
-  model: MobxPropTypes.objectOrObservableObject.isRequired,
-}
-
 export default observer(CenterLine)

package/src/LinearGenomeView/components/ExportSvgDialog.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react'
+import { makeStyles } from 'tss-react/mui'
 import {
   Button,
   Checkbox,
@@ -11,13 +12,12 @@ import {
   IconButton,
   TextField,
   Typography,
-  makeStyles,
-} from '@material-ui/core'
+} from '@mui/material'
 import { ErrorMessage } from '@jbrowse/core/ui'
-import CloseIcon from '@material-ui/icons/Close'
+import CloseIcon from '@mui/icons-material/Close'
 import { LinearGenomeViewModel as LGV } from '..'
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles()(theme => ({
   closeButton: {
     position: 'absolute',
     right: theme.spacing(1),
@@ -48,7 +48,7 @@ export default function ExportSvgDlg({
   const [loading, setLoading] = useState(false)
   const [filename, setFilename] = useState('jbrowse.svg')
   const [error, setError] = useState<unknown>()
-  const classes = useStyles()
+  const { classes } = useStyles()
   return (
     <Dialog open onClose={handleClose}>
       <DialogTitle>