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

package/src/LinearApolloDisplay/glyphs/GeneGlyph.ts

@@ -1,14 +1,34 @@
 import { type AnnotationFeature } from '@apollo-annotation/mst'
-import { getFrame, intersection2 } from '@jbrowse/core/util'
+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 { type LinearApolloDisplay } from '../stateModel'
+import { MergeExons, MergeTranscripts, SplitExon } from '../../components'
+import { type ApolloSessionModel } from '../../session'
 import {
   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'
 
@@ -19,7 +39,10 @@ let forwardFillLight: CanvasPattern | null = null
 let backwardFillLight: CanvasPattern | null = null
 let forwardFillDark: CanvasPattern | null = null
 let backwardFillDark: CanvasPattern | null = null
-if ('document' in globalThis) {
+const canvas = globalThis.document.createElement('canvas')
+// @ts-expect-error getContext is undefined in the web worker
+// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+if (canvas?.getContext) {
   for (const direction of ['forward', 'backward']) {
     for (const themeMode of ['light', 'dark']) {
       const canvas = document.createElement('canvas')
@@ -63,52 +86,102 @@ if ('document' in globalThis) {
   }
 }
 
-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
@@ -126,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
@@ -155,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) {
@@ -174,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
         }
@@ -203,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)
@@ -220,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,
@@ -281,6 +373,9 @@ function draw(
       currentRow += 1
     }
   }
+  if (selectedFeature && containsSelectedFeature(feature, selectedFeature)) {
+    drawHighlight(stateModel, ctx, selectedFeature, true)
+  }
 }
 
 function drawExon(
@@ -294,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({
@@ -312,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
@@ -340,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,
@@ -358,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()
 }
 
@@ -391,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
@@ -427,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')
@@ -440,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,
@@ -599,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,
@@ -619,6 +794,7 @@ function onMouseDown(
       currentMousePosition,
       draggableFeature.feature,
       draggableFeature.edge,
+      true,
     )
   }
 }
@@ -627,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,
@@ -651,10 +826,11 @@ function onMouseUp(
   if (stateModel.apolloDragging) {
     return
   }
-  const { featureAndGlyphUnderMouse } = mousePosition
-  if (featureAndGlyphUnderMouse?.feature) {
-    stateModel.setSelectedFeature(featureAndGlyphUnderMouse.feature)
+  const { feature } = mousePosition
+  if (!feature) {
+    return
   }
+  selectFeatureAndOpenWidget(stateModel, feature)
 }
 
 function getDraggableFeatureInfo(
@@ -674,31 +850,18 @@ function getDraggableFeatureInfo(
   const isTranscript =
     featureTypeOntology.isTypeOf(feature.type, 'transcript') ||
     featureTypeOntology.isTypeOf(feature.type, 'pseudogenic_transcript')
-  const isCds = featureTypeOntology.isTypeOf(feature.type, 'CDS')
+  const isCDS = featureTypeOntology.isTypeOf(feature.type, 'CDS')
   if (isGene || isTranscript) {
+    // For gene glyphs, the sizes of genes and transcripts are determined by
+    // their child exons, so we don't make them draggable
     return
   }
+  // So now the type of feature is either CDS or exon. If an exon and CDS edge
+  // are in the same place, we want to prioritize dragging the exon. If the
+  // feature we're on is a CDS, let's find any exon it may overlap.
   const { bp, refName, regionNumber, x } = mousePosition
   const { lgv } = stateModel
-  const { offsetPx } = lgv
-
-  const minPxInfo = lgv.bpToPx({ refName, coord: feature.min, regionNumber })
-  const maxPxInfo = lgv.bpToPx({ refName, coord: feature.max, regionNumber })
-  if (minPxInfo === undefined || maxPxInfo === undefined) {
-    return
-  }
-  const minPx = minPxInfo.offsetPx - offsetPx
-  const maxPx = maxPxInfo.offsetPx - offsetPx
-  if (Math.abs(maxPx - minPx) < 8) {
-    return
-  }
-  if (Math.abs(minPx - x) < 4) {
-    return { feature, edge: 'min' }
-  }
-  if (Math.abs(maxPx - x) < 4) {
-    return { feature, edge: 'max' }
-  }
-  if (isCds) {
+  if (isCDS) {
     const transcript = feature.parent
     if (!transcript?.children) {
       return
@@ -710,46 +873,336 @@ function getDraggableFeatureInfo(
         exonChildren.push(child)
       }
     }
-
     const overlappingExon = exonChildren.find((child) => {
       const [start, end] = intersection2(bp - 1, bp, child.min, child.max)
       return start !== undefined && end !== undefined
     })
+    if (overlappingExon) {
+      // We are on an exon, are we on the edge of it?
+      const minMax = getMinAndMaxPx(overlappingExon, refName, regionNumber, lgv)
+      if (minMax) {
+        const overlappingEdge = getOverlappingEdge(overlappingExon, x, minMax)
+        if (overlappingEdge) {
+          return overlappingEdge
+        }
+      }
+    }
+  }
+  // End of special cases, let's see if we're on the edge of this CDS or exon
+  const minMax = getMinAndMaxPx(feature, refName, regionNumber, lgv)
+  if (minMax) {
+    const overlappingEdge = getOverlappingEdge(feature, x, minMax)
+    if (overlappingEdge) {
+      return overlappingEdge
+    }
+  }
+  return
+}
 
-    if (!overlappingExon) {
-      return
+function isTranscriptFeature(
+  feature: AnnotationFeature,
+  session: ApolloSessionModel,
+): boolean {
+  const { featureTypeOntology } = session.apolloDataStore.ontologyManager
+  if (!featureTypeOntology) {
+    throw new Error('featureTypeOntology is undefined')
+  }
+  return (
+    featureTypeOntology.isTypeOf(feature.type, 'transcript') ||
+    featureTypeOntology.isTypeOf(feature.type, 'pseudogenic_transcript')
+  )
+}
+
+function isExonFeature(
+  feature: AnnotationFeature,
+  session: ApolloSessionModel,
+): boolean {
+  const { featureTypeOntology } = session.apolloDataStore.ontologyManager
+  if (!featureTypeOntology) {
+    throw new Error('featureTypeOntology is undefined')
+  }
+  return featureTypeOntology.isTypeOf(feature.type, 'exon')
+}
+
+function isCDSFeature(
+  feature: AnnotationFeature,
+  session: ApolloSessionModel,
+): boolean {
+  const { featureTypeOntology } = session.apolloDataStore.ontologyManager
+  if (!featureTypeOntology) {
+    throw new Error('featureTypeOntology is undefined')
+  }
+  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 minPxInfo = lgv.bpToPx({
-      refName,
-      coord: overlappingExon.min,
-      regionNumber,
-    })
-    const maxPxInfo = lgv.bpToPx({
-      refName,
-      coord: overlappingExon.max,
-      regionNumber,
-    })
-    if (minPxInfo === undefined || maxPxInfo === undefined) {
-      return
+  }
+  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
     }
-    const minPx = minPxInfo.offsetPx - offsetPx
-    const maxPx = maxPxInfo.offsetPx - offsetPx
-    if (Math.abs(maxPx - minPx) < 8) {
-      return
+  }
+  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 (Math.abs(minPx - x) < 4) {
-      return { feature: overlappingExon, edge: 'min' }
+  }
+  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: MousePositionWithFeature,
+): MenuItem[] {
+  const {
+    apolloInternetAccount: internetAccount,
+    hoveredFeature,
+    changeManager,
+    regions,
+    selectedFeature,
+    session,
+  } = display
+  const [region] = regions
+  const currentAssemblyId = display.getAssemblyId(region.assemblyName)
+  const menuItems: MenuItem[] = []
+  const role = internetAccount ? internetAccount.role : 'admin'
+  const admin = role === 'admin'
+  if (!hoveredFeature) {
+    return menuItems
+  }
+
+  if (isMousePositionWithFeature(mousePosition)) {
+    const { bp, feature } = mousePosition
+    let featuresUnderClick = getRelatedFeatures(feature, bp)
+    if (isCDSFeature(feature, session)) {
+      featuresUnderClick = getRelatedFeatures(feature, bp, true)
     }
-    if (Math.abs(maxPx - x) < 4) {
-      return { feature: overlappingExon, edge: 'max' }
+
+    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)
+                    },
+                  },
+                ],
+              )
+            },
+          },
+          {
+            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)
+                    },
+                  },
+                ],
+              )
+            },
+          },
+        )
+      }
+      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)
+            },
+          })
+        }
+      }
+      menuItems.push({
+        label: feature.type,
+        subMenu: contextMenuItemsForFeature,
+      })
     }
   }
-  return
+  return menuItems
 }
 
 // False positive here, none of these functions use "this"
 /* eslint-disable @typescript-eslint/unbound-method */
-const { drawTooltip, getContextMenuItems, onMouseLeave } = boxGlyph
+const { drawTooltip, getContextMenuItemsForFeature, onMouseLeave } = boxGlyph
 /* eslint-enable @typescript-eslint/unbound-method */
 
 export const geneGlyph: Glyph = {
@@ -758,6 +1211,7 @@ export const geneGlyph: Glyph = {
   drawHover,
   drawTooltip,
   getContextMenuItems,
+  getContextMenuItemsForFeature,
   getFeatureFromLayout,
   getRowCount,
   getRowForFeature,