@jbrowse/plugin-alignments 1.6.4 → 1.6.7

package/src/SNPCoverageAdapter/SNPCoverageAdapter.ts

@@ -9,7 +9,7 @@ import SerializableFilterChain from '@jbrowse/core/pluggableElementTypes/rendere
 import { ObservableCreate } from '@jbrowse/core/util/rxjs'
 import { reduce, filter, toArray } from 'rxjs/operators'
 import { Observable } from 'rxjs'
-import { getTagAlt } from '../util'
+import { getTag, getTagAlt } from '../util'
 import {
   parseCigar,
   getNextRefPos,
@@ -88,20 +88,18 @@ export default class SNPCoverageAdapter extends BaseFeatureDataAdapter {
       )
 
       bins.forEach((bin, index) => {
-        if (bin.total) {
-          observer.next(
-            new SimpleFeature({
-              id: `${this.id}-${region.start}-${index}`,
-              data: {
-                score: bin.total,
-                snpinfo: bin,
-                start: region.start + index,
-                end: region.start + index + 1,
-                refName: region.refName,
-              },
-            }),
-          )
-        }
+        observer.next(
+          new SimpleFeature({
+            id: `${this.id}-${region.start}-${index}`,
+            data: {
+              score: bin.total,
+              snpinfo: bin,
+              start: region.start + index,
+              end: region.start + index + 1,
+              refName: region.refName,
+            },
+          }),
+        )
       })
 
       // make fake features from the coverage
@@ -171,14 +169,6 @@ export default class SNPCoverageAdapter extends BaseFeatureDataAdapter {
     // delskips are elements that don't contribute to coverage, but should be
     // reported also (and are not interbase)
     type BinType = { total: number; strands: { [key: string]: number } }
-    const initBins = Array.from({ length: binMax }, () => ({
-      total: 0,
-      lowqual: {} as BinType,
-      cov: {} as BinType,
-      delskips: {} as BinType,
-      noncov: {} as BinType,
-      ref: {} as BinType,
-    }))
 
     // request an extra +1 on the end to get CpG crossing region boundary
     let regionSeq: string | undefined
@@ -189,7 +179,7 @@ export default class SNPCoverageAdapter extends BaseFeatureDataAdapter {
           refName: originalRefName || refName,
           start,
           end: end + 1,
-          assemblyName: 'na',
+          assemblyName: region.assemblyName,
         })
         .pipe(toArray())
         .toPromise()
@@ -198,172 +188,201 @@ export default class SNPCoverageAdapter extends BaseFeatureDataAdapter {
 
     const bins = await features
       .pipe(
-        reduce((bins, feature) => {
-          const cigar = feature.get('CIGAR')
-          const fstart = feature.get('start')
-          const fend = feature.get('end')
-          const fstrand = feature.get('strand')
-          const cigarOps = parseCigar(cigar)
-
-          for (let j = fstart; j < fend; j++) {
-            const i = j - region.start
-            if (i >= 0 && i < bins.length) {
-              const bin = bins[i]
-              bin.total++
-              inc(bin, fstrand, 'ref', 'ref')
+        reduce(
+          (bins, feature) => {
+            const cigar = feature.get('CIGAR')
+            const fstart = feature.get('start')
+            const fend = feature.get('end')
+            const fstrand = feature.get('strand')
+            const cigarOps = parseCigar(cigar)
+
+            for (let j = fstart; j < fend + 1; j++) {
+              const i = j - region.start
+              if (i >= 0 && i < binMax) {
+                const bin = bins[i] || {
+                  total: 0,
+                  lowqual: {} as BinType,
+                  cov: {} as BinType,
+                  delskips: {} as BinType,
+                  noncov: {} as BinType,
+                  ref: {} as BinType,
+                }
+                if (j !== fend) {
+                  bin.total++
+                  inc(bin, fstrand, 'ref', 'ref')
+                }
+                bins[i] = bin
+              }
             }
-          }
-
-          if (colorBy?.type === 'modifications') {
-            const seq = feature.get('seq')
-            const mm = getTagAlt(feature, 'MM', 'Mm') || ''
-
-            const ml =
-              (getTagAlt(feature, 'ML', 'Ml') as number[] | string) || []
 
-            const probabilities = ml
-              ? (typeof ml === 'string' ? ml.split(',').map(e => +e) : ml).map(
-                  e => e / 255,
-                )
-              : (getTagAlt(feature, 'MP', 'Mp') as string)
-                  .split('')
-                  .map(s => s.charCodeAt(0) - 33)
-                  .map(elt => Math.min(1, elt / 50))
-
-            let probIndex = 0
-            getModificationPositions(mm, seq, fstrand).forEach(
-              ({ type, positions }) => {
-                const mod = `mod_${type}`
-                for (const pos of getNextRefPos(cigarOps, positions)) {
-                  const epos = pos + fstart - region.start
-                  if (epos >= 0 && epos < bins.length && pos + fstart < fend) {
-                    const bin = bins[epos]
-                    if (probabilities[probIndex] > 0.5) {
-                      inc(bin, fstrand, 'cov', mod)
-                    } else {
-                      inc(bin, fstrand, 'lowqual', mod)
+            if (colorBy?.type === 'modifications') {
+              const seq = feature.get('seq')
+              const mm = getTagAlt(feature, 'MM', 'Mm') || ''
+
+              const ml =
+                (getTagAlt(feature, 'ML', 'Ml') as number[] | string) || []
+
+              const probabilities = ml
+                ? (typeof ml === 'string'
+                    ? ml.split(',').map(e => +e)
+                    : ml
+                  ).map(e => e / 255)
+                : (getTagAlt(feature, 'MP', 'Mp') as string)
+                    .split('')
+                    .map(s => s.charCodeAt(0) - 33)
+                    .map(elt => Math.min(1, elt / 50))
+
+              let probIndex = 0
+              getModificationPositions(mm, seq, fstrand).forEach(
+                ({ type, positions }) => {
+                  const mod = `mod_${type}`
+                  for (const pos of getNextRefPos(cigarOps, positions)) {
+                    const epos = pos + fstart - region.start
+                    if (
+                      epos >= 0 &&
+                      epos < bins.length &&
+                      pos + fstart < fend
+                    ) {
+                      const bin = bins[epos] || {
+                        total: 0,
+                        lowqual: {} as BinType,
+                        cov: {} as BinType,
+                        delskips: {} as BinType,
+                        noncov: {} as BinType,
+                        ref: {} as BinType,
+                      }
+
+                      if (probabilities[probIndex] > 0.5) {
+                        inc(bin, fstrand, 'cov', mod)
+                      } else {
+                        inc(bin, fstrand, 'lowqual', mod)
+                      }
                     }
+                    probIndex++
                   }
-                  probIndex++
-                }
-              },
-            )
-          }
-
-          // methylation based coloring takes into account both reference
-          // sequence CpG detection and reads
-          else if (colorBy?.type === 'methylation') {
-            if (!regionSeq) {
-              throw new Error(
-                'no region sequence detected, need sequenceAdapter configuration',
+                },
               )
             }
-            const seq = feature.get('seq')
-            const mm = getTagAlt(feature, 'MM', 'Mm') || ''
-            const methBins = new Array(region.end - region.start).fill(0)
-
-            getModificationPositions(mm, seq, fstrand).forEach(
-              ({ type, positions }) => {
-                // we are processing methylation
-                if (type === 'm') {
-                  for (const pos of getNextRefPos(cigarOps, positions)) {
-                    const epos = pos + fstart - region.start
-                    if (epos >= 0 && epos < methBins.length) {
-                      methBins[epos] = 1
+
+            // methylation based coloring takes into account both reference
+            // sequence CpG detection and reads
+            else if (colorBy?.type === 'methylation') {
+              if (!regionSeq) {
+                throw new Error(
+                  'no region sequence detected, need sequenceAdapter configuration',
+                )
+              }
+              const seq = feature.get('seq')
+              const mm = getTagAlt(feature, 'MM', 'Mm') || ''
+              const methBins = new Array(region.end - region.start).fill(0)
+
+              getModificationPositions(mm, seq, fstrand).forEach(
+                ({ type, positions }) => {
+                  // we are processing methylation
+                  if (type === 'm') {
+                    for (const pos of getNextRefPos(cigarOps, positions)) {
+                      const epos = pos + fstart - region.start
+                      if (epos >= 0 && epos < methBins.length) {
+                        methBins[epos] = 1
+                      }
                     }
                   }
-                }
-              },
-            )
+                },
+              )
 
-            for (let j = fstart; j < fend; j++) {
-              const i = j - region.start
-              if (i >= 0 && i < bins.length - 1) {
-                const l1 = regionSeq[i].toLowerCase()
-                const l2 = regionSeq[i + 1].toLowerCase()
-                const bin = bins[i]
-                const bin1 = bins[i + 1]
-
-                // color
-                if (l1 === 'c' && l2 === 'g') {
-                  if (methBins[i] || methBins[i + 1]) {
-                    inc(bin, fstrand, 'cov', 'meth')
-                    inc(bin1, fstrand, 'cov', 'meth')
-                    dec(bin, fstrand, 'ref', 'ref')
-                    dec(bin1, fstrand, 'ref', 'ref')
-                  } else {
-                    inc(bin, fstrand, 'cov', 'unmeth')
-                    inc(bin1, fstrand, 'cov', 'unmeth')
-                    dec(bin, fstrand, 'ref', 'ref')
-                    dec(bin1, fstrand, 'ref', 'ref')
+              for (let j = fstart; j < fend; j++) {
+                const i = j - region.start
+                if (i >= 0 && i < bins.length - 1) {
+                  const l1 = regionSeq[i].toLowerCase()
+                  const l2 = regionSeq[i + 1].toLowerCase()
+                  const bin = bins[i]
+                  const bin1 = bins[i + 1]
+
+                  // color
+                  if (l1 === 'c' && l2 === 'g') {
+                    if (methBins[i] || methBins[i + 1]) {
+                      inc(bin, fstrand, 'cov', 'meth')
+                      inc(bin1, fstrand, 'cov', 'meth')
+                      dec(bin, fstrand, 'ref', 'ref')
+                      dec(bin1, fstrand, 'ref', 'ref')
+                    } else {
+                      inc(bin, fstrand, 'cov', 'unmeth')
+                      inc(bin1, fstrand, 'cov', 'unmeth')
+                      dec(bin, fstrand, 'ref', 'ref')
+                      dec(bin1, fstrand, 'ref', 'ref')
+                    }
                   }
                 }
               }
             }
-          }
-
-          // normal SNP based coloring
-          else {
-            const mismatches = feature.get('mismatches') as
-              | Mismatch[]
-              | undefined
-
-            if (mismatches) {
-              for (let i = 0; i < mismatches.length; i++) {
-                const mismatch = mismatches[i]
-                const mstart = fstart + mismatch.start
-                for (let j = mstart; j < mstart + mismatchLen(mismatch); j++) {
-                  const epos = j - region.start
-                  if (epos >= 0 && epos < bins.length) {
-                    const bin = bins[epos]
-                    const { base, type } = mismatch
-                    const interbase = isInterbase(type)
-                    if (!interbase) {
-                      dec(bin, fstrand, 'ref', 'ref')
-                    } else {
-                      inc(bin, fstrand, 'noncov', type)
-                    }
 
-                    if (type === 'deletion' || type === 'skip') {
-                      inc(bin, fstrand, 'delskips', type)
-                      bin.total--
-                    } else if (!interbase) {
-                      inc(bin, fstrand, 'cov', base)
+            // normal SNP based coloring
+            else {
+              const mismatches = feature.get('mismatches') as
+                | Mismatch[]
+                | undefined
+
+              if (mismatches) {
+                for (let i = 0; i < mismatches.length; i++) {
+                  const mismatch = mismatches[i]
+                  const ms = fstart + mismatch.start
+                  for (let j = ms; j < ms + mismatchLen(mismatch); j++) {
+                    const epos = j - region.start
+                    if (epos >= 0 && epos < bins.length) {
+                      const bin = bins[epos]
+                      const { base, type } = mismatch
+                      const interbase = isInterbase(type)
+                      if (!interbase) {
+                        dec(bin, fstrand, 'ref', 'ref')
+                      } else {
+                        inc(bin, fstrand, 'noncov', type)
+                      }
+
+                      if (type === 'deletion' || type === 'skip') {
+                        inc(bin, fstrand, 'delskips', type)
+                        bin.total--
+                      } else if (!interbase) {
+                        inc(bin, fstrand, 'cov', base)
+                      }
                     }
                   }
                 }
-              }
 
-              mismatches
-                .filter(mismatch => mismatch.type === 'skip')
-                .forEach(mismatch => {
-                  const mstart = feature.get('start') + mismatch.start
-                  const start = mstart
-                  const end = mstart + mismatch.length
-                  const strand = feature.get('strand')
-                  const hash = `${start}_${end}_${strand}`
-                  if (!skipmap[hash]) {
-                    skipmap[hash] = {
-                      feature: feature,
-                      start,
-                      end,
-                      strand,
-                      xs:
-                        feature.get('xs') ||
-                        feature.get('ts') ||
-                        feature.get('tags').XS ||
-                        feature.get('tags').TS,
-                      score: 1,
+                mismatches
+                  .filter(mismatch => mismatch.type === 'skip')
+                  .forEach(mismatch => {
+                    const mstart = feature.get('start') + mismatch.start
+                    const start = mstart
+                    const end = mstart + mismatch.length
+                    const strand = feature.get('strand')
+                    const hash = `${start}_${end}_${strand}`
+                    if (!skipmap[hash]) {
+                      skipmap[hash] = {
+                        feature: feature,
+                        start,
+                        end,
+                        strand,
+                        xs: getTag(feature, 'XS') || getTag(feature, 'TS'),
+                        score: 1,
+                      }
+                    } else {
+                      skipmap[hash].score++
                     }
-                  } else {
-                    skipmap[hash].score++
-                  }
-                })
+                  })
+              }
             }
-          }
 
-          return bins
-        }, initBins),
+            return bins
+          },
+          [] as {
+            total: number
+            lowqual: BinType
+            cov: BinType
+            delskips: BinType
+            noncov: BinType
+            ref: BinType
+          }[],
+        ),
       )
       .toPromise()
 

package/src/SNPCoverageRenderer/SNPCoverageRenderer.ts

@@ -1,8 +1,7 @@
 import { createJBrowseTheme } from '@jbrowse/core/ui'
-import { featureSpanPx } from '@jbrowse/core/util'
+import { featureSpanPx, bpSpanPx } from '@jbrowse/core/util'
 import { Feature } from '@jbrowse/core/util/simpleFeature'
 import { readConfObject } from '@jbrowse/core/configuration'
-import { bpSpanPx } from '@jbrowse/core/util'
 import { RenderArgsDeserialized as FeatureRenderArgsDeserialized } from '@jbrowse/core/pluggableElementTypes/renderers/FeatureRendererType'
 import {
   getOrigin,
@@ -24,7 +23,7 @@ export interface RenderArgsDeserializedWithFeatures
   features: Map<string, Feature>
   ticks: { values: number[] }
   displayCrossHatches: boolean
-  modificationTagMap: Record<string, string>
+  modificationTagMap?: Record<string, string>
 }
 
 type Counts = {
@@ -49,12 +48,12 @@ export default class SNPCoverageRenderer extends WiggleBaseRenderer {
       regions,
       bpPerPx,
       displayCrossHatches,
-      modificationTagMap,
+      modificationTagMap = {},
       scaleOpts,
       height: unadjustedHeight,
       theme: configTheme,
       config: cfg,
-      ticks: { values },
+      ticks,
     } = props
     const theme = createJBrowseTheme(configTheme)
     const [region] = regions
@@ -66,9 +65,23 @@ export default class SNPCoverageRenderer extends WiggleBaseRenderer {
     const offset = YSCALEBAR_LABEL_OFFSET
     const height = unadjustedHeight - offset * 2
 
+    const { domain } = scaleOpts
+    if (!domain) {
+      return
+    }
     const opts = { ...scaleOpts, range: [0, height] }
     const viewScale = getScale(opts)
-    const snpViewScale = getScale({ ...opts, scaleType: 'linear' })
+    const snpViewScale = getScale({
+      ...opts,
+      range: [0, height],
+      scaleType: 'linear',
+    })
+    // clipping and insertion indicators, uses a smaller height/2 scale
+    const indicatorViewScale = getScale({
+      ...opts,
+      range: [0, height / 2],
+      scaleType: 'linear',
+    })
     const originY = getOrigin(scaleOpts.scaleType)
     const snpOriginY = getOrigin('linear')
 
@@ -83,7 +96,11 @@ export default class SNPCoverageRenderer extends WiggleBaseRenderer {
 
     // this is always linear scale, even when plotted on top of log scale
     const snpToY = (n: number) => height - (snpViewScale(n) || 0) + offset
+    const indicatorToY = (n: number) =>
+      height - (indicatorViewScale(n) || 0) + offset
     const snpToHeight = (n: number) => snpToY(snpOriginY) - snpToY(n)
+    const indicatorToHeight = (n: number) =>
+      indicatorToY(snpOriginY) - indicatorToY(n)
 
     const colorForBase: { [key: string]: string } = {
       A: theme.palette.bases.A.main,
@@ -106,91 +123,104 @@ export default class SNPCoverageRenderer extends WiggleBaseRenderer {
     // Use two pass rendering, which helps in visualizing the SNPs at higher
     // bpPerPx First pass: draw the gray background
     ctx.fillStyle = colorForBase.total
-    coverage.forEach(feature => {
+    for (let i = 0; i < coverage.length; i++) {
+      const feature = coverage[i]
       const [leftPx, rightPx] = featureSpanPx(feature, region, bpPerPx)
       const w = rightPx - leftPx + 0.3
       const score = feature.get('score') as number
       ctx.fillRect(leftPx, toY(score), w, toHeight(score))
-    })
-    ctx.fillStyle = 'grey'
-    ctx.beginPath()
-    ctx.lineTo(0, 0)
-    ctx.moveTo(0, width)
-    ctx.stroke()
+    }
+
+    // Keep track of previous total which we will use it to draw the interbase
+    // indicator (if there is a sudden clip, there will be no read coverage but
+    // there will be "clip" coverage) at that position beyond the read. if the
+    // clip is right at a block boundary then prevTotal will not be available,
+    // so this is a best attempt to plot interbase indicator at the "cliffs"
+    let prevTotal = 0
+
+    // 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 : 0
 
     // Second pass: draw the SNP data, and add a minimum feature width of 1px
     // which can be wider than the actual bpPerPx This reduces overdrawing of
     // the grey background over the SNPs
-    coverage.forEach(feature => {
+
+    for (let i = 0; i < coverage.length; i++) {
+      const feature = coverage[i]
       const [leftPx, rightPx] = featureSpanPx(feature, region, bpPerPx)
 
       const snpinfo = feature.get('snpinfo') as SNPInfo
       const w = Math.max(rightPx - leftPx + 0.3, 1)
       const totalScore = snpinfo.total
+      const keys = Object.keys(snpinfo.cov).sort()
 
-      Object.entries(snpinfo.cov)
-        .sort(([a], [b]) => {
-          if (a < b) {
-            return -1
-          }
-          if (a > b) {
-            return 1
-          }
-          return 0
-        })
-        .reduce((curr, [base, { total }]) => {
-          ctx.fillStyle =
-            colorForBase[base] ||
-            modificationTagMap[base.replace('mod_', '')] ||
-            'red'
-          ctx.fillRect(leftPx, snpToY(total + curr), w, snpToHeight(total))
-          return curr + total
-        }, 0)
-
-      const interbaseEvents = Object.entries(snpinfo.noncov)
+      let curr = 0
+      for (let i = 0; i < keys.length; i++) {
+        const base = keys[i]
+        const { total } = snpinfo.cov[base]
+        ctx.fillStyle =
+          colorForBase[base] ||
+          modificationTagMap[base.replace('mod_', '')] ||
+          '#888'
+        ctx.fillRect(leftPx, snpToY(total + curr), w, snpToHeight(total))
+        curr += total
+      }
+
+      const interbaseEvents = Object.keys(snpinfo.noncov)
       const indicatorHeight = 4.5
       if (drawInterbaseCounts) {
-        interbaseEvents.reduce((curr, [base, { total }]) => {
+        let curr = 0
+        for (let i = 0; i < interbaseEvents.length; i++) {
+          const base = interbaseEvents[i]
+          const { total } = snpinfo.noncov[base]
           ctx.fillStyle = colorForBase[base]
           ctx.fillRect(
-            leftPx - 0.6,
-            indicatorHeight + snpToHeight(curr),
+            leftPx - 0.6 + extraHorizontallyFlippedOffset,
+            indicatorHeight + indicatorToHeight(curr),
             1.2,
-            snpToHeight(total),
+            indicatorToHeight(total),
           )
-          return curr + total
-        }, 0)
+          curr += total
+        }
       }
 
       if (drawIndicators) {
         let accum = 0
         let max = 0
         let maxBase = ''
-        interbaseEvents.forEach(([base, { total }]) => {
+        for (let i = 0; i < interbaseEvents.length; i++) {
+          const base = interbaseEvents[i]
+          const { total } = snpinfo.noncov[base]
           accum += total
           if (total > max) {
             max = total
             maxBase = base
           }
-        })
+        }
 
         // avoid drawing a bunch of indicators if coverage is very low e.g.
-        // less than 7
-        if (accum > totalScore * indicatorThreshold && totalScore > 7) {
+        // less than 7, uses the prev total in the case of the "cliff"
+        const indicatorComparatorScore = Math.max(totalScore, prevTotal)
+        if (
+          accum > indicatorComparatorScore * indicatorThreshold &&
+          indicatorComparatorScore > 7
+        ) {
           ctx.fillStyle = colorForBase[maxBase]
           ctx.beginPath()
-          ctx.moveTo(leftPx - 3, 0)
-          ctx.lineTo(leftPx + 3, 0)
-          ctx.lineTo(leftPx, indicatorHeight)
+          const l = leftPx + extraHorizontallyFlippedOffset
+          ctx.moveTo(l - 3.5, 0)
+          ctx.lineTo(l + 3.5, 0)
+          ctx.lineTo(l, indicatorHeight)
           ctx.fill()
         }
       }
-    })
-
-    ctx.globalAlpha = 0.7
+      prevTotal = totalScore
+    }
 
     if (drawArcs) {
-      skips.forEach(f => {
+      for (let i = 0; i < skips.length; i++) {
+        const f = skips[i]
         const [left, right] = bpSpanPx(
           f.get('start'),
           f.get('end'),
@@ -201,9 +231,9 @@ export default class SNPCoverageRenderer extends WiggleBaseRenderer {
         ctx.beginPath()
         const str = f.get('strand') as number
         const xs = f.get('xs') as string
-        const pos = 'rgb(255,200,200)'
-        const neg = 'rgb(200,200,255)'
-        const neutral = 'rgb(200,200,200)'
+        const pos = 'rgba(255,200,200,0.7)'
+        const neg = 'rgba(200,200,255,0.7)'
+        const neutral = 'rgba(200,200,200,0.7)'
 
         if (xs === '+') {
           ctx.strokeStyle = pos
@@ -221,13 +251,13 @@ export default class SNPCoverageRenderer extends WiggleBaseRenderer {
         ctx.moveTo(left, height - offset * 2)
         ctx.bezierCurveTo(left, 0, right, 0, right, height - offset * 2)
         ctx.stroke()
-      })
+      }
     }
 
     if (displayCrossHatches) {
       ctx.lineWidth = 1
       ctx.strokeStyle = 'rgba(140,140,140,0.8)'
-      values.forEach(tick => {
+      ticks.values.forEach(tick => {
         ctx.beginPath()
         ctx.moveTo(0, Math.round(toY(tick)))
         ctx.lineTo(width, Math.round(toY(tick)))