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

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()
+  }
+}

package/src/LinearApolloReferenceSequenceDisplay/drawSequenceTrack.ts

@@ -0,0 +1,218 @@
+import { defaultCodonTable, getFrame, revcom } from '@jbrowse/core/util'
+import { type BlockSet } from '@jbrowse/core/util/blockTypes'
+import { type Theme } from '@mui/material'
+
+import { type ApolloSessionModel } from '../session'
+
+function colorCode(letter: string, theme: Theme) {
+  const letterUpper = letter.toUpperCase()
+  if (
+    letterUpper === 'A' ||
+    letterUpper === 'C' ||
+    letterUpper === 'G' ||
+    letterUpper === 'T'
+  ) {
+    return theme.palette.bases[letterUpper].main.toString()
+  }
+  return 'lightgray'
+}
+
+function codonColorCode(letter: string, theme: Theme, highContrast?: boolean) {
+  if (letter === 'M') {
+    return theme.palette.startCodon
+  }
+  if (letter === '*') {
+    return highContrast ? theme.palette.text.primary : theme.palette.stopCodon
+  }
+  return
+}
+
+function drawLetter(
+  seqTrackctx: CanvasRenderingContext2D,
+  left: number,
+  top: number,
+  width: number,
+  letter: string,
+) {
+  const fontSize = Math.min(width, 10)
+  seqTrackctx.fillStyle = '#000'
+  seqTrackctx.font = `${fontSize}px`
+  const textWidth = seqTrackctx.measureText(letter).width
+  const textX = left + (width - textWidth) / 2
+  seqTrackctx.fillText(letter, textX, top + 10)
+}
+
+function drawTranslationFrameBackgrounds(
+  canvas: HTMLCanvasElement,
+  ctx: CanvasRenderingContext2D,
+  bpPerPx: number,
+  theme: Theme,
+  dynamicBlocks: BlockSet,
+  highContrast: boolean,
+  sequenceRowHeight: number,
+) {
+  const frames =
+    bpPerPx <= 1 ? [3, 2, 1, 0, 0, -1, -2, -3] : [3, 2, 1, -1, -2, -3]
+  for (const [idx, frame] of frames.entries()) {
+    const frameColor = theme.palette.framesCDS.at(frame)?.main
+    if (!frameColor) {
+      continue
+    }
+    const top = idx * sequenceRowHeight
+    const { offsetPx } = dynamicBlocks
+    const left = Math.max(0, -offsetPx)
+    const width = dynamicBlocks.totalWidthPx
+    ctx.fillStyle = highContrast ? theme.palette.background.default : frameColor
+    ctx.fillRect(left, top, width, sequenceRowHeight)
+    if (highContrast) {
+      // eslint-disable-next-line prefer-destructuring
+      ctx.strokeStyle = theme.palette.grey[200]
+      ctx.strokeRect(left, top, width, sequenceRowHeight)
+    }
+  }
+  // allows inter-region padding lines to show through
+  for (const block of dynamicBlocks.getBlocks()) {
+    if (block.type === 'InterRegionPaddingBlock') {
+      const left = block.offsetPx - dynamicBlocks.offsetPx
+      ctx.clearRect(left, 0, block.widthPx, canvas.height)
+    }
+  }
+}
+
+function drawBase(
+  ctx: CanvasRenderingContext2D,
+  base: string,
+  index: number,
+  leftPx: number,
+  bpPerPx: number,
+  rowHeight: number,
+  theme: Theme,
+) {
+  const width = 1 / bpPerPx
+  if (width < 1) {
+    return
+  }
+  const left = leftPx + index / bpPerPx
+  const strands = [-1, 1] as const
+  for (const strand of strands) {
+    const top = (strand === 1 ? 3 : 4) * rowHeight
+    const baseCode = strand === 1 ? base : revcom(base)
+    ctx.fillStyle = colorCode(baseCode, theme)
+    ctx.fillRect(left, top, width, rowHeight)
+    if (1 / bpPerPx >= 12) {
+      ctx.strokeStyle = theme.palette.text.disabled
+      ctx.strokeRect(left, top, width, rowHeight)
+      drawLetter(ctx, left, top, width, baseCode)
+    }
+  }
+}
+
+function drawCodon(
+  ctx: CanvasRenderingContext2D,
+  codon: string,
+  leftPx: number,
+  index: number,
+  theme: Theme,
+  highContrast: boolean,
+  bpPerPx: number,
+  bp: number,
+  rowHeight: number,
+  showStartCodons: boolean,
+  showStopCodons: boolean,
+) {
+  const frameOffsets = (
+    bpPerPx <= 1 ? [0, 2, 1, 0, 7, 6, 5] : [0, 2, 1, 0, 5, 4, 3]
+  ).map((b) => b * rowHeight)
+  const strands = [-1, 1] as const
+  for (const strand of strands) {
+    const frame = getFrame(bp, bp + 3, strand, 0)
+    const top = frameOffsets.at(frame)
+    if (top === undefined) {
+      continue
+    }
+    const left = Math.round(leftPx + index / bpPerPx)
+    const width = Math.round(3 / bpPerPx)
+    const codonCode = strand === 1 ? codon : revcom(codon)
+    const aminoAcidCode =
+      defaultCodonTable[codonCode as keyof typeof defaultCodonTable]
+    const fillColor = codonColorCode(aminoAcidCode, theme, highContrast)
+    if (
+      fillColor &&
+      ((showStopCodons && aminoAcidCode == '*') ||
+        (showStartCodons && aminoAcidCode != '*'))
+    ) {
+      ctx.fillStyle = fillColor
+      ctx.fillRect(left, top, width, rowHeight)
+    }
+    if (1 / bpPerPx >= 4) {
+      ctx.strokeStyle = theme.palette.text.disabled
+      ctx.strokeRect(left, top, width, rowHeight)
+      drawLetter(ctx, left, top, width, aminoAcidCode)
+    }
+  }
+}
+
+export function drawSequenceTrack(
+  canvas: HTMLCanvasElement,
+  theme: Theme,
+  bpPerPx: number,
+  offsetPx: number,
+  dynamicBlocks: BlockSet,
+  highContrast: boolean,
+  showStartCodons: boolean,
+  showStopCodons: boolean,
+  sequenceRowHeight: number,
+  session: ApolloSessionModel,
+) {
+  const ctx = canvas.getContext('2d')
+  if (!ctx) {
+    return
+  }
+  ctx.clearRect(0, 0, canvas.width, canvas.height)
+
+  drawTranslationFrameBackgrounds(
+    canvas,
+    ctx,
+    bpPerPx,
+    theme,
+    dynamicBlocks,
+    highContrast,
+    sequenceRowHeight,
+  )
+
+  const { apolloDataStore } = session
+  for (const block of dynamicBlocks.contentBlocks) {
+    const assembly = apolloDataStore.assemblies.get(block.assemblyName)
+    const ref = assembly?.getByRefName(block.refName)
+    const roundedStart = Math.floor(block.start)
+    const roundedEnd = Math.ceil(block.end)
+    let seq = ref?.getSequence(roundedStart, roundedEnd)
+    if (!seq) {
+      return
+    }
+    seq = seq.toUpperCase()
+    const baseOffsetPx = (block.start - roundedStart) / bpPerPx
+    const seqLeftPx = Math.round(block.offsetPx - offsetPx - baseOffsetPx)
+    for (let i = 0; i < seq.length; i++) {
+      const bp = roundedStart + i
+      const codon = seq.slice(i, i + 3)
+      drawBase(ctx, seq[i], i, seqLeftPx, bpPerPx, sequenceRowHeight, theme)
+      if (codon.length !== 3) {
+        continue
+      }
+      drawCodon(
+        ctx,
+        codon,
+        seqLeftPx,
+        i,
+        theme,
+        highContrast,
+        bpPerPx,
+        bp,
+        sequenceRowHeight,
+        showStartCodons,
+        showStopCodons,
+      )
+    }
+  }
+}

package/src/LinearApolloReferenceSequenceDisplay/index.ts

@@ -0,0 +1,3 @@
+export { configSchema } from './configSchema'
+export { stateModelFactory } from './stateModel'
+export { LinearApolloReferenceSequenceDisplay } from './components/LinearApolloReferenceSequenceDisplay'

package/src/LinearApolloReferenceSequenceDisplay/stateModel/base.ts

@@ -0,0 +1,227 @@
+/* eslint-disable @typescript-eslint/unbound-method */
+/* eslint-disable @typescript-eslint/no-unsafe-return */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-unnecessary-condition */
+import { type AnnotationFeature } from '@apollo-annotation/mst'
+import type PluginManager from '@jbrowse/core/PluginManager'
+import { ConfigurationReference, getConf } from '@jbrowse/core/configuration'
+import { type AnyConfigurationSchemaType } from '@jbrowse/core/configuration/configurationSchema'
+import { BaseDisplay } from '@jbrowse/core/pluggableElementTypes'
+import {
+  type AbstractSessionModel,
+  getContainingView,
+  getSession,
+} from '@jbrowse/core/util'
+import { getParentRenderProps } from '@jbrowse/core/util/tracks'
+// import type LinearGenomeViewPlugin from '@jbrowse/plugin-linear-genome-view'
+import { type LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
+import { autorun } from 'mobx'
+import { addDisposer, getRoot, types } from 'mobx-state-tree'
+
+import { type ApolloInternetAccountModel } from '../../ApolloInternetAccount/model'
+import { type ApolloSessionModel, type HoveredFeature } from '../../session'
+import { type ApolloRootModel } from '../../types'
+
+const minDisplayHeight = 20
+
+export function baseModelFactory(
+  _pluginManager: PluginManager,
+  configSchema: AnyConfigurationSchemaType,
+) {
+  return BaseDisplay.named('BaseLinearApolloReferenceSequenceDisplay')
+    .props({
+      type: types.literal('LinearApolloReferenceSequenceDisplay'),
+      configuration: ConfigurationReference(configSchema),
+      showStartCodons: false,
+      showStopCodons: true,
+      highContrast: false,
+      heightPreConfig: types.maybe(
+        types.refinement(
+          'displayHeight',
+          types.number,
+          (n) => n >= minDisplayHeight,
+        ),
+      ),
+      sequenceRowHeight: 15,
+    })
+    .views((self) => {
+      const { configuration, renderProps: superRenderProps } = self
+      return {
+        renderProps() {
+          return {
+            ...superRenderProps(),
+            ...getParentRenderProps(self),
+            config: configuration.renderer,
+          }
+        },
+      }
+    })
+    .views((self) => ({
+      get lgv() {
+        return getContainingView(self) as unknown as LinearGenomeViewModel
+      },
+    }))
+    .views((self) => ({
+      get rendererTypeName() {
+        return self.configuration.renderer.type
+      },
+      get session() {
+        return getSession(self) as unknown as ApolloSessionModel
+      },
+      get regions() {
+        const regions = self.lgv.dynamicBlocks.contentBlocks.map(
+          ({ assemblyName, end, refName, start }) => ({
+            assemblyName,
+            refName,
+            start: Math.round(start),
+            end: Math.round(end),
+          }),
+        )
+        return regions
+      },
+      regionCannotBeRendered(/* region */) {
+        if (self.lgv && self.lgv.bpPerPx >= 3) {
+          return 'Zoom in to see sequence'
+        }
+        return
+      },
+    }))
+    .views((self) => ({
+      get apolloInternetAccount() {
+        const [region] = self.regions
+        const { internetAccounts } = getRoot<ApolloRootModel>(self)
+        const { assemblyName } = region
+        const { assemblyManager } =
+          self.session as unknown as AbstractSessionModel
+        const assembly = assemblyManager.get(assemblyName)
+        if (!assembly) {
+          throw new Error(`No assembly found with name ${assemblyName}`)
+        }
+        const { internetAccountConfigId } = getConf(assembly, [
+          'sequence',
+          'metadata',
+        ]) as { internetAccountConfigId: string }
+        return internetAccounts.find(
+          (ia) => getConf(ia, 'internetAccountId') === internetAccountConfigId,
+        ) as ApolloInternetAccountModel | undefined
+      },
+      get changeManager() {
+        return (self.session as unknown as ApolloSessionModel).apolloDataStore
+          .changeManager
+      },
+      getAssemblyId(assemblyName: string) {
+        const { assemblyManager } =
+          self.session as unknown as AbstractSessionModel
+        const assembly = assemblyManager.get(assemblyName)
+        if (!assembly) {
+          throw new Error(`Could not find assembly named ${assemblyName}`)
+        }
+        return assembly.name
+      },
+      get selectedFeature(): AnnotationFeature | undefined {
+        return (self.session as unknown as ApolloSessionModel)
+          .apolloSelectedFeature
+      },
+      get hoveredFeature(): HoveredFeature | undefined {
+        return (self.session as unknown as ApolloSessionModel)
+          .apolloHoveredFeature
+      },
+      get height() {
+        const { sequenceRowHeight } = self
+        return self.lgv.bpPerPx <= 1
+          ? sequenceRowHeight * 8
+          : sequenceRowHeight * 6
+      },
+    }))
+    .volatile(() => ({
+      scrollTop: 0,
+    }))
+    .actions((self) => ({
+      setScrollTop(scrollTop: number) {
+        self.scrollTop = scrollTop
+      },
+      setHeight(displayHeight: number) {
+        self.heightPreConfig = Math.max(displayHeight, minDisplayHeight)
+        return self.height
+      },
+      resizeHeight(distance: number) {
+        const oldHeight = self.height
+        const newHeight = this.setHeight(self.height + distance)
+        return newHeight - oldHeight
+      },
+      toggleShowStartCodons() {
+        self.showStartCodons = !self.showStartCodons
+      },
+      toggleShowStopCodons() {
+        self.showStopCodons = !self.showStopCodons
+      },
+      toggleHighContrast() {
+        self.highContrast = !self.highContrast
+      },
+    }))
+    .views((self) => {
+      const { trackMenuItems: superTrackMenuItems } = self
+      return {
+        trackMenuItems() {
+          const { showStartCodons, showStopCodons, highContrast } = self
+          return [
+            ...superTrackMenuItems(),
+            {
+              type: 'subMenu',
+              label: 'Appearance',
+              subMenu: [
+                {
+                  label: 'Show start codons',
+                  type: 'checkbox',
+                  checked: showStartCodons,
+                  onClick: () => {
+                    self.toggleShowStartCodons()
+                  },
+                },
+                {
+                  label: 'Show stop codons',
+                  type: 'checkbox',
+                  checked: showStopCodons,
+                  onClick: () => {
+                    self.toggleShowStopCodons()
+                  },
+                },
+                {
+                  label: 'Use high contrast colors',
+                  type: 'checkbox',
+                  checked: highContrast,
+                  onClick: () => {
+                    self.toggleHighContrast()
+                  },
+                },
+              ],
+            },
+          ]
+        },
+      }
+    })
+    .actions((self) => ({
+      afterAttach() {
+        addDisposer(
+          self,
+          autorun(
+            () => {
+              if (!self.lgv.initialized || self.regionCannotBeRendered()) {
+                return
+              }
+              if (self.lgv.bpPerPx <= 3) {
+                void (
+                  self.session as unknown as ApolloSessionModel
+                ).apolloDataStore.loadRefSeq(self.regions)
+              }
+            },
+            {
+              name: 'LinearApolloReferenceSequenceDisplayLoadFeatures',
+              delay: 1000,
+            },
+          ),
+        )
+      },
+    }))
+}

package/src/LinearApolloReferenceSequenceDisplay/stateModel/index.ts

@@ -0,0 +1,25 @@
+import type PluginManager from '@jbrowse/core/PluginManager'
+import { type AnyConfigurationSchemaType } from '@jbrowse/core/configuration/configurationSchema'
+import { type Instance } from 'mobx-state-tree'
+
+import { renderingModelFactory } from './rendering'
+
+export function stateModelFactory(
+  pluginManager: PluginManager,
+  configSchema: AnyConfigurationSchemaType,
+) {
+  // TODO: this needs to be refactored so that the final composition of the
+  // state model mixins happens here in one central place
+  return renderingModelFactory(pluginManager, configSchema).named(
+    'LinearApolloReferenceSequenceDisplay',
+  )
+}
+
+export type LinearApolloReferenceSequenceDisplayStateModel = ReturnType<
+  typeof stateModelFactory
+>
+// eslint disable because of
+// https://mobx-state-tree.js.org/tips/typescript#using-a-mst-type-at-design-time
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface LinearApolloReferenceSequenceDisplay
+  extends Instance<LinearApolloReferenceSequenceDisplayStateModel> {}