@jbrowse/plugin-alignments 1.7.7 → 1.7.10

package/src/PileupRenderer/PileupRenderer.tsx

@@ -44,6 +44,25 @@ import {
 } from './PileupLayoutSession'
 import { BaseFeatureDataAdapter } from '@jbrowse/core/data_adapters/BaseAdapter'
 
+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)
+  }
+}
+
 function getColorBaseMap(theme: Theme) {
   return {
     A: theme.palette.bases.A.main,
@@ -118,18 +137,22 @@ interface LayoutFeature {
   feature: Feature
 }
 
-function shouldDrawMismatches(type?: string) {
+function shouldDrawSNPs(type?: string) {
   return !['methylation', 'modifications'].includes(type || '')
 }
 
+function shouldDrawIndels(type?: string) {
+  return true
+}
+
 export default class PileupRenderer extends BoxRendererType {
   supportsSVG = true
 
   // get width and height of chars the height is an approximation: width
   // letter M is approximately the height
   getCharWidthHeight(ctx: CanvasRenderingContext2D) {
-    const charWidth = ctx.measureText('A').width
-    const charHeight = ctx.measureText('M').width
+    const charWidth = measureText('A')
+    const charHeight = measureText('M')
     return { charWidth, charHeight }
   }
 
@@ -283,25 +306,32 @@ 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
+  colorByPerBaseLettering({
+    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
     const cigarOps = parseCigar(feature.get('CIGAR'))
-    const widthPx = 1 / bpPerPx
+    const w = 1 / bpPerPx
     const start = feature.get('start')
     let soffset = 0 // sequence offset
     let roffset = 0 // reference offset
@@ -316,22 +346,25 @@ export default class PileupRenderer extends BoxRendererType {
       } 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,
+          const r = start + roffset + m
+          const [leftPx] = bpSpanPx(r, r + 1, region, bpPerPx)
+          fillRect(
+            ctx,
+            leftPx,
+            topPx,
+            w + 0.5,
+            heightPx,
+            canvasWidth,
+            colorForBase[letter],
           )
-          ctx.fillRect(leftPx, topPx, widthPx + 0.5, heightPx)
 
-          if (widthPx >= charWidth && heightPx >= heightLim) {
+          if (w >= charWidth && heightPx >= heightLim) {
             // normal SNP coloring
             ctx.fillStyle = contrastForBase[letter]
 
             ctx.fillText(
               letter,
-              leftPx + (widthPx - charWidth) / 2 + 1,
+              leftPx + (w - charWidth) / 2 + 1,
               topPx + heightPx,
             )
           }
@@ -341,13 +374,19 @@ export default class PileupRenderer extends BoxRendererType {
       }
     }
   }
-  colorByPerBaseQuality(
-    ctx: CanvasRenderingContext2D,
-    feat: LayoutFeature,
-    _config: AnyConfigurationModel,
-    region: Region,
-    bpPerPx: number,
-  ) {
+  colorByPerBaseQuality({
+    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)
@@ -367,14 +406,21 @@ export default class PileupRenderer extends BoxRendererType {
       } else if (op === 'M' || op === 'X' || op === '=') {
         for (let m = 0; m < len; m++) {
           const score = scores[soffset + m]
-          ctx.fillStyle = `hsl(${score === 255 ? 150 : score * 1.5},55%,50%)`
           const [leftPx] = bpSpanPx(
             start + roffset + m,
             start + roffset + m + 1,
             region,
             bpPerPx,
           )
-          ctx.fillRect(leftPx, topPx, width + 0.5, heightPx)
+          fillRect(
+            ctx,
+            leftPx,
+            topPx,
+            width + 0.5,
+            heightPx,
+            canvasWidth,
+            `hsl(${score === 255 ? 150 : score * 1.5},55%,50%)`,
+          )
         }
         soffset += len
         roffset += len
@@ -391,16 +437,23 @@ export default class PileupRenderer extends BoxRendererType {
   // has very high likelihood basecalls at that point, we really only care
   // about low qual calls <20 approx
   //
-  colorByModifications(
-    ctx: CanvasRenderingContext2D,
-    layoutFeature: LayoutFeature,
-    _config: AnyConfigurationModel,
-    region: Region,
-    bpPerPx: number,
-    props: RenderArgsDeserializedWithFeaturesAndLayout,
-  ) {
-    const { feature, topPx, heightPx } = layoutFeature
-    const { modificationTagMap = {} } = props
+  colorByModifications({
+    ctx,
+    feat,
+    region,
+    bpPerPx,
+    renderArgs,
+    canvasWidth,
+  }: {
+    ctx: CanvasRenderingContext2D
+    feat: LayoutFeature
+    region: Region
+    bpPerPx: number
+    renderArgs: RenderArgsDeserializedWithFeaturesAndLayout
+    canvasWidth: number
+  }) {
+    const { feature, topPx, heightPx } = feat
+    const { modificationTagMap = {} } = renderArgs
 
     const mm = (getTagAlt(feature, 'MM', 'Mm') as string) || ''
 
@@ -417,7 +470,6 @@ export default class PileupRenderer extends BoxRendererType {
 
     const cigar = feature.get('CIGAR')
     const start = feature.get('start')
-    const end = feature.get('end')
     const seq = feature.get('seq')
     const strand = feature.get('strand')
     const cigarOps = parseCigar(cigar)
@@ -431,22 +483,27 @@ export default class PileupRenderer extends BoxRendererType {
       const col = modificationTagMap[type] || 'black'
       const base = Color(col)
       for (const readPos of getNextRefPos(cigarOps, positions)) {
-        if (readPos >= 0 && start + readPos < end) {
-          const [leftPx, rightPx] = bpSpanPx(
-            start + readPos,
-            start + readPos + 1,
-            region,
-            bpPerPx,
-          )
-
-          // give it a little boost of 0.1 to not make them fully
-          // invisible to avoid confusion
-          ctx.fillStyle = base
-            .alpha(probabilities[probIndex] + 0.1)
-            .hsl()
-            .string()
-          ctx.fillRect(leftPx, topPx, rightPx - leftPx + 0.5, heightPx)
-        }
+        const r = start + readPos
+        const [leftPx, rightPx] = bpSpanPx(r, r + 1, region, bpPerPx)
+
+        // give it a little boost of 0.1 to not make them fully
+        // invisible to avoid confusion
+        const prob = probabilities[probIndex]
+
+        fillRect(
+          ctx,
+          leftPx,
+          topPx,
+          rightPx - leftPx + 0.5,
+          heightPx,
+          canvasWidth,
+          prob && prob !== 1
+            ? base
+                .alpha(prob + 0.1)
+                .hsl()
+                .string()
+            : col,
+        )
         probIndex++
       }
     }
@@ -455,16 +512,23 @@ export default class PileupRenderer extends BoxRendererType {
   // Color by methylation is slightly modified version of color by
   // modifications that focuses on CpG sites, with non-methylated CpG colored
   // blue
-  colorByMethylation(
-    ctx: CanvasRenderingContext2D,
-    layoutFeature: LayoutFeature,
-    _config: AnyConfigurationModel,
-    region: Region,
-    bpPerPx: number,
-    props: RenderArgsDeserializedWithFeaturesAndLayout,
-  ) {
-    const { regionSequence } = props
-    const { feature, topPx, heightPx } = layoutFeature
+  colorByMethylation({
+    ctx,
+    feat,
+    region,
+    bpPerPx,
+    renderArgs,
+    canvasWidth,
+  }: {
+    ctx: CanvasRenderingContext2D
+    feat: LayoutFeature
+    region: Region
+    bpPerPx: number
+    renderArgs: RenderArgsDeserializedWithFeaturesAndLayout
+    canvasWidth: number
+  }) {
+    const { regionSequence } = renderArgs
+    const { feature, topPx, heightPx } = feat
 
     const mm: string = getTagAlt(feature, 'MM', 'Mm') || ''
 
@@ -478,15 +542,14 @@ export default class PileupRenderer extends BoxRendererType {
     const seq = feature.get('seq')
     const strand = feature.get('strand')
     const cigarOps = parseCigar(cigar)
-    const { start: rstart, end: rend } = region
 
-    const methBins = new Array(rend - rstart).fill(0)
+    const methBins = new Array(region.end - region.start).fill(0)
     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
+          const epos = pos + fstart - region.start
           if (epos >= 0 && epos < methBins.length) {
             methBins[epos] = 1
           }
@@ -495,7 +558,7 @@ export default class PileupRenderer extends BoxRendererType {
     }
 
     for (let j = fstart; j < fend; j++) {
-      const i = j - rstart
+      const i = j - region.start
       if (i >= 0 && i < methBins.length) {
         const l1 = regionSequence[i].toLowerCase()
         const l2 = regionSequence[i + 1].toLowerCase()
@@ -503,36 +566,45 @@ export default class PileupRenderer extends BoxRendererType {
         // if we are zoomed out, display just a block over the cpg
         if (bpPerPx > 2) {
           if (l1 === 'c' && l2 === 'g') {
-            const s = rstart + i
+            const s = region.start + i
             const [leftPx, rightPx] = bpSpanPx(s, s + 2, region, bpPerPx)
-            if (methBins[i] || methBins[i + 1]) {
-              ctx.fillStyle = 'red'
-            } else {
-              ctx.fillStyle = 'blue'
-            }
-            ctx.fillRect(leftPx, topPx, rightPx - leftPx + 0.5, heightPx)
+            fillRect(
+              ctx,
+              leftPx,
+              topPx,
+              rightPx - leftPx + 0.5,
+              heightPx,
+              canvasWidth,
+              methBins[i] || methBins[i + 1] ? 'red' : 'blue',
+            )
           }
         }
         // if we are zoomed in, color the c inside the cpg
         else {
           // color
           if (l1 === 'c' && l2 === 'g') {
-            const s = rstart + i
+            const s = region.start + i
             const [leftPx, rightPx] = bpSpanPx(s, s + 1, region, bpPerPx)
-            if (methBins[i]) {
-              ctx.fillStyle = 'red'
-            } else {
-              ctx.fillStyle = 'blue'
-            }
-            ctx.fillRect(leftPx, topPx, rightPx - leftPx + 0.5, heightPx)
+            fillRect(
+              ctx,
+              leftPx,
+              topPx,
+              rightPx - leftPx + 0.5,
+              heightPx,
+              canvasWidth,
+              methBins[i] ? 'red' : 'blue',
+            )
 
             const [leftPx2, rightPx2] = bpSpanPx(s + 1, s + 2, region, bpPerPx)
-            if (methBins[i + 1]) {
-              ctx.fillStyle = 'red'
-            } else {
-              ctx.fillStyle = 'blue'
-            }
-            ctx.fillRect(leftPx2, topPx, rightPx2 - leftPx2 + 0.5, heightPx)
+            fillRect(
+              ctx,
+              leftPx2,
+              topPx,
+              rightPx2 - leftPx2 + 0.5,
+              heightPx,
+              canvasWidth,
+              methBins[i + 1] ? 'red' : 'blue',
+            )
           }
         }
       }
@@ -580,29 +652,29 @@ export default class PileupRenderer extends BoxRendererType {
     }
   }
 
-  drawAlignmentRect(
-    ctx: CanvasRenderingContext2D,
-    feat: LayoutFeature,
-    props: RenderArgsDeserializedWithFeaturesAndLayout & {
-      colorForBase: Record<string, string>
-      contrastForBase: Record<string, string>
-      charWidth: number
-      charHeight: number
-      defaultColor: boolean
-    },
-  ) {
-    const {
-      defaultColor,
-      config,
-      bpPerPx,
-      regions,
-      colorBy,
-      colorTagMap = {},
-      colorForBase,
-      contrastForBase,
-      charWidth,
-      charHeight,
-    } = props
+  drawAlignmentRect({
+    ctx,
+    feat,
+    renderArgs,
+    colorForBase,
+    contrastForBase,
+    charWidth,
+    charHeight,
+    defaultColor,
+    canvasWidth,
+  }: {
+    ctx: CanvasRenderingContext2D
+    feat: LayoutFeature
+    renderArgs: RenderArgsDeserializedWithFeaturesAndLayout
+    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]
@@ -689,62 +761,89 @@ export default class PileupRenderer extends BoxRendererType {
         break
     }
 
-    this.drawRect(ctx, feat, props)
+    this.drawRect(ctx, feat, renderArgs)
 
     // second pass for color types that render per-base things that go over the
     // existing drawing
     switch (colorType) {
       case 'perBaseQuality':
-        this.colorByPerBaseQuality(ctx, feat, config, region, bpPerPx)
+        this.colorByPerBaseQuality({
+          ctx,
+          feat,
+          region,
+          bpPerPx,
+          canvasWidth,
+        })
         break
 
       case 'perBaseLettering':
-        this.colorByPerBaseLettering(ctx, feat, config, region, bpPerPx, {
+        this.colorByPerBaseLettering({
+          ctx,
+          feat,
+          region,
+          bpPerPx,
           colorForBase,
           contrastForBase,
           charWidth,
           charHeight,
+          canvasWidth,
         })
         break
 
       case 'modifications':
-        this.colorByModifications(ctx, feat, config, region, bpPerPx, props)
+        this.colorByModifications({
+          ctx,
+          feat,
+          region,
+          bpPerPx,
+          renderArgs,
+          canvasWidth,
+        })
         break
 
       case 'methylation':
-        this.colorByMethylation(ctx, feat, config, region, bpPerPx, props)
+        this.colorByMethylation({
+          ctx,
+          feat,
+          region,
+          bpPerPx,
+          renderArgs,
+          canvasWidth,
+        })
         break
     }
   }
 
-  drawMismatches(
-    ctx: CanvasRenderingContext2D,
-    feat: LayoutFeature,
-    props: RenderArgsDeserializedWithFeaturesAndLayout,
-    opts: {
-      colorForBase: { [key: string]: string }
-      contrastForBase: { [key: string]: string }
-      mismatchAlpha?: boolean
-      drawSNPs?: boolean
-      drawIndels?: boolean
-      minSubfeatureWidth: number
-      largeInsertionIndicatorScale: number
-      charWidth: number
-      charHeight: number
-    },
-  ) {
-    const {
-      minSubfeatureWidth,
-      largeInsertionIndicatorScale,
-      mismatchAlpha,
-      drawSNPs = true,
-      drawIndels = true,
-      charWidth,
-      charHeight,
-      colorForBase,
-      contrastForBase,
-    } = opts
-    const { bpPerPx, regions } = props
+  drawMismatches({
+    ctx,
+    feat,
+    renderArgs,
+    minSubfeatureWidth,
+    largeInsertionIndicatorScale,
+    mismatchAlpha,
+    charWidth,
+    charHeight,
+    colorForBase,
+    contrastForBase,
+    canvasWidth,
+    drawSNPs = true,
+    drawIndels = true,
+  }: {
+    ctx: CanvasRenderingContext2D
+    feat: LayoutFeature
+    renderArgs: RenderArgsDeserializedWithFeaturesAndLayout
+    colorForBase: { [key: string]: string }
+    contrastForBase: { [key: string]: string }
+    mismatchAlpha?: boolean
+    drawSNPs?: boolean
+    drawIndels?: boolean
+    minSubfeatureWidth: number
+    largeInsertionIndicatorScale: number
+    charWidth: number
+    charHeight: number
+    canvasWidth: number
+  }) {
+    const { bpPerPx, regions } = renderArgs
     const { heightPx, topPx, feature } = feat
     const [region] = regions
     const start = feature.get('start')
@@ -754,17 +853,6 @@ export default class PileupRenderer extends BoxRendererType {
     const mismatches: Mismatch[] = feature.get('mismatches')
     const heightLim = charHeight - 2
 
-    function getAlphaColor(baseColor: string, mismatch: { qual?: number }) {
-      let color = baseColor
-      if (mismatchAlpha && mismatch.qual !== undefined) {
-        color = Color(baseColor)
-          .alpha(Math.min(1, mismatch.qual / 50))
-          .hsl()
-          .string()
-      }
-      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
@@ -783,14 +871,34 @@ export default class PileupRenderer extends BoxRendererType {
       if (mismatch.type === 'mismatch' && drawSNPs) {
         const baseColor = colorForBase[mismatch.base] || '#888'
 
-        ctx.fillStyle = getAlphaColor(baseColor, mismatch)
-
-        ctx.fillRect(leftPx, topPx, widthPx, heightPx)
+        fillRect(
+          ctx,
+          leftPx,
+          topPx,
+          widthPx,
+          heightPx,
+          canvasWidth,
+          !mismatchAlpha
+            ? baseColor
+            : mismatch.qual !== undefined
+            ? Color(baseColor)
+                .alpha(Math.min(1, mismatch.qual / 50))
+                .hsl()
+                .string()
+            : baseColor,
+        )
 
         if (widthPx >= charWidth && heightPx >= heightLim) {
           // normal SNP coloring
-          const contrast = contrastForBase[mismatch.base] || 'black'
-          ctx.fillStyle = getAlphaColor(contrast, mismatch)
+          const contrastColor = contrastForBase[mismatch.base] || 'black'
+          ctx.fillStyle = !mismatchAlpha
+            ? contrastColor
+            : mismatch.qual !== undefined
+            ? Color(contrastColor)
+                .alpha(Math.min(1, mismatch.qual / 50))
+                .hsl()
+                .string()
+            : contrastColor
           ctx.fillText(
             mbase,
             leftPx + (widthPx - charWidth) / 2 + 1,
@@ -798,9 +906,15 @@ export default class PileupRenderer extends BoxRendererType {
           )
         }
       } else if (mismatch.type === 'deletion' && drawIndels) {
-        const baseColor = colorForBase.deletion
-        ctx.fillStyle = baseColor
-        ctx.fillRect(leftPx, topPx, widthPx, heightPx)
+        fillRect(
+          ctx,
+          leftPx,
+          topPx,
+          widthPx,
+          heightPx,
+          canvasWidth,
+          colorForBase.deletion,
+        )
         const txt = `${mismatch.length}`
         const rwidth = measureText(txt, 10)
         if (widthPx >= rwidth && heightPx >= heightLim) {
@@ -820,20 +934,34 @@ export default class PileupRenderer extends BoxRendererType {
           Math.min(1.2, 1 / bpPerPx),
         )
         if (len < 10) {
-          ctx.fillRect(pos, topPx, insW, heightPx)
+          fillRect(ctx, pos, topPx, insW, heightPx, canvasWidth, 'purple')
           if (1 / bpPerPx >= charWidth && heightPx >= heightLim) {
-            ctx.fillRect(pos - insW, topPx, insW * 3, 1)
-            ctx.fillRect(pos - insW, topPx + heightPx - 1, insW * 3, 1)
+            fillRect(ctx, pos - insW, topPx, insW * 3, 1, canvasWidth)
+            fillRect(
+              ctx,
+              pos - insW,
+              topPx + heightPx - 1,
+              insW * 3,
+              1,
+              canvasWidth,
+            )
             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 + extraHorizontallyFlippedOffset
-        ctx.fillRect(pos, topPx, w, heightPx)
+        fillRect(
+          ctx,
+          pos,
+          topPx,
+          w,
+          heightPx,
+          canvasWidth,
+          mismatch.type === 'hardclip' ? 'red' : 'blue',
+        )
         if (1 / bpPerPx >= charWidth && heightPx >= heightLim) {
-          ctx.fillRect(pos - w, topPx, w * 3, 1)
-          ctx.fillRect(pos - w, topPx + heightPx - 1, w * 3, 1)
+          fillRect(ctx, pos - w, topPx, w * 3, 1, canvasWidth)
+          fillRect(ctx, pos - w, topPx + heightPx - 1, w * 3, 1, canvasWidth)
           ctx.fillText(`(${mismatch.base})`, pos + 3, topPx + heightPx)
         }
       } else if (mismatch.type === 'skip') {
@@ -844,12 +972,14 @@ export default class PileupRenderer extends BoxRendererType {
           // make small exons more visible when zoomed far out
           const adjustPx = widthPx - (bpPerPx > 10 ? 1.5 : 0)
           ctx.clearRect(leftPx, topPx, adjustPx, heightPx)
-          ctx.fillStyle = '#333'
-          ctx.fillRect(
+          fillRect(
+            ctx,
             Math.max(0, leftPx),
             topPx + heightPx / 2 - 1,
             adjustPx + (leftPx < 0 ? leftPx : 0),
             2,
+            canvasWidth,
+            '#333',
           )
         }
       }
@@ -866,39 +996,55 @@ export default class PileupRenderer extends BoxRendererType {
         const txt = `${len}`
         if (mismatch.type === 'insertion' && len >= 10) {
           if (bpPerPx > largeInsertionIndicatorScale) {
-            ctx.fillStyle = 'purple'
-            ctx.fillRect(leftPx - 1, topPx, 2, heightPx)
+            fillRect(ctx, leftPx - 1, topPx, 2, heightPx, canvasWidth, 'purple')
           } else if (heightPx > charHeight) {
-            const rect = ctx.measureText(txt)
+            const rwidth = measureText(txt)
             const padding = 5
-            ctx.fillStyle = 'purple'
-            ctx.fillRect(
-              leftPx - rect.width / 2 - padding,
+            fillRect(
+              ctx,
+              leftPx - rwidth / 2 - padding,
               topPx,
-              rect.width + 2 * padding,
+              rwidth + 2 * padding,
               heightPx,
+              canvasWidth,
+              'purple',
             )
             ctx.fillStyle = 'white'
-            ctx.fillText(txt, leftPx - rect.width / 2, topPx + heightPx)
+            ctx.fillText(txt, leftPx - rwidth / 2, topPx + heightPx)
           } else {
             const padding = 2
-            ctx.fillStyle = 'purple'
-            ctx.fillRect(leftPx - padding, topPx, 2 * padding, heightPx)
+            fillRect(
+              ctx,
+              leftPx - padding,
+              topPx,
+              2 * padding,
+              heightPx,
+              canvasWidth,
+              'purple',
+            )
           }
         }
       }
     }
   }
 
-  drawSoftClipping(
-    ctx: CanvasRenderingContext2D,
-    feat: LayoutFeature,
-    props: RenderArgsDeserializedWithFeaturesAndLayout,
-    config: AnyConfigurationModel,
-    theme: Theme,
-  ) {
+  drawSoftClipping({
+    ctx,
+    feat,
+    renderArgs,
+    config,
+    theme,
+    canvasWidth,
+  }: {
+    ctx: CanvasRenderingContext2D
+    feat: LayoutFeature
+    renderArgs: RenderArgsDeserializedWithFeaturesAndLayout
+    config: AnyConfigurationModel
+    theme: Theme
+    canvasWidth: number
+  }) {
     const { feature, topPx, heightPx } = feat
-    const { regions, bpPerPx } = props
+    const { regions, bpPerPx } = renderArgs
     const [region] = regions
     const minFeatWidth = readConfObject(config, 'minSubfeatureWidth')
     const mismatches: Mismatch[] = feature.get('mismatches')
@@ -946,7 +1092,14 @@ export default class PileupRenderer extends BoxRendererType {
             // show in soft clipping
             const baseColor = colorForBase[base] || '#000000'
             ctx.fillStyle = baseColor
-            ctx.fillRect(softClipLeftPx, topPx, softClipWidthPx, heightPx)
+            fillRect(
+              ctx,
+              softClipLeftPx,
+              topPx,
+              softClipWidthPx,
+              heightPx,
+              canvasWidth,
+            )
 
             if (softClipWidthPx >= charWidth && heightPx >= charHeight - 5) {
               ctx.fillStyle = theme.palette.getContrastText(baseColor)
@@ -961,15 +1114,30 @@ export default class PileupRenderer extends BoxRendererType {
     }
   }
 
-  async makeImageData(
-    ctx: CanvasRenderingContext2D,
-    layoutRecords: (LayoutFeature | null)[],
-    props: RenderArgsDeserializedWithFeaturesAndLayout,
-  ) {
-    const { layout, config, showSoftClip, colorBy, theme: configTheme } = props
+  makeImageData({
+    ctx,
+    layoutRecords,
+    canvasWidth,
+    renderArgs,
+  }: {
+    ctx: CanvasRenderingContext2D
+    canvasWidth: number
+    layoutRecords: (LayoutFeature | null)[]
+    renderArgs: RenderArgsDeserializedWithFeaturesAndLayout
+  }) {
+    const {
+      layout,
+      config,
+      showSoftClip,
+      colorBy,
+      theme: configTheme,
+    } = renderArgs
     const mismatchAlpha = readConfObject(config, 'mismatchAlpha')
     const minSubfeatureWidth = readConfObject(config, 'minSubfeatureWidth')
-    const insertScale = readConfObject(config, 'largeInsertionIndicatorScale')
+    const largeInsertionIndicatorScale = readConfObject(
+      config,
+      'largeInsertionIndicatorScale',
+    )
     const defaultColor = readConfObject(config, 'color') === '#f0f'
 
     const theme = createJBrowseTheme(configTheme)
@@ -984,34 +1152,51 @@ export default class PileupRenderer extends BoxRendererType {
     ctx.font = 'bold 10px Courier New,monospace'
 
     const { charWidth, charHeight } = this.getCharWidthHeight(ctx)
-    layoutRecords.forEach(feat => {
+    const drawSNPs = shouldDrawSNPs(colorBy?.type)
+    const drawIndels = shouldDrawIndels(colorBy?.type)
+    for (let i = 0; i < layoutRecords.length; i++) {
+      const feat = layoutRecords[i]
       if (feat === null) {
-        return
+        continue
       }
 
-      this.drawAlignmentRect(ctx, feat, {
-        ...props,
+      this.drawAlignmentRect({
+        ctx,
+        feat,
+        renderArgs,
         defaultColor,
         colorForBase,
         contrastForBase,
         charWidth,
         charHeight,
+        canvasWidth,
       })
-      this.drawMismatches(ctx, feat, props, {
+      this.drawMismatches({
+        ctx,
+        feat,
+        renderArgs,
         mismatchAlpha,
-        drawSNPs: shouldDrawMismatches(colorBy?.type),
-        drawIndels: shouldDrawMismatches(colorBy?.type),
-        largeInsertionIndicatorScale: insertScale,
+        drawSNPs,
+        drawIndels,
+        largeInsertionIndicatorScale,
         minSubfeatureWidth,
         charWidth,
         charHeight,
         colorForBase,
         contrastForBase,
+        canvasWidth,
       })
       if (showSoftClip) {
-        this.drawSoftClipping(ctx, feat, props, config, theme)
+        this.drawSoftClipping({
+          ctx,
+          feat,
+          renderArgs,
+          config,
+          theme,
+          canvasWidth,
+        })
       }
-    })
+    }
   }
 
   // we perform a full layout before render as a separate method because the
@@ -1041,7 +1226,7 @@ export default class PileupRenderer extends BoxRendererType {
 
     const heightPx = readConfObject(config, 'height')
     const displayMode = readConfObject(config, 'displayMode')
-    const layoutRecords = iterMap(
+    return iterMap(
       featureMap.values(),
       feature =>
         this.layoutFeature({
@@ -1055,7 +1240,6 @@ export default class PileupRenderer extends BoxRendererType {
         }),
       featureMap.size,
     )
-    return layoutRecords
   }
 
   async fetchSequence(renderProps: RenderArgsDeserialized) {
@@ -1095,17 +1279,21 @@ export default class PileupRenderer extends BoxRendererType {
 
     const width = (end - start) / bpPerPx
     const height = Math.max(layout.getTotalHeight(), 1)
-
     const res = await renderToAbstractCanvas(
       width,
       height,
       renderProps,
       (ctx: CanvasRenderingContext2D) =>
-        this.makeImageData(ctx, layoutRecords, {
-          ...renderProps,
-          layout,
-          features,
-          regionSequence,
+        this.makeImageData({
+          ctx,
+          layoutRecords,
+          canvasWidth: width,
+          renderArgs: {
+            ...renderProps,
+            layout,
+            features,
+            regionSequence,
+          },
         }),
     )