jbrowse-plugin-mafviewer 1.3.1 → 1.3.2

package/src/LinearMafRenderer/rendering/matches.ts

@@ -0,0 +1,79 @@
+import { fillRect } from '../util'
+import {
+  addToSpatialIndex,
+  createRenderedBase,
+  shouldAddToSpatialIndex,
+} from './spatialIndex'
+import { GAP_STROKE_OFFSET } from './types'
+
+import type { RenderingContext } from './types'
+
+/**
+ * Renders background rectangles for positions where alignment matches reference
+ * Only renders when showAllLetters is false
+ * @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 renderMatches(
+  context: RenderingContext,
+  alignment: string,
+  seq: string,
+  leftPx: number,
+  rowTop: number,
+  sampleId: string,
+  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)) {
+          const renderedBase = createRenderedBase(
+            xPos,
+            rowTop,
+            context,
+            genomicOffset + alignmentStart,
+            chr,
+            sampleId,
+            currentChar || '',
+            true,
+            false,
+            false,
+            false,
+            featureId,
+          )
+          addToSpatialIndex(context, renderedBase)
+        }
+      }
+      genomicOffset++
+    }
+  }
+}

package/src/LinearMafRenderer/rendering/mismatches.ts

@@ -0,0 +1,125 @@
+import { fillRect } from '../util'
+import {
+  addToSpatialIndex,
+  createRenderedBase,
+  shouldAddToSpatialIndex,
+} from './spatialIndex'
+import { GAP_STROKE_OFFSET } from './types'
+
+import type { RenderingContext } from './types'
+
+/**
+ * Renders colored rectangles for mismatches and matches (when showAllLetters is true)
+ * Colors are determined by base type when mismatchRendering is enabled
+ * @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 renderMismatches(
+  context: RenderingContext,
+  alignment: string,
+  seq: string,
+  leftPx: number,
+  rowTop: number,
+  sampleId: string,
+  featureId: string,
+  alignmentStart: number,
+  chr: string,
+) {
+  const {
+    ctx,
+    scale,
+    h,
+    canvasWidth,
+    showAllLetters,
+    mismatchRendering,
+    colorForBase,
+  } = context
+
+  for (
+    let i = 0, genomicOffset = 0, seqLength = alignment.length;
+    i < seqLength;
+    i++
+  ) {
+    const currentChar = alignment[i]
+    if (seq[i] !== '-') {
+      if (currentChar !== '-') {
+        const xPos = leftPx + scale * genomicOffset
+        if (seq[i] !== currentChar && currentChar !== ' ') {
+          // Mismatch: use base-specific color or orange
+          fillRect(
+            ctx,
+            xPos,
+            rowTop,
+            scale + GAP_STROKE_OFFSET,
+            h,
+            canvasWidth,
+            mismatchRendering
+              ? (colorForBase[currentChar!] ?? 'black')
+              : 'orange',
+          )
+
+          // Add to spatial index if distance filter allows
+          if (shouldAddToSpatialIndex(xPos, context)) {
+            addToSpatialIndex(
+              context,
+              createRenderedBase(
+                xPos,
+                rowTop,
+                context,
+                genomicOffset + alignmentStart,
+                chr,
+                sampleId,
+                currentChar!,
+                false,
+                true,
+                false,
+                false,
+                featureId,
+              ),
+            )
+          }
+        } else if (showAllLetters) {
+          // Match (when showing all letters): use base-specific color or light blue
+          fillRect(
+            ctx,
+            xPos,
+            rowTop,
+            scale + GAP_STROKE_OFFSET,
+            h,
+            canvasWidth,
+            mismatchRendering
+              ? (colorForBase[currentChar!] ?? 'black')
+              : 'lightblue',
+          )
+
+          // Add to spatial index if distance filter allows
+          if (shouldAddToSpatialIndex(xPos, context)) {
+            addToSpatialIndex(
+              context,
+              createRenderedBase(
+                xPos,
+                rowTop,
+                context,
+                genomicOffset + alignmentStart,
+                chr,
+                sampleId,
+                currentChar!,
+                true,
+                false,
+                false,
+                false,
+                featureId,
+              ),
+            )
+          }
+        }
+      }
+      genomicOffset++
+    }
+  }
+}

package/src/LinearMafRenderer/rendering/spatialIndex.ts

@@ -0,0 +1,136 @@
+import { GAP_STROKE_OFFSET, MIN_X_DISTANCE } from './types'
+
+import type { RenderedBase, RenderingContext } from './types'
+
+/**
+ * Creates a RenderedBase object for spatial indexing
+ * @param xPos - X coordinate of the base
+ * @param rowTop - Y coordinate of the row top
+ * @param context - Rendering context with dimensions
+ * @param pos - Genomic coordinate
+ * @param chr - Chromosome/sequence name
+ * @param sampleId - Sample identifier
+ * @param base - The base character
+ * @param isMatch - Whether this base matches the reference
+ * @param isMismatch - Whether this base is a mismatch
+ * @param isGap - Whether this is a gap
+ * @param isInsertion - Whether this is an insertion
+ * @param featureId - Feature identifier
+ */
+export function createRenderedBase(
+  xPos: number,
+  rowTop: number,
+  context: RenderingContext,
+  pos: number,
+  chr: string,
+  sampleId: string,
+  base: string,
+  isMatch: boolean,
+  isMismatch: boolean,
+  isGap: boolean,
+  isInsertion: boolean,
+  featureId: string,
+): RenderedBase {
+  return {
+    minX: xPos,
+    minY: rowTop,
+    maxX: xPos + context.scale + GAP_STROKE_OFFSET,
+    maxY: rowTop + context.h,
+    pos,
+    chr,
+    sampleId,
+    base,
+    isMatch,
+    isMismatch,
+    isGap,
+    isInsertion,
+    featureId,
+  }
+}
+
+/**
+ * Creates a RenderedBase object for insertions with custom width
+ * Uses the actual rendered width instead of the standard scale-based width
+ * This ensures accurate spatial queries for different insertion rendering types:
+ * - Small insertions: INSERTION_LINE_WIDTH (1px) or INSERTION_BORDER_HEIGHT (5px) with borders
+ * - Large insertions (text): measured text width + padding
+ * - Large insertions (line): INSERTION_BORDER_WIDTH (2px)
+ *
+ * @param xPos - X coordinate of the insertion
+ * @param rowTop - Y coordinate of the row top
+ * @param width - Actual rendered width of the insertion
+ * @param context - Rendering context with dimensions
+ * @param pos - Genomic coordinate
+ * @param chr - Chromosome/sequence name
+ * @param sampleId - Sample identifier
+ * @param insertionSequence - The insertion sequence
+ * @param featureId - Feature identifier
+ */
+export function createRenderedInsertion(
+  xPos: number,
+  rowTop: number,
+  width: number,
+  context: RenderingContext,
+  pos: number,
+  chr: string,
+  sampleId: string,
+  insertionSequence: string,
+  featureId: string,
+): RenderedBase {
+  return {
+    minX: xPos,
+    minY: rowTop,
+    maxX: xPos + width,
+    maxY: rowTop + context.h,
+    pos,
+    chr,
+    sampleId,
+    base: insertionSequence,
+    isMatch: false,
+    isMismatch: false,
+    isGap: false,
+    isInsertion: true,
+    featureId,
+  }
+}
+
+/**
+ * Checks if an item should be added to the spatial index based on distance filtering
+ * Only returns true if the X position is >0.5px away from the last inserted item
+ * This reduces spatial index density while maintaining useful spatial queries
+ *
+ * @param xPos - X position to check
+ * @param context - Rendering context with lastInsertedX tracking
+ * @param bypassDistanceFilter - If true, always return true (e.g., for insertions)
+ * @returns Whether the item should be added to spatial index
+ *
+ * @example
+ * // Items at X positions: 100.0, 100.3, 100.8, 101.5
+ * // Only items at 100.0, 100.8, 101.5 would return true (>0.5px apart)
+ * // Unless bypassDistanceFilter=true, then all would return true
+ */
+export function shouldAddToSpatialIndex(
+  xPos: number,
+  context: RenderingContext,
+  bypassDistanceFilter = false,
+): boolean {
+  return (
+    bypassDistanceFilter ||
+    Math.abs(xPos - context.lastInsertedX) > MIN_X_DISTANCE
+  )
+}
+
+/**
+ * Adds a rendered base directly to the RBush spatial index
+ * Updates the lastInsertedX tracking for distance filtering
+ *
+ * @param context - Rendering context with spatial index
+ * @param renderedBase - The base to add to the spatial index
+ */
+export function addToSpatialIndex(
+  context: RenderingContext,
+  renderedBase: RenderedBase,
+) {
+  context.spatialIndex.insert(renderedBase)
+  context.lastInsertedX = renderedBase.minX
+}

package/src/LinearMafRenderer/rendering/text.ts

@@ -0,0 +1,72 @@
+import { getCharWidthHeight } from '../util'
+import { CHAR_SIZE_WIDTH, VERTICAL_TEXT_OFFSET } from './types'
+
+import type { RenderingContext } from './types'
+
+function getLetter(a: string, showAsUpperCase: boolean) {
+  return showAsUpperCase ? a.toUpperCase() : a
+}
+
+/**
+ * Renders text labels for bases when zoom level is sufficient
+ * Only shows text for mismatches (or all letters when showAllLetters is true)
+ * @param context - Rendering context with canvas and styling info
+ * @param alignment - The aligned sequence for this sample (lowercase)
+ * @param origAlignment - Original alignment preserving case
+ * @param seq - The reference sequence
+ * @param leftPx - Left pixel position of the feature
+ * @param rowTop - Top pixel position of the row
+ */
+export function renderText(
+  context: RenderingContext,
+  alignment: string,
+  origAlignment: string,
+  seq: string,
+  leftPx: number,
+  rowTop: number,
+  _sampleId: string,
+  _featureId: string,
+) {
+  const {
+    ctx,
+    scale,
+    hp2,
+    rowHeight,
+    showAllLetters,
+    mismatchRendering,
+    contrastForBase,
+    showAsUpperCase,
+  } = context
+  const { charHeight } = getCharWidthHeight()
+
+  // Render text labels when zoomed in enough and row is tall enough
+  if (scale >= CHAR_SIZE_WIDTH) {
+    for (
+      let i = 0, genomicOffset = 0, seqLength = alignment.length;
+      i < seqLength;
+      i++
+    ) {
+      if (seq[i] !== '-') {
+        // Only process non-gap positions in reference
+        const xPos = leftPx + scale * genomicOffset
+        const textOffset = (scale - CHAR_SIZE_WIDTH) / 2 + 1 // Center text in available space
+        const currentChar = alignment[i]!
+        // Show text for mismatches or all letters (depending on setting)
+        if ((showAllLetters || seq[i] !== currentChar) && currentChar !== '-') {
+          ctx.fillStyle = mismatchRendering
+            ? (contrastForBase[currentChar] ?? 'white') // Use contrasting color for readability
+            : 'black'
+          if (rowHeight > charHeight) {
+            // Only render if row is tall enough
+            ctx.fillText(
+              getLetter(origAlignment[i] || '', showAsUpperCase),
+              xPos + textOffset,
+              hp2 + rowTop + VERTICAL_TEXT_OFFSET,
+            )
+          }
+        }
+        genomicOffset++
+      }
+    }
+  }
+}

package/src/LinearMafRenderer/rendering/types.ts

@@ -0,0 +1,81 @@
+import RBush from 'rbush'
+
+// Rendering constants
+export const FONT_CONFIG = 'bold 10px Courier New,monospace'
+export const CHAR_SIZE_WIDTH = 10
+export const GAP_STROKE_OFFSET = 0.4
+export const INSERTION_LINE_WIDTH = 1
+export const INSERTION_BORDER_WIDTH = 2
+export const INSERTION_PADDING = 2
+export const VERTICAL_TEXT_OFFSET = 3
+export const LARGE_INSERTION_THRESHOLD = 10
+export const HIGH_ZOOM_THRESHOLD = 0.2
+export const MIN_ROW_HEIGHT_FOR_BORDERS = 5
+export const HIGH_BP_PER_PX_THRESHOLD = 10
+export const INSERTION_BORDER_HEIGHT = 5
+export const MIN_X_DISTANCE = 0.5
+
+export interface Sample {
+  id: string
+  color?: string
+}
+
+export interface GenomicRegion {
+  start: number
+  end: number
+  refName: string
+}
+
+/**
+ * Represents a rendered letter/base with its spatial and genomic coordinates
+ * This structure is designed for insertion into an RBush spatial index
+ */
+export interface RenderedBase {
+  // Spatial bounding box (required by RBush)
+  minX: number
+  minY: number
+  maxX: number
+  maxY: number
+  // Genomic information
+  pos: number
+  chr: string
+  sampleId: string
+  base: string
+  isMatch: boolean
+  isMismatch: boolean
+  isGap: boolean
+  isInsertion: boolean
+  // Feature reference
+  featureId: string
+}
+
+/**
+ * Shared rendering context containing all necessary parameters for rendering operations
+ */
+export interface RenderingContext {
+  ctx: CanvasRenderingContext2D
+  scale: number
+  canvasWidth: number
+  rowHeight: number
+  h: number
+  hp2: number
+  offset: number
+  colorForBase: Record<string, string>
+  contrastForBase: Record<string, string>
+  showAllLetters: boolean
+  mismatchRendering: boolean
+  showAsUpperCase: boolean
+
+  // RBush spatial index for efficient spatial queries
+  spatialIndex: RBush<RenderedBase>
+
+  // Track last X position for spatial index optimization
+  lastInsertedX: number
+}
+
+export interface AlignmentRecord {
+  seq: string
+  start: number
+  strand: number
+  chr: string
+}

package/src/MafTabixAdapter/MafTabixAdapter.ts

@@ -81,38 +81,93 @@ export default class MafTabixAdapter extends BaseFeatureDataAdapter {
       await updateStatus('Processing alignments', statusCallback, () => {
         let firstAssemblyNameFound = ''
         const refAssemblyName = this.getConf('refAssemblyName')
+
         for (const feature of features) {
           const data = (feature.get('field5') as string).split(',')
           const alignments = {} as Record<string, OrganismRecord>
+          const dataLength = data.length
 
-          const len = data.length
-          for (let j = 0; j < len; j++) {
+          for (let j = 0; j < dataLength; j++) {
             const elt = data[j]!
-            const seq = elt.split(':')[5]!
-            const ad = elt.split(':')
-            const ag = ad[0]!.split('.')
-            const [n1, n2 = '', ...rest] = ag
-            let assemblyName
-            let last = ''
-            if (ag.length === 2) {
-              assemblyName = n1
-              last = n2!
-            } else if (!Number.isNaN(+n2)) {
-              assemblyName = `${n1}.${n2}`
-              last = rest.join('.')
+            // Cache split result to avoid redundant operations
+            const parts = elt.split(':')
+
+            // Use destructuring for better performance than multiple array access
+            const [
+              assemblyAndChr,
+              startStr,
+              srcSizeStr,
+              strandStr,
+              unknownStr,
+              seq,
+            ] = parts
+
+            // Skip if we don't have all required parts
+            if (!assemblyAndChr || !seq) {
+              continue
+            }
+
+            // Optimized assembly name parsing with simplified logic
+            let assemblyName: string
+            let chr: string
+
+            const firstDotIndex = assemblyAndChr.indexOf('.')
+            if (firstDotIndex === -1) {
+              // No dot found, entire string is assembly name
+              assemblyName = assemblyAndChr
+              chr = ''
             } else {
-              assemblyName = n1
-              last = [n2, ...rest].join('.')
+              const secondDotIndex = assemblyAndChr.indexOf(
+                '.',
+                firstDotIndex + 1,
+              )
+              if (secondDotIndex === -1) {
+                // Only one dot: assembly.chr
+                assemblyName = assemblyAndChr.slice(
+                  0,
+                  Math.max(0, firstDotIndex),
+                )
+                chr = assemblyAndChr.slice(Math.max(0, firstDotIndex + 1))
+              } else {
+                // Multiple dots: check if second part is numeric (version number)
+                const secondPart = assemblyAndChr.slice(
+                  firstDotIndex + 1,
+                  secondDotIndex,
+                )
+                const isNumeric =
+                  secondPart.length > 0 && !Number.isNaN(+secondPart)
+
+                if (isNumeric) {
+                  // assembly.version.chr format
+                  assemblyName = assemblyAndChr.slice(
+                    0,
+                    Math.max(0, secondDotIndex),
+                  )
+                  chr = assemblyAndChr.slice(Math.max(0, secondDotIndex + 1))
+                } else {
+                  // assembly.chr.more format
+                  assemblyName = assemblyAndChr.slice(
+                    0,
+                    Math.max(0, firstDotIndex),
+                  )
+                  chr = assemblyAndChr.slice(Math.max(0, firstDotIndex + 1))
+                }
+              }
             }
+
             if (assemblyName) {
-              firstAssemblyNameFound = firstAssemblyNameFound || assemblyName
+              // Set first assembly name found (only once)
+              if (!firstAssemblyNameFound) {
+                firstAssemblyNameFound = assemblyName
+              }
 
+              // Create alignment record with optimized number conversion
               alignments[assemblyName] = {
-                chr: last,
-                start: +ad[1]!,
-                srcSize: +ad[2]!,
-                strand: ad[3] === '-' ? -1 : 1,
-                unknown: +ad[4]!,
+                chr,
+                start: +startStr!,
+                srcSize: +srcSizeStr!,
+                strand: strandStr === '-' ? -1 : 1,
+                unknown: +unknownStr!,
                 seq,
               }
             }

package/src/util/fastaUtils.ts

@@ -1,5 +1,6 @@
 import { Sample } from '../LinearMafDisplay/types'
 
+import type { AlignmentRecord } from '../LinearMafRenderer/rendering'
 import type { Feature, Region } from '@jbrowse/core/util'
 
 /**
@@ -27,7 +28,7 @@ export function processFeaturesToFasta({
   const outputRows = samples.map(() => '-'.repeat(rlen))
   for (const feature of features.values()) {
     const leftCoord = feature.get('start')
-    const vals = feature.get('alignments') as Record<string, { seq: string }>
+    const vals = feature.get('alignments') as Record<string, AlignmentRecord>
     const seq = feature.get('seq')
     for (const [sample, val] of Object.entries(vals)) {
       const origAlignment = val.seq