Adds URL query param for highlight on LGV

plugins/grid-bookmark/src/GridBookmarkWidget/components/Highlight/Highlight.tsx

@@ -3,12 +3,12 @@ import { observer } from 'mobx-react'
 import { makeStyles } from 'tss-react/mui'
 import { SessionWithWidgets, getSession, notEmpty } from '@jbrowse/core/util'
 import { colord } from '@jbrowse/core/util/colord'
+import { Tooltip } from '@mui/material'
 
 // icons
 import BookmarkIcon from '@mui/icons-material/Bookmark'
 
 // locals
-import { Tooltip } from '@mui/material'
 import { GridBookmarkModel } from '../../model'
 import { IExtendedLGV } from '../../model'
 

plugins/linear-genome-view/src/LaunchLinearGenomeView/index.ts

@@ -1,5 +1,5 @@
 import PluginManager from '@jbrowse/core/PluginManager'
-import { AbstractSessionModel, when } from '@jbrowse/core/util'
+import { AbstractSessionModel, when, parseLocString } from '@jbrowse/core/util'
 // locals
 import { LinearGenomeViewModel } from '../LinearGenomeView'
 import { handleSelectedRegion } from '../searchUtils'
@@ -17,16 +17,21 @@ export default (pluginManager: PluginManager) => {
       tracks = [],
       tracklist,
       nav,
+      highlight,
     }: {
       session: AbstractSessionModel
       assembly?: string
       loc: string
       tracks?: string[]
       tracklist?: boolean
       nav?: boolean
+      highlight?: string
     }) => {
       try {
         const { assemblyManager } = session
+
+        const { isValidRefName } = assemblyManager
+
         const view = session.addView('LinearGenomeView', {}) as LGV
 
         await when(() => !!view.volatileWidth)
@@ -59,6 +64,16 @@ export default (pluginManager: PluginManager) => {
         if (nav !== undefined) {
           view.setHideHeader(!nav)
         }
+        if (highlight !== undefined) {
+          const location = parseLocString(highlight, refName =>
+            isValidRefName(refName, assembly),
+          )
+          if (location?.start && location?.end) {
+            location.assemblyName = assembly
+
+            view.setHighlight(location)
+          }
+        }
       } catch (e) {
         session.notify(`${e}`, 'error')
         throw e

plugins/linear-genome-view/src/LinearGenomeView/components/Highlight.tsx

@@ -0,0 +1,88 @@
+import React from 'react'
+import { observer } from 'mobx-react'
+import { makeStyles } from 'tss-react/mui'
+import { colord } from '@jbrowse/core/util/colord'
+import { Tooltip } from '@mui/material'
+
+// icons
+import LinkIcon from '@mui/icons-material/Link'
+
+// locals
+import { LinearGenomeViewModel } from '../model'
+
+type LGV = LinearGenomeViewModel
+
+const useStyles = makeStyles()({
+  highlight: {
+    height: '100%',
+    position: 'absolute',
+    textAlign: 'center',
+    overflow: 'hidden',
+    display: 'flex',
+    alignItems: 'start',
+  },
+})
+
+interface ParsedLocStringA {
+  assemblyName: string
+  refName: string
+  start: number
+  end: number
+  reversed: boolean
+}
+
+const Highlight = observer(function Highlight({ model }: { model: LGV }) {
+  const { classes } = useStyles()
+
+  if (!model.highlight) {
+    return
+  }
+
+  // coords
+  const mapCoords = (r: ParsedLocStringA) => {
+    const s = model.bpToPx({
+      refName: r.refName,
+      coord: r.start,
+    })
+    const e = model.bpToPx({
+      refName: r.refName,
+      coord: r.end,
+    })
+    return s && e
+      ? {
+          width: Math.max(Math.abs(e.offsetPx - s.offsetPx), 3),
+          left: Math.min(s.offsetPx, e.offsetPx) - model.offsetPx,
+        }
+      : undefined
+  }
+
+  const h = mapCoords(model.highlight)
+  const color = 'rgba(252, 186, 3, 0.35)'
+
+  return (
+    <>
+      {h ? (
+        <div
+          key={`${h.left}_${h.width}`}
+          className={classes.highlight}
+          style={{ left: h.left, width: h.width, background: color }}
+        >
+          <Tooltip title={'Highlighted from URL parameter'} arrow>
+            <LinkIcon
+              fontSize="small"
+              sx={{
+                color: `${
+                  colord(color).alpha() !== 0
+                    ? colord(color).alpha(0.8).toRgbString()
+                    : colord(color).alpha(0).toRgbString()
+                }`,
+              }}
+            />
+          </Tooltip>
+        </div>
+      ) : null}
+    </>
+  )
+})
+
+export default Highlight

plugins/linear-genome-view/src/LinearGenomeView/components/TracksContainer.tsx

@@ -15,6 +15,7 @@ import Gridlines from './Gridlines'
 import CenterLine from './CenterLine'
 import VerticalGuide from './VerticalGuide'
 import RubberbandSpan from './RubberbandSpan'
+import Highlight from './Highlight'
 
 const useStyles = makeStyles()({
   tracksContainer: {
@@ -107,6 +108,7 @@ const TracksContainer = observer(function TracksContainer({
           />
         }
       />
+      <Highlight model={model} />
       {additional}
       {children}
     </div>

plugins/linear-genome-view/src/LinearGenomeView/model.ts

@@ -243,6 +243,12 @@ export function stateModelFactory(pluginManager: PluginManager) {
          * show the "gridlines" in the track area
          */
         showGridlines: true,
+
+        /**
+         * #property
+         * highlights on the LGV from the URL parameters
+         */
+        highlight: types.optional(types.frozen(), ''),
       }),
     )
     .volatile(() => ({
@@ -581,6 +587,12 @@ export function stateModelFactory(pluginManager: PluginManager) {
       setShowGridlines(b: boolean) {
         self.showGridlines = b
       },
+      /**
+       * #action
+       */
+      setHighlight(highlight: ParsedLocString) {
+        self.highlight = highlight
+      },
       /**
        * #action
        */

products/jbrowse-web/src/SessionLoader.ts

@@ -29,6 +29,7 @@ const SessionLoader = types
     assembly: types.maybe(types.string),
     tracks: types.maybe(types.string),
     tracklist: types.maybe(types.boolean),
+    highlight: types.maybe(types.string),
     nav: types.maybe(types.boolean),
     initialTimestamp: types.number,
   })
@@ -285,6 +286,7 @@ const SessionLoader = types
         assembly,
         tracklist,
         nav,
+        highlight,
         sessionTracksParsed: sessionTracks,
       } = self
       if (loc) {
@@ -299,6 +301,7 @@ const SessionLoader = types
               assembly,
               tracklist,
               nav,
+              highlight,
             },
           ],
         }

products/jbrowse-web/src/components/Loader.tsx

@@ -48,6 +48,7 @@ export function Loader({
   const [sessionTracks, setSessionTracks] = useQueryParam('sessionTracks', Str)
   const [assembly, setAssembly] = useQueryParam('assembly', Str)
   const [tracks, setTracks] = useQueryParam('tracks', Str)
+  const [highlight, setHighlight] = useQueryParam('highlight', Str)
   const [nav, setNav] = useQueryParam('nav', Str)
   const [tracklist, setTrackList] = useQueryParam('tracklist', Str)
 
@@ -61,6 +62,7 @@ export function Loader({
     tracks: normalize(tracks),
     sessionTracks: normalize(sessionTracks),
     tracklist: JSON.parse(normalize(tracklist) || 'false'),
+    highlight: normalize(highlight),
     nav: JSON.parse(normalize(nav) || 'true'),
     initialTimestamp,
   })
@@ -73,6 +75,7 @@ export function Loader({
     setSessionTracks(undefined, 'replaceIn')
     setTrackList(undefined, 'replaceIn')
     setNav(undefined, 'replaceIn')
+    setHighlight(undefined, 'replaceIn')
   }, [
     setAssembly,
     setLoc,
@@ -81,6 +84,7 @@ export function Loader({
     setTracks,
     setPassword,
     setSessionTracks,
+    setHighlight,
   ])
 
   return <Renderer loader={loader} />