@jbrowse/plugin-alignments 1.6.5 → 1.6.8

package/src/PileupRenderer/PileupRenderer.tsx

@@ -1,5 +1,4 @@
-import { AnyConfigurationModel } from '@jbrowse/core/configuration/configurationSchema'
-import { toArray } from 'rxjs/operators'
+import Color from 'color'
 import BoxRendererType, {
   RenderArgs,
   RenderArgsSerialized,
@@ -10,14 +9,20 @@ import BoxRendererType, {
 } from '@jbrowse/core/pluggableElementTypes/renderers/BoxRendererType'
 import { Theme } from '@material-ui/core'
 import { createJBrowseTheme } from '@jbrowse/core/ui'
-import { Feature } from '@jbrowse/core/util/simpleFeature'
-import { bpSpanPx, iterMap } from '@jbrowse/core/util'
-import Color from 'color'
-import { Region } from '@jbrowse/core/util/types'
+import {
+  bpSpanPx,
+  iterMap,
+  measureText,
+  Region,
+  Feature,
+} from '@jbrowse/core/util'
 import { renderToAbstractCanvas } from '@jbrowse/core/util/offscreenCanvasUtils'
 import { BaseLayout } from '@jbrowse/core/util/layouts/BaseLayout'
 import { getAdapter } from '@jbrowse/core/data_adapters/dataAdapterCache'
-import { readConfObject } from '@jbrowse/core/configuration'
+import {
+  readConfObject,
+  AnyConfigurationModel,
+} from '@jbrowse/core/configuration'
 
 // locals
 import {
@@ -27,7 +32,12 @@ import {
   getNextRefPos,
 } from '../BamAdapter/MismatchParser'
 import { sortFeature } from './sortUtil'
-import { getTagAlt, orientationTypes } from '../util'
+import {
+  getTagAlt,
+  orientationTypes,
+  fetchSequence,
+  shouldFetchReferenceSequence,
+} from '../util'
 import {
   PileupLayoutSession,
   PileupLayoutSessionProps,
@@ -44,6 +54,15 @@ function getColorBaseMap(theme: Theme) {
   }
 }
 
+function getContrastBaseMap(theme: Theme) {
+  return Object.fromEntries(
+    Object.entries(getColorBaseMap(theme)).map(([key, value]) => [
+      key,
+      theme.palette.getContrastText(value),
+    ]),
+  )
+}
+
 export interface RenderArgsDeserialized extends BoxRenderArgsDeserialized {
   colorBy?: { type: string; tag?: string }
   colorTagMap?: Record<string, string>
@@ -263,6 +282,64 @@ export default class PileupRenderer extends BoxRendererType {
     return strand === 1 ? 'color_fwd_strand' : 'color_rev_strand'
   }
 
+  colorByPerBaseLettering(
+    ctx: CanvasRenderingContext2D,
+    feat: LayoutFeature,
+    _config: AnyConfigurationModel,
+    region: Region,
+    bpPerPx: number,
+    props: {
+      colorForBase: Record<string, string>
+      contrastForBase: Record<string, string>
+      charWidth: number
+      charHeight: number
+    },
+  ) {
+    const { colorForBase, contrastForBase, charWidth, charHeight } = props
+    const heightLim = charHeight - 2
+    const { feature, topPx, heightPx } = feat
+    const seq = feature.get('seq') as string
+    const cigarOps = parseCigar(feature.get('CIGAR'))
+    const widthPx = 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 letter = seq[soffset + m]
+          ctx.fillStyle = colorForBase[letter]
+          const [leftPx] = bpSpanPx(
+            start + roffset + m,
+            start + roffset + m + 1,
+            region,
+            bpPerPx,
+          )
+          ctx.fillRect(leftPx, topPx, widthPx + 0.5, heightPx)
+
+          if (widthPx >= charWidth && heightPx >= heightLim) {
+            // normal SNP coloring
+            ctx.fillStyle = contrastForBase[letter]
+
+            ctx.fillText(
+              letter,
+              leftPx + (widthPx - charWidth) / 2 + 1,
+              topPx + heightPx,
+            )
+          }
+        }
+        soffset += len
+        roffset += len
+      }
+    }
+  }
   colorByPerBaseQuality(
     ctx: CanvasRenderingContext2D,
     feat: LayoutFeature,
@@ -276,27 +353,30 @@ export default class PileupRenderer extends BoxRendererType {
     const cigarOps = parseCigar(feature.get('CIGAR'))
     const width = 1 / bpPerPx
     const start = feature.get('start')
+    let soffset = 0 // sequence offset
+    let roffset = 0 // reference offset
 
-    for (let i = 0, j = 0, k = 0; k < scores.length; i += 2, k++) {
+    for (let i = 0; i < cigarOps.length; i += 2) {
       const len = +cigarOps[i]
       const op = cigarOps[i + 1]
       if (op === 'S' || op === 'I') {
-        k += len
+        soffset += len
       } else if (op === 'D' || op === 'N') {
-        j += len
+        roffset += len
       } else if (op === 'M' || op === 'X' || op === '=') {
         for (let m = 0; m < len; m++) {
-          const score = scores[k + m]
+          const score = scores[soffset + m]
           ctx.fillStyle = `hsl(${score === 255 ? 150 : score * 1.5},55%,50%)`
           const [leftPx] = bpSpanPx(
-            start + j + m,
-            start + j + m + 1,
+            start + roffset + m,
+            start + roffset + m + 1,
             region,
             bpPerPx,
           )
           ctx.fillRect(leftPx, topPx, width + 0.5, heightPx)
         }
-        j += len
+        soffset += len
+        roffset += len
       }
     }
   }
@@ -345,7 +425,8 @@ export default class PileupRenderer extends BoxRendererType {
 
     // probIndex applies across multiple modifications e.g.
     let probIndex = 0
-    modifications.forEach(({ type, positions }) => {
+    for (let i = 0; i < modifications.length; i++) {
+      const { type, positions } = modifications[i]
       const col = modificationTagMap[type] || 'black'
       const base = Color(col)
       for (const readPos of getNextRefPos(cigarOps, positions)) {
@@ -367,12 +448,12 @@ export default class PileupRenderer extends BoxRendererType {
         }
         probIndex++
       }
-    })
+    }
   }
 
   // Color by methylation is slightly modified version of color by
-  // modifications
-  //
+  // modifications that focuses on CpG sites, with non-methylated CpG colored
+  // blue
   colorByMethylation(
     ctx: CanvasRenderingContext2D,
     layoutFeature: LayoutFeature,
@@ -399,7 +480,9 @@ export default class PileupRenderer extends BoxRendererType {
     const { start: rstart, end: rend } = region
 
     const methBins = new Array(rend - rstart).fill(0)
-    getModificationPositions(mm, seq, strand).forEach(({ type, positions }) => {
+    const modifications = getModificationPositions(mm, seq, strand)
+    for (let i = 0; i < modifications.length; i++) {
+      const { type, positions } = modifications[i]
       if (type === 'm' && positions) {
         for (const pos of getNextRefPos(cigarOps, positions)) {
           const epos = pos + fstart - rstart
@@ -408,7 +491,7 @@ export default class PileupRenderer extends BoxRendererType {
           }
         }
       }
-    })
+    }
 
     for (let j = fstart; j < fend; j++) {
       const i = j - rstart
@@ -500,6 +583,10 @@ export default class PileupRenderer extends BoxRendererType {
     ctx: CanvasRenderingContext2D,
     feat: LayoutFeature,
     props: RenderArgsDeserializedWithFeaturesAndLayout & {
+      colorForBase: Record<string, string>
+      contrastForBase: Record<string, string>
+      charWidth: number
+      charHeight: number
       defaultColor: boolean
     },
   ) {
@@ -510,6 +597,10 @@ export default class PileupRenderer extends BoxRendererType {
       regions,
       colorBy,
       colorTagMap = {},
+      colorForBase,
+      contrastForBase,
+      charWidth,
+      charHeight,
     } = props
     const { tag = '', type: colorType = '' } = colorBy || {}
     const { feature } = feat
@@ -574,6 +665,19 @@ export default class PileupRenderer extends BoxRendererType {
       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)
+        const flags = feature.get('flags')
+        if (flags & 16) {
+          ctx.fillStyle = '#c8dcc8'
+        } else {
+          ctx.fillStyle = '#c8c8c8'
+        }
+        break
+
       case 'normal':
       default:
         if (defaultColor) {
@@ -594,6 +698,15 @@ export default class PileupRenderer extends BoxRendererType {
         this.colorByPerBaseQuality(ctx, feat, config, region, bpPerPx)
         break
 
+      case 'perBaseLettering':
+        this.colorByPerBaseLettering(ctx, feat, config, region, bpPerPx, {
+          colorForBase,
+          contrastForBase,
+          charWidth,
+          charHeight,
+        })
+        break
+
       case 'modifications':
         this.colorByModifications(ctx, feat, config, region, bpPerPx, props)
         break
@@ -608,9 +721,9 @@ export default class PileupRenderer extends BoxRendererType {
     ctx: CanvasRenderingContext2D,
     feat: LayoutFeature,
     props: RenderArgsDeserializedWithFeaturesAndLayout,
-    theme: Theme,
-    colorForBase: { [key: string]: string },
     opts: {
+      colorForBase: { [key: string]: string }
+      contrastForBase: { [key: string]: string }
       mismatchAlpha?: boolean
       drawSNPs?: boolean
       drawIndels?: boolean
@@ -621,13 +734,15 @@ export default class PileupRenderer extends BoxRendererType {
     },
   ) {
     const {
-      minSubfeatureWidth: minWidth,
+      minSubfeatureWidth,
       largeInsertionIndicatorScale,
       mismatchAlpha,
       drawSNPs = true,
       drawIndels = true,
       charWidth,
       charHeight,
+      colorForBase,
+      contrastForBase,
     } = opts
     const { bpPerPx, regions } = props
     const { heightPx, topPx, feature } = feat
@@ -635,7 +750,7 @@ export default class PileupRenderer extends BoxRendererType {
     const start = feature.get('start')
 
     const pxPerBp = Math.min(1 / bpPerPx, 2)
-    const w = Math.max(minWidth, pxPerBp)
+    const w = Math.max(minSubfeatureWidth, pxPerBp)
     const mismatches: Mismatch[] = feature.get('mismatches')
     const heightLim = charHeight - 2
 
@@ -650,6 +765,12 @@ export default class PileupRenderer extends BoxRendererType {
       return color
     }
 
+    // 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
+
     // two pass rendering: first pass, draw all the mismatches except wide
     // insertion markers
     for (let i = 0; i < mismatches.length; i += 1) {
@@ -658,7 +779,7 @@ export default class PileupRenderer extends BoxRendererType {
       const mlen = mismatch.length
       const mbase = mismatch.base
       const [leftPx, rightPx] = bpSpanPx(mstart, mstart + mlen, region, bpPerPx)
-      const widthPx = Math.max(minWidth, Math.abs(leftPx - rightPx))
+      const widthPx = Math.max(minSubfeatureWidth, Math.abs(leftPx - rightPx))
       if (mismatch.type === 'mismatch' && drawSNPs) {
         const baseColor = colorForBase[mismatch.base] || '#888'
 
@@ -669,7 +790,7 @@ export default class PileupRenderer extends BoxRendererType {
         if (widthPx >= charWidth && heightPx >= heightLim) {
           // normal SNP coloring
           ctx.fillStyle = getAlphaColor(
-            theme.palette.getContrastText(baseColor),
+            contrastForBase[mismatch.base],
             mismatch,
           )
           ctx.fillText(
@@ -683,37 +804,36 @@ export default class PileupRenderer extends BoxRendererType {
         ctx.fillStyle = baseColor
         ctx.fillRect(leftPx, topPx, widthPx, heightPx)
         const txt = `${mismatch.length}`
-        const rect = ctx.measureText(txt)
-        if (widthPx >= rect.width && heightPx >= heightLim) {
-          ctx.fillStyle = theme.palette.getContrastText(baseColor)
+        const rwidth = measureText(txt, 10)
+        if (widthPx >= rwidth && heightPx >= heightLim) {
+          ctx.fillStyle = contrastForBase.deletion
           ctx.fillText(
             txt,
-            leftPx + (rightPx - leftPx) / 2 - rect.width / 2,
+            (leftPx + rightPx) / 2 - rwidth / 2,
             topPx + heightPx,
           )
         }
       } else if (mismatch.type === 'insertion' && drawIndels) {
         ctx.fillStyle = 'purple'
-        const pos = leftPx - 1
+        const pos = leftPx + extraHorizontallyFlippedOffset
         const len = +mismatch.base || mismatch.length
+        const insW = Math.max(minSubfeatureWidth, Math.min(1.2, 1 / bpPerPx))
         if (len < 10) {
-          ctx.fillRect(pos, topPx, w, heightPx)
-          if (1 / bpPerPx >= charWidth) {
-            ctx.fillRect(pos - w, topPx, w * 3, 1)
-            ctx.fillRect(pos - w, topPx + heightPx - 1, w * 3, 1)
-          }
+          ctx.fillRect(pos, topPx, insW, heightPx)
           if (1 / bpPerPx >= charWidth && heightPx >= heightLim) {
-            ctx.fillText(`(${mismatch.base})`, leftPx + 2, topPx + heightPx)
+            ctx.fillRect(pos - insW, topPx, insW * 3, 1)
+            ctx.fillRect(pos - insW, topPx + heightPx - 1, insW * 3, 1)
+            ctx.fillText(`(${mismatch.base})`, pos + 3, topPx + heightPx)
           }
         }
       } else if (mismatch.type === 'hardclip' || mismatch.type === 'softclip') {
         ctx.fillStyle = mismatch.type === 'hardclip' ? 'red' : 'blue'
-        const pos = leftPx - 1
-        ctx.fillRect(pos, topPx + 1, w, heightPx - 2)
-        ctx.fillRect(pos - w, topPx, w * 3, 1)
-        ctx.fillRect(pos - w, topPx + heightPx - 1, w * 3, 1)
-        if (widthPx >= charWidth && heightPx >= heightLim) {
-          ctx.fillText(`(${mismatch.base})`, leftPx + 2, topPx + heightPx)
+        const pos = leftPx + extraHorizontallyFlippedOffset
+        ctx.fillRect(pos, topPx, w, heightPx)
+        if (1 / bpPerPx >= charWidth && heightPx >= heightLim) {
+          ctx.fillRect(pos - w, topPx, w * 3, 1)
+          ctx.fillRect(pos - w, topPx + heightPx - 1, w * 3, 1)
+          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
@@ -797,10 +917,9 @@ export default class PileupRenderer extends BoxRendererType {
         .filter(mismatch => mismatch.type === 'softclip')
         .forEach(mismatch => {
           const softClipLength = mismatch.cliplen || 0
+          const s = feature.get('start')
           const softClipStart =
-            mismatch.start === 0
-              ? feature.get('start') - softClipLength
-              : feature.get('start') + mismatch.start
+            mismatch.start === 0 ? s - softClipLength : s + mismatch.start
 
           for (let k = 0; k < softClipLength; k += 1) {
             const base = seq.charAt(k + mismatch.start)
@@ -854,6 +973,7 @@ export default class PileupRenderer extends BoxRendererType {
 
     const theme = createJBrowseTheme(configTheme)
     const colorForBase = getColorBaseMap(theme)
+    const contrastForBase = getContrastBaseMap(theme)
     if (!layout) {
       throw new Error(`layout required`)
     }
@@ -871,8 +991,12 @@ export default class PileupRenderer extends BoxRendererType {
       this.drawAlignmentRect(ctx, feat, {
         ...props,
         defaultColor,
+        colorForBase,
+        contrastForBase,
+        charWidth,
+        charHeight,
       })
-      this.drawMismatches(ctx, feat, props, theme, colorForBase, {
+      this.drawMismatches(ctx, feat, props, {
         mismatchAlpha,
         drawSNPs: shouldDrawMismatches(colorBy?.type),
         drawIndels: shouldDrawMismatches(colorBy?.type),
@@ -880,6 +1004,8 @@ export default class PileupRenderer extends BoxRendererType {
         minSubfeatureWidth,
         charWidth,
         charHeight,
+        colorForBase,
+        contrastForBase,
       })
       if (showSoftClip) {
         this.drawSoftClipping(ctx, feat, props, config, theme)
@@ -931,34 +1057,40 @@ export default class PileupRenderer extends BoxRendererType {
     return layoutRecords
   }
 
-  async render(renderProps: RenderArgsDeserialized) {
-    const { sessionId, bpPerPx, regions, adapterConfig } = renderProps
+  async fetchSequence(renderProps: RenderArgsDeserialized) {
+    const { sessionId, regions, adapterConfig } = renderProps
     const { sequenceAdapter } = adapterConfig
+    if (!sequenceAdapter) {
+      return undefined
+    }
+    const { dataAdapter } = await getAdapter(
+      this.pluginManager,
+      sessionId,
+      sequenceAdapter,
+    )
+    const [region] = regions
+    return fetchSequence(region, dataAdapter as BaseFeatureDataAdapter)
+  }
+
+  async render(renderProps: RenderArgsDeserialized) {
     const features = await this.getFeatures(renderProps)
     const layout = this.createLayoutInWorker(renderProps)
+    const { regions, bpPerPx } = renderProps
 
-    const layoutRecords = this.layoutFeats({ ...renderProps, features, layout })
+    const layoutRecords = this.layoutFeats({
+      ...renderProps,
+      features,
+      layout,
+    })
     const [region] = regions
-    let regionSequence: string | undefined
-    const { end, start, originalRefName, refName } = region
-
-    if (sequenceAdapter) {
-      const { dataAdapter } = await getAdapter(
-        this.pluginManager,
-        sessionId,
-        sequenceAdapter,
-      )
 
-      const feats = await (dataAdapter as BaseFeatureDataAdapter)
-        .getFeatures({
-          ...region,
-          refName: originalRefName || refName,
-          end: region.end + 1,
-        })
-        .pipe(toArray())
-        .toPromise()
-      regionSequence = feats[0]?.get('seq')
-    }
+    // only need reference sequence if there are features and only for some
+    // cases
+    const regionSequence =
+      features.size && shouldFetchReferenceSequence(renderProps.colorBy?.type)
+        ? await this.fetchSequence(renderProps)
+        : undefined
+    const { end, start } = region
 
     const width = (end - start) / bpPerPx
     const height = Math.max(layout.getTotalHeight(), 1)

package/src/PileupRenderer/components/PileupRendering.tsx

@@ -136,9 +136,11 @@ function PileupRendering(props: {
     }
     let offsetX = 0
     let offsetY = 0
-    if (highlightOverlayCanvas.current) {
-      offsetX = highlightOverlayCanvas.current.getBoundingClientRect().left
-      offsetY = highlightOverlayCanvas.current.getBoundingClientRect().top
+    const canvas = highlightOverlayCanvas.current
+    if (canvas) {
+      const { left, top } = canvas.getBoundingClientRect()
+      offsetX = left
+      offsetY = top
     }
     offsetX = event.clientX - offsetX
     offsetY = event.clientY - offsetY