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

package/src/LinearGenomeView/components/SearchBox.tsx

@@ -1,16 +1,16 @@
 import React from 'react'
 import { observer } from 'mobx-react'
-import { makeStyles, useTheme, alpha } from '@material-ui/core'
+import { useTheme, alpha } from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
 import BaseResult from '@jbrowse/core/TextSearch/BaseResults'
 import { getSession } from '@jbrowse/core/util'
-import { SearchType } from '@jbrowse/core/data_adapters/BaseAdapter'
 
 // locals
 import RefNameAutocomplete from './RefNameAutocomplete'
-import { dedupe } from './util'
+import { fetchResults } from './util'
 import { LinearGenomeViewModel, SPACING, WIDGET_HEIGHT } from '..'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles()(() => ({
   headerRefName: {
     minWidth: 100,
   },
@@ -23,7 +23,7 @@ function SearchBox({
   showHelp?: boolean
   model: LinearGenomeViewModel
 }) {
-  const classes = useStyles()
+  const { classes } = useStyles()
   const theme = useTheme()
   const session = getSession(model)
 
@@ -33,31 +33,6 @@ function SearchBox({
   const assembly = assemblyManager.get(assemblyName)
   const searchScope = model.searchScope(assemblyName)
 
-  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 dedupe(
-      [...(refNameResults || []), ...(textSearchResults || [])],
-      elt => elt.getId(),
-    )
-  }
-
   // 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
@@ -82,7 +57,14 @@ function SearchBox({
       ) {
         model.navToLocString(location, assemblyName)
       } else {
-        const results = await fetchResults(label, 'exact')
+        const results = await fetchResults({
+          queryString: label,
+          searchType: 'exact',
+          searchScope,
+          rankSearchResults,
+          textSearchManager,
+          assembly,
+        })
         if (results.length > 1) {
           model.setSearchResults(results, label.toLowerCase())
           return
@@ -106,7 +88,15 @@ function SearchBox({
       showHelp={showHelp}
       onSelect={handleSelectedRegion}
       assemblyName={assemblyName}
-      fetchResults={fetchResults}
+      fetchResults={queryString =>
+        fetchResults({
+          queryString,
+          searchScope,
+          rankSearchResults,
+          textSearchManager,
+          assembly,
+        })
+      }
       model={model}
       TextFieldProps={{
         variant: 'outlined',

package/src/LinearGenomeView/components/SearchResultsDialog.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import { makeStyles } from 'tss-react/mui'
 import { getEnv, resolveIdentifier, getRoot } from 'mobx-state-tree'
 import { getSession } from '@jbrowse/core/util'
 import {
@@ -9,6 +10,7 @@ import {
   DialogTitle,
   Divider,
   IconButton,
+  Paper,
   Table,
   TableBody,
   TableCell,
@@ -16,13 +18,11 @@ import {
   TableHead,
   TableRow,
   Typography,
-  Paper,
-  makeStyles,
-} from '@material-ui/core'
-import CloseIcon from '@material-ui/icons/Close'
+} from '@mui/material'
+import CloseIcon from '@mui/icons-material/Close'
 import { LinearGenomeViewModel } from '../..'
 
-export const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles()(theme => ({
   dialogContent: {
     width: '80em',
   },
@@ -43,7 +43,7 @@ export default function SearchResultsDialog({
   optAssemblyName?: string
   handleClose: () => void
 }) {
-  const classes = useStyles()
+  const { classes } = useStyles()
   const session = getSession(model)
   const { pluginManager } = getEnv(session)
   const { assemblyManager } = session
@@ -108,6 +108,7 @@ export default function SearchResultsDialog({
             onClick={() => {
               handleClose()
             }}
+            size="large"
           >
             <CloseIcon />
           </IconButton>
@@ -156,7 +157,6 @@ export default function SearchResultsDialog({
                             }
                             handleClose()
                           }}
-                          disabled={!getTrackName(result.getTrackId())}
                           color="primary"
                           variant="contained"
                         >

package/src/LinearGenomeView/components/SequenceDialog.tsx

@@ -1,19 +1,18 @@
 import React, { useEffect, useMemo, useState } from 'react'
-
+import { makeStyles } from 'tss-react/mui'
 import {
   Button,
   CircularProgress,
+  Container,
   Dialog,
   DialogActions,
   DialogContent,
   DialogTitle,
-  Container,
-  Typography,
   Divider,
   IconButton,
   TextField,
-  makeStyles,
-} from '@material-ui/core'
+  Typography,
+} from '@mui/material'
 import { observer } from 'mobx-react'
 import { saveAs } from 'file-saver'
 import { Region } from '@jbrowse/core/util/types'
@@ -25,13 +24,13 @@ import { formatSeqFasta } from '@jbrowse/core/util/formatFastaStrings'
 
 // icons
 import { ContentCopy as ContentCopyIcon } from '@jbrowse/core/ui/Icons'
-import CloseIcon from '@material-ui/icons/Close'
-import GetAppIcon from '@material-ui/icons/GetApp'
+import CloseIcon from '@mui/icons-material/Close'
+import GetAppIcon from '@mui/icons-material/GetApp'
 
 // locals
 import { LinearGenomeViewModel } from '..'
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles()(theme => ({
   loadingMessage: {
     padding: theme.spacing(5),
   },
@@ -93,7 +92,7 @@ function SequenceDialog({
   model: LinearGenomeViewModel
   handleClose: () => void
 }) {
-  const classes = useStyles()
+  const { classes } = useStyles()
   const session = getSession(model)
   const [error, setError] = useState<unknown>()
   const [sequence, setSequence] = useState<string>()
@@ -181,6 +180,7 @@ function SequenceDialog({
               handleClose()
               model.setOffsets(undefined, undefined)
             }}
+            size="large"
           >
             <CloseIcon />
           </IconButton>

package/src/LinearGenomeView/components/TrackContainer.tsx

@@ -1,21 +1,22 @@
 import React, { useEffect, useRef } from 'react'
+import { Paper } from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
 import { observer } from 'mobx-react'
 import { isAlive } from 'mobx-state-tree'
 import { BaseTrackModel } from '@jbrowse/core/pluggableElementTypes/models'
 import { getConf } from '@jbrowse/core/configuration'
 import { ResizeHandle } from '@jbrowse/core/ui'
 import { useDebouncedCallback } from '@jbrowse/core/util'
-import clsx from 'clsx'
-import Paper from '@material-ui/core/Paper'
-import { makeStyles } from '@material-ui/core/styles'
 
-import { LinearGenomeViewModel, RESIZE_HANDLE_HEIGHT } from '..'
+import { LinearGenomeViewModel } from '..'
 import TrackLabel from './TrackLabel'
 
-const useStyles = makeStyles(theme => ({
-  root: { marginTop: 2 },
+const useStyles = makeStyles()({
+  root: {
+    marginTop: 2,
+  },
   resizeHandle: {
-    height: RESIZE_HANDLE_HEIGHT,
+    height: 3,
     boxSizing: 'border-box',
     position: 'relative',
     zIndex: 2,
@@ -27,7 +28,6 @@ const useStyles = makeStyles(theme => ({
     left: 0,
     width: '100%',
     zIndex: 3,
-    borderRadius: theme.shape.borderRadius,
   },
   trackLabel: {
     zIndex: 3,
@@ -57,13 +57,13 @@ const useStyles = makeStyles(theme => ({
     background: 'none',
     zIndex: 2,
   },
-}))
+})
 
 type LGV = LinearGenomeViewModel
 
 const TrackContainerLabel = observer(
   ({ model, view }: { model: BaseTrackModel; view: LGV }) => {
-    const classes = useStyles()
+    const { classes, cx } = useStyles()
     const labelStyle =
       view.trackLabels === 'overlapping'
         ? classes.trackLabelOverlap
@@ -71,7 +71,7 @@ const TrackContainerLabel = observer(
     return view.trackLabels !== 'hidden' ? (
       <TrackLabel
         track={model}
-        className={clsx(classes.trackLabel, labelStyle)}
+        className={cx(classes.trackLabel, labelStyle)}
       />
     ) : null
   },
@@ -84,7 +84,7 @@ function TrackContainer({
   model: LinearGenomeViewModel
   track: BaseTrackModel
 }) {
-  const classes = useStyles()
+  const { classes } = useStyles()
   const display = track.displays[0]
   const { horizontalScroll, draggingTrackId, moveTrack } = model
   const { height } = display

package/src/LinearGenomeView/components/TrackLabel.tsx

@@ -1,27 +1,27 @@
 import React from 'react'
+import { observer } from 'mobx-react'
+import { Instance } from 'mobx-state-tree'
 import { getConf, readConfObject } from '@jbrowse/core/configuration'
-import { Menu } from '@jbrowse/core/ui'
+import CascadingMenu from '@jbrowse/core/ui/CascadingMenu'
 import { getSession, getContainingView } from '@jbrowse/core/util'
 import { BaseTrackModel } from '@jbrowse/core/pluggableElementTypes/models'
+import { IconButton, Paper, Typography, alpha } from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
+
 import {
-  IconButton,
-  Paper,
-  Typography,
-  alpha,
-  makeStyles,
-} from '@material-ui/core'
+  bindTrigger,
+  bindPopover,
+  usePopupState,
+} from 'material-ui-popup-state/hooks'
 
 // icons
-import MoreVertIcon from '@material-ui/icons/MoreVert'
-import DragIcon from '@material-ui/icons/DragIndicator'
-import CloseIcon from '@material-ui/icons/Close'
+import MoreVertIcon from '@mui/icons-material/MoreVert'
+import DragIcon from '@mui/icons-material/DragIndicator'
+import CloseIcon from '@mui/icons-material/Close'
 
-import clsx from 'clsx'
-import { observer } from 'mobx-react'
-import { Instance } from 'mobx-state-tree'
 import { LinearGenomeViewStateModel } from '..'
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles()(theme => ({
   root: {
     background: alpha(theme.palette.background.paper, 0.8),
     '&:hover': {
@@ -52,33 +52,28 @@ const useStyles = makeStyles(theme => ({
 }))
 
 type LGV = Instance<LinearGenomeViewStateModel>
-
-const TrackLabel = React.forwardRef(
-  (props: { track: BaseTrackModel; className?: string }, ref) => {
-    const classes = useStyles()
-    const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null)
-    const { track, className } = props
+interface Props {
+  track: BaseTrackModel
+  className?: string
+}
+const TrackLabel = React.forwardRef<HTMLDivElement, Props>(
+  ({ track, className }, ref) => {
+    const { classes, cx } = useStyles()
     const view = getContainingView(track) as LGV
     const session = getSession(track)
     const trackConf = track.configuration
     const trackId = getConf(track, 'trackId')
 
-    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-      setAnchorEl(event.currentTarget)
-    }
-
-    const handleClose = () => {
-      setAnchorEl(null)
-    }
+    const popupState = usePopupState({
+      popupId: 'trackLabelMenu',
+      variant: 'popover',
+    })
 
     const onDragStart = (event: React.DragEvent<HTMLSpanElement>) => {
       const target = event.target as HTMLElement
       if (target.parentNode) {
-        event.dataTransfer.setDragImage(
-          target.parentNode as HTMLElement,
-          20,
-          20,
-        )
+        const parent = target.parentNode as HTMLElement
+        event.dataTransfer.setDragImage(parent, 20, 20)
         view.setDraggingTrackId(track.id)
       }
     }
@@ -91,17 +86,12 @@ const TrackLabel = React.forwardRef(
     if (getConf(track, 'type') === 'ReferenceSequenceTrack') {
       const r = session.assemblies.find(a => a.sequence === trackConf)
       trackName =
-        readConfObject(trackConf, 'name') ||
+        trackName ||
         (r
           ? `Reference Sequence (${readConfObject(r, 'name')})`
           : 'Reference Sequence')
     }
 
-    function handleMenuItemClick(_: unknown, callback: Function) {
-      callback()
-      handleClose()
-    }
-
     const items = [
       ...(session.getTrackActionMenuItems?.(trackConf) || []),
       ...track.trackMenuItems(),
@@ -109,7 +99,7 @@ const TrackLabel = React.forwardRef(
 
     return (
       <>
-        <Paper ref={ref} className={clsx(className, classes.root)}>
+        <Paper ref={ref} className={cx(className, classes.root)}>
           <span
             draggable
             className={classes.dragHandle}
@@ -117,7 +107,7 @@ const TrackLabel = React.forwardRef(
             onDragEnd={onDragEnd}
             data-testid={`dragHandle-${view.id}-${trackId}`}
           >
-            <DragIcon className={classes.dragHandleIcon} />
+            <DragIcon className={classes.dragHandleIcon} fontSize="small" />
           </span>
           <IconButton
             onClick={() => view.hideTrack(trackId)}
@@ -125,7 +115,7 @@ const TrackLabel = React.forwardRef(
             title="close this track"
             color="secondary"
           >
-            <CloseIcon />
+            <CloseIcon fontSize="small" />
           </IconButton>
           <Typography
             variant="body1"
@@ -135,23 +125,20 @@ const TrackLabel = React.forwardRef(
             {trackName}
           </Typography>
           <IconButton
-            aria-controls="simple-menu"
-            aria-haspopup="true"
-            onClick={handleClick}
+            {...bindTrigger(popupState)}
             className={classes.iconButton}
             color="secondary"
             data-testid="track_menu_icon"
             disabled={!items.length}
           >
-            <MoreVertIcon />
+            <MoreVertIcon fontSize="small" />
           </IconButton>
         </Paper>
-        <Menu
-          anchorEl={anchorEl}
-          onMenuItemClick={handleMenuItemClick}
-          open={Boolean(anchorEl)}
-          onClose={handleClose}
+        <CascadingMenu
+          {...bindPopover(popupState)}
+          onMenuItemClick={(_: unknown, callback: Function) => callback()}
           menuItems={items}
+          popupState={popupState}
         />
       </>
     )

package/src/LinearGenomeView/components/TracksContainer.tsx

@@ -1,30 +1,25 @@
-import { makeStyles } from '@material-ui/core/styles'
+import React, { useEffect, useRef, useState } from 'react'
+import { makeStyles } from 'tss-react/mui'
 import { observer } from 'mobx-react'
 import { Instance } from 'mobx-state-tree'
-import React, { useEffect, useRef, useState } from 'react'
 import normalizeWheel from 'normalize-wheel'
 
-import {
-  LinearGenomeViewStateModel,
-  RESIZE_HANDLE_HEIGHT,
-  SCALE_BAR_HEIGHT,
-} from '..'
+import { LinearGenomeViewStateModel, SCALE_BAR_HEIGHT } from '..'
 import RubberBand from './RubberBand'
 import ScaleBar from './ScaleBar'
 import VerticalGuides from './VerticalGuides'
 import CenterLine from './CenterLine'
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles()({
   tracksContainer: {
     position: 'relative',
-    borderRadius: theme.shape.borderRadius,
     overflow: 'hidden',
   },
   spacer: {
     position: 'relative',
-    height: RESIZE_HANDLE_HEIGHT,
+    height: 3,
   },
-}))
+})
 
 type LGV = Instance<LinearGenomeViewStateModel>
 type Timer = ReturnType<typeof setTimeout>
@@ -36,7 +31,7 @@ function TracksContainer({
   children: React.ReactNode
   model: LGV
 }) {
-  const classes = useStyles()
+  const { classes } = useStyles()
   // refs are to store these variables to avoid repeated rerenders associated
   // with useState/setState
   const delta = useRef(0)
@@ -167,7 +162,7 @@ function TracksContainer({
   return (
     <div
       ref={ref}
-      role="presentation"
+      data-testid="trackContainer"
       className={classes.tracksContainer}
       onMouseDown={mouseDown}
       onMouseUp={mouseUp}

package/src/LinearGenomeView/components/VerticalGuides.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/ZoomControls.tsx

@@ -1,13 +1,12 @@
 import React, { useState, useEffect } from 'react'
 import { observer } from 'mobx-react'
-import IconButton from '@material-ui/core/IconButton'
-import Slider from '@material-ui/core/Slider'
-import { makeStyles } from '@material-ui/core/styles'
-import ZoomIn from '@material-ui/icons/ZoomIn'
-import ZoomOut from '@material-ui/icons/ZoomOut'
+import { Slider, IconButton } from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
+import ZoomIn from '@mui/icons-material/ZoomIn'
+import ZoomOut from '@mui/icons-material/ZoomOut'
 import { LinearGenomeViewModel } from '..'
 
-const useStyles = makeStyles({
+const useStyles = makeStyles()({
   container: {
     display: 'flex',
     flexDirection: 'row',
@@ -19,26 +18,27 @@ const useStyles = makeStyles({
 })
 
 function ZoomControls({ model }: { model: LinearGenomeViewModel }) {
-  const classes = useStyles()
+  const { classes } = useStyles()
   const { maxBpPerPx, minBpPerPx, bpPerPx, scaleFactor } = model
   const [value, setValue] = useState(-Math.log2(bpPerPx) * 100)
   useEffect(() => {
     setValue(-Math.log2(bpPerPx) * 100)
   }, [setValue, bpPerPx])
+
   return (
     <div className={classes.container}>
       <IconButton
         data-testid="zoom_out"
-        onClick={() => {
-          model.zoom(bpPerPx * 2)
-        }}
+        onClick={() => model.zoom(bpPerPx * 2)}
         disabled={bpPerPx >= maxBpPerPx - 0.0001 || scaleFactor !== 1}
         color="secondary"
+        size="large"
       >
         <ZoomOut />
       </IconButton>
 
       <Slider
+        size="small"
         className={classes.slider}
         value={value}
         min={-Math.log2(maxBpPerPx) * 100}
@@ -49,11 +49,10 @@ function ZoomControls({ model }: { model: LinearGenomeViewModel }) {
       />
       <IconButton
         data-testid="zoom_in"
-        onClick={() => {
-          model.zoom(model.bpPerPx / 2)
-        }}
+        onClick={() => model.zoom(model.bpPerPx / 2)}
         disabled={bpPerPx <= minBpPerPx + 0.0001 || scaleFactor !== 1}
         color="secondary"
+        size="large"
       >
         <ZoomIn />
       </IconButton>