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

package/package.json

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

package/src/BaseLinearDisplay/components/BaseLinearDisplay.tsx

@@ -73,6 +73,9 @@ const Tooltip = observer(
             right: x,
             width: 0,
             height: 0,
+            x,
+            y,
+            toJSON() {},
           }
         },
       }),

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/BaseLinearDisplay/models/BaseLinearDisplayModel.tsx

@@ -88,7 +88,7 @@ export const BaseLinearDisplay = types
     },
 
     get TooltipComponent(): React.FC<any> {
-      return (Tooltip as unknown) as React.FC
+      return Tooltip as unknown as React.FC
     },
 
     /**
@@ -387,12 +387,8 @@ export const BaseLinearDisplay = types
             }
           }
 
-          const {
-            rpcManager,
-            renderArgs,
-            renderProps,
-            rendererType,
-          } = renderBlockData(blockState, self)
+          const { rpcManager, renderArgs, renderProps, rendererType } =
+            renderBlockData(blockState, self)
 
           return rendererType.renderInClient(rpcManager, {
             ...renderArgs,

package/src/BaseLinearDisplay/models/serverSideRenderedBlock.ts

@@ -3,7 +3,10 @@ import { types, getParent, isAlive, cast, Instance } from 'mobx-state-tree'
 import { readConfObject } from '@jbrowse/core/configuration'
 import { Feature } from '@jbrowse/core/util/simpleFeature'
 import { Region } from '@jbrowse/core/util/types/mst'
-import { AbstractDisplayModel } from '@jbrowse/core/util/types'
+import {
+  AbstractDisplayModel,
+  isRetryException,
+} from '@jbrowse/core/util/types'
 import React from 'react'
 
 import {
@@ -36,7 +39,7 @@ const blockState = types
     features: undefined as Map<string, Feature> | undefined,
     layout: undefined as any,
     status: '',
-    error: undefined as Error | undefined,
+    error: undefined as unknown,
     message: undefined as string | undefined,
     maxHeightReached: false,
     ReactComponent: ServerSideRenderedBlockContent,
@@ -128,7 +131,7 @@ const blockState = types
         self.renderProps = renderProps
         renderInProgress = undefined
       },
-      setError(error: Error) {
+      setError(error: Error | unknown) {
         console.error(error)
         if (renderInProgress && !renderInProgress.signal.aborted) {
           renderInProgress.abort()
@@ -143,6 +146,9 @@ const blockState = types
         self.error = error
         self.renderProps = undefined
         renderInProgress = undefined
+        if (isRetryException(error as Error)) {
+          this.reload()
+        }
       },
       reload() {
         self.renderInProgress = undefined
@@ -286,16 +292,12 @@ async function renderBlockEffect(
     return undefined
   }
 
-  const {
-    reactElement,
-    features,
-    layout,
-    maxHeightReached,
-  } = await rendererType.renderInClient(rpcManager, {
-    ...renderArgs,
-    ...renderProps,
-    signal,
-  })
+  const { reactElement, features, layout, maxHeightReached } =
+    await rendererType.renderInClient(rpcManager, {
+      ...renderArgs,
+      ...renderProps,
+      signal,
+    })
   return {
     reactElement,
     features,

package/src/LinearBasicDisplay/model.ts

@@ -17,6 +17,7 @@ const stateModelFactory = (configSchema: AnyConfigurationSchemaType) =>
       types.model({
         type: types.literal('LinearBasicDisplay'),
         trackShowLabels: types.maybe(types.boolean),
+        trackShowDescriptions: types.maybe(types.boolean),
         trackDisplayMode: types.maybe(types.string),
         trackMaxHeight: types.maybe(types.number),
         configuration: ConfigurationReference(configSchema),
@@ -34,6 +35,13 @@ const stateModelFactory = (configSchema: AnyConfigurationSchemaType) =>
           : showLabels
       },
 
+      get showDescriptions() {
+        const showDescriptions = getConf(self, ['renderer', 'showLabels'])
+        return self.trackShowDescriptions !== undefined
+          ? self.trackShowDescriptions
+          : showDescriptions
+      },
+
       get maxHeight() {
         const maxHeight = getConf(self, ['renderer', 'maxHeight'])
         return self.trackMaxHeight !== undefined
@@ -54,6 +62,7 @@ const stateModelFactory = (configSchema: AnyConfigurationSchemaType) =>
           {
             ...configBlob,
             showLabels: this.showLabels,
+            showDescriptions: this.showDescriptions,
             displayMode: this.displayMode,
             maxHeight: this.maxHeight,
           },
@@ -66,6 +75,9 @@ const stateModelFactory = (configSchema: AnyConfigurationSchemaType) =>
       toggleShowLabels() {
         self.trackShowLabels = !self.showLabels
       },
+      toggleShowDescriptions() {
+        self.trackShowDescriptions = !self.showDescriptions
+      },
       setDisplayMode(val: string) {
         self.trackDisplayMode = val
       },
@@ -100,6 +112,15 @@ const stateModelFactory = (configSchema: AnyConfigurationSchemaType) =>
                 self.toggleShowLabels()
               },
             },
+            {
+              label: 'Show descriptions',
+              icon: VisibilityIcon,
+              type: 'checkbox',
+              checked: self.showDescriptions,
+              onClick: () => {
+                self.toggleShowDescriptions()
+              },
+            },
             {
               label: 'Display mode',
               icon: VisibilityIcon,
@@ -118,9 +139,10 @@ const stateModelFactory = (configSchema: AnyConfigurationSchemaType) =>
             {
               label: 'Set max height',
               onClick: () => {
-                getSession(self).setDialogComponent(SetMaxHeightDlg, {
-                  model: self,
-                })
+                getSession(self).queueDialog((doneCallback: Function) => [
+                  SetMaxHeightDlg,
+                  { model: self, handleClose: doneCallback },
+                ])
               },
             },
           ]

package/src/LinearGenomeView/components/ExportSvgDialog.tsx

@@ -31,11 +31,11 @@ export default function ExportSvgDlg({
   model: LGV
   handleClose: () => void
 }) {
-  const [rasterizeLayers, setRasterizeLayers] = useState(
-    typeof OffscreenCanvas !== 'undefined',
-  )
+  // @ts-ignore
+  const offscreenCanvas = typeof OffscreenCanvas !== 'undefined'
+  const [rasterizeLayers, setRasterizeLayers] = useState(offscreenCanvas)
   const [loading, setLoading] = useState(false)
-  const [error, setError] = useState<Error>()
+  const [error, setError] = useState<unknown>()
   const classes = useStyles()
   return (
     <Dialog open onClose={handleClose}>
@@ -54,8 +54,7 @@ export default function ExportSvgDlg({
             <Typography display="inline">Creating SVG</Typography>
           </div>
         ) : null}
-
-        {typeof OffscreenCanvas !== 'undefined' ? (
+        {offscreenCanvas ? (
           <FormControlLabel
             control={
               <Checkbox
@@ -91,6 +90,7 @@ export default function ExportSvgDlg({
               await model.exportSvg({ rasterizeLayers })
               handleClose()
             } catch (e) {
+              console.error(e)
               setError(e)
             } finally {
               setLoading(false)

package/src/LinearGenomeView/components/Header.tsx

@@ -1,20 +1,28 @@
-import { getSession } from '@jbrowse/core/util'
-import Button from '@material-ui/core/Button'
-import { makeStyles, useTheme } from '@material-ui/core/styles'
-import { alpha } from '@material-ui/core/styles'
-import FormGroup from '@material-ui/core/FormGroup'
-import Typography from '@material-ui/core/Typography'
-import { observer } from 'mobx-react'
 import React from 'react'
+import { observer } from 'mobx-react'
+import { getSession } from '@jbrowse/core/util'
+import {
+  Button,
+  FormGroup,
+  Typography,
+  makeStyles,
+  useTheme,
+  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'
 import ArrowForwardIcon from '@material-ui/icons/ArrowForward'
 import ArrowBackIcon from '@material-ui/icons/ArrowBack'
+
+// locals
 import { LinearGenomeViewModel, HEADER_BAR_HEIGHT } from '..'
 import RefNameAutocomplete from './RefNameAutocomplete'
 import OverviewScaleBar from './OverviewScaleBar'
 import ZoomControls from './ZoomControls'
+import { dedupe } from './util'
 
 const WIDGET_HEIGHT = 32
 const SPACING = 7
@@ -107,93 +115,63 @@ const LinearGenomeViewHeader = observer(
     const classes = useStyles()
     const theme = useTheme()
     const session = getSession(model)
-    const { assemblyManager, textSearchManager } = session
-    const {
-      coarseDynamicBlocks: contentBlocks,
-      displayedRegions,
-      rankSearchResults,
-    } = model
-    const { assemblyName, refName } = contentBlocks[0] || { refName: '' }
-    const assembly = assemblyName
-      ? assemblyManager.get(assemblyName)
-      : undefined
-    const regions = assembly?.regions || []
+
+    const { textSearchManager, assemblyManager } = session
+    const { assemblyNames, rankSearchResults } = model
+    const assemblyName = assemblyNames[0]
+    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 results?.filter(
-        (elem, index, self) =>
-          index === self.findIndex(t => t.getId() === elem.getId()),
+
+      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(),
       )
     }
 
-    /**
-     * 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 the single hit location or pop open the the dialog with all
-     *  the results from the search
-     *  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 result - result chosen from dropdown
-     */
-    async function setDisplayedRegion(result: BaseResult) {
-      if (result) {
-        const label = result.getLabel()
-        const newRegion = regions.find(region => label === region.refName)
-        if (newRegion) {
-          model.setDisplayedRegions([newRegion])
-          // we use showAllRegions after setDisplayedRegions to make the entire
-          // region visible, xref #1703
-          model.showAllRegions()
+    async function handleSelectedRegion(option: BaseResult) {
+      let trackId = option.getTrackId()
+      let location = option.getLocation()
+      const label = option.getLabel()
+      try {
+        if (assembly?.allRefNames?.includes(location)) {
+          model.navToLocString(location)
         } else {
-          let location = result.getLocation()
-          let trackId = result.getTrackId()
-          const results = await fetchResults(label)
+          const results = await fetchResults(label, 'exact')
           if (results && results.length > 1) {
             model.setSearchResults(results, label.toLowerCase())
-          } else {
-            if (results?.length === 1) {
-              location = results[0].getLocation()
-              trackId = results[0].getTrackId()
-            }
-            try {
-              label !== '' && model.navToLocString(location)
-            } catch (e) {
-              if (`${e}` === `Error: Unknown reference sequence "${label}"`) {
-                model.setSearchResults(results, label.toLowerCase())
-              } 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}`,
-              )
-            }
+            return
+          } else if (results?.length === 1) {
+            location = results[0].getLocation()
+            trackId = results[0].getTrackId()
+          }
+
+          model.navToLocString(location, assemblyName)
+          if (trackId) {
+            model.showTrack(trackId)
           }
         }
+      } catch (e) {
+        console.error(e)
+        session.notify(`${e}`, 'warning')
       }
     }
 
@@ -204,9 +182,9 @@ const LinearGenomeViewHeader = observer(
         <FormGroup row className={classes.headerForm}>
           <PanControls model={model} />
           <RefNameAutocomplete
-            onSelect={setDisplayedRegion}
+            onSelect={handleSelectedRegion}
             assemblyName={assemblyName}
-            value={displayedRegions.length > 1 ? '' : refName}
+            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>
+  )
+}