jbrowse-plugin-mafviewer 1.3.2 → 1.4.1

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.2",
+  "version": "1.4.1",
   "license": "MIT",
   "name": "jbrowse-plugin-mafviewer",
   "keywords": [
@@ -38,7 +38,6 @@
     "@types/d3-array": "^3.2.1",
     "@types/d3-hierarchy": "^3.1.7",
     "@types/node": "^22.15.16",
-    "@types/rbush": "^4.0.0",
     "@types/react": "^19.0.1",
     "chalk": "^5.3.0",
     "esbuild": "^0.25.0",
@@ -69,8 +68,8 @@
     "d3-array": "^3.2.4",
     "d3-hierarchy": "^3.1.2",
     "fast-deep-equal": "^3.1.3",
+    "flatbush": "^4.4.1",
     "generic-filehandle2": "^2.0.1",
-    "long": "^5.2.3",
-    "rbush": "^4.0.1"
+    "long": "^5.2.3"
   }
 }

package/src/LinearMafRenderer/components/{ReactComponent.tsx → LinearMafRendering.tsx}

@@ -1,27 +1,24 @@
 import React, { useMemo, useRef } from 'react'
 
 import { PrerenderedCanvas } from '@jbrowse/core/ui'
+import Flatbush from 'flatbush'
 import { observer } from 'mobx-react'
-import RBush from 'rbush'
+import { RenderedBase } from '../rendering'
+import { Sample } from '../../LinearMafDisplay/types'
 
 type SerializedRBush = any
 
-interface RBushData {
-  minX: number
-  maxX: number
-  minY: number
-  maxY: number
-  isInsertion: boolean
-}
 const LinearMafRendering = observer(function (props: {
   width: number
   height: number
   displayModel: any
-  rbush: SerializedRBush
+  flatbush: SerializedRBush
+  items: RenderedBase[]
+  samples: Sample[]
 }) {
-  const { displayModel, height, rbush } = props
+  const { items, displayModel, height, samples, flatbush } = props
   const ref = useRef<HTMLDivElement>(null)
-  const rbush2 = useMemo(() => new RBush<RBushData>().fromJSON(rbush), [rbush])
+  const rbush2 = useMemo(() => Flatbush.from(flatbush), [flatbush])
 
   function getFeatureUnderMouse(eventClientX: number, eventClientY: number) {
     let offsetX = 0
@@ -32,17 +29,16 @@ const LinearMafRendering = observer(function (props: {
       offsetY = eventClientY - r.top
     }
 
-    const x = rbush2.search({
-      minX: offsetX,
-      maxX: offsetX + 1,
-      minY: offsetY,
-      maxY: offsetY + 1,
-    })
+    const x = rbush2.search(offsetX, offsetY, offsetX + 1, offsetY + 1)
     if (x.length) {
-      // prioritize insertions
-      const { minX, minY, maxX, maxY, ...rest } =
-        x.find(f => f.isInsertion) || x[0]!
-      return rest
+      const elt = x.find(idx => items[idx]?.isInsertion)
+      const r = elt !== undefined ? items[elt]! : items[x[0]!]!
+      console.log({ x, r })
+      const s = samples[r.sampleId]
+      return {
+        ...r,
+        sampleId: s?.label || s?.id || 'unknown',
+      }
     } else {
       return undefined
     }

package/src/LinearMafRenderer/index.ts

@@ -1,7 +1,7 @@
 import PluginManager from '@jbrowse/core/PluginManager'
 
 import LinearMafRenderer from './LinearMafRenderer'
-import ReactComponent from './components/ReactComponent'
+import ReactComponent from './components/LinearMafRendering'
 import configSchema from './configSchema'
 
 export default function LinearMafRendererF(pluginManager: PluginManager) {

package/src/LinearMafRenderer/makeImageData.ts

@@ -1,11 +1,10 @@
 import { RenderArgsDeserialized } from '@jbrowse/core/pluggableElementTypes/renderers/BoxRendererType'
 import { createJBrowseTheme } from '@jbrowse/core/ui'
 import { Feature } from '@jbrowse/core/util'
-import RBush from 'rbush'
+import Flatbush from 'flatbush'
 
 import {
   FONT_CONFIG,
-  RenderedBase,
   RenderingContext,
   Sample,
   processFeatureAlignment,
@@ -70,7 +69,8 @@ export function makeImageData({
     showAllLetters,
     mismatchRendering,
     showAsUpperCase,
-    spatialIndex: new RBush<RenderedBase>(),
+    spatialIndex: [],
+    spatialIndexCoords: [],
     lastInsertedX: -Infinity, // Start with -Infinity so first item is always inserted
   }
 
@@ -96,8 +96,23 @@ export function makeImageData({
     )
   }
 
-  // Return serialized RBush spatial index
+  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 {
-    rbush: renderingContext.spatialIndex.toJSON(),
+    flatbush: flatbush.data,
+    items: renderingContext.spatialIndex,
+    samples,
   }
 }

package/src/LinearMafRenderer/rendering/features.ts

@@ -8,14 +8,6 @@ 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,
@@ -29,8 +21,6 @@ export function processFeatureAlignment(
     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)
@@ -42,25 +32,14 @@ export function processFeatureAlignment(
     const alignment = originalAlignment.toLowerCase()
     const rowTop = renderingContext.offset + renderingContext.rowHeight * row
 
-    renderGaps(
-      renderingContext,
-      alignment,
-      referenceSeq,
-      leftPx,
-      rowTop,
-      sampleId,
-      featureId,
-      alignmentData.start,
-      alignmentData.chr,
-    )
+    renderGaps(renderingContext, alignment, referenceSeq, leftPx, rowTop)
     renderMatches(
       renderingContext,
       alignment,
       referenceSeq,
       leftPx,
       rowTop,
-      sampleId,
-      featureId,
+      row,
       alignmentData.start,
       alignmentData.chr,
     )
@@ -70,8 +49,7 @@ export function processFeatureAlignment(
       referenceSeq,
       leftPx,
       rowTop,
-      sampleId,
-      featureId,
+      row,
       alignmentData.start,
       alignmentData.chr,
     )
@@ -82,21 +60,10 @@ export function processFeatureAlignment(
       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,
@@ -110,9 +77,6 @@ export function processFeatureInsertions(
     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) {
@@ -129,8 +93,7 @@ export function processFeatureInsertions(
       leftPx,
       rowTop,
       bpPerPx,
-      sampleId,
-      featureId,
+      row,
       alignmentData.start,
       alignmentData.chr,
     )

package/src/LinearMafRenderer/rendering/gaps.ts

@@ -1,32 +1,13 @@
-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
@@ -44,25 +25,6 @@ export function renderGaps(
         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++
     }

package/src/LinearMafRenderer/rendering/insertions.ts

@@ -1,11 +1,7 @@
 import { measureText } from '@jbrowse/core/util'
 
 import { fillRect, getCharWidthHeight } from '../util'
-import {
-  addToSpatialIndex,
-  createRenderedInsertion,
-  shouldAddToSpatialIndex,
-} from './spatialIndex'
+import { addToSpatialIndex, shouldAddToSpatialIndex } from './spatialIndex'
 import {
   CHAR_SIZE_WIDTH,
   HIGH_BP_PER_PX_THRESHOLD,
@@ -20,18 +16,6 @@ import {
 
 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,
@@ -39,8 +23,7 @@ export function renderInsertions(
   leftPx: number,
   rowTop: number,
   bpPerPx: number,
-  sampleId: string,
-  featureId: string,
+  sampleId: number,
   alignmentStart: number,
   chr: string,
 ) {
@@ -151,17 +134,17 @@ export function renderInsertions(
       if (shouldAddToSpatialIndex(actualXPos, context, true)) {
         addToSpatialIndex(
           context,
-          createRenderedInsertion(
-            actualXPos,
-            rowTop,
-            actualWidth,
-            context,
-            genomicOffset + alignmentStart,
+          actualXPos,
+          rowTop,
+          actualXPos + actualWidth,
+          rowTop + context.h,
+          {
+            pos: genomicOffset + alignmentStart,
             chr,
+            base: insertionSequence,
             sampleId,
-            insertionSequence,
-            featureId,
-          ),
+            isInsertion: true,
+          },
         )
       }
     }

package/src/LinearMafRenderer/rendering/matches.ts

@@ -1,32 +1,16 @@
 import { fillRect } from '../util'
-import {
-  addToSpatialIndex,
-  createRenderedBase,
-  shouldAddToSpatialIndex,
-} from './spatialIndex'
+import { addToSpatialIndex, 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,
+  sampleId: number,
   alignmentStart: number,
   chr: string,
 ) {
@@ -56,21 +40,19 @@ export function renderMatches(
 
         // Add to spatial index if distance filter allows
         if (shouldAddToSpatialIndex(xPos, context)) {
-          const renderedBase = createRenderedBase(
+          addToSpatialIndex(
+            context,
             xPos,
             rowTop,
-            context,
-            genomicOffset + alignmentStart,
-            chr,
-            sampleId,
-            currentChar || '',
-            true,
-            false,
-            false,
-            false,
-            featureId,
+            xPos + context.scale + GAP_STROKE_OFFSET,
+            rowTop + context.h,
+            {
+              pos: genomicOffset + alignmentStart,
+              chr,
+              base: currentChar || '',
+              sampleId,
+            },
           )
-          addToSpatialIndex(context, renderedBase)
         }
       }
       genomicOffset++

package/src/LinearMafRenderer/rendering/mismatches.ts

@@ -1,9 +1,5 @@
 import { fillRect } from '../util'
-import {
-  addToSpatialIndex,
-  createRenderedBase,
-  shouldAddToSpatialIndex,
-} from './spatialIndex'
+import { addToSpatialIndex, shouldAddToSpatialIndex } from './spatialIndex'
 import { GAP_STROKE_OFFSET } from './types'
 
 import type { RenderingContext } from './types'
@@ -25,8 +21,7 @@ export function renderMismatches(
   seq: string,
   leftPx: number,
   rowTop: number,
-  sampleId: string,
-  featureId: string,
+  sampleId: number,
   alignmentStart: number,
   chr: string,
 ) {
@@ -67,20 +62,16 @@ export function renderMismatches(
           if (shouldAddToSpatialIndex(xPos, context)) {
             addToSpatialIndex(
               context,
-              createRenderedBase(
-                xPos,
-                rowTop,
-                context,
-                genomicOffset + alignmentStart,
+              xPos,
+              rowTop,
+              xPos + context.scale + GAP_STROKE_OFFSET,
+              rowTop + context.h,
+              {
+                pos: genomicOffset + alignmentStart,
                 chr,
+                base: currentChar!,
                 sampleId,
-                currentChar!,
-                false,
-                true,
-                false,
-                false,
-                featureId,
-              ),
+              },
             )
           }
         } else if (showAllLetters) {
@@ -101,20 +92,16 @@ export function renderMismatches(
           if (shouldAddToSpatialIndex(xPos, context)) {
             addToSpatialIndex(
               context,
-              createRenderedBase(
-                xPos,
-                rowTop,
-                context,
-                genomicOffset + alignmentStart,
+              xPos,
+              rowTop,
+              xPos + context.scale + GAP_STROKE_OFFSET,
+              rowTop + context.h,
+              {
+                pos: genomicOffset + alignmentStart,
                 chr,
+                base: currentChar!,
                 sampleId,
-                currentChar!,
-                true,
-                false,
-                false,
-                false,
-                featureId,
-              ),
+              },
             )
           }
         }

package/src/LinearMafRenderer/rendering/spatialIndex.ts

@@ -2,113 +2,19 @@ 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(
+export function createRenderedBaseCoords(
   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,
@@ -120,17 +26,15 @@ export function shouldAddToSpatialIndex(
   )
 }
 
-/**
- * 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,
+  minX: number,
+  minY: number,
+  maxX: number,
+  maxY: number,
   renderedBase: RenderedBase,
 ) {
-  context.spatialIndex.insert(renderedBase)
-  context.lastInsertedX = renderedBase.minX
+  context.spatialIndex.push(renderedBase)
+  context.spatialIndexCoords.push(minX, minY, maxX, maxY)
+  context.lastInsertedX = minX
 }

package/src/LinearMafRenderer/rendering/text.ts

@@ -24,8 +24,6 @@ export function renderText(
   seq: string,
   leftPx: number,
   rowTop: number,
-  _sampleId: string,
-  _featureId: string,
 ) {
   const {
     ctx,