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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-linear-genome-view",
-  "version": "1.4.4",
+  "version": "1.5.0",
   "description": "JBrowse 2 linear genome view",
   "keywords": [
     "jbrowse",
@@ -61,5 +61,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "c12a2b1cef07dbc5ea40be5c76e03b655b7f3636"
+  "gitHead": "542025578a39bd170c8a166f2568ee7edbd54072"
 }

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/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,27 @@
-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'
 
+// 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,17 +114,11 @@ 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) {
@@ -132,68 +133,34 @@ const LinearGenomeViewHeader = observer(
         searchScope,
         rankSearchResults,
       )
-      return results?.filter(
-        (elem, index, self) =>
-          index === self.findIndex(t => t.getId() === elem.getId()),
-      )
+      return dedupe(results)
     }
 
-    /**
-     * 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?.refNames?.includes(location)) {
+          model.navToLocString(location)
         } else {
-          let location = result.getLocation()
-          let trackId = result.getTrackId()
           const results = await fetchResults(label)
           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 +171,8 @@ const LinearGenomeViewHeader = observer(
         <FormGroup row className={classes.headerForm}>
           <PanControls model={model} />
           <RefNameAutocomplete
-            onSelect={setDisplayedRegion}
+            onSelect={handleSelectedRegion}
             assemblyName={assemblyName}
-            value={displayedRegions.length > 1 ? '' : refName}
             model={model}
             TextFieldProps={{
               variant: 'outlined',