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

package/src/LinearGenomeView/components/ImportForm.tsx

@@ -62,11 +62,11 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
     setValue(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)
       }
@@ -81,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 || []
@@ -89,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,
@@ -103,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)
           }
         }
       }
@@ -122,11 +122,12 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
       {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)
             }
           }}
         >
@@ -167,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/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)

package/src/LinearGenomeView/components/{OverviewScaleBar.tsx → OverviewScalebar.tsx}

@@ -3,6 +3,7 @@ import { Typography, useTheme, alpha } from '@mui/material'
 import { makeStyles } from 'tss-react/mui'
 import { observer } from 'mobx-react'
 
+// core
 import Base1DView, { Base1DViewModel } from '@jbrowse/core/util/Base1DViewModel'
 import { getSession, getTickDisplayStr } from '@jbrowse/core/util'
 import { ContentBlock } from '@jbrowse/core/util/blockTypes'
@@ -15,46 +16,46 @@ import {
   HEADER_OVERVIEW_HEIGHT,
 } from '..'
 import { chooseGridPitch } from '../util'
-import OverviewRubberBand from './OverviewRubberBand'
+import OverviewRubberband from './OverviewRubberband'
 
 const wholeSeqSpacer = 2
 
 const useStyles = makeStyles()(theme => ({
-  scaleBar: {
+  scalebar: {
     height: HEADER_OVERVIEW_HEIGHT,
   },
-  scaleBarBorder: {
+  scalebarBorder: {
     border: '1px solid',
   },
-  scaleBarContig: {
+  scalebarContig: {
     backgroundColor: theme.palette.background.default,
     position: 'absolute',
     top: 0,
     height: HEADER_OVERVIEW_HEIGHT,
   },
-  scaleBarContigForward: {
+  scalebarContigForward: {
     backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 9'%3E%3Cpath d='M-.1 0L6 4.5L-.1 9' fill='none' stroke='%23ddd'/%3E%3C/svg%3E")`,
     backgroundRepeat: 'repeat',
   },
-  scaleBarContigReverse: {
+  scalebarContigReverse: {
     backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 9'%3E%3Cpath d='M6 0L0 4.5L6 9' fill='none' stroke='%23ddd'/%3E%3C/svg%3E")`,
     backgroundRepeat: 'repeat',
   },
 
-  scaleBarRefName: {
+  scalebarRefName: {
     position: 'absolute',
     fontWeight: 'bold',
     pointerEvents: 'none',
     zIndex: 100,
   },
-  scaleBarLabel: {
+  scalebarLabel: {
     height: HEADER_OVERVIEW_HEIGHT,
     position: 'absolute',
     display: 'flex',
     justifyContent: 'center',
     pointerEvents: 'none',
   },
-  scaleBarVisibleRegion: {
+  scalebarVisibleRegion: {
     position: 'absolute',
     height: HEADER_OVERVIEW_HEIGHT,
     pointerEvents: 'none',
@@ -328,19 +329,19 @@ const OverviewBox = observer(
             left: block.offsetPx + 3,
             color: canDisplayCytobands ? 'black' : refNameColor,
           }}
-          className={classes.scaleBarRefName}
+          className={classes.scalebarRefName}
         >
           {refName}
         </Typography>
         <div
           className={cx(
-            classes.scaleBarContig,
+            classes.scalebarContig,
             canDisplayCytobands
               ? undefined
               : reversed
-              ? classes.scaleBarContigReverse
-              : classes.scaleBarContigForward,
-            !canDisplayCytobands ? classes.scaleBarBorder : undefined,
+              ? classes.scalebarContigReverse
+              : classes.scalebarContigForward,
+            !canDisplayCytobands ? classes.scalebarBorder : undefined,
           )}
           style={{
             left: block.offsetPx + cytobandOffset,
@@ -352,7 +353,7 @@ const OverviewBox = observer(
             ? tickLabels.map((tickLabel, labelIdx) => (
                 <Typography
                   key={`${JSON.stringify(block)}-${tickLabel}-${labelIdx}`}
-                  className={classes.scaleBarLabel}
+                  className={classes.scalebarLabel}
                   variant="body2"
                   style={{
                     left: ((labelIdx + 1) * majorPitch) / scale,
@@ -380,7 +381,7 @@ const OverviewBox = observer(
   },
 )
 
-const ScaleBar = observer(
+const Scalebar = observer(
   ({
     model,
     scale,
@@ -397,7 +398,7 @@ const ScaleBar = observer(
     const overviewVisibleRegions = overview.dynamicBlocks
 
     const { tertiary, primary } = theme.palette
-    const scaleBarColor = tertiary ? tertiary.light : primary.light
+    const scalebarColor = tertiary ? tertiary.light : primary.light
 
     if (!visibleRegions.length) {
       return null
@@ -416,13 +417,13 @@ const ScaleBar = observer(
         coord: last.reversed ? last.start : last.end,
       }) || 0
 
-    const color = showCytobands ? '#f00' : scaleBarColor
+    const color = showCytobands ? '#f00' : scalebarColor
     const transparency = showCytobands ? 0.1 : 0.3
 
     return (
-      <div className={classes.scaleBar}>
+      <div className={classes.scalebar}>
         <div
-          className={classes.scaleBarVisibleRegion}
+          className={classes.scalebarVisibleRegion}
           style={{
             width: lastOverviewPx - firstOverviewPx,
             left: firstOverviewPx + cytobandOffset,
@@ -435,7 +436,7 @@ const ScaleBar = observer(
           return !(block instanceof ContentBlock) ? (
             <div
               key={`${JSON.stringify(block)}-${idx}`}
-              className={classes.scaleBarContig}
+              className={classes.scalebarContig}
               style={{
                 width: block.widthPx,
                 left: block.offsetPx,
@@ -459,7 +460,7 @@ const ScaleBar = observer(
   },
 )
 
-function OverviewScaleBar({
+function OverviewScalebar({
   model,
   children,
 }: {
@@ -484,11 +485,11 @@ function OverviewScaleBar({
 
   return (
     <div>
-      <OverviewRubberBand
+      <OverviewRubberband
         model={model}
         overview={overview}
         ControlComponent={
-          <ScaleBar model={model} overview={overview} scale={scale} />
+          <Scalebar model={model} overview={overview} scale={scale} />
         }
       />
       <div className={classes.overview}>
@@ -501,6 +502,6 @@ function OverviewScaleBar({
   )
 }
 
-export default observer(OverviewScaleBar)
+export default observer(OverviewScalebar)
 
 export { Cytobands, Polygon }

package/src/LinearGenomeView/components/RefNameAutocomplete.tsx

@@ -94,6 +94,7 @@ function RefNameAutocomplete({
   useEffect(() => {
     let active = true
 
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
     ;(async () => {
       try {
         if (debouncedSearch === '' || !assemblyName) {
@@ -146,7 +147,7 @@ function RefNameAutocomplete({
   const inputBoxVal = coarseVisibleLocStrings || value || ''
 
   // heuristic, text width + icon width
-  // + 45 accomodates help icon and search icon
+  // + 45 accommodates help icon and search icon
   const width = Math.min(
     Math.max(measureText(inputBoxVal, 16) + 45, minWidth),
     550,

package/src/LinearGenomeView/components/Rubberband.tsx

@@ -0,0 +1,89 @@
+import React, { useRef } from 'react'
+import { observer } from 'mobx-react'
+import { makeStyles } from 'tss-react/mui'
+import { Menu } from '@jbrowse/core/ui'
+
+// locals
+import VerticalGuide from './VerticalGuide'
+import RubberbandSpan from './RubberbandSpan'
+import { useRangeSelect } from './hooks'
+import { LinearGenomeViewModel } from '..'
+
+type LGV = LinearGenomeViewModel
+
+const useStyles = makeStyles()({
+  rubberbandControl: {
+    cursor: 'crosshair',
+    width: '100%',
+    minHeight: 8,
+  },
+})
+
+function Rubberband({
+  model,
+  ControlComponent = <div />,
+}: {
+  model: LGV
+  ControlComponent?: React.ReactElement
+}) {
+  const ref = useRef<HTMLDivElement>(null)
+  const { classes } = useStyles()
+
+  const {
+    guideX,
+    rubberbandOn,
+    leftBpOffset,
+    rightBpOffset,
+    numOfBpSelected,
+    width,
+    left,
+    anchorPosition,
+    handleMenuItemClick,
+    open,
+    handleClose,
+    mouseMove,
+    mouseDown,
+    mouseOut,
+  } = useRangeSelect(ref, model)
+
+  return (
+    <>
+      {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}
+      <div
+        data-testid="rubberband_controls"
+        className={classes.rubberbandControl}
+        ref={ref}
+        onMouseDown={mouseDown}
+        onMouseMove={mouseMove}
+        onMouseOut={mouseOut}
+      >
+        {ControlComponent}
+      </div>
+    </>
+  )
+}
+
+export default observer(Rubberband)

package/src/LinearGenomeView/components/RubberbandSpan.tsx

@@ -0,0 +1,116 @@
+import React, { useRef } from 'react'
+import { makeStyles } from 'tss-react/mui'
+
+import { Popover, Typography, alpha } from '@mui/material'
+import { stringify, toLocale } from '@jbrowse/core/util'
+
+const useStyles = makeStyles()(theme => {
+  const { primary, tertiary } = 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),
+    },
+  }
+})
+
+interface Offset {
+  coord: number
+  refName?: string
+  oob?: boolean
+}
+
+function RubberbandSpan({
+  leftBpOffset,
+  rightBpOffset,
+  numOfBpSelected,
+  left,
+  width,
+}: {
+  leftBpOffset: Offset
+  rightBpOffset: Offset
+  numOfBpSelected?: number
+  left: number
+  width: number
+}) {
+  const ref = useRef(null)
+  const { classes } = useStyles()
+  return (
+    <>
+      {ref.current ? (
+        <>
+          <Popover
+            className={classes.popover}
+            classes={{ paper: classes.paper }}
+            open
+            anchorEl={ref.current}
+            anchorOrigin={{
+              vertical: 'top',
+              horizontal: 'left',
+            }}
+            transformOrigin={{
+              vertical: 'bottom',
+              horizontal: 'right',
+            }}
+            keepMounted
+            disableRestoreFocus
+          >
+            <Typography>{stringify(leftBpOffset)}</Typography>
+          </Popover>
+          <Popover
+            className={classes.popover}
+            classes={{
+              paper: classes.paper,
+            }}
+            open
+            anchorEl={ref.current}
+            anchorOrigin={{
+              vertical: 'top',
+              horizontal: 'right',
+            }}
+            transformOrigin={{
+              vertical: 'bottom',
+              horizontal: 'left',
+            }}
+            keepMounted
+            disableRestoreFocus
+          >
+            <Typography>{stringify(rightBpOffset)}</Typography>
+          </Popover>
+        </>
+      ) : null}
+      <div ref={ref} className={classes.rubberband} style={{ left, width }}>
+        {numOfBpSelected ? (
+          <Typography variant="h6" className={classes.rubberbandText}>
+            {toLocale(numOfBpSelected)} bp
+          </Typography>
+        ) : null}
+      </div>
+    </>
+  )
+}
+
+export default RubberbandSpan