@jbrowse/plugin-linear-genome-view 1.4.1 → 1.5.2

package/src/LinearGenomeView/components/ImportForm.tsx

@@ -1,20 +1,23 @@
-import React, { useState } from 'react'
+import React, { useState, lazy } from 'react'
 import { observer } from 'mobx-react'
 import { getSession } from '@jbrowse/core/util'
-// import BaseResult from '@jbrowse/core/TextSearch/BaseResults'
-import AssemblySelector from '@jbrowse/core/ui/AssemblySelector'
 import {
   Button,
   CircularProgress,
   Container,
   Grid,
-  Typography,
   makeStyles,
 } from '@material-ui/core'
-// other
+import { SearchType } from '@jbrowse/core/data_adapters/BaseAdapter'
+import BaseResult from '@jbrowse/core/TextSearch/BaseResults'
+import AssemblySelector from '@jbrowse/core/ui/AssemblySelector'
+import ErrorMessage from '@jbrowse/core/ui/ErrorMessage'
+import CloseIcon from '@material-ui/icons/Close'
+
+// locals
 import RefNameAutocomplete from './RefNameAutocomplete'
-import SearchResultsDialog from './SearchResultsDialog'
 import { LinearGenomeViewModel } from '..'
+const SearchResultsDialog = lazy(() => import('./SearchResultsDialog'))
 
 const useStyles = makeStyles(theme => ({
   importFormContainer: {
@@ -27,14 +30,6 @@ const useStyles = makeStyles(theme => ({
 
 type LGV = LinearGenomeViewModel
 
-const ErrorDisplay = observer(({ error }: { error?: Error | string }) => {
-  return (
-    <Typography variant="h6" color="error">
-      {`${error}`}
-    </Typography>
-  )
-})
-
 const ImportForm = observer(({ model }: { model: LGV }) => {
   const classes = useStyles()
   const session = getSession(model)
@@ -46,7 +41,6 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
   } = model
   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)
 
   const assembly = assemblyManager.get(selectedAsm)
@@ -55,179 +49,166 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
     : 'No configured assemblies'
   const regions = assembly?.regions || []
   const err = assemblyError || error
-  const [mySelectedRegion, setSelectedRegion] = useState<string>()
-  const [optionTrackId, setOptionTrackId] = useState<string>()
-  const [optionLocation, setOptionLocation] = useState<string>()
-  const selectedRegion = mySelectedRegion || regions[0]?.refName
 
-  async function fetchResults(queryString: string) {
+  const [myOption, setOption] = useState<BaseResult>()
+
+  // 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()
+
+  async function fetchResults(query: string, searchType?: SearchType) {
     if (!textSearchManager) {
       console.warn('No text search manager')
     }
-    const results = await textSearchManager?.search(
+
+    const textSearchResults = await textSearchManager?.search(
       {
-        queryString: queryString.toLowerCase(),
-        searchType: 'exact',
+        queryString: query,
+        searchType,
       },
       searchScope,
       rankSearchResults,
     )
 
-    return results?.filter(
-      (elem, index, self) =>
-        index === self.findIndex(t => t.getId() === elem.getId()),
-    )
+    const refNameResults = assembly?.allRefNames
+      ?.filter(refName => refName.startsWith(query))
+      .map(r => new BaseResult({ label: r }))
+      .slice(0, 10)
+
+    return [...(refNameResults || []), ...(textSearchResults || [])]
   }
-  /**
-   * We first check to see if the identifier/label is an appropriate region,
-   * if it is then we set that as our displayed region
-   * if the label was not a valid region, then
-   *  1) we get the trackId and the location/locStr of the option we chose
-   *  2) we then use the label to try and fetch for exact matches through our
-   * textSearchManager
-   *  3) if we get any hits by requerying the textSearchManager, then we either
-   *  navigate to single hit's location or pop open the the dialog with all the results
-   *  4) if there were no hits from requerying, then we use (1) the chosen options'
-   *  trackId and locStr to navigate and show that track
-   *  5) error handling
-   * @param input - selectedRegion/result label
-   */
+
+  // 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) {
-    let trackId = optionTrackId
-    let location = optionLocation
-    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 fetchResults(input)
-      if (results && results.length > 1) {
-        model.setSearchResults(results, input.toLowerCase())
+    if (!option) {
+      return
+    }
+    let trackId = option.getTrackId()
+    let location = input || option.getLocation() || ''
+    try {
+      if (assembly?.allRefNames?.includes(location)) {
+        model.navToLocString(location, selectedAsm)
       } else {
-        if (results?.length === 1) {
+        const results = await fetchResults(input, 'exact')
+        if (results && results.length > 1) {
+          model.setSearchResults(results, input.toLowerCase())
+          return
+        } else if (results?.length === 1) {
           location = results[0].getLocation()
           trackId = results[0].getTrackId()
         }
-        try {
-          if (location) {
-            model.navToLocString(location, selectedAsm)
-          }
-        } catch (e) {
-          if (`${e}` === `Error: Unknown reference sequence "${input}"`) {
-            model.setSearchResults(results, input.toLocaleLowerCase())
-          } else {
-            console.warn(e)
-            session.notify(`${e}`, 'warning')
-          }
-        }
-        try {
-          if (trackId) {
-            model.showTrack(trackId)
-          }
-        } catch (e) {
-          console.warn(
-            `'${e}' occurred while attempting to show track: ${trackId}`,
-          )
+
+        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}
+      {err ? <ErrorMessage 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.getLabel())
-                    setOptionTrackId(option.getTrackId() || '')
-                    setOptionLocation(option.getLocation())
-                  }}
-                  TextFieldProps={{
-                    margin: 'normal',
-                    variant: 'outlined',
-                    helperText: 'Enter a sequence or location',
-                    onBlur: event => {
-                      if (event.target.value !== '') {
-                        setSelectedRegion(event.target.value)
-                      } else {
-                        setSelectedRegion(regions[0].refName)
-                      }
-                    },
-                    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 ? (
+                  <CloseIcon style={{ color: 'red' }} />
+                ) : selectedRegion ? (
+                  <RefNameAutocomplete
+                    fetchResults={fetchResults}
+                    model={model}
+                    assemblyName={assemblyError ? undefined : selectedAsm}
+                    value={selectedRegion}
+                    // note: minWidth 270 accomodates full width of helperText
+                    minWidth={270}
+                    onSelect={option => setOption(option)}
+                    TextFieldProps={{
+                      margin: 'normal',
+                      variant: 'outlined',
+                      helperText:
+                        'Enter sequence name, feature name, or location',
+                    }}
+                  />
+                ) : (
+                  <CircularProgress
+                    role="progressbar"
+                    size={20}
+                    disableShrink
+                  />
+                )
+              ) : null}
+            </Grid>
+            <Grid item></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
           model={model}
           optAssemblyName={selectedAsm}
-          handleClose={() => {
-            model.setSearchResults(undefined, undefined)
-          }}
+          handleClose={() => model.setSearchResults(undefined, undefined)}
         />
       ) : null}
     </div>

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()