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

package/src/LinearGenomeView/components/RefNameAutocomplete.tsx

@@ -1,66 +1,90 @@
-/**
- * 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'
-import { getEnv } from 'mobx-state-tree'
 
 // jbrowse core
-import { Region } from '@jbrowse/core/util/types'
-import { getSession, useDebounce } from '@jbrowse/core/util' // useDebounce
+import { getSession, useDebounce, measureText } from '@jbrowse/core/util'
 import BaseResult, {
   RefSequenceResult,
 } from '@jbrowse/core/TextSearch/BaseResults'
+
 // material ui
-import CircularProgress from '@material-ui/core/CircularProgress'
-import TextField, { TextFieldProps as TFP } from '@material-ui/core/TextField'
-import Typography from '@material-ui/core/Typography'
+import {
+  CircularProgress,
+  InputAdornment,
+  Popper,
+  TextField,
+  TextFieldProps as TFP,
+  PopperProps,
+  Typography,
+} from '@material-ui/core'
 import SearchIcon from '@material-ui/icons/Search'
-import { InputAdornment } from '@material-ui/core'
-import Autocomplete, {
-  createFilterOptions,
-} from '@material-ui/lab/Autocomplete'
-// other
+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
 }
 
-// filters for options to display in dropdown
-const filter = createFilterOptions<Option>({
-  trim: true,
-  ignoreCase: true,
-  limit: 100,
-})
-
 async function fetchResults(
   self: LinearGenomeViewModel,
   query: string,
   assemblyName: string,
 ) {
-  const session = getSession(self)
-  const { pluginManager } = getEnv(session)
+  const { textSearchManager } = getSession(self)
   const { rankSearchResults } = self
-  const { textSearchManager } = pluginManager.rootModel
   const searchScope = self.searchScope(assemblyName)
-  const args = {
-    queryString: query,
-    searchType: 'prefix',
-  }
-  const searchResults =
-    (await textSearchManager?.search(args, searchScope, rankSearchResults)) ||
-    []
-  return searchResults
+  return textSearchManager
+    ?.search(
+      {
+        queryString: query,
+        searchType: 'prefix',
+      },
+      searchScope,
+      rankSearchResults,
+    )
+    .then(results =>
+      results.filter(
+        (elem, index, self) =>
+          index === self.findIndex(t => t.label === elem.label),
+      ),
+    )
+}
+
+// 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
+function filterOptions(options: Option[], searchQuery: string) {
+  return options.filter(option => {
+    const { result } = option
+    return (
+      result.getLabel().toLowerCase().includes(searchQuery) ||
+      result.matchedObject
+    )
+  })
 }
+
+// MyPopper used to expand search results box wider if needed
+// xref https://stackoverflow.com/a/63583835/2129219
+const MyPopper = function (
+  props: PopperProps & { style?: { width?: unknown } },
+) {
+  const { style } = props
+  return (
+    <Popper
+      {...props}
+      style={{
+        width: 'fit-content',
+        minWidth: Math.min(+(style?.width || 0), 200),
+        background: 'white',
+      }}
+      placement="bottom-start"
+    />
+  )
+}
+
 function RefNameAutocomplete({
   model,
   onSelect,
@@ -77,55 +101,52 @@ function RefNameAutocomplete({
   TextFieldProps?: TFP
 }) {
   const session = getSession(model)
+  const { assemblyManager } = session
   const [open, setOpen] = useState(false)
-  const [error, setError] = useState<Error>()
+  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 [searchOptions, setSearchOptions] = useState<Option[]>([])
-  const { assemblyManager } = session
-  const { coarseVisibleLocStrings } = model
+  const { coarseVisibleLocStrings, hasDisplayedRegions } = model
   const assembly = assemblyName ? assemblyManager.get(assemblyName) : undefined
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  const regions: Region[] = assembly?.regions || []
+  const regions = assembly?.regions || []
 
-  const options: Option[] = useMemo(() => {
-    const defaultOptions = regions.map(option => {
-      return {
+  const options = useMemo(
+    () =>
+      regions.map(option => ({
         result: new RefSequenceResult({
           refName: option.refName,
           label: option.refName,
           matchedAttribute: 'refName',
         }),
-      }
-    })
-    return defaultOptions
-  }, [regions])
+      })),
+    [regions],
+  )
 
   useEffect(() => {
     let active = true
 
     ;(async () => {
       try {
-        let results: BaseResult[] = []
-        if (debouncedSearch && debouncedSearch !== '' && assemblyName) {
-          const searchResults = await fetchResults(
-            model,
-            debouncedSearch,
-            assemblyName,
-          )
-          results = results.concat(searchResults)
+        if (debouncedSearch === '' || !assemblyName) {
+          return
         }
-        if (results.length > 0 && active) {
-          const adapterResults: Option[] = results.map(result => {
-            return { result }
-          })
-          setSearchOptions(adapterResults)
+
+        setLoaded(false)
+        const results = await fetchResults(model, debouncedSearch, assemblyName)
+        if (active) {
+          if (results && results.length >= 0) {
+            setSearchOptions(results.map(result => ({ result })))
+          }
+          setLoaded(true)
         }
       } catch (e) {
         console.error(e)
         if (active) {
-          setError(e)
+          session.notify(`${e}`, 'error')
         }
       }
     })()
@@ -133,119 +154,125 @@ function RefNameAutocomplete({
     return () => {
       active = false
     }
-  }, [assemblyName, debouncedSearch, model])
-
-  function onChange(selectedOption: Option | string) {
-    if (selectedOption && assemblyName) {
-      if (typeof selectedOption === 'string') {
-        // handles string inputs on keyPress enter
-        const newResult = new BaseResult({
-          label: selectedOption,
-        })
-        onSelect(newResult)
-      } else {
-        const { result } = selectedOption
-        onSelect(result)
-      }
-    }
-  }
+  }, [assemblyName, debouncedSearch, session, model])
+
+  const inputBoxVal = coarseVisibleLocStrings || value || ''
+
+  // heuristic, text width + icon width, minimum 200
+  const width = Math.min(Math.max(measureText(inputBoxVal, 16) + 25, 200), 550)
+
+  // notes on implementation:
+  // The selectOnFocus setting helps highlight the field when clicked
   return (
-    <>
-      <Autocomplete
-        id={`refNameAutocomplete-${model.id}`}
-        data-testid="autocomplete"
-        freeSolo
-        disableListWrap
-        disableClearable
-        includeInputInList
-        clearOnBlur
-        selectOnFocus
-        disabled={!!error || !assemblyName}
-        style={style}
-        value={coarseVisibleLocStrings || value || ''}
-        open={open}
-        onOpen={() => setOpen(true)}
-        onClose={() => {
-          setOpen(false)
+    <Autocomplete
+      id={`refNameAutocomplete-${model.id}`}
+      data-testid="autocomplete"
+      disableListWrap
+      disableClearable
+      PopperComponent={MyPopper}
+      disabled={!assemblyName}
+      freeSolo
+      includeInputInList
+      selectOnFocus
+      style={{ ...style, width }}
+      value={inputBoxVal}
+      loading={!loaded}
+      inputValue={inputValue}
+      onInputChange={(event, newInputValue) => setInputValue(newInputValue)}
+      loadingText="loading results"
+      open={open}
+      onOpen={() => setOpen(true)}
+      onClose={() => {
+        setOpen(false)
+        setLoaded(true)
+        if (hasDisplayedRegions) {
           setCurrentSearch('')
           setSearchOptions([])
-        }}
-        options={searchOptions.length === 0 ? options : searchOptions}
-        getOptionDisabled={option => option?.group === 'limitOption'}
-        filterOptions={(possibleOptions, params) => {
-          const filtered = filter(possibleOptions, params)
-          return filtered.length >= 100
-            ? filtered.concat([
+        }
+      }}
+      onChange={(_event, selectedOption) => {
+        if (!selectedOption || !assemblyName) {
+          return
+        }
+
+        if (typeof selectedOption === 'string') {
+          // handles string inputs on keyPress enter
+          onSelect(new BaseResult({ label: selectedOption }))
+        } else {
+          onSelect(selectedOption.result)
+        }
+        setInputValue(inputBoxVal)
+      }}
+      options={searchOptions.length === 0 ? options : searchOptions}
+      getOptionDisabled={option => option?.group === 'limitOption'}
+      filterOptions={(options, params) => {
+        const filtered = filterOptions(
+          options,
+          params.inputValue.toLocaleLowerCase(),
+        )
+        return [
+          ...filtered.slice(0, 100),
+          ...(filtered.length > 100
+            ? [
                 {
                   group: 'limitOption',
                   result: new BaseResult({
                     label: 'keep typing for more results',
-                    renderingComponent: (
-                      <Typography>{'keep typing for more results'}</Typography>
-                    ),
                   }),
                 },
-              ])
-            : filtered
-        }}
-        ListboxProps={{ style: { maxHeight: 250 } }}
-        onChange={(_, selectedOption) => onChange(selectedOption)}
-        renderInput={params => {
-          const { helperText, InputProps = {} } = TextFieldProps
-          const TextFieldInputProps = {
-            ...params.InputProps,
-            ...InputProps,
-            endAdornment: (
-              <>
-                {regions.length === 0 && searchOptions.length === 0 ? (
-                  <CircularProgress color="inherit" size={20} />
-                ) : (
-                  <InputAdornment position="end" style={{ marginRight: 7 }}>
-                    <SearchIcon />
-                  </InputAdornment>
-                )}
-                {params.InputProps.endAdornment}
-              </>
-            ),
-          }
-          return (
-            <TextField
-              {...params}
-              {...TextFieldProps}
-              helperText={helperText}
-              value={coarseVisibleLocStrings || value || ''}
-              InputProps={TextFieldInputProps}
-              placeholder="Search for location"
-              onChange={e => {
-                setCurrentSearch(e.target.value)
-              }}
-            />
-          )
-        }}
-        renderOption={option => {
-          const { result } = option
-          const rendering = result.getLabel()
-          // if renderingComponent is provided render that
-          const component = result.getRenderingComponent()
-          if (component) {
-            if (React.isValidElement(component)) {
-              return component
-            }
-          }
-          return <Typography noWrap>{rendering}</Typography>
-        }}
-        getOptionLabel={option => {
-          // needed for filtering options and value
-          return (
-            (typeof option === 'string' ? option : option.result.getLabel()) ||
-            ''
-          )
-        }}
-      />
-      {error ? (
-        <Typography variant="h6" color="error">{`${error}`}</Typography>
-      ) : null}
-    </>
+              ]
+            : []),
+        ]
+      }}
+      renderInput={params => {
+        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}
+            InputProps={{
+              ...params.InputProps,
+              ...InputProps,
+
+              endAdornment: (
+                <>
+                  {regions.length === 0 ? (
+                    <CircularProgress color="inherit" size={20} />
+                  ) : (
+                    <InputAdornment position="end" style={{ marginRight: 7 }}>
+                      <SearchIcon />
+                    </InputAdornment>
+                  )}
+                  {params.InputProps.endAdornment}
+                </>
+              ),
+            }}
+            placeholder="Search for location"
+            onChange={e => {
+              setCurrentSearch(e.target.value)
+            }}
+          />
+        )
+      }}
+      renderOption={option => {
+        const { result } = option
+        const component = result.getRenderingComponent()
+        if (component && React.isValidElement(component)) {
+          return component
+        }
+
+        return <Typography noWrap>{result.getDisplayString()}</Typography>
+      }}
+      getOptionLabel={option =>
+        (typeof option === 'string' ? option : option.result.getLabel()) || ''
+      }
+    />
   )
 }
 

package/src/LinearGenomeView/components/SearchResultsDialog.tsx

@@ -83,21 +83,6 @@ export default function SearchResultsDialog({
       session.notify(`${e}`, 'warning')
     }
   }
-  function handleShowTrack(trackId: string) {
-    const trackConfigSchema = pluginManager.pluggableConfigSchemaType('track')
-    const configuration = resolveIdentifier(
-      trackConfigSchema,
-      getRoot(model),
-      trackId,
-    )
-    // check if we have any tracks with that configuration
-    const shownTracks = model.tracks.filter(
-      t => t.configuration === configuration,
-    )
-    if (shownTracks.length === 0) {
-      model.showTrack(trackId)
-    }
-  }
 
   function getTrackName(trackId: string | undefined) {
     if (trackId) {
@@ -184,7 +169,7 @@ export default function SearchResultsDialog({
                             handleClick(result.getLocation())
                             const resultTrackId = result.getTrackId()
                             if (resultTrackId) {
-                              handleShowTrack(resultTrackId)
+                              model.showTrack(resultTrackId)
                             }
                             handleClose()
                           }}

package/src/LinearGenomeView/components/SequenceDialog.tsx

@@ -1,10 +1,5 @@
 import React, { useEffect, useMemo, useState } from 'react'
-import { observer } from 'mobx-react'
-import { saveAs } from 'file-saver'
-import { Region } from '@jbrowse/core/util/types'
-import { readConfObject } from '@jbrowse/core/configuration'
-import copy from 'copy-to-clipboard'
-import { makeStyles } from '@material-ui/core/styles'
+
 import {
   Button,
   CircularProgress,
@@ -17,7 +12,13 @@ import {
   Divider,
   IconButton,
   TextField,
+  makeStyles,
 } from '@material-ui/core'
+import { observer } from 'mobx-react'
+import { saveAs } from 'file-saver'
+import { Region } from '@jbrowse/core/util/types'
+import { readConfObject } from '@jbrowse/core/configuration'
+import copy from 'copy-to-clipboard'
 import { ContentCopy as ContentCopyIcon } from '@jbrowse/core/ui/Icons'
 import CloseIcon from '@material-ui/icons/Close'
 import GetAppIcon from '@material-ui/icons/GetApp'
@@ -44,12 +45,14 @@ const useStyles = makeStyles(theme => ({
   },
 }))
 
+type LGV = LinearGenomeViewModel
+
 /**
  * Fetches and returns a list features for a given list of regions
  */
 async function fetchSequence(
-  model: LinearGenomeViewModel,
-  selectedRegions: Region[],
+  model: LGV,
+  regions: Region[],
   signal?: AbortSignal,
 ) {
   const session = getSession(model)
@@ -75,7 +78,7 @@ async function fetchSequence(
 
   const sessionId = 'getSequence'
   const chunks = (await Promise.all(
-    selectedRegions.map(region =>
+    regions.map(region =>
       rpcManager.call(sessionId, 'CoreGetFeatures', {
         adapterConfig,
         region,
@@ -98,9 +101,9 @@ function SequenceDialog({
 }) {
   const classes = useStyles()
   const session = getSession(model)
-  const [error, setError] = useState<Error>()
-  const [sequence, setSequence] = useState('')
-  const loading = Boolean(!sequence) || Boolean(error)
+  const [error, setError] = useState<unknown>()
+  const [sequence, setSequence] = useState<string>()
+  const loading = Boolean(sequence === undefined)
   const { leftOffset, rightOffset } = model
 
   // avoid infinite looping of useEffect
@@ -115,26 +118,6 @@ function SequenceDialog({
     let active = true
     const controller = new AbortController()
 
-    function formatSequence(seqChunks: Feature[]) {
-      return formatSeqFasta(
-        seqChunks.map(chunk => {
-          const chunkSeq = chunk.get('seq')
-          const chunkRefName = chunk.get('refName')
-          const chunkStart = chunk.get('start') + 1
-          const chunkEnd = chunk.get('end')
-          const chunkLocstring = `${chunkRefName}:${chunkStart}-${chunkEnd}`
-          if (chunkSeq?.length !== chunkEnd - chunkStart + 1) {
-            throw new Error(
-              `${chunkLocstring} returned ${chunkSeq.length.toLocaleString()} bases, but should have returned ${(
-                chunkEnd - chunkStart
-              ).toLocaleString()}`,
-            )
-          }
-          return { header: chunkLocstring, seq: chunkSeq }
-        }),
-      )
-    }
-
     ;(async () => {
       try {
         if (regionsSelected.length > 0) {
@@ -144,7 +127,27 @@ function SequenceDialog({
             controller.signal,
           )
           if (active) {
-            setSequence(formatSequence(chunks))
+            setSequence(
+              formatSeqFasta(
+                chunks
+                  .filter(f => !!f)
+                  .map(chunk => {
+                    const chunkSeq = chunk.get('seq')
+                    const chunkRefName = chunk.get('refName')
+                    const chunkStart = chunk.get('start') + 1
+                    const chunkEnd = chunk.get('end')
+                    const chunkLocstring = `${chunkRefName}:${chunkStart}-${chunkEnd}`
+                    if (chunkSeq?.length !== chunkEnd - chunkStart + 1) {
+                      throw new Error(
+                        `${chunkLocstring} returned ${chunkSeq.length.toLocaleString()} bases, but should have returned ${(
+                          chunkEnd - chunkStart
+                        ).toLocaleString()}`,
+                      )
+                    }
+                    return { header: chunkLocstring, seq: chunkSeq }
+                  }),
+              ),
+            )
           }
         } else {
           throw new Error('Selected region is out of bounds')
@@ -163,7 +166,7 @@ function SequenceDialog({
     }
   }, [model, session, regionsSelected, setSequence])
 
-  const sequenceTooLarge = sequence.length > 1_000_000
+  const sequenceTooLarge = sequence ? sequence.length > 1_000_000 : false
 
   return (
     <Dialog
@@ -205,28 +208,26 @@ function SequenceDialog({
             />
           </Container>
         ) : null}
-        {sequence !== undefined ? (
-          <TextField
-            data-testid="rubberband-sequence"
-            variant="outlined"
-            multiline
-            rows={5}
-            disabled={sequenceTooLarge}
-            className={classes.dialogContent}
-            fullWidth
-            value={
-              sequenceTooLarge
-                ? 'Reference sequence too large to display, use the download FASTA button'
-                : sequence
-            }
-            InputProps={{
-              readOnly: true,
-              classes: {
-                input: classes.textAreaFont,
-              },
-            }}
-          />
-        ) : null}
+        <TextField
+          data-testid="rubberband-sequence"
+          variant="outlined"
+          multiline
+          rows={5}
+          disabled={sequenceTooLarge}
+          className={classes.dialogContent}
+          fullWidth
+          value={
+            sequenceTooLarge
+              ? 'Reference sequence too large to display, use the download FASTA button'
+              : sequence
+          }
+          InputProps={{
+            readOnly: true,
+            classes: {
+              input: classes.textAreaFont,
+            },
+          }}
+        />
       </DialogContent>
       <DialogActions>
         <Button
@@ -234,7 +235,7 @@ function SequenceDialog({
             copy(sequence || '')
             session.notify('Copied to clipboard', 'success')
           }}
-          disabled={loading || sequenceTooLarge}
+          disabled={loading || !!error || sequenceTooLarge}
           color="primary"
           startIcon={<ContentCopyIcon />}
         >
@@ -247,7 +248,7 @@ function SequenceDialog({
             })
             saveAs(seqFastaFile, 'jbrowse_ref_seq.fa')
           }}
-          disabled={loading}
+          disabled={loading || !!error}
           color="primary"
           startIcon={<GetAppIcon />}
         >