@jbrowse/plugin-alignments 2.5.0 → 2.6.0

package/src/PileupRenderer/colorBy.ts

@@ -0,0 +1,74 @@
+import {
+  AnyConfigurationModel,
+  readConfObject,
+} from '@jbrowse/core/configuration'
+import { Feature } from '@jbrowse/core/util'
+import { fillColor } from '../shared/color'
+import { orientationTypes } from '../util'
+
+export function colorByInsertSize(feature: Feature) {
+  return feature.get('is_paired') &&
+    feature.get('refName') !== feature.get('next_ref')
+    ? '#555'
+    : `hsl(${Math.abs(feature.get('template_length')) / 10},50%,50%)`
+}
+
+export function colorByMappingQuality(feature: Feature) {
+  return `hsl(${feature.get('mq')},50%,50%)`
+}
+
+function getOrientation(feature: Feature, config: AnyConfigurationModel) {
+  const orientationType = readConfObject(config, 'orientationType') as
+    | 'fr'
+    | 'ff'
+    | 'rf'
+  const type = orientationTypes[orientationType]
+  const orientation = type[feature.get('pair_orientation') as string]
+  return {
+    LR: 'color_pair_lr' as const,
+    RR: 'color_pair_rr' as const,
+    RL: 'color_pair_rl' as const,
+    LL: 'color_pair_ll' as const,
+  }[orientation]
+}
+
+export function colorByStrand(feature: Feature) {
+  return feature.get('strand') === -1 ? '#8F8FD8' : '#EC8B8B'
+}
+
+export function colorByOrientation(
+  feature: Feature,
+  config: AnyConfigurationModel,
+) {
+  return fillColor[getOrientation(feature, config) || 'color_nostrand']
+}
+function getStranded(feature: Feature) {
+  const flags = feature.get('flags')
+  const strand = feature.get('strand')
+  // is paired
+  if (flags & 1) {
+    const revflag = flags & 64
+    const flipper = revflag ? -1 : 1
+
+    // proper pairing
+    if (flags & 2) {
+      return strand * flipper === 1 ? 'color_rev_strand' : 'color_fwd_strand'
+    } else if (feature.get('multi_segment_next_segment_unmapped')) {
+      return strand * flipper === 1
+        ? 'color_rev_missing_mate'
+        : 'color_fwd_missing_mate'
+    } else if (feature.get('refName') === feature.get('next_refName')) {
+      return strand * flipper === 1
+        ? 'color_rev_strand_not_proper'
+        : 'color_fwd_strand_not_proper'
+    } else {
+      // should only leave aberrant chr
+      return strand === 1 ? 'color_fwd_diff_chr' : 'color_rev_diff_chr'
+    }
+  }
+  return strand === 1 ? 'color_fwd_strand' : 'color_rev_strand'
+}
+
+export function colorByStrandedRnaSeq(feature: Feature) {
+  return fillColor[getStranded(feature)]
+}

package/src/PileupRenderer/components/PileupRendering.tsx

@@ -17,7 +17,8 @@ function PileupRendering(props: {
   bpPerPx: number
   sortedBy?: { type: string; pos: number; refName: string }
   colorBy?: { type: string; tag?: string }
-  onMouseMove?: (event: React.MouseEvent, featureId: string | undefined) => void
+  filterBy?: { tagFilter?: { tag: string } }
+  onMouseMove?: (event: React.MouseEvent, featureId?: string) => void
 }) {
   const {
     onMouseMove,
@@ -29,6 +30,7 @@ function PileupRendering(props: {
     bpPerPx,
     sortedBy,
     colorBy,
+    filterBy,
   } = props
   const { selectedFeatureId, featureIdUnderMouse, contextMenuFeature } =
     displayModel
@@ -131,31 +133,22 @@ function PileupRendering(props: {
   }
 
   function mouseMove(event: React.MouseEvent) {
+    if (!highlightOverlayCanvas.current) {
+      return
+    }
     if (mouseIsDown) {
       setMovedDuringLastMouseDown(true)
     }
-    let offsetX = 0
-    let offsetY = 0
-    const canvas = highlightOverlayCanvas.current
-    if (canvas) {
-      const { left, top } = canvas.getBoundingClientRect()
-      offsetX = left
-      offsetY = top
-    }
-    offsetX = event.clientX - offsetX
-    offsetY = event.clientY - offsetY
+    const rect = highlightOverlayCanvas.current.getBoundingClientRect()
+    const offsetX = event.clientX - rect.left
+    const offsetY = event.clientY - rect.top
     const px = region.reversed ? width - offsetX : offsetX
     const clientBp = region.start + bpPerPx * px
 
-    const featIdUnderMouse = displayModel.getFeatureOverlapping(
-      blockKey,
-      clientBp,
-      offsetY,
+    onMouseMove?.(
+      event,
+      displayModel.getFeatureOverlapping(blockKey, clientBp, offsetY),
     )
-
-    if (onMouseMove) {
-      onMouseMove(event, featIdUnderMouse)
-    }
   }
 
   function callMouseHandler(handlerName: string, event: React.MouseEvent) {
@@ -176,12 +169,14 @@ function PileupRendering(props: {
   // need to call this in render so we get the right observer behavior
   return (
     <div
-      className="PileupRendering"
-      data-testid={`pileup-${
-        sortedBy || colorBy
-          ? `${sortedBy?.type || ''}${colorBy?.type || ''}${colorBy?.tag || ''}`
-          : 'normal'
-      }`}
+      data-testid={`pileup-${[
+        sortedBy?.type,
+        colorBy?.type,
+        colorBy?.tag,
+        filterBy?.tagFilter?.tag,
+      ]
+        .filter(f => !!f)
+        .join('-')}`}
       style={{ position: 'relative', width: canvasWidth, height }}
     >
       <PrerenderedCanvas

package/src/PileupRenderer/getAlignmentShapeColor.ts

@@ -0,0 +1,87 @@
+import {
+  AnyConfigurationModel,
+  readConfObject,
+} from '@jbrowse/core/configuration'
+import { Feature } from '@jbrowse/core/util'
+import { fillColor } from '../shared/color'
+import {
+  colorByInsertSize,
+  colorByMappingQuality,
+  colorByOrientation,
+  colorByStrand,
+  colorByStrandedRnaSeq,
+} from './colorBy'
+
+export function getAlignmentShapeColor({
+  colorType,
+  tag,
+  feature,
+  config,
+  defaultColor,
+  colorTagMap,
+}: {
+  colorType: string
+  tag: string
+  feature: Feature
+  defaultColor: boolean
+  config: AnyConfigurationModel
+  colorTagMap: Record<string, string>
+}) {
+  // first pass for simple color changes that change the color of the
+  // alignment
+  switch (colorType) {
+    case 'insertSize':
+      return colorByInsertSize(feature)
+    case 'strand':
+      return colorByStrand(feature)
+    case 'mappingQuality':
+      return colorByMappingQuality(feature)
+    case 'pairOrientation':
+      return colorByOrientation(feature, config)
+    case 'stranded':
+      return colorByStrandedRnaSeq(feature)
+    case 'xs':
+    case 'tag': {
+      const tags = feature.get('tags')
+      const val = tags ? tags[tag] : feature.get(tag)
+
+      if (tag === 'XS' || tag === 'TS') {
+        return fillColor[
+          {
+            '-': 'color_rev_strand' as const,
+            '+': 'color_fwd_strand' as const,
+          }[val as '-' | '+'] || 'color_nostrand'
+        ]
+      } else if (tag === 'ts') {
+        return fillColor[
+          {
+            '-':
+              feature.get('strand') === -1
+                ? ('color_fwd_strand' as const)
+                : ('color_rev_strand' as const),
+            '+':
+              feature.get('strand') === -1
+                ? ('color_rev_strand' as const)
+                : ('color_fwd_strand' as const),
+          }[val as '-' | '+'] || 'color_nostrand'
+        ]
+      } else {
+        return colorTagMap[val] || fillColor['color_nostrand']
+      }
+    }
+    case 'insertSizeAndPairOrientation':
+      break
+
+    case 'modifications':
+    case 'methylation':
+      // this coloring is similar to igv.js, and is helpful to color negative
+      // strand reads differently because their c-g will be flipped (e.g. g-c
+      // read right to left)
+      return feature.get('flags') & 16 ? '#c8dcc8' : '#c8c8c8'
+
+    default:
+      return defaultColor
+        ? 'lightgrey'
+        : readConfObject(config, 'color', { feature })
+  }
+}

package/src/PileupRenderer/index.ts

@@ -1,7 +1,7 @@
 import PluginManager from '@jbrowse/core/PluginManager'
 import PileupRenderer from './PileupRenderer'
-import ReactComponent from './components/PileupRendering'
 import configSchema from './configSchema'
+import ReactComponent from './components/PileupRendering'
 
 export default function register(pluginManager: PluginManager) {
   pluginManager.addRendererType(() => {

package/src/PileupRenderer/layoutFeature.ts

@@ -0,0 +1,83 @@
+import { bpSpanPx, Feature, Region } from '@jbrowse/core/util'
+import { BaseLayout } from '@jbrowse/core/util/layouts'
+// locals
+import { Mismatch } from '../MismatchParser'
+
+export interface LayoutRecord {
+  feature: Feature
+  leftPx: number
+  rightPx: number
+  topPx: number
+  heightPx: number
+}
+
+export function layoutFeature({
+  feature,
+  layout,
+  bpPerPx,
+  region,
+  showSoftClip,
+  heightPx,
+  displayMode,
+}: {
+  feature: Feature
+  layout: BaseLayout<Feature>
+  bpPerPx: number
+  region: Region
+  showSoftClip?: boolean
+  heightPx: number
+  displayMode: string
+}): LayoutRecord | null {
+  let expansionBefore = 0
+  let expansionAfter = 0
+
+  // Expand the start and end of feature when softclipping enabled
+  if (showSoftClip) {
+    const mismatches = feature.get('mismatches') as Mismatch[]
+    const seq = feature.get('seq') as string
+    if (seq) {
+      for (let i = 0; i < mismatches.length; i += 1) {
+        const { type, start, cliplen = 0 } = mismatches[i]
+        if (type === 'softclip') {
+          start === 0 ? (expansionBefore = cliplen) : (expansionAfter = cliplen)
+        }
+      }
+    }
+  }
+
+  const [leftPx, rightPx] = bpSpanPx(
+    feature.get('start') - expansionBefore,
+    feature.get('end') + expansionAfter,
+    region,
+    bpPerPx,
+  )
+
+  if (displayMode === 'compact') {
+    heightPx /= 3
+  }
+  if (feature.get('refName') !== region.refName) {
+    throw new Error(
+      `feature ${feature.id()} is not on the current region's reference sequence ${
+        region.refName
+      }`,
+    )
+  }
+  const topPx = layout.addRect(
+    feature.id(),
+    feature.get('start') - expansionBefore,
+    feature.get('end') + expansionAfter,
+    heightPx,
+    feature,
+  )
+  if (topPx === null) {
+    return null
+  }
+
+  return {
+    feature,
+    leftPx,
+    rightPx,
+    topPx: displayMode === 'collapse' ? 0 : topPx,
+    heightPx,
+  }
+}

package/src/PileupRenderer/layoutFeatures.ts

@@ -0,0 +1,44 @@
+import { readConfObject } from '@jbrowse/core/configuration'
+import { iterMap } from '@jbrowse/core/util'
+
+// locals
+import { layoutFeature } from './layoutFeature'
+import { RenderArgsDeserializedWithFeaturesAndLayout } from './PileupRenderer'
+import { sortFeature } from './sortUtil'
+
+// layout determines the height of the canvas that we use to render
+export function layoutFeats(
+  props: RenderArgsDeserializedWithFeaturesAndLayout,
+) {
+  const { layout, features, sortedBy, config, bpPerPx, showSoftClip, regions } =
+    props
+  const [region] = regions
+  if (!layout) {
+    throw new Error(`layout required`)
+  }
+  if (!layout.addRect) {
+    throw new Error('invalid layout object')
+  }
+
+  const featureMap =
+    sortedBy?.type && region.start === sortedBy.pos
+      ? sortFeature(features, sortedBy)
+      : features
+
+  const heightPx = readConfObject(config, 'height')
+  const displayMode = readConfObject(config, 'displayMode')
+  return iterMap(
+    featureMap.values(),
+    feature =>
+      layoutFeature({
+        feature,
+        layout,
+        bpPerPx,
+        region,
+        showSoftClip,
+        heightPx,
+        displayMode,
+      }),
+    featureMap.size,
+  )
+}

package/src/PileupRenderer/makeImageData.ts

@@ -0,0 +1,93 @@
+import { Feature } from '@jbrowse/core/util'
+import { RenderArgsDeserializedWithFeaturesAndLayout } from './PileupRenderer'
+import { readConfObject } from '@jbrowse/core/configuration'
+import { createJBrowseTheme } from '@jbrowse/core/ui'
+import {
+  getCharWidthHeight,
+  getColorBaseMap,
+  getContrastBaseMap,
+  shouldDrawIndels,
+  shouldDrawSNPsMuted,
+} from './util'
+import { renderAlignment } from './renderAlignment'
+import { renderMismatches } from './renderMismatches'
+import { renderSoftClipping } from './renderSoftClipping'
+
+export interface RenderArgsWithColor
+  extends RenderArgsDeserializedWithFeaturesAndLayout {
+  Color: Awaited<typeof import('color')>
+}
+
+interface LayoutFeature {
+  heightPx: number
+  topPx: number
+  feature: Feature
+}
+
+export function makeImageData({
+  ctx,
+  layoutRecords,
+  canvasWidth,
+  renderArgs,
+}: {
+  ctx: CanvasRenderingContext2D
+  canvasWidth: number
+  layoutRecords: LayoutFeature[]
+  renderArgs: RenderArgsWithColor
+}) {
+  const { config, showSoftClip, colorBy, theme: configTheme } = renderArgs
+  const mismatchAlpha = readConfObject(config, 'mismatchAlpha')
+  const minSubfeatureWidth = readConfObject(config, 'minSubfeatureWidth')
+  const largeInsertionIndicatorScale = readConfObject(
+    config,
+    'largeInsertionIndicatorScale',
+  )
+  const defaultColor = readConfObject(config, 'color') === '#f0f'
+  const theme = createJBrowseTheme(configTheme)
+  const colorForBase = getColorBaseMap(theme)
+  const contrastForBase = getContrastBaseMap(theme)
+  ctx.font = 'bold 10px Courier New,monospace'
+
+  const { charWidth, charHeight } = getCharWidthHeight()
+  const drawSNPsMuted = shouldDrawSNPsMuted(colorBy?.type)
+  const drawIndels = shouldDrawIndels()
+  for (const feat of layoutRecords) {
+    renderAlignment({
+      ctx,
+      feat,
+      renderArgs,
+      defaultColor,
+      colorForBase,
+      contrastForBase,
+      charWidth,
+      charHeight,
+      canvasWidth,
+    })
+    renderMismatches({
+      ctx,
+      feat,
+      renderArgs,
+      mismatchAlpha,
+      drawSNPsMuted,
+      drawIndels,
+      largeInsertionIndicatorScale,
+      minSubfeatureWidth,
+      charWidth,
+      charHeight,
+      colorForBase,
+      contrastForBase,
+      canvasWidth,
+    })
+    if (showSoftClip) {
+      renderSoftClipping({
+        ctx,
+        feat,
+        renderArgs,
+        colorForBase,
+        config,
+        theme,
+        canvasWidth,
+      })
+    }
+  }
+}

package/src/PileupRenderer/renderAlignment.ts

@@ -0,0 +1,97 @@
+import { LayoutFeature } from './util'
+
+import { getAlignmentShapeColor } from './getAlignmentShapeColor'
+import { renderAlignmentShape } from './renderAlignmentShape'
+import { renderPerBaseQuality } from './renderPerBaseQuality'
+import { renderPerBaseLettering } from './renderPerBaseLettering'
+import { renderModifications } from './renderModifications'
+import { renderMethylation } from './renderMethylation'
+import { RenderArgsWithColor } from './makeImageData'
+
+export function renderAlignment({
+  ctx,
+  feat,
+  renderArgs,
+  colorForBase,
+  contrastForBase,
+  charWidth,
+  charHeight,
+  defaultColor,
+  canvasWidth,
+}: {
+  ctx: CanvasRenderingContext2D
+  feat: LayoutFeature
+  renderArgs: RenderArgsWithColor
+  colorForBase: Record<string, string>
+  contrastForBase: Record<string, string>
+  charWidth: number
+  charHeight: number
+  defaultColor: boolean
+  canvasWidth: number
+}) {
+  const { config, bpPerPx, regions, colorBy, colorTagMap = {} } = renderArgs
+  const { tag = '', type: colorType = '' } = colorBy || {}
+  const { feature } = feat
+  const region = regions[0]
+
+  ctx.fillStyle = getAlignmentShapeColor({
+    feature,
+    config,
+    tag,
+    defaultColor,
+    colorType,
+    colorTagMap,
+  })
+
+  renderAlignmentShape({ ctx, feat, renderArgs })
+
+  // second pass for color types that render per-base things that go over the
+  // existing drawing
+  switch (colorType) {
+    case 'perBaseQuality':
+      renderPerBaseQuality({
+        ctx,
+        feat,
+        region,
+        bpPerPx,
+        canvasWidth,
+      })
+      break
+
+    case 'perBaseLettering':
+      renderPerBaseLettering({
+        ctx,
+        feat,
+        region,
+        bpPerPx,
+        colorForBase,
+        contrastForBase,
+        charWidth,
+        charHeight,
+        canvasWidth,
+      })
+      break
+
+    case 'modifications':
+      renderModifications({
+        ctx,
+        feat,
+        region,
+        bpPerPx,
+        renderArgs,
+        canvasWidth,
+      })
+      break
+
+    case 'methylation':
+      renderMethylation({
+        ctx,
+        feat,
+        region,
+        bpPerPx,
+        renderArgs,
+        canvasWidth,
+      })
+      break
+  }
+}

package/src/PileupRenderer/renderAlignmentShape.ts

@@ -0,0 +1,45 @@
+import { bpSpanPx } from '@jbrowse/core/util'
+import { RenderArgsDeserialized } from './PileupRenderer'
+import { LayoutFeature } from './util'
+
+export function renderAlignmentShape({
+  ctx,
+  feat,
+  renderArgs,
+}: {
+  ctx: CanvasRenderingContext2D
+  feat: LayoutFeature
+  renderArgs: RenderArgsDeserialized
+}) {
+  const { regions, bpPerPx } = renderArgs
+  const { heightPx, topPx, feature } = feat
+  const [region] = regions
+  const s = feature.get('start')
+  const e = feature.get('end')
+  const [leftPx, rightPx] = bpSpanPx(s, e, region, bpPerPx)
+  const flip = region.reversed ? -1 : 1
+  const strand = feature.get('strand') * flip
+  if (bpPerPx < 10) {
+    if (strand === -1) {
+      ctx.beginPath()
+      ctx.moveTo(leftPx - 5, topPx + heightPx / 2)
+      ctx.lineTo(leftPx, topPx + heightPx)
+      ctx.lineTo(rightPx, topPx + heightPx)
+      ctx.lineTo(rightPx, topPx)
+      ctx.lineTo(leftPx, topPx)
+      ctx.closePath()
+      ctx.fill()
+    } else {
+      ctx.beginPath()
+      ctx.moveTo(leftPx, topPx)
+      ctx.lineTo(leftPx, topPx + heightPx)
+      ctx.lineTo(rightPx, topPx + heightPx)
+      ctx.lineTo(rightPx + 5, topPx + heightPx / 2)
+      ctx.lineTo(rightPx, topPx)
+      ctx.closePath()
+      ctx.fill()
+    }
+  } else {
+    ctx.fillRect(leftPx, topPx, rightPx - leftPx, heightPx)
+  }
+}

package/src/PileupRenderer/renderMethylation.ts

@@ -0,0 +1,75 @@
+import { bpSpanPx, Region } from '@jbrowse/core/util'
+import { getMethBins } from '../MismatchParser'
+import { fillRect, LayoutFeature } from './util'
+import { RenderArgsWithColor } from './makeImageData'
+
+// Color by methylation is slightly modified version of color by
+// modifications that focuses on CpG sites, with non-methylated CpG colored
+export function renderMethylation({
+  ctx,
+  feat,
+  region,
+  bpPerPx,
+  renderArgs,
+  canvasWidth,
+}: {
+  ctx: CanvasRenderingContext2D
+  feat: LayoutFeature
+  region: Region
+  bpPerPx: number
+  renderArgs: RenderArgsWithColor
+  canvasWidth: number
+}) {
+  const { regionSequence, Color } = renderArgs
+  const { feature, topPx, heightPx } = feat
+  if (!regionSequence) {
+    throw new Error('region sequence required for methylation')
+  }
+
+  const seq = feature.get('seq') as string | undefined
+  if (!seq) {
+    return
+  }
+  const fstart = feature.get('start')
+  const fend = feature.get('end')
+  const { methBins, methProbs } = getMethBins(feature)
+
+  function getCol(k: number) {
+    if (methBins[k]) {
+      const p = methProbs[k] || 0
+      return p > 0.5
+        ? Color('red')
+            .alpha((p - 0.5) * 2)
+            .hsl()
+            .string()
+        : Color('blue')
+            .alpha(1 - p * 2)
+            .hsl()
+            .string()
+    }
+    return undefined
+  }
+  for (let i = 0; i < fend - fstart; i++) {
+    const j = i + fstart
+    const l1 = regionSequence[j - region.start + 1]?.toLowerCase()
+    const l2 = regionSequence[j - region.start + 2]?.toLowerCase()
+
+    if (l1 === 'c' && l2 === 'g') {
+      if (bpPerPx > 2) {
+        const [leftPx, rightPx] = bpSpanPx(j, j + 2, region, bpPerPx)
+        const w = rightPx - leftPx + 0.5
+        const c = getCol(i) || getCol(i + 1) || 'blue'
+        fillRect(ctx, leftPx, topPx, w, heightPx, canvasWidth, c)
+      } else {
+        const [leftPx, rightPx] = bpSpanPx(j, j + 1, region, bpPerPx)
+        const w = rightPx - leftPx + 0.5
+        const c = getCol(i) || 'blue'
+        fillRect(ctx, leftPx, topPx, w, heightPx, canvasWidth, c)
+        const [leftPx2, rightPx2] = bpSpanPx(j + 1, j + 2, region, bpPerPx)
+        const w2 = rightPx2 - leftPx2 + 0.5
+        const c2 = getCol(i + 1) || 'blue'
+        fillRect(ctx, leftPx2, topPx, w2, heightPx, canvasWidth, c2)
+      }
+    }
+  }
+}