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

package/src/LinearGenomeView/components/TrackLabel.tsx

@@ -1,15 +1,16 @@
 import React from 'react'
-import { getConf, readConfObject } from '@jbrowse/core/configuration'
+import { observer } from 'mobx-react'
+import { Instance } from 'mobx-state-tree'
+import {
+  AnyConfigurationModel,
+  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 +18,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': {
@@ -60,16 +57,35 @@ 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
+}
+
+function getTrackName(
+  track: BaseTrackModel,
+  session: { assemblies: AnyConfigurationModel[] },
+) {
+  const trackName = getConf(track, 'name')
+  if (getConf(track, 'type') === 'ReferenceSequenceTrack') {
+    const asm = session.assemblies.find(a => a.sequence === track.configuration)
+    return (
+      trackName ||
+      (asm
+        ? `Reference Sequence (${readConfObject(asm, 'name')})`
+        : 'Reference Sequence')
+    )
+  }
+  return trackName
+}
+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 trackName = getTrackName(track, session)
 
     const popupState = usePopupState({
       popupId: 'trackLabelMenu',
@@ -77,80 +93,61 @@ const TrackLabel = React.forwardRef(
     })
 
     const onDragStart = (event: React.DragEvent<HTMLSpanElement>) => {
-      const target = event.target as HTMLElement
+      const target = event.currentTarget
       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)
       }
     }
 
-    const onDragEnd = () => {
-      view.setDraggingTrackId(undefined)
-    }
-
-    let trackName = getConf(track, 'name')
-    if (getConf(track, 'type') === 'ReferenceSequenceTrack') {
-      const r = session.assemblies.find(a => a.sequence === trackConf)
-      trackName =
-        trackName ||
-        (r
-          ? `Reference Sequence (${readConfObject(r, 'name')})`
-          : 'Reference Sequence')
-    }
-
     const items = [
       ...(session.getTrackActionMenuItems?.(trackConf) || []),
       ...track.trackMenuItems(),
     ].sort((a, b) => (b.priority || 0) - (a.priority || 0))
 
     return (
-      <>
-        <Paper ref={ref} className={clsx(className, classes.root)}>
-          <span
-            draggable
-            className={classes.dragHandle}
-            onDragStart={onDragStart}
-            onDragEnd={onDragEnd}
-            data-testid={`dragHandle-${view.id}-${trackId}`}
-          >
-            <DragIcon className={classes.dragHandleIcon} />
-          </span>
-          <IconButton
-            onClick={() => view.hideTrack(trackId)}
-            className={classes.iconButton}
-            title="close this track"
-            color="secondary"
-          >
-            <CloseIcon />
-          </IconButton>
-          <Typography
-            variant="body1"
-            component="span"
-            className={classes.trackName}
-          >
-            {trackName}
-          </Typography>
-          <IconButton
-            {...bindTrigger(popupState)}
-            className={classes.iconButton}
-            color="secondary"
-            data-testid="track_menu_icon"
-            disabled={!items.length}
-          >
-            <MoreVertIcon />
-          </IconButton>
-        </Paper>
+      <Paper ref={ref} className={cx(className, classes.root)}>
+        <span
+          draggable
+          className={classes.dragHandle}
+          onDragStart={onDragStart}
+          onDragEnd={() => view.setDraggingTrackId(undefined)}
+          data-testid={`dragHandle-${view.id}-${trackId}`}
+        >
+          <DragIcon className={classes.dragHandleIcon} fontSize="small" />
+        </span>
+        <IconButton
+          onClick={() => view.hideTrack(trackId)}
+          className={classes.iconButton}
+          title="close this track"
+          color="secondary"
+        >
+          <CloseIcon fontSize="small" />
+        </IconButton>
+        <Typography
+          variant="body1"
+          component="span"
+          className={classes.trackName}
+        >
+          {trackName}
+        </Typography>
+        <IconButton
+          {...bindTrigger(popupState)}
+          className={classes.iconButton}
+          color="secondary"
+          data-testid="track_menu_icon"
+          disabled={!items.length}
+        >
+          <MoreVertIcon fontSize="small" />
+        </IconButton>
         <CascadingMenu
           {...bindPopover(popupState)}
           onMenuItemClick={(_: unknown, callback: Function) => callback()}
           menuItems={items}
           popupState={popupState}
         />
-      </>
+      </Paper>
     )
   },
 )

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 Gridlines from './Gridlines'
 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,13 +162,13 @@ function TracksContainer({
   return (
     <div
       ref={ref}
-      role="presentation"
+      data-testid="trackContainer"
       className={classes.tracksContainer}
       onMouseDown={mouseDown}
       onMouseUp={mouseUp}
       onMouseLeave={mouseLeave}
     >
-      <VerticalGuides model={model} />
+      {model.showGridlines ? <Gridlines model={model} /> : null}
       {model.showCenterLine ? <CenterLine model={model} /> : null}
 
       <RubberBand

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>