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

package/src/LinearGenomeView/components/{VerticalGuides.tsx → Gridlines.tsx}

@@ -1,14 +1,12 @@
+import React from 'react'
 import {
   ContentBlock,
   ElidedBlock,
   InterRegionPaddingBlock,
 } from '@jbrowse/core/util/blockTypes'
-import { makeStyles } from '@material-ui/core/styles'
-import clsx from 'clsx'
+import { makeStyles } from 'tss-react/mui'
 import { observer } from 'mobx-react'
-import { Instance } from 'mobx-state-tree'
-import React from 'react'
-import { LinearGenomeViewStateModel } from '..'
+import { LinearGenomeViewModel } from '..'
 import {
   ContentBlock as ContentBlockComponent,
   ElidedBlock as ElidedBlockComponent,
@@ -17,9 +15,9 @@ import {
 
 import { makeTicks } from '../util'
 
-type LGV = Instance<LinearGenomeViewStateModel>
+type LGV = LinearGenomeViewModel
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles()(theme => ({
   verticalGuidesZoomContainer: {
     position: 'absolute',
     height: '100%',
@@ -40,14 +38,14 @@ const useStyles = makeStyles(theme => ({
     width: 1,
   },
   majorTick: {
-    background: theme.palette.text.hint,
+    background: theme.palette.text.secondary,
   },
   minorTick: {
     background: theme.palette.divider,
   },
 }))
 const RenderedVerticalGuides = observer(({ model }: { model: LGV }) => {
-  const classes = useStyles()
+  const { classes, cx } = useStyles()
   return (
     <>
       {model.staticBlocks.map((block, index) => {
@@ -63,7 +61,7 @@ const RenderedVerticalGuides = observer(({ model }: { model: LGV }) => {
                 return (
                   <div
                     key={tick.base}
-                    className={clsx(
+                    className={cx(
                       classes.tick,
                       tick.type === 'major' || tick.type === 'labeledMajor'
                         ? classes.majorTick
@@ -94,7 +92,7 @@ const RenderedVerticalGuides = observer(({ model }: { model: LGV }) => {
   )
 })
 function VerticalGuides({ model }: { model: LGV }) {
-  const classes = useStyles()
+  const { classes } = useStyles()
   // find the block that needs pinning to the left side for context
   const offsetLeft = model.staticBlocks.offsetPx - model.offsetPx
   return (

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 (
@@ -63,17 +64,13 @@ const LinearGenomeView = observer(({ model }: { model: LGV }) => {
       {model.seqDialogDisplayed ? (
         <SequenceDialog
           model={model}
-          handleClose={() => {
-            model.setSequenceDialogOpen(false)
-          }}
+          handleClose={() => model.setSequenceDialogOpen(false)}
         />
       ) : null}
       {model.isSearchDialogDisplayed ? (
         <SearchResultsDialog
           model={model}
-          handleClose={() => {
-            model.setSearchResults(undefined, undefined)
-          }}
+          handleClose={() => model.setSearchResults(undefined, undefined)}
         />
       ) : null}
       {!hideHeader ? (

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)
 
@@ -111,8 +107,8 @@ function OverviewRubberBand({
   const [currentX, setCurrentX] = useState<number>()
   const [guideX, setGuideX] = useState<number>()
   const controlsRef = useRef<HTMLDivElement>(null)
-  const rubberBandRef = useRef(null)
-  const classes = useStyles()
+  const rubberBandRef = useRef<HTMLDivElement>(null)
+  const { classes } = useStyles()
   const mouseDragging = startX !== undefined
 
   useEffect(() => {
@@ -125,30 +121,25 @@ function OverviewRubberBand({
     }
 
     function globalMouseUp() {
-      if (
-        controlsRef.current &&
-        startX !== undefined &&
-        currentX !== undefined
-      ) {
+      // click and drag
+      if (startX !== undefined && currentX !== undefined) {
         if (Math.abs(currentX - startX) > 3) {
-          model.zoomToDisplayedRegions(
+          model.moveTo(
             overview.pxToBp(startX - cytobandOffset),
             overview.pxToBp(currentX - cytobandOffset),
           )
         }
       }
-      /* handling clicking and centering at a specific Bp */
-      if (
-        controlsRef.current &&
-        startX !== undefined &&
-        currentX === undefined
-      ) {
-        const clickedAt = overview.pxToBp(startX - cytobandOffset)
-        model.centerAt(
-          Math.round(clickedAt.coord),
-          clickedAt.refName,
-          clickedAt.index,
-        )
+
+      // just a click
+      if (startX !== undefined && currentX === undefined) {
+        const click = overview.pxToBp(startX - cytobandOffset)
+        if (!click.refName) {
+          getSession(model).notify('unknown position clicked')
+          console.error('unknown position clicked', click)
+        } else {
+          model.centerAt(Math.round(click.coord), click.refName, click.index)
+        }
       }
       setStartX(undefined)
       setCurrentX(undefined)

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({