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

package/src/LinearApolloDisplay/glyphs/GeneGlyph.ts

@@ -1,25 +1,37 @@
 import { type AnnotationFeature } from '@apollo-annotation/mst'
+import { readConfObject } from '@jbrowse/core/configuration'
+import { type BaseDisplayModel } from '@jbrowse/core/pluggableElementTypes'
 import { type MenuItem } from '@jbrowse/core/ui'
 import {
   type AbstractSessionModel,
+  getContainingView,
   getFrame,
   intersection2,
   isSessionModelWithWidgets,
 } from '@jbrowse/core/util'
+import { type LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
 import { alpha } from '@mui/material'
 
 import { type OntologyRecord } from '../../OntologyManager'
 import { MergeExons, MergeTranscripts, SplitExon } from '../../components'
-import { type ApolloSessionModel } from '../../session'
-import { getMinAndMaxPx, getOverlappingEdge } from '../../util'
-import { getFeaturesUnderClick } from '../../util/annotationFeatureUtils'
-import { type LinearApolloDisplay } from '../stateModel'
 import {
-  type LinearApolloDisplayMouseEvents,
   type MousePosition,
-  type MousePositionWithFeatureAndGlyph,
-  isMousePositionWithFeatureAndGlyph,
-} from '../stateModel/mouseEvents'
+  type MousePositionWithFeature,
+  containsSelectedFeature,
+  getAdjacentExons,
+  getMinAndMaxPx,
+  getOverlappingEdge,
+  getStreamIcon,
+  isCDSFeature,
+  isExonFeature,
+  isMousePositionWithFeature,
+  isTranscriptFeature,
+  navToFeatureCenter,
+  selectFeatureAndOpenWidget,
+} from '../../util'
+import { getRelatedFeatures } from '../../util/annotationFeatureUtils'
+import { type LinearApolloDisplay } from '../stateModel'
+import { type LinearApolloDisplayMouseEvents } from '../stateModel/mouseEvents'
 import { type LinearApolloDisplayRendering } from '../stateModel/rendering'
 import { type CanvasMouseEvent } from '../types'
 
@@ -77,52 +89,85 @@ if (canvas?.getContext) {
   }
 }
 
-function draw(
+function drawBackground(
   ctx: CanvasRenderingContext2D,
   feature: AnnotationFeature,
-  row: number,
   stateModel: LinearApolloDisplayRendering,
   displayedRegionIndex: number,
-): void {
+  row: number,
+  color?: string,
+) {
   const { apolloRowHeight, lgv, 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, 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)
+  let selectedColor
+  if (color) {
+    selectedColor = color
+  } else {
+    selectedColor = readConfObject(
+      session.getPluginConfiguration(),
+      'geneBackgroundColor',
+      { featureType: feature.type },
+    ) as string
+    if (!selectedColor) {
+      selectedColor = alpha(theme.palette.background.paper, 0.6)
+    }
+  }
+  ctx.fillStyle = selectedColor
   ctx.fillRect(
     topLevelFeatureStartPx,
     topLevelFeatureTop,
     topLevelFeatureWidthPx,
     topLevelFeatureHeight,
   )
+}
+
+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)
 
   // Draw lines on different rows for each transcript
   let currentRow = 0
@@ -138,8 +183,8 @@ function draw(
     if (!transcriptChildren) {
       continue
     }
-
     const cdsCount = getCDSCount(transcript, featureTypeOntology)
+
     for (const [, childFeature] of transcriptChildren) {
       if (!featureTypeOntology.isTypeOf(childFeature.type, 'CDS')) {
         continue
@@ -169,9 +214,9 @@ function draw(
   }
 
   const forwardFill =
-    theme?.palette.mode === 'dark' ? forwardFillDark : forwardFillLight
+    theme.palette.mode === 'dark' ? forwardFillDark : forwardFillLight
   const backwardFill =
-    theme?.palette.mode === 'dark' ? backwardFillDark : backwardFillLight
+    theme.palette.mode === 'dark' ? backwardFillDark : backwardFillLight
   // Draw exon and CDS for each transcript
   currentRow = 0
   for (const [, child] of children) {
@@ -188,7 +233,7 @@ function draw(
     const cdsCount = getCDSCount(child, featureTypeOntology)
     if (cdsCount != 0) {
       for (const cdsRow of child.cdsLocations) {
-        const { _id, children: transcriptChildren } = child
+        const { children: transcriptChildren } = child
         if (!transcriptChildren) {
           continue
         }
@@ -217,7 +262,7 @@ function draw(
               regionNumber: displayedRegionIndex,
             })?.offsetPx ?? 0) - offsetPx
           const cdsStartPx = reversed ? minX - cdsWidthPx : minX
-          ctx.fillStyle = theme?.palette.text.primary ?? 'black'
+          ctx.fillStyle = theme.palette.text.primary
           const cdsTop =
             (row + currentRow) * rowHeight + (rowHeight - cdsHeight) / 2
           ctx.fillRect(cdsStartPx, cdsTop, cdsWidthPx, cdsHeight)
@@ -234,12 +279,8 @@ function draw(
               child.strand ?? 1,
               cds.phase,
             )
-            const frameColor = theme?.palette.framesCDS.at(frame)?.main
-            const cdsColorCode = frameColor ?? 'rgb(171,71,188)'
-            ctx.fillStyle =
-              apolloSelectedFeature && _id === apolloSelectedFeature._id
-                ? 'rgb(0,0,0)'
-                : cdsColorCode
+            const frameColor = theme.palette.framesCDS.at(frame)?.main
+            ctx.fillStyle = frameColor ?? 'black'
             ctx.fillRect(
               cdsStartPx + 1,
               cdsTop + 1,
@@ -295,6 +336,9 @@ function draw(
       currentRow += 1
     }
   }
+  if (selectedFeature && containsSelectedFeature(feature, selectedFeature)) {
+    drawHighlight(stateModel, ctx, selectedFeature, true)
+  }
 }
 
 function drawExon(
@@ -308,11 +352,10 @@ function drawExon(
   forwardFill: CanvasPattern | null,
   backwardFill: CanvasPattern | null,
 ) {
-  const { apolloRowHeight, lgv, session, theme } = stateModel
+  const { apolloRowHeight, lgv, theme } = stateModel
   const { bpPerPx, displayedRegions, offsetPx } = lgv
   const displayedRegion = displayedRegions[displayedRegionIndex]
   const { refName, reversed } = displayedRegion
-  const { apolloSelectedFeature } = session
 
   const minX =
     (lgv.bpToPx({
@@ -326,14 +369,11 @@ function drawExon(
   const top = (row + currentRow) * apolloRowHeight
   const exonHeight = Math.round(0.6 * apolloRowHeight)
   const exonTop = top + (apolloRowHeight - exonHeight) / 2
-  ctx.fillStyle = theme?.palette.text.primary ?? 'black'
+  ctx.fillStyle = theme.palette.text.primary
   ctx.fillRect(startPx, exonTop, widthPx, exonHeight)
   if (widthPx > 2) {
     ctx.clearRect(startPx + 1, exonTop + 1, widthPx - 2, exonHeight - 2)
-    ctx.fillStyle =
-      apolloSelectedFeature && exon._id === apolloSelectedFeature._id
-        ? 'rgb(0,0,0)'
-        : 'rgb(211,211,211)'
+    ctx.fillStyle = 'rgb(211,211,211)'
     ctx.fillRect(startPx + 1, exonTop + 1, widthPx - 2, exonHeight - 2)
     if (forwardFill && backwardFill && strand) {
       const reversal = reversed ? -1 : 1
@@ -354,6 +394,21 @@ function drawExon(
   }
 }
 
+function* range(start: number, stop: number, step = 1): Generator<number> {
+  if (start === stop) {
+    return
+  }
+  if (start < stop) {
+    for (let i = start; i < stop; i += step) {
+      yield i
+    }
+    return
+  }
+  for (let i = start; i > stop; i -= step) {
+    yield i
+  }
+}
+
 function drawLine(
   ctx: CanvasRenderingContext2D,
   stateModel: LinearApolloDisplayRendering,
@@ -372,14 +427,35 @@ 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)
+  // If view is reversed, draw forward as reverse and vice versa
+  const effectiveStrand = strand * (reversed ? -1 : 1)
+  // Draw the transcript line, and extend it out a bit on the 3` end
+  const lineStart = startPx - (effectiveStrand === -1 ? 5 : 0)
+  const lineEnd = startPx + widthPx + (effectiveStrand === -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 + (effectiveStrand === -1 ? 0 : 3)
+  const arrowsEnd = lineEnd - (effectiveStrand === -1 ? 3 : 0)
+  // Offset determines if the arrows face left or right
+  const offset = effectiveStrand === -1 ? 3 : -3
+  const arrowRange =
+    effectiveStrand === -1
+      ? range(arrowsStart, arrowsEnd, 20)
+      : range(arrowsEnd, arrowsStart, 20)
+  for (const arrowLocation of arrowRange) {
+    ctx.moveTo(arrowLocation + offset, height + offset)
+    ctx.lineTo(arrowLocation, height)
+    ctx.lineTo(arrowLocation + offset, height - offset)
+  }
   ctx.stroke()
 }
 
@@ -405,24 +481,22 @@ function drawDragPreview(
   const rectY = row * apolloRowHeight
   const rectWidth = Math.abs(current.x - featureEdgePx)
   const rectHeight = apolloRowHeight * rowCount
-  overlayCtx.strokeStyle = theme?.palette.info.main ?? 'rgb(255,0,0)'
+  overlayCtx.strokeStyle = theme.palette.info.main
   overlayCtx.setLineDash([6])
   overlayCtx.strokeRect(rectX, rectY, rectWidth, rectHeight)
-  overlayCtx.fillStyle = alpha(theme?.palette.info.main ?? 'rgb(255,0,0)', 0.2)
+  overlayCtx.fillStyle = alpha(theme.palette.info.main, 0.2)
   overlayCtx.fillRect(rectX, rectY, rectWidth, rectHeight)
 }
 
-function drawHover(
-  stateModel: LinearApolloDisplay,
+function drawHighlight(
+  stateModel: LinearApolloDisplayRendering,
   ctx: CanvasRenderingContext2D,
+  feature: AnnotationFeature,
+  selected = false,
 ) {
-  const { apolloHover, apolloRowHeight, lgv, session, theme } = stateModel
+  const { apolloRowHeight, lgv, session, theme } = stateModel
   const { featureTypeOntology } = session.apolloDataStore.ontologyManager
 
-  if (!apolloHover) {
-    return
-  }
-  const { feature } = apolloHover
   const position = stateModel.getFeatureLayoutPosition(feature)
   if (!position) {
     return
@@ -441,7 +515,9 @@ function drawHover(
   const row = layoutRow + featureRow
   const top = row * apolloRowHeight
   const widthPx = length / bpPerPx
-  ctx.fillStyle = theme?.palette.action.selected ?? 'rgba(0,0,0,04)'
+  ctx.fillStyle = selected
+    ? theme.palette.action.disabled
+    : theme.palette.action.focus
 
   if (!featureTypeOntology) {
     throw new Error('featureTypeOntology is undefined')
@@ -454,6 +530,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,
@@ -615,13 +703,12 @@ function getRowForFeature(
 
 function onMouseDown(
   stateModel: LinearApolloDisplay,
-  currentMousePosition: MousePositionWithFeatureAndGlyph,
+  currentMousePosition: MousePositionWithFeature,
   event: CanvasMouseEvent,
 ) {
-  const { featureAndGlyphUnderMouse } = currentMousePosition
+  const { feature } = currentMousePosition
   // swallow the mouseDown if we are on the edge of the feature so that we
   // don't start dragging the view if we try to drag the feature edge
-  const { feature } = featureAndGlyphUnderMouse
   const draggableFeature = getDraggableFeatureInfo(
     currentMousePosition,
     feature,
@@ -642,10 +729,9 @@ function onMouseMove(
   stateModel: LinearApolloDisplay,
   mousePosition: MousePosition,
 ) {
-  if (isMousePositionWithFeatureAndGlyph(mousePosition)) {
-    const { featureAndGlyphUnderMouse } = mousePosition
-    stateModel.setApolloHover(featureAndGlyphUnderMouse)
-    const { feature } = featureAndGlyphUnderMouse
+  if (isMousePositionWithFeature(mousePosition)) {
+    const { feature, bp } = mousePosition
+    stateModel.setHoveredFeature({ feature, bp })
     const draggableFeature = getDraggableFeatureInfo(
       mousePosition,
       feature,
@@ -666,41 +752,11 @@ function onMouseUp(
   if (stateModel.apolloDragging) {
     return
   }
-  const { featureAndGlyphUnderMouse } = mousePosition
-  if (!featureAndGlyphUnderMouse) {
+  const { feature } = mousePosition
+  if (!feature) {
     return
   }
-  const { feature } = featureAndGlyphUnderMouse
-  stateModel.setSelectedFeature(feature)
-  const { session } = stateModel
-  const { apolloDataStore } = session
-  const { featureTypeOntology } = apolloDataStore.ontologyManager
-  if (!featureTypeOntology) {
-    throw new Error('featureTypeOntology is undefined')
-  }
-
-  let containsCDSOrExon = false
-  for (const [, child] of feature.children ?? []) {
-    if (
-      featureTypeOntology.isTypeOf(child.type, 'CDS') ||
-      featureTypeOntology.isTypeOf(child.type, 'exon')
-    ) {
-      containsCDSOrExon = true
-      break
-    }
-  }
-  if (
-    (featureTypeOntology.isTypeOf(feature.type, 'transcript') ||
-      featureTypeOntology.isTypeOf(feature.type, 'pseudogenic_transcript')) &&
-    containsCDSOrExon
-  ) {
-    stateModel.showFeatureDetailsWidget(feature, [
-      'ApolloTranscriptDetails',
-      'apolloTranscriptDetails',
-    ])
-  } else {
-    stateModel.showFeatureDetailsWidget(feature)
-  }
+  selectFeatureAndOpenWidget(stateModel, feature)
 }
 
 function getDraggableFeatureInfo(
@@ -769,49 +825,13 @@ function getDraggableFeatureInfo(
   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')
-}
-
 function getContextMenuItems(
   display: LinearApolloDisplayMouseEvents,
-  mousePosition: MousePositionWithFeatureAndGlyph,
+  mousePosition: MousePositionWithFeature,
 ): MenuItem[] {
   const {
     apolloInternetAccount: internetAccount,
-    apolloHover,
+    hoveredFeature,
     changeManager,
     regions,
     selectedFeature,
@@ -822,53 +842,120 @@ function getContextMenuItems(
   const menuItems: MenuItem[] = []
   const role = internetAccount ? internetAccount.role : 'admin'
   const admin = role === 'admin'
-  if (!apolloHover) {
+  if (!hoveredFeature) {
     return menuItems
   }
 
-  let featuresUnderClick = getFeaturesUnderClick(mousePosition)
-  if (isCDSFeature(mousePosition.featureAndGlyphUnderMouse.feature, session)) {
-    featuresUnderClick = getFeaturesUnderClick(mousePosition, true)
-  }
+  if (isMousePositionWithFeature(mousePosition)) {
+    const { bp, feature } = mousePosition
+    let featuresUnderClick = getRelatedFeatures(feature, bp)
+    if (isCDSFeature(feature, session)) {
+      featuresUnderClick = getRelatedFeatures(feature, bp, true)
+    }
 
-  for (const feature of featuresUnderClick) {
-    const contextMenuItemsForFeature = boxGlyph.getContextMenuItemsForFeature(
-      display,
-      feature,
-    )
-    if (isExonFeature(feature, session)) {
-      contextMenuItemsForFeature.push(
-        {
-          label: 'Merge exons',
-          disabled: !admin,
-          onClick: () => {
-            ;(session as unknown as AbstractSessionModel).queueDialog(
-              (doneCallback) => [
-                MergeExons,
-                {
-                  session,
-                  handleClose: () => {
-                    doneCallback()
+    for (const feature of featuresUnderClick) {
+      const contextMenuItemsForFeature = boxGlyph.getContextMenuItemsForFeature(
+        display,
+        feature,
+      )
+      if (isExonFeature(feature, session)) {
+        const adjacentExons = getAdjacentExons(
+          feature,
+          display,
+          mousePosition,
+          session,
+        )
+        const lgv = getContainingView(
+          display as BaseDisplayModel,
+        ) as unknown as LinearGenomeViewModel
+        if (adjacentExons.upstream) {
+          const exon = adjacentExons.upstream
+          contextMenuItemsForFeature.push({
+            label: 'Go to upstream exon',
+            icon: getStreamIcon(
+              feature.strand,
+              true,
+              lgv.displayedRegions.at(0)?.reversed,
+            ),
+            onClick: () => {
+              lgv.navTo(navToFeatureCenter(exon, 0.1, lgv.totalBp))
+              selectFeatureAndOpenWidget(display, exon)
+            },
+          })
+        }
+        if (adjacentExons.downstream) {
+          const exon = adjacentExons.downstream
+          contextMenuItemsForFeature.push({
+            label: 'Go to downstream exon',
+            icon: getStreamIcon(
+              feature.strand,
+              false,
+              lgv.displayedRegions.at(0)?.reversed,
+            ),
+            onClick: () => {
+              lgv.navTo(navToFeatureCenter(exon, 0.1, lgv.totalBp))
+              selectFeatureAndOpenWidget(display, exon)
+            },
+          })
+        }
+        contextMenuItemsForFeature.push(
+          {
+            label: 'Merge exons',
+            disabled: !admin,
+            onClick: () => {
+              ;(session as unknown as AbstractSessionModel).queueDialog(
+                (doneCallback) => [
+                  MergeExons,
+                  {
+                    session,
+                    handleClose: () => {
+                      doneCallback()
+                    },
+                    changeManager,
+                    sourceFeature: feature,
+                    sourceAssemblyId: currentAssemblyId,
+                    selectedFeature,
+                    setSelectedFeature: (feature?: AnnotationFeature) => {
+                      display.setSelectedFeature(feature)
+                    },
                   },
-                  changeManager,
-                  sourceFeature: feature,
-                  sourceAssemblyId: currentAssemblyId,
-                  selectedFeature,
-                  setSelectedFeature: (feature?: AnnotationFeature) => {
-                    display.setSelectedFeature(feature)
+                ],
+              )
+            },
+          },
+          {
+            label: 'Split exon',
+            disabled: !admin,
+            onClick: () => {
+              ;(session as unknown as AbstractSessionModel).queueDialog(
+                (doneCallback) => [
+                  SplitExon,
+                  {
+                    session,
+                    handleClose: () => {
+                      doneCallback()
+                    },
+                    changeManager,
+                    sourceFeature: feature,
+                    sourceAssemblyId: currentAssemblyId,
+                    selectedFeature,
+                    setSelectedFeature: (feature?: AnnotationFeature) => {
+                      display.setSelectedFeature(feature)
+                    },
                   },
-                },
-              ],
-            )
+                ],
+              )
+            },
           },
-        },
-        {
-          label: 'Split exon',
-          disabled: !admin,
+        )
+      }
+      if (isTranscriptFeature(feature, session)) {
+        contextMenuItemsForFeature.push({
+          label: 'Merge transcript',
           onClick: () => {
             ;(session as unknown as AbstractSessionModel).queueDialog(
               (doneCallback) => [
-                SplitExon,
+                MergeTranscripts,
                 {
                   session,
                   handleClose: () => {
@@ -885,56 +972,31 @@ function getContextMenuItems(
               ],
             )
           },
-        },
-      )
-    }
-    if (isTranscriptFeature(feature, session)) {
-      contextMenuItemsForFeature.push({
-        label: 'Merge transcript',
-        onClick: () => {
-          ;(session as unknown as AbstractSessionModel).queueDialog(
-            (doneCallback) => [
-              MergeTranscripts,
-              {
-                session,
-                handleClose: () => {
-                  doneCallback()
-                },
-                changeManager,
-                sourceFeature: feature,
-                sourceAssemblyId: currentAssemblyId,
-                selectedFeature,
-                setSelectedFeature: (feature?: AnnotationFeature) => {
-                  display.setSelectedFeature(feature)
-                },
-              },
-            ],
-          )
-        },
-      })
-      if (isSessionModelWithWidgets(session)) {
-        contextMenuItemsForFeature.push({
-          label: 'Open transcript details',
-          onClick: () => {
-            const apolloTranscriptWidget = session.addWidget(
-              'ApolloTranscriptDetails',
-              'apolloTranscriptDetails',
-              {
-                feature,
-                assembly: currentAssemblyId,
-                changeManager,
-                refName: region.refName,
-              },
-            )
-            session.showWidget(apolloTranscriptWidget)
-          },
         })
+        if (isSessionModelWithWidgets(session)) {
+          contextMenuItemsForFeature.push({
+            label: 'Open transcript details',
+            onClick: () => {
+              const apolloTranscriptWidget = session.addWidget(
+                'ApolloTranscriptDetails',
+                'apolloTranscriptDetails',
+                {
+                  feature,
+                  assembly: currentAssemblyId,
+                  changeManager,
+                  refName: region.refName,
+                },
+              )
+              session.showWidget(apolloTranscriptWidget)
+            },
+          })
+        }
       }
+      menuItems.push({
+        label: feature.type,
+        subMenu: contextMenuItemsForFeature,
+      })
     }
-    menuItems.push({
-      label: feature.type,
-      subMenu: contextMenuItemsForFeature,
-    })
   }
   return menuItems
 }