@jbrowse/plugin-linear-genome-view 1.7.11 → 2.0.0

package/src/LinearGenomeView/components/Header.tsx

@@ -1,19 +1,13 @@
 import React from 'react'
 import { observer } from 'mobx-react'
-import {
-  Button,
-  FormGroup,
-  Typography,
-  makeStyles,
-  alpha,
-} from '@material-ui/core'
+import { Button, FormGroup, Typography, alpha } from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
 import { getBpDisplayStr } from '@jbrowse/core/util'
-import SearchBox from './SearchBox'
 
 // icons
 import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons'
-import ArrowForwardIcon from '@material-ui/icons/ArrowForward'
-import ArrowBackIcon from '@material-ui/icons/ArrowBack'
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward'
+import ArrowBackIcon from '@mui/icons-material/ArrowBack'
 
 // locals
 import {
@@ -24,9 +18,10 @@ import {
 } from '..'
 import OverviewScaleBar from './OverviewScaleBar'
 import ZoomControls from './ZoomControls'
+import SearchBox from './SearchBox'
 
 type LGV = LinearGenomeViewModel
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles()(theme => ({
   headerBar: {
     height: HEADER_BAR_HEIGHT,
     display: 'flex',
@@ -60,7 +55,7 @@ const useStyles = makeStyles(theme => ({
 }))
 
 const HeaderButtons = observer(({ model }: { model: LGV }) => {
-  const classes = useStyles()
+  const { classes } = useStyles()
   return (
     <Button
       onClick={model.activateTrackSelector}
@@ -75,7 +70,7 @@ const HeaderButtons = observer(({ model }: { model: LGV }) => {
 })
 
 function PanControls({ model }: { model: LGV }) {
-  const classes = useStyles()
+  const { classes } = useStyles()
   return (
     <>
       <Button
@@ -97,7 +92,7 @@ function PanControls({ model }: { model: LGV }) {
 }
 
 const RegionWidth = observer(({ model }: { model: LGV }) => {
-  const classes = useStyles()
+  const { classes } = useStyles()
   const { coarseTotalBp } = model
   return (
     <Typography variant="body2" color="textSecondary" className={classes.bp}>
@@ -107,7 +102,7 @@ const RegionWidth = observer(({ model }: { model: LGV }) => {
 })
 
 const Controls = ({ model }: { model: LGV }) => {
-  const classes = useStyles()
+  const { classes } = useStyles()
   return (
     <div className={classes.headerBar}>
       <HeaderButtons model={model} />

package/src/LinearGenomeView/components/HelpDialog.tsx

@@ -7,11 +7,11 @@ import {
   DialogTitle,
   Divider,
   IconButton,
-  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'
 
-export const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles()(theme => ({
   closeButton: {
     position: 'absolute',
     right: theme.spacing(1),
@@ -25,7 +25,7 @@ export default function HelpDialog({
 }: {
   handleClose: () => void
 }) {
-  const classes = useStyles()
+  const { classes } = useStyles()
   return (
     <Dialog open maxWidth="xl" onClose={handleClose}>
       <DialogTitle>

package/src/LinearGenomeView/components/ImportForm.tsx

@@ -1,17 +1,11 @@
 import React, { useState, lazy } from 'react'
+import { makeStyles } from 'tss-react/mui'
 import { observer } from 'mobx-react'
 import { getSession } from '@jbrowse/core/util'
-import {
-  Button,
-  CircularProgress,
-  Container,
-  Grid,
-  makeStyles,
-} from '@material-ui/core'
-import ErrorMessage from '@jbrowse/core/ui/ErrorMessage'
+import { Button, CircularProgress, Container, Grid } from '@mui/material'
+import { ErrorMessage, AssemblySelector } from '@jbrowse/core/ui'
 import BaseResult from '@jbrowse/core/TextSearch/BaseResults'
-import AssemblySelector from '@jbrowse/core/ui/AssemblySelector'
-import CloseIcon from '@material-ui/icons/Close'
+import CloseIcon from '@mui/icons-material/Close'
 
 // locals
 import RefNameAutocomplete from './RefNameAutocomplete'
@@ -19,7 +13,7 @@ import { fetchResults } from './util'
 import { LinearGenomeViewModel, WIDGET_HEIGHT } from '..'
 const SearchResultsDialog = lazy(() => import('./SearchResultsDialog'))
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles()(theme => ({
   importFormContainer: {
     padding: theme.spacing(2),
   },
@@ -34,7 +28,7 @@ const useStyles = makeStyles(theme => ({
 type LGV = LinearGenomeViewModel
 
 const ImportForm = observer(({ model }: { model: LGV }) => {
-  const classes = useStyles()
+  const { classes } = useStyles()
   const session = getSession(model)
   const { assemblyNames, assemblyManager, textSearchManager } = session
   const { rankSearchResults, isSearchDialogDisplayed, error } = model

package/src/LinearGenomeView/components/LinearGenomeView.test.js

@@ -35,11 +35,12 @@ describe('<LinearGenomeView />', () => {
     model.setWidth(800)
     const { findByText } = render(<LinearGenomeView model={model} />)
     expect(model.displayedRegions.length).toEqual(0)
-    fireEvent.click(await findByText('Open'))
-    await waitFor(() => {
-      expect(model.displayedRegions.length).toEqual(1)
-    })
-  })
+    const elt = await findByText('Open')
+    await waitFor(() => expect(elt.getAttribute('disabled')).toBe(null))
+    fireEvent.click(elt)
+    await waitFor(() => expect(model.displayedRegions.length).toEqual(1), 15000)
+  }, 15000)
+
   it('renders one track, one region', async () => {
     const session = createTestSession()
     session.addAssemblyConf(assemblyConf)
@@ -75,13 +76,22 @@ describe('<LinearGenomeView />', () => {
     })
     const model = session.views[0]
     model.setWidth(800)
-    const { container, findByText } = render(<LinearGenomeView model={model} />)
+    const { container, getByPlaceholderText, findByText } = render(
+      <LinearGenomeView model={model} />,
+    )
     await findByText('Foo Track')
     // test needs to wait until it's updated to display 100 bp in the header to
     // make snapshot pass
     await findByText('100bp')
+
+    await waitFor(() => {
+      expect(getByPlaceholderText('Search for location').value).toEqual(
+        'ctgA:1..100',
+      )
+    })
     expect(container.firstChild).toMatchSnapshot()
   })
+
   it('renders two tracks, two regions', async () => {
     const session = createTestSession()
     session.addAssemblyConf(assemblyConf)

package/src/LinearGenomeView/components/LinearGenomeView.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { Button, Paper, Typography, makeStyles } from '@material-ui/core'
+import { Button, Paper, Typography } from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
 import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons'
 import { observer } from 'mobx-react'
 
@@ -15,7 +16,7 @@ import SearchResultsDialog from './SearchResultsDialog'
 
 type LGV = LinearGenomeViewModel
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles()(theme => ({
   note: {
     textAlign: 'center',
     paddingTop: theme.spacing(1),
@@ -45,7 +46,7 @@ const useStyles = makeStyles(theme => ({
 
 const LinearGenomeView = observer(({ model }: { model: LGV }) => {
   const { tracks, error, hideHeader, initialized, hasDisplayedRegions } = model
-  const classes = useStyles()
+  const { classes } = useStyles()
 
   if (!initialized && !error) {
     return (

package/src/LinearGenomeView/components/MiniControls.tsx

@@ -1,10 +1,9 @@
 import React, { useState } from 'react'
 import { observer } from 'mobx-react'
-import IconButton from '@material-ui/core/IconButton'
-import ZoomIn from '@material-ui/icons/ZoomIn'
-import ZoomOut from '@material-ui/icons/ZoomOut'
-import ArrowDown from '@material-ui/icons/KeyboardArrowDown'
-import Paper from '@material-ui/core/Paper'
+import { IconButton, Paper } from '@mui/material'
+import ZoomIn from '@mui/icons-material/ZoomIn'
+import ZoomOut from '@mui/icons-material/ZoomOut'
+import ArrowDown from '@mui/icons-material/KeyboardArrowDown'
 import Menu from '@jbrowse/core/ui/Menu'
 import { LinearGenomeViewModel } from '..'
 
@@ -14,38 +13,30 @@ const MiniControls = observer((props: { model: LinearGenomeViewModel }) => {
   const [anchorEl, setAnchorEl] = useState<HTMLElement>()
 
   return (
-    <>
-      <Paper style={{ background: '#aaa7' }}>
-        <IconButton
-          color="secondary"
-          onClick={event => {
-            setAnchorEl(event.currentTarget)
-          }}
-        >
-          <ArrowDown />
-        </IconButton>
+    <Paper style={{ background: '#aaa7' }}>
+      <IconButton
+        color="secondary"
+        onClick={event => setAnchorEl(event.currentTarget)}
+      >
+        <ArrowDown fontSize="small" />
+      </IconButton>
 
-        <IconButton
-          data-testid="zoom_out"
-          onClick={() => {
-            model.zoom(bpPerPx * 2)
-          }}
-          disabled={bpPerPx >= maxBpPerPx - 0.0001 || scaleFactor !== 1}
-          color="secondary"
-        >
-          <ZoomOut />
-        </IconButton>
-        <IconButton
-          data-testid="zoom_in"
-          onClick={() => {
-            model.zoom(model.bpPerPx / 2)
-          }}
-          disabled={bpPerPx <= minBpPerPx + 0.0001 || scaleFactor !== 1}
-          color="secondary"
-        >
-          <ZoomIn />
-        </IconButton>
-      </Paper>
+      <IconButton
+        data-testid="zoom_out"
+        onClick={() => model.zoom(bpPerPx * 2)}
+        disabled={bpPerPx >= maxBpPerPx - 0.0001 || scaleFactor !== 1}
+        color="secondary"
+      >
+        <ZoomOut fontSize="small" />
+      </IconButton>
+      <IconButton
+        data-testid="zoom_in"
+        onClick={() => model.zoom(model.bpPerPx / 2)}
+        disabled={bpPerPx <= minBpPerPx + 0.0001 || scaleFactor !== 1}
+        color="secondary"
+      >
+        <ZoomIn fontSize="small" />
+      </IconButton>
       <Menu
         anchorEl={anchorEl}
         open={Boolean(anchorEl)}
@@ -53,12 +44,10 @@ const MiniControls = observer((props: { model: LinearGenomeViewModel }) => {
           callback()
           setAnchorEl(undefined)
         }}
-        onClose={() => {
-          setAnchorEl(undefined)
-        }}
+        onClose={() => setAnchorEl(undefined)}
         menuItems={model.menuItems()}
       />
-    </>
+    </Paper>
   )
 })
 

package/src/LinearGenomeView/components/OverviewRubberBand.tsx

@@ -1,11 +1,6 @@
 import React, { useRef, useEffect, useState } from 'react'
-import {
-  Popover,
-  Tooltip,
-  Typography,
-  makeStyles,
-  alpha,
-} from '@material-ui/core'
+import { Popover, Tooltip, Typography, alpha } from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
 import { getSession, stringify } from '@jbrowse/core/util'
 import { observer, PropTypes as MobxPropTypes } from 'mobx-react'
 import ReactPropTypes from 'prop-types'
@@ -14,7 +9,8 @@ import { LinearGenomeViewModel, HEADER_OVERVIEW_HEIGHT } from '..'
 
 type LGV = LinearGenomeViewModel
 
-const useStyles = makeStyles(theme => {
+const useStyles = makeStyles()(theme => {
+  // @ts-ignore
   const { tertiary, primary } = theme.palette
   const background = tertiary
     ? alpha(tertiary.main, 0.7)
@@ -66,7 +62,7 @@ const HoverTooltip = observer(
     guideX: number
     overview: Base1DViewModel
   }) => {
-    const classes = useStyles()
+    const { classes } = useStyles()
     const { cytobandOffset } = model
     const { assemblyManager } = getSession(model)
 
@@ -112,7 +108,7 @@ function OverviewRubberBand({
   const [guideX, setGuideX] = useState<number>()
   const controlsRef = useRef<HTMLDivElement>(null)
   const rubberBandRef = useRef(null)
-  const classes = useStyles()
+  const { classes } = useStyles()
   const mouseDragging = startX !== undefined
 
   useEffect(() => {

package/src/LinearGenomeView/components/OverviewScaleBar.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
-import { Typography, makeStyles, useTheme, alpha } from '@material-ui/core'
+import { Typography, useTheme, alpha } from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
 import { observer } from 'mobx-react'
 import { Instance } from 'mobx-state-tree'
-import clsx from 'clsx'
 
 import Base1DView, { Base1DViewModel } from '@jbrowse/core/util/Base1DViewModel'
 import { getSession, getTickDisplayStr } from '@jbrowse/core/util'
@@ -20,59 +20,57 @@ import OverviewRubberBand from './OverviewRubberBand'
 
 const wholeSeqSpacer = 2
 
-const useStyles = makeStyles(theme => {
-  return {
-    scaleBar: {
-      height: HEADER_OVERVIEW_HEIGHT,
-    },
-    scaleBarBorder: {
-      border: '1px solid',
-    },
-    scaleBarContig: {
-      backgroundColor: theme.palette.background.default,
-      position: 'absolute',
-      top: 0,
-      height: HEADER_OVERVIEW_HEIGHT,
-    },
-    scaleBarContigForward: {
-      backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 9'%3E%3Cpath d='M-.1 0L6 4.5L-.1 9' fill='none' stroke='%23ddd'/%3E%3C/svg%3E")`,
-      backgroundRepeat: 'repeat',
-    },
-    scaleBarContigReverse: {
-      backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 9'%3E%3Cpath d='M6 0L0 4.5L6 9' fill='none' stroke='%23ddd'/%3E%3C/svg%3E")`,
-      backgroundRepeat: 'repeat',
-    },
-
-    scaleBarRefName: {
-      position: 'absolute',
-      fontWeight: 'bold',
-      pointerEvents: 'none',
-      zIndex: 100,
-    },
-    scaleBarLabel: {
-      height: HEADER_OVERVIEW_HEIGHT,
-      position: 'absolute',
-      display: 'flex',
-      justifyContent: 'center',
-      pointerEvents: 'none',
-    },
-    scaleBarVisibleRegion: {
-      position: 'absolute',
-      height: HEADER_OVERVIEW_HEIGHT,
-      pointerEvents: 'none',
-      zIndex: 100,
-      border: '1px solid',
-    },
-    overview: {
-      height: HEADER_BAR_HEIGHT,
-      position: 'relative',
-    },
-    overviewSvg: {
-      width: '100%',
-      position: 'absolute',
-    },
-  }
-})
+const useStyles = makeStyles()(theme => ({
+  scaleBar: {
+    height: HEADER_OVERVIEW_HEIGHT,
+  },
+  scaleBarBorder: {
+    border: '1px solid',
+  },
+  scaleBarContig: {
+    backgroundColor: theme.palette.background.default,
+    position: 'absolute',
+    top: 0,
+    height: HEADER_OVERVIEW_HEIGHT,
+  },
+  scaleBarContigForward: {
+    backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 9'%3E%3Cpath d='M-.1 0L6 4.5L-.1 9' fill='none' stroke='%23ddd'/%3E%3C/svg%3E")`,
+    backgroundRepeat: 'repeat',
+  },
+  scaleBarContigReverse: {
+    backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 9'%3E%3Cpath d='M6 0L0 4.5L6 9' fill='none' stroke='%23ddd'/%3E%3C/svg%3E")`,
+    backgroundRepeat: 'repeat',
+  },
+
+  scaleBarRefName: {
+    position: 'absolute',
+    fontWeight: 'bold',
+    pointerEvents: 'none',
+    zIndex: 100,
+  },
+  scaleBarLabel: {
+    height: HEADER_OVERVIEW_HEIGHT,
+    position: 'absolute',
+    display: 'flex',
+    justifyContent: 'center',
+    pointerEvents: 'none',
+  },
+  scaleBarVisibleRegion: {
+    position: 'absolute',
+    height: HEADER_OVERVIEW_HEIGHT,
+    pointerEvents: 'none',
+    zIndex: 100,
+    border: '1px solid',
+  },
+  overview: {
+    height: HEADER_BAR_HEIGHT,
+    position: 'relative',
+  },
+  overviewSvg: {
+    width: '100%',
+    position: 'absolute',
+  },
+}))
 
 const Polygon = observer(
   ({
@@ -89,6 +87,8 @@ const Polygon = observer(
     const { interRegionPaddingWidth, offsetPx, dynamicBlocks, cytobandOffset } =
       model
     const { contentBlocks, totalWidthPxWithoutBorders } = dynamicBlocks
+
+    // @ts-ignore
     const { tertiary, primary } = theme.palette
     const polygonColor = tertiary ? tertiary.light : primary.light
 
@@ -305,7 +305,7 @@ const OverviewBox = observer(
     block: ContentBlock
     overview: Base1DViewModel
   }) => {
-    const classes = useStyles()
+    const { classes, cx } = useStyles()
     const { cytobandOffset, bpPerPx, showCytobands } = model
     const { start, end, reversed, refName, assemblyName } = block
     const { majorPitch } = chooseGridPitch(scale, 120, 15)
@@ -335,7 +335,7 @@ const OverviewBox = observer(
           {refName}
         </Typography>
         <div
-          className={clsx(
+          className={cx(
             classes.scaleBarContig,
             canDisplayCytobands
               ? undefined
@@ -392,11 +392,13 @@ const ScaleBar = observer(
     overview: Base1DViewModel
     scale: number
   }) => {
-    const classes = useStyles()
+    const { classes } = useStyles()
     const theme = useTheme()
     const { dynamicBlocks, showCytobands, cytobandOffset } = model
     const visibleRegions = dynamicBlocks.contentBlocks
     const overviewVisibleRegions = overview.dynamicBlocks
+
+    // @ts-ignore
     const { tertiary, primary } = theme.palette
     const scaleBarColor = tertiary ? tertiary.light : primary.light
 
@@ -467,7 +469,7 @@ function OverviewScaleBar({
   model: LGV
   children: React.ReactNode
 }) {
-  const classes = useStyles()
+  const { classes } = useStyles()
   const { totalBp, width, cytobandOffset, displayedRegions } = model
 
   const overview = Base1DView.create({

package/src/LinearGenomeView/components/RefNameAutocomplete.tsx

@@ -5,20 +5,17 @@ import BaseResult, {
   RefSequenceResult,
 } from '@jbrowse/core/TextSearch/BaseResults'
 import {
+  Autocomplete,
   CircularProgress,
   IconButton,
   InputAdornment,
-  Popper,
-  PopperProps,
   TextField,
   TextFieldProps as TFP,
-  Typography,
-} from '@material-ui/core'
+} from '@mui/material'
 
 // icons
-import SearchIcon from '@material-ui/icons/Search'
-import Autocomplete from '@material-ui/lab/Autocomplete'
-import HelpIcon from '@material-ui/icons/Help'
+import SearchIcon from '@mui/icons-material/Search'
+import HelpIcon from '@mui/icons-material/Help'
 
 // locals
 import { LinearGenomeViewModel } from '..'
@@ -45,25 +42,6 @@ function filterOptions(options: Option[], searchQuery: string) {
   })
 }
 
-// MyPopper used to expand search results box wider if needed
-// xref https://stackoverflow.com/a/63583835/2129219
-const MyPopper = function (
-  props: PopperProps & { style?: { width?: unknown } },
-) {
-  const { style } = props
-  return (
-    <Popper
-      {...props}
-      style={{
-        width: 'fit-content',
-        minWidth: Math.min(+(style?.width || 0), 200),
-        background: 'white',
-      }}
-      placement="bottom-start"
-    />
-  )
-}
-
 function RefNameAutocomplete({
   model,
   onSelect,
@@ -164,7 +142,6 @@ function RefNameAutocomplete({
         data-testid="autocomplete"
         disableListWrap
         disableClearable
-        PopperComponent={MyPopper}
         disabled={!assemblyName}
         freeSolo
         includeInputInList
@@ -226,11 +203,11 @@ function RefNameAutocomplete({
           const { helperText, InputProps = {} } = TextFieldProps
           return (
             <TextField
-              onBlur={() => {
+              onBlur={() =>
                 // this is used to restore a refName or the non-user-typed input
                 // to the box on blurring
                 setInputValue(inputBoxVal)
-              }}
+              }
               {...params}
               {...TextFieldProps}
               helperText={helperText}
@@ -244,12 +221,13 @@ function RefNameAutocomplete({
                       <CircularProgress color="inherit" size={20} />
                     ) : (
                       <InputAdornment position="end" style={{ marginRight: 7 }}>
-                        <SearchIcon />
+                        <SearchIcon fontSize="small" />
                         {showHelp ? (
                           <IconButton
                             onClick={() => setHelpDialogDisplayed(true)}
+                            size="small"
                           >
-                            <HelpIcon />
+                            <HelpIcon fontSize="small" />
                           </IconButton>
                         ) : null}
                       </InputAdornment>
@@ -259,23 +237,14 @@ function RefNameAutocomplete({
                 ),
               }}
               placeholder="Search for location"
-              onChange={e => {
-                setCurrentSearch(e.target.value)
-              }}
+              onChange={e => setCurrentSearch(e.target.value)}
             />
           )
         }}
-        renderOption={option => {
-          const { result } = option
-          const component = result.getRenderingComponent()
-          if (component && React.isValidElement(component)) {
-            return component
-          }
-
-          return <Typography noWrap>{result.getDisplayString()}</Typography>
-        }}
         getOptionLabel={option =>
-          (typeof option === 'string' ? option : option.result.getLabel()) || ''
+          (typeof option === 'string'
+            ? option
+            : option.result.getDisplayString()) || ''
         }
       />
       {isHelpDialogDisplayed ? (