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

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

package/src/LinearGenomeView/components/RubberBand.tsx

@@ -1,22 +1,19 @@
 import React, { useRef, useEffect, useState } from 'react'
 import { observer } from 'mobx-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 { stringify } from '@jbrowse/core/util'
 import { Menu } from '@jbrowse/core/ui'
 import { LinearGenomeViewModel } from '..'
 
 type LGV = LinearGenomeViewModel
 
-const useStyles = makeStyles(theme => {
-  const background = theme.palette.tertiary
-    ? alpha(theme.palette.tertiary.main, 0.7)
-    : alpha(theme.palette.primary.main, 0.7)
+const useStyles = makeStyles()(theme => {
+  // @ts-ignore
+  const { primary, tertiary } = theme.palette
+  const background = tertiary
+    ? alpha(tertiary.main, 0.7)
+    : alpha(primary.main, 0.7)
   return {
     rubberBand: {
       height: '100%',
@@ -32,9 +29,7 @@ const useStyles = makeStyles(theme => {
       minHeight: 8,
     },
     rubberBandText: {
-      color: theme.palette.tertiary
-        ? theme.palette.tertiary.contrastText
-        : theme.palette.primary.contrastText,
+      color: tertiary ? tertiary.contrastText : primary.contrastText,
     },
     popover: {
       mouseEvents: 'none',
@@ -56,7 +51,7 @@ const useStyles = makeStyles(theme => {
 
 const VerticalGuide = observer(
   ({ model, coordX }: { model: LGV; coordX: number }) => {
-    const classes = useStyles()
+    const { classes } = useStyles()
     return (
       <Tooltip
         open
@@ -93,10 +88,10 @@ function RubberBand({
     clientX: number
     clientY: number
   }>()
-  const [guideX, setGuideX] = useState<number | undefined>()
+  const [guideX, setGuideX] = useState<number>()
   const controlsRef = useRef<HTMLDivElement>(null)
   const rubberBandRef = useRef(null)
-  const classes = useStyles()
+  const { classes } = useStyles()
   const mouseDragging = startX !== undefined && anchorPosition === undefined
 
   const { setOffsets, pxToBp } = model
@@ -108,7 +103,6 @@ function RubberBand({
       }
       let leftPx = startX
       let rightPx = offsetX
-      // handles clicking and draging to the left
       if (rightPx < leftPx) {
         ;[leftPx, rightPx] = [rightPx, leftPx]
       }

package/src/LinearGenomeView/components/Ruler.tsx

@@ -1,17 +1,11 @@
-import { makeStyles } from '@material-ui/core/styles'
+import { makeStyles } from 'tss-react/mui'
 import { observer } from 'mobx-react'
 import ReactPropTypes from 'prop-types'
 import React from 'react'
 import { makeTicks } from '../util'
+import { getTickDisplayStr } from '@jbrowse/core/util'
 
-function mathPower(num: number): string {
-  if (num < 999) {
-    return String(num)
-  }
-  return `${mathPower(~~(num / 1000))},${`00${~~(num % 1000)}`.substr(-3, 3)}`
-}
-
-const useStyles = makeStyles((/* theme */) => ({
+const useStyles = makeStyles()((/* theme */) => ({
   majorTickLabel: {
     fontSize: '11px',
     // fill: theme.palette.text.primary,
@@ -41,7 +35,7 @@ function Ruler({
   major: boolean
   minor: boolean
 }) {
-  const classes = useStyles()
+  const { classes } = useStyles()
   const ticks = makeTicks(start, end, bpPerPx, major, minor)
   return (
     <>
@@ -75,7 +69,7 @@ function Ruler({
               style={{ fontSize: '11px' }}
               className={classes.majorTickLabel}
             >
-              {mathPower(tick.base + 1)}
+              {getTickDisplayStr(tick.base + 1, bpPerPx)}
             </text>
           )
         })}

package/src/LinearGenomeView/components/ScaleBar.tsx

@@ -1,10 +1,10 @@
-import { Paper, Typography, makeStyles } from '@material-ui/core'
+import { Paper, Typography } from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
 import {
   ContentBlock,
   ElidedBlock,
   InterRegionPaddingBlock,
 } from '@jbrowse/core/util/blockTypes'
-import clsx from 'clsx'
 import { observer } from 'mobx-react'
 import React from 'react'
 import { LinearGenomeViewModel } from '..'
@@ -18,7 +18,7 @@ import { getTickDisplayStr } from '@jbrowse/core/util'
 
 type LGV = LinearGenomeViewModel
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles()(theme => ({
   scaleBarContainer: {
     overflow: 'hidden',
     position: 'relative',
@@ -60,7 +60,7 @@ const useStyles = makeStyles(theme => ({
 }))
 
 const RenderedRefNameLabels = observer(({ model }: { model: LGV }) => {
-  const classes = useStyles()
+  const { classes } = useStyles()
 
   // find the block that needs pinning to the left side for context
   let lastLeftBlock = 0
@@ -95,24 +95,22 @@ const RenderedRefNameLabels = observer(({ model }: { model: LGV }) => {
 })
 
 const RenderedScaleBarLabels = observer(({ model }: { model: LGV }) => {
-  const classes = useStyles()
-  const { bpPerPx } = model
+  const { classes } = useStyles()
+  const { bpPerPx, staticBlocks } = model
 
   return (
     <>
-      {model.staticBlocks.map((block, index) => {
+      {staticBlocks.map((block, index) => {
+        const { reversed, start, end, key, widthPx } = block
         if (block instanceof ContentBlock) {
-          const { start, end } = block
           const ticks = makeTicks(start, end, bpPerPx, true, false)
 
           return (
-            <ContentBlockComponent key={`${block.key}-${index}`} block={block}>
+            <ContentBlockComponent key={`${key}-${index}`} block={block}>
               {ticks.map(tick => {
                 if (tick.type === 'major') {
                   const x =
-                    (block.reversed
-                      ? block.end - tick.base
-                      : tick.base - block.start) / model.bpPerPx
+                    (reversed ? end - tick.base : tick.base - start) / bpPerPx
                   const baseNumber = tick.base + 1
                   return (
                     <div
@@ -134,13 +132,13 @@ const RenderedScaleBarLabels = observer(({ model }: { model: LGV }) => {
           )
         }
         if (block instanceof ElidedBlock) {
-          return <ElidedBlockComponent key={block.key} width={block.widthPx} />
+          return <ElidedBlockComponent key={key} width={widthPx} />
         }
         if (block instanceof InterRegionPaddingBlock) {
           return (
             <InterRegionPaddingBlockComponent
-              key={block.key}
-              width={block.widthPx}
+              key={key}
+              width={widthPx}
               style={{ background: 'none' }}
               boundary={block.variant === 'boundary'}
             />
@@ -152,23 +150,21 @@ const RenderedScaleBarLabels = observer(({ model }: { model: LGV }) => {
   )
 })
 
-const ScaleBar = React.forwardRef(
-  (
-    {
-      model,
-      style,
-      className,
-      ...other
-    }: { model: LGV; style?: React.CSSProperties; className?: string },
-    ref,
-  ) => {
-    const classes = useStyles()
+interface ScaleBarProps {
+  model: LGV
+  style?: React.CSSProperties
+  className?: string
+}
+
+const ScaleBar = React.forwardRef<HTMLDivElement, ScaleBarProps>(
+  ({ model, style, className, ...other }, ref) => {
+    const { classes, cx } = useStyles()
 
     const offsetLeft = model.staticBlocks.offsetPx - model.offsetPx
     return (
       <Paper
         data-resizer="true" // used to avoid click-and-drag scrolls on trackscontainer
-        className={clsx(classes.scaleBarContainer, className)}
+        className={cx(classes.scaleBarContainer, className)}
         variant="outlined"
         ref={ref}
         style={style}

package/src/LinearGenomeView/components/SearchBox.tsx

@@ -1,6 +1,7 @@
 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'
 
@@ -9,7 +10,7 @@ import RefNameAutocomplete from './RefNameAutocomplete'
 import { fetchResults } from './util'
 import { LinearGenomeViewModel, SPACING, WIDGET_HEIGHT } from '..'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles()(() => ({
   headerRefName: {
     minWidth: 100,
   },
@@ -22,7 +23,7 @@ function SearchBox({
   showHelp?: boolean
   model: LinearGenomeViewModel
 }) {
-  const classes = useStyles()
+  const { classes } = useStyles()
   const theme = useTheme()
   const session = getSession(model)
 

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>

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>
@@ -248,7 +248,7 @@ function SequenceDialog({
         >
           Download FASTA
         </Button>
-        <Button onClick={handleClose} color="primary" autoFocus>
+        <Button onClick={handleClose} variant="contained">
           Close
         </Button>
       </DialogActions>

package/src/LinearGenomeView/components/TrackContainer.tsx

@@ -1,21 +1,23 @@
 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 '..'
+// locals
+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 +29,6 @@ const useStyles = makeStyles(theme => ({
     left: 0,
     width: '100%',
     zIndex: 3,
-    borderRadius: theme.shape.borderRadius,
   },
   trackLabel: {
     zIndex: 3,
@@ -42,7 +43,7 @@ const useStyles = makeStyles(theme => ({
     height: '100%',
     width: '100%',
   },
-  trackLabelInline: {
+  trackLabelOffset: {
     position: 'relative',
     display: 'inline-block',
   },
@@ -57,22 +58,22 @@ 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 display = model.displays[0]
+    const { trackLabel, trackLabelOverlap, trackLabelOffset } = classes
     const labelStyle =
-      view.trackLabels === 'overlapping'
-        ? classes.trackLabelOverlap
-        : classes.trackLabelInline
+      view.trackLabels !== 'overlapping' || display.prefersOffset
+        ? trackLabelOffset
+        : trackLabelOverlap
+
     return view.trackLabels !== 'hidden' ? (
-      <TrackLabel
-        track={model}
-        className={clsx(classes.trackLabel, labelStyle)}
-      />
+      <TrackLabel track={model} className={cx(trackLabel, labelStyle)} />
     ) : null
   },
 )
@@ -81,16 +82,21 @@ function TrackContainer({
   model,
   track,
 }: {
-  model: LinearGenomeViewModel
+  model: LGV
   track: BaseTrackModel
 }) {
-  const classes = useStyles()
+  const { classes } = useStyles()
   const display = track.displays[0]
   const { horizontalScroll, draggingTrackId, moveTrack } = model
-  const { height } = display
+  const { height, RenderingComponent, DisplayBlurb } = display
   const trackId = getConf(track, 'trackId')
   const ref = useRef(null)
-
+  const dimmed = draggingTrackId !== undefined && draggingTrackId !== display.id
+  const debouncedOnDragEnter = useDebouncedCallback(() => {
+    if (isAlive(display) && dimmed) {
+      moveTrack(draggingTrackId, track.id)
+    }
+  }, 100)
   useEffect(() => {
     if (ref.current) {
       model.trackRefs[trackId] = ref.current
@@ -99,18 +105,6 @@ function TrackContainer({
       delete model.trackRefs[trackId]
     }
   }, [model.trackRefs, trackId])
-  function onDragEnter() {
-    if (
-      draggingTrackId !== undefined &&
-      isAlive(display) &&
-      draggingTrackId !== display.id
-    ) {
-      moveTrack(draggingTrackId, track.id)
-    }
-  }
-  const debouncedOnDragEnter = useDebouncedCallback(onDragEnter, 100)
-  const { RenderingComponent, DisplayBlurb } = display
-  const dimmed = draggingTrackId !== undefined && draggingTrackId !== display.id
 
   return (
     <Paper className={classes.root} variant="outlined">
@@ -118,13 +112,9 @@ function TrackContainer({
       <div
         className={classes.trackRenderingContainer}
         style={{ height }}
-        onScroll={event => {
-          const target = event.target as HTMLDivElement
-          display.setScrollTop(target.scrollTop)
-        }}
+        onScroll={event => display.setScrollTop(event.currentTarget.scrollTop)}
         onDragEnter={debouncedOnDragEnter}
         data-testid={`trackRenderingContainer-${model.id}-${trackId}`}
-        role="presentation"
       >
         <div
           ref={ref}