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

package/src/LinearApolloSixFrameDisplay/glyphs/GeneGlyph.ts

@@ -13,16 +13,20 @@ 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,
+  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'
 
@@ -133,6 +137,7 @@ function draw(
     theme,
     highestRow,
     filteredTranscripts,
+    selectedFeature,
     showFeatureLabels,
   } = stateModel
   const { bpPerPx, displayedRegions, offsetPx } = lgv
@@ -143,12 +148,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 +173,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 +181,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 +191,7 @@ function draw(
     topLevelFeatureHeight - 2,
   )
 
-  const isSelected = isSelectedFeature(topLevelFeature, apolloSelectedFeature)
+  const isSelected = isSelectedFeature(topLevelFeature, selectedFeature)
   const label: Label = {
     x: topLevelFeatureStartPx,
     y: topLevelFeatureTop,
@@ -203,9 +207,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 +273,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 +313,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 +322,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,7 +335,7 @@ 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
@@ -345,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 &&
+              selectedFeature &&
               isSelected &&
-              featureTypeOntology.isTypeOf(apolloSelectedFeature.type, 'CDS')
+              featureTypeOntology.isTypeOf(selectedFeature.type, 'CDS')
                 ? 'rgb(0,0,0)'
                 : cdsColorCode
             ctx.fillRect(
@@ -448,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)
 }
 
@@ -460,7 +464,7 @@ function drawHover(
   ctx: CanvasRenderingContext2D,
 ) {
   const {
-    apolloHover,
+    hoveredFeature,
     apolloRowHeight,
     filteredTranscripts,
     lgv,
@@ -468,15 +472,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
   }
@@ -548,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,
   )
@@ -576,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,
     )
@@ -601,53 +601,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 +648,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 +687,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 +716,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 +752,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 +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,
@@ -772,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,
@@ -791,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)
   }
@@ -806,119 +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)
-              },
-            },
-          ],
-        )
-      },
-    },
-  )
+  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
+    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(
+          {
+            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)
+                    },
+                  },
+                ],
+              )
+            },
+          },
         )
-      },
-    })
+      }
+      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
 }
@@ -933,6 +952,7 @@ export const geneGlyph: Glyph = {
   drawHover,
   drawTooltip,
   getContextMenuItems,
+  getContextMenuItemsForFeature,
   onMouseDown,
   onMouseLeave,
   onMouseMove,