@apollo-annotation/jbrowse-plugin-apollo 0.3.7 → 0.3.8

package/src/LinearApolloDisplay/glyphs/GeneGlyph.ts

@@ -1,25 +1,34 @@
 import { type AnnotationFeature } from '@apollo-annotation/mst'
+import { readConfObject } from '@jbrowse/core/configuration'
+import { type BaseDisplayModel } from '@jbrowse/core/pluggableElementTypes'
 import { type MenuItem } from '@jbrowse/core/ui'
 import {
   type AbstractSessionModel,
+  getContainingView,
   getFrame,
   intersection2,
   isSessionModelWithWidgets,
 } from '@jbrowse/core/util'
+import { type LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
+import SkipNextRoundedIcon from '@mui/icons-material/SkipNextRounded'
+import SkipPreviousRoundedIcon from '@mui/icons-material/SkipPreviousRounded'
 import { alpha } from '@mui/material'
 
 import { type OntologyRecord } from '../../OntologyManager'
 import { MergeExons, MergeTranscripts, SplitExon } from '../../components'
 import { type ApolloSessionModel } from '../../session'
-import { getMinAndMaxPx, getOverlappingEdge } from '../../util'
-import { getFeaturesUnderClick } from '../../util/annotationFeatureUtils'
-import { type LinearApolloDisplay } from '../stateModel'
 import {
-  type LinearApolloDisplayMouseEvents,
   type MousePosition,
-  type MousePositionWithFeatureAndGlyph,
-  isMousePositionWithFeatureAndGlyph,
-} from '../stateModel/mouseEvents'
+  type MousePositionWithFeature,
+  containsSelectedFeature,
+  getMinAndMaxPx,
+  getOverlappingEdge,
+  isMousePositionWithFeature,
+  navToFeatureCenter,
+} from '../../util'
+import { getRelatedFeatures } from '../../util/annotationFeatureUtils'
+import { type LinearApolloDisplay } from '../stateModel'
+import { type LinearApolloDisplayMouseEvents } from '../stateModel/mouseEvents'
 import { type LinearApolloDisplayRendering } from '../stateModel/rendering'
 import { type CanvasMouseEvent } from '../types'
 
@@ -77,52 +86,102 @@ if (canvas?.getContext) {
   }
 }
 
-function draw(
+function drawBackground(
   ctx: CanvasRenderingContext2D,
   feature: AnnotationFeature,
-  row: number,
   stateModel: LinearApolloDisplayRendering,
   displayedRegionIndex: number,
-): void {
-  const { apolloRowHeight, lgv, session, theme } = stateModel
+  row: number,
+  color: string,
+) {
+  const { apolloRowHeight, lgv, session } = stateModel
   const { bpPerPx, displayedRegions, offsetPx } = lgv
   const displayedRegion = displayedRegions[displayedRegionIndex]
   const { refName, reversed } = displayedRegion
-  const rowHeight = apolloRowHeight
-  const cdsHeight = Math.round(0.9 * rowHeight)
-  const { children, min, strand } = feature
-  if (!children) {
-    return
-  }
-  const { apolloSelectedFeature } = session
   const { apolloDataStore } = session
   const { featureTypeOntology } = apolloDataStore.ontologyManager
   if (!featureTypeOntology) {
     throw new Error('featureTypeOntology is undefined')
   }
 
-  // Draw background for gene
   const topLevelFeatureMinX =
     (lgv.bpToPx({
       refName,
-      coord: min,
+      coord: feature.min,
       regionNumber: displayedRegionIndex,
     })?.offsetPx ?? 0) - offsetPx
   const topLevelFeatureWidthPx = feature.length / bpPerPx
   const topLevelFeatureStartPx = reversed
     ? topLevelFeatureMinX - topLevelFeatureWidthPx
     : topLevelFeatureMinX
-  const topLevelFeatureTop = row * rowHeight
+  const topLevelFeatureTop = row * apolloRowHeight
   const topLevelFeatureHeight =
-    getRowCount(feature, featureTypeOntology) * rowHeight
+    getRowCount(feature, featureTypeOntology) * apolloRowHeight
 
-  ctx.fillStyle = alpha(theme?.palette.background.paper ?? '#ffffff', 0.6)
+  ctx.fillStyle = color
   ctx.fillRect(
     topLevelFeatureStartPx,
     topLevelFeatureTop,
     topLevelFeatureWidthPx,
     topLevelFeatureHeight,
   )
+}
+
+function backgroundColorForFeature(
+  session: ApolloSessionModel,
+  featureType: string,
+): string {
+  const color = readConfObject(
+    session.getPluginConfiguration(),
+    'backgroundColorForFeature',
+    { featureType },
+  ) as string
+  return color
+}
+
+function draw(
+  ctx: CanvasRenderingContext2D,
+  feature: AnnotationFeature,
+  row: number,
+  stateModel: LinearApolloDisplayRendering,
+  displayedRegionIndex: number,
+): void {
+  const { apolloRowHeight, lgv, selectedFeature, session, theme } = stateModel
+  const { bpPerPx, displayedRegions, offsetPx } = lgv
+  const displayedRegion = displayedRegions[displayedRegionIndex]
+  const { refName, reversed } = displayedRegion
+  const rowHeight = apolloRowHeight
+  const cdsHeight = Math.round(0.9 * rowHeight)
+  const { children, strand } = feature
+  if (!children) {
+    return
+  }
+  const { apolloDataStore } = session
+  const { featureTypeOntology } = apolloDataStore.ontologyManager
+  if (!featureTypeOntology) {
+    throw new Error('featureTypeOntology is undefined')
+  }
+
+  // Draw background for gene
+  drawBackground(
+    ctx,
+    feature,
+    stateModel,
+    displayedRegionIndex,
+    row,
+    alpha(theme.palette.background.paper, 0.6),
+  )
+
+  if (featureTypeOntology.isTypeOf(feature.type, 'pseudogene')) {
+    drawBackground(
+      ctx,
+      feature,
+      stateModel,
+      displayedRegionIndex,
+      row,
+      backgroundColorForFeature(session, 'pseudogenic_transcript'),
+    )
+  }
 
   // Draw lines on different rows for each transcript
   let currentRow = 0
@@ -140,6 +199,29 @@ function draw(
     }
 
     const cdsCount = getCDSCount(transcript, featureTypeOntology)
+    if (cdsCount === 0) {
+      drawBackground(
+        ctx,
+        transcript,
+        stateModel,
+        displayedRegionIndex,
+        currentRow,
+        backgroundColorForFeature(session, 'nonCodingTranscript'),
+      )
+    }
+    if (
+      featureTypeOntology.isTypeOf(transcript.type, 'pseudogenic_transcript')
+    ) {
+      drawBackground(
+        ctx,
+        transcript,
+        stateModel,
+        displayedRegionIndex,
+        currentRow,
+        backgroundColorForFeature(session, 'pseudogenic_transcript'),
+      )
+    }
+
     for (const [, childFeature] of transcriptChildren) {
       if (!featureTypeOntology.isTypeOf(childFeature.type, 'CDS')) {
         continue
@@ -169,9 +251,9 @@ function draw(
   }
 
   const forwardFill =
-    theme?.palette.mode === 'dark' ? forwardFillDark : forwardFillLight
+    theme.palette.mode === 'dark' ? forwardFillDark : forwardFillLight
   const backwardFill =
-    theme?.palette.mode === 'dark' ? backwardFillDark : backwardFillLight
+    theme.palette.mode === 'dark' ? backwardFillDark : backwardFillLight
   // Draw exon and CDS for each transcript
   currentRow = 0
   for (const [, child] of children) {
@@ -188,7 +270,7 @@ function draw(
     const cdsCount = getCDSCount(child, featureTypeOntology)
     if (cdsCount != 0) {
       for (const cdsRow of child.cdsLocations) {
-        const { _id, children: transcriptChildren } = child
+        const { children: transcriptChildren } = child
         if (!transcriptChildren) {
           continue
         }
@@ -217,7 +299,7 @@ function draw(
               regionNumber: displayedRegionIndex,
             })?.offsetPx ?? 0) - offsetPx
           const cdsStartPx = reversed ? minX - cdsWidthPx : minX
-          ctx.fillStyle = theme?.palette.text.primary ?? 'black'
+          ctx.fillStyle = theme.palette.text.primary
           const cdsTop =
             (row + currentRow) * rowHeight + (rowHeight - cdsHeight) / 2
           ctx.fillRect(cdsStartPx, cdsTop, cdsWidthPx, cdsHeight)
@@ -234,12 +316,8 @@ function draw(
               child.strand ?? 1,
               cds.phase,
             )
-            const frameColor = theme?.palette.framesCDS.at(frame)?.main
-            const cdsColorCode = frameColor ?? 'rgb(171,71,188)'
-            ctx.fillStyle =
-              apolloSelectedFeature && _id === apolloSelectedFeature._id
-                ? 'rgb(0,0,0)'
-                : cdsColorCode
+            const frameColor = theme.palette.framesCDS.at(frame)?.main
+            ctx.fillStyle = frameColor ?? 'black'
             ctx.fillRect(
               cdsStartPx + 1,
               cdsTop + 1,
@@ -295,6 +373,9 @@ function draw(
       currentRow += 1
     }
   }
+  if (selectedFeature && containsSelectedFeature(feature, selectedFeature)) {
+    drawHighlight(stateModel, ctx, selectedFeature, true)
+  }
 }
 
 function drawExon(
@@ -308,11 +389,10 @@ function drawExon(
   forwardFill: CanvasPattern | null,
   backwardFill: CanvasPattern | null,
 ) {
-  const { apolloRowHeight, lgv, session, theme } = stateModel
+  const { apolloRowHeight, lgv, theme } = stateModel
   const { bpPerPx, displayedRegions, offsetPx } = lgv
   const displayedRegion = displayedRegions[displayedRegionIndex]
   const { refName, reversed } = displayedRegion
-  const { apolloSelectedFeature } = session
 
   const minX =
     (lgv.bpToPx({
@@ -326,14 +406,11 @@ function drawExon(
   const top = (row + currentRow) * apolloRowHeight
   const exonHeight = Math.round(0.6 * apolloRowHeight)
   const exonTop = top + (apolloRowHeight - exonHeight) / 2
-  ctx.fillStyle = theme?.palette.text.primary ?? 'black'
+  ctx.fillStyle = theme.palette.text.primary
   ctx.fillRect(startPx, exonTop, widthPx, exonHeight)
   if (widthPx > 2) {
     ctx.clearRect(startPx + 1, exonTop + 1, widthPx - 2, exonHeight - 2)
-    ctx.fillStyle =
-      apolloSelectedFeature && exon._id === apolloSelectedFeature._id
-        ? 'rgb(0,0,0)'
-        : 'rgb(211,211,211)'
+    ctx.fillStyle = 'rgb(211,211,211)'
     ctx.fillRect(startPx + 1, exonTop + 1, widthPx - 2, exonHeight - 2)
     if (forwardFill && backwardFill && strand) {
       const reversal = reversed ? -1 : 1
@@ -354,6 +431,21 @@ function drawExon(
   }
 }
 
+function* range(start: number, stop: number, step = 1): Generator<number> {
+  if (start === stop) {
+    return
+  }
+  if (start < stop) {
+    for (let i = start; i < stop; i += step) {
+      yield i
+    }
+    return
+  }
+  for (let i = start; i > stop; i -= step) {
+    yield i
+  }
+}
+
 function drawLine(
   ctx: CanvasRenderingContext2D,
   stateModel: LinearApolloDisplayRendering,
@@ -372,14 +464,33 @@ function drawLine(
       coord: transcript.min,
       regionNumber: displayedRegionIndex,
     })?.offsetPx ?? 0) - offsetPx
-  const widthPx = transcript.length / bpPerPx
+  const widthPx = Math.round(transcript.length / bpPerPx)
   const startPx = reversed ? minX - widthPx : minX
   const height =
     Math.round((currentRow + 1 / 2) * apolloRowHeight) + row * apolloRowHeight
-  ctx.strokeStyle = theme?.palette.text.primary ?? 'black'
+  ctx.strokeStyle = theme.palette.text.primary
+  const { strand = 1 } = transcript
   ctx.beginPath()
-  ctx.moveTo(startPx, height)
-  ctx.lineTo(startPx + widthPx, height)
+  // Draw the transcript line, and extend it out a bit on the 3` end
+  const lineStart = startPx - (strand === -1 ? 5 : 0)
+  const lineEnd = startPx + widthPx + (strand === -1 ? 0 : 5)
+  ctx.moveTo(lineStart, height)
+  ctx.lineTo(lineEnd, height)
+  // Now to draw arrows every 20 pixels along the line
+  // Make the arrow range a bit shorter to avoid an arrow hanging off the 5` end
+  const arrowsStart = lineStart + (strand === -1 ? 0 : 3)
+  const arrowsEnd = lineEnd - (strand === -1 ? 3 : 0)
+  // Offset determines if the arrows face left or right
+  const offset = strand === -1 ? 3 : -3
+  const arrowRange =
+    strand === -1
+      ? range(arrowsStart, arrowsEnd, 20)
+      : range(arrowsEnd, arrowsStart, 20)
+  for (const arrowLocation of arrowRange) {
+    ctx.moveTo(arrowLocation + offset, height + offset)
+    ctx.lineTo(arrowLocation, height)
+    ctx.lineTo(arrowLocation + offset, height - offset)
+  }
   ctx.stroke()
 }
 
@@ -405,24 +516,22 @@ function drawDragPreview(
   const rectY = row * apolloRowHeight
   const rectWidth = Math.abs(current.x - featureEdgePx)
   const rectHeight = apolloRowHeight * rowCount
-  overlayCtx.strokeStyle = theme?.palette.info.main ?? 'rgb(255,0,0)'
+  overlayCtx.strokeStyle = theme.palette.info.main
   overlayCtx.setLineDash([6])
   overlayCtx.strokeRect(rectX, rectY, rectWidth, rectHeight)
-  overlayCtx.fillStyle = alpha(theme?.palette.info.main ?? 'rgb(255,0,0)', 0.2)
+  overlayCtx.fillStyle = alpha(theme.palette.info.main, 0.2)
   overlayCtx.fillRect(rectX, rectY, rectWidth, rectHeight)
 }
 
-function drawHover(
-  stateModel: LinearApolloDisplay,
+function drawHighlight(
+  stateModel: LinearApolloDisplayRendering,
   ctx: CanvasRenderingContext2D,
+  feature: AnnotationFeature,
+  selected = false,
 ) {
-  const { apolloHover, apolloRowHeight, lgv, session, theme } = stateModel
+  const { apolloRowHeight, lgv, session, theme } = stateModel
   const { featureTypeOntology } = session.apolloDataStore.ontologyManager
 
-  if (!apolloHover) {
-    return
-  }
-  const { feature } = apolloHover
   const position = stateModel.getFeatureLayoutPosition(feature)
   if (!position) {
     return
@@ -441,7 +550,9 @@ function drawHover(
   const row = layoutRow + featureRow
   const top = row * apolloRowHeight
   const widthPx = length / bpPerPx
-  ctx.fillStyle = theme?.palette.action.selected ?? 'rgba(0,0,0,04)'
+  ctx.fillStyle = selected
+    ? theme.palette.action.disabled
+    : theme.palette.action.focus
 
   if (!featureTypeOntology) {
     throw new Error('featureTypeOntology is undefined')
@@ -454,6 +565,18 @@ function drawHover(
   )
 }
 
+function drawHover(
+  stateModel: LinearApolloDisplay,
+  ctx: CanvasRenderingContext2D,
+) {
+  const { hoveredFeature } = stateModel
+
+  if (!hoveredFeature) {
+    return
+  }
+  drawHighlight(stateModel, ctx, hoveredFeature.feature)
+}
+
 function getFeatureFromLayout(
   feature: AnnotationFeature,
   bp: number,
@@ -613,15 +736,53 @@ function getRowForFeature(
   return
 }
 
+function selectFeatureAndOpenWidget(
+  stateModel: LinearApolloDisplayMouseEvents,
+  feature: AnnotationFeature,
+) {
+  if (stateModel.apolloDragging) {
+    return
+  }
+  stateModel.setSelectedFeature(feature)
+  const { session } = stateModel
+  const { apolloDataStore } = session
+  const { featureTypeOntology } = apolloDataStore.ontologyManager
+  if (!featureTypeOntology) {
+    throw new Error('featureTypeOntology is undefined')
+  }
+
+  let containsCDSOrExon = false
+  for (const [, child] of feature.children ?? []) {
+    if (
+      featureTypeOntology.isTypeOf(child.type, 'CDS') ||
+      featureTypeOntology.isTypeOf(child.type, 'exon')
+    ) {
+      containsCDSOrExon = true
+      break
+    }
+  }
+  if (
+    (featureTypeOntology.isTypeOf(feature.type, 'transcript') ||
+      featureTypeOntology.isTypeOf(feature.type, 'pseudogenic_transcript')) &&
+    containsCDSOrExon
+  ) {
+    stateModel.showFeatureDetailsWidget(feature, [
+      'ApolloTranscriptDetails',
+      'apolloTranscriptDetails',
+    ])
+  } else {
+    stateModel.showFeatureDetailsWidget(feature)
+  }
+}
+
 function onMouseDown(
   stateModel: LinearApolloDisplay,
-  currentMousePosition: MousePositionWithFeatureAndGlyph,
+  currentMousePosition: MousePositionWithFeature,
   event: CanvasMouseEvent,
 ) {
-  const { featureAndGlyphUnderMouse } = currentMousePosition
+  const { feature } = currentMousePosition
   // swallow the mouseDown if we are on the edge of the feature so that we
   // don't start dragging the view if we try to drag the feature edge
-  const { feature } = featureAndGlyphUnderMouse
   const draggableFeature = getDraggableFeatureInfo(
     currentMousePosition,
     feature,
@@ -642,10 +803,9 @@ function onMouseMove(
   stateModel: LinearApolloDisplay,
   mousePosition: MousePosition,
 ) {
-  if (isMousePositionWithFeatureAndGlyph(mousePosition)) {
-    const { featureAndGlyphUnderMouse } = mousePosition
-    stateModel.setApolloHover(featureAndGlyphUnderMouse)
-    const { feature } = featureAndGlyphUnderMouse
+  if (isMousePositionWithFeature(mousePosition)) {
+    const { feature, bp } = mousePosition
+    stateModel.setHoveredFeature({ feature, bp })
     const draggableFeature = getDraggableFeatureInfo(
       mousePosition,
       feature,
@@ -666,41 +826,11 @@ function onMouseUp(
   if (stateModel.apolloDragging) {
     return
   }
-  const { featureAndGlyphUnderMouse } = mousePosition
-  if (!featureAndGlyphUnderMouse) {
+  const { feature } = mousePosition
+  if (!feature) {
     return
   }
-  const { feature } = featureAndGlyphUnderMouse
-  stateModel.setSelectedFeature(feature)
-  const { session } = stateModel
-  const { apolloDataStore } = session
-  const { featureTypeOntology } = apolloDataStore.ontologyManager
-  if (!featureTypeOntology) {
-    throw new Error('featureTypeOntology is undefined')
-  }
-
-  let containsCDSOrExon = false
-  for (const [, child] of feature.children ?? []) {
-    if (
-      featureTypeOntology.isTypeOf(child.type, 'CDS') ||
-      featureTypeOntology.isTypeOf(child.type, 'exon')
-    ) {
-      containsCDSOrExon = true
-      break
-    }
-  }
-  if (
-    (featureTypeOntology.isTypeOf(feature.type, 'transcript') ||
-      featureTypeOntology.isTypeOf(feature.type, 'pseudogenic_transcript')) &&
-    containsCDSOrExon
-  ) {
-    stateModel.showFeatureDetailsWidget(feature, [
-      'ApolloTranscriptDetails',
-      'apolloTranscriptDetails',
-    ])
-  } else {
-    stateModel.showFeatureDetailsWidget(feature)
-  }
+  selectFeatureAndOpenWidget(stateModel, feature)
 }
 
 function getDraggableFeatureInfo(
@@ -805,13 +935,102 @@ function isCDSFeature(
   return featureTypeOntology.isTypeOf(feature.type, 'CDS')
 }
 
+interface AdjacentExons {
+  upstream: AnnotationFeature | undefined
+  downstream: AnnotationFeature | undefined
+}
+
+function getAdjacentExons(
+  currentExon: AnnotationFeature,
+  display: LinearApolloDisplayMouseEvents,
+  mousePosition: MousePositionWithFeature,
+  session: ApolloSessionModel,
+): AdjacentExons {
+  const lgv = getContainingView(
+    display as BaseDisplayModel,
+  ) as unknown as LinearGenomeViewModel
+
+  // Genomic coords of current view
+  const viewGenomicLeft = mousePosition.bp - lgv.bpPerPx * mousePosition.x
+  const viewGenomicRight = viewGenomicLeft + lgv.coarseTotalBp
+  if (!currentExon.parent) {
+    return { upstream: undefined, downstream: undefined }
+  }
+  const transcript = currentExon.parent
+  if (!transcript.children) {
+    throw new Error(`Error getting children of ${transcript._id}`)
+  }
+  const { featureTypeOntology } = session.apolloDataStore.ontologyManager
+  if (!featureTypeOntology) {
+    throw new Error('featureTypeOntology is undefined')
+  }
+
+  let exons = []
+  for (const [, child] of transcript.children) {
+    if (featureTypeOntology.isTypeOf(child.type, 'exon')) {
+      exons.push(child)
+    }
+  }
+  const adjacentExons: AdjacentExons = {
+    upstream: undefined,
+    downstream: undefined,
+  }
+  exons = exons.sort((a, b) => (a.min < b.min ? -1 : 1))
+  for (const exon of exons) {
+    if (exon.min > viewGenomicRight) {
+      adjacentExons.downstream = exon
+      break
+    }
+  }
+  exons = exons.sort((a, b) => (a.min > b.min ? -1 : 1))
+  for (const exon of exons) {
+    if (exon.max < viewGenomicLeft) {
+      adjacentExons.upstream = exon
+      break
+    }
+  }
+  if (transcript.strand === -1) {
+    const newUpstream = adjacentExons.downstream
+    adjacentExons.downstream = adjacentExons.upstream
+    adjacentExons.upstream = newUpstream
+  }
+  return adjacentExons
+}
+
+function getStreamIcon(
+  strand: 1 | -1 | undefined,
+  isUpstream: boolean,
+  isFlipped: boolean | undefined,
+) {
+  // This is the icon you would use for strand=1, downstream, straight
+  // (non-flipped) view
+  let icon = SkipNextRoundedIcon
+
+  if (strand === -1) {
+    icon = SkipPreviousRoundedIcon
+  }
+  if (isUpstream) {
+    icon =
+      icon === SkipPreviousRoundedIcon
+        ? SkipNextRoundedIcon
+        : SkipPreviousRoundedIcon
+  }
+  if (isFlipped) {
+    icon =
+      icon === SkipPreviousRoundedIcon
+        ? SkipNextRoundedIcon
+        : SkipPreviousRoundedIcon
+  }
+  return icon
+}
+
 function getContextMenuItems(
   display: LinearApolloDisplayMouseEvents,
-  mousePosition: MousePositionWithFeatureAndGlyph,
+  mousePosition: MousePositionWithFeature,
 ): MenuItem[] {
   const {
     apolloInternetAccount: internetAccount,
-    apolloHover,
+    hoveredFeature,
     changeManager,
     regions,
     selectedFeature,
@@ -822,53 +1041,120 @@ function getContextMenuItems(
   const menuItems: MenuItem[] = []
   const role = internetAccount ? internetAccount.role : 'admin'
   const admin = role === 'admin'
-  if (!apolloHover) {
+  if (!hoveredFeature) {
     return menuItems
   }
 
-  let featuresUnderClick = getFeaturesUnderClick(mousePosition)
-  if (isCDSFeature(mousePosition.featureAndGlyphUnderMouse.feature, session)) {
-    featuresUnderClick = getFeaturesUnderClick(mousePosition, true)
-  }
+  if (isMousePositionWithFeature(mousePosition)) {
+    const { bp, feature } = mousePosition
+    let featuresUnderClick = getRelatedFeatures(feature, bp)
+    if (isCDSFeature(feature, session)) {
+      featuresUnderClick = getRelatedFeatures(feature, bp, true)
+    }
 
-  for (const feature of featuresUnderClick) {
-    const contextMenuItemsForFeature = boxGlyph.getContextMenuItemsForFeature(
-      display,
-      feature,
-    )
-    if (isExonFeature(feature, session)) {
-      contextMenuItemsForFeature.push(
-        {
-          label: 'Merge exons',
-          disabled: !admin,
-          onClick: () => {
-            ;(session as unknown as AbstractSessionModel).queueDialog(
-              (doneCallback) => [
-                MergeExons,
-                {
-                  session,
-                  handleClose: () => {
-                    doneCallback()
+    for (const feature of featuresUnderClick) {
+      const contextMenuItemsForFeature = boxGlyph.getContextMenuItemsForFeature(
+        display,
+        feature,
+      )
+      if (isExonFeature(feature, session)) {
+        const adjacentExons = getAdjacentExons(
+          feature,
+          display,
+          mousePosition,
+          session,
+        )
+        const lgv = getContainingView(
+          display as BaseDisplayModel,
+        ) as unknown as LinearGenomeViewModel
+        if (adjacentExons.upstream) {
+          const exon = adjacentExons.upstream
+          contextMenuItemsForFeature.push({
+            label: 'Go to upstream exon',
+            icon: getStreamIcon(
+              feature.strand,
+              true,
+              lgv.displayedRegions.at(0)?.reversed,
+            ),
+            onClick: () => {
+              lgv.navTo(navToFeatureCenter(exon, 0.1, lgv.totalBp))
+              selectFeatureAndOpenWidget(display, exon)
+            },
+          })
+        }
+        if (adjacentExons.downstream) {
+          const exon = adjacentExons.downstream
+          contextMenuItemsForFeature.push({
+            label: 'Go to downstream exon',
+            icon: getStreamIcon(
+              feature.strand,
+              false,
+              lgv.displayedRegions.at(0)?.reversed,
+            ),
+            onClick: () => {
+              lgv.navTo(navToFeatureCenter(exon, 0.1, lgv.totalBp))
+              selectFeatureAndOpenWidget(display, exon)
+            },
+          })
+        }
+        contextMenuItemsForFeature.push(
+          {
+            label: 'Merge exons',
+            disabled: !admin,
+            onClick: () => {
+              ;(session as unknown as AbstractSessionModel).queueDialog(
+                (doneCallback) => [
+                  MergeExons,
+                  {
+                    session,
+                    handleClose: () => {
+                      doneCallback()
+                    },
+                    changeManager,
+                    sourceFeature: feature,
+                    sourceAssemblyId: currentAssemblyId,
+                    selectedFeature,
+                    setSelectedFeature: (feature?: AnnotationFeature) => {
+                      display.setSelectedFeature(feature)
+                    },
                   },
-                  changeManager,
-                  sourceFeature: feature,
-                  sourceAssemblyId: currentAssemblyId,
-                  selectedFeature,
-                  setSelectedFeature: (feature?: AnnotationFeature) => {
-                    display.setSelectedFeature(feature)
+                ],
+              )
+            },
+          },
+          {
+            label: 'Split exon',
+            disabled: !admin,
+            onClick: () => {
+              ;(session as unknown as AbstractSessionModel).queueDialog(
+                (doneCallback) => [
+                  SplitExon,
+                  {
+                    session,
+                    handleClose: () => {
+                      doneCallback()
+                    },
+                    changeManager,
+                    sourceFeature: feature,
+                    sourceAssemblyId: currentAssemblyId,
+                    selectedFeature,
+                    setSelectedFeature: (feature?: AnnotationFeature) => {
+                      display.setSelectedFeature(feature)
+                    },
                   },
-                },
-              ],
-            )
+                ],
+              )
+            },
           },
-        },
-        {
-          label: 'Split exon',
-          disabled: !admin,
+        )
+      }
+      if (isTranscriptFeature(feature, session)) {
+        contextMenuItemsForFeature.push({
+          label: 'Merge transcript',
           onClick: () => {
             ;(session as unknown as AbstractSessionModel).queueDialog(
               (doneCallback) => [
-                SplitExon,
+                MergeTranscripts,
                 {
                   session,
                   handleClose: () => {
@@ -885,56 +1171,31 @@ function getContextMenuItems(
               ],
             )
           },
-        },
-      )
-    }
-    if (isTranscriptFeature(feature, session)) {
-      contextMenuItemsForFeature.push({
-        label: 'Merge transcript',
-        onClick: () => {
-          ;(session as unknown as AbstractSessionModel).queueDialog(
-            (doneCallback) => [
-              MergeTranscripts,
-              {
-                session,
-                handleClose: () => {
-                  doneCallback()
-                },
-                changeManager,
-                sourceFeature: feature,
-                sourceAssemblyId: currentAssemblyId,
-                selectedFeature,
-                setSelectedFeature: (feature?: AnnotationFeature) => {
-                  display.setSelectedFeature(feature)
-                },
-              },
-            ],
-          )
-        },
-      })
-      if (isSessionModelWithWidgets(session)) {
-        contextMenuItemsForFeature.push({
-          label: 'Open transcript details',
-          onClick: () => {
-            const apolloTranscriptWidget = session.addWidget(
-              'ApolloTranscriptDetails',
-              'apolloTranscriptDetails',
-              {
-                feature,
-                assembly: currentAssemblyId,
-                changeManager,
-                refName: region.refName,
-              },
-            )
-            session.showWidget(apolloTranscriptWidget)
-          },
         })
+        if (isSessionModelWithWidgets(session)) {
+          contextMenuItemsForFeature.push({
+            label: 'Open transcript details',
+            onClick: () => {
+              const apolloTranscriptWidget = session.addWidget(
+                'ApolloTranscriptDetails',
+                'apolloTranscriptDetails',
+                {
+                  feature,
+                  assembly: currentAssemblyId,
+                  changeManager,
+                  refName: region.refName,
+                },
+              )
+              session.showWidget(apolloTranscriptWidget)
+            },
+          })
+        }
       }
+      menuItems.push({
+        label: feature.type,
+        subMenu: contextMenuItemsForFeature,
+      })
     }
-    menuItems.push({
-      label: feature.type,
-      subMenu: contextMenuItemsForFeature,
-    })
   }
   return menuItems
 }