@apollo-annotation/jbrowse-plugin-apollo 0.3.12 → 1.0.0

package/src/LinearApolloDisplay/glyphs/TranscriptGlyph.ts

@@ -0,0 +1,291 @@
+import type { AnnotationFeature } from '@apollo-annotation/mst'
+import type { MenuItem } from '@jbrowse/core/ui'
+import {
+  type AbstractSessionModel,
+  isSessionModelWithWidgets,
+} from '@jbrowse/core/util'
+import type { ContentBlock } from '@jbrowse/core/util/blockTypes'
+
+import { DuplicateTranscript, MergeTranscripts } from '../../components'
+import {
+  isCDSFeature,
+  isExonFeature,
+  isSelectedFeature,
+} from '../../util/glyphUtils'
+import type { LinearApolloDisplay } from '../stateModel'
+
+import { boxGlyph } from './BoxGlyph'
+import type { Glyph, LayoutRow, OverlayType } from './Glyph'
+import { drawOverlayBox, getFeatureBox, getLeftPx } from './util'
+
+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 drawTranscriptLine(
+  display: LinearApolloDisplay,
+  ctx: CanvasRenderingContext2D,
+  transcript: AnnotationFeature,
+  row: number,
+  block: ContentBlock,
+) {
+  const { apolloRowHeight, lgv, theme } = display
+  const { bpPerPx } = lgv
+  const { reversed } = block
+  const left = Math.round(getLeftPx(display, transcript, block))
+  const width = Math.round(transcript.length / bpPerPx)
+  const top = Math.round(apolloRowHeight / 2) + row * apolloRowHeight
+  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
+  let lineStart = left - (effectiveStrand === -1 ? 5 : 0)
+  let lineEnd = left + width + (effectiveStrand === -1 ? 0 : 5)
+  // Limit the transcript line to the width of the screen to avoid drawing
+  // too many arrows
+  lineStart = Math.max(lineStart, 0)
+  lineEnd = Math.min(lineEnd, globalThis.innerWidth)
+  ctx.moveTo(lineStart, top)
+  ctx.lineTo(lineEnd, top)
+  // 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, top + offset)
+    ctx.lineTo(arrowLocation, top)
+    ctx.lineTo(arrowLocation + offset, top - offset)
+  }
+  ctx.stroke()
+}
+
+function getExonChildren(
+  display: LinearApolloDisplay,
+  transcript: AnnotationFeature,
+): AnnotationFeature[] {
+  const { children } = transcript
+  if (!children) {
+    return []
+  }
+  const { session } = display
+  return [...children.values()].filter((child) => isExonFeature(child, session))
+}
+
+function getNonExonChildren(
+  display: LinearApolloDisplay,
+  transcript: AnnotationFeature,
+): AnnotationFeature[] {
+  const { children } = transcript
+  if (!children) {
+    return []
+  }
+  const { session } = display
+  return [...children.values()].filter(
+    (child) => !isExonFeature(child, session),
+  )
+}
+
+function getRowCount(display: LinearApolloDisplay, feature: AnnotationFeature) {
+  return getLayout(display, feature).byRow.length
+}
+
+function draw(
+  display: LinearApolloDisplay,
+  ctx: CanvasRenderingContext2D,
+  transcript: AnnotationFeature,
+  row: number,
+  rowInFeature: number,
+  block: ContentBlock,
+) {
+  drawTranscriptLine(display, ctx, transcript, row, block)
+  const { selectedFeature } = display
+  if (isSelectedFeature(transcript, selectedFeature)) {
+    drawOverlay(display, ctx, transcript, row, block, 'select')
+  }
+}
+
+function drawOverlay(
+  display: LinearApolloDisplay,
+  overlayCtx: CanvasRenderingContext2D,
+  transcript: AnnotationFeature,
+  row: number,
+  block: ContentBlock,
+  overlayType: OverlayType,
+) {
+  const { apolloRowHeight } = display
+  const [top, left, width] = getFeatureBox(display, transcript, row, block)
+  const height = apolloRowHeight * getRowCount(display, transcript)
+  drawOverlayBox(
+    display,
+    overlayCtx,
+    left,
+    top,
+    width,
+    height,
+    transcript,
+    overlayType,
+  )
+}
+
+function getLayout(display: LinearApolloDisplay, feature: AnnotationFeature) {
+  const layout = {
+    byFeature: new Map([[feature._id, 0]]),
+    byRow: [[{ feature, rowInFeature: 0 }]],
+    min: feature.min,
+    max: feature.max,
+  }
+  const { children } = feature
+  if (!children) {
+    return layout
+  }
+  layout.byRow = []
+  const exons = getExonChildren(display, feature)
+  const nonExonChildren = getNonExonChildren(display, feature)
+  layout.byFeature.set(feature._id, 0)
+  // Usually non-coding (no CDS) transcript
+  if (nonExonChildren.length === 0) {
+    const row: LayoutRow = []
+    row.push({ feature, rowInFeature: 0 })
+    for (const exon of exons) {
+      row.push({ feature: exon, rowInFeature: 0 })
+      layout.byFeature.set(exon._id, 0)
+    }
+    layout.byRow.push(row)
+    return layout
+  }
+  // eslint-disable-next-line @typescript-eslint/unbound-method
+  const { getGlyph, session } = display
+  let extraOffset = 0
+  for (const [idx, child] of nonExonChildren.entries()) {
+    const row: LayoutRow = []
+    row.push({ feature, rowInFeature: idx + extraOffset })
+    if (isCDSFeature(child, session)) {
+      for (const exon of exons) {
+        row.push({ feature: exon, rowInFeature: extraOffset })
+        layout.byFeature.set(exon._id, extraOffset)
+      }
+      row.push({ feature: child, rowInFeature: extraOffset })
+      layout.byFeature.set(child._id, extraOffset)
+    } else {
+      const glyph = getGlyph(child)
+      const rowCount = glyph.getLayout(display, child).byRow.length
+      for (let i = 0; i < rowCount; i++) {
+        row.push({ feature: child, rowInFeature: i })
+        layout.byFeature.set(child._id, i)
+      }
+      extraOffset += rowCount - 1
+    }
+    layout.byRow.push(row)
+  }
+  return layout
+}
+
+function getContextMenuItems(
+  display: LinearApolloDisplay,
+  feature: AnnotationFeature,
+): MenuItem[] {
+  const { changeManager, regions, selectedFeature, session } = display
+  const [region] = regions
+  const currentAssemblyId = display.getAssemblyId(region.assemblyName)
+  const menuItems: MenuItem[] = []
+  if (isSessionModelWithWidgets(session)) {
+    menuItems.splice(1, 0, {
+      label: 'Open transcript editor',
+      onClick: () => {
+        const apolloTranscriptWidget = session.addWidget(
+          'ApolloTranscriptDetails',
+          'apolloTranscriptDetails',
+          {
+            feature,
+            assembly: currentAssemblyId,
+            changeManager,
+            refName: region.refName,
+          },
+        )
+        session.showWidget(apolloTranscriptWidget)
+      },
+    })
+  }
+  menuItems.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)
+              },
+            },
+          ],
+        )
+      },
+    },
+    {
+      label: 'Duplicate feature',
+      onClick: () => {
+        ;(session as unknown as AbstractSessionModel).queueDialog(
+          (doneCallback) => [
+            DuplicateTranscript,
+            {
+              session,
+              handleClose: () => {
+                doneCallback()
+              },
+              changeManager,
+              sourceFeature: feature,
+              sourceAssemblyId: currentAssemblyId,
+              selectedFeature,
+              setSelectedFeature: (feature?: AnnotationFeature) => {
+                display.setSelectedFeature(feature)
+              },
+            },
+          ],
+        )
+      },
+    },
+  )
+  return menuItems
+}
+
+// False positive here, none of these functions use "this"
+/* eslint-disable @typescript-eslint/unbound-method */
+const { drawDragPreview } = boxGlyph
+/* eslint-enable @typescript-eslint/unbound-method */
+
+export const transcriptGlyph: Glyph = {
+  draw,
+  drawDragPreview,
+  drawOverlay,
+  getContextMenuItems,
+  getLayout,
+  isDraggable: false,
+}

package/src/LinearApolloDisplay/glyphs/util.ts

@@ -1,6 +1,12 @@
+import type { AnnotationFeature } from '@apollo-annotation/mst'
 import type { ContentBlock } from '@jbrowse/core/util/blockTypes'
+import type {} from '../../util'
+import { alpha } from '@mui/material'
 
 import type { LinearApolloDisplay } from '../stateModel'
+import type { MousePosition } from '../stateModel/mouseEvents'
+
+import type { OverlayType } from './Glyph'
 
 export function getLeftPx(
   display: LinearApolloDisplay,
@@ -18,6 +24,60 @@ export function getLeftPx(
   return blockLeftPx + featureLeftPxDistanceFromBlockLeftPx
 }
 
+export function getFeatureBox(
+  display: LinearApolloDisplay,
+  feature: { max: number; min: number },
+  row: number,
+  block: ContentBlock,
+): [number, number, number, number] {
+  const { apolloRowHeight, lgv } = display
+  const { bpPerPx } = lgv
+  const left = Math.round(getLeftPx(display, feature, block))
+  const top = row * apolloRowHeight
+  const width = Math.round((feature.max - feature.min) / bpPerPx)
+  const height = apolloRowHeight
+  return [top, left, width, height]
+}
+
+function getOverlayColor(
+  display: LinearApolloDisplay,
+  feature: AnnotationFeature,
+  overlayType: OverlayType,
+): string | undefined {
+  const { theme } = display
+  switch (overlayType) {
+    case 'select': {
+      return theme.palette.action.disabled
+    }
+    case 'hover': {
+      return theme.palette.action.focus
+    }
+    case 'highlight': {
+      const { attributes } = feature
+      const colorAttribute = attributes.get('apollo_color')
+      return colorAttribute?.[0]
+    }
+  }
+}
+
+export function drawOverlayBox(
+  display: LinearApolloDisplay,
+  ctx: CanvasRenderingContext2D,
+  left: number,
+  top: number,
+  width: number,
+  height: number,
+  feature: AnnotationFeature,
+  overlayType: OverlayType,
+) {
+  const color = getOverlayColor(display, feature, overlayType)
+  if (!color) {
+    return
+  }
+  ctx.fillStyle = alpha(color, 0.3)
+  ctx.fillRect(left, top, width, height)
+}
+
 /**
  * Perform a canvas strokeRect, but have the stroke be contained within the
  * given rect instead of centered on it.
@@ -34,3 +94,30 @@ export function strokeRectInner(
   ctx.lineWidth = 1
   ctx.strokeRect(left + 0.5, top + 0.5, width - 1, height - 1)
 }
+
+/** @returns undefined if mouse not on the edge of this feature, otherwise 'start' or 'end' depending on which edge */
+export function isMouseOnFeatureEdge(
+  mousePosition: MousePosition,
+  feature: { min: number; max: number },
+  stateModel: LinearApolloDisplay,
+) {
+  const { refName, regionNumber, x } = mousePosition
+  const { lgv } = stateModel
+  const { offsetPx } = lgv
+  const minPxInfo = lgv.bpToPx({ refName, coord: feature.min, regionNumber })
+  const maxPxInfo = lgv.bpToPx({ refName, coord: feature.max, regionNumber })
+  if (minPxInfo !== undefined && maxPxInfo !== undefined) {
+    const minPx = minPxInfo.offsetPx - offsetPx
+    const maxPx = maxPxInfo.offsetPx - offsetPx
+    if (Math.abs(maxPx - minPx) < 8) {
+      return
+    }
+    if (Math.abs(minPx - x) < 4) {
+      return 'min'
+    }
+    if (Math.abs(maxPx - x) < 4) {
+      return 'max'
+    }
+  }
+  return
+}

package/src/LinearApolloDisplay/stateModel/base.ts

@@ -27,10 +27,18 @@ import {
   types,
 } from '@jbrowse/mobx-state-tree'
 import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
+import FactCheckIcon from '@mui/icons-material/FactCheck'
+import TrackChangesIcon from '@mui/icons-material/TrackChanges'
 import { autorun } from 'mobx'
 
 import type { ApolloInternetAccountModel } from '../../ApolloInternetAccount/model'
+import {
+  DownloadGFF3,
+  Export as ExportIcon,
+} from '../../components/DownloadGFF3'
 import { FilterFeatures } from '../../components/FilterFeatures'
+import { ViewChangeLog } from '../../components/ViewChangeLog'
+import { ViewCheckResults } from '../../components/ViewCheckResults'
 import type { ApolloSessionModel, HoveredFeature } from '../../session'
 import type { ApolloRootModel } from '../../types'
 import { EditZoomThresholdDialog } from '../../util/displayUtils'
@@ -276,6 +284,81 @@ export function baseModelFactory(
                 )
               },
             },
+            {
+              label: 'Export annotations',
+              icon: ExportIcon,
+              onClick: () => {
+                const [region] = self.regions
+                const { assemblyName } = region
+                const assembly = self.getAssemblyId(assemblyName)
+                if (!assembly) {
+                  return
+                }
+                const session = self.session as unknown as ApolloSessionModel
+                ;(session as unknown as AbstractSessionModel).queueDialog(
+                  (doneCallback) => [
+                    DownloadGFF3,
+                    {
+                      session,
+                      handleClose: () => {
+                        doneCallback()
+                      },
+                      assembly,
+                    },
+                  ],
+                )
+              },
+            },
+            {
+              label: 'View Change Log',
+              icon: TrackChangesIcon,
+              onClick: () => {
+                const [region] = self.regions
+                const { assemblyName } = region
+                const assembly = self.getAssemblyId(assemblyName)
+                if (!assembly) {
+                  return
+                }
+                const session = self.session as unknown as ApolloSessionModel
+                ;(session as unknown as AbstractSessionModel).queueDialog(
+                  (doneCallback) => [
+                    ViewChangeLog,
+                    {
+                      session,
+                      handleClose: () => {
+                        doneCallback()
+                      },
+                      assembly,
+                    },
+                  ],
+                )
+              },
+            },
+            {
+              label: 'View Check Results',
+              icon: FactCheckIcon,
+              onClick: () => {
+                const [region] = self.regions
+                const { assemblyName } = region
+                const assembly = self.getAssemblyId(assemblyName)
+                if (!assembly) {
+                  return
+                }
+                const session = self.session as unknown as ApolloSessionModel
+                ;(session as unknown as AbstractSessionModel).queueDialog(
+                  (doneCallback) => [
+                    ViewCheckResults,
+                    {
+                      session,
+                      handleClose: () => {
+                        doneCallback()
+                      },
+                      assembly,
+                    },
+                  ],
+                )
+              },
+            },
           ]
         },
       }