@jbrowse/plugin-linear-genome-view 1.7.7 → 1.7.10

package/src/BaseLinearDisplay/components/Tooltip.tsx

@@ -0,0 +1,97 @@
+import React, { useState, useMemo } from 'react'
+import { getConf } from '@jbrowse/core/configuration'
+import { observer } from 'mobx-react'
+import { Portal, alpha, makeStyles } from '@material-ui/core'
+import { usePopper } from 'react-popper'
+
+// locals
+import { BaseLinearDisplayModel } from '../models/BaseLinearDisplayModel'
+
+function round(value: number) {
+  return Math.round(value * 1e5) / 1e5
+}
+const useStyles = makeStyles(theme => ({
+  // these styles come from
+  // https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Tooltip/Tooltip.js
+  tooltip: {
+    pointerEvents: 'none',
+    backgroundColor: alpha(theme.palette.grey[700], 0.9),
+    borderRadius: theme.shape.borderRadius,
+    color: theme.palette.common.white,
+    fontFamily: theme.typography.fontFamily,
+    padding: '4px 8px',
+    fontSize: theme.typography.pxToRem(12),
+    lineHeight: `${round(14 / 10)}em`,
+    maxWidth: 300,
+    wordWrap: 'break-word',
+  },
+}))
+
+const TooltipContents = React.forwardRef<
+  HTMLDivElement,
+  { message: React.ReactNode | string }
+>(({ message }: { message: React.ReactNode | string }, ref) => {
+  return <div ref={ref}>{message}</div>
+})
+
+type Coord = [number, number]
+const Tooltip = observer(
+  ({
+    model,
+    clientMouseCoord,
+  }: {
+    model: BaseLinearDisplayModel
+    clientMouseCoord: Coord
+  }) => {
+    const classes = useStyles()
+    const { featureUnderMouse } = model
+    const [width, setWidth] = useState(0)
+    const [popperElt, setPopperElt] = useState<HTMLDivElement | null>(null)
+
+    // must be memoized a la https://github.com/popperjs/react-popper/issues/391
+    const virtElement = useMemo(
+      () => ({
+        getBoundingClientRect: () => {
+          const x = clientMouseCoord[0] + width / 2 + 20
+          const y = clientMouseCoord[1]
+          return {
+            top: y,
+            left: x,
+            bottom: y,
+            right: x,
+            width: 0,
+            height: 0,
+            x,
+            y,
+            toJSON() {},
+          }
+        },
+      }),
+      [clientMouseCoord, width],
+    )
+    const { styles, attributes } = usePopper(virtElement, popperElt)
+
+    const contents = featureUnderMouse
+      ? getConf(model, 'mouseover', { feature: featureUnderMouse })
+      : undefined
+
+    return featureUnderMouse && contents ? (
+      <Portal>
+        <div
+          ref={setPopperElt}
+          className={classes.tooltip}
+          // zIndex needed to go over widget drawer
+          style={{ ...styles.popper, zIndex: 100000 }}
+          {...attributes.popper}
+        >
+          <TooltipContents
+            ref={elt => setWidth(elt?.getBoundingClientRect().width || 0)}
+            message={contents}
+          />
+        </div>
+      </Portal>
+    ) : null
+  },
+)
+
+export default Tooltip

package/src/BaseLinearDisplay/models/BaseLinearDisplayModel.tsx

@@ -7,6 +7,7 @@ import { MenuItem } from '@jbrowse/core/ui'
 import {
   isAbortException,
   getContainingView,
+  getContainingTrack,
   getSession,
   getViewParams,
   isSelectionContainer,
@@ -333,8 +334,13 @@ export const BaseLinearDisplay = types
         const featureWidget = session.addWidget(
           'BaseFeatureWidget',
           'baseFeature',
-          { featureData: feature.toJSON(), view: getContainingView(self) },
+          {
+            view: getContainingView(self),
+            track: getContainingTrack(self),
+            featureData: feature.toJSON(),
+          },
         )
+
         session.showWidget(featureWidget)
       }
       if (isSelectionContainer(session)) {
@@ -551,7 +557,7 @@ export const BaseLinearDisplay = types
           self.currBpPerPx !== view.bpPerPx || !self.estimatedRegionStats,
         rpcDriverName: self.rpcDriverName,
         displayModel: self,
-        onFeatureClick(_: unknown, featureId: string | undefined) {
+        onFeatureClick(_: unknown, featureId?: string) {
           const f = featureId || self.featureIdUnderMouse
           if (!f) {
             self.clearFeatureSelection()
@@ -566,7 +572,7 @@ export const BaseLinearDisplay = types
           self.clearFeatureSelection()
         },
         // similar to click but opens a menu with further options
-        onFeatureContextMenu(_: unknown, featureId: string | undefined) {
+        onFeatureContextMenu(_: unknown, featureId?: string) {
           const f = featureId || self.featureIdUnderMouse
           if (!f) {
             self.clearFeatureSelection()
@@ -576,7 +582,7 @@ export const BaseLinearDisplay = types
           }
         },
 
-        onMouseMove(_: unknown, featureId: string | undefined) {
+        onMouseMove(_: unknown, featureId?: string) {
           self.setFeatureIdUnderMouse(featureId)
         },
 
@@ -642,6 +648,7 @@ export const BaseLinearDisplay = types
             const { offsetPx } = roundedDynamicBlocks[index]
             const offset = offsetPx - viewOffsetPx
             const clipid = getId(id, index)
+
             return (
               <React.Fragment key={`frag-${index}`}>
                 <defs>

package/src/LinearGenomeView/components/ExportSvgDialog.tsx

@@ -1,17 +1,19 @@
 import React, { useState } from 'react'
-import { makeStyles } from '@material-ui/core/styles'
 import {
   Button,
+  Checkbox,
+  CircularProgress,
   Dialog,
   DialogActions,
   DialogContent,
   DialogTitle,
-  IconButton,
-  Checkbox,
   FormControlLabel,
-  CircularProgress,
+  IconButton,
+  TextField,
   Typography,
+  makeStyles,
 } from '@material-ui/core'
+import { ErrorMessage } from '@jbrowse/core/ui'
 import CloseIcon from '@material-ui/icons/Close'
 import { LinearGenomeViewModel as LGV } from '..'
 
@@ -24,6 +26,15 @@ const useStyles = makeStyles(theme => ({
   },
 }))
 
+function LoadingMessage() {
+  return (
+    <div>
+      <CircularProgress size={20} style={{ marginRight: 20 }} />
+      <Typography display="inline">Creating SVG</Typography>
+    </div>
+  )
+}
+
 export default function ExportSvgDlg({
   model,
   handleClose,
@@ -35,6 +46,7 @@ export default function ExportSvgDlg({
   const offscreenCanvas = typeof OffscreenCanvas !== 'undefined'
   const [rasterizeLayers, setRasterizeLayers] = useState(offscreenCanvas)
   const [loading, setLoading] = useState(false)
+  const [filename, setFilename] = useState('jbrowse.svg')
   const [error, setError] = useState<unknown>()
   const classes = useStyles()
   return (
@@ -47,13 +59,15 @@ export default function ExportSvgDlg({
       </DialogTitle>
       <DialogContent>
         {error ? (
-          <div style={{ color: 'red' }}>{`${error}`}</div>
+          <ErrorMessage error={error} />
         ) : loading ? (
-          <div>
-            <CircularProgress size={20} style={{ marginRight: 20 }} />
-            <Typography display="inline">Creating SVG</Typography>
-          </div>
+          <LoadingMessage />
         ) : null}
+        <TextField
+          helperText="filename"
+          value={filename}
+          onChange={event => setFilename(event.target.value)}
+        />
         {offscreenCanvas ? (
           <FormControlLabel
             control={
@@ -87,12 +101,11 @@ export default function ExportSvgDlg({
             setLoading(true)
             setError(undefined)
             try {
-              await model.exportSvg({ rasterizeLayers })
+              await model.exportSvg({ rasterizeLayers, filename })
               handleClose()
             } catch (e) {
               console.error(e)
               setError(e)
-            } finally {
               setLoading(false)
             }
           }}

package/src/LinearGenomeView/components/Header.tsx

@@ -7,6 +7,7 @@ import {
   makeStyles,
   alpha,
 } from '@material-ui/core'
+import { getTickDisplayStr2 } from '@jbrowse/core/util'
 import SearchBox from './SearchBox'
 
 // icons
@@ -97,10 +98,10 @@ function PanControls({ model }: { model: LGV }) {
 
 const RegionWidth = observer(({ model }: { model: LGV }) => {
   const classes = useStyles()
-  const { coarseTotalBp } = model
+  const { coarseTotalBp, bpPerPx } = model
   return (
     <Typography variant="body2" color="textSecondary" className={classes.bp}>
-      {Math.round(coarseTotalBp).toLocaleString('en-US')} bp
+      {getTickDisplayStr2(coarseTotalBp, bpPerPx)}
     </Typography>
   )
 })

package/src/LinearGenomeView/components/HelpDialog.tsx

@@ -32,11 +32,8 @@ export default function HelpDialog({
         Using the search box
         {handleClose ? (
           <IconButton
-            data-testid="close-resultsDialog"
             className={classes.closeButton}
-            onClick={() => {
-              handleClose()
-            }}
+            onClick={() => handleClose()}
           >
             <CloseIcon />
           </IconButton>
@@ -81,6 +78,10 @@ export default function HelpDialog({
             <code>chr1:1-100[rev] chr2:1-100</code> - open up the first region
             in the horizontally flipped orientation
           </li>
+          <li>
+            <code>chr1 100 200</code> - use whitespace separated refname, start,
+            end
+          </li>
         </ul>
       </DialogContent>
       <Divider />

package/src/LinearGenomeView/components/ImportForm.tsx

@@ -37,13 +37,9 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
   const classes = useStyles()
   const session = getSession(model)
   const { assemblyNames, assemblyManager, textSearchManager } = session
-  const {
-    rankSearchResults,
-    isSearchDialogDisplayed,
-    error: modelError,
-  } = model
+  const { rankSearchResults, isSearchDialogDisplayed, error } = model
   const [selectedAsm, setSelectedAsm] = useState(assemblyNames[0])
-  const [error, setError] = useState<typeof modelError | undefined>(modelError)
+  const [importError, setImportError] = useState(error)
   const searchScope = model.searchScope(selectedAsm)
 
   const assembly = assemblyManager.get(selectedAsm)
@@ -51,19 +47,15 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
     ? assembly?.error
     : 'No configured assemblies'
   const regions = assembly?.regions || []
-  const err = assemblyError || error
-
-  const [myOption, setOption] = useState<BaseResult>()
+  const err = assemblyError || importError
+  const [myVal, setValue] = useState('')
+  const value = myVal || regions[0]?.refName
 
   // use this instead of useState initializer because the useState initializer
   // won't update in response to an observable
-  const option =
-    myOption ||
-    new BaseResult({
-      label: regions[0]?.refName,
-    })
-
-  const selectedRegion = option?.getLocation()
+  const option = new BaseResult({
+    label: value,
+  })
 
   async function fetchResults(query: string, searchType?: SearchType) {
     if (!textSearchManager) {
@@ -98,15 +90,26 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
     }
     let trackId = option.getTrackId()
     let location = input || option.getLocation() || ''
+    const [ref, rest] = location.split(':')
+    const allRefs = assembly?.allRefNames || []
     try {
-      if (assembly?.allRefNames?.includes(location)) {
+      // instead of querying text-index, first:
+      // - check if input matches a refname directly
+      // - or looks like locstring
+      // then just navigate as if it were a locstring
+      if (
+        allRefs.includes(location) ||
+        (allRefs.includes(ref) &&
+          rest !== undefined &&
+          !Number.isNaN(parseInt(rest, 10)))
+      ) {
         model.navToLocString(location, selectedAsm)
       } else {
         const results = await fetchResults(input, 'exact')
-        if (results && results.length > 1) {
+        if (results.length > 1) {
           model.setSearchResults(results, input.toLowerCase())
           return
-        } else if (results?.length === 1) {
+        } else if (results.length === 1) {
           location = results[0].getLocation()
           trackId = results[0].getTrackId()
         }
@@ -130,7 +133,15 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
     <div className={classes.container}>
       {err ? <ErrorMessage error={err} /> : null}
       <Container className={classes.importFormContainer}>
-        <form onSubmit={event => event.preventDefault()}>
+        <form
+          onSubmit={event => {
+            event.preventDefault()
+            model.setError(undefined)
+            if (value) {
+              handleSelectedRegion(value)
+            }
+          }}
+        >
           <Grid
             container
             spacing={1}
@@ -140,7 +151,7 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
             <Grid item>
               <AssemblySelector
                 onChange={val => {
-                  setError(undefined)
+                  setImportError('')
                   setSelectedAsm(val)
                 }}
                 session={session}
@@ -152,15 +163,15 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
               {selectedAsm ? (
                 err ? (
                   <CloseIcon style={{ color: 'red' }} />
-                ) : selectedRegion ? (
+                ) : value ? (
                   <RefNameAutocomplete
                     fetchResults={fetchResults}
                     model={model}
                     assemblyName={assemblyError ? undefined : selectedAsm}
-                    value={selectedRegion}
+                    value={value}
                     // note: minWidth 270 accomodates full width of helperText
                     minWidth={270}
-                    onSelect={option => setOption(option)}
+                    onChange={str => setValue(str)}
                     TextFieldProps={{
                       variant: 'outlined',
                       helperText:
@@ -181,21 +192,15 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
             <Grid item>
               <Button
                 type="submit"
-                disabled={!selectedRegion}
+                disabled={!value}
                 className={classes.button}
-                onClick={() => {
-                  model.setError(undefined)
-                  if (selectedRegion) {
-                    handleSelectedRegion(selectedRegion)
-                  }
-                }}
                 variant="contained"
                 color="primary"
               >
                 Open
               </Button>
               <Button
-                disabled={!selectedRegion}
+                disabled={!value}
                 className={classes.button}
                 onClick={() => {
                   model.setError(undefined)

package/src/LinearGenomeView/components/LinearGenomeView.test.js

@@ -79,7 +79,7 @@ describe('<LinearGenomeView />', () => {
     await findByText('Foo Track')
     // test needs to wait until it's updated to display 100 bp in the header to
     // make snapshot pass
-    await findByText('100 bp')
+    await findByText('100bp')
     expect(container.firstChild).toMatchSnapshot()
   })
   it('renders two tracks, two regions', async () => {
@@ -145,7 +145,7 @@ describe('<LinearGenomeView />', () => {
       <LinearGenomeView model={model} />,
     )
     await findByText('Foo Track')
-    await findByText('798 bp')
+    await findByText('798bp')
     await findAllByTestId('svgfeatures')
 
     expect(container.firstChild).toMatchSnapshot()

package/src/LinearGenomeView/components/LinearGenomeView.tsx

@@ -92,16 +92,22 @@ const LinearGenomeView = observer(({ model }: { model: LGV }) => {
       <TracksContainer model={model}>
         {!tracks.length ? (
           <Paper variant="outlined" className={classes.note}>
-            <Typography>No tracks active.</Typography>
-            <Button
-              variant="contained"
-              color="primary"
-              onClick={model.activateTrackSelector}
-              style={{ zIndex: 1000 }}
-              startIcon={<TrackSelectorIcon />}
-            >
-              Open track selector
-            </Button>
+            {!model.hideNoTracksActive ? (
+              <>
+                <Typography>No tracks active.</Typography>
+                <Button
+                  variant="contained"
+                  color="primary"
+                  onClick={model.activateTrackSelector}
+                  style={{ zIndex: 1000 }}
+                  startIcon={<TrackSelectorIcon />}
+                >
+                  Open track selector
+                </Button>
+              </>
+            ) : (
+              <div style={{ height: '48px' }}></div>
+            )}
           </Paper>
         ) : (
           tracks.map(track => (

package/src/LinearGenomeView/components/OverviewScaleBar.tsx

@@ -5,7 +5,7 @@ import { Instance } from 'mobx-state-tree'
 import clsx from 'clsx'
 
 import Base1DView, { Base1DViewModel } from '@jbrowse/core/util/Base1DViewModel'
-import { getSession } from '@jbrowse/core/util'
+import { getSession, getTickDisplayStr } from '@jbrowse/core/util'
 import { ContentBlock } from '@jbrowse/core/util/blockTypes'
 import { Assembly } from '@jbrowse/core/assemblyManager/assembly'
 
@@ -51,7 +51,6 @@ const useStyles = makeStyles(theme => {
     },
     scaleBarLabel: {
       height: HEADER_OVERVIEW_HEIGHT,
-      width: 1,
       position: 'absolute',
       display: 'flex',
       justifyContent: 'center',
@@ -301,7 +300,7 @@ const OverviewBox = observer(
     overview: Base1DViewModel
   }) => {
     const classes = useStyles()
-    const { cytobandOffset, showCytobands } = model
+    const { cytobandOffset, bpPerPx, showCytobands } = model
     const { start, end, reversed, refName, assemblyName } = block
     const { majorPitch } = chooseGridPitch(scale, 120, 15)
     const { assemblyManager } = getSession(model)
@@ -354,7 +353,7 @@ const OverviewBox = observer(
                     color: refNameColor,
                   }}
                 >
-                  {tickLabel.toLocaleString('en-US')}
+                  {getTickDisplayStr(tickLabel, bpPerPx)}
                 </Typography>
               ))
             : null}

package/src/LinearGenomeView/components/RefNameAutocomplete.tsx

@@ -66,17 +66,19 @@ const MyPopper = function (
 
 function RefNameAutocomplete({
   model,
-  showHelp = true,
   onSelect,
   assemblyName,
   style,
   fetchResults,
+  onChange,
   value,
+  showHelp = true,
   minWidth = 200,
   TextFieldProps = {},
 }: {
   model: LinearGenomeViewModel
-  onSelect: (region: BaseResult) => void
+  onSelect?: (region: BaseResult) => void
+  onChange?: (val: string) => void
   assemblyName?: string
   value?: string
   fetchResults: (query: string) => Promise<BaseResult[]>
@@ -171,7 +173,10 @@ function RefNameAutocomplete({
         value={inputBoxVal}
         loading={!loaded}
         inputValue={inputValue}
-        onInputChange={(event, newInputValue) => setInputValue(newInputValue)}
+        onInputChange={(event, newInputValue) => {
+          setInputValue(newInputValue)
+          onChange?.(newInputValue)
+        }}
         loadingText="loading results"
         open={open}
         onOpen={() => setOpen(true)}
@@ -190,9 +195,9 @@ function RefNameAutocomplete({
 
           if (typeof selectedOption === 'string') {
             // handles string inputs on keyPress enter
-            onSelect(new BaseResult({ label: selectedOption }))
+            onSelect?.(new BaseResult({ label: selectedOption }))
           } else {
-            onSelect(selectedOption.result)
+            onSelect?.(selectedOption.result)
           }
           setInputValue(inputBoxVal)
         }}

package/src/LinearGenomeView/components/ScaleBar.tsx

@@ -14,6 +14,7 @@ import {
   InterRegionPaddingBlock as InterRegionPaddingBlockComponent,
 } from '../../BaseLinearDisplay/components/Block'
 import { makeTicks } from '../util'
+import { getTickDisplayStr } from '@jbrowse/core/util'
 
 type LGV = LinearGenomeViewModel
 
@@ -95,18 +96,14 @@ const RenderedRefNameLabels = observer(({ model }: { model: LGV }) => {
 
 const RenderedScaleBarLabels = observer(({ model }: { model: LGV }) => {
   const classes = useStyles()
+  const { bpPerPx } = model
 
   return (
     <>
       {model.staticBlocks.map((block, index) => {
         if (block instanceof ContentBlock) {
-          const ticks = makeTicks(
-            block.start,
-            block.end,
-            model.bpPerPx,
-            true,
-            false,
-          )
+          const { start, end } = block
+          const ticks = makeTicks(start, end, bpPerPx, true, false)
 
           return (
             <ContentBlockComponent key={`${block.key}-${index}`} block={block}>
@@ -116,7 +113,7 @@ const RenderedScaleBarLabels = observer(({ model }: { model: LGV }) => {
                     (block.reversed
                       ? block.end - tick.base
                       : tick.base - block.start) / model.bpPerPx
-                  const baseNumber = (tick.base + 1).toLocaleString('en-US')
+                  const baseNumber = tick.base + 1
                   return (
                     <div
                       key={tick.base}
@@ -125,7 +122,7 @@ const RenderedScaleBarLabels = observer(({ model }: { model: LGV }) => {
                     >
                       {baseNumber ? (
                         <Typography className={classes.majorTickLabel}>
-                          {baseNumber}
+                          {getTickDisplayStr(baseNumber, bpPerPx)}
                         </Typography>
                       ) : null}
                     </div>

package/src/LinearGenomeView/components/SearchBox.tsx

@@ -58,19 +58,35 @@ function SearchBox({
     )
   }
 
+  // gets a string as input, or use stored option results from previous query,
+  // then re-query and
+  // 1) if it has multiple results: pop a dialog
+  // 2) if it's a single result navigate to it
+  // 3) else assume it's a locstring and navigate to it
   async function handleSelectedRegion(option: BaseResult) {
     let trackId = option.getTrackId()
     let location = option.getLocation()
     const label = option.getLabel()
+    const [ref, rest] = location.split(':')
+    const allRefs = assembly?.allRefNames || []
     try {
-      if (assembly?.allRefNames?.includes(location)) {
-        model.navToLocString(location)
+      // instead of querying text-index, first:
+      // - check if input matches a refName directly
+      // - or looks like locString
+      // then just navigate as if it were a locString
+      if (
+        allRefs.includes(location) ||
+        (allRefs.includes(ref) &&
+          rest !== undefined &&
+          !Number.isNaN(parseInt(rest, 10)))
+      ) {
+        model.navToLocString(location, assemblyName)
       } else {
         const results = await fetchResults(label, 'exact')
-        if (results && results.length > 1) {
+        if (results.length > 1) {
           model.setSearchResults(results, label.toLowerCase())
           return
-        } else if (results?.length === 1) {
+        } else if (results.length === 1) {
           location = results[0].getLocation()
           trackId = results[0].getTrackId()
         }