react-msaview 5.6.0 → 5.6.2

package/src/columnCounts.test.ts

@@ -0,0 +1,58 @@
+import { describe, expect, test } from 'vitest'
+
+import {
+  columnCountsFromColumns,
+  columnCountsFromRows,
+  letterOfResidueSlot,
+} from './columnCounts.ts'
+
+describe('columnCounts', () => {
+  test('tallies residues and gaps per column', () => {
+    const counts = columnCountsFromRows(['AC-', 'AG.', 'AC-'])
+    expect(counts.numColumns).toBe(3)
+    expect(counts.count(0, 'A')).toBe(3)
+    expect(counts.count(1, 'C')).toBe(2)
+    expect(counts.count(1, 'G')).toBe(1)
+    expect(counts.total(2)).toBe(3)
+    expect(counts.gapCount(2)).toBe(3)
+    expect(counts.gapCount(0)).toBe(0)
+  })
+
+  test('counts both gap characters, and neither as a residue', () => {
+    const counts = columnCountsFromColumns(['-.A'])
+    expect(counts.count(0, '-')).toBe(1)
+    expect(counts.count(0, '.')).toBe(1)
+    expect(counts.gapCount(0)).toBe(2)
+    expect(counts.residueEntries(0)).toEqual([['A', 1]])
+    expect(counts.lettersPresent).toEqual(new Set(['A']))
+  })
+
+  test('folds case, so lowercase (a3m insertions) counts as its residue', () => {
+    const counts = columnCountsFromColumns(['aA'])
+    expect(counts.count(0, 'A')).toBe(2)
+  })
+
+  test('digits and punctuation do not land on letter slots', () => {
+    // a plain `code & 31` would fold '0' onto 'P' and '!' onto 'A'
+    const counts = columnCountsFromColumns(['0!'])
+    expect(counts.count(0, 'P')).toBe(0)
+    expect(counts.count(0, 'A')).toBe(0)
+    expect(counts.residueEntries(0)).toEqual([['?', 2]])
+  })
+
+  test('ragged rows: the widest row sets the column count', () => {
+    const counts = columnCountsFromRows(['AAAA', 'AA'])
+    expect(counts.numColumns).toBe(4)
+    expect(counts.total(0)).toBe(2)
+    expect(counts.total(3)).toBe(1)
+  })
+
+  test('residue slots round-trip to their letters', () => {
+    const counts = columnCountsFromColumns(['WY'])
+    const slots: number[] = []
+    counts.forEachResidue(0, slot => {
+      slots.push(slot)
+    })
+    expect(slots.map(letterOfResidueSlot)).toEqual(['W', 'Y'])
+  })
+})

package/src/columnCounts.ts

@@ -0,0 +1,170 @@
+// Per-column residue counts for an alignment, stored as a flat typed array
+// instead of one `Record<string, number>` per column. Column statistics are the
+// hottest computation in the viewer (they feed conservation, ClustalX coloring,
+// consensus and the hover tooltip), and the object-per-column form spent all of
+// its time on megamorphic string-keyed property increments: 1000x5000 residues
+// took ~1.6s to tally that way versus ~35ms here.
+//
+// Each column owns a fixed stride of counter slots. Slots 1-26 are A-Z (case
+// folded), plus a slot each for the two gap characters, '*', and anything else.
+
+const SLOTS = 32
+const DASH = 27
+const DOT = 28
+const STAR = 29
+const OTHER = 30
+
+const A = 'A'.charCodeAt(0)
+const Z = 'Z'.charCodeAt(0)
+const a = 'a'.charCodeAt(0)
+const z = 'z'.charCodeAt(0)
+
+// charCode -> slot. A plain `code & 31` would fold digits and punctuation onto
+// letter slots ('0' onto 'P'), so the mapping is an explicit table.
+const slotOfCode = new Uint8Array(128).fill(OTHER)
+for (let c = A; c <= Z; c++) {
+  slotOfCode[c] = c - A + 1
+}
+for (let c = a; c <= z; c++) {
+  slotOfCode[c] = c - a + 1
+}
+slotOfCode['-'.charCodeAt(0)] = DASH
+slotOfCode['.'.charCodeAt(0)] = DOT
+slotOfCode['*'.charCodeAt(0)] = STAR
+
+const letterOfSlot = Array.from({ length: SLOTS }, (_, slot) =>
+  slot >= 1 && slot <= 26 ? String.fromCharCode(A + slot - 1) : '',
+)
+letterOfSlot[DASH] = '-'
+letterOfSlot[DOT] = '.'
+letterOfSlot[STAR] = '*'
+letterOfSlot[OTHER] = '?'
+
+function slotOf(code: number) {
+  return code < 128 ? slotOfCode[code]! : OTHER
+}
+
+export function isGapSlot(slot: number) {
+  return slot === DASH || slot === DOT
+}
+
+export class ColumnCounts {
+  readonly numColumns: number
+  private readonly counts: Uint32Array
+  // per-column residue+gap totals
+  readonly totals: Uint32Array
+  // whole-alignment totals per slot, so "which letters appear anywhere" is a
+  // 32-slot scan rather than a walk over every column
+  private readonly slotTotals = new Uint32Array(SLOTS)
+
+  constructor(numColumns: number) {
+    this.numColumns = numColumns
+    this.counts = new Uint32Array(numColumns * SLOTS)
+    this.totals = new Uint32Array(numColumns)
+  }
+
+  addRow(row: string) {
+    const { counts, totals, slotTotals } = this
+    const n = Math.min(row.length, this.numColumns)
+    for (let col = 0; col < n; col++) {
+      const slot = slotOf(row.charCodeAt(col))
+      counts[col * SLOTS + slot]!++
+      totals[col]!++
+      slotTotals[slot]!++
+    }
+  }
+
+  add(col: number, letter: string) {
+    const slot = slotOf(letter.charCodeAt(0))
+    this.counts[col * SLOTS + slot]!++
+    this.totals[col]!++
+    this.slotTotals[slot]!++
+  }
+
+  total(col: number) {
+    return this.totals[col] ?? 0
+  }
+
+  count(col: number, letter: string) {
+    return this.counts[col * SLOTS + slotOf(letter.charCodeAt(0))] ?? 0
+  }
+
+  gapCount(col: number) {
+    const base = col * SLOTS
+    return (this.counts[base + DASH] ?? 0) + (this.counts[base + DOT] ?? 0)
+  }
+
+  /**
+   * Visits every non-gap residue present in a column. Slots with a zero count
+   * are skipped, so this is ~the number of distinct residues, not 32.
+   */
+  forEachResidue(col: number, cb: (slot: number, count: number) => void) {
+    const { counts } = this
+    const base = col * SLOTS
+    for (let slot = 1; slot < SLOTS; slot++) {
+      const count = counts[base + slot]!
+      if (count > 0 && !isGapSlot(slot)) {
+        cb(slot, count)
+      }
+    }
+  }
+
+  /** non-gap [letter, count] pairs for one column, for display */
+  residueEntries(col: number) {
+    const entries: [string, number][] = []
+    this.forEachResidue(col, (slot, count) => {
+      entries.push([letterOfSlot[slot]!, count])
+    })
+    return entries
+  }
+
+  /** the distinct non-gap letters appearing anywhere in the alignment */
+  get lettersPresent() {
+    const letters = new Set<string>()
+    for (let slot = 1; slot < SLOTS; slot++) {
+      if (this.slotTotals[slot]! > 0 && !isGapSlot(slot)) {
+        letters.add(letterOfSlot[slot]!)
+      }
+    }
+    return letters
+  }
+}
+
+export function letterOfResidueSlot(slot: number) {
+  return letterOfSlot[slot]!
+}
+
+export function residueSlotOfLetter(letter: string) {
+  return slotOf(letter.charCodeAt(0))
+}
+
+export const numResidueSlots = SLOTS
+
+/**
+ * Tally counts from alignment rows (gapped sequence strings, one per row). The
+ * column count follows the longest row, matching what a per-column tally of
+ * ragged input produces.
+ */
+export function columnCountsFromRows(rows: string[]) {
+  const numColumns = rows.reduce((max, row) => Math.max(max, row.length), 0)
+  const counts = new ColumnCounts(numColumns)
+  for (const row of rows) {
+    counts.addRow(row)
+  }
+  return counts
+}
+
+/**
+ * Tally counts from column strings (one string per column, listing that
+ * column's residues top to bottom). Convenient for tests and for callers that
+ * already think column-wise.
+ */
+export function columnCountsFromColumns(columns: string[]) {
+  const counts = new ColumnCounts(columns.length)
+  for (const [col, column] of columns.entries()) {
+    for (const letter of column) {
+      counts.add(col, letter)
+    }
+  }
+  return counts
+}

package/src/components/MSAView.tsx

@@ -1,8 +1,7 @@
-import React, { Suspense, useEffect } from 'react'
+import React, { Suspense } from 'react'
 
 import { observer } from 'mobx-react'
 
-import { useDevicePixelRatio } from '../useDevicePixelRatio.ts'
 import {
   HorizontalResizeHandle,
   VerticalResizeHandle,
@@ -130,13 +129,6 @@ const View = observer(function ({ model }: { model: MsaViewModel }) {
 const MSAView = observer(function ({ model }: { model: MsaViewModel }) {
   const { height, viewInitialized, DialogComponent, DialogProps } = model
 
-  // mirror the live device pixel ratio into the model so canvas backing stores
-  // re-scale when the window moves between monitors or the browser zooms
-  const devicePixelRatio = useDevicePixelRatio()
-  useEffect(() => {
-    model.setHighResScaleFactor(devicePixelRatio)
-  }, [model, devicePixelRatio])
-
   return (
     <div>
       {viewInitialized ? (

package/src/components/{msa/getVisibleLeaves.ts → getVisibleLeaves.ts}

@@ -1,4 +1,4 @@
-import type { MsaViewModel } from '../../model.ts'
+import type { MsaViewModel } from '../model.ts'
 
 // The slice of leaves whose rows intersect a block of height blockSizeY at
 // vertical offset offsetY, padded by one row on each side.

package/src/components/msa/MSACanvasBlock.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React from 'react'
 
 import { BaseTooltip } from '@jbrowse/core/ui'
 import { observer } from 'mobx-react'
@@ -6,26 +6,12 @@ import { observer } from 'mobx-react'
 import ColumnStats from './ColumnStats.tsx'
 import { renderBoxFeatureCanvasBlock } from './renderBoxFeatureCanvasBlock.ts'
 import { renderMSABlock } from './renderMSABlock.ts'
+import { useMsaBlockMouse } from './useMsaBlockMouse.ts'
 import { useCanvasAutorun } from '../../useCanvasAutorun.ts'
 import { useColorContrast } from '../../useColorContrast.ts'
 
 import type { MsaViewModel } from '../../model.ts'
 
-function eventToColRow(
-  event: React.MouseEvent,
-  el: HTMLCanvasElement,
-  offsetX: number,
-  offsetY: number,
-  colWidth: number,
-  rowHeight: number,
-) {
-  const { left, top } = el.getBoundingClientRect()
-  return {
-    col: Math.floor((event.clientX - left + offsetX) / colWidth),
-    row: Math.floor((event.clientY - top + offsetY) / rowHeight),
-  }
-}
-
 const MSACanvasBlock = observer(function ({
   model,
   offsetX,
@@ -35,21 +21,19 @@ const MSACanvasBlock = observer(function ({
   offsetX: number
   offsetY: number
 }) {
-  const {
-    colWidth,
-    rowHeight,
-    scrollY,
-    scrollX,
-    colorScheme,
-    blockSize,
-    mouseClickCol,
-    mouseClickRow,
-    highResScaleFactor,
-  } = model
+  const { scrollY, scrollX, colorScheme, blockSize, highResScaleFactor } = model
   const { theme, contrastScheme } = useColorContrast(colorScheme)
+  const { tooltipPoint, onMouseMove, onClick, onMouseLeave } = useMsaBlockMouse(
+    {
+      model,
+      offsetX,
+      offsetY,
+    },
+  )
 
   const ref = useCanvasAutorun(
     ctx => {
+      const { blockSize, highResScaleFactor, actuallyShowDomains } = model
       ctx.resetTransform()
       ctx.clearRect(
         0,
@@ -57,7 +41,7 @@ const MSACanvasBlock = observer(function ({
         blockSize * highResScaleFactor,
         blockSize * highResScaleFactor,
       )
-      if (model.actuallyShowDomains) {
+      if (actuallyShowDomains) {
         renderBoxFeatureCanvasBlock({
           ctx,
           offsetX,
@@ -74,18 +58,9 @@ const MSACanvasBlock = observer(function ({
         model,
       })
     },
-    [
-      model,
-      offsetX,
-      offsetY,
-      theme,
-      blockSize,
-      highResScaleFactor,
-      contrastScheme,
-    ],
+    [model, offsetX, offsetY, theme, contrastScheme],
   )
 
-  const [mousePosition, setMousePosition] = useState<{ x: number; y: number }>()
   const { hoveredInsertion, mouseOverDomains, showColumnStats } = model
 
   return (
@@ -94,58 +69,16 @@ const MSACanvasBlock = observer(function ({
         ref={ref}
         onMouseMove={event => {
           if (ref.current) {
-            const { col, row } = eventToColRow(
-              event,
-              ref.current,
-              offsetX,
-              offsetY,
-              colWidth,
-              rowHeight,
-            )
-            // Only set mouse position if within valid MSA bounds
-            if (
-              col >= 0 &&
-              col < model.numColumns &&
-              row >= 0 &&
-              row < model.numRows
-            ) {
-              model.setMousePos(col, row)
-            } else {
-              model.setMousePos(undefined, undefined)
-            }
-            // only track client coords when there's something to show in the
-            // tooltip: an insertion, a domain under the cursor, or column stats
-            // (when that option is enabled). avoids a re-render on every move
-            // when nothing would be shown
-            const hasTooltip =
-              model.hoveredInsertion ||
-              model.mouseOverDomains.length > 0 ||
-              (model.showColumnStats && !!model.mouseOverColumnStats)
-            setMousePosition(
-              hasTooltip ? { x: event.clientX, y: event.clientY } : undefined,
-            )
+            onMouseMove(event, ref.current)
           }
         }}
         onClick={event => {
           if (ref.current) {
-            const { col, row } = eventToColRow(
-              event,
-              ref.current,
-              offsetX,
-              offsetY,
-              colWidth,
-              rowHeight,
-            )
-            if (col === mouseClickCol && row === mouseClickRow) {
-              model.setMouseClickPos(undefined, undefined)
-            } else {
-              model.setMouseClickPos(col, row)
-            }
+            onClick(event, ref.current)
           }
         }}
         onMouseLeave={() => {
-          model.setMousePos()
-          setMousePosition(undefined)
+          onMouseLeave()
         }}
         width={blockSize * highResScaleFactor}
         height={blockSize * highResScaleFactor}
@@ -157,35 +90,34 @@ const MSACanvasBlock = observer(function ({
           height: blockSize,
         }}
       />
-      {hoveredInsertion && mousePosition ? (
-        <BaseTooltip
-          clientPoint={{ x: mousePosition.x, y: mousePosition.y + 15 }}
-        >
-          Insertion ({hoveredInsertion.letters.length}
-          {model.sequenceType === 'amino' ? 'aa' : 'bp'}):{' '}
-          {hoveredInsertion.letters.length > 20
-            ? `${hoveredInsertion.letters.slice(0, 20)}...`
-            : hoveredInsertion.letters}
-        </BaseTooltip>
-      ) : null}
-      {!hoveredInsertion &&
-      mousePosition &&
-      (mouseOverDomains.length > 0 || showColumnStats) ? (
+      {tooltipPoint ? (
         <BaseTooltip
-          clientPoint={{ x: mousePosition.x, y: mousePosition.y + 15 }}
+          clientPoint={{ x: tooltipPoint.x, y: tooltipPoint.y + 15 }}
         >
-          {mouseOverDomains.map(d => (
-            <div key={`${d.accession}-${d.start}-${d.end}`}>
-              <b>{d.name}</b> ({d.accession}) {d.start}-{d.end}
-              {d.description ? (
-                <>
-                  <br />
-                  {d.description}
-                </>
-              ) : null}
-            </div>
-          ))}
-          {showColumnStats ? <ColumnStats model={model} /> : null}
+          {hoveredInsertion ? (
+            <>
+              Insertion ({hoveredInsertion.letters.length}
+              {model.sequenceType === 'amino' ? 'aa' : 'bp'}):{' '}
+              {hoveredInsertion.letters.length > 20
+                ? `${hoveredInsertion.letters.slice(0, 20)}...`
+                : hoveredInsertion.letters}
+            </>
+          ) : (
+            <>
+              {mouseOverDomains.map(d => (
+                <div key={`${d.accession}-${d.start}-${d.end}`}>
+                  <b>{d.name}</b> ({d.accession}) {d.start}-{d.end}
+                  {d.description ? (
+                    <>
+                      <br />
+                      {d.description}
+                    </>
+                  ) : null}
+                </div>
+              ))}
+              {showColumnStats ? <ColumnStats model={model} /> : null}
+            </>
+          )}
         </BaseTooltip>
       ) : null}
     </>

package/src/components/msa/renderBoxFeatureCanvasBlock.ts

@@ -1,5 +1,5 @@
-import { getVisibleLeaves } from './getVisibleLeaves.ts'
 import { subFeatureRowHeight } from '../../constants.ts'
+import { getVisibleLeaves } from '../getVisibleLeaves.ts'
 
 import type { HierarchyNode } from '../../hierarchy.ts'
 import type { MsaViewModel } from '../../model.ts'
@@ -12,6 +12,7 @@ export function renderBoxFeatureCanvasBlock({
   offsetY,
   ctx,
   highResScaleFactorOverride,
+  blockSizeXOverride,
   blockSizeYOverride,
 }: {
   offsetX: number
@@ -19,22 +20,24 @@ export function renderBoxFeatureCanvasBlock({
   model: MsaViewModel
   ctx: RenderCtx
   highResScaleFactorOverride?: number
+  blockSizeXOverride?: number
   blockSizeYOverride?: number
 }) {
   const { blockSize, rowHeight, highResScaleFactor, showDomains } = model
   if (showDomains) {
     const k = highResScaleFactorOverride ?? highResScaleFactor
+    const bx = blockSizeXOverride ?? blockSize
     const by = blockSizeYOverride ?? blockSize
     ctx.resetTransform()
     ctx.scale(k, k)
     ctx.translate(-offsetX, rowHeight / 2 - offsetY)
 
-    const visibleLeaves = getVisibleLeaves({ model, offsetY, blockSizeY: by })
-
     drawTiles({
       model,
       ctx,
-      visibleLeaves,
+      visibleLeaves: getVisibleLeaves({ model, offsetY, blockSizeY: by }),
+      offsetX,
+      blockWidth: bx,
     })
   }
 }
@@ -43,10 +46,14 @@ function drawTiles({
   model,
   ctx,
   visibleLeaves,
+  offsetX,
+  blockWidth,
 }: {
   model: MsaViewModel
   ctx: RenderCtx
   visibleLeaves: HierarchyNode<NodeWithIdsAndLength>[]
+  offsetX: number
+  blockWidth: number
 }) {
   const {
     subFeatureRows,
@@ -56,31 +63,31 @@ function drawTiles({
     strokePalette,
     segmentLabels,
     showMsaLetters,
-    tidyFilteredGatheredInterProAnnotations,
+    domainBands,
   } = model
   const h = subFeatureRows ? subFeatureRowHeight : rowHeight
   // exon numbers label the bands only when residue letters aren't drawn (zoomed
   // out); when letters show, the alternating shades alone mark the boundaries
   // and a number would collide with the sequence
   const drawSegmentLabels = !showMsaLetters && !subFeatureRows && h >= 9
+  // gene arrow heads stick out one row-height past the band, so pad the cull
+  // window enough that a band just outside the block still draws its head
+  const cull = h + colWidth
+  const xMin = offsetX - cull
+  const xMax = offsetX + blockWidth + cull
 
   for (let i = 0, l1 = visibleLeaves.length; i < l1; i++) {
     const node = visibleLeaves[i]!
-    const { name } = node.data
     const y = node.x!
-    const entry = tidyFilteredGatheredInterProAnnotations[name]
+    const bands = domainBands.get(node.data.name)
 
-    if (entry) {
-      for (let j = 0, l2 = entry.length; j < l2; j++) {
-        const { start, end, accession, strand } = entry[j]!
-        // Convert sequence positions to visible column positions
-        // seqPos is 1-based from InterPro, so subtract 1 for 0-based
-        const m1 = model.seqPosToVisibleCol(name, start - 1)
-        const m2 = model.seqPosToVisibleCol(name, end)
-        if (m1 !== undefined && m2 !== undefined) {
-          const x = m1 * colWidth
-          const t = y - rowHeight + (subFeatureRows ? j * h : 0)
-          const lw = colWidth * (m2 - m1)
+    if (bands) {
+      for (const { annotation, startCol, endCol, stackIndex } of bands) {
+        const { accession, strand } = annotation
+        const x = startCol * colWidth
+        const lw = colWidth * (endCol - startCol)
+        if (x + lw >= xMin && x <= xMax) {
+          const t = y - rowHeight + (subFeatureRows ? stackIndex * h : 0)
           ctx.fillStyle = fillPalette[accession]!
           ctx.strokeStyle = strokePalette[accession]!
           if (strand === undefined) {