jbrowse-plugin-mafviewer 1.3.1 → 1.4.0

package/src/LinearMafRenderer/makeImageData.ts

@@ -1,18 +1,17 @@
 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 Flatbush from 'flatbush'
 
 import {
-  fillRect,
-  getCharWidthHeight,
-  getColorBaseMap,
-  getContrastBaseMap,
-} from './util'
+  FONT_CONFIG,
+  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 +23,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 +42,77 @@ 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()
-
-      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++
-          }
-        }
-      }
+  ctx.font = FONT_CONFIG
 
-      // 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: [],
+    spatialIndexCoords: [],
+    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++
-      }
-    }
+  const flatbush = new Flatbush(renderingContext.spatialIndex.length)
+  for (
+    let i = 0, l = renderingContext.spatialIndexCoords.length;
+    i < l;
+    i += 4
+  ) {
+    flatbush.add(
+      renderingContext.spatialIndexCoords[i]!,
+      renderingContext.spatialIndexCoords[i + 1]!,
+      renderingContext.spatialIndexCoords[i + 2]!,
+      renderingContext.spatialIndexCoords[i + 3]!,
+    )
+  }
+  flatbush.finish()
+  return {
+    flatbush: flatbush.data,
+    items: renderingContext.spatialIndex,
+    samples,
   }
 }

package/src/LinearMafRenderer/rendering/features.ts

@@ -0,0 +1,111 @@
+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'
+
+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)
+    renderMatches(
+      renderingContext,
+      alignment,
+      referenceSeq,
+      leftPx,
+      rowTop,
+      row,
+      featureId,
+      alignmentData.start,
+      alignmentData.chr,
+    )
+    renderMismatches(
+      renderingContext,
+      alignment,
+      referenceSeq,
+      leftPx,
+      rowTop,
+      row,
+      featureId,
+      alignmentData.start,
+      alignmentData.chr,
+    )
+    renderText(
+      renderingContext,
+      alignment,
+      originalAlignment,
+      referenceSeq,
+      leftPx,
+      rowTop,
+      sampleId,
+      featureId,
+    )
+  }
+}
+
+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,
+      row,
+      featureId,
+      alignmentData.start,
+      alignmentData.chr,
+    )
+  }
+}

package/src/LinearMafRenderer/rendering/gaps.ts

@@ -0,0 +1,33 @@
+import { GAP_STROKE_OFFSET } from './types'
+
+import type { RenderingContext } from './types'
+
+export function renderGaps(
+  context: RenderingContext,
+  alignment: string,
+  seq: string,
+  leftPx: number,
+  rowTop: number,
+) {
+  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)
+      }
+      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,154 @@
+import { measureText } from '@jbrowse/core/util'
+
+import { fillRect, getCharWidthHeight } from '../util'
+import { addToSpatialIndex, 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'
+
+export function renderInsertions(
+  context: RenderingContext,
+  alignment: string,
+  seq: string,
+  leftPx: number,
+  rowTop: number,
+  bpPerPx: number,
+  sampleId: number,
+  _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,
+          actualXPos,
+          rowTop,
+          actualXPos + actualWidth,
+          rowTop + context.h,
+          {
+            pos: genomicOffset + alignmentStart,
+            chr,
+            base: insertionSequence,
+            sampleId,
+            isInsertion: true,
+          },
+        )
+      }
+    }
+    genomicOffset++
+  }
+}

package/src/LinearMafRenderer/rendering/matches.ts

@@ -0,0 +1,62 @@
+import { fillRect } from '../util'
+import { addToSpatialIndex, shouldAddToSpatialIndex } from './spatialIndex'
+import { GAP_STROKE_OFFSET } from './types'
+
+import type { RenderingContext } from './types'
+
+export function renderMatches(
+  context: RenderingContext,
+  alignment: string,
+  seq: string,
+  leftPx: number,
+  rowTop: number,
+  sampleId: number,
+  _featureId: string,
+  alignmentStart: number,
+  chr: string,
+) {
+  if (context.showAllLetters) {
+    return
+  }
+
+  const { ctx, scale, h, canvasWidth } = context
+  ctx.fillStyle = 'lightgrey'
+
+  // Highlight matching bases with light grey background
+  for (
+    let i = 0, genomicOffset = 0, seqLength = alignment.length;
+    i < seqLength;
+    i++
+  ) {
+    if (seq[i] !== '-') {
+      // Only process non-gap positions in reference
+      const currentChar = alignment[i]
+      const xPos = leftPx + scale * genomicOffset
+      if (
+        seq[i] === currentChar &&
+        currentChar !== '-' &&
+        currentChar !== ' '
+      ) {
+        fillRect(ctx, xPos, rowTop, scale + GAP_STROKE_OFFSET, h, canvasWidth)
+
+        // Add to spatial index if distance filter allows
+        if (shouldAddToSpatialIndex(xPos, context)) {
+          addToSpatialIndex(
+            context,
+            xPos,
+            rowTop,
+            xPos + context.scale + GAP_STROKE_OFFSET,
+            rowTop + context.h,
+            {
+              pos: genomicOffset + alignmentStart,
+              chr,
+              base: currentChar || '',
+              sampleId,
+            },
+          )
+        }
+      }
+      genomicOffset++
+    }
+  }
+}