@jbrowse/plugin-alignments 1.7.7 → 1.7.8

package/src/CramAdapter/CramSlightlyLazyFeature.ts

@@ -131,7 +131,8 @@ export default class CramSlightlyLazyFeature implements Feature {
     let sublen = 0
     if (typeof this.record.readFeatures !== 'undefined') {
       // @ts-ignore
-      this.record.readFeatures.forEach(({ code, refPos, sub, data }) => {
+      for (let i = 0; i < this.record.readFeatures.length; i++) {
+        const { code, refPos, sub, data } = this.record.readFeatures[i]
         sublen = refPos - last_pos
         seq += ref.substring(last_pos - refStart, refPos - refStart)
         last_pos = refPos
@@ -200,7 +201,7 @@ export default class CramSlightlyLazyFeature implements Feature {
           cigar += `${data}H`
           oplen = 0
         } // else q or Q
-      })
+      }
     } else {
       sublen = this.record.readLength - seq.length
     }
@@ -303,95 +304,87 @@ export default class CramSlightlyLazyFeature implements Feature {
       return []
     }
     const start = this.get('start')
-    const mismatches: Mismatch[] = []
-    readFeatures.forEach(
-      (args: {
-        code: string
-        refPos: number
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        data: any
-        pos: number
-        sub: string
-        ref: string
-      }) => {
-        const { code, pos, data, sub, ref } = args
-        const refPos = args.refPos - 1 - start
-        if (code === 'X') {
-          // substitution
-          mismatches.push({
-            start: refPos,
-            length: 1,
-            base: sub,
-            qual: qual?.[pos],
-            altbase: ref,
-            type: 'mismatch',
-          })
-        } else if (code === 'I') {
-          // insertion
-          mismatches.push({
-            start: refPos,
-            type: 'insertion',
-            base: `${data.length}`,
-            length: 0,
-          })
-        } else if (code === 'N') {
-          // reference skip
-          mismatches.push({
-            type: 'skip',
-            length: data,
-            start: refPos,
-            base: 'N',
-          })
-        } else if (code === 'S') {
-          // soft clip
-          const len = data.length
-          mismatches.push({
-            start: refPos,
-            type: 'softclip',
-            base: `S${len}`,
-            cliplen: len,
-            length: 1,
-          })
-        } else if (code === 'P') {
-          // padding
-        } else if (code === 'H') {
-          // hard clip
-          const len = data
-          mismatches.push({
-            start: refPos,
-            type: 'hardclip',
-            base: `H${len}`,
-            cliplen: len,
-            length: 1,
-          })
-        } else if (code === 'D') {
-          // deletion
-          mismatches.push({
-            type: 'deletion',
-            length: data,
-            start: refPos,
-            base: '*',
-          })
-        } else if (code === 'b') {
-          // stretch of bases
-        } else if (code === 'q') {
-          // stretch of qual scores
-        } else if (code === 'B') {
-          // a pair of [base, qual]
-        } else if (code === 'i') {
-          // single-base insertion
-          // insertion
-          mismatches.push({
-            start: refPos,
-            type: 'insertion',
-            base: data,
-            length: 1,
-          })
-        } else if (code === 'Q') {
-          // single quality value
+    const mismatches: Mismatch[] = new Array(readFeatures.length)
+    let j = 0
+    for (let i = 0; i < readFeatures.length; i++) {
+      const f = readFeatures[i]
+      const { code, pos, data, sub, ref } = f
+      const refPos = f.refPos - 1 - start
+      if (code === 'X') {
+        // substitution
+        mismatches[j++] = {
+          start: refPos,
+          length: 1,
+          base: sub,
+          qual: qual?.[pos],
+          altbase: ref,
+          type: 'mismatch',
         }
-      },
-    )
-    return mismatches
+      } else if (code === 'I') {
+        // insertion
+        mismatches[j++] = {
+          start: refPos,
+          type: 'insertion',
+          base: `${data.length}`,
+          length: 0,
+        }
+      } else if (code === 'N') {
+        // reference skip
+        mismatches[j++] = {
+          type: 'skip',
+          length: data,
+          start: refPos,
+          base: 'N',
+        }
+      } else if (code === 'S') {
+        // soft clip
+        const len = data.length
+        mismatches[j++] = {
+          start: refPos,
+          type: 'softclip',
+          base: `S${len}`,
+          cliplen: len,
+          length: 1,
+        }
+      } else if (code === 'P') {
+        // padding
+      } else if (code === 'H') {
+        // hard clip
+        const len = data
+        mismatches[j++] = {
+          start: refPos,
+          type: 'hardclip',
+          base: `H${len}`,
+          cliplen: len,
+          length: 1,
+        }
+      } else if (code === 'D') {
+        // deletion
+        mismatches[j++] = {
+          type: 'deletion',
+          length: data,
+          start: refPos,
+          base: '*',
+        }
+      } else if (code === 'b') {
+        // stretch of bases
+      } else if (code === 'q') {
+        // stretch of qual scores
+      } else if (code === 'B') {
+        // a pair of [base, qual]
+      } else if (code === 'i') {
+        // single-base insertion
+        // insertion
+        mismatches[j++] = {
+          start: refPos,
+          type: 'insertion',
+          base: data,
+          length: 1,
+        }
+      } else if (code === 'Q') {
+        // single quality value
+      }
+    }
+    return mismatches.slice(0, j)
   }
 }

package/src/LinearPileupDisplay/model.ts

@@ -409,7 +409,7 @@ const stateModelFactory = (configSchema: LinearPileupDisplayConfigModel) =>
             displayModel: self,
             sortedBy,
             colorBy,
-            filterBy,
+            filterBy: JSON.parse(JSON.stringify(filterBy)),
             colorTagMap: JSON.parse(JSON.stringify(colorTagMap)),
             modificationTagMap: JSON.parse(JSON.stringify(modificationTagMap)),
             showSoftClip: self.showSoftClipping,

package/src/LinearSNPCoverageDisplay/components/Tooltip.tsx

@@ -7,7 +7,6 @@ import { Tooltip } from '@jbrowse/plugin-wiggle'
 type Count = {
   [key: string]: {
     total: number
-    strands: { [key: string]: number }
   }
 }
 
@@ -18,6 +17,9 @@ type SNPInfo = {
   noncov: Count
   delskips: Count
   total: number
+  '-1': number
+  '0': number
+  '1': number
 }
 
 const en = (n: number) => n.toLocaleString('en-US')
@@ -50,33 +52,38 @@ const TooltipContents = React.forwardRef(
           <tbody>
             <tr>
               <td>Total</td>
-              <td>{total}</td>
+              <td>{info.total}</td>
+            </tr>
+            <tr>
+              <td>REF</td>
+              <td>{info.ref}</td>
+              <td>
+                {info['-1'] ? `${info['-1']}(-)` : ''}
+                {info['1'] ? `${info['1']}(+)` : ''}
+              </td>
               <td />
             </tr>
 
-            {Object.entries(info).map(([key, entry]) => {
-              return Object.entries(entry).map(([base, score]) => {
-                const { strands } = score
-                return (
-                  <tr key={base}>
-                    <td>{base.toUpperCase()}</td>
-                    <td>{score.total}</td>
-                    <td>
-                      {base === 'total' || base === 'skip'
-                        ? '---'
-                        : `${Math.floor(
-                            (score.total / (total || score.total || 1)) * 100,
-                          )}%`}
-                    </td>
-                    <td>
-                      {strands['-1'] ? `${strands['-1']}(-)` : ''}
-                      {strands['1'] ? `${strands['1']}(+)` : ''}
-                    </td>
-                    <td>{key}</td>
-                  </tr>
-                )
-              })
-            })}
+            {Object.entries(info).map(([key, entry]) =>
+              Object.entries(entry).map(([base, score]) => (
+                <tr key={base}>
+                  <td>{base.toUpperCase()}</td>
+                  <td>{score.total}</td>
+                  <td>
+                    {base === 'total' || base === 'skip'
+                      ? '---'
+                      : `${Math.floor(
+                          (score.total / (total || score.total || 1)) * 100,
+                        )}%`}
+                  </td>
+                  <td>
+                    {score['-1'] ? `${score['-1']}(-)` : ''}
+                    {score['1'] ? `${score['1']}(+)` : ''}
+                  </td>
+                  <td>{key}</td>
+                </tr>
+              )),
+            )}
           </tbody>
         </table>
       </div>

package/src/LinearSNPCoverageDisplay/models/model.ts

@@ -143,7 +143,7 @@ const stateModelFactory = (
             // must use getSnapshot because otherwise changes to e.g. just the
             // colorBy.type are not read
             colorBy: self.colorBy ? getSnapshot(self.colorBy) : undefined,
-            filterBy: self.filterBy,
+            filterBy: self.filterBy ? getSnapshot(self.filterBy) : undefined,
           }
         },
       }

package/src/PileupRenderer/PileupLayoutSession.ts

@@ -10,6 +10,7 @@ export interface PileupLayoutSessionProps {
   config: AnyConfigurationModel
   bpPerPx: number
   filters: SerializableFilterChain
+  filterBy: unknown
   sortedBy: unknown
   showSoftClip: unknown
 }
@@ -19,6 +20,7 @@ interface CachedPileupLayout {
   layout: MyMultiLayout
   config: AnyConfigurationModel
   filters: SerializableFilterChain
+  filterBy: unknown
   sortedBy: unknown
   showSoftClip: boolean
 }
@@ -26,6 +28,7 @@ interface CachedPileupLayout {
 // Adds extra conditions to see if cached layout is valid
 export class PileupLayoutSession extends LayoutSession {
   sortedBy: unknown
+  filterBy: unknown
 
   showSoftClip = false
 
@@ -38,7 +41,8 @@ export class PileupLayoutSession extends LayoutSession {
     return (
       super.cachedLayoutIsValid(cachedLayout) &&
       this.showSoftClip === cachedLayout.showSoftClip &&
-      deepEqual(this.sortedBy, cachedLayout.sortedBy)
+      deepEqual(this.sortedBy, cachedLayout.sortedBy) &&
+      deepEqual(this.filterBy, cachedLayout.filterBy)
     )
   }
 
@@ -50,6 +54,7 @@ export class PileupLayoutSession extends LayoutSession {
         layout: this.makeLayout(),
         config: readConfObject(this.config),
         filters: this.filters,
+        filterBy: this.filterBy,
         sortedBy: this.sortedBy,
         showSoftClip: this.showSoftClip,
       }

package/src/PileupRenderer/PileupRenderer.tsx

@@ -118,10 +118,14 @@ 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
 
@@ -417,7 +421,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 +434,20 @@ 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]
+        ctx.fillStyle =
+          prob && prob !== 1
+            ? base
+                .alpha(prob + 0.1)
+                .hsl()
+                .string()
+            : col
+        ctx.fillRect(leftPx, topPx, rightPx - leftPx + 0.5, heightPx)
         probIndex++
       }
     }
@@ -478,15 +479,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 +495,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,13 +503,9 @@ 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.fillStyle = methBins[i] || methBins[i + 1] ? 'red' : 'blue'
             ctx.fillRect(leftPx, topPx, rightPx - leftPx + 0.5, heightPx)
           }
         }
@@ -517,21 +513,13 @@ export default class PileupRenderer extends BoxRendererType {
         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.fillStyle = methBins[i] ? 'red' : 'blue'
             ctx.fillRect(leftPx, topPx, rightPx - leftPx + 0.5, heightPx)
 
             const [leftPx2, rightPx2] = bpSpanPx(s + 1, s + 2, region, bpPerPx)
-            if (methBins[i + 1]) {
-              ctx.fillStyle = 'red'
-            } else {
-              ctx.fillStyle = 'blue'
-            }
+            ctx.fillStyle = methBins[i + 1] ? 'red' : 'blue'
             ctx.fillRect(leftPx2, topPx, rightPx2 - leftPx2 + 0.5, heightPx)
           }
         }
@@ -754,17 +742,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 +760,28 @@ export default class PileupRenderer extends BoxRendererType {
       if (mismatch.type === 'mismatch' && drawSNPs) {
         const baseColor = colorForBase[mismatch.base] || '#888'
 
-        ctx.fillStyle = getAlphaColor(baseColor, mismatch)
+        ctx.fillStyle = !mismatchAlpha
+          ? baseColor
+          : mismatch.qual !== undefined
+          ? Color(baseColor)
+              .alpha(Math.min(1, mismatch.qual / 50))
+              .hsl()
+              .string()
+          : baseColor
 
         ctx.fillRect(leftPx, topPx, widthPx, heightPx)
 
         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,
@@ -869,17 +860,17 @@ export default class PileupRenderer extends BoxRendererType {
             ctx.fillStyle = 'purple'
             ctx.fillRect(leftPx - 1, topPx, 2, heightPx)
           } 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,
+              leftPx - rwidth / 2 - padding,
               topPx,
-              rect.width + 2 * padding,
+              rwidth + 2 * padding,
               heightPx,
             )
             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'
@@ -961,7 +952,7 @@ export default class PileupRenderer extends BoxRendererType {
     }
   }
 
-  async makeImageData(
+  makeImageData(
     ctx: CanvasRenderingContext2D,
     layoutRecords: (LayoutFeature | null)[],
     props: RenderArgsDeserializedWithFeaturesAndLayout,
@@ -969,7 +960,10 @@ export default class PileupRenderer extends BoxRendererType {
     const { layout, config, showSoftClip, colorBy, theme: configTheme } = props
     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,9 +978,12 @@ 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, {
@@ -999,19 +996,25 @@ export default class PileupRenderer extends BoxRendererType {
       })
       this.drawMismatches(ctx, feat, props, {
         mismatchAlpha,
-        drawSNPs: shouldDrawMismatches(colorBy?.type),
-        drawIndels: shouldDrawMismatches(colorBy?.type),
-        largeInsertionIndicatorScale: insertScale,
+        drawSNPs,
+        drawIndels,
+        largeInsertionIndicatorScale,
         minSubfeatureWidth,
         charWidth,
         charHeight,
         colorForBase,
         contrastForBase,
       })
-      if (showSoftClip) {
+    }
+    if (showSoftClip) {
+      for (let i = 0; i < layoutRecords.length; i++) {
+        const feat = layoutRecords[i]
+        if (feat === null) {
+          continue
+        }
         this.drawSoftClipping(ctx, feat, props, config, theme)
       }
-    })
+    }
   }
 
   // we perform a full layout before render as a separate method because the
@@ -1041,7 +1044,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 +1058,6 @@ export default class PileupRenderer extends BoxRendererType {
         }),
       featureMap.size,
     )
-    return layoutRecords
   }
 
   async fetchSequence(renderProps: RenderArgsDeserialized) {

package/src/PileupRenderer/configSchema.ts

@@ -31,8 +31,8 @@ export default ConfigurationSchema(
     minSubfeatureWidth: {
       type: 'number',
       description:
-        'the minimum width in px for a pileup mismatch feature. use for increasing mismatch marker widths when zoomed out to e.g. 1px or 0.5px',
-      defaultValue: 0,
+        'the minimum width in px for a pileup mismatch feature. use for increasing/decreasing mismatch marker widths when zoomed out, e.g. 0 or 1',
+      defaultValue: 0.7,
     },
     maxHeight: {
       type: 'integer',