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

package/src/LinearApolloSixFrameDisplay/glyphs/GeneGlyph.ts

@@ -5,22 +5,28 @@ import {
 import { type MenuItem } from '@jbrowse/core/ui'
 import {
   type AbstractSessionModel,
-  type SessionWithWidgets,
   getFrame,
   intersection2,
-  isSessionModelWithWidgets,
+  measureText,
 } from '@jbrowse/core/util'
 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 { type LinearApolloSixFrameDisplay } from '../stateModel'
+import { MergeExons, SplitExon } from '../../components'
+import { FilterTranscripts } from '../../components/FilterTranscripts'
 import {
-  type LinearApolloSixFrameDisplayMouseEvents,
   type MousePosition,
-  type MousePositionWithFeatureAndGlyph,
-  isMousePositionWithFeatureAndGlyph,
-} from '../stateModel/mouseEvents'
+  type MousePositionWithFeature,
+  getContextMenuItemsForFeature,
+  getMinAndMaxPx,
+  getOverlappingEdge,
+  getRelatedFeatures,
+  isMousePositionWithFeature,
+  isSelectedFeature,
+} from '../../util'
+import { type LinearApolloSixFrameDisplay } from '../stateModel'
+import { type LinearApolloSixFrameDisplayMouseEvents } from '../stateModel/mouseEvents'
 import { type LinearApolloSixFrameDisplayRendering } from '../stateModel/rendering'
 import { type CanvasMouseEvent } from '../types'
 
@@ -30,7 +36,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')
@@ -83,6 +92,37 @@ function deepSetHas<T>(set: Set<T>, item: T): boolean {
   return false
 }
 
+interface Label {
+  x: number
+  y: number
+  h: number
+  text: string | undefined
+  color: string
+  isSelected: boolean
+}
+
+function drawTextLabels(
+  ctx: CanvasRenderingContext2D,
+  labelArray: Label[],
+  font = '10px sans-serif',
+) {
+  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 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.fillText(label.text, labelRowX, labelRowY + 11, textWidth)
+      ctx.font = font
+    }
+  }
+}
+
 function draw(
   ctx: CanvasRenderingContext2D,
   topLevelFeature: AnnotationFeature,
@@ -90,23 +130,35 @@ function draw(
   stateModel: LinearApolloSixFrameDisplayRendering,
   displayedRegionIndex: number,
 ): void {
-  const { apolloRowHeight, lgv, session, theme, highestRow } = stateModel
+  const {
+    apolloRowHeight,
+    lgv,
+    session,
+    theme,
+    highestRow,
+    filteredTranscripts,
+    selectedFeature,
+    showFeatureLabels,
+  } = stateModel
   const { bpPerPx, displayedRegions, offsetPx } = lgv
   const displayedRegion = displayedRegions[displayedRegionIndex]
   const { refName, reversed } = displayedRegion
   const rowHeight = apolloRowHeight
-  const exonHeight = Math.round(0.6 * rowHeight)
-  const cdsHeight = Math.round(0.7 * rowHeight)
-  const { children, min, strand, _id } = topLevelFeature
+  const exonHeight = rowHeight
+  const cdsHeight = rowHeight
+  const topLevelFeatureHeight = rowHeight
+  const featureLabelSpacer = showFeatureLabels ? 2 : 1
+  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) {
     throw new Error('featureTypeOntology is undefined')
   }
+  const labelArray: Label[] = []
 
   // Draw background for gene
   const topLevelFeatureMinX =
@@ -119,11 +171,9 @@ function draw(
   const topLevelFeatureStartPx = reversed
     ? topLevelFeatureMinX - topLevelFeatureWidthPx
     : topLevelFeatureMinX
-  const topLevelRow = strand == 1 ? 3 : 4
+  const topLevelRow = (strand == 1 ? 3 : 4) * featureLabelSpacer
   const topLevelFeatureTop = topLevelRow * rowHeight
-  const topLevelFeatureHeight = Math.round(0.7 * rowHeight)
-
-  ctx.fillStyle = theme?.palette.text.primary ?? 'black'
+  ctx.fillStyle = theme.palette.text.primary
   ctx.fillRect(
     topLevelFeatureStartPx,
     topLevelFeatureTop,
@@ -131,10 +181,9 @@ function draw(
     topLevelFeatureHeight,
   )
 
-  ctx.fillStyle =
-    apolloSelectedFeature && _id === apolloSelectedFeature._id
-      ? alpha('rgb(0,0,0)', 0.7)
-      : alpha(theme?.palette.background.paper ?? '#ffffff', 0.7)
+  ctx.fillStyle = isSelectedFeature(topLevelFeature, selectedFeature)
+    ? alpha('rgb(0,0,0)', 0.7)
+    : alpha(theme.palette.background.paper, 0.7)
   ctx.fillRect(
     topLevelFeatureStartPx + 1,
     topLevelFeatureTop + 1,
@@ -142,10 +191,25 @@ function draw(
     topLevelFeatureHeight - 2,
   )
 
+  const isSelected = isSelectedFeature(topLevelFeature, selectedFeature)
+  const label: Label = {
+    x: topLevelFeatureStartPx,
+    y: topLevelFeatureTop,
+    h: topLevelFeatureHeight,
+    text: attributes.get('gff_id')?.toString(),
+    color: textColor,
+    isSelected,
+  }
+  if (isSelected) {
+    labelArray.unshift(label)
+  } else {
+    labelArray.push(label)
+  }
+
   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
@@ -184,10 +248,16 @@ function draw(
     ) {
       continue
     }
-    const { children: childrenOfmRNA, cdsLocations, _id } = child
+    const { children: childrenOfmRNA, cdsLocations } = child
     if (!childrenOfmRNA) {
       continue
     }
+    const childID: string | undefined = child.attributes
+      .get('gff_id')
+      ?.toString()
+    if (childID && filteredTranscripts.includes(childID)) {
+      continue
+    }
     for (const [, exon] of childrenOfmRNA) {
       if (!featureTypeOntology.isTypeOf(exon.type, 'exon')) {
         continue
@@ -203,14 +273,12 @@ function draw(
 
       const exonTop =
         topLevelFeatureTop + (topLevelFeatureHeight - exonHeight) / 2
-      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)
-        ctx.fillStyle =
-          apolloSelectedFeature && exon._id === apolloSelectedFeature._id
-            ? 'rgb(0,0,0)'
-            : alpha('#f5f500', 0.6)
+        ctx.fillStyle = isSelected ? 'rgb(0,0,0)' : alpha('#f5f500', 0.6)
         ctx.fillRect(startPx + 1, exonTop + 1, widthPx - 2, exonHeight - 2)
         if (topFill && bottomFill) {
           ctx.fillStyle = topFill
@@ -228,18 +296,35 @@ function draw(
             (exonHeight - 2) / 2,
           )
         }
+
+        const label: Label = {
+          x: startPx,
+          y: exonTop,
+          h: exonHeight,
+          text: exon.attributes.get('gff_id')?.toString(),
+          color: textColor,
+          isSelected,
+        }
+        if (isSelected) {
+          labelArray.unshift(label)
+        } else {
+          labelArray.push(label)
+        }
       }
     }
 
+    const isSelected = isSelectedFeature(child, selectedFeature?.parent)
+    let cdsStartPx = 0
+    let cdsTop = 0
     for (const cdsRow of cdsLocations) {
       let prevCDSTop = 0
       let prevCDSEndPx = 0
       let counter = 1
       for (const cds of cdsRow.sort((a, b) => a.max - b.max)) {
         if (
-          (apolloSelectedFeature &&
-            featureTypeOntology.isTypeOf(apolloSelectedFeature.type, 'CDS') &&
-            _id === apolloSelectedFeature.parent?._id) ||
+          (selectedFeature &&
+            isSelected &&
+            featureTypeOntology.isTypeOf(selectedFeature.type, 'CDS')) ||
           !deepSetHas(renderedCDS, cds)
         ) {
           const cdsWidthPx = (cds.max - cds.min) / bpPerPx
@@ -249,12 +334,12 @@ function draw(
               coord: cds.min,
               regionNumber: displayedRegionIndex,
             })?.offsetPx ?? 0) - offsetPx
-          const cdsStartPx = reversed ? minX - cdsWidthPx : minX
-          ctx.fillStyle = theme?.palette.text.primary ?? 'black'
+          cdsStartPx = reversed ? minX - cdsWidthPx : minX
+          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
-          const cdsTop =
-            (frameAdjust - 1) * rowHeight + (rowHeight - cdsHeight) / 2
+          const frameAdjust =
+            (frame < 0 ? -1 * frame + 5 : frame) * featureLabelSpacer
+          cdsTop = (frameAdjust - featureLabelSpacer) * rowHeight
           ctx.fillRect(cdsStartPx, cdsTop, cdsWidthPx, cdsHeight)
           if (cdsWidthPx > 2) {
             ctx.clearRect(
@@ -264,13 +349,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 &&
-              featureTypeOntology.isTypeOf(apolloSelectedFeature.type, 'CDS') &&
-              _id === apolloSelectedFeature.parent?._id
+              selectedFeature &&
+              isSelected &&
+              featureTypeOntology.isTypeOf(selectedFeature.type, 'CDS')
                 ? 'rgb(0,0,0)'
                 : cdsColorCode
             ctx.fillRect(
@@ -286,7 +371,9 @@ function draw(
               const midPoint: [number, number] = [
                 (cdsStartPx - prevCDSEndPx) / 2 + prevCDSEndPx,
                 Math.max(
-                  frame < 0 ? rowHeight * highestRow + 1 : 1, // Avoid render ceiling
+                  frame < 0
+                    ? rowHeight * featureLabelSpacer * highestRow + 1
+                    : 1, // Avoid render ceiling
                   Math.min(prevCDSTop, cdsTop) - rowHeight / 2,
                 ),
               ]
@@ -324,6 +411,22 @@ function draw(
         }
       }
     }
+    const label: Label = {
+      x: cdsStartPx,
+      y: cdsTop,
+      h: cdsHeight,
+      text: child.attributes.get('gff_id')?.toString(),
+      color: textColor,
+      isSelected,
+    }
+    if (isSelected) {
+      labelArray.unshift(label)
+    } else {
+      labelArray.push(label)
+    }
+  }
+  if (showFeatureLabels) {
+    drawTextLabels(ctx, labelArray)
   }
 }
 
@@ -349,10 +452,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)
 }
 
@@ -360,19 +463,33 @@ function drawHover(
   stateModel: LinearApolloSixFrameDisplay,
   ctx: CanvasRenderingContext2D,
 ) {
-  const { apolloHover, apolloRowHeight, lgv, highestRow, session } = stateModel
-  if (!apolloHover) {
+  const {
+    hoveredFeature,
+    apolloRowHeight,
+    filteredTranscripts,
+    lgv,
+    highestRow,
+    session,
+    showFeatureLabels,
+  } = stateModel
+  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
   }
+  const featureID: string | undefined = feature.attributes
+    .get('gff_id')
+    ?.toString()
+  if (featureID && filteredTranscripts.includes(featureID)) {
+    return
+  }
   const position = stateModel.getFeatureLayoutPosition(feature)
   if (!position) {
     return
@@ -382,7 +499,8 @@ function drawHover(
   const displayedRegion = displayedRegions[layoutIndex]
   const { refName, reversed } = displayedRegion
   const rowHeight = apolloRowHeight
-  const cdsHeight = Math.round(0.7 * rowHeight)
+  const cdsHeight = rowHeight
+  const featureLabelSpacer = showFeatureLabels ? 2 : 1
   const { cdsLocations, strand } = feature
   for (const cdsRow of cdsLocations) {
     let prevCDSTop = 0
@@ -399,9 +517,9 @@ function drawHover(
           })?.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
-        const cdsTop =
-          (frameAdjust - 1) * rowHeight + (rowHeight - cdsHeight) / 2
+        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)
 
@@ -410,7 +528,7 @@ function drawHover(
           const midPoint: [number, number] = [
             (cdsStartPx - prevCDSEndPx) / 2 + prevCDSEndPx,
             Math.max(
-              frame < 0 ? rowHeight * highestRow + 1 : 1, // Avoid render ceiling
+              frame < 0 ? rowHeight * featureLabelSpacer * highestRow + 1 : 1, // Avoid render ceiling
               Math.min(prevCDSTop, cdsTop) - rowHeight / 2,
             ),
           ]
@@ -434,16 +552,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,
   )
@@ -453,6 +569,7 @@ function onMouseDown(
       currentMousePosition,
       draggableFeature.feature,
       draggableFeature.edge,
+      true,
     )
   }
 }
@@ -461,13 +578,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,
     )
@@ -486,103 +601,112 @@ function onMouseUp(
   if (stateModel.apolloDragging) {
     return
   }
-  const { featureAndGlyphUnderMouse } = mousePosition
-  const { session } = stateModel
-  const { apolloDataStore } = session
-  const { featureTypeOntology } = apolloDataStore.ontologyManager
-  if (featureAndGlyphUnderMouse?.cds) {
-    const { cds, feature } = featureAndGlyphUnderMouse
+  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')
     }
-    if (!feature.children) {
-      return
-    }
-    for (const child of feature.children.values()) {
-      const childIsCDS = featureTypeOntology.isTypeOf(child.type, 'CDS')
-      if (childIsCDS && cds.max <= child.max && cds.min >= child.min) {
-        stateModel.setSelectedFeature(child)
+
+    let containsCDSOrExon = false
+    for (const [, child] of feature.children ?? []) {
+      if (
+        featureTypeOntology.isTypeOf(child.type, 'CDS') ||
+        featureTypeOntology.isTypeOf(child.type, 'exon')
+      ) {
+        containsCDSOrExon = true
         break
       }
     }
-  } else if (featureAndGlyphUnderMouse?.feature) {
-    stateModel.setSelectedFeature(featureAndGlyphUnderMouse.feature)
+    if (
+      (featureTypeOntology.isTypeOf(feature.type, 'transcript') ||
+        featureTypeOntology.isTypeOf(feature.type, 'pseudogenic_transcript')) &&
+      containsCDSOrExon
+    ) {
+      stateModel.showFeatureDetailsWidget(feature, [
+        'ApolloTranscriptDetails',
+        'apolloTranscriptDetails',
+      ])
+    } else {
+      stateModel.showFeatureDetailsWidget(feature)
+    }
   }
 }
 
 function getDraggableFeatureInfo(
   mousePosition: MousePosition,
-  cds: TranscriptPartCoding | null,
   feature: AnnotationFeature,
   stateModel: LinearApolloSixFrameDisplay,
 ): { feature: AnnotationFeature; edge: 'min' | 'max' } | undefined {
-  const { session } = stateModel
+  const { filteredTranscripts, session } = stateModel
   const { apolloDataStore } = session
   const { featureTypeOntology } = apolloDataStore.ontologyManager
   if (!featureTypeOntology) {
     throw new Error('featureTypeOntology is undefined')
   }
   const isTranscript = featureTypeOntology.isTypeOf(feature.type, 'transcript')
-  if (cds === null) {
+  const featureID: string | undefined = feature.attributes
+    .get('gff_id')
+    ?.toString()
+  if (featureID && filteredTranscripts.includes(featureID)) {
     return
   }
   const { bp, refName, regionNumber, x } = mousePosition
   const { lgv } = stateModel
-  const { offsetPx } = lgv
-
-  const minPxInfo = lgv.bpToPx({ refName, coord: cds.min, regionNumber })
-  const maxPxInfo = lgv.bpToPx({ refName, coord: cds.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 (isTranscript) {
     const transcript = feature
     if (!transcript.children) {
       return
     }
     const exonChildren: AnnotationFeature[] = []
+    const cdsChildren: AnnotationFeature[] = []
     for (const child of transcript.children.values()) {
       const childIsExon = featureTypeOntology.isTypeOf(child.type, 'exon')
+      const childIsCDS = featureTypeOntology.isTypeOf(child.type, 'CDS')
       if (childIsExon) {
         exonChildren.push(child)
+      } else if (childIsCDS) {
+        cdsChildren.push(child)
       }
     }
-
     const overlappingExon = exonChildren.find((child) => {
       const [start, end] = intersection2(bp, bp + 1, child.min, child.max)
       return start !== undefined && end !== undefined
     })
-    if (!overlappingExon) {
-      return
-    }
-    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 minPx = minPxInfo.offsetPx - offsetPx
-    const maxPx = maxPxInfo.offsetPx - offsetPx
-    if (Math.abs(maxPx - minPx) < 8) {
-      return
-    }
-    if (Math.abs(minPx - x) < 4) {
-      return { feature: overlappingExon, edge: 'min' }
+    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
+        }
+      }
     }
-    if (Math.abs(maxPx - x) < 4) {
-      return { feature: overlappingExon, edge: 'max' }
+    // End of special cases, let's see if we're on the edge of this CDS or exon
+    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
+            }
+          }
+        }
+      }
     }
   }
   return
@@ -592,27 +716,56 @@ function drawTooltip(
   display: LinearApolloSixFrameDisplayMouseEvents,
   context: CanvasRenderingContext2D,
 ): void {
-  const { apolloHover, apolloRowHeight, 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 = attributes.get('gff_id')?.toString()
+  if (featureID && filteredTranscripts.includes(featureID)) {
+    return
+  }
   const { layoutIndex } = position
   const { bpPerPx, displayedRegions, offsetPx } = lgv
   const displayedRegion = displayedRegions[layoutIndex]
   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}`
 
@@ -623,12 +776,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,
@@ -636,14 +789,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,
@@ -655,12 +808,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)
   }
@@ -670,136 +823,121 @@ 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)
-              },
-            },
-          ],
-        )
-      },
-    },
-    {
-      label: 'Edit feature details',
-      onClick: () => {
-        const apolloFeatureWidget = (
-          session as unknown as SessionWithWidgets
-        ).addWidget(
-          'ApolloFeatureDetailsWidget',
-          'apolloFeatureDetailsWidget',
-          {
-            feature: sourceFeature,
-            assembly: currentAssemblyId,
-            refName: region.refName,
-          },
-        )
-        ;(session as unknown as SessionWithWidgets).showWidget(
-          apolloFeatureWidget,
-        )
-      },
-    },
-  )
+  if (!hoveredFeature) {
+    return menuItems
+  }
   const { featureTypeOntology } = session.apolloDataStore.ontologyManager
   if (!featureTypeOntology) {
     throw new Error('featureTypeOntology is undefined')
   }
-  if (
-    featureTypeOntology.isTypeOf(sourceFeature.type, 'transcript') &&
-    isSessionModelWithWidgets(session)
-  ) {
-    menuItems.push({
-      label: 'Edit transcript details',
-      onClick: () => {
-        const apolloTranscriptWidget = session.addWidget(
-          'ApolloTranscriptDetails',
-          'apolloTranscriptDetails',
+  if (isMousePositionWithFeature(mousePosition)) {
+    const { bp, feature } = mousePosition
+    for (const relatedFeature of getRelatedFeatures(feature, bp)) {
+      const featureID: string | undefined = relatedFeature.attributes
+        .get('gff_id')
+        ?.toString()
+      if (featureID && filteredTranscripts.includes(featureID)) {
+        continue
+      }
+      const contextMenuItemsForFeature = getContextMenuItemsForFeature(
+        display,
+        relatedFeature,
+      )
+      if (featureTypeOntology.isTypeOf(relatedFeature.type, 'exon')) {
+        contextMenuItemsForFeature.push(
           {
-            feature: sourceFeature,
-            assembly: currentAssemblyId,
-            changeManager,
-            refName: region.refName,
+            label: 'Merge exons',
+            disabled: !admin,
+            onClick: () => {
+              ;(session as unknown as AbstractSessionModel).queueDialog(
+                (doneCallback) => [
+                  MergeExons,
+                  {
+                    session,
+                    handleClose: () => {
+                      doneCallback()
+                    },
+                    changeManager,
+                    sourceFeature: relatedFeature,
+                    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: relatedFeature,
+                    sourceAssemblyId: currentAssemblyId,
+                    selectedFeature,
+                    setSelectedFeature: (feature?: AnnotationFeature) => {
+                      display.setSelectedFeature(feature)
+                    },
+                  },
+                ],
+              )
+            },
           },
         )
-        session.showWidget(apolloTranscriptWidget)
-      },
-    })
+      }
+      if (featureTypeOntology.isTypeOf(relatedFeature.type, 'gene')) {
+        contextMenuItemsForFeature.push({
+          label: 'Filter alternate transcripts',
+          onClick: () => {
+            ;(session as unknown as AbstractSessionModel).queueDialog(
+              (doneCallback) => [
+                FilterTranscripts,
+                {
+                  handleClose: () => {
+                    doneCallback()
+                  },
+                  sourceFeature: relatedFeature,
+                  filteredTranscripts: getSnapshot(filteredTranscripts),
+                  onUpdate: (forms: string[]) => {
+                    display.updateFilteredTranscripts(forms)
+                  },
+                },
+              ],
+            )
+          },
+        })
+      }
+      menuItems.push({
+        label: relatedFeature.type,
+        subMenu: contextMenuItemsForFeature,
+      })
+    }
   }
   return menuItems
 }
@@ -814,6 +952,7 @@ export const geneGlyph: Glyph = {
   drawHover,
   drawTooltip,
   getContextMenuItems,
+  getContextMenuItemsForFeature,
   onMouseDown,
   onMouseLeave,
   onMouseMove,