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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-linear-genome-view",
-  "version": "1.5.1",
+  "version": "1.5.2",
   "description": "JBrowse 2 linear genome view",
   "keywords": [
     "jbrowse",
@@ -61,5 +61,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "284e408c72a3d4d7a0d603197501a8fc8f68c4bc"
+  "gitHead": "94fdfbc34787ab8f12a87e00038da74b247b42fa"
 }

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,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, lazy } from 'react'
 import { observer } from 'mobx-react'
 import { getSession } from '@jbrowse/core/util'
 import {
@@ -6,17 +6,18 @@ import {
   CircularProgress,
   Container,
   Grid,
-  Typography,
   makeStyles,
 } from '@material-ui/core'
 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: {
@@ -29,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)
@@ -91,13 +84,11 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
     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
@@ -132,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}
@@ -158,18 +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={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 a sequence or location',
+                      helperText:
+                        'Enter sequence name, feature name, or location',
                     }}
                   />
                 ) : (
@@ -181,6 +171,7 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
                 )
               ) : null}
             </Grid>
+            <Grid item></Grid>
             <Grid item>
               <Button
                 type="submit"

package/src/LinearGenomeView/components/LinearGenomeViewSvg.tsx

@@ -177,7 +177,7 @@ const SVGHeader = ({ model }: { model: LGV }) => {
           <Cytobands overview={overview} assembly={assembly} block={block} />
           <rect
             stroke="red"
-            fill="none"
+            fill="rgb(255,0,0,0.1)"
             width={Math.max(lastOverviewPx - firstOverviewPx, 0.5)}
             height={HEADER_OVERVIEW_HEIGHT - 1}
             x={firstOverviewPx}

package/src/LinearGenomeView/components/OverviewRubberBand.tsx

@@ -143,7 +143,7 @@ function OverviewRubberBand({
         startX !== undefined &&
         currentX === undefined
       ) {
-        const clickedAt = overview.pxToBp(startX)
+        const clickedAt = overview.pxToBp(startX - cytobandOffset)
         model.centerAt(
           Math.round(clickedAt.coord),
           clickedAt.refName,

package/src/LinearGenomeView/components/OverviewScaleBar.tsx

@@ -62,7 +62,7 @@ const useStyles = makeStyles(theme => {
       height: HEADER_OVERVIEW_HEIGHT,
       pointerEvents: 'none',
       zIndex: 100,
-      border: '1px solid red',
+      border: '1px solid',
     },
     overview: {
       height: HEADER_BAR_HEIGHT,
@@ -405,6 +405,9 @@ const ScaleBar = observer(
         coord: last.reversed ? last.start : last.end,
       }) || 0
 
+    const color = showCytobands ? '#f00' : scaleBarColor
+    const transparency = showCytobands ? 0.1 : 0.3
+
     return (
       <div className={classes.scaleBar}>
         <div
@@ -412,7 +415,8 @@ const ScaleBar = observer(
           style={{
             width: lastOverviewPx - firstOverviewPx,
             left: firstOverviewPx + cytobandOffset,
-            background: showCytobands ? undefined : alpha(scaleBarColor, 0.3),
+            background: alpha(color, transparency),
+            borderColor: color,
           }}
         />
         {/* this is the entire scale bar */}

package/src/LinearGenomeView/components/RefNameAutocomplete.tsx

@@ -1,31 +1,32 @@
-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'))
+
 export interface Option {
   group?: string
   result: BaseResult
@@ -70,6 +71,7 @@ function RefNameAutocomplete({
   style,
   fetchResults,
   value,
+  minWidth = 200,
   TextFieldProps = {},
 }: {
   model: LinearGenomeViewModel
@@ -78,12 +80,14 @@ function RefNameAutocomplete({
   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 [inputValue, setInputValue] = useState('')
   const [searchOptions, setSearchOptions] = useState<Option[]>()
@@ -140,121 +144,135 @@ function RefNameAutocomplete({
 
   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:
   // 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
-      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
-        }
+    <>
+      <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
+          }
 
-        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,
+          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,
 
-              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
-        }
+                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()) || ''
-      }
-    />
+          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>