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

package/src/LinearApolloDisplay/glyphs/GeneGlyph.ts

@@ -10,21 +10,24 @@ import {
   isSessionModelWithWidgets,
 } from '@jbrowse/core/util'
 import { type LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
-import SkipNextRoundedIcon from '@mui/icons-material/SkipNextRounded'
-import SkipPreviousRoundedIcon from '@mui/icons-material/SkipPreviousRounded'
 import { alpha } from '@mui/material'
 
 import { type OntologyRecord } from '../../OntologyManager'
 import { MergeExons, MergeTranscripts, SplitExon } from '../../components'
-import { type ApolloSessionModel } from '../../session'
 import {
   type MousePosition,
   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'
@@ -92,9 +95,9 @@ function drawBackground(
   stateModel: LinearApolloDisplayRendering,
   displayedRegionIndex: number,
   row: number,
-  color: string,
+  color?: string,
 ) {
-  const { apolloRowHeight, lgv, session } = stateModel
+  const { apolloRowHeight, lgv, session, theme } = stateModel
   const { bpPerPx, displayedRegions, offsetPx } = lgv
   const displayedRegion = displayedRegions[displayedRegionIndex]
   const { refName, reversed } = displayedRegion
@@ -118,7 +121,20 @@ function drawBackground(
   const topLevelFeatureHeight =
     getRowCount(feature, featureTypeOntology) * apolloRowHeight
 
-  ctx.fillStyle = color
+  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,
@@ -127,18 +143,6 @@ function drawBackground(
   )
 }
 
-function backgroundColorForFeature(
-  session: ApolloSessionModel,
-  featureType: string,
-): string {
-  const color = readConfObject(
-    session.getPluginConfiguration(),
-    'backgroundColorForFeature',
-    { featureType },
-  ) as string
-  return color
-}
-
 function draw(
   ctx: CanvasRenderingContext2D,
   feature: AnnotationFeature,
@@ -163,25 +167,7 @@ function draw(
   }
 
   // Draw background for gene
-  drawBackground(
-    ctx,
-    feature,
-    stateModel,
-    displayedRegionIndex,
-    row,
-    alpha(theme.palette.background.paper, 0.6),
-  )
-
-  if (featureTypeOntology.isTypeOf(feature.type, 'pseudogene')) {
-    drawBackground(
-      ctx,
-      feature,
-      stateModel,
-      displayedRegionIndex,
-      row,
-      backgroundColorForFeature(session, 'pseudogenic_transcript'),
-    )
-  }
+  drawBackground(ctx, feature, stateModel, displayedRegionIndex, row)
 
   // Draw lines on different rows for each transcript
   let currentRow = 0
@@ -197,30 +183,7 @@ function draw(
     if (!transcriptChildren) {
       continue
     }
-
     const cdsCount = getCDSCount(transcript, featureTypeOntology)
-    if (cdsCount === 0) {
-      drawBackground(
-        ctx,
-        transcript,
-        stateModel,
-        displayedRegionIndex,
-        currentRow,
-        backgroundColorForFeature(session, 'nonCodingTranscript'),
-      )
-    }
-    if (
-      featureTypeOntology.isTypeOf(transcript.type, 'pseudogenic_transcript')
-    ) {
-      drawBackground(
-        ctx,
-        transcript,
-        stateModel,
-        displayedRegionIndex,
-        currentRow,
-        backgroundColorForFeature(session, 'pseudogenic_transcript'),
-      )
-    }
 
     for (const [, childFeature] of transcriptChildren) {
       if (!featureTypeOntology.isTypeOf(childFeature.type, 'CDS')) {
@@ -471,19 +434,21 @@ function drawLine(
   ctx.strokeStyle = theme.palette.text.primary
   const { strand = 1 } = transcript
   ctx.beginPath()
+  // 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 - (strand === -1 ? 5 : 0)
-  const lineEnd = startPx + widthPx + (strand === -1 ? 0 : 5)
+  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 + (strand === -1 ? 0 : 3)
-  const arrowsEnd = lineEnd - (strand === -1 ? 3 : 0)
+  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 = strand === -1 ? 3 : -3
+  const offset = effectiveStrand === -1 ? 3 : -3
   const arrowRange =
-    strand === -1
+    effectiveStrand === -1
       ? range(arrowsStart, arrowsEnd, 20)
       : range(arrowsEnd, arrowsStart, 20)
   for (const arrowLocation of arrowRange) {
@@ -736,45 +701,6 @@ function getRowForFeature(
   return
 }
 
-function selectFeatureAndOpenWidget(
-  stateModel: LinearApolloDisplayMouseEvents,
-  feature: AnnotationFeature,
-) {
-  if (stateModel.apolloDragging) {
-    return
-  }
-  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)
-  }
-}
-
 function onMouseDown(
   stateModel: LinearApolloDisplay,
   currentMousePosition: MousePositionWithFeature,
@@ -899,131 +825,6 @@ 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')
-}
-
-interface AdjacentExons {
-  upstream: AnnotationFeature | undefined
-  downstream: AnnotationFeature | undefined
-}
-
-function getAdjacentExons(
-  currentExon: AnnotationFeature,
-  display: LinearApolloDisplayMouseEvents,
-  mousePosition: MousePositionWithFeature,
-  session: ApolloSessionModel,
-): AdjacentExons {
-  const lgv = getContainingView(
-    display as BaseDisplayModel,
-  ) as unknown as LinearGenomeViewModel
-
-  // Genomic coords of current view
-  const viewGenomicLeft = mousePosition.bp - lgv.bpPerPx * mousePosition.x
-  const viewGenomicRight = viewGenomicLeft + lgv.coarseTotalBp
-  if (!currentExon.parent) {
-    return { upstream: undefined, downstream: undefined }
-  }
-  const transcript = currentExon.parent
-  if (!transcript.children) {
-    throw new Error(`Error getting children of ${transcript._id}`)
-  }
-  const { featureTypeOntology } = session.apolloDataStore.ontologyManager
-  if (!featureTypeOntology) {
-    throw new Error('featureTypeOntology is undefined')
-  }
-
-  let exons = []
-  for (const [, child] of transcript.children) {
-    if (featureTypeOntology.isTypeOf(child.type, 'exon')) {
-      exons.push(child)
-    }
-  }
-  const adjacentExons: AdjacentExons = {
-    upstream: undefined,
-    downstream: undefined,
-  }
-  exons = exons.sort((a, b) => (a.min < b.min ? -1 : 1))
-  for (const exon of exons) {
-    if (exon.min > viewGenomicRight) {
-      adjacentExons.downstream = exon
-      break
-    }
-  }
-  exons = exons.sort((a, b) => (a.min > b.min ? -1 : 1))
-  for (const exon of exons) {
-    if (exon.max < viewGenomicLeft) {
-      adjacentExons.upstream = exon
-      break
-    }
-  }
-  if (transcript.strand === -1) {
-    const newUpstream = adjacentExons.downstream
-    adjacentExons.downstream = adjacentExons.upstream
-    adjacentExons.upstream = newUpstream
-  }
-  return adjacentExons
-}
-
-function getStreamIcon(
-  strand: 1 | -1 | undefined,
-  isUpstream: boolean,
-  isFlipped: boolean | undefined,
-) {
-  // This is the icon you would use for strand=1, downstream, straight
-  // (non-flipped) view
-  let icon = SkipNextRoundedIcon
-
-  if (strand === -1) {
-    icon = SkipPreviousRoundedIcon
-  }
-  if (isUpstream) {
-    icon =
-      icon === SkipPreviousRoundedIcon
-        ? SkipNextRoundedIcon
-        : SkipPreviousRoundedIcon
-  }
-  if (isFlipped) {
-    icon =
-      icon === SkipPreviousRoundedIcon
-        ? SkipNextRoundedIcon
-        : SkipPreviousRoundedIcon
-  }
-  return icon
-}
-
 function getContextMenuItems(
   display: LinearApolloDisplayMouseEvents,
   mousePosition: MousePositionWithFeature,

package/src/LinearApolloDisplay/glyphs/util.ts

@@ -0,0 +1,19 @@
+import { type ContentBlock } from '@jbrowse/core/util/blockTypes'
+
+import { type LinearApolloDisplay } from '../stateModel'
+
+export function getLeftPx(
+  display: LinearApolloDisplay,
+  feature: { max: number; min: number },
+  block: ContentBlock,
+) {
+  const { lgv } = display
+  const { bpPerPx, offsetPx } = lgv
+  const blockLeftPx = block.offsetPx - offsetPx
+  const featureLeftBpDistanceFromBlockLeftBp = block.reversed
+    ? block.end - feature.max
+    : feature.min - block.start
+  const featureLeftPxDistanceFromBlockLeftPx =
+    featureLeftBpDistanceFromBlockLeftBp / bpPerPx
+  return blockLeftPx + featureLeftPxDistanceFromBlockLeftPx
+}

package/src/LinearApolloReferenceSequenceDisplay/drawSequenceOverlay.ts

@@ -0,0 +1,181 @@
+import { type AnnotationFeature } from '@apollo-annotation/mst'
+import { type Frame, getFrame } from '@jbrowse/core/util'
+import { type BlockSet, type ContentBlock } from '@jbrowse/core/util/blockTypes'
+import { type Theme } from '@mui/material'
+
+import { type ApolloSessionModel, type HoveredFeature } from '../session'
+
+function getSeqRow(
+  strand: 1 | -1 | undefined,
+  bpPerPx: number,
+): number | undefined {
+  if (bpPerPx > 1 || strand === undefined) {
+    return
+  }
+  return strand === 1 ? 3 : 4
+}
+
+function getTranslationRow(frame: Frame, bpPerPx: number) {
+  const offset = bpPerPx <= 1 ? 2 : 0
+  switch (frame) {
+    case 3: {
+      return 0
+    }
+    case 2: {
+      return 1
+    }
+    case 1: {
+      return 2
+    }
+    case -1: {
+      return 3 + offset
+    }
+    case -2: {
+      return 4 + offset
+    }
+    case -3: {
+      return 5 + offset
+    }
+  }
+}
+
+function getLeftPx(
+  feature: { min: number; max: number },
+  bpPerPx: number,
+  offsetPx: number,
+  block: ContentBlock,
+) {
+  const blockLeftPx = block.offsetPx - offsetPx
+  const featureLeftBpDistanceFromBlockLeftBp = block.reversed
+    ? block.end - feature.max
+    : feature.min - block.start
+  const featureLeftPxDistanceFromBlockLeftPx =
+    featureLeftBpDistanceFromBlockLeftBp / bpPerPx
+  return blockLeftPx + featureLeftPxDistanceFromBlockLeftPx
+}
+
+function fillAndStrokeRect(
+  ctx: CanvasRenderingContext2D,
+  left: number,
+  top: number,
+  width: number,
+  height: number,
+  theme: Theme,
+  selected = false,
+) {
+  ctx.fillStyle = selected
+    ? theme.palette.action.disabled
+    : theme.palette.action.focus
+  ctx.fillRect(left, top, width, height)
+  ctx.strokeStyle = selected
+    ? theme.palette.text.secondary
+    : theme.palette.text.primary
+  ctx.strokeStyle = theme.palette.text.primary
+  ctx.strokeRect(left, top, width, height)
+}
+
+function drawHighlight(
+  ctx: CanvasRenderingContext2D,
+  feature: AnnotationFeature,
+  bpPerPx: number,
+  offsetPx: number,
+  rowHeight: number,
+  block: ContentBlock,
+  theme: Theme,
+  selected = false,
+) {
+  const row = getSeqRow(feature.strand, bpPerPx)
+  if (!row) {
+    return
+  }
+  const left = getLeftPx(feature, bpPerPx, offsetPx, block)
+  const width = feature.length / bpPerPx
+  const top = row * rowHeight
+  fillAndStrokeRect(ctx, left, top, width, rowHeight, theme, selected)
+}
+
+function drawCDSHighlight(
+  ctx: CanvasRenderingContext2D,
+  feature: AnnotationFeature,
+  bpPerPx: number,
+  offsetPx: number,
+  rowHeight: number,
+  block: ContentBlock,
+  theme: Theme,
+  selected = false,
+) {
+  const parentFeature = feature.parent
+  if (!parentFeature) {
+    return
+  }
+  const cdsLocs = parentFeature.cdsLocations.find((loc) => {
+    const min = loc.at(feature.strand === 1 ? 0 : -1)?.min
+    const max = loc.at(feature.strand === 1 ? -1 : 0)?.max
+    return feature.min === min && feature.max === max
+  })
+  if (!cdsLocs) {
+    return
+  }
+  for (const loc of cdsLocs) {
+    const frame = getFrame(loc.min, loc.max, feature.strand ?? 1, loc.phase)
+    const row = getTranslationRow(frame, bpPerPx)
+    const left = getLeftPx(loc, bpPerPx, offsetPx, block)
+    const top = row * rowHeight
+    const width = (loc.max - loc.min) / bpPerPx
+    fillAndStrokeRect(ctx, left, top, width, rowHeight, theme, selected)
+  }
+}
+
+export function drawSequenceOverlay(
+  canvas: HTMLCanvasElement,
+  ctx: CanvasRenderingContext2D,
+  hoveredFeature: HoveredFeature | undefined,
+  selectedFeature: AnnotationFeature | undefined,
+  rowHeight: number,
+  theme: Theme,
+  session: ApolloSessionModel,
+  bpPerPx: number,
+  offsetPx: number,
+  dynamicBlocks: BlockSet,
+) {
+  const { featureTypeOntology } = session.apolloDataStore.ontologyManager
+  if (!featureTypeOntology) {
+    throw new Error('featureTypeOntology is undefined')
+  }
+  for (const block of dynamicBlocks.contentBlocks) {
+    ctx.save()
+    ctx.beginPath()
+    const blockLeftPx = block.offsetPx - offsetPx
+    ctx.rect(blockLeftPx, 0, block.widthPx, canvas.height)
+    ctx.clip()
+    for (const feature of [
+      selectedFeature,
+      hoveredFeature?.feature,
+    ].filter<AnnotationFeature>((f) => f !== undefined)) {
+      if (featureTypeOntology.isTypeOf(feature.type, 'CDS')) {
+        drawCDSHighlight(
+          ctx,
+          feature,
+          bpPerPx,
+          offsetPx,
+          rowHeight,
+          block,
+          theme,
+          true,
+        )
+      } else {
+        drawHighlight(
+          ctx,
+          feature,
+          bpPerPx,
+          offsetPx,
+          rowHeight,
+          block,
+          theme,
+          true,
+        )
+      }
+    }
+    ctx.restore()
+  }
+}