jbrowse-plugin-mafviewer 1.3.1 → 1.4.0

package/dist/util/fastaUtils.js.map

@@ -1 +1 @@
-{"version":3,"file":"fastaUtils.js","sourceRoot":"","sources":["../../src/util/fastaUtils.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"fastaUtils.js","sourceRoot":"","sources":["../../src/util/fastaUtils.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.1",
+  "version": "1.4.0",
   "license": "MIT",
   "name": "jbrowse-plugin-mafviewer",
   "keywords": [
@@ -45,7 +45,7 @@
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-react": "^7.20.3",
     "eslint-plugin-react-hooks": "^5.1.0",
-    "eslint-plugin-unicorn": "^59.0.1",
+    "eslint-plugin-unicorn": "^60.0.0",
     "mobx": "^6.0.0",
     "mobx-react": "^9.0.1",
     "mobx-state-tree": "^5.4.1",
@@ -68,6 +68,7 @@
     "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"
   }

package/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,39 +71,57 @@ 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(),
@@ -108,8 +129,8 @@ export default class BigMafAdapter extends BaseFeatureDataAdapter {
                 start: feature.get('start'),
                 end: feature.get('end'),
                 refName: feature.get('refName'),
-                seq: alns[0],
-                alignments: alignments,
+                seq: referenceSeq,
+                alignments,
               },
             }),
           )

package/src/LinearMafDisplay/components/Crosshairs.tsx

@@ -35,13 +35,7 @@ const Crosshairs = ({
         top: scrollTop,
       }}
     >
-      <line
-        x1={0}
-        x2={width}
-        y1={mouseY - scrollTop}
-        y2={mouseY - scrollTop}
-        stroke="black"
-      />
+      <line x1={0} x2={width} y1={mouseY} y2={mouseY} stroke="black" />
       <line x1={mouseX} x2={mouseX} y1={0} y2={height} stroke="black" />
     </svg>
   )

package/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

package/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
        */

package/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 (

package/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({

package/src/LinearMafRenderer/components/LinearMafRendering.tsx

@@ -0,0 +1,76 @@
+import React, { useMemo, useRef } from 'react'
+
+import { PrerenderedCanvas } from '@jbrowse/core/ui'
+import Flatbush from 'flatbush'
+import { observer } from 'mobx-react'
+import { RenderedBase } from '../rendering'
+import { Sample } from '../../LinearMafDisplay/types'
+
+type SerializedRBush = any
+
+const LinearMafRendering = observer(function (props: {
+  width: number
+  height: number
+  displayModel: any
+  flatbush: SerializedRBush
+  items: RenderedBase[]
+  samples: Sample[]
+}) {
+  const { items, displayModel, height, samples, flatbush } = props
+  const ref = useRef<HTMLDivElement>(null)
+  const rbush2 = useMemo(() => Flatbush.from(flatbush), [flatbush])
+
+  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
+    }
+
+    const x = rbush2.search(offsetX, offsetY, offsetX + 1, offsetY + 1)
+    if (x.length) {
+      const elt = x.findIndex(idx => items[idx]?.isInsertion)
+      const r = elt !== -1 ? items[elt]! : items[x[0]!]!
+      const s = samples[r.sampleId]
+      return {
+        ...r,
+        sampleId: s?.label || s?.id || 'unknown',
+      }
+    } 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

package/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
+}

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) {