jbrowse-plugin-mafviewer 1.3.1 → 1.3.2

package/src/LinearMafRenderer/makeImageData.ts

@@ -1,18 +1,18 @@
 import { RenderArgsDeserialized } from '@jbrowse/core/pluggableElementTypes/renderers/BoxRendererType'
 import { createJBrowseTheme } from '@jbrowse/core/ui'
-import { Feature, featureSpanPx, measureText } from '@jbrowse/core/util'
+import { Feature } from '@jbrowse/core/util'
+import RBush from 'rbush'
 
 import {
-  fillRect,
-  getCharWidthHeight,
-  getColorBaseMap,
-  getContrastBaseMap,
-} from './util'
+  FONT_CONFIG,
+  RenderedBase,
+  RenderingContext,
+  Sample,
+  processFeatureAlignment,
+  processFeatureInsertions,
+} from './rendering'
+import { getColorBaseMap, getContrastBaseMap } from './util'
 
-interface Sample {
-  id: string
-  color?: string
-}
 interface RenderArgs extends RenderArgsDeserialized {
   samples: Sample[]
   rowHeight: number
@@ -24,10 +24,6 @@ interface RenderArgs extends RenderArgsDeserialized {
   showAsUpperCase: boolean
 }
 
-function getLetter(a: string, showAsUpperCase: boolean) {
-  return showAsUpperCase ? a.toUpperCase() : a
-}
-
 export function makeImageData({
   ctx,
   renderArgs,
@@ -47,204 +43,61 @@ export function makeImageData({
     features,
     showAsUpperCase,
   } = renderArgs
+
   const region = regions[0]!
   const canvasWidth = (region.end - region.start) / bpPerPx
   const h = rowHeight * rowProportion
   const theme = createJBrowseTheme(configTheme)
   const colorForBase = getColorBaseMap(theme)
   const contrastForBase = getContrastBaseMap(theme)
-
-  const { charHeight } = getCharWidthHeight()
   const sampleToRowMap = new Map(samples.map((s, i) => [s.id, i]))
   const scale = 1 / bpPerPx
-  const f = 0.4
-  const h2 = rowHeight / 2
   const hp2 = h / 2
   const offset = (rowHeight - h) / 2
 
-  // sample as alignments
-  ctx.font = 'bold 10px Courier New,monospace'
-
-  for (const feature of features.values()) {
-    const [leftPx] = featureSpanPx(feature, region, bpPerPx)
-    const vals = feature.get('alignments') as Record<string, { seq: string }>
-    const seq = feature.get('seq').toLowerCase()
-    const r = Object.entries(vals)
-    for (const [sample, val] of r) {
-      const origAlignment = val.seq
-      const alignment = origAlignment.toLowerCase()
-
-      const row = sampleToRowMap.get(sample)
-      if (row === undefined) {
-        continue
-      }
-
-      const t = rowHeight * row
-      const t2 = offset + t
-
-      // gaps
-      ctx.beginPath()
-      ctx.fillStyle = 'black'
-      for (let i = 0, o = 0, l = alignment.length; i < l; i++) {
-        if (seq[i] !== '-') {
-          if (alignment[i] === '-') {
-            const l = leftPx + scale * o
-            ctx.moveTo(l, t + h2)
-            ctx.lineTo(l + scale + f, t + h2)
-          }
-          o++
-        }
-      }
-      ctx.stroke()
+  ctx.font = FONT_CONFIG
 
-      if (!showAllLetters) {
-        // matches
-        ctx.fillStyle = 'lightgrey'
-        for (let i = 0, o = 0, l = alignment.length; i < l; i++) {
-          if (seq[i] !== '-') {
-            const c = alignment[i]
-            const l = leftPx + scale * o
-            if (seq[i] === c && c !== '-' && c !== ' ') {
-              fillRect(ctx, l, t2, scale + f, h, canvasWidth)
-            }
-            o++
-          }
-        }
-      }
-
-      // mismatches
-      for (let i = 0, o = 0, l = alignment.length; i < l; i++) {
-        const c = alignment[i]
-        if (seq[i] !== '-') {
-          if (c !== '-') {
-            const l = leftPx + scale * o
-            if (seq[i] !== c && c !== ' ') {
-              fillRect(
-                ctx,
-                l,
-                t2,
-                scale + f,
-                h,
-                canvasWidth,
-                mismatchRendering
-                  ? // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-                    (colorForBase[c as keyof typeof colorForBase] ?? 'black')
-                  : 'orange',
-              )
-            } else if (showAllLetters) {
-              fillRect(
-                ctx,
-                l,
-                t2,
-                scale + f,
-                h,
-                canvasWidth,
-                mismatchRendering
-                  ? // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-                    (colorForBase[c as keyof typeof colorForBase] ?? 'black')
-                  : 'lightblue',
-              )
-            }
-          }
-          o++
-        }
-      }
-
-      // font
-      const charSizeW = 10
-      if (scale >= charSizeW) {
-        for (let i = 0, o = 0, l = alignment.length; i < l; i++) {
-          if (seq[i] !== '-') {
-            const l = leftPx + scale * o
-            const offset = (scale - charSizeW) / 2 + 1
-            const c = alignment[i]!
-            if ((showAllLetters || seq[i] !== c) && c !== '-') {
-              ctx.fillStyle = mismatchRendering
-                ? (contrastForBase[c] ?? 'white')
-                : 'black'
-              if (rowHeight > charHeight) {
-                ctx.fillText(
-                  getLetter(origAlignment[i] || '', showAsUpperCase),
-                  l + offset,
-                  hp2 + t + 3,
-                )
-              }
-            }
-            o++
-          }
-        }
-      }
-    }
+  const renderingContext: RenderingContext = {
+    ctx,
+    scale,
+    canvasWidth,
+    rowHeight,
+    h,
+    hp2,
+    offset,
+    colorForBase,
+    contrastForBase,
+    showAllLetters,
+    mismatchRendering,
+    showAsUpperCase,
+    spatialIndex: new RBush<RenderedBase>(),
+    lastInsertedX: -Infinity, // Start with -Infinity so first item is always inserted
   }
 
-  // second pass for insertions, has slightly improved look since the
-  // insertions are always 'on top' of the other features
+  // First pass: render alignments (gaps, matches, mismatches, text)
   for (const feature of features.values()) {
-    const [leftPx] = featureSpanPx(feature, region, bpPerPx)
-    const vals = feature.get('alignments') as Record<string, { seq: string }>
-    const seq = feature.get('seq').toLowerCase()
-
-    for (const [sample, val] of Object.entries(vals)) {
-      const origAlignment = val.seq
-      const alignment = origAlignment.toLowerCase()
-      const row = sampleToRowMap.get(sample)
-      if (row === undefined) {
-        continue
-      }
+    processFeatureAlignment(
+      feature,
+      region,
+      bpPerPx,
+      sampleToRowMap,
+      renderingContext,
+    )
+  }
 
-      const t = rowHeight * row
-      const t2 = offset + t
-      for (let i = 0, o = 0, l = alignment.length; i < l; i++) {
-        let ins = ''
-        while (seq[i] === '-') {
-          if (alignment[i] !== '-' && alignment[i] !== ' ') {
-            ins += alignment[i]
-          }
-          i++
-        }
-        if (ins.length > 0) {
-          const l = leftPx + scale * o - 1
+  // Second pass: render insertions on top
+  for (const feature of features.values()) {
+    processFeatureInsertions(
+      feature,
+      region,
+      bpPerPx,
+      sampleToRowMap,
+      renderingContext,
+    )
+  }
 
-          if (ins.length > 10) {
-            const txt = `${ins.length}`
-            if (bpPerPx > 10) {
-              fillRect(ctx, l - 1, t2, 2, h, canvasWidth, 'purple')
-            } else if (h > charHeight) {
-              const rwidth = measureText(txt, 10)
-              const padding = 2
-              fillRect(
-                ctx,
-                l - rwidth / 2 - padding,
-                t2,
-                rwidth + 2 * padding,
-                h,
-                canvasWidth,
-                'purple',
-              )
-              ctx.fillStyle = 'white'
-              ctx.fillText(txt, l - rwidth / 2, t + h)
-            } else {
-              const padding = 2
-              fillRect(
-                ctx,
-                l - padding,
-                t2,
-                2 * padding,
-                h,
-                canvasWidth,
-                'purple',
-              )
-            }
-          } else {
-            fillRect(ctx, l, t2, 1, h, canvasWidth, 'purple')
-            if (bpPerPx < 0.2 && rowHeight > 5) {
-              fillRect(ctx, l - 2, t2, 5, 1, canvasWidth)
-              fillRect(ctx, l - 2, t2 + h - 1, 5, 1, canvasWidth)
-            }
-          }
-        }
-        o++
-      }
-    }
+  // Return serialized RBush spatial index
+  return {
+    rbush: renderingContext.spatialIndex.toJSON(),
   }
 }

package/src/LinearMafRenderer/rendering/features.ts

@@ -0,0 +1,138 @@
+import { Feature, featureSpanPx } from '@jbrowse/core/util'
+
+import { renderGaps } from './gaps'
+import { renderInsertions } from './insertions'
+import { renderMatches } from './matches'
+import { renderMismatches } from './mismatches'
+import { renderText } from './text'
+
+import type { AlignmentRecord, GenomicRegion, RenderingContext } from './types'
+
+/**
+ * Processes alignment data for a single feature, rendering gaps, matches, mismatches, and text
+ * @param feature - JBrowse feature containing alignment data
+ * @param region - Genomic region being rendered
+ * @param bpPerPx - Base pairs per pixel (zoom level)
+ * @param sampleToRowMap - Maps sample IDs to row indices
+ * @param renderingContext - Shared rendering parameters
+ */
+export function processFeatureAlignment(
+  feature: Feature,
+  region: GenomicRegion,
+  bpPerPx: number,
+  sampleToRowMap: Map<string, number>,
+  renderingContext: RenderingContext,
+) {
+  const [leftPx] = featureSpanPx(feature, region, bpPerPx)
+  const alignments = feature.get('alignments') as Record<
+    string,
+    AlignmentRecord
+  >
+  const referenceSeq = feature.get('seq').toLowerCase()
+  const featureId =
+    feature.id() || `feature_${feature.get('start')}_${feature.get('end')}`
+
+  for (const [sampleId, alignmentData] of Object.entries(alignments)) {
+    const row = sampleToRowMap.get(sampleId)
+    if (row === undefined) {
+      continue
+    }
+
+    const originalAlignment = alignmentData.seq
+    const alignment = originalAlignment.toLowerCase()
+    const rowTop = renderingContext.offset + renderingContext.rowHeight * row
+
+    renderGaps(
+      renderingContext,
+      alignment,
+      referenceSeq,
+      leftPx,
+      rowTop,
+      sampleId,
+      featureId,
+      alignmentData.start,
+      alignmentData.chr,
+    )
+    renderMatches(
+      renderingContext,
+      alignment,
+      referenceSeq,
+      leftPx,
+      rowTop,
+      sampleId,
+      featureId,
+      alignmentData.start,
+      alignmentData.chr,
+    )
+    renderMismatches(
+      renderingContext,
+      alignment,
+      referenceSeq,
+      leftPx,
+      rowTop,
+      sampleId,
+      featureId,
+      alignmentData.start,
+      alignmentData.chr,
+    )
+    renderText(
+      renderingContext,
+      alignment,
+      originalAlignment,
+      referenceSeq,
+      leftPx,
+      rowTop,
+      sampleId,
+      featureId,
+    )
+  }
+}
+
+/**
+ * Processes insertion data for a single feature in a separate pass
+ * Insertions are rendered on top to ensure visibility
+ * @param feature - JBrowse feature containing alignment data
+ * @param region - Genomic region being rendered
+ * @param bpPerPx - Base pairs per pixel (zoom level)
+ * @param sampleToRowMap - Maps sample IDs to row indices
+ * @param renderingContext - Shared rendering parameters
+ */
+export function processFeatureInsertions(
+  feature: Feature,
+  region: GenomicRegion,
+  bpPerPx: number,
+  sampleToRowMap: Map<string, number>,
+  renderingContext: RenderingContext,
+) {
+  const [leftPx] = featureSpanPx(feature, region, bpPerPx)
+  const alignments = feature.get('alignments') as Record<
+    string,
+    AlignmentRecord
+  >
+  const referenceSeq = feature.get('seq').toLowerCase()
+  const featureId =
+    feature.id() || `feature_${feature.get('start')}_${feature.get('end')}`
+
+  for (const [sampleId, alignmentData] of Object.entries(alignments)) {
+    const row = sampleToRowMap.get(sampleId)
+    if (row === undefined) {
+      continue
+    }
+
+    const alignment = alignmentData.seq.toLowerCase()
+    const rowTop = renderingContext.offset + renderingContext.rowHeight * row
+
+    renderInsertions(
+      renderingContext,
+      alignment,
+      referenceSeq,
+      leftPx,
+      rowTop,
+      bpPerPx,
+      sampleId,
+      featureId,
+      alignmentData.start,
+      alignmentData.chr,
+    )
+  }
+}

package/src/LinearMafRenderer/rendering/gaps.ts

@@ -0,0 +1,71 @@
+import {
+  addToSpatialIndex,
+  createRenderedBase,
+  shouldAddToSpatialIndex,
+} from './spatialIndex'
+import { GAP_STROKE_OFFSET } from './types'
+
+import type { RenderingContext } from './types'
+
+/**
+ * Renders gap indicators (horizontal lines) where the alignment has deletions relative to reference
+ * @param context - Rendering context with canvas and styling info
+ * @param alignment - The aligned sequence for this sample
+ * @param seq - The reference sequence
+ * @param leftPx - Left pixel position of the feature
+ * @param rowTop - Top pixel position of the row
+ * @param alignmentStart - Start position of the alignment
+ * @param chr - Chromosome/sequence name
+ */
+export function renderGaps(
+  context: RenderingContext,
+  alignment: string,
+  seq: string,
+  leftPx: number,
+  rowTop: number,
+  sampleId: string,
+  featureId: string,
+  alignmentStart: number,
+  chr: string,
+) {
+  const { ctx, scale } = context
+  const h2 = context.rowHeight / 2
+
+  ctx.beginPath()
+  ctx.fillStyle = 'black'
+
+  for (
+    let i = 0, genomicOffset = 0, seqLength = alignment.length;
+    i < seqLength;
+    i++
+  ) {
+    if (seq[i] !== '-') {
+      if (alignment[i] === '-') {
+        const xPos = leftPx + scale * genomicOffset
+        ctx.moveTo(xPos, rowTop + h2)
+        ctx.lineTo(xPos + scale + GAP_STROKE_OFFSET, rowTop + h2)
+
+        // Add to spatial index if distance filter allows
+        if (shouldAddToSpatialIndex(xPos, context)) {
+          const renderedBase = createRenderedBase(
+            xPos,
+            rowTop,
+            context,
+            genomicOffset + alignmentStart,
+            chr,
+            sampleId,
+            '-',
+            false,
+            false,
+            true,
+            false,
+            featureId,
+          )
+          addToSpatialIndex(context, renderedBase)
+        }
+      }
+      genomicOffset++
+    }
+  }
+  ctx.stroke()
+}

package/src/LinearMafRenderer/rendering/index.ts

@@ -0,0 +1,9 @@
+// Re-export all rendering modules
+export * from './types'
+export * from './spatialIndex'
+export * from './gaps'
+export * from './matches'
+export * from './mismatches'
+export * from './text'
+export * from './insertions'
+export * from './features'

package/src/LinearMafRenderer/rendering/insertions.ts

@@ -0,0 +1,170 @@
+import { measureText } from '@jbrowse/core/util'
+
+import { fillRect, getCharWidthHeight } from '../util'
+import {
+  addToSpatialIndex,
+  createRenderedInsertion,
+  shouldAddToSpatialIndex,
+} from './spatialIndex'
+import {
+  CHAR_SIZE_WIDTH,
+  HIGH_BP_PER_PX_THRESHOLD,
+  HIGH_ZOOM_THRESHOLD,
+  INSERTION_BORDER_HEIGHT,
+  INSERTION_BORDER_WIDTH,
+  INSERTION_LINE_WIDTH,
+  INSERTION_PADDING,
+  LARGE_INSERTION_THRESHOLD,
+  MIN_ROW_HEIGHT_FOR_BORDERS,
+} from './types'
+
+import type { RenderingContext } from './types'
+
+/**
+ * Renders insertion markers where the alignment has bases not present in reference
+ * Large insertions show count, small ones show as colored bars with optional borders
+ * @param context - Rendering context with canvas and styling info
+ * @param alignment - The aligned sequence for this sample
+ * @param seq - The reference sequence
+ * @param leftPx - Left pixel position of the feature
+ * @param rowTop - Top pixel position of the row
+ * @param bpPerPx - Base pairs per pixel (zoom level)
+ * @param alignmentStart - Start position of the alignment
+ * @param chr - Chromosome/sequence name
+ */
+export function renderInsertions(
+  context: RenderingContext,
+  alignment: string,
+  seq: string,
+  leftPx: number,
+  rowTop: number,
+  bpPerPx: number,
+  sampleId: string,
+  featureId: string,
+  alignmentStart: number,
+  chr: string,
+) {
+  const { ctx, scale, h, canvasWidth, rowHeight } = context
+  const { charHeight } = getCharWidthHeight()
+
+  for (
+    let i = 0, genomicOffset = 0, seqLength = alignment.length;
+    i < seqLength;
+    i++
+  ) {
+    let insertionSequence = ''
+    while (seq[i] === '-') {
+      if (alignment[i] !== '-' && alignment[i] !== ' ') {
+        insertionSequence += alignment[i]
+      }
+      i++
+    }
+    if (insertionSequence.length > 0) {
+      // Found an insertion
+      const xPos = leftPx + scale * genomicOffset - INSERTION_LINE_WIDTH
+
+      // Determine actual rendered width and position for spatial index
+      let actualXPos: number
+      let actualWidth: number
+
+      // Large insertions: show count instead of individual bases
+      if (insertionSequence.length > LARGE_INSERTION_THRESHOLD) {
+        const lengthText = `${insertionSequence.length}`
+        if (bpPerPx > HIGH_BP_PER_PX_THRESHOLD) {
+          // Very zoomed out: simple line
+          actualXPos = xPos - INSERTION_LINE_WIDTH
+          actualWidth = INSERTION_BORDER_WIDTH
+          fillRect(
+            ctx,
+            actualXPos,
+            rowTop,
+            actualWidth,
+            h,
+            canvasWidth,
+            'purple',
+          )
+        } else if (h > charHeight) {
+          // Medium zoom: show count in colored box
+          const textWidth = measureText(lengthText, CHAR_SIZE_WIDTH)
+          const padding = INSERTION_PADDING
+          actualXPos = xPos - textWidth / 2 - padding
+          actualWidth = textWidth + 2 * padding
+          fillRect(
+            ctx,
+            actualXPos,
+            rowTop,
+            actualWidth,
+            h,
+            canvasWidth,
+            'purple',
+          )
+          ctx.fillStyle = 'white'
+          ctx.fillText(lengthText, xPos - textWidth / 2, rowTop + (h * 7) / 8)
+        } else {
+          const padding = INSERTION_PADDING
+          actualXPos = xPos - padding
+          actualWidth = 2 * padding
+          fillRect(
+            ctx,
+            actualXPos,
+            rowTop,
+            actualWidth,
+            h,
+            canvasWidth,
+            'purple',
+          )
+        }
+      } else {
+        // Small insertions: vertical line with optional border at high zoom
+        actualXPos = xPos
+        actualWidth = INSERTION_LINE_WIDTH
+        fillRect(ctx, actualXPos, rowTop, actualWidth, h, canvasWidth, 'purple')
+        if (
+          bpPerPx < HIGH_ZOOM_THRESHOLD &&
+          rowHeight > MIN_ROW_HEIGHT_FOR_BORDERS
+        ) {
+          // Add horizontal borders for visibility at high zoom
+          // Note: borders extend the effective clickable area
+          actualXPos = xPos - INSERTION_BORDER_WIDTH
+          actualWidth = INSERTION_BORDER_HEIGHT
+          fillRect(
+            ctx,
+            xPos - INSERTION_BORDER_WIDTH,
+            rowTop,
+            INSERTION_BORDER_HEIGHT,
+            INSERTION_LINE_WIDTH,
+            canvasWidth,
+          )
+          fillRect(
+            ctx,
+            xPos - INSERTION_BORDER_WIDTH,
+            rowTop + h - INSERTION_LINE_WIDTH,
+            INSERTION_BORDER_HEIGHT,
+            INSERTION_LINE_WIDTH,
+            canvasWidth,
+          )
+        }
+      }
+
+      // Add insertion to spatial index with actual rendered dimensions
+      // Insertions always bypass distance filter
+      if (shouldAddToSpatialIndex(actualXPos, context, true)) {
+        addToSpatialIndex(
+          context,
+          createRenderedInsertion(
+            actualXPos,
+            rowTop,
+            actualWidth,
+            context,
+            genomicOffset + alignmentStart,
+            chr,
+            sampleId,
+            insertionSequence,
+            featureId,
+          ),
+        )
+      }
+    }
+    genomicOffset++
+  }
+}