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

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>

package/src/LinearGenomeView/components/Header.tsx

@@ -1,18 +1,13 @@
 import React from 'react'
 import { observer } from 'mobx-react'
-import {
-  Button,
-  FormGroup,
-  Typography,
-  makeStyles,
-  alpha,
-} from '@material-ui/core'
-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 {
@@ -23,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',
@@ -59,7 +55,7 @@ const useStyles = makeStyles(theme => ({
 }))
 
 const HeaderButtons = observer(({ model }: { model: LGV }) => {
-  const classes = useStyles()
+  const { classes } = useStyles()
   return (
     <Button
       onClick={model.activateTrackSelector}
@@ -74,7 +70,7 @@ const HeaderButtons = observer(({ model }: { model: LGV }) => {
 })
 
 function PanControls({ model }: { model: LGV }) {
-  const classes = useStyles()
+  const { classes } = useStyles()
   return (
     <>
       <Button
@@ -96,17 +92,17 @@ 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}>
-      {Math.round(coarseTotalBp).toLocaleString('en-US')} bp
+      {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,18 +25,15 @@ export default function HelpDialog({
 }: {
   handleClose: () => void
 }) {
-  const classes = useStyles()
+  const { classes } = useStyles()
   return (
     <Dialog open maxWidth="xl" onClose={handleClose}>
       <DialogTitle>
         Using the search box
         {handleClose ? (
           <IconButton
-            data-testid="close-resultsDialog"
             className={classes.closeButton}
-            onClick={() => {
-              handleClose()
-            }}
+            onClick={() => handleClose()}
           >
             <CloseIcon />
           </IconButton>
@@ -81,6 +78,10 @@ export default function HelpDialog({
             <code>chr1:1-100[rev] chr2:1-100</code> - open up the first region
             in the horizontally flipped orientation
           </li>
+          <li>
+            <code>chr1 100 200</code> - use whitespace separated refname, start,
+            end
+          </li>
         </ul>
       </DialogContent>
       <Divider />

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('100 bp')
+    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)
@@ -145,7 +155,7 @@ describe('<LinearGenomeView />', () => {
       <LinearGenomeView model={model} />,
     )
     await findByText('Foo Track')
-    await findByText('798 bp')
+    await findByText('798bp')
     await findAllByTestId('svgfeatures')
 
     expect(container.firstChild).toMatchSnapshot()

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 (
@@ -92,16 +93,22 @@ const LinearGenomeView = observer(({ model }: { model: LGV }) => {
       <TracksContainer model={model}>
         {!tracks.length ? (
           <Paper variant="outlined" className={classes.note}>
-            <Typography>No tracks active.</Typography>
-            <Button
-              variant="contained"
-              color="primary"
-              onClick={model.activateTrackSelector}
-              style={{ zIndex: 1000 }}
-              startIcon={<TrackSelectorIcon />}
-            >
-              Open track selector
-            </Button>
+            {!model.hideNoTracksActive ? (
+              <>
+                <Typography>No tracks active.</Typography>
+                <Button
+                  variant="contained"
+                  color="primary"
+                  onClick={model.activateTrackSelector}
+                  style={{ zIndex: 1000 }}
+                  startIcon={<TrackSelectorIcon />}
+                >
+                  Open track selector
+                </Button>
+              </>
+            ) : (
+              <div style={{ height: '48px' }}></div>
+            )}
           </Paper>
         ) : (
           tracks.map(track => (

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