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

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 { getTickDisplayStr2 } from '@jbrowse/core/util'
-import SearchBox from './SearchBox'
+import { Button, FormGroup, Typography, alpha } from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
+import { getBpDisplayStr } from '@jbrowse/core/util'
 
 // 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,17 +92,17 @@ function PanControls({ model }: { model: LGV }) {
 }
 
 const RegionWidth = observer(({ model }: { model: LGV }) => {
-  const classes = useStyles()
-  const { coarseTotalBp, bpPerPx } = model
+  const { classes } = useStyles()
+  const { coarseTotalBp } = model
   return (
     <Typography variant="body2" color="textSecondary" className={classes.bp}>
-      {getTickDisplayStr2(coarseTotalBp, bpPerPx)}
+      {getBpDisplayStr(coarseTotalBp)}
     </Typography>
   )
 })
 
 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,25 +1,19 @@
 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 { SearchType } from '@jbrowse/core/data_adapters/BaseAdapter'
-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'
+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
@@ -57,28 +51,6 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
     label: value,
   })
 
-  async function fetchResults(query: string, searchType?: SearchType) {
-    if (!textSearchManager) {
-      console.warn('No text search manager')
-    }
-
-    const textSearchResults = await textSearchManager?.search(
-      {
-        queryString: query,
-        searchType,
-      },
-      searchScope,
-      rankSearchResults,
-    )
-
-    const refNameResults = assembly?.allRefNames
-      ?.filter(refName => refName.startsWith(query))
-      .map(r => new BaseResult({ label: r }))
-      .slice(0, 10)
-
-    return [...(refNameResults || []), ...(textSearchResults || [])]
-  }
-
   // gets a string as input, or use stored option results from previous query,
   // then re-query and
   // 1) if it has multiple results: pop a dialog
@@ -105,7 +77,14 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
       ) {
         model.navToLocString(location, selectedAsm)
       } else {
-        const results = await fetchResults(input, 'exact')
+        const results = await fetchResults({
+          queryString: input,
+          searchType: 'exact',
+          searchScope,
+          rankSearchResults,
+          textSearchManager,
+          assembly,
+        })
         if (results.length > 1) {
           model.setSearchResults(results, input.toLowerCase())
           return
@@ -165,7 +144,15 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
                   <CloseIcon style={{ color: 'red' }} />
                 ) : value ? (
                   <RefNameAutocomplete
-                    fetchResults={fetchResults}
+                    fetchResults={queryString =>
+                      fetchResults({
+                        queryString,
+                        assembly,
+                        textSearchManager,
+                        rankSearchResults,
+                        searchScope,
+                      })
+                    }
                     model={model}
                     assemblyName={assemblyError ? undefined : selectedAsm}
                     value={value}

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)
 
@@ -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)