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

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

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>

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,15 +1,12 @@
 import React from 'react'
+import { observer } from 'mobx-react'
+import { Instance } from 'mobx-state-tree'
 import { getConf, readConfObject } from '@jbrowse/core/configuration'
 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,
-  makeStyles,
-} from '@material-ui/core'
+import { IconButton, Paper, Typography, alpha } from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
 
 import {
   bindTrigger,
@@ -17,18 +14,14 @@ import {
   usePopupState,
 } from 'material-ui-popup-state/hooks'
 
-import clsx from 'clsx'
-import { observer } from 'mobx-react'
-import { Instance } from 'mobx-state-tree'
-
 // 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 { LinearGenomeViewStateModel } from '..'
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles()(theme => ({
   root: {
     background: alpha(theme.palette.background.paper, 0.8),
     '&:hover': {
@@ -59,13 +52,13 @@ const useStyles = makeStyles(theme => ({
 }))
 
 type LGV = Instance<LinearGenomeViewStateModel>
-
-const TrackLabel = React.forwardRef(
-  (
-    { track, className }: { track: BaseTrackModel; className?: string },
-    ref,
-  ) => {
-    const classes = useStyles()
+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
@@ -79,11 +72,8 @@ const TrackLabel = React.forwardRef(
     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)
       }
     }
@@ -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"
@@ -141,7 +131,7 @@ const TrackLabel = React.forwardRef(
             data-testid="track_menu_icon"
             disabled={!items.length}
           >
-            <MoreVertIcon />
+            <MoreVertIcon fontSize="small" />
           </IconButton>
         </Paper>
         <CascadingMenu

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 (