@jbrowse/plugin-linear-genome-view 2.2.0 → 2.2.2

package/src/LinearGenomeView/components/GetSequenceDialog.tsx

@@ -4,12 +4,8 @@ import {
   Button,
   CircularProgress,
   Container,
-  Dialog,
   DialogActions,
   DialogContent,
-  DialogTitle,
-  Divider,
-  IconButton,
   TextField,
   Typography,
 } from '@mui/material'
@@ -17,31 +13,25 @@ import { observer } from 'mobx-react'
 import { saveAs } from 'file-saver'
 import { getConf } from '@jbrowse/core/configuration'
 import copy from 'copy-to-clipboard'
+import { Dialog } from '@jbrowse/core/ui'
 import { getSession, Feature, Region } from '@jbrowse/core/util'
 import { formatSeqFasta } from '@jbrowse/core/util/formatFastaStrings'
 
 // icons
 import { ContentCopy as ContentCopyIcon } from '@jbrowse/core/ui/Icons'
-import CloseIcon from '@mui/icons-material/Close'
 import GetAppIcon from '@mui/icons-material/GetApp'
 
 // locals
 import { LinearGenomeViewModel } from '..'
 
-const useStyles = makeStyles()(theme => ({
-  closeButton: {
-    position: 'absolute',
-    right: theme.spacing(1),
-    top: theme.spacing(1),
-    color: theme.palette.grey[500],
-  },
+const useStyles = makeStyles()({
   dialogContent: {
     width: '80em',
   },
   textAreaFont: {
     fontFamily: 'Courier New',
   },
-}))
+})
 
 type LGV = LinearGenomeViewModel
 
@@ -106,6 +96,7 @@ function SequenceDialog({
     let active = true
     const controller = new AbortController()
 
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
     ;(async () => {
       try {
         if (regionsSelected.length > 0) {
@@ -157,24 +148,15 @@ function SequenceDialog({
   const sequenceTooLarge = sequence ? sequence.length > 1_000_000 : false
 
   return (
-    <Dialog maxWidth="xl" open onClose={handleClose}>
-      <DialogTitle>
-        Reference sequence
-        {handleClose ? (
-          <IconButton
-            className={classes.closeButton}
-            onClick={() => {
-              handleClose()
-              model.setOffsets(undefined, undefined)
-            }}
-            size="large"
-          >
-            <CloseIcon />
-          </IconButton>
-        ) : null}
-      </DialogTitle>
-      <Divider />
-
+    <Dialog
+      maxWidth="xl"
+      open
+      onClose={() => {
+        handleClose()
+        model.setOffsets(undefined, undefined)
+      }}
+      title="Reference sequence"
+    >
       <DialogContent>
         {error ? <Typography color="error">{`${error}`}</Typography> : null}
         {loading && !error ? (

package/src/LinearGenomeView/components/Header.tsx

@@ -16,7 +16,7 @@ import {
   SPACING,
   HEADER_BAR_HEIGHT,
 } from '..'
-import OverviewScaleBar from './OverviewScaleBar'
+import OverviewScalebar from './OverviewScalebar'
 import ZoomControls from './ZoomControls'
 import SearchBox from './SearchBox'
 
@@ -123,9 +123,9 @@ const LinearGenomeViewHeader = observer(({ model }: { model: LGV }) => {
     model.hideHeaderOverview ? (
       <Controls model={model} />
     ) : (
-      <OverviewScaleBar model={model}>
+      <OverviewScalebar model={model}>
         <Controls model={model} />
-      </OverviewScaleBar>
+      </OverviewScalebar>
     )
   ) : null
 })

package/src/LinearGenomeView/components/HelpDialog.tsx

@@ -1,45 +1,19 @@
 import React from 'react'
-import {
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  Divider,
-  IconButton,
-} from '@mui/material'
-import { makeStyles } from 'tss-react/mui'
-import CloseIcon from '@mui/icons-material/Close'
-
-const useStyles = makeStyles()(theme => ({
-  closeButton: {
-    position: 'absolute',
-    right: theme.spacing(1),
-    top: theme.spacing(1),
-    color: theme.palette.grey[500],
-  },
-}))
+import { Button, DialogActions, DialogContent, Divider } from '@mui/material'
+import { Dialog } from '@jbrowse/core/ui'
 
 export default function HelpDialog({
   handleClose,
 }: {
   handleClose: () => void
 }) {
-  const { classes } = useStyles()
   return (
-    <Dialog open maxWidth="xl" onClose={handleClose}>
-      <DialogTitle>
-        Using the search box
-        {handleClose ? (
-          <IconButton
-            className={classes.closeButton}
-            onClick={() => handleClose()}
-          >
-            <CloseIcon />
-          </IconButton>
-        ) : null}
-      </DialogTitle>
-      <Divider />
+    <Dialog
+      open
+      maxWidth="xl"
+      onClose={handleClose}
+      title="Using the search box"
+    >
       <DialogContent>
         <h3>Searching</h3>
         <ul>

package/src/LinearGenomeView/components/ImportForm.tsx

@@ -11,6 +11,8 @@ import {
 } from '@mui/material'
 import { ErrorMessage, AssemblySelector } from '@jbrowse/core/ui'
 import BaseResult from '@jbrowse/core/TextSearch/BaseResults'
+
+// icons
 import CloseIcon from '@mui/icons-material/Close'
 
 // locals
@@ -39,7 +41,6 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
   const { assemblyNames, assemblyManager, textSearchManager } = session
   const { rankSearchResults, isSearchDialogDisplayed, error } = model
   const [selectedAsm, setSelectedAsm] = useState(assemblyNames[0])
-  const [importError, setImportError] = useState(error)
   const [option, setOption] = useState<BaseResult>()
 
   const searchScope = model.searchScope(selectedAsm)
@@ -49,21 +50,23 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
     ? assembly?.error
     : 'No configured assemblies'
   const regions = assembly?.regions || []
-  const err = assemblyError || importError
+  const displayError = assemblyError || error
   const [value, setValue] = useState('')
   const r0 = regions[0]?.refName
 
   // useEffect resets to an "initial state" of displaying first region from assembly
-  // after assembly change
+  // after assembly change. needs to react to selectedAsm as well as r0 because changing
+  // assembly will run setValue('') and then r0 may not change if assembly names are the
+  // same across assemblies, but it still needs to be reset
   useEffect(() => {
     setValue(r0)
-  }, [r0])
+  }, [r0, selectedAsm])
 
-  function navToOption(option: BaseResult) {
+  async function navToOption(option: BaseResult) {
     const location = option.getLocation()
     const trackId = option.getTrackId()
     if (location) {
-      model.navToLocString(location, selectedAsm)
+      await model.navToLocString(location, selectedAsm)
       if (trackId) {
         model.showTrack(trackId)
       }
@@ -78,7 +81,7 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
   async function handleSelectedRegion(input: string) {
     try {
       if (option?.getDisplayString() === input && option.hasLocation()) {
-        navToOption(option)
+        await navToOption(option)
       } else {
         const [ref, rest] = splitLast(input, ':')
         const allRefs = assembly?.allRefNamesWithLowerCase || []
@@ -86,7 +89,7 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
           allRefs.includes(input) ||
           (allRefs.includes(ref) && !Number.isNaN(parseInt(rest, 10)))
         ) {
-          model.navToLocString(input, selectedAsm)
+          await model.navToLocString(input, selectedAsm)
         } else {
           const results = await fetchResults({
             queryString: input,
@@ -100,9 +103,9 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
           if (results.length > 1) {
             model.setSearchResults(results, input.toLowerCase())
           } else if (results.length === 1) {
-            navToOption(results[0])
+            await navToOption(results[0])
           } else {
-            model.navToLocString(input, selectedAsm)
+            await model.navToLocString(input, selectedAsm)
           }
         }
       }
@@ -116,14 +119,15 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
   // having this wrapped in a form allows intuitive use of enter key to submit
   return (
     <div className={classes.container}>
-      {err ? <ErrorMessage error={err} /> : null}
+      {displayError ? <ErrorMessage error={displayError} /> : null}
       <Container className={classes.importFormContainer}>
         <form
-          onSubmit={event => {
+          onSubmit={async event => {
             event.preventDefault()
             model.setError(undefined)
             if (value) {
-              handleSelectedRegion(value)
+              // has it's own error handling
+              await handleSelectedRegion(value)
             }
           }}
         >
@@ -137,7 +141,6 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
               <FormControl>
                 <AssemblySelector
                   onChange={val => {
-                    setImportError('')
                     setSelectedAsm(val)
                     setValue('')
                   }}
@@ -148,7 +151,7 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
             </Grid>
             <Grid item>
               {selectedAsm ? (
-                err ? (
+                assemblyError ? (
                   <CloseIcon style={{ color: 'red' }} />
                 ) : value ? (
                   <FormControl>
@@ -165,7 +168,7 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
                       model={model}
                       assemblyName={assemblyError ? undefined : selectedAsm}
                       value={value}
-                      // note: minWidth 270 accomodates full width of helperText
+                      // note: minWidth 270 accommodates full width of helperText
                       minWidth={270}
                       onChange={str => setValue(str)}
                       onSelect={val => setOption(val)}

package/src/LinearGenomeView/components/LinearGenomeView.tsx

@@ -1,9 +1,8 @@
 import React from 'react'
 import { Button, Paper, Typography } from '@mui/material'
 import { makeStyles } from 'tss-react/mui'
-import { ErrorBoundary } from 'react-error-boundary'
 import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons'
-import { LoadingEllipses, ErrorMessage } from '@jbrowse/core/ui'
+import { LoadingEllipses } from '@jbrowse/core/ui'
 import { observer } from 'mobx-react'
 
 // locals
@@ -76,12 +75,7 @@ const LinearGenomeView = observer(({ model }: { model: LGV }) => {
           </Paper>
         ) : (
           tracks.map(track => (
-            <ErrorBoundary
-              key={track.id}
-              FallbackComponent={({ error }) => <ErrorMessage error={error} />}
-            >
-              <TrackContainer model={model} track={track} />
-            </ErrorBoundary>
+            <TrackContainer key={track.id} model={model} track={track} />
           ))
         )}
       </TracksContainer>

package/src/LinearGenomeView/components/LinearGenomeViewSvg.tsx

@@ -14,11 +14,11 @@ import {
   ExportSvgOptions,
   HEADER_OVERVIEW_HEIGHT,
 } from '..'
-import { Polygon, Cytobands } from './OverviewScaleBar'
+import { Polygon, Cytobands } from './OverviewScalebar'
 
 type LGV = LinearGenomeViewModel
 
-function ScaleBar({ model, fontSize }: { model: LGV; fontSize: number }) {
+function Scalebar({ model, fontSize }: { model: LGV; fontSize: number }) {
   const {
     offsetPx,
     dynamicBlocks: { totalWidthPxWithoutBorders: totalWidthPx, totalBp },
@@ -178,7 +178,7 @@ const SVGHeader = ({ model }: { model: LGV }) => {
       ) : null}
 
       <g transform={`translate(0 ${fontSize + cytobandHeight})`}>
-        <ScaleBar model={model} fontSize={fontSize} />
+        <Scalebar model={model} fontSize={fontSize} />
       </g>
       <g transform={`translate(0 ${rulerHeight + cytobandHeight})`}>
         <SVGRuler model={model} fontSize={fontSize} width={width} />

package/src/LinearGenomeView/components/{OverviewRubberBand.tsx → OverviewRubberband.tsx}

@@ -1,51 +1,28 @@
 import React, { useRef, useEffect, useState } from 'react'
-import { Popover, Tooltip, Typography, alpha } from '@mui/material'
+import { Tooltip } from '@mui/material'
 import { makeStyles } from 'tss-react/mui'
 import { getSession, stringify } from '@jbrowse/core/util'
 import { observer } from 'mobx-react'
 import { Base1DViewModel } from '@jbrowse/core/util/Base1DViewModel'
-import { LinearGenomeViewModel, HEADER_OVERVIEW_HEIGHT } from '..'
+import { LinearGenomeViewModel } from '..'
+import RubberbandSpan from './RubberbandSpan'
+import { getRelativeX } from './util'
 
 type LGV = LinearGenomeViewModel
 
-const useStyles = makeStyles()(theme => {
-  const { tertiary, primary } = theme.palette
-  const background = tertiary
-    ? alpha(tertiary.main, 0.7)
-    : alpha(primary.main, 0.7)
-  return {
-    rubberBand: {
-      height: '100%',
-      background,
-      position: 'absolute',
-      zIndex: 10,
-      textAlign: 'center',
-      overflow: 'hidden',
-    },
-    rubberBandControl: {
-      cursor: 'crosshair',
-      width: '100%',
-      minHeight: 8,
-    },
-    rubberBandText: {
-      color: tertiary ? tertiary.contrastText : primary.contrastText,
-    },
-    popover: {
-      mouseEvents: 'none',
-      cursor: 'crosshair',
-    },
-    paper: {
-      paddingLeft: theme.spacing(1),
-      paddingRight: theme.spacing(1),
-    },
-    guide: {
-      pointerEvents: 'none',
-      height: '100%',
-      width: 1,
-      position: 'absolute',
-      zIndex: 10,
-    },
-  }
+const useStyles = makeStyles()({
+  rubberbandControl: {
+    cursor: 'crosshair',
+    width: '100%',
+    minHeight: 8,
+  },
+  guide: {
+    pointerEvents: 'none',
+    height: '100%',
+    width: 1,
+    position: 'absolute',
+    zIndex: 10,
+  },
 })
 
 const HoverTooltip = observer(
@@ -91,7 +68,7 @@ const HoverTooltip = observer(
   },
 )
 
-function OverviewRubberBand({
+function OverviewRubberband({
   model,
   overview,
   ControlComponent = <div />,
@@ -105,7 +82,6 @@ function OverviewRubberBand({
   const [currentX, setCurrentX] = useState<number>()
   const [guideX, setGuideX] = useState<number>()
   const controlsRef = useRef<HTMLDivElement>(null)
-  const rubberBandRef = useRef<HTMLDivElement>(null)
   const { classes } = useStyles()
   const mouseDragging = startX !== undefined
 
@@ -113,8 +89,7 @@ function OverviewRubberBand({
     function globalMouseMove(event: MouseEvent) {
       const ref = controlsRef.current
       if (ref && mouseDragging) {
-        const relativeX = event.clientX - ref.getBoundingClientRect().left
-        setCurrentX(relativeX)
+        setCurrentX(getRelativeX(event, ref))
       }
     }
 
@@ -172,19 +147,11 @@ function OverviewRubberBand({
   function mouseDown(event: React.MouseEvent<HTMLDivElement>) {
     event.preventDefault()
     event.stopPropagation()
-    if (controlsRef.current) {
-      setStartX(
-        event.clientX - controlsRef.current.getBoundingClientRect().left,
-      )
-    }
+    setStartX(getRelativeX(event, controlsRef.current))
   }
 
   function mouseMove(event: React.MouseEvent<HTMLDivElement>) {
-    if (controlsRef.current) {
-      setGuideX(
-        event.clientX - controlsRef.current.getBoundingClientRect().left,
-      )
-    }
+    setGuideX(getRelativeX(event, controlsRef.current))
   }
 
   function mouseOut() {
@@ -203,7 +170,7 @@ function OverviewRubberBand({
           />
         ) : null}
         <div
-          className={classes.rubberBandControl}
+          className={classes.rubberbandControl}
           role="presentation"
           ref={controlsRef}
           onMouseDown={mouseDown}
@@ -235,66 +202,17 @@ function OverviewRubberBand({
 
   return (
     <div style={{ position: 'relative' }}>
-      {rubberBandRef.current ? (
-        <>
-          <Popover
-            className={classes.popover}
-            classes={{
-              paper: classes.paper,
-            }}
-            open
-            anchorEl={rubberBandRef.current}
-            anchorOrigin={{
-              vertical: 'top',
-              horizontal: 'left',
-            }}
-            transformOrigin={{
-              vertical: 'bottom',
-              horizontal: 'right',
-            }}
-            keepMounted
-            disableRestoreFocus
-          >
-            <Typography>
-              {leftBpOffset ? stringify(leftBpOffset) : ''}
-            </Typography>
-          </Popover>
-          <Popover
-            className={classes.popover}
-            classes={{
-              paper: classes.paper,
-            }}
-            open
-            anchorEl={rubberBandRef.current}
-            anchorOrigin={{
-              vertical: 'top',
-              horizontal: 'right',
-            }}
-            transformOrigin={{
-              vertical: 'bottom',
-              horizontal: 'left',
-            }}
-            keepMounted
-            disableRestoreFocus
-          >
-            <Typography>
-              {rightBpOffset ? stringify(rightBpOffset) : ''}
-            </Typography>
-          </Popover>
-        </>
+      {leftBpOffset && rightBpOffset ? (
+        <RubberbandSpan
+          leftBpOffset={leftBpOffset}
+          rightBpOffset={rightBpOffset}
+          width={width}
+          left={left}
+        />
       ) : null}
       <div
-        ref={rubberBandRef}
-        className={classes.rubberBand}
-        style={{
-          left,
-          width: Math.abs(width),
-          height: HEADER_OVERVIEW_HEIGHT,
-        }}
-      />
-      <div
-        data-testid="rubberBand_controls"
-        className={classes.rubberBandControl}
+        data-testid="rubberband_controls"
+        className={classes.rubberbandControl}
         role="presentation"
         ref={controlsRef}
         onMouseDown={mouseDown}
@@ -307,4 +225,4 @@ function OverviewRubberBand({
   )
 }
 
-export default observer(OverviewRubberBand)
+export default observer(OverviewRubberband)