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

package/src/LinearApolloSixFrameDisplay/glyphs/GeneGlyph.ts

@@ -5,15 +5,17 @@ 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 { FilterTranscripts } from '../../components/FilterTranscripts'
+import { getMinAndMaxPx, getOverlappingEdge } from '../../util'
 import { type LinearApolloSixFrameDisplay } from '../stateModel'
 import {
   type LinearApolloSixFrameDisplayMouseEvents,
@@ -30,7 +32,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 +88,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,14 +126,25 @@ function draw(
   stateModel: LinearApolloSixFrameDisplayRendering,
   displayedRegionIndex: number,
 ): void {
-  const { apolloRowHeight, lgv, session, theme, highestRow } = stateModel
+  const {
+    apolloRowHeight,
+    lgv,
+    session,
+    theme,
+    highestRow,
+    filteredTranscripts,
+    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 ?? 'black'
+  const { attributes, children, min, strand } = topLevelFeature
   if (!children) {
     return
   }
@@ -107,6 +154,7 @@ function draw(
   if (!featureTypeOntology) {
     throw new Error('featureTypeOntology is undefined')
   }
+  const labelArray: Label[] = []
 
   // Draw background for gene
   const topLevelFeatureMinX =
@@ -119,10 +167,8 @@ 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.fillRect(
     topLevelFeatureStartPx,
@@ -131,10 +177,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, apolloSelectedFeature)
+    ? alpha('rgb(0,0,0)', 0.7)
+    : alpha(theme?.palette.background.paper ?? '#ffffff', 0.7)
   ctx.fillRect(
     topLevelFeatureStartPx + 1,
     topLevelFeatureTop + 1,
@@ -142,6 +187,21 @@ function draw(
     topLevelFeatureHeight - 2,
   )
 
+  const isSelected = isSelectedFeature(topLevelFeature, apolloSelectedFeature)
+  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
   const backwardFill =
@@ -184,10 +244,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 +269,12 @@ function draw(
 
       const exonTop =
         topLevelFeatureTop + (topLevelFeatureHeight - exonHeight) / 2
+      const isSelected = isSelectedFeature(exon, apolloSelectedFeature)
       ctx.fillStyle = theme?.palette.text.primary ?? 'black'
       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,9 +292,26 @@ 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, apolloSelectedFeature?.parent)
+    let cdsStartPx = 0
+    let cdsTop = 0
     for (const cdsRow of cdsLocations) {
       let prevCDSTop = 0
       let prevCDSEndPx = 0
@@ -238,8 +319,8 @@ function draw(
       for (const cds of cdsRow.sort((a, b) => a.max - b.max)) {
         if (
           (apolloSelectedFeature &&
-            featureTypeOntology.isTypeOf(apolloSelectedFeature.type, 'CDS') &&
-            _id === apolloSelectedFeature.parent?._id) ||
+            isSelected &&
+            featureTypeOntology.isTypeOf(apolloSelectedFeature.type, 'CDS')) ||
           !deepSetHas(renderedCDS, cds)
         ) {
           const cdsWidthPx = (cds.max - cds.min) / bpPerPx
@@ -249,12 +330,12 @@ function draw(
               coord: cds.min,
               regionNumber: displayedRegionIndex,
             })?.offsetPx ?? 0) - offsetPx
-          const cdsStartPx = reversed ? minX - cdsWidthPx : minX
+          cdsStartPx = reversed ? minX - cdsWidthPx : minX
           ctx.fillStyle = theme?.palette.text.primary ?? 'black'
           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(
@@ -269,8 +350,8 @@ function draw(
             ctx.fillStyle = cdsColorCode
             ctx.fillStyle =
               apolloSelectedFeature &&
-              featureTypeOntology.isTypeOf(apolloSelectedFeature.type, 'CDS') &&
-              _id === apolloSelectedFeature.parent?._id
+              isSelected &&
+              featureTypeOntology.isTypeOf(apolloSelectedFeature.type, 'CDS')
                 ? 'rgb(0,0,0)'
                 : cdsColorCode
             ctx.fillRect(
@@ -286,7 +367,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 +407,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)
   }
 }
 
@@ -360,7 +459,15 @@ function drawHover(
   stateModel: LinearApolloSixFrameDisplay,
   ctx: CanvasRenderingContext2D,
 ) {
-  const { apolloHover, apolloRowHeight, lgv, highestRow, session } = stateModel
+  const {
+    apolloHover,
+    apolloRowHeight,
+    filteredTranscripts,
+    lgv,
+    highestRow,
+    session,
+    showFeatureLabels,
+  } = stateModel
   if (!apolloHover) {
     return
   }
@@ -373,6 +480,12 @@ function drawHover(
   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 +495,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 +513,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 +524,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,
             ),
           ]
@@ -453,6 +567,7 @@ function onMouseDown(
       currentMousePosition,
       draggableFeature.feature,
       draggableFeature.edge,
+      true,
     )
   }
 }
@@ -490,33 +605,53 @@ function onMouseUp(
   const { session } = stateModel
   const { apolloDataStore } = session
   const { featureTypeOntology } = apolloDataStore.ontologyManager
-  if (featureAndGlyphUnderMouse?.cds) {
-    const { cds, feature } = featureAndGlyphUnderMouse
-    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)
-        break
-      }
+  if (!featureAndGlyphUnderMouse) {
+    return
+  }
+  const { feature } = featureAndGlyphUnderMouse
+  stateModel.setSelectedFeature(feature)
+  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
     }
-  } 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)
   }
 }
 
+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 {
-  const { session } = stateModel
+  const { filteredTranscripts, session } = stateModel
   const { apolloDataStore } = session
   const { featureTypeOntology } = apolloDataStore.ontologyManager
   if (!featureTypeOntology) {
@@ -526,63 +661,57 @@ function getDraggableFeatureInfo(
   if (cds === null) {
     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) {
+  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
   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
+    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,7 +721,8 @@ function drawTooltip(
   display: LinearApolloSixFrameDisplayMouseEvents,
   context: CanvasRenderingContext2D,
 ): void {
-  const { apolloHover, apolloRowHeight, lgv, theme } = display
+  const { apolloHover, apolloRowHeight, filteredTranscripts, lgv, theme } =
+    display
   if (!apolloHover) {
     return
   }
@@ -604,6 +734,12 @@ function drawTooltip(
   if (!position) {
     return
   }
+  const featureID: string | undefined = feature.attributes
+    .get('gff_id')
+    ?.toString()
+  if (featureID && filteredTranscripts.includes(featureID)) {
+    return
+  }
   const { layoutIndex } = position
   const { bpPerPx, displayedRegions, offsetPx } = lgv
   const displayedRegion = displayedRegions[layoutIndex]
@@ -675,6 +811,7 @@ function getContextMenuItems(
     apolloHover,
     apolloInternetAccount: internetAccount,
     changeManager,
+    filteredTranscripts,
     regions,
     selectedFeature,
     session,
@@ -756,48 +893,30 @@ function getContextMenuItems(
         )
       },
     },
-    {
-      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,
-        )
-      },
-    },
   )
   const { featureTypeOntology } = session.apolloDataStore.ontologyManager
   if (!featureTypeOntology) {
     throw new Error('featureTypeOntology is undefined')
   }
-  if (
-    featureTypeOntology.isTypeOf(sourceFeature.type, 'transcript') &&
-    isSessionModelWithWidgets(session)
-  ) {
+  if (featureTypeOntology.isTypeOf(sourceFeature.type, 'gene')) {
     menuItems.push({
-      label: 'Edit transcript details',
+      label: 'Filter alternate transcripts',
       onClick: () => {
-        const apolloTranscriptWidget = session.addWidget(
-          'ApolloTranscriptDetails',
-          'apolloTranscriptDetails',
-          {
-            feature: sourceFeature,
-            assembly: currentAssemblyId,
-            changeManager,
-            refName: region.refName,
-          },
+        ;(session as unknown as AbstractSessionModel).queueDialog(
+          (doneCallback) => [
+            FilterTranscripts,
+            {
+              handleClose: () => {
+                doneCallback()
+              },
+              sourceFeature,
+              filteredTranscripts: getSnapshot(filteredTranscripts),
+              onUpdate: (forms: string[]) => {
+                display.updateFilteredTranscripts(forms)
+              },
+            },
+          ],
         )
-        session.showWidget(apolloTranscriptWidget)
       },
     })
   }

package/src/LinearApolloSixFrameDisplay/stateModel/base.ts

@@ -10,6 +10,7 @@ import { type AnyConfigurationSchemaType } from '@jbrowse/core/configuration/con
 import { BaseDisplay } from '@jbrowse/core/pluggableElementTypes'
 import {
   type AbstractSessionModel,
+  type SessionWithWidgets,
   getContainingView,
   getSession,
 } from '@jbrowse/core/util'
@@ -36,6 +37,7 @@ export function baseModelFactory(
       configuration: ConfigurationReference(configSchema),
       graphical: true,
       table: false,
+      showFeatureLabels: true,
       heightPreConfig: types.maybe(
         types.refinement(
           'displayHeight',
@@ -164,6 +166,9 @@ export function baseModelFactory(
         self.graphical = true
         self.table = true
       },
+      toggleShowFeatureLabels() {
+        self.showFeatureLabels = !self.showFeatureLabels
+      },
       updateFilteredFeatureTypes(types: string[]) {
         self.filteredFeatureTypes = cast(types)
       },
@@ -172,7 +177,7 @@ export function baseModelFactory(
       const { filteredFeatureTypes, trackMenuItems: superTrackMenuItems } = self
       return {
         trackMenuItems() {
-          const { graphical, table } = self
+          const { graphical, table, showFeatureLabels } = self
           return [
             ...superTrackMenuItems(),
             {
@@ -203,6 +208,14 @@ export function baseModelFactory(
                     self.showGraphicalAndTable()
                   },
                 },
+                {
+                  label: 'Feature Labels',
+                  type: 'checkbox',
+                  checked: showFeatureLabels,
+                  onClick: () => {
+                    self.toggleShowFeatureLabels()
+                  },
+                },
               ],
             },
             {
@@ -236,6 +249,34 @@ export function baseModelFactory(
           self.session as unknown as ApolloSessionModel
         ).apolloSetSelectedFeature(feature)
       },
+      showFeatureDetailsWidget(
+        feature: AnnotationFeature,
+        customWidgetNameAndId?: [string, string],
+      ) {
+        const [region] = self.regions
+        const { assemblyName, refName } = region
+        const assembly = self.getAssemblyId(assemblyName)
+        if (!assembly) {
+          return
+        }
+        const { session } = self
+        const { changeManager } = session.apolloDataStore
+        const [widgetName, widgetId] = customWidgetNameAndId ?? [
+          'ApolloFeatureDetailsWidget',
+          'apolloFeatureDetailsWidget',
+        ]
+        const apolloFeatureWidget = (
+          session as unknown as SessionWithWidgets
+        ).addWidget(widgetName, widgetId, {
+          feature,
+          assembly,
+          refName,
+          changeManager,
+        })
+        ;(session as unknown as SessionWithWidgets).showWidget(
+          apolloFeatureWidget,
+        )
+      },
       afterAttach() {
         addDisposer(
           self,