Add click map for genomic position (#33)

Author: cmdcolin

package.json

@@ -38,6 +38,7 @@
     "@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,6 +70,7 @@
     "d3-hierarchy": "^3.1.2",
     "fast-deep-equal": "^3.1.3",
     "generic-filehandle2": "^2.0.1",
-    "long": "^5.2.3"
+    "long": "^5.2.3",
+    "rbush": "^4.0.1"
   }
 }

src/BigMafAdapter/BigMafAdapter.ts

@@ -57,6 +57,9 @@ export default class BigMafAdapter extends BaseFeatureDataAdapter {
 
   getFeatures(query: Region, opts?: BaseOptions) {
     const { statusCallback = () => {} } = opts || {}
+    // Pre-compile regex for better performance
+    const WHITESPACE_REGEX = / +/
+
     return ObservableCreate<Feature>(async observer => {
       const { adapter } = await this.setup()
       const features = await updateStatus(
@@ -68,48 +71,66 @@ export default class BigMafAdapter extends BaseFeatureDataAdapter {
         for (const feature of features) {
           const maf = feature.get('mafBlock') as string
           const blocks = maf.split(';')
-          let aln: string | undefined
-          const alns = [] as string[]
-          const alignments = {} as Record<string, OrganismRecord>
-          const blocks2 = [] as string[]
+
+          // Count sequence blocks first to pre-size arrays
+          let sequenceBlockCount = 0
           for (const block of blocks) {
             if (block.startsWith('s')) {
-              if (aln) {
-                alns.push(block.split(/ +/)[6]!)
-                blocks2.push(block)
-              } else {
-                aln = block.split(/ +/)[6]
-                alns.push(aln!)
-                blocks2.push(block)
-              }
+              sequenceBlockCount++
             }
           }
 
-          for (let i = 0; i < blocks2.length; i++) {
-            const elt = blocks2[i]!
-            const ad = elt.split(/ +/)
-            const y = ad[1]!.split('.')
-            const org = y[0]!
-            const chr = y[1]!
-
-            alignments[org] = {
-              chr: chr,
-              start: +ad[1]!,
-              srcSize: +ad[2]!,
-              strand: ad[3] === '+' ? 1 : -1,
-              unknown: +ad[4]!,
-              seq: alns[i]!,
+          // Pre-size arrays based on actual sequence block count
+          const alns = new Array<string>(sequenceBlockCount)
+          const alignments = {} as Record<string, OrganismRecord>
+
+          let sequenceIndex = 0
+          let referenceSeq: string | undefined
+
+          // Single-pass processing: combine both loops
+          for (const block of blocks) {
+            if (block.startsWith('s')) {
+              // Split once and cache the result
+              const parts = block.split(WHITESPACE_REGEX)
+              const sequence = parts[6]!
+              const organismChr = parts[1]!
+
+              // Store sequence in pre-sized array
+              alns[sequenceIndex] = sequence
+
+              // Set reference sequence from first block
+              if (referenceSeq === undefined) {
+                referenceSeq = sequence
+              }
+
+              // Parse organism and chromosome once
+              const dotIndex = organismChr.indexOf('.')
+              const org = organismChr.slice(0, Math.max(0, dotIndex))
+              const chr = organismChr.slice(Math.max(0, dotIndex + 1))
+
+              // Create alignment record directly
+              alignments[org] = {
+                chr,
+                start: +parts[2]!,
+                srcSize: +parts[3]!,
+                strand: parts[4] === '+' ? 1 : -1,
+                unknown: +parts[5]!,
+                seq: sequence,
+              }
+
+              sequenceIndex++
             }
           }
+
           observer.next(
             new SimpleFeature({
               id: feature.id(),
               data: {
                 start: feature.get('start'),
                 end: feature.get('end'),
                 refName: feature.get('refName'),
-                seq: alns[0],
-                alignments: alignments,
+                seq: referenceSeq,
+                alignments,
               },
             }),
           )

src/LinearMafDisplay/components/MAFTooltip.tsx

@@ -2,55 +2,36 @@ import React from 'react'
 
 import { SanitizedHTML } from '@jbrowse/core/ui'
 import BaseTooltip from '@jbrowse/core/ui/BaseTooltip'
-import {
-  getBpDisplayStr,
-  getContainingView,
-  toLocale,
-} from '@jbrowse/core/util'
+import { getContainingView } from '@jbrowse/core/util'
 import { observer } from 'mobx-react'
 
+import { generateTooltipContent } from '../util'
+
 import type { LinearMafDisplayModel } from '../stateModel'
+import type { HoveredInfo } from '../util'
 import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
 
-interface MAFTooltipProps {
+const MAFTooltip = observer(function ({
+  model,
+  mouseX,
+  origMouseX,
+}: {
   mouseY: number
   mouseX: number
   rowHeight: number
   sources: Record<string, any>[]
   model: LinearMafDisplayModel
   origMouseX?: number
-}
-
-const MAFTooltip = observer(function ({
-  model,
-  mouseY,
-  mouseX,
-  origMouseX,
-  rowHeight,
-  sources,
-}: MAFTooltipProps) {
+}) {
+  const { hoveredInfo } = model
   const view = getContainingView(model) as LinearGenomeViewModel
-  const ret = Object.entries(sources[Math.floor(mouseY / rowHeight)] || {})
-    .filter(([key]) => key !== 'color' && key !== 'id')
-    .map(([key, value]) => `${key}:${value}`)
-    .join('\n')
   const p1 = origMouseX ? view.pxToBp(origMouseX) : undefined
   const p2 = view.pxToBp(mouseX)
-  return ret ? (
+
+  return hoveredInfo ? (
     <BaseTooltip>
       <SanitizedHTML
-        html={[
-          ret,
-          ...(p1
-            ? [
-                `Start: ${p1.refName}:${toLocale(p1.coord)}`,
-                `End: ${p2.refName}:${toLocale(p2.coord)}`,
-                `Length: ${getBpDisplayStr(Math.abs(p1.coord - p2.coord))}`,
-              ]
-            : [`${p2.refName}:${toLocale(p2.coord)}`]),
-        ]
-          .filter(f => !!f)
-          .join('<br/>')}
+        html={generateTooltipContent(hoveredInfo as HoveredInfo, p1, p2)}
       />
     </BaseTooltip>
   ) : null

src/LinearMafDisplay/stateModel.ts

@@ -85,6 +85,10 @@ export default function stateModelFactory(
       }),
     )
     .volatile(() => ({
+      /**
+       * #volatile
+       */
+      hoveredInfo: undefined as Record<string, unknown> | undefined,
       /**
        * #volatile
        */
@@ -99,6 +103,12 @@ export default function stateModelFactory(
       volatileTree: undefined as any,
     }))
     .actions(self => ({
+      /**
+       * #action
+       */
+      setHoveredInfo(arg?: Record<string, unknown>) {
+        self.hoveredInfo = arg
+      },
       /**
        * #action
        */

src/LinearMafDisplay/util.ts

@@ -1,8 +1,65 @@
+import { getBpDisplayStr, toLocale } from '@jbrowse/core/util'
 import { max } from 'd3-array'
 
 import type { NodeWithIds } from './types'
 import type { HierarchyNode } from 'd3-hierarchy'
 
+export interface HoveredInfo {
+  sampleId: string
+  pos: number
+  base: string
+  chr: string
+  [key: string]: unknown // Allow additional properties for compatibility
+}
+
+export interface GenomicPosition {
+  refName: string
+  coord: number
+}
+
+/**
+ * Generates tooltip HTML content for MAF alignments
+ * Truncates long sequences to 50 characters, with ellipses added if display exceeds 20 characters
+ * @param hoveredInfo - Information about the hovered base/position
+ * @param p1 - Start position (for range selections)
+ * @param p2 - End position (current mouse position)
+ * @returns HTML string for tooltip content
+ */
+export function generateTooltipContent(
+  hoveredInfo: HoveredInfo | undefined,
+  p1: GenomicPosition | undefined,
+  p2: GenomicPosition,
+): string {
+  const contentLines: string[] = []
+
+  if (p1) {
+    // Range selection mode
+    contentLines.push(
+      `Start: ${p1.refName}:${toLocale(p1.coord)}`,
+      `End: ${p2.refName}:${toLocale(p2.coord)}`,
+      `Length: ${getBpDisplayStr(Math.abs(p1.coord - p2.coord))}`,
+    )
+  } else {
+    // Single position mode
+    contentLines.push(`Ref: ${p2.refName}:${toLocale(p2.coord)}`)
+
+    if (hoveredInfo) {
+      const { base, sampleId, pos, chr } = hoveredInfo
+      const thresh = 20
+      const len = base.length
+      const lengthSuffix = len > 1 ? ` ${len}bp` : ''
+      const baseDisplay =
+        base.length > thresh ? base.slice(0, thresh) + '...' : base
+
+      contentLines.push(
+        `Alt ${sampleId}: ${chr}:${pos.toLocaleString('en-US')} (${baseDisplay}${lengthSuffix})`,
+      )
+    }
+  }
+
+  return contentLines.filter(line => !!line).join('<br/>')
+}
+
 // basically same as maxLength from https://observablehq.com/@d3/tree-of-life
 export function maxLength(d: HierarchyNode<NodeWithIds>): number {
   return (

src/LinearMafRenderer/LinearMafRenderer.ts

@@ -48,14 +48,13 @@ export default class LinearMafRenderer extends FeatureRendererType {
     const features = await this.getFeatures(renderProps)
     const res = await updateStatus('Rendering alignment', statusCallback, () =>
       renderToAbstractCanvas(width, height, renderProps, ctx => {
-        makeImageData({
+        return makeImageData({
           ctx,
           renderArgs: {
             ...renderProps,
             features,
           },
         })
-        return undefined
       }),
     )
     const results = await super.render({

src/LinearMafRenderer/components/ReactComponent.tsx

@@ -1,13 +1,81 @@
-import React from 'react'
+import React, { useMemo, useRef } from 'react'
 
 import { PrerenderedCanvas } from '@jbrowse/core/ui'
 import { observer } from 'mobx-react'
+import RBush from 'rbush'
 
+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
 }) {
-  return <PrerenderedCanvas {...props} />
+  const { displayModel, height, rbush } = props
+  const ref = useRef<HTMLDivElement>(null)
+  const rbush2 = useMemo(() => new RBush<RBushData>().fromJSON(rbush), [rbush])
+
+  function getFeatureUnderMouse(eventClientX: number, eventClientY: number) {
+    let offsetX = 0
+    let offsetY = 0
+    if (ref.current) {
+      const r = ref.current.getBoundingClientRect()
+      offsetX = eventClientX - r.left
+      offsetY = eventClientY - r.top - (displayModel?.scrollTop || 0)
+    }
+
+    const x = rbush2.search({
+      minX: offsetX,
+      maxX: offsetX + 1,
+      minY: offsetY,
+      maxY: offsetY + 1,
+    })
+    if (x.length) {
+      // prioritize insertions
+      const { minX, minY, maxX, maxY, ...rest } =
+        x.find(f => f.isInsertion) || x[0]!
+      return rest
+    } else {
+      return undefined
+    }
+  }
+  return (
+    <div
+      ref={ref}
+      onMouseMove={e =>
+        displayModel.setHoveredInfo?.(
+          getFeatureUnderMouse(e.clientX, e.clientY),
+        )
+      }
+      onMouseLeave={() => {
+        displayModel.setHoveredInfo?.(undefined)
+      }}
+      onMouseOut={() => {
+        displayModel.setHoveredInfo?.(undefined)
+      }}
+      style={{
+        overflow: 'visible',
+        position: 'relative',
+        height,
+      }}
+    >
+      <PrerenderedCanvas
+        {...props}
+        style={{
+          position: 'absolute',
+          left: 0,
+        }}
+      />
+    </div>
+  )
 })
 
 export default LinearMafRendering

src/LinearMafRenderer/components/util.ts

@@ -0,0 +1,13 @@
+export function minElt<T>(arr: Iterable<T>, cb: (arg: T) => number) {
+  let min = Infinity
+  let minElement: T | undefined
+  for (const entry of arr) {
+    const val = cb(entry)
+
+    if (val < min) {
+      min = val
+      minElement = entry
+    }
+  }
+  return minElement
+}