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

package/src/LinearGenomeView/components/RefNameAutocomplete.tsx

@@ -1,71 +1,40 @@
-/**
- * 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 React, { lazy, useMemo, useEffect, useState } from 'react'
 import { observer } from 'mobx-react'
-
-// jbrowse core
 import { getSession, useDebounce, measureText } from '@jbrowse/core/util'
 import BaseResult, {
   RefSequenceResult,
 } from '@jbrowse/core/TextSearch/BaseResults'
-
-// material ui
 import {
   CircularProgress,
+  IconButton,
   InputAdornment,
   Popper,
+  PopperProps,
   TextField,
   TextFieldProps as TFP,
-  PopperProps,
   Typography,
 } from '@material-ui/core'
+
+// icons
 import SearchIcon from '@material-ui/icons/Search'
 import Autocomplete from '@material-ui/lab/Autocomplete'
+import HelpIcon from '@material-ui/icons/Help'
 
 // locals
 import { LinearGenomeViewModel } from '..'
+import { dedupe } from './util'
+
+// lazy
+const HelpDialog = lazy(() => import('./HelpDialog'))
 
-/**
- *  Option interface used to format results to display in dropdown
- *  of the materila ui interface
- */
 export interface Option {
   group?: string
   result: BaseResult
 }
 
-async function fetchResults(
-  self: LinearGenomeViewModel,
-  query: string,
-  assemblyName: string,
-) {
-  const { textSearchManager } = getSession(self)
-  const { rankSearchResults } = self
-  const searchScope = self.searchScope(assemblyName)
-  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
+// 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
@@ -100,22 +69,28 @@ function RefNameAutocomplete({
   onSelect,
   assemblyName,
   style,
+  fetchResults,
   value,
+  minWidth = 200,
   TextFieldProps = {},
 }: {
   model: LinearGenomeViewModel
   onSelect: (region: BaseResult) => void
   assemblyName?: string
   value?: string
+  fetchResults: (query: string) => Promise<BaseResult[]>
   style?: React.CSSProperties
+  minWidth?: number
   TextFieldProps?: TFP
 }) {
   const session = getSession(model)
   const { assemblyManager } = session
   const [open, setOpen] = useState(false)
   const [loaded, setLoaded] = useState(true)
+  const [isHelpDialogDisplayed, setHelpDialogDisplayed] = useState(false)
   const [currentSearch, setCurrentSearch] = useState('')
-  const [searchOptions, setSearchOptions] = useState([] as Option[])
+  const [inputValue, setInputValue] = useState('')
+  const [searchOptions, setSearchOptions] = useState<Option[]>()
   const debouncedSearch = useDebounce(currentSearch, 300)
   const { coarseVisibleLocStrings, hasDisplayedRegions } = model
   const assembly = assemblyName ? assemblyManager.get(assemblyName) : undefined
@@ -145,11 +120,15 @@ function RefNameAutocomplete({
         }
 
         setLoaded(false)
-        const results = await fetchResults(model, debouncedSearch, assemblyName)
-        if (results && results.length >= 0 && active) {
-          setSearchOptions(results.map(result => ({ result })))
+        const results = await fetchResults(debouncedSearch)
+        if (active) {
+          setSearchOptions(
+            dedupe(results, r => r.getDisplayString()).map(result => ({
+              result,
+            })),
+          )
+          setLoaded(true)
         }
-        setLoaded(true)
       } catch (e) {
         console.error(e)
         if (active) {
@@ -161,123 +140,139 @@ function RefNameAutocomplete({
     return () => {
       active = false
     }
-  }, [assemblyName, debouncedSearch, session, model])
+  }, [assemblyName, fetchResults, 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)
+  // heuristic, text width + icon width
+  // + 45 accomodates help icon and search icon
+  const width = Math.min(
+    Math.max(measureText(inputBoxVal, 16) + 45, minWidth),
+    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}`}
-      data-testid="autocomplete"
-      disableListWrap
-      disableClearable
-      PopperComponent={MyPopper}
-      disabled={!assemblyName}
-      freeSolo
-      includeInputInList
-      selectOnFocus
-      blurOnSelect
-      style={{ ...style, width }}
-      value={inputBoxVal}
-      loading={!loaded}
-      loadingText="loading results"
-      open={open}
-      onOpen={() => setOpen(true)}
-      onClose={() => {
-        setOpen(false)
-        setLoaded(true)
-        if (hasDisplayedRegions) {
-          setCurrentSearch('')
-          setSearchOptions([])
-        }
-      }}
-      onChange={(_event, selectedOption) => {
-        if (!selectedOption || !assemblyName) {
-          return
-        }
-        if (typeof selectedOption === 'string') {
-          // handles string inputs on keyPress enter
-          const newResult = new BaseResult({
-            label: selectedOption,
-          })
-          onSelect(newResult)
-        } else {
-          const { result } = selectedOption
-          onSelect(result)
-        }
-      }}
-      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',
-                  }),
-                },
-              ]
-            : []),
-        ]
-      }}
-      renderInput={params => {
-        const { helperText, InputProps = {} } = TextFieldProps
-        return (
-          <TextField
-            {...params}
-            {...TextFieldProps}
-            helperText={helperText}
-            InputProps={{
-              ...params.InputProps,
-              ...InputProps,
+    <>
+      <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(undefined)
+          }
+        }}
+        onChange={(_event, selectedOption) => {
+          if (!selectedOption || !assemblyName) {
+            return
+          }
 
-              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
-        }
+          if (typeof selectedOption === 'string') {
+            // handles string inputs on keyPress enter
+            onSelect(new BaseResult({ label: selectedOption }))
+          } else {
+            onSelect(selectedOption.result)
+          }
+          setInputValue(inputBoxVal)
+        }}
+        options={!searchOptions?.length ? 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',
+                    }),
+                  },
+                ]
+              : []),
+          ]
+        }}
+        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,
 
-        return <Typography noWrap>{result.getDisplayString()}</Typography>
-      }}
-      getOptionLabel={option =>
-        (typeof option === 'string' ? option : option.result.getLabel()) || ''
-      }
-    />
+                endAdornment: (
+                  <>
+                    {regions.length === 0 ? (
+                      <CircularProgress color="inherit" size={20} />
+                    ) : (
+                      <InputAdornment position="end" style={{ marginRight: 7 }}>
+                        <SearchIcon />
+                        <IconButton
+                          onClick={() => setHelpDialogDisplayed(true)}
+                        >
+                          <HelpIcon />
+                        </IconButton>
+                      </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()) || ''
+        }
+      />
+      {isHelpDialogDisplayed ? (
+        <HelpDialog handleClose={() => setHelpDialogDisplayed(false)} />
+      ) : null}
+    </>
   )
 }
 

package/src/LinearGenomeView/components/SearchResultsDialog.tsx

@@ -6,7 +6,6 @@ import {
   Dialog,
   DialogActions,
   DialogContent,
-  DialogContentText,
   DialogTitle,
   Divider,
   IconButton,
@@ -18,10 +17,9 @@ import {
   TableRow,
   Typography,
   Paper,
+  makeStyles,
 } from '@material-ui/core'
 import CloseIcon from '@material-ui/icons/Close'
-import { makeStyles } from '@material-ui/core/styles'
-import BaseResult from '@jbrowse/core/TextSearch/BaseResults'
 import { LinearGenomeViewModel } from '../..'
 
 export const useStyles = makeStyles(theme => ({
@@ -101,8 +99,8 @@ export default function SearchResultsDialog({
 
   return (
     <Dialog open maxWidth="xl" onClose={handleClose}>
-      <DialogTitle id="search-results-dialog">
-        Search Results
+      <DialogTitle>
+        Search results
         {handleClose ? (
           <IconButton
             data-testid="close-resultsDialog"
@@ -117,18 +115,15 @@ export default function SearchResultsDialog({
       </DialogTitle>
       <Divider />
       <DialogContent>
-        {model.searchResults?.length === 0 ||
-        model.searchResults === undefined ? (
+        {!model.searchResults?.length ? (
           <Typography>
-            {`No results found for `}
-            <b>{model.searchQuery}</b>
+            No results found for <b>{model.searchQuery}</b>
           </Typography>
         ) : (
           <>
-            <DialogContentText id="alert-dialog-slide-description">
-              {`Showing results for `}
-              <b>{model.searchQuery}</b>
-            </DialogContentText>
+            <Typography>
+              Showing results for <b>{model.searchQuery}</b>
+            </Typography>
             <TableContainer component={Paper}>
               <Table>
                 <TableHead>
@@ -140,8 +135,8 @@ export default function SearchResultsDialog({
                   </TableRow>
                 </TableHead>
                 <TableBody>
-                  {model.searchResults.map((result: BaseResult, index) => (
-                    <TableRow key={`${result.getLabel()}-${index}`}>
+                  {model.searchResults.map(result => (
+                    <TableRow key={`${result.getId()}`}>
                       <TableCell component="th" scope="row">
                         {result.getLabel()}
                       </TableCell>
@@ -151,18 +146,6 @@ export default function SearchResultsDialog({
                       <TableCell align="right">
                         {getTrackName(result.getTrackId()) || 'N/A'}
                       </TableCell>
-                      <TableCell align="right">
-                        <Button
-                          onClick={() => {
-                            handleClick(result.getLocation())
-                            handleClose()
-                          }}
-                          color="primary"
-                          variant="contained"
-                        >
-                          Go to location
-                        </Button>
-                      </TableCell>
                       <TableCell align="right">
                         <Button
                           onClick={() => {
@@ -177,7 +160,7 @@ export default function SearchResultsDialog({
                           color="primary"
                           variant="contained"
                         >
-                          Show Track
+                          Go
                         </Button>
                       </TableCell>
                     </TableRow>
@@ -190,12 +173,7 @@ export default function SearchResultsDialog({
       </DialogContent>
       <Divider />
       <DialogActions>
-        <Button
-          onClick={() => {
-            handleClose()
-          }}
-          color="primary"
-        >
+        <Button onClick={() => handleClose()} color="primary">
           Cancel
         </Button>
       </DialogActions>

package/src/LinearGenomeView/components/SequenceDialog.tsx

@@ -17,14 +17,18 @@ import {
 import { observer } from 'mobx-react'
 import { saveAs } from 'file-saver'
 import { Region } from '@jbrowse/core/util/types'
-import { readConfObject } from '@jbrowse/core/configuration'
+import { getConf } 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'
 import { getSession } from '@jbrowse/core/util'
 import { Feature } from '@jbrowse/core/util/simpleFeature'
 import { formatSeqFasta } from '@jbrowse/core/util/formatFastaStrings'
+
+// icons
+import { ContentCopy as ContentCopyIcon } from '@jbrowse/core/ui/Icons'
+import CloseIcon from '@material-ui/icons/Close'
+import GetAppIcon from '@material-ui/icons/GetApp'
+
+// locals
 import { LinearGenomeViewModel } from '..'
 
 const useStyles = makeStyles(theme => ({
@@ -71,10 +75,7 @@ async function fetchSequence(
   if (!assembly) {
     throw new Error(`assembly ${assemblyName} not found`)
   }
-  const adapterConfig = readConfObject(assembly.configuration, [
-    'sequence',
-    'adapter',
-  ])
+  const adapterConfig = getConf(assembly, ['sequence', 'adapter'])
 
   const sessionId = 'getSequence'
   const chunks = (await Promise.all(
@@ -101,7 +102,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