@jbrowse/plugin-alignments 2.4.2 → 2.6.0

package/src/PileupRenderer/renderMismatches.ts

@@ -0,0 +1,206 @@
+import { bpSpanPx, measureText } from '@jbrowse/core/util'
+import { Mismatch } from '../MismatchParser'
+import { fillRect, LayoutFeature } from './util'
+import { RenderArgsWithColor } from './makeImageData'
+
+export function renderMismatches({
+  ctx,
+  feat,
+  renderArgs,
+  minSubfeatureWidth,
+  largeInsertionIndicatorScale,
+  mismatchAlpha,
+  charWidth,
+  charHeight,
+  colorForBase,
+  contrastForBase,
+  canvasWidth,
+  drawSNPsMuted,
+  drawIndels = true,
+}: {
+  ctx: CanvasRenderingContext2D
+  feat: LayoutFeature
+  renderArgs: RenderArgsWithColor
+  colorForBase: { [key: string]: string }
+  contrastForBase: { [key: string]: string }
+  mismatchAlpha?: boolean
+  drawIndels?: boolean
+  drawSNPsMuted?: boolean
+  minSubfeatureWidth: number
+  largeInsertionIndicatorScale: number
+  charWidth: number
+  charHeight: number
+  canvasWidth: number
+}) {
+  const { Color, bpPerPx, regions } = renderArgs
+  const { heightPx, topPx, feature } = feat
+  const [region] = regions
+  const start = feature.get('start')
+
+  const pxPerBp = Math.min(1 / bpPerPx, 2)
+  const mismatches = feature.get('mismatches') as Mismatch[] | undefined
+  const heightLim = charHeight - 2
+
+  // extraHorizontallyFlippedOffset is used to draw interbase items, which
+  // are located to the left when forward and right when reversed
+  const extraHorizontallyFlippedOffset = region.reversed ? 1 / bpPerPx + 1 : -1
+
+  if (!mismatches) {
+    return
+  }
+
+  // two pass rendering: first pass, draw all the mismatches except wide
+  // insertion markers
+  for (let i = 0; i < mismatches.length; i += 1) {
+    const mismatch = mismatches[i]
+    const mstart = start + mismatch.start
+    const mlen = mismatch.length
+    const mbase = mismatch.base
+    const [leftPx, rightPx] = bpSpanPx(mstart, mstart + mlen, region, bpPerPx)
+    const widthPx = Math.max(minSubfeatureWidth, Math.abs(leftPx - rightPx))
+    if (mismatch.type === 'mismatch') {
+      if (!drawSNPsMuted) {
+        const baseColor = colorForBase[mismatch.base] || '#888'
+        const c = mismatchAlpha
+          ? mismatch.qual === undefined
+            ? baseColor
+            : Color(baseColor)
+                .alpha(Math.min(1, mismatch.qual / 50))
+                .hsl()
+                .string()
+          : baseColor
+
+        fillRect(
+          ctx,
+          Math.round(leftPx),
+          topPx,
+          widthPx,
+          heightPx,
+          canvasWidth,
+          c,
+        )
+      }
+
+      if (widthPx >= charWidth && heightPx >= heightLim) {
+        // normal SNP coloring
+        const contrastColor = drawSNPsMuted
+          ? 'black'
+          : contrastForBase[mismatch.base] || 'black'
+        ctx.fillStyle = mismatchAlpha
+          ? mismatch.qual === undefined
+            ? contrastColor
+            : Color(contrastColor)
+                .alpha(Math.min(1, mismatch.qual / 50))
+                .hsl()
+                .string()
+          : contrastColor
+        ctx.fillText(
+          mbase,
+          leftPx + (widthPx - charWidth) / 2 + 1,
+          topPx + heightPx,
+        )
+      }
+    } else if (mismatch.type === 'deletion' && drawIndels) {
+      fillRect(
+        ctx,
+        leftPx,
+        topPx,
+        Math.abs(leftPx - rightPx),
+        heightPx,
+        canvasWidth,
+        colorForBase.deletion,
+      )
+      const txt = `${mismatch.length}`
+      const rwidth = measureText(txt, 10)
+      if (widthPx >= rwidth && heightPx >= heightLim) {
+        ctx.fillStyle = contrastForBase.deletion
+        ctx.fillText(txt, (leftPx + rightPx) / 2 - rwidth / 2, topPx + heightPx)
+      }
+    } else if (mismatch.type === 'insertion' && drawIndels) {
+      ctx.fillStyle = 'purple'
+      const pos = leftPx + extraHorizontallyFlippedOffset
+      const len = +mismatch.base || mismatch.length
+      const insW = Math.max(0, Math.min(1.2, 1 / bpPerPx))
+      if (len < 10) {
+        fillRect(ctx, pos, topPx, insW, heightPx, canvasWidth, 'purple')
+        if (1 / bpPerPx >= charWidth && heightPx >= heightLim) {
+          const l = pos - insW
+          fillRect(ctx, l, topPx, insW * 3, 1, canvasWidth)
+          fillRect(ctx, l, topPx + heightPx - 1, insW * 3, 1, canvasWidth)
+          ctx.fillText(`(${mismatch.base})`, pos + 3, topPx + heightPx)
+        }
+      }
+    } else if (mismatch.type === 'hardclip' || mismatch.type === 'softclip') {
+      const pos = leftPx + extraHorizontallyFlippedOffset
+      const c = mismatch.type === 'hardclip' ? 'red' : 'blue'
+      const clipW = Math.max(minSubfeatureWidth, pxPerBp)
+      fillRect(ctx, pos, topPx, clipW, heightPx, canvasWidth, c)
+      if (1 / bpPerPx >= charWidth && heightPx >= heightLim) {
+        const l = pos - clipW
+        fillRect(ctx, l, topPx, clipW * 3, 1, canvasWidth)
+        fillRect(ctx, l, topPx + heightPx - 1, clipW * 3, 1, canvasWidth)
+        ctx.fillText(`(${mismatch.base})`, pos + 3, topPx + heightPx)
+      }
+    } else if (mismatch.type === 'skip') {
+      // fix to avoid bad rendering note that this was also related to chrome
+      // bug https://bugs.chromium.org/p/chromium/issues/detail?id=1131528
+      // also affected firefox ref #1236 #2750
+      if (leftPx + widthPx > 0) {
+        // make small exons more visible when zoomed far out
+        const adjustPx = widthPx - (bpPerPx > 10 ? 1.5 : 0)
+        ctx.clearRect(leftPx, topPx, adjustPx, heightPx)
+        fillRect(
+          ctx,
+          Math.max(0, leftPx),
+          topPx + heightPx / 2 - 1,
+          adjustPx + (leftPx < 0 ? leftPx : 0),
+          2,
+          canvasWidth,
+          '#333',
+        )
+      }
+    }
+  }
+
+  // second pass, draw wide insertion markers on top
+  if (drawIndels) {
+    for (let i = 0; i < mismatches.length; i += 1) {
+      const mismatch = mismatches[i]
+      const mstart = start + mismatch.start
+      const mlen = mismatch.length
+      const [leftPx] = bpSpanPx(mstart, mstart + mlen, region, bpPerPx)
+      const len = +mismatch.base || mismatch.length
+      const txt = `${len}`
+      if (mismatch.type === 'insertion' && len >= 10) {
+        if (bpPerPx > largeInsertionIndicatorScale) {
+          fillRect(ctx, leftPx - 1, topPx, 2, heightPx, canvasWidth, 'purple')
+        } else if (heightPx > charHeight) {
+          const rwidth = measureText(txt)
+          const padding = 5
+          fillRect(
+            ctx,
+            leftPx - rwidth / 2 - padding,
+            topPx,
+            rwidth + 2 * padding,
+            heightPx,
+            canvasWidth,
+            'purple',
+          )
+          ctx.fillStyle = 'white'
+          ctx.fillText(txt, leftPx - rwidth / 2, topPx + heightPx)
+        } else {
+          const padding = 2
+          fillRect(
+            ctx,
+            leftPx - padding,
+            topPx,
+            2 * padding,
+            heightPx,
+            canvasWidth,
+            'purple',
+          )
+        }
+      }
+    }
+  }
+}

package/src/PileupRenderer/renderModifications.ts

@@ -0,0 +1,74 @@
+import { bpSpanPx, Region } from '@jbrowse/core/util'
+import {
+  getModificationPositions,
+  getModificationProbabilities,
+  getNextRefPos,
+  parseCigar,
+} from '../MismatchParser'
+import { getTagAlt } from '../util'
+import { fillRect, LayoutFeature } from './util'
+import { RenderArgsWithColor } from './makeImageData'
+
+// render modifications stored in MM tag in BAM
+//
+// ML stores probabilities as array of numerics and MP is scaled phred scores
+// https://github.com/samtools/hts-specs/pull/418/files#diff-e765c6479316309f56b636f88189cdde8c40b854c7bdcce9ee7fe87a4e76febcR596
+//
+// if we have ML or Ml, it is an 8bit probability, divide by 255
+//
+// if we have MP or Mp it is phred scaled ASCII, which can go up to 90 but
+// has very high likelihood basecalls at that point, we really only care
+// about low qual calls <20 approx
+export function renderModifications({
+  ctx,
+  feat,
+  region,
+  bpPerPx,
+  renderArgs,
+  canvasWidth,
+}: {
+  ctx: CanvasRenderingContext2D
+  feat: LayoutFeature
+  region: Region
+  bpPerPx: number
+  renderArgs: RenderArgsWithColor
+  canvasWidth: number
+}) {
+  const { feature, topPx, heightPx } = feat
+  const { Color, modificationTagMap = {} } = renderArgs
+
+  const seq = feature.get('seq') as string | undefined
+
+  if (!seq) {
+    return
+  }
+  const mm = (getTagAlt(feature, 'MM', 'Mm') as string) || ''
+  const cigar = feature.get('CIGAR')
+  const start = feature.get('start')
+  const strand = feature.get('strand')
+  const cigarOps = parseCigar(cigar)
+  const probabilities = getModificationProbabilities(feature)
+  const modifications = getModificationPositions(mm, seq, strand)
+
+  // probIndex applies across multiple modifications e.g.
+  let probIndex = 0
+  for (const { type, positions } of modifications) {
+    const col = modificationTagMap[type] || 'black'
+    const base = Color(col)
+    for (const readPos of getNextRefPos(cigarOps, positions)) {
+      const r = start + readPos
+      const [leftPx, rightPx] = bpSpanPx(r, r + 1, region, bpPerPx)
+      const prob = probabilities?.[probIndex] || 0
+      const c =
+        prob !== 1
+          ? base
+              .alpha(prob + 0.1)
+              .hsl()
+              .string()
+          : col
+      const w = rightPx - leftPx + 0.5
+      fillRect(ctx, leftPx, topPx, w, heightPx, canvasWidth, c)
+      probIndex++
+    }
+  }
+}

package/src/PileupRenderer/renderPerBaseLettering.ts

@@ -0,0 +1,67 @@
+import { bpSpanPx, Region } from '@jbrowse/core/util'
+import { parseCigar } from '../MismatchParser'
+import { fillRect, LayoutFeature } from './util'
+
+export function renderPerBaseLettering({
+  ctx,
+  feat,
+  region,
+  bpPerPx,
+  colorForBase,
+  contrastForBase,
+  charWidth,
+  charHeight,
+  canvasWidth,
+}: {
+  ctx: CanvasRenderingContext2D
+  feat: LayoutFeature
+  region: Region
+  bpPerPx: number
+  colorForBase: Record<string, string>
+  contrastForBase: Record<string, string>
+  charWidth: number
+  charHeight: number
+  canvasWidth: number
+}) {
+  const heightLim = charHeight - 2
+  const { feature, topPx, heightPx } = feat
+  const seq = feature.get('seq') as string | undefined
+  const cigarOps = parseCigar(feature.get('CIGAR'))
+  const w = 1 / bpPerPx
+  const start = feature.get('start')
+  let soffset = 0
+  let roffset = 0
+
+  if (!seq) {
+    return
+  }
+  for (let i = 0; i < cigarOps.length; i += 2) {
+    const len = +cigarOps[i]
+    const op = cigarOps[i + 1]
+    if (op === 'S' || op === 'I') {
+      soffset += len
+    } else if (op === 'D' || op === 'N') {
+      roffset += len
+    } else if (op === 'M' || op === 'X' || op === '=') {
+      for (let m = 0; m < len; m++) {
+        const letter = seq[soffset + m]
+        const r = start + roffset + m
+        const [leftPx] = bpSpanPx(r, r + 1, region, bpPerPx)
+        const c = colorForBase[letter]
+        fillRect(ctx, leftPx, topPx, w + 0.5, heightPx, canvasWidth, c)
+
+        if (w >= charWidth && heightPx >= heightLim) {
+          // normal SNP coloring
+          ctx.fillStyle = contrastForBase[letter]
+          ctx.fillText(
+            letter,
+            leftPx + (w - charWidth) / 2 + 1,
+            topPx + heightPx,
+          )
+        }
+      }
+      soffset += len
+      roffset += len
+    }
+  }
+}

package/src/PileupRenderer/renderPerBaseQuality.ts

@@ -0,0 +1,46 @@
+import { bpSpanPx, Region } from '@jbrowse/core/util'
+import { parseCigar } from '../MismatchParser'
+import { fillRect, LayoutFeature } from './util'
+
+export function renderPerBaseQuality({
+  ctx,
+  feat,
+  region,
+  bpPerPx,
+  canvasWidth,
+}: {
+  ctx: CanvasRenderingContext2D
+  feat: LayoutFeature
+  region: Region
+  bpPerPx: number
+  canvasWidth: number
+}) {
+  const { feature, topPx, heightPx } = feat
+  const qual: string = feature.get('qual') || ''
+  const scores = qual.split(' ').map(val => +val)
+  const cigarOps = parseCigar(feature.get('CIGAR'))
+  const w = 1 / bpPerPx
+  const start = feature.get('start')
+  let soffset = 0 // sequence offset
+  let roffset = 0 // reference offset
+
+  for (let i = 0; i < cigarOps.length; i += 2) {
+    const len = +cigarOps[i]
+    const op = cigarOps[i + 1]
+    if (op === 'S' || op === 'I') {
+      soffset += len
+    } else if (op === 'D' || op === 'N') {
+      roffset += len
+    } else if (op === 'M' || op === 'X' || op === '=') {
+      for (let m = 0; m < len; m++) {
+        const score = scores[soffset + m]
+        const start0 = start + roffset + m
+        const leftPx = bpSpanPx(start0, start0 + 1, region, bpPerPx)[0]
+        const c = `hsl(${score === 255 ? 150 : score * 1.5},55%,50%)`
+        fillRect(ctx, leftPx, topPx, w + 0.5, heightPx, canvasWidth, c)
+      }
+      soffset += len
+      roffset += len
+    }
+  }
+}

package/src/PileupRenderer/renderSoftClipping.ts

@@ -0,0 +1,78 @@
+import {
+  AnyConfigurationModel,
+  readConfObject,
+} from '@jbrowse/core/configuration'
+import { bpSpanPx } from '@jbrowse/core/util'
+import { Theme } from '@mui/material'
+
+// locals
+import { Mismatch } from '../MismatchParser'
+import { RenderArgsDeserializedWithFeaturesAndLayout } from './PileupRenderer'
+import { fillRect, getCharWidthHeight, LayoutFeature } from './util'
+
+export function renderSoftClipping({
+  ctx,
+  feat,
+  renderArgs,
+  config,
+  theme,
+  colorForBase,
+  canvasWidth,
+}: {
+  ctx: CanvasRenderingContext2D
+  feat: LayoutFeature
+  renderArgs: RenderArgsDeserializedWithFeaturesAndLayout
+  config: AnyConfigurationModel
+  colorForBase: Record<string, string>
+  theme: Theme
+  canvasWidth: number
+}) {
+  const { feature, topPx, heightPx } = feat
+  const { regions, bpPerPx } = renderArgs
+  const [region] = regions
+  const minFeatWidth = readConfObject(config, 'minSubfeatureWidth')
+  const mismatches = feature.get('mismatches') as Mismatch[] | undefined
+  const seq = feature.get('seq') as string | undefined
+  const { charWidth, charHeight } = getCharWidthHeight()
+
+  // Display all bases softclipped off in lightened colors
+  if (!(seq && mismatches)) {
+    return
+  }
+  mismatches
+    .filter(mismatch => mismatch.type === 'softclip')
+    .forEach(mismatch => {
+      const len = mismatch.cliplen || 0
+      const s = feature.get('start')
+      const start = mismatch.start === 0 ? s - len : s + mismatch.start
+
+      for (let k = 0; k < len; k += 1) {
+        const base = seq.charAt(k + mismatch.start)
+
+        // If softclip length+start is longer than sequence, no need to
+        // continue showing base
+        if (!base) {
+          return
+        }
+
+        const s0 = start + k
+        const [leftPx, rightPx] = bpSpanPx(s0, s0 + 1, region, bpPerPx)
+        const widthPx = Math.max(minFeatWidth, rightPx - leftPx)
+
+        // Black accounts for IUPAC ambiguity code bases such as N that
+        // show in soft clipping
+        const baseColor = colorForBase[base] || '#000000'
+        ctx.fillStyle = baseColor
+        fillRect(ctx, leftPx, topPx, widthPx, heightPx, canvasWidth)
+
+        if (widthPx >= charWidth && heightPx >= charHeight - 5) {
+          ctx.fillStyle = theme.palette.getContrastText(baseColor)
+          ctx.fillText(
+            base,
+            leftPx + (widthPx - charWidth) / 2 + 1,
+            topPx + heightPx,
+          )
+        }
+      }
+    })
+}

package/src/PileupRenderer/sortUtil.ts

@@ -98,12 +98,10 @@ export const sortFeature = (
     }
   }
 
-  const sortedMap = new Map(
+  return new Map(
     [...featuresInCenterLine, ...featuresOutsideCenter].map(feature => [
       feature.id(),
       feature,
     ]),
   )
-
-  return sortedMap
 }

package/src/PileupRenderer/util.ts

@@ -0,0 +1,63 @@
+import { Feature, measureText } from '@jbrowse/core/util'
+import { Theme } from '@mui/material'
+
+export function fillRect(
+  ctx: CanvasRenderingContext2D,
+  l: number,
+  t: number,
+  w: number,
+  h: number,
+  cw: number,
+  color?: string,
+) {
+  if (l + w < 0 || l > cw) {
+    return
+  } else {
+    if (color) {
+      ctx.fillStyle = color
+    }
+    ctx.fillRect(l, t, w, h)
+  }
+}
+
+export function getColorBaseMap(theme: Theme) {
+  const { bases } = theme.palette
+  return {
+    A: bases.A.main,
+    C: bases.C.main,
+    G: bases.G.main,
+    T: bases.T.main,
+    deletion: '#808080', // gray
+  }
+}
+
+export function getContrastBaseMap(theme: Theme) {
+  return Object.fromEntries(
+    Object.entries(getColorBaseMap(theme)).map(([key, value]) => [
+      key,
+      theme.palette.getContrastText(value),
+    ]),
+  )
+}
+
+export function shouldDrawSNPsMuted(type?: string) {
+  return ['methylation', 'modifications'].includes(type || '')
+}
+
+export function shouldDrawIndels() {
+  return true
+}
+
+export interface LayoutFeature {
+  heightPx: number
+  topPx: number
+  feature: Feature
+}
+
+// get width and height of chars the height is an approximation: width letter M
+// is approximately the height
+export function getCharWidthHeight() {
+  const charWidth = measureText('A')
+  const charHeight = measureText('M') - 2
+  return { charWidth, charHeight }
+}

package/src/SNPCoverageAdapter/SNPCoverageAdapter.ts

@@ -94,9 +94,12 @@ export default class SNPCoverageAdapter extends BaseFeatureDataAdapter {
     }, opts.signal)
   }
 
-  async estimateRegionsStats(regions: Region[], opts?: BaseOptions) {
+  async getMultiRegionFeatureDensityStats(
+    regions: Region[],
+    opts?: BaseOptions,
+  ) {
     const { subadapter } = await this.configure()
-    return subadapter.estimateRegionsStats(regions, opts)
+    return subadapter.getMultiRegionFeatureDensityStats(regions, opts)
   }
 
   async getRefNames(opts: BaseOptions = {}) {
@@ -106,6 +109,3 @@ export default class SNPCoverageAdapter extends BaseFeatureDataAdapter {
 
   freeResources(/* { region } */): void {}
 }
-
-const { capabilities } = SNPCoverageAdapter
-export { capabilities }