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

package/src/LinearApolloSixFrameDisplay/glyphs/GeneGlyph.ts

@@ -2,27 +2,41 @@ import {
   type AnnotationFeature,
   type TranscriptPartCoding,
 } from '@apollo-annotation/mst'
+import { type BaseDisplayModel } from '@jbrowse/core/pluggableElementTypes'
 import { type MenuItem } from '@jbrowse/core/ui'
 import {
   type AbstractSessionModel,
+  getContainingView,
   getFrame,
   intersection2,
   measureText,
 } from '@jbrowse/core/util'
+import { type LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
 import { alpha } from '@mui/material'
 import equal from 'fast-deep-equal/es6'
 import { getSnapshot } from 'mobx-state-tree'
 
-import { AddChildFeature, CopyFeature, DeleteFeature } from '../../components'
+import { MergeExons, SplitExon } from '../../components'
 import { FilterTranscripts } from '../../components/FilterTranscripts'
-import { getMinAndMaxPx, getOverlappingEdge } from '../../util'
-import { type LinearApolloSixFrameDisplay } from '../stateModel'
 import {
-  type LinearApolloSixFrameDisplayMouseEvents,
   type MousePosition,
-  type MousePositionWithFeatureAndGlyph,
-  isMousePositionWithFeatureAndGlyph,
-} from '../stateModel/mouseEvents'
+  type MousePositionWithFeature,
+  getAdjacentExons,
+  getContextMenuItemsForFeature,
+  getMinAndMaxPx,
+  getOverlappingEdge,
+  getRelatedFeatures,
+  getStreamIcon,
+  isCDSFeature,
+  isExonFeature,
+  isMousePositionWithFeature,
+  // isTranscriptFeature,
+  isSelectedFeature,
+  navToFeatureCenter,
+  selectFeatureAndOpenWidget,
+} from '../../util'
+import { type LinearApolloSixFrameDisplay } from '../stateModel'
+import { type LinearApolloSixFrameDisplayMouseEvents } from '../stateModel/mouseEvents'
 import { type LinearApolloSixFrameDisplayRendering } from '../stateModel/rendering'
 import { type CanvasMouseEvent } from '../types'
 
@@ -105,14 +119,14 @@ function drawTextLabels(
   for (let i = labelArray.length - 1; i >= 0; --i) {
     const label = labelArray[i]
     ctx.fillStyle = label.color
-    const labelRowX = Math.max(label.x + 1, 0)
+    const labelRowX = label.x + 1
     const labelRowY = label.y + label.h
     const textWidth = measureText(label.text, 10)
     if (label.isSelected) {
-      ctx.clearRect(labelRowX - 5, labelRowY, textWidth + 10, label.h)
       ctx.font = 'bold '.concat(font)
     }
     if (label.text) {
+      ctx.clearRect(labelRowX - 5, labelRowY, textWidth + 10, label.h)
       ctx.fillText(label.text, labelRowX, labelRowY + 11, textWidth)
       ctx.font = font
     }
@@ -133,6 +147,7 @@ function draw(
     theme,
     highestRow,
     filteredTranscripts,
+    selectedFeature,
     showFeatureLabels,
   } = stateModel
   const { bpPerPx, displayedRegions, offsetPx } = lgv
@@ -143,12 +158,11 @@ function draw(
   const cdsHeight = rowHeight
   const topLevelFeatureHeight = rowHeight
   const featureLabelSpacer = showFeatureLabels ? 2 : 1
-  const textColor = theme?.palette.text.primary ?? 'black'
+  const textColor = theme.palette.text.primary
   const { attributes, children, min, strand } = topLevelFeature
   if (!children) {
     return
   }
-  const { apolloSelectedFeature } = session
   const { apolloDataStore } = session
   const { featureTypeOntology } = apolloDataStore.ontologyManager
   if (!featureTypeOntology) {
@@ -169,7 +183,7 @@ function draw(
     : topLevelFeatureMinX
   const topLevelRow = (strand == 1 ? 3 : 4) * featureLabelSpacer
   const topLevelFeatureTop = topLevelRow * rowHeight
-  ctx.fillStyle = theme?.palette.text.primary ?? 'black'
+  ctx.fillStyle = theme.palette.text.primary
   ctx.fillRect(
     topLevelFeatureStartPx,
     topLevelFeatureTop,
@@ -177,9 +191,9 @@ function draw(
     topLevelFeatureHeight,
   )
 
-  ctx.fillStyle = isSelectedFeature(topLevelFeature, apolloSelectedFeature)
+  ctx.fillStyle = isSelectedFeature(topLevelFeature, selectedFeature)
     ? alpha('rgb(0,0,0)', 0.7)
-    : alpha(theme?.palette.background.paper ?? '#ffffff', 0.7)
+    : alpha(theme.palette.background.paper, 0.7)
   ctx.fillRect(
     topLevelFeatureStartPx + 1,
     topLevelFeatureTop + 1,
@@ -187,7 +201,7 @@ function draw(
     topLevelFeatureHeight - 2,
   )
 
-  const isSelected = isSelectedFeature(topLevelFeature, apolloSelectedFeature)
+  const isSelected = isSelectedFeature(topLevelFeature, selectedFeature)
   const label: Label = {
     x: topLevelFeatureStartPx,
     y: topLevelFeatureTop,
@@ -203,9 +217,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
   const reversal = reversed ? -1 : 1
   let topFill: CanvasPattern | null = null,
     bottomFill: CanvasPattern | null = null
@@ -269,8 +283,8 @@ function draw(
 
       const exonTop =
         topLevelFeatureTop + (topLevelFeatureHeight - exonHeight) / 2
-      const isSelected = isSelectedFeature(exon, apolloSelectedFeature)
-      ctx.fillStyle = theme?.palette.text.primary ?? 'black'
+      const isSelected = isSelectedFeature(exon, selectedFeature)
+      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)
@@ -309,7 +323,7 @@ function draw(
       }
     }
 
-    const isSelected = isSelectedFeature(child, apolloSelectedFeature?.parent)
+    const isSelected = isSelectedFeature(child, selectedFeature?.parent)
     let cdsStartPx = 0
     let cdsTop = 0
     for (const cdsRow of cdsLocations) {
@@ -318,9 +332,9 @@ function draw(
       let counter = 1
       for (const cds of cdsRow.sort((a, b) => a.max - b.max)) {
         if (
-          (apolloSelectedFeature &&
+          (selectedFeature &&
             isSelected &&
-            featureTypeOntology.isTypeOf(apolloSelectedFeature.type, 'CDS')) ||
+            featureTypeOntology.isTypeOf(selectedFeature.type, 'CDS')) ||
           !deepSetHas(renderedCDS, cds)
         ) {
           const cdsWidthPx = (cds.max - cds.min) / bpPerPx
@@ -331,12 +345,36 @@ function draw(
               regionNumber: displayedRegionIndex,
             })?.offsetPx ?? 0) - offsetPx
           cdsStartPx = reversed ? minX - cdsWidthPx : minX
-          ctx.fillStyle = theme?.palette.text.primary ?? 'black'
+          ctx.fillStyle = theme.palette.text.primary
           const frame = getFrame(cds.min, cds.max, child.strand ?? 1, cds.phase)
           const frameAdjust =
             (frame < 0 ? -1 * frame + 5 : frame) * featureLabelSpacer
           cdsTop = (frameAdjust - featureLabelSpacer) * rowHeight
           ctx.fillRect(cdsStartPx, cdsTop, cdsWidthPx, cdsHeight)
+
+          // Draw lines to connect CDS features with shared mRNA parent
+          if (counter > 1) {
+            // Mid-point for intron line "hat"
+            const midPoint: [number, number] = [
+              (cdsStartPx - prevCDSEndPx) / 2 + prevCDSEndPx,
+              Math.max(
+                frame < 0 ? rowHeight * featureLabelSpacer * highestRow + 1 : 1, // Avoid render ceiling
+                Math.min(prevCDSTop, cdsTop) - rowHeight / 2,
+              ),
+            ]
+            ctx.strokeStyle = 'rgb(0, 128, 128)'
+            ctx.beginPath()
+            ctx.moveTo(prevCDSEndPx, prevCDSTop)
+            ctx.lineTo(...midPoint)
+            ctx.stroke()
+            ctx.moveTo(...midPoint)
+            ctx.lineTo(cdsStartPx, cdsTop + rowHeight / 2)
+            ctx.stroke()
+          }
+          prevCDSEndPx = cdsStartPx + cdsWidthPx
+          prevCDSTop = cdsTop + rowHeight / 2
+          counter += 1
+
           if (cdsWidthPx > 2) {
             ctx.clearRect(
               cdsStartPx + 1,
@@ -345,13 +383,13 @@ function draw(
               cdsHeight - 2,
             )
 
-            const frameColor = theme?.palette.framesCDS.at(frame)?.main
+            const frameColor = theme.palette.framesCDS.at(frame)?.main
             const cdsColorCode = frameColor ?? 'rgb(171,71,188)'
             ctx.fillStyle = cdsColorCode
             ctx.fillStyle =
-              apolloSelectedFeature &&
+              selectedFeature &&
               isSelected &&
-              featureTypeOntology.isTypeOf(apolloSelectedFeature.type, 'CDS')
+              featureTypeOntology.isTypeOf(selectedFeature.type, 'CDS')
                 ? 'rgb(0,0,0)'
                 : cdsColorCode
             ctx.fillRect(
@@ -361,31 +399,6 @@ function draw(
               cdsHeight - 2,
             )
 
-            // Draw lines to connect CDS features with shared mRNA parent
-            if (counter > 1) {
-              // Mid-point for intron line "hat"
-              const midPoint: [number, number] = [
-                (cdsStartPx - prevCDSEndPx) / 2 + prevCDSEndPx,
-                Math.max(
-                  frame < 0
-                    ? rowHeight * featureLabelSpacer * highestRow + 1
-                    : 1, // Avoid render ceiling
-                  Math.min(prevCDSTop, cdsTop) - rowHeight / 2,
-                ),
-              ]
-              ctx.strokeStyle = 'rgb(0, 128, 128)'
-              ctx.beginPath()
-              ctx.moveTo(prevCDSEndPx, prevCDSTop)
-              ctx.lineTo(...midPoint)
-              ctx.stroke()
-              ctx.moveTo(...midPoint)
-              ctx.lineTo(cdsStartPx, cdsTop + rowHeight / 2)
-              ctx.stroke()
-            }
-            prevCDSEndPx = cdsStartPx + cdsWidthPx
-            prevCDSTop = cdsTop + rowHeight / 2
-            counter += 1
-
             if (topFill && bottomFill) {
               ctx.fillStyle = topFill
               ctx.fillRect(
@@ -448,10 +461,10 @@ 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)
 }
 
@@ -460,7 +473,7 @@ function drawHover(
   ctx: CanvasRenderingContext2D,
 ) {
   const {
-    apolloHover,
+    hoveredFeature,
     apolloRowHeight,
     filteredTranscripts,
     lgv,
@@ -468,15 +481,15 @@ function drawHover(
     session,
     showFeatureLabels,
   } = stateModel
-  if (!apolloHover) {
+  if (!hoveredFeature) {
     return
   }
+  const { feature } = hoveredFeature
   const { apolloDataStore } = session
   const { featureTypeOntology } = apolloDataStore.ontologyManager
   if (!featureTypeOntology) {
     throw new Error('featureTypeOntology is undefined')
   }
-  const { feature } = apolloHover
   if (!featureTypeOntology.isTypeOf(feature.type, 'transcript')) {
     return
   }
@@ -504,43 +517,42 @@ function drawHover(
     let counter = 1
     for (const cds of cdsRow.sort((a, b) => a.max - b.max)) {
       const cdsWidthPx = (cds.max - cds.min) / bpPerPx
+      const minX =
+        (lgv.bpToPx({
+          refName,
+          coord: cds.min,
+          regionNumber: layoutIndex,
+        })?.offsetPx ?? 0) - offsetPx
+      const cdsStartPx = reversed ? minX - cdsWidthPx : minX
+      const frame = getFrame(cds.min, cds.max, strand ?? 1, cds.phase)
+      const frameAdjust =
+        (frame < 0 ? -1 * frame + 5 : frame) * featureLabelSpacer
+      const cdsTop = (frameAdjust - featureLabelSpacer) * rowHeight
+      if (counter > 1) {
+        // Mid-point for intron line "hat"
+        const midPoint: [number, number] = [
+          (cdsStartPx - prevCDSEndPx) / 2 + prevCDSEndPx,
+          Math.max(
+            frame < 0 ? rowHeight * featureLabelSpacer * highestRow + 1 : 1, // Avoid render ceiling
+            Math.min(prevCDSTop, cdsTop) - rowHeight / 2,
+          ),
+        ]
+        ctx.strokeStyle = 'rgb(0, 0, 0)'
+        ctx.lineWidth = 2
+        ctx.beginPath()
+        ctx.moveTo(prevCDSEndPx, prevCDSTop)
+        ctx.lineTo(...midPoint)
+        ctx.stroke()
+        ctx.moveTo(...midPoint)
+        ctx.lineTo(cdsStartPx, cdsTop + rowHeight / 2)
+        ctx.stroke()
+      }
+      prevCDSEndPx = cdsStartPx + cdsWidthPx
+      prevCDSTop = cdsTop + rowHeight / 2
+      counter += 1
       if (cdsWidthPx > 2) {
-        const minX =
-          (lgv.bpToPx({
-            refName,
-            coord: cds.min,
-            regionNumber: layoutIndex,
-          })?.offsetPx ?? 0) - offsetPx
-        const cdsStartPx = reversed ? minX - cdsWidthPx : minX
-        const frame = getFrame(cds.min, cds.max, strand ?? 1, cds.phase)
-        const frameAdjust =
-          (frame < 0 ? -1 * frame + 5 : frame) * featureLabelSpacer
-        const cdsTop = (frameAdjust - featureLabelSpacer) * rowHeight
         ctx.fillStyle = 'rgba(255,0,0,0.6)'
         ctx.fillRect(cdsStartPx, cdsTop, cdsWidthPx, cdsHeight)
-
-        if (counter > 1) {
-          // Mid-point for intron line "hat"
-          const midPoint: [number, number] = [
-            (cdsStartPx - prevCDSEndPx) / 2 + prevCDSEndPx,
-            Math.max(
-              frame < 0 ? rowHeight * featureLabelSpacer * highestRow + 1 : 1, // Avoid render ceiling
-              Math.min(prevCDSTop, cdsTop) - rowHeight / 2,
-            ),
-          ]
-          ctx.strokeStyle = 'rgb(0, 0, 0)'
-          ctx.lineWidth = 2
-          ctx.beginPath()
-          ctx.moveTo(prevCDSEndPx, prevCDSTop)
-          ctx.lineTo(...midPoint)
-          ctx.stroke()
-          ctx.moveTo(...midPoint)
-          ctx.lineTo(cdsStartPx, cdsTop + rowHeight / 2)
-          ctx.stroke()
-        }
-        prevCDSEndPx = cdsStartPx + cdsWidthPx
-        prevCDSTop = cdsTop + rowHeight / 2
-        counter += 1
       }
     }
   }
@@ -548,16 +560,14 @@ function drawHover(
 
 function onMouseDown(
   stateModel: LinearApolloSixFrameDisplay,
-  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 { cds, feature } = featureAndGlyphUnderMouse
   const draggableFeature = getDraggableFeatureInfo(
     currentMousePosition,
-    cds,
     feature,
     stateModel,
   )
@@ -576,13 +586,11 @@ function onMouseMove(
   stateModel: LinearApolloSixFrameDisplay,
   mousePosition: MousePosition,
 ) {
-  if (isMousePositionWithFeatureAndGlyph(mousePosition)) {
-    const { featureAndGlyphUnderMouse } = mousePosition
-    stateModel.setApolloHover(featureAndGlyphUnderMouse)
-    const { cds, feature } = featureAndGlyphUnderMouse
+  if (isMousePositionWithFeature(mousePosition)) {
+    const { feature, bp } = mousePosition
+    stateModel.setHoveredFeature({ feature, bp })
     const draggableFeature = getDraggableFeatureInfo(
       mousePosition,
-      cds,
       feature,
       stateModel,
     )
@@ -601,53 +609,43 @@ function onMouseUp(
   if (stateModel.apolloDragging) {
     return
   }
-  const { featureAndGlyphUnderMouse } = mousePosition
-  const { session } = stateModel
-  const { apolloDataStore } = session
-  const { featureTypeOntology } = apolloDataStore.ontologyManager
-  if (!featureAndGlyphUnderMouse) {
-    return
-  }
-  const { feature } = featureAndGlyphUnderMouse
-  stateModel.setSelectedFeature(feature)
-  if (!featureTypeOntology) {
-    throw new Error('featureTypeOntology is undefined')
-  }
+  if (isMousePositionWithFeature(mousePosition)) {
+    const { feature } = mousePosition
+    const { session } = stateModel
+    const { apolloDataStore } = session
+    const { featureTypeOntology } = apolloDataStore.ontologyManager
+    stateModel.setSelectedFeature(feature)
+    if (!featureTypeOntology) {
+      throw new Error('featureTypeOntology is undefined')
+    }
 
-  let containsCDSOrExon = false
-  for (const [, child] of feature.children ?? []) {
+    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(child.type, 'CDS') ||
-      featureTypeOntology.isTypeOf(child.type, 'exon')
+      (featureTypeOntology.isTypeOf(feature.type, 'transcript') ||
+        featureTypeOntology.isTypeOf(feature.type, 'pseudogenic_transcript')) &&
+      containsCDSOrExon
     ) {
-      containsCDSOrExon = true
-      break
+      stateModel.showFeatureDetailsWidget(feature, [
+        'ApolloTranscriptDetails',
+        'apolloTranscriptDetails',
+      ])
+    } else {
+      stateModel.showFeatureDetailsWidget(feature)
     }
   }
-  if (
-    (featureTypeOntology.isTypeOf(feature.type, 'transcript') ||
-      featureTypeOntology.isTypeOf(feature.type, 'pseudogenic_transcript')) &&
-    containsCDSOrExon
-  ) {
-    stateModel.showFeatureDetailsWidget(feature, [
-      'ApolloTranscriptDetails',
-      'apolloTranscriptDetails',
-    ])
-  } else {
-    stateModel.showFeatureDetailsWidget(feature)
-  }
-}
-
-export function isSelectedFeature(
-  feature: AnnotationFeature,
-  selectedFeature: AnnotationFeature | undefined,
-) {
-  return Boolean(selectedFeature && feature._id === selectedFeature._id)
 }
 
 function getDraggableFeatureInfo(
   mousePosition: MousePosition,
-  cds: TranscriptPartCoding | null,
   feature: AnnotationFeature,
   stateModel: LinearApolloSixFrameDisplay,
 ): { feature: AnnotationFeature; edge: 'min' | 'max' } | undefined {
@@ -658,9 +656,6 @@ function getDraggableFeatureInfo(
     throw new Error('featureTypeOntology is undefined')
   }
   const isTranscript = featureTypeOntology.isTypeOf(feature.type, 'transcript')
-  if (cds === null) {
-    return
-  }
   const featureID: string | undefined = feature.attributes
     .get('gff_id')
     ?.toString()
@@ -700,16 +695,24 @@ function getDraggableFeatureInfo(
       }
     }
     // End of special cases, let's see if we're on the edge of this CDS or exon
-    const minMax = getMinAndMaxPx(cds, refName, regionNumber, lgv)
-    if (minMax) {
-      const overlappingCDS = cdsChildren.find((child) => {
-        const [start, end] = intersection2(bp, bp + 1, child.min, child.max)
-        return start !== undefined && end !== undefined
-      })
-      if (overlappingCDS) {
-        const overlappingEdge = getOverlappingEdge(overlappingCDS, x, minMax)
-        if (overlappingEdge) {
-          return overlappingEdge
+    for (const loc of transcript.cdsLocations) {
+      for (const cds of loc) {
+        const minMax = getMinAndMaxPx(cds, refName, regionNumber, lgv)
+        if (minMax) {
+          const overlappingCDS = cdsChildren.find((child) => {
+            const [start, end] = intersection2(bp, bp + 1, child.min, child.max)
+            return start !== undefined && end !== undefined
+          })
+          if (overlappingCDS) {
+            const overlappingEdge = getOverlappingEdge(
+              overlappingCDS,
+              x,
+              minMax,
+            )
+            if (overlappingEdge) {
+              return overlappingEdge
+            }
+          }
         }
       }
     }
@@ -721,22 +724,33 @@ function drawTooltip(
   display: LinearApolloSixFrameDisplayMouseEvents,
   context: CanvasRenderingContext2D,
 ): void {
-  const { apolloHover, apolloRowHeight, filteredTranscripts, lgv, theme } =
-    display
-  if (!apolloHover) {
+  const {
+    hoveredFeature,
+    apolloRowHeight,
+    filteredTranscripts,
+    lgv,
+    session,
+    showFeatureLabels,
+    theme,
+  } = display
+  if (!hoveredFeature) {
     return
   }
-  const { cds, feature } = apolloHover
-  if (!cds) {
+  const { feature, bp } = hoveredFeature
+  const { featureTypeOntology } = session.apolloDataStore.ontologyManager
+  if (!featureTypeOntology) {
+    throw new Error('featureTypeOntology is undefined')
+  }
+  const isTranscript = featureTypeOntology.isTypeOf(feature.type, 'transcript')
+  if (!isTranscript) {
     return
   }
+  const { attributes, strand, type } = feature
   const position = display.getFeatureLayoutPosition(feature)
   if (!position) {
     return
   }
-  const featureID: string | undefined = feature.attributes
-    .get('gff_id')
-    ?.toString()
+  const featureID: string | undefined = attributes.get('gff_id')?.toString()
   if (featureID && filteredTranscripts.includes(featureID)) {
     return
   }
@@ -746,9 +760,20 @@ function drawTooltip(
   const { refName, reversed } = displayedRegion
   const rowHeight = apolloRowHeight
   const cdsHeight = Math.round(0.7 * rowHeight)
+  const featureLabelSpacer = showFeatureLabels ? 2 : 1
   let location = 'Loc: '
-
-  const { strand } = feature
+  let cds: TranscriptPartCoding | undefined = undefined
+  for (const loc of feature.cdsLocations) {
+    for (const cdsLoc of loc) {
+      if (bp >= cdsLoc.min && bp <= cdsLoc.max) {
+        cds = cdsLoc
+        break
+      }
+    }
+  }
+  if (!cds) {
+    return
+  }
   const { max, min, phase } = cds
   location += `${min + 1}–${max}`
 
@@ -759,12 +784,12 @@ function drawTooltip(
       regionNumber: layoutIndex,
     })?.offsetPx ?? 0) - offsetPx
   const frame = getFrame(min, max, strand ?? 1, phase)
-  const frameAdjust = frame < 0 ? -1 * frame + 5 : frame
-  const cdsTop = (frameAdjust - 1) * rowHeight + (rowHeight - cdsHeight) / 2
+  const frameAdjust = (frame < 0 ? -1 * frame + 5 : frame) * featureLabelSpacer
+  const cdsTop =
+    (frameAdjust - featureLabelSpacer) * rowHeight + (rowHeight - cdsHeight) / 2
   const cdsWidthPx = (max - min) / bpPerPx
 
   const featureType = `Type: ${cds.type}`
-  const { attributes } = feature
   const featureName = attributes.get('gff_name')?.find((name) => name !== '')
   const textWidth = [
     context.measureText(featureType).width,
@@ -772,14 +797,14 @@ function drawTooltip(
   ]
   if (featureName) {
     textWidth.push(
-      context.measureText(`Parent Type: ${feature.type}`).width,
+      context.measureText(`Parent Type: ${type}`).width,
       context.measureText(`Parent Name: ${featureName}`).width,
     )
   }
   const maxWidth = Math.max(...textWidth)
 
   startPx = startPx + cdsWidthPx + 5
-  context.fillStyle = alpha(theme?.palette.text.primary ?? 'rgb(1, 1, 1)', 0.7)
+  context.fillStyle = alpha(theme.palette.text.primary, 0.7)
   context.fillRect(
     startPx,
     cdsTop,
@@ -791,12 +816,12 @@ function drawTooltip(
   context.lineTo(startPx - 5, cdsTop + 5)
   context.lineTo(startPx, cdsTop + 10)
   context.fill()
-  context.fillStyle = theme?.palette.background.default ?? 'rgba(255, 255, 255)'
+  context.fillStyle = theme.palette.background.default
   let textTop = cdsTop + 12
   context.fillText(featureType, startPx + 2, textTop)
   if (featureName) {
     textTop = textTop + 12
-    context.fillText(`Parent Type: ${feature.type}`, startPx + 2, textTop)
+    context.fillText(`Parent Type: ${type}`, startPx + 2, textTop)
     textTop = textTop + 12
     context.fillText(`Parent Name: ${featureName}`, startPx + 2, textTop)
   }
@@ -806,119 +831,165 @@ function drawTooltip(
 
 function getContextMenuItems(
   display: LinearApolloSixFrameDisplayMouseEvents,
+  mousePosition: MousePositionWithFeature,
 ): MenuItem[] {
   const {
-    apolloHover,
     apolloInternetAccount: internetAccount,
+    hoveredFeature,
     changeManager,
     filteredTranscripts,
     regions,
     selectedFeature,
     session,
   } = display
+  const [region] = regions
+  const currentAssemblyId = display.getAssemblyId(region.assemblyName)
   const menuItems: MenuItem[] = []
-  if (!apolloHover) {
-    return menuItems
-  }
-  const { feature: sourceFeature } = apolloHover
   const role = internetAccount ? internetAccount.role : 'admin'
   const admin = role === 'admin'
-  const readOnly = !(role && ['admin', 'user'].includes(role))
-  const [region] = regions
-  const sourceAssemblyId = display.getAssemblyId(region.assemblyName)
-  const currentAssemblyId = display.getAssemblyId(region.assemblyName)
-  menuItems.push(
-    {
-      label: 'Add child feature',
-      disabled: readOnly,
-      onClick: () => {
-        ;(session as unknown as AbstractSessionModel).queueDialog(
-          (doneCallback) => [
-            AddChildFeature,
-            {
-              session,
-              handleClose: () => {
-                doneCallback()
-              },
-              changeManager,
-              sourceFeature,
-              sourceAssemblyId,
-              internetAccount,
-            },
-          ],
-        )
-      },
-    },
-    {
-      label: 'Copy features and annotations',
-      disabled: readOnly,
-      onClick: () => {
-        ;(session as unknown as AbstractSessionModel).queueDialog(
-          (doneCallback) => [
-            CopyFeature,
-            {
-              session,
-              handleClose: () => {
-                doneCallback()
-              },
-              changeManager,
-              sourceFeature,
-              sourceAssemblyId: currentAssemblyId,
-            },
-          ],
-        )
-      },
-    },
-    {
-      label: 'Delete feature',
-      disabled: !admin,
-      onClick: () => {
-        ;(session as unknown as AbstractSessionModel).queueDialog(
-          (doneCallback) => [
-            DeleteFeature,
-            {
-              session,
-              handleClose: () => {
-                doneCallback()
-              },
-              changeManager,
-              sourceFeature,
-              sourceAssemblyId: currentAssemblyId,
-              selectedFeature,
-              setSelectedFeature: (feature?: AnnotationFeature) => {
-                display.setSelectedFeature(feature)
-              },
-            },
-          ],
-        )
-      },
-    },
-  )
+  if (!hoveredFeature) {
+    return menuItems
+  }
   const { featureTypeOntology } = session.apolloDataStore.ontologyManager
   if (!featureTypeOntology) {
     throw new Error('featureTypeOntology is undefined')
   }
-  if (featureTypeOntology.isTypeOf(sourceFeature.type, 'gene')) {
-    menuItems.push({
-      label: 'Filter alternate transcripts',
-      onClick: () => {
-        ;(session as unknown as AbstractSessionModel).queueDialog(
-          (doneCallback) => [
-            FilterTranscripts,
-            {
-              handleClose: () => {
-                doneCallback()
-              },
-              sourceFeature,
-              filteredTranscripts: getSnapshot(filteredTranscripts),
-              onUpdate: (forms: string[]) => {
-                display.updateFilteredTranscripts(forms)
-              },
+  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 featureID: string | undefined = feature.attributes
+        .get('gff_id')
+        ?.toString()
+      if (featureID && filteredTranscripts.includes(featureID)) {
+        continue
+      }
+      const contextMenuItemsForFeature = 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 (featureTypeOntology.isTypeOf(feature.type, 'gene')) {
+        contextMenuItemsForFeature.push({
+          label: 'Filter alternate transcripts',
+          onClick: () => {
+            ;(session as unknown as AbstractSessionModel).queueDialog(
+              (doneCallback) => [
+                FilterTranscripts,
+                {
+                  handleClose: () => {
+                    doneCallback()
+                  },
+                  sourceFeature: feature,
+                  filteredTranscripts: getSnapshot(filteredTranscripts),
+                  onUpdate: (forms: string[]) => {
+                    display.updateFilteredTranscripts(forms)
+                  },
+                },
+              ],
+            )
+          },
+        })
+      }
+      menuItems.push({
+        label: feature.type,
+        subMenu: contextMenuItemsForFeature,
+      })
+    }
   }
   return menuItems
 }
@@ -933,6 +1004,7 @@ export const geneGlyph: Glyph = {
   drawHover,
   drawTooltip,
   getContextMenuItems,
+  getContextMenuItemsForFeature,
   onMouseDown,
   onMouseLeave,
   onMouseMove,