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

package/src/LinearGenomeView/components/ImportForm.tsx

@@ -1,7 +1,9 @@
 import React, { useState } from 'react'
 import { observer } from 'mobx-react'
 import { getSession } from '@jbrowse/core/util'
-// import BaseResult from '@jbrowse/core/TextSearch/BaseResults'
+import BaseResult, {
+  RefSequenceResult,
+} from '@jbrowse/core/TextSearch/BaseResults'
 import AssemblySelector from '@jbrowse/core/ui/AssemblySelector'
 import {
   Button,
@@ -15,6 +17,7 @@ import {
 import RefNameAutocomplete from './RefNameAutocomplete'
 import SearchResultsDialog from './SearchResultsDialog'
 import { LinearGenomeViewModel } from '..'
+import { dedupe } from './util'
 
 const useStyles = makeStyles(theme => ({
   importFormContainer: {
@@ -55,10 +58,19 @@ 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
+
+  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) {
@@ -73,153 +85,131 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
       rankSearchResults,
     )
 
-    return results?.filter(
-      (elem, index, self) =>
-        index === self.findIndex(t => t.getId() === elem.getId()),
-    )
+    return dedupe(results)
   }
+
   /**
-   * 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?.refNames?.includes(location)) {
+        model.navToLocString(location, selectedAsm)
       } else {
-        if (results?.length === 1) {
+        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()
         }
-        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}
       <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 ? (
+                  <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/RefNameAutocomplete.tsx

@@ -1,9 +1,3 @@
-/**
- * Based on:
- *  https://material-ui.com/components/autocomplete/#Virtualize.tsx
- * Asynchronous Requests for autocomplete:
- *  https://material-ui.com/components/autocomplete/
- */
 import React, { useMemo, useEffect, useState } from 'react'
 import { observer } from 'mobx-react'
 
@@ -29,10 +23,6 @@ import Autocomplete from '@material-ui/lab/Autocomplete'
 // locals
 import { LinearGenomeViewModel } from '..'
 
-/**
- *  Option interface used to format results to display in dropdown
- *  of the materila ui interface
- */
 export interface Option {
   group?: string
   result: BaseResult
@@ -64,8 +54,8 @@ async function fetchResults(
 }
 
 // the logic of this method is to only apply a filter to RefSequenceResults
-// because they do not have a matchedObject. the trix search results
-// already filter so don't need re-filtering
+// because they do not have a matchedObject. the trix search results already
+// filter so don't need re-filtering
 function filterOptions(options: Option[], searchQuery: string) {
   return options.filter(option => {
     const { result } = option
@@ -115,6 +105,7 @@ function RefNameAutocomplete({
   const [open, setOpen] = useState(false)
   const [loaded, setLoaded] = useState(true)
   const [currentSearch, setCurrentSearch] = useState('')
+  const [inputValue, setInputValue] = useState('')
   const [searchOptions, setSearchOptions] = useState([] as Option[])
   const debouncedSearch = useDebounce(currentSearch, 300)
   const { coarseVisibleLocStrings, hasDisplayedRegions } = model
@@ -146,10 +137,12 @@ function RefNameAutocomplete({
 
         setLoaded(false)
         const results = await fetchResults(model, debouncedSearch, assemblyName)
-        if (results && results.length >= 0 && active) {
-          setSearchOptions(results.map(result => ({ result })))
+        if (active) {
+          if (results && results.length >= 0) {
+            setSearchOptions(results.map(result => ({ result })))
+          }
+          setLoaded(true)
         }
-        setLoaded(true)
       } catch (e) {
         console.error(e)
         if (active) {
@@ -169,9 +162,7 @@ function RefNameAutocomplete({
   const width = Math.min(Math.max(measureText(inputBoxVal, 16) + 25, 200), 550)
 
   // notes on implementation:
-  // selectOnFocus helps highlight the field when clicked
-  // blurOnSelect helps it so that when the user-re-clicks on the textfield,
-  // that selectOnFocus re-activates
+  // The selectOnFocus setting helps highlight the field when clicked
   return (
     <Autocomplete
       id={`refNameAutocomplete-${model.id}`}
@@ -183,10 +174,11 @@ function RefNameAutocomplete({
       freeSolo
       includeInputInList
       selectOnFocus
-      blurOnSelect
       style={{ ...style, width }}
       value={inputBoxVal}
       loading={!loaded}
+      inputValue={inputValue}
+      onInputChange={(event, newInputValue) => setInputValue(newInputValue)}
       loadingText="loading results"
       open={open}
       onOpen={() => setOpen(true)}
@@ -202,16 +194,14 @@ function RefNameAutocomplete({
         if (!selectedOption || !assemblyName) {
           return
         }
+
         if (typeof selectedOption === 'string') {
           // handles string inputs on keyPress enter
-          const newResult = new BaseResult({
-            label: selectedOption,
-          })
-          onSelect(newResult)
+          onSelect(new BaseResult({ label: selectedOption }))
         } else {
-          const { result } = selectedOption
-          onSelect(result)
+          onSelect(selectedOption.result)
         }
+        setInputValue(inputBoxVal)
       }}
       options={searchOptions.length === 0 ? options : searchOptions}
       getOptionDisabled={option => option?.group === 'limitOption'}
@@ -238,6 +228,11 @@ function RefNameAutocomplete({
         const { helperText, InputProps = {} } = TextFieldProps
         return (
           <TextField
+            onBlur={() => {
+              // this is used to restore a refName or the non-user-typed input
+              // to the box on blurring
+              setInputValue(inputBoxVal)
+            }}
             {...params}
             {...TextFieldProps}
             helperText={helperText}

package/src/LinearGenomeView/components/SequenceDialog.tsx

@@ -101,7 +101,7 @@ function SequenceDialog({
 }) {
   const classes = useStyles()
   const session = getSession(model)
-  const [error, setError] = useState<Error>()
+  const [error, setError] = useState<unknown>()
   const [sequence, setSequence] = useState<string>()
   const loading = Boolean(sequence === undefined)
   const { leftOffset, rightOffset } = model

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

@@ -563,182 +563,6 @@ exports[`<LinearGenomeView /> renders one track, one region 1`] = `
 </div>
 `;
 
-exports[`<LinearGenomeView /> renders setup wizard 1`] = `
-<div>
-  <div
-    class="MuiContainer-root makeStyles-importFormContainer MuiContainer-maxWidthLg"
-  >
-    <div
-      class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-1 MuiGrid-align-items-xs-center MuiGrid-justify-content-xs-center"
-    >
-      <div
-        class="MuiGrid-root MuiGrid-item"
-      >
-        <div
-          class="MuiFormControl-root MuiTextField-root makeStyles-importFormEntry MuiFormControl-marginNormal"
-        >
-          <label
-            class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-filled"
-            data-shrink="true"
-          >
-            Assembly
-          </label>
-          <div
-            class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-formControl"
-          >
-            <div
-              aria-haspopup="listbox"
-              class="MuiSelect-root MuiSelect-select MuiSelect-selectMenu MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input"
-              role="button"
-              tabindex="0"
-            >
-              volMyt1
-            </div>
-            <input
-              aria-hidden="true"
-              class="MuiSelect-nativeInput"
-              data-testid="assembly-selector"
-              tabindex="-1"
-              value="volMyt1"
-            />
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root MuiSelect-icon MuiSelect-iconOutlined"
-              focusable="false"
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M7 10l5 5 5-5z"
-              />
-            </svg>
-            <fieldset
-              aria-hidden="true"
-              class="PrivateNotchedOutline-root MuiOutlinedInput-notchedOutline"
-            >
-              <legend
-                class="PrivateNotchedOutline-legendLabelled PrivateNotchedOutline-legendNotched"
-              >
-                <span>
-                  Assembly
-                </span>
-              </legend>
-            </fieldset>
-          </div>
-          <p
-            class="MuiFormHelperText-root MuiFormHelperText-contained MuiFormHelperText-filled"
-          >
-            Select assembly to view
-          </p>
-        </div>
-      </div>
-      <div
-        class="MuiGrid-root MuiGrid-item"
-      >
-        <div
-          aria-expanded="false"
-          class="MuiAutocomplete-root"
-          data-testid="autocomplete"
-          role="combobox"
-          style="width: 200px;"
-        >
-          <div
-            class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
-          >
-            <div
-              class="MuiInputBase-root MuiOutlinedInput-root MuiAutocomplete-inputRoot MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiOutlinedInput-adornedEnd"
-            >
-              <input
-                aria-autocomplete="list"
-                aria-describedby="refNameAutocomplete-lgv-helper-text"
-                aria-invalid="false"
-                autocapitalize="none"
-                autocomplete="off"
-                class="MuiInputBase-input MuiOutlinedInput-input MuiAutocomplete-input MuiAutocomplete-inputFocused MuiInputBase-inputAdornedEnd MuiOutlinedInput-inputAdornedEnd"
-                id="refNameAutocomplete-lgv"
-                placeholder="Search for location"
-                spellcheck="false"
-                type="text"
-                value="ctgA"
-              />
-              <div
-                class="MuiInputAdornment-root MuiInputAdornment-positionEnd"
-                style="margin-right: 7px;"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root"
-                  focusable="false"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
-                  />
-                </svg>
-              </div>
-              <div
-                class="MuiAutocomplete-endAdornment"
-              />
-              <fieldset
-                aria-hidden="true"
-                class="PrivateNotchedOutline-root MuiOutlinedInput-notchedOutline"
-                style="padding-left: 8px;"
-              >
-                <legend
-                  class="PrivateNotchedOutline-legend"
-                  style="width: 0.01px;"
-                >
-                  <span>
-                    ​
-                  </span>
-                </legend>
-              </fieldset>
-            </div>
-            <p
-              class="MuiFormHelperText-root MuiFormHelperText-contained MuiFormHelperText-filled"
-              id="refNameAutocomplete-lgv-helper-text"
-            >
-              Enter a sequence or location
-            </p>
-          </div>
-        </div>
-      </div>
-      <div
-        class="MuiGrid-root MuiGrid-item"
-      >
-        <button
-          class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-button MuiButton-containedPrimary"
-          tabindex="0"
-          type="button"
-        >
-          <span
-            class="MuiButton-label"
-          >
-            Open
-          </span>
-          <span
-            class="MuiTouchRipple-root"
-          />
-        </button>
-        <button
-          class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-button MuiButton-containedSecondary"
-          tabindex="0"
-          type="button"
-        >
-          <span
-            class="MuiButton-label"
-          >
-            Show all regions in assembly
-          </span>
-          <span
-            class="MuiTouchRipple-root"
-          />
-        </button>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
 exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
 <div
   style="position: relative;"

package/src/LinearGenomeView/components/util.ts

@@ -0,0 +1,8 @@
+import BaseResult from '@jbrowse/core/TextSearch/BaseResults'
+
+export function dedupe(results?: BaseResult[]) {
+  return results?.filter(
+    (elem, index, self) =>
+      index === self.findIndex(t => t.getId() === elem.getId()),
+  )
+}