@jbrowse/plugin-linear-genome-view 1.3.4 → 1.5.0

package/src/LinearGenomeView/components/Header.tsx

@@ -1,23 +1,27 @@
+import React from 'react'
+import { observer } from 'mobx-react'
 import { getSession } from '@jbrowse/core/util'
+import {
+  Button,
+  FormGroup,
+  Typography,
+  makeStyles,
+  useTheme,
+  alpha,
+} from '@material-ui/core'
 import BaseResult from '@jbrowse/core/TextSearch/BaseResults'
-import Button from '@material-ui/core/Button'
-import { makeStyles, useTheme } from '@material-ui/core/styles'
-import { alpha } from '@material-ui/core/styles'
-import FormGroup from '@material-ui/core/FormGroup'
-import Typography from '@material-ui/core/Typography'
-import { observer } from 'mobx-react'
-import { Instance, getEnv } from 'mobx-state-tree'
-import React from 'react'
 
+// icons
 import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons'
 import ArrowForwardIcon from '@material-ui/icons/ArrowForward'
 import ArrowBackIcon from '@material-ui/icons/ArrowBack'
-import { LinearGenomeViewStateModel, HEADER_BAR_HEIGHT } from '..'
+
+// locals
+import { LinearGenomeViewModel, HEADER_BAR_HEIGHT } from '..'
 import RefNameAutocomplete from './RefNameAutocomplete'
 import OverviewScaleBar from './OverviewScaleBar'
 import ZoomControls from './ZoomControls'
-
-type LGV = Instance<LinearGenomeViewStateModel>
+import { dedupe } from './util'
 
 const WIDGET_HEIGHT = 32
 const SPACING = 7
@@ -58,7 +62,7 @@ const useStyles = makeStyles(theme => ({
   },
 }))
 
-const Controls = observer(({ model }: { model: LGV }) => {
+const Controls = observer(({ model }: { model: LinearGenomeViewModel }) => {
   const classes = useStyles()
   return (
     <Button
@@ -73,7 +77,7 @@ const Controls = observer(({ model }: { model: LGV }) => {
   )
 })
 
-function PanControls({ model }: { model: LGV }) {
+function PanControls({ model }: { model: LinearGenomeViewModel }) {
   const classes = useStyles()
   return (
     <>
@@ -95,7 +99,7 @@ function PanControls({ model }: { model: LGV }) {
   )
 }
 
-const RegionWidth = observer(({ model }: { model: LGV }) => {
+const RegionWidth = observer(({ model }: { model: LinearGenomeViewModel }) => {
   const classes = useStyles()
   const { coarseTotalBp } = model
   return (
@@ -105,104 +109,97 @@ const RegionWidth = observer(({ model }: { model: LGV }) => {
   )
 })
 
-const LinearGenomeViewHeader = observer(({ model }: { model: LGV }) => {
-  const classes = useStyles()
-  const theme = useTheme()
-  const session = getSession(model)
-  const { assemblyManager } = session
-  const { pluginManager } = getEnv(session)
-  const { textSearchManager } = pluginManager.rootModel
-  const {
-    coarseDynamicBlocks: contentBlocks,
-    displayedRegions,
-    rankSearchResults,
-  } = model
-  const { assemblyName, refName } = contentBlocks[0] || { refName: '' }
-  const assembly = assemblyName && assemblyManager.get(assemblyName)
-  const regions = (assembly && assembly.regions) || []
-  const searchScope = model.searchScope(assemblyName)
-  async function setDisplayedRegion(result: BaseResult) {
-    if (result) {
-      const newRegionValue = result.getLocation()
-      // need to fix finding region
-      const newRegion = regions.find(
-        region => newRegionValue === region.refName,
+const LinearGenomeViewHeader = observer(
+  ({ model }: { model: LinearGenomeViewModel }) => {
+    const classes = useStyles()
+    const theme = useTheme()
+    const session = getSession(model)
+
+    const { textSearchManager, assemblyManager } = session
+    const { assemblyNames, rankSearchResults } = model
+    const assemblyName = assemblyNames[0]
+    const assembly = assemblyManager.get(assemblyName)
+    const searchScope = model.searchScope(assemblyName)
+
+    async function fetchResults(queryString: string) {
+      if (!textSearchManager) {
+        console.warn('No text search manager')
+      }
+      const results = await textSearchManager?.search(
+        {
+          queryString: queryString.toLowerCase(),
+          searchType: 'exact',
+        },
+        searchScope,
+        rankSearchResults,
       )
-      if (newRegion) {
-        model.setDisplayedRegions([newRegion])
-        // we use showAllRegions after setDisplayedRegions to make the entire
-        // region visible, xref #1703
-        model.showAllRegions()
-      } else {
-        const results =
-          (await textSearchManager?.search(
-            {
-              queryString: newRegionValue.toLocaleLowerCase(),
-              searchType: 'exact',
-            },
-            searchScope,
-            rankSearchResults,
-          )) || []
-        // distinguishes between locstrings and search strings
-        if (results.length > 0) {
-          model.setSearchResults(results, newRegionValue.toLocaleLowerCase())
+      return dedupe(results)
+    }
+
+    async function handleSelectedRegion(option: BaseResult) {
+      let trackId = option.getTrackId()
+      let location = option.getLocation()
+      const label = option.getLabel()
+      try {
+        if (assembly?.refNames?.includes(location)) {
+          model.navToLocString(location)
         } else {
-          try {
-            newRegionValue !== '' && model.navToLocString(newRegionValue)
-          } catch (e) {
-            if (
-              `${e}` === `Error: Unknown reference sequence "${newRegionValue}"`
-            ) {
-              model.setSearchResults(
-                results,
-                newRegionValue.toLocaleLowerCase(),
-              )
-            } else {
-              console.warn(e)
-              session.notify(`${e}`, 'warning')
-            }
+          const results = await fetchResults(label)
+          if (results && results.length > 1) {
+            model.setSearchResults(results, label.toLowerCase())
+            return
+          } else if (results?.length === 1) {
+            location = results[0].getLocation()
+            trackId = results[0].getTrackId()
+          }
+
+          model.navToLocString(location, assemblyName)
+          if (trackId) {
+            model.showTrack(trackId)
           }
         }
+      } catch (e) {
+        console.error(e)
+        session.notify(`${e}`, 'warning')
       }
     }
-  }
-
-  const controls = (
-    <div className={classes.headerBar}>
-      <Controls model={model} />
-      <div className={classes.spacer} />
-      <FormGroup row className={classes.headerForm}>
-        <PanControls model={model} />
-        <RefNameAutocomplete
-          onSelect={setDisplayedRegion}
-          assemblyName={assemblyName}
-          value={displayedRegions.length > 1 ? '' : refName}
-          model={model}
-          TextFieldProps={{
-            variant: 'outlined',
-            className: classes.headerRefName,
-            style: { margin: SPACING, minWidth: '175px' },
-            InputProps: {
-              style: {
-                padding: 0,
-                height: WIDGET_HEIGHT,
-                background: alpha(theme.palette.background.paper, 0.8),
+
+    const controls = (
+      <div className={classes.headerBar}>
+        <Controls model={model} />
+        <div className={classes.spacer} />
+        <FormGroup row className={classes.headerForm}>
+          <PanControls model={model} />
+          <RefNameAutocomplete
+            onSelect={handleSelectedRegion}
+            assemblyName={assemblyName}
+            model={model}
+            TextFieldProps={{
+              variant: 'outlined',
+              className: classes.headerRefName,
+              style: { margin: SPACING, minWidth: '175px' },
+              InputProps: {
+                style: {
+                  padding: 0,
+                  height: WIDGET_HEIGHT,
+                  background: alpha(theme.palette.background.paper, 0.8),
+                },
               },
-            },
-          }}
-        />
-      </FormGroup>
-      <RegionWidth model={model} />
-      <ZoomControls model={model} />
-      <div className={classes.spacer} />
-    </div>
-  )
+            }}
+          />
+        </FormGroup>
+        <RegionWidth model={model} />
+        <ZoomControls model={model} />
+        <div className={classes.spacer} />
+      </div>
+    )
 
-  if (model.hideHeaderOverview) {
-    return controls
-  }
+    if (model.hideHeaderOverview) {
+      return controls
+    }
 
-  return <OverviewScaleBar model={model}>{controls}</OverviewScaleBar>
-})
+    return <OverviewScaleBar model={model}>{controls}</OverviewScaleBar>
+  },
+)
 
 export default LinearGenomeViewHeader

package/src/LinearGenomeView/components/ImportForm.tsx

@@ -1,7 +1,9 @@
 import React, { useState } from 'react'
 import { observer } from 'mobx-react'
-import { getEnv } from 'mobx-state-tree'
 import { getSession } from '@jbrowse/core/util'
+import BaseResult, {
+  RefSequenceResult,
+} from '@jbrowse/core/TextSearch/BaseResults'
 import AssemblySelector from '@jbrowse/core/ui/AssemblySelector'
 import {
   Button,
@@ -15,14 +17,12 @@ import {
 import RefNameAutocomplete from './RefNameAutocomplete'
 import SearchResultsDialog from './SearchResultsDialog'
 import { LinearGenomeViewModel } from '..'
+import { dedupe } from './util'
 
 const useStyles = makeStyles(theme => ({
   importFormContainer: {
     padding: theme.spacing(2),
   },
-  importFormEntry: {
-    minWidth: 180,
-  },
   button: {
     margin: theme.spacing(2),
   },
@@ -41,16 +41,14 @@ const ErrorDisplay = observer(({ error }: { error?: Error | string }) => {
 const ImportForm = observer(({ model }: { model: LGV }) => {
   const classes = useStyles()
   const session = getSession(model)
-  const { assemblyNames, assemblyManager } = session
-  const { pluginManager } = getEnv(session)
-  const { textSearchManager } = pluginManager.rootModel
+  const { assemblyNames, assemblyManager, textSearchManager } = session
   const {
     rankSearchResults,
     isSearchDialogDisplayed,
     error: modelError,
   } = model
-  const [selectedAsm, setSelectedAsm] = useState<string>(assemblyNames[0])
-  const [error, setError] = useState<Error | string | undefined>(modelError)
+  const [selectedAsm, setSelectedAsm] = useState(assemblyNames[0])
+  const [error, setError] = useState<typeof modelError | undefined>(modelError)
   const message = !assemblyNames.length ? 'No configured assemblies' : ''
   const searchScope = model.searchScope(selectedAsm)
 
@@ -60,123 +58,158 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
     : 'No configured assemblies'
   const regions = assembly?.regions || []
   const err = assemblyError || error
-  const [mySelectedRegion, setSelectedRegion] = useState<string>()
-  const selectedRegion = mySelectedRegion || regions[0]?.refName
 
+  const [myOption, setOption] = useState<BaseResult | undefined>()
+
+  // use this instead of useState initializer because the useState initializer
+  // won't update in response to an observable
+  const option =
+    myOption ||
+    new RefSequenceResult({
+      refName: regions[0]?.refName,
+      label: regions[0]?.refName,
+    })
+
+  const selectedRegion = option?.getLocation()
+
+  async function fetchResults(queryString: string) {
+    if (!textSearchManager) {
+      console.warn('No text search manager')
+    }
+    const results = await textSearchManager?.search(
+      {
+        queryString: queryString.toLowerCase(),
+        searchType: 'exact',
+      },
+      searchScope,
+      rankSearchResults,
+    )
+
+    return dedupe(results)
+  }
+
+  /**
+   * 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(input: string) {
-    const newRegion = regions.find(r => selectedRegion === r.refName)
-    if (newRegion) {
-      model.setDisplayedRegions([newRegion])
-      // we use showAllRegions after setDisplayedRegions to make the entire
-      // region visible, xref #1703
-      model.showAllRegions()
-    } else {
-      const results = await textSearchManager?.search(
-        {
-          queryString: input.toLocaleLowerCase(),
-          searchType: 'exact',
-        },
-        searchScope,
-        rankSearchResults,
-      )
-      if (results?.length > 0) {
-        model.setSearchResults(results, input.toLocaleLowerCase())
+    if (!option) {
+      return
+    }
+    let trackId = option.getTrackId()
+    let location = input || option.getLocation() || ''
+    try {
+      if (assembly?.refNames?.includes(location)) {
+        model.navToLocString(location, selectedAsm)
       } else {
-        try {
-          input && model.navToLocString(input, selectedAsm)
-        } catch (e) {
-          if (`${e}` === `Error: Unknown reference sequence "${input}"`) {
-            model.setSearchResults(results, input.toLocaleLowerCase())
-          } else {
-            console.warn(e)
-            session.notify(`${e}`, 'warning')
-          }
+        const results = await fetchResults(input)
+        if (results && results.length > 1) {
+          model.setSearchResults(results, input.toLowerCase())
+          return
+        } else if (results?.length === 1) {
+          location = results[0].getLocation()
+          trackId = results[0].getTrackId()
+        }
+
+        model.navToLocString(location, selectedAsm)
+        if (trackId) {
+          model.showTrack(trackId)
         }
       }
+    } catch (e) {
+      console.error(e)
+      session.notify(`${e}`, 'warning')
     }
   }
 
+  // implementation notes:
+  // having this wrapped in a form allows intuitive use of enter key to submit
   return (
     <div>
       {err ? <ErrorDisplay error={err} /> : null}
-
       <Container className={classes.importFormContainer}>
-        <Grid container spacing={1} justifyContent="center" alignItems="center">
-          <Grid item>
-            <AssemblySelector
-              onChange={val => {
-                setError(undefined)
-                setSelectedAsm(val)
-              }}
-              session={session}
-              selected={selectedAsm}
-            />
-          </Grid>
-          <Grid item>
-            {selectedAsm ? (
-              err ? (
-                <Typography color="error">X</Typography>
-              ) : selectedRegion && model.volatileWidth ? (
-                <RefNameAutocomplete
-                  model={model}
-                  assemblyName={message ? undefined : selectedAsm}
-                  value={selectedRegion}
-                  onSelect={option => setSelectedRegion(option.getLocation())}
-                  TextFieldProps={{
-                    margin: 'normal',
-                    variant: 'outlined',
-                    helperText: 'Enter a sequence or location',
-                    className: classes.importFormEntry,
-                    onBlur: event => {
-                      if (event.target.value !== '') {
-                        setSelectedRegion(event.target.value)
-                      }
-                    },
-                    onKeyPress: event => {
-                      const elt = event.target as HTMLInputElement
-                      // maybe check regular expression here to see if it's a
-                      // locstring try defaulting exact matches to first exact
-                      // match
-                      if (event.key === 'Enter') {
-                        handleSelectedRegion(elt.value)
-                      }
-                    },
-                  }}
-                />
-              ) : (
-                <CircularProgress role="progressbar" size={20} disableShrink />
-              )
-            ) : null}
-          </Grid>
-          <Grid item>
-            <Button
-              disabled={!selectedRegion}
-              className={classes.button}
-              onClick={() => {
-                model.setError(undefined)
-                if (selectedRegion) {
-                  handleSelectedRegion(selectedRegion)
-                }
-              }}
-              variant="contained"
-              color="primary"
-            >
-              Open
-            </Button>
-            <Button
-              disabled={!selectedRegion}
-              className={classes.button}
-              onClick={() => {
-                model.setError(undefined)
-                model.showAllRegionsInAssembly(selectedAsm)
-              }}
-              variant="contained"
-              color="secondary"
-            >
-              Show all regions in assembly
-            </Button>
+        <form
+          onSubmit={event => {
+            event.preventDefault()
+          }}
+        >
+          <Grid
+            container
+            spacing={1}
+            justifyContent="center"
+            alignItems="center"
+          >
+            <Grid item>
+              <AssemblySelector
+                onChange={val => {
+                  setError(undefined)
+                  setSelectedAsm(val)
+                }}
+                session={session}
+                selected={selectedAsm}
+              />
+            </Grid>
+            <Grid item>
+              {selectedAsm ? (
+                err ? (
+                  <Typography color="error">X</Typography>
+                ) : selectedRegion && model.volatileWidth ? (
+                  <RefNameAutocomplete
+                    model={model}
+                    assemblyName={message ? undefined : selectedAsm}
+                    value={selectedRegion}
+                    onSelect={option => {
+                      setOption(option)
+                    }}
+                    TextFieldProps={{
+                      margin: 'normal',
+                      variant: 'outlined',
+                      helperText: 'Enter a sequence or location',
+                    }}
+                  />
+                ) : (
+                  <CircularProgress
+                    role="progressbar"
+                    size={20}
+                    disableShrink
+                  />
+                )
+              ) : null}
+            </Grid>
+            <Grid item>
+              <Button
+                type="submit"
+                disabled={!selectedRegion}
+                className={classes.button}
+                onClick={() => {
+                  model.setError(undefined)
+                  if (selectedRegion) {
+                    handleSelectedRegion(selectedRegion)
+                  }
+                }}
+                variant="contained"
+                color="primary"
+              >
+                Open
+              </Button>
+              <Button
+                disabled={!selectedRegion}
+                className={classes.button}
+                onClick={() => {
+                  model.setError(undefined)
+                  model.showAllRegionsInAssembly(selectedAsm)
+                }}
+                variant="contained"
+                color="secondary"
+              >
+                Show all regions in assembly
+              </Button>
+            </Grid>
           </Grid>
-        </Grid>
+        </form>
       </Container>
       {isSearchDialogDisplayed ? (
         <SearchResultsDialog

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { render } from '@testing-library/react'
+import { fireEvent, render, waitFor } from '@testing-library/react'
 import { createTestSession } from '@jbrowse/web/src/rootModel'
 import sizeMe from 'react-sizeme'
 import 'requestidlecallback-polyfill'
@@ -34,12 +34,12 @@ describe('<LinearGenomeView />', () => {
     session.addView('LinearGenomeView', { id: 'lgv' })
     const model = session.views[0]
     model.setWidth(800)
-    const { container, findByText } = render(<LinearGenomeView model={model} />)
-    const openButton = await findByText('Open')
-    expect(container.firstChild).toMatchSnapshot()
+    const { findByText } = render(<LinearGenomeView model={model} />)
     expect(model.displayedRegions.length).toEqual(0)
-    openButton.click()
-    expect(model.displayedRegions.length).toEqual(1)
+    fireEvent.click(await findByText('Open'))
+    await waitFor(() => {
+      expect(model.displayedRegions.length).toEqual(1)
+    })
   })
   it('renders one track, one region', async () => {
     const session = createTestSession()

package/src/LinearGenomeView/components/OverviewScaleBar.tsx

@@ -263,7 +263,10 @@ const ScaleBar = observer(
             >
               {/* name of sequence */}
               <Typography
-                style={{ color: refNameColor }}
+                style={{
+                  color: refNameColor,
+                  zIndex: 100,
+                }}
                 className={classes.scaleBarRefName}
               >
                 {seq.refName}