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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-linear-genome-view",
-  "version": "1.5.0",
+  "version": "1.5.4",
   "description": "JBrowse 2 linear genome view",
   "keywords": [
     "jbrowse",
@@ -36,7 +36,7 @@
   },
   "dependencies": {
     "@material-ui/icons": "^4.9.1",
-    "@popperjs/core": "^2.9.3",
+    "@popperjs/core": "^2.11.0",
     "clone": "^2.1.2",
     "clsx": "^1.0.4",
     "copy-to-clipboard": "^3.3.1",
@@ -45,7 +45,7 @@
     "json-stable-stringify": "^1.0.1",
     "normalize-wheel": "^1.0.1",
     "react-popper": "^2.0.0",
-    "react-sizeme": "^2.6.7"
+    "react-sizeme": "^3.0.2"
   },
   "peerDependencies": {
     "@jbrowse/core": "^1.0.0",
@@ -61,5 +61,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "542025578a39bd170c8a166f2568ee7edbd54072"
+  "gitHead": "0c398214590969168694b4ed8e20b595178b9efd"
 }

package/src/BaseLinearDisplay/components/BaseLinearDisplay.tsx

@@ -35,7 +35,6 @@ const useStyles = makeStyles(theme => ({
     lineHeight: `${round(14 / 10)}em`,
     maxWidth: 300,
     wordWrap: 'break-word',
-    fontWeight: theme.typography.fontWeightMedium,
   },
 }))
 

package/src/BaseLinearDisplay/components/Block.tsx

@@ -1,7 +1,7 @@
+import React from 'react'
 import { BaseBlock } from '@jbrowse/core/util/blockTypes'
 import { makeStyles } from '@material-ui/core/styles'
 import { observer } from 'mobx-react'
-import React from 'react'
 
 const useStyles = makeStyles(theme => ({
   contentBlock: {
@@ -28,51 +28,38 @@ const useStyles = makeStyles(theme => ({
   },
 }))
 
-interface ContentBlockProps {
-  block: BaseBlock
-  children: React.ReactNode
-}
-
-interface ElidedBlockProps {
-  width: number
-}
-
-interface InterRegionPaddingBlockProps {
-  boundary: boolean
-  width: number
-  style?: React.CSSProperties
-}
-
-const ContentBlock = observer(({ block, children }: ContentBlockProps) => {
-  const classes = useStyles()
-  return (
-    <div
-      style={{
-        width: `${block.widthPx}px`,
-      }}
-      className={classes.contentBlock}
-    >
-      {children}
-    </div>
-  )
-})
+const ContentBlock = observer(
+  ({ block, children }: { block: BaseBlock; children: React.ReactNode }) => {
+    const classes = useStyles()
+    const { widthPx } = block
+    return (
+      <div style={{ width: widthPx }} className={classes.contentBlock}>
+        {children}
+      </div>
+    )
+  },
+)
 
-function ElidedBlock({ width }: ElidedBlockProps) {
+function ElidedBlock({ width }: { width: number }) {
   const classes = useStyles()
-  return <div className={classes.elidedBlock} style={{ width: `${width}px` }} />
+  return <div className={classes.elidedBlock} style={{ width }} />
 }
 
 function InterRegionPaddingBlock({
   boundary,
   width,
   style = {},
-}: InterRegionPaddingBlockProps) {
+}: {
+  boundary: boolean
+  width: number
+  style?: React.CSSProperties
+}) {
   const classes = useStyles()
   return (
     <div
       style={{
         ...style,
-        width: `${width}px`,
+        width,
       }}
       className={
         boundary

package/src/LinearGenomeView/components/Header.tsx

@@ -10,6 +10,7 @@ import {
   alpha,
 } from '@material-ui/core'
 import BaseResult from '@jbrowse/core/TextSearch/BaseResults'
+import { SearchType } from '@jbrowse/core/data_adapters/BaseAdapter'
 
 // icons
 import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons'
@@ -121,19 +122,29 @@ const LinearGenomeViewHeader = observer(
     const assembly = assemblyManager.get(assemblyName)
     const searchScope = model.searchScope(assemblyName)
 
-    async function fetchResults(queryString: string) {
+    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 dedupe(results)
+
+      const refNameResults = assembly?.allRefNames
+        ?.filter(refName => refName.startsWith(query))
+        .map(r => new BaseResult({ label: r }))
+        .slice(0, 10)
+
+      return dedupe(
+        [...(refNameResults || []), ...(textSearchResults || [])],
+        elt => elt.getId(),
+      )
     }
 
     async function handleSelectedRegion(option: BaseResult) {
@@ -141,10 +152,10 @@ const LinearGenomeViewHeader = observer(
       let location = option.getLocation()
       const label = option.getLabel()
       try {
-        if (assembly?.refNames?.includes(location)) {
+        if (assembly?.allRefNames?.includes(location)) {
           model.navToLocString(location)
         } else {
-          const results = await fetchResults(label)
+          const results = await fetchResults(label, 'exact')
           if (results && results.length > 1) {
             model.setSearchResults(results, label.toLowerCase())
             return
@@ -173,6 +184,7 @@ const LinearGenomeViewHeader = observer(
           <RefNameAutocomplete
             onSelect={handleSelectedRegion}
             assemblyName={assemblyName}
+            fetchResults={fetchResults}
             model={model}
             TextFieldProps={{
               variant: 'outlined',

package/src/LinearGenomeView/components/HelpDialog.tsx

@@ -0,0 +1,81 @@
+import React from 'react'
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Divider,
+  IconButton,
+  makeStyles,
+} from '@material-ui/core'
+import CloseIcon from '@material-ui/icons/Close'
+
+export const useStyles = makeStyles(theme => ({
+  closeButton: {
+    position: 'absolute',
+    right: theme.spacing(1),
+    top: theme.spacing(1),
+    color: theme.palette.grey[500],
+  },
+}))
+
+export default function HelpDialog({
+  handleClose,
+}: {
+  handleClose: () => void
+}) {
+  const classes = useStyles()
+  return (
+    <Dialog open maxWidth="xl" onClose={handleClose}>
+      <DialogTitle>
+        Using the search box
+        {handleClose ? (
+          <IconButton
+            data-testid="close-resultsDialog"
+            className={classes.closeButton}
+            onClick={() => {
+              handleClose()
+            }}
+          >
+            <CloseIcon />
+          </IconButton>
+        ) : null}
+      </DialogTitle>
+      <Divider />
+      <DialogContent>
+        <h3>Searching</h3>
+        <ul>
+          <li>
+            Jump to a feature or reference sequence by typing its name in the
+            location box and pressing Enter.
+          </li>
+          <li>
+            Jump to a specific region by typing the region into the location box
+            as: <code>ref:start..end</code> or <code>ref:start-end</code>.
+            Commas are allowed in the start and end coordinates.
+          </li>
+        </ul>
+        <h3>Example Searches</h3>
+        <ul>
+          <li>
+            <code>BRCA</code> - searches for the feature named BRCA
+          </li>
+          <li>
+            <code>chr4</code> - jumps to chromosome 4
+          </li>
+          <li>
+            <code>chr4:79,500,000..80,000,000</code> - jumps the region on
+            chromosome 4 between 79.5Mb and 80Mb.
+          </li>
+        </ul>
+      </DialogContent>
+      <Divider />
+      <DialogActions>
+        <Button onClick={() => handleClose()} color="primary">
+          Close
+        </Button>
+      </DialogActions>
+    </Dialog>
+  )
+}

package/src/LinearGenomeView/components/ImportForm.tsx

@@ -1,23 +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, {
-  RefSequenceResult,
-} 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 '..'
-import { dedupe } from './util'
+const SearchResultsDialog = lazy(() => import('./SearchResultsDialog'))
 
 const useStyles = makeStyles(theme => ({
   importFormContainer: {
@@ -30,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)
@@ -49,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)
@@ -59,42 +50,45 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
   const regions = assembly?.regions || []
   const err = assemblyError || error
 
-  const [myOption, setOption] = useState<BaseResult | undefined>()
+  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 RefSequenceResult({
-      refName: regions[0]?.refName,
+    new BaseResult({
       label: regions[0]?.refName,
     })
 
   const selectedRegion = option?.getLocation()
 
-  async function fetchResults(queryString: string) {
+  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 dedupe(results)
+    const refNameResults = assembly?.allRefNames
+      ?.filter(refName => refName.startsWith(query))
+      .map(r => new BaseResult({ label: r }))
+      .slice(0, 10)
+
+    return [...(refNameResults || []), ...(textSearchResults || [])]
   }
 
-  /**
-   * 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
-   */
+  // 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) {
     if (!option) {
       return
@@ -102,10 +96,10 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
     let trackId = option.getTrackId()
     let location = input || option.getLocation() || ''
     try {
-      if (assembly?.refNames?.includes(location)) {
+      if (assembly?.allRefNames?.includes(location)) {
         model.navToLocString(location, selectedAsm)
       } else {
-        const results = await fetchResults(input)
+        const results = await fetchResults(input, 'exact')
         if (results && results.length > 1) {
           model.setSearchResults(results, input.toLowerCase())
           return
@@ -129,13 +123,9 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
   // 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}>
-        <form
-          onSubmit={event => {
-            event.preventDefault()
-          }}
-        >
+        <form onSubmit={event => event.preventDefault()}>
           <Grid
             container
             spacing={1}
@@ -155,19 +145,21 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
             <Grid item>
               {selectedAsm ? (
                 err ? (
-                  <Typography color="error">X</Typography>
-                ) : selectedRegion && model.volatileWidth ? (
+                  <CloseIcon style={{ color: 'red' }} />
+                ) : selectedRegion ? (
                   <RefNameAutocomplete
+                    fetchResults={fetchResults}
                     model={model}
-                    assemblyName={message ? undefined : selectedAsm}
+                    assemblyName={assemblyError ? undefined : selectedAsm}
                     value={selectedRegion}
-                    onSelect={option => {
-                      setOption(option)
-                    }}
+                    // note: minWidth 270 accomodates full width of helperText
+                    minWidth={270}
+                    onSelect={option => setOption(option)}
                     TextFieldProps={{
                       margin: 'normal',
                       variant: 'outlined',
-                      helperText: 'Enter a sequence or location',
+                      helperText:
+                        'Enter sequence name, feature name, or location',
                     }}
                   />
                 ) : (
@@ -179,6 +171,7 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
                 )
               ) : null}
             </Grid>
+            <Grid item></Grid>
             <Grid item>
               <Button
                 type="submit"
@@ -215,9 +208,7 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
         <SearchResultsDialog
           model={model}
           optAssemblyName={selectedAsm}
-          handleClose={() => {
-            model.setSearchResults(undefined, undefined)
-          }}
+          handleClose={() => model.setSearchResults(undefined, undefined)}
         />
       ) : null}
     </div>