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

package/src/LinearGenomeView/components/{ScaleBar.test.tsx → Scalebar.test.tsx}

@@ -2,10 +2,10 @@
 import React from 'react'
 import { render } from '@testing-library/react'
 import { createTestSession } from '@jbrowse/web/src/rootModel'
-import ScaleBar from './ScaleBar'
+import Scalebar from './Scalebar'
 jest.mock('@jbrowse/web/src/makeWorkerInstance', () => () => {})
 
-describe('ScaleBar genome view component', () => {
+describe('Scalebar genome view component', () => {
   it('renders two regions', () => {
     const session = createTestSession({
       views: [
@@ -47,7 +47,7 @@ describe('ScaleBar genome view component', () => {
       },
     })
     const model = session.views[0]
-    const { getByTestId } = render(<ScaleBar model={model} />)
+    const { getByTestId } = render(<Scalebar model={model} />)
     const ret1 = getByTestId('refLabel-ctgA')
     const ret2 = getByTestId('refLabel-ctgB')
     expect(ret1.style.left).toBe('-1px')
@@ -89,7 +89,7 @@ describe('ScaleBar genome view component', () => {
       },
     })
     const model = session.views[0]
-    const { getByTestId } = render(<ScaleBar model={model} />)
+    const { getByTestId } = render(<Scalebar model={model} />)
     const ret1 = getByTestId('refLabel-ctgA')
     const ret2 = getByTestId('refLabel-ctgB')
     expect(ret1.style.left).toBe('99px')
@@ -134,7 +134,7 @@ describe('ScaleBar genome view component', () => {
       },
     })
     const model = session.views[0]
-    const { queryByTestId } = render(<ScaleBar model={model} />)
+    const { queryByTestId } = render(<Scalebar model={model} />)
     const ret2 = queryByTestId('refLabel-ctgB')
     const ret3 = queryByTestId('refLabel-ctgC')
     const ret4 = queryByTestId('refLabel-ctgD')

package/src/LinearGenomeView/components/{ScaleBar.tsx → Scalebar.tsx}

@@ -19,15 +19,15 @@ import { getTickDisplayStr } from '@jbrowse/core/util'
 type LGV = LinearGenomeViewModel
 
 const useStyles = makeStyles()(theme => ({
-  scaleBarContainer: {
+  scalebarContainer: {
     overflow: 'hidden',
     position: 'relative',
   },
-  scaleBarZoomContainer: {
+  scalebarZoomContainer: {
     position: 'relative',
     zIndex: 1,
   },
-  scaleBar: {
+  scalebar: {
     position: 'absolute',
     display: 'flex',
     pointerEvents: 'none',
@@ -94,7 +94,7 @@ const RenderedRefNameLabels = observer(({ model }: { model: LGV }) => {
   )
 })
 
-const RenderedScaleBarLabels = observer(({ model }: { model: LGV }) => {
+const RenderedScalebarLabels = observer(({ model }: { model: LGV }) => {
   const { classes } = useStyles()
   const { bpPerPx, staticBlocks } = model
 
@@ -150,13 +150,13 @@ const RenderedScaleBarLabels = observer(({ model }: { model: LGV }) => {
   )
 })
 
-interface ScaleBarProps {
+interface ScalebarProps {
   model: LGV
   style?: React.CSSProperties
   className?: string
 }
 
-const ScaleBar = React.forwardRef<HTMLDivElement, ScaleBarProps>(
+const Scalebar = React.forwardRef<HTMLDivElement, ScalebarProps>(
   ({ model, style, className, ...other }, ref) => {
     const { classes, cx } = useStyles()
 
@@ -164,14 +164,14 @@ const ScaleBar = React.forwardRef<HTMLDivElement, ScaleBarProps>(
     return (
       <Paper
         data-resizer="true" // used to avoid click-and-drag scrolls on trackscontainer
-        className={cx(classes.scaleBarContainer, className)}
+        className={cx(classes.scalebarContainer, className)}
         variant="outlined"
         ref={ref}
         style={style}
         {...other}
       >
         <div
-          className={classes.scaleBarZoomContainer}
+          className={classes.scalebarZoomContainer}
           style={{
             transform:
               model.scaleFactor !== 1
@@ -180,14 +180,14 @@ const ScaleBar = React.forwardRef<HTMLDivElement, ScaleBarProps>(
           }}
         >
           <div
-            className={classes.scaleBar}
+            className={classes.scalebar}
             style={{
               left: offsetLeft - 1,
               width: model.staticBlocks.totalWidthPx,
               ...style,
             }}
           >
-            <RenderedScaleBarLabels model={model} />
+            <RenderedScalebarLabels model={model} />
           </div>
         </div>
         <RenderedRefNameLabels model={model} />
@@ -196,4 +196,4 @@ const ScaleBar = React.forwardRef<HTMLDivElement, ScaleBarProps>(
   },
 )
 
-export default observer(ScaleBar)
+export default observer(Scalebar)

package/src/LinearGenomeView/components/SearchBox.tsx

@@ -33,11 +33,11 @@ function SearchBox({
   const assembly = assemblyManager.get(assemblyName)
   const searchScope = model.searchScope(assemblyName)
 
-  function navToOption(option: BaseResult) {
+  async function navToOption(option: BaseResult) {
     const location = option.getLocation()
     const trackId = option.getTrackId()
     if (location) {
-      model.navToLocString(location, assemblyName)
+      await model.navToLocString(location, assemblyName)
       if (trackId) {
         model.showTrack(trackId)
       }
@@ -52,7 +52,7 @@ function SearchBox({
   async function handleSelectedRegion(option: BaseResult) {
     try {
       if (option.hasLocation()) {
-        navToOption(option)
+        await navToOption(option)
       } else {
         const input = option.getLabel()
         const [ref, rest] = splitLast(input, ':')
@@ -61,7 +61,7 @@ function SearchBox({
           allRefs.includes(input) ||
           (allRefs.includes(ref) && !Number.isNaN(parseInt(rest, 10)))
         ) {
-          model.navToLocString(input, assemblyName)
+          await model.navToLocString(input, assemblyName)
         } else {
           const results = await fetchResults({
             queryString: input,
@@ -75,9 +75,9 @@ function SearchBox({
           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, assemblyName)
+            await model.navToLocString(input, assemblyName)
           }
         }
       }

package/src/LinearGenomeView/components/SearchResultsDialog.tsx

@@ -1,15 +1,12 @@
 import React from 'react'
-import { makeStyles } from 'tss-react/mui'
 import { resolveIdentifier, getRoot } from 'mobx-state-tree'
 import { getSession, getEnv } from '@jbrowse/core/util'
+import { Dialog } from '@jbrowse/core/ui'
 import {
   Button,
-  Dialog,
   DialogActions,
   DialogContent,
-  DialogTitle,
   Divider,
-  IconButton,
   Paper,
   Table,
   TableBody,
@@ -19,20 +16,8 @@ import {
   TableRow,
   Typography,
 } from '@mui/material'
-import CloseIcon from '@mui/icons-material/Close'
-import { LinearGenomeViewModel } from '../..'
 
-const useStyles = makeStyles()(theme => ({
-  dialogContent: {
-    width: '80em',
-  },
-  closeButton: {
-    position: 'absolute',
-    right: theme.spacing(1),
-    top: theme.spacing(1),
-    color: theme.palette.grey[500],
-  },
-}))
+import { LinearGenomeViewModel } from '../..'
 
 export default function SearchResultsDialog({
   model,
@@ -43,7 +28,6 @@ export default function SearchResultsDialog({
   optAssemblyName?: string
   handleClose: () => void
 }) {
-  const { classes } = useStyles()
   const session = getSession(model)
   const { pluginManager } = getEnv(session)
   const { assemblyManager } = session
@@ -63,7 +47,7 @@ export default function SearchResultsDialog({
   }
   const assemblyRegions = assembly.regions
 
-  function handleClick(location: string) {
+  async function handleClick(location: string) {
     try {
       const newRegion = assemblyRegions.find(
         region => location === region.refName,
@@ -74,7 +58,7 @@ export default function SearchResultsDialog({
         // region visible, xref #1703
         model.showAllRegions()
       } else {
-        model.navToLocString(location, assemblyName)
+        await model.navToLocString(location, assemblyName)
       }
     } catch (e) {
       console.warn(e)
@@ -92,23 +76,7 @@ export default function SearchResultsDialog({
   }
 
   return (
-    <Dialog open maxWidth="xl" onClose={handleClose}>
-      <DialogTitle>
-        Search results
-        {handleClose ? (
-          <IconButton
-            data-testid="close-resultsDialog"
-            className={classes.closeButton}
-            onClick={() => {
-              handleClose()
-            }}
-            size="large"
-          >
-            <CloseIcon />
-          </IconButton>
-        ) : null}
-      </DialogTitle>
-      <Divider />
+    <Dialog open maxWidth="xl" onClose={handleClose} title="Search results">
       <DialogContent>
         {!model.searchResults?.length ? (
           <Typography>
@@ -143,14 +111,19 @@ export default function SearchResultsDialog({
                       </TableCell>
                       <TableCell align="right">
                         <Button
-                          onClick={() => {
-                            const location = result.getLocation()
-                            if (location) {
-                              handleClick(location)
-                              const resultTrackId = result.getTrackId()
-                              if (resultTrackId) {
-                                model.showTrack(resultTrackId)
+                          onClick={async () => {
+                            try {
+                              const location = result.getLocation()
+                              if (location) {
+                                await handleClick(location)
+                                const resultTrackId = result.getTrackId()
+                                if (resultTrackId) {
+                                  model.showTrack(resultTrackId)
+                                }
                               }
+                            } catch (e) {
+                              console.error(e)
+                              session.notify(`${e}`, 'error')
                             }
                             handleClose()
                           }}

package/src/LinearGenomeView/components/SequenceSearchDialog.tsx

@@ -2,36 +2,24 @@ import React, { useState } from 'react'
 import {
   Button,
   Checkbox,
-  Dialog,
   DialogActions,
   DialogContent,
-  DialogTitle,
-  Divider,
   FormGroup,
   FormControlLabel,
-  IconButton,
   TextField,
   Typography,
 } from '@mui/material'
+import { Dialog } from '@jbrowse/core/ui'
 import { getSnapshot } from 'mobx-state-tree'
 import { makeStyles } from 'tss-react/mui'
 import { observer } from 'mobx-react'
 import { getSession } from '@jbrowse/core/util'
 
-// icons
-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],
-  },
+const useStyles = makeStyles()({
   dialogContent: {
     width: '40em',
   },
-}))
+})
 
 function SequenceDialog({
   model,
@@ -55,21 +43,7 @@ function SequenceDialog({
   }
 
   return (
-    <Dialog maxWidth="xl" open onClose={handleClose}>
-      <DialogTitle>
-        Sequence search
-        {handleClose ? (
-          <IconButton
-            className={classes.closeButton}
-            onClick={() => handleClose()}
-            size="large"
-          >
-            <CloseIcon />
-          </IconButton>
-        ) : null}
-      </DialogTitle>
-      <Divider />
-
+    <Dialog maxWidth="xl" open onClose={handleClose} title="Sequence search">
       <DialogContent className={classes.dialogContent}>
         <Typography>
           Supply a sequence to search for. A track will be created with the

package/src/LinearGenomeView/components/TrackContainer.tsx

@@ -3,10 +3,12 @@ import { Paper } from '@mui/material'
 import { makeStyles } from 'tss-react/mui'
 import { observer } from 'mobx-react'
 import { isAlive } from 'mobx-state-tree'
+import { ErrorBoundary } from 'react-error-boundary'
+
+// jbrowse core
 import { BaseTrackModel } from '@jbrowse/core/pluggableElementTypes/models'
 import { getConf } from '@jbrowse/core/configuration'
 import { ResizeHandle, ErrorMessage } from '@jbrowse/core/ui'
-import { ErrorBoundary } from 'react-error-boundary'
 import { useDebouncedCallback } from '@jbrowse/core/util'
 
 // locals
@@ -35,7 +37,7 @@ const useStyles = makeStyles()({
     zIndex: 3,
   },
 
-  // aligns with block bounderies. check for example the breakpoint split view
+  // aligns with block boundaries. check for example the breakpoint split view
   // demo to see if features align if wanting to change things
   renderingComponentContainer: {
     position: 'absolute',

package/src/LinearGenomeView/components/TracksContainer.tsx

@@ -1,14 +1,19 @@
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useRef } from 'react'
 import { makeStyles } from 'tss-react/mui'
 import { observer } from 'mobx-react'
-import normalizeWheel from 'normalize-wheel'
+import { Menu } from '@jbrowse/core/ui'
 
-// locals
+// local utils
 import { LinearGenomeViewModel, SCALE_BAR_HEIGHT } from '..'
-import RubberBand from './RubberBand'
-import ScaleBar from './ScaleBar'
+import { useSideScroll, useRangeSelect, useWheelScroll } from './hooks'
+
+// local components
+import Rubberband from './Rubberband'
+import Scalebar from './Scalebar'
 import Gridlines from './Gridlines'
 import CenterLine from './CenterLine'
+import VerticalGuide from './VerticalGuide'
+import RubberbandSpan from './RubberbandSpan'
 
 const useStyles = makeStyles()({
   tracksContainer: {
@@ -22,7 +27,6 @@ const useStyles = makeStyles()({
 })
 
 type LGV = LinearGenomeViewModel
-type Timer = ReturnType<typeof setTimeout>
 
 function TracksContainer({
   children,
@@ -32,149 +36,68 @@ function TracksContainer({
   model: LGV
 }) {
   const { classes } = useStyles()
-  // refs are to store these variables to avoid repeated rerenders associated
-  // with useState/setState
-  const delta = useRef(0)
-  const scheduled = useRef(false)
-  const timeout = useRef<Timer>()
+  const { mouseDown: mouseDown1, mouseUp } = useSideScroll(model)
   const ref = useRef<HTMLDivElement>(null)
-  const prevX = useRef<number>(0)
-
-  const [mouseDragging, setMouseDragging] = useState(false)
-
-  useEffect(() => {
-    let cleanup = () => {}
-
-    function globalMouseMove(event: MouseEvent) {
-      event.preventDefault()
-      const currX = event.clientX
-      const distance = currX - prevX.current
-      if (distance) {
-        // use rAF to make it so multiple event handlers aren't fired per-frame
-        // see https://calendar.perfplanet.com/2013/the-runtime-performance-checklist/
-        if (!scheduled.current) {
-          scheduled.current = true
-          window.requestAnimationFrame(() => {
-            model.horizontalScroll(-distance)
-            scheduled.current = false
-            prevX.current = event.clientX
-          })
-        }
-      }
-    }
-
-    function globalMouseUp() {
-      prevX.current = 0
-      if (mouseDragging) {
-        setMouseDragging(false)
-      }
-    }
-
-    if (mouseDragging) {
-      window.addEventListener('mousemove', globalMouseMove, true)
-      window.addEventListener('mouseup', globalMouseUp, true)
-      cleanup = () => {
-        window.removeEventListener('mousemove', globalMouseMove, true)
-        window.removeEventListener('mouseup', globalMouseUp, true)
-      }
-    }
-    return cleanup
-  }, [model, mouseDragging, prevX])
-
-  function mouseDown(event: React.MouseEvent) {
-    // check if clicking a draggable element or a resize handle
-    const target = event.target as HTMLElement
-    if (target.draggable || target.dataset.resizer) {
-      return
-    }
-
-    // otherwise do click and drag scroll
-    if (event.button === 0) {
-      prevX.current = event.clientX
-      setMouseDragging(true)
-    }
-  }
-
-  // this local mouseup is used in addition to the global because sometimes
-  // the global add/remove are not called in time, resulting in issue #533
-  function mouseUp(event: React.MouseEvent) {
-    event.preventDefault()
-    setMouseDragging(false)
-  }
-
-  function mouseLeave(event: React.MouseEvent) {
-    event.preventDefault()
-  }
-
-  useEffect(() => {
-    const curr = ref.current
-    // if ctrl is held down, zoom in with y-scroll
-    // else scroll horizontally with x-scroll
-    function onWheel(origEvent: WheelEvent) {
-      const event = normalizeWheel(origEvent)
-      if (origEvent.ctrlKey === true) {
-        origEvent.preventDefault()
-        delta.current += event.pixelY / 500
-        model.setScaleFactor(
-          delta.current < 0 ? 1 - delta.current : 1 / (1 + delta.current),
-        )
-        if (timeout.current) {
-          clearTimeout(timeout.current)
-        }
-        timeout.current = setTimeout(() => {
-          model.setScaleFactor(1)
-          model.zoomTo(
-            delta.current > 0
-              ? model.bpPerPx * (1 + delta.current)
-              : model.bpPerPx / (1 - delta.current),
-          )
-          delta.current = 0
-        }, 300)
-      } else {
-        // this is needed to stop the event from triggering "back button
-        // action" on MacOSX etc.  but is a heuristic to avoid preventing the
-        // inner-track scroll behavior
-        if (Math.abs(event.pixelX) > Math.abs(2 * event.pixelY)) {
-          origEvent.preventDefault()
-        }
-        delta.current += event.pixelX
-        if (!scheduled.current) {
-          // use rAF to make it so multiple event handlers aren't fired per-frame
-          // see https://calendar.perfplanet.com/2013/the-runtime-performance-checklist/
-          scheduled.current = true
-          window.requestAnimationFrame(() => {
-            model.horizontalScroll(delta.current)
-            delta.current = 0
-            scheduled.current = false
-          })
-        }
-      }
-    }
-    if (curr) {
-      curr.addEventListener('wheel', onWheel)
-      return () => {
-        curr.removeEventListener('wheel', onWheel)
-      }
-    }
-    return () => {}
-  }, [model])
+  const {
+    guideX,
+    rubberbandOn,
+    leftBpOffset,
+    rightBpOffset,
+    numOfBpSelected,
+    width,
+    left,
+    anchorPosition,
+    handleMenuItemClick,
+    open,
+    handleClose,
+    mouseMove,
+    mouseDown: mouseDown2,
+  } = useRangeSelect(ref, model, true)
+  useWheelScroll(ref, model)
 
   return (
     <div
       ref={ref}
       data-testid="trackContainer"
       className={classes.tracksContainer}
-      onMouseDown={mouseDown}
+      onMouseDown={event => {
+        mouseDown1(event)
+        mouseDown2(event)
+      }}
+      onMouseMove={mouseMove}
       onMouseUp={mouseUp}
-      onMouseLeave={mouseLeave}
     >
       {model.showGridlines ? <Gridlines model={model} /> : null}
       {model.showCenterLine ? <CenterLine model={model} /> : null}
-
-      <RubberBand
+      {guideX !== undefined ? (
+        <VerticalGuide model={model} coordX={guideX} />
+      ) : rubberbandOn ? (
+        <RubberbandSpan
+          leftBpOffset={leftBpOffset}
+          rightBpOffset={rightBpOffset}
+          numOfBpSelected={numOfBpSelected}
+          width={width}
+          left={left}
+        />
+      ) : null}
+      {anchorPosition ? (
+        <Menu
+          anchorReference="anchorPosition"
+          anchorPosition={{
+            left: anchorPosition.clientX,
+            top: anchorPosition.clientY,
+          }}
+          onMenuItemClick={handleMenuItemClick}
+          open={open}
+          onClose={handleClose}
+          menuItems={model.rubberBandMenuItems()}
+        />
+      ) : null}
+
+      <Rubberband
         model={model}
         ControlComponent={
-          <ScaleBar
+          <Scalebar
             model={model}
             style={{ height: SCALE_BAR_HEIGHT, boxSizing: 'border-box' }}
           />

package/src/LinearGenomeView/components/VerticalGuide.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import { Tooltip } from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
+import { observer } from 'mobx-react'
+import { stringify } from '@jbrowse/core/util'
+
+// locals
+import { LinearGenomeViewModel } from '..'
+
+type LGV = LinearGenomeViewModel
+
+const useStyles = makeStyles()({
+  guide: {
+    pointerEvents: 'none',
+    height: '100%',
+    width: 1,
+    position: 'absolute',
+    zIndex: 10,
+  },
+})
+
+function VerticalGuide({ model, coordX }: { model: LGV; coordX: number }) {
+  const { classes } = useStyles()
+  return (
+    <Tooltip open placement="top" title={stringify(model.pxToBp(coordX))} arrow>
+      <div
+        className={classes.guide}
+        style={{
+          left: coordX,
+          background: 'red',
+        }}
+      />
+    </Tooltip>
+  )
+}
+
+export default observer(VerticalGuide)