react-msaview 5.10.0 → 6.1.0

package/src/neighborJoining.ts

@@ -31,25 +31,43 @@ const BLOSUM62_DATA = [
   [-4,-4,-4,-4,-4,-4,-4,-4,-4,-4,-4,-4,-4,-4,-4,-4,-4,-4,-4,-4,-4,-4,-4, 1],
 ]
 
-const BLOSUM62 = new Map<string, Map<string, number>>()
-for (let i = 0; i < BLOSUM62_KEYS.length; i++) {
-  const row = new Map<string, number>()
-  for (let j = 0; j < BLOSUM62_KEYS.length; j++) {
-    row.set(BLOSUM62_KEYS[j]!, BLOSUM62_DATA[i]![j]!)
-  }
-  BLOSUM62.set(BLOSUM62_KEYS[i]!, row)
+const NUM_SYMBOLS = BLOSUM62_KEYS.length
+const BLOSUM62 = Int8Array.from(BLOSUM62_DATA.flat())
+
+// charCode -> row/column in BLOSUM62, -1 for anything the matrix does not name.
+// A flat table rather than a Map of Maps keyed by an upper-cased character, for
+// the reason columnCounts.ts gives: the distance matrix is O(rows^2 * columns)
+// lookups, and on a 120x800 alignment the Map form spent nearly all of its time
+// allocating one-character strings in toUpperCase: 2.6s to build a tree, versus
+// 0.34s here for a byte-identical newick.
+const symbolOfCode = new Int8Array(128).fill(-1)
+for (let i = 0; i < NUM_SYMBOLS; i++) {
+  const key = BLOSUM62_KEYS[i]!
+  symbolOfCode[key.charCodeAt(0)] = i
+  symbolOfCode[key.toLowerCase().charCodeAt(0)] = i
 }
 
-function getBlosum62Score(a: string, b: string) {
-  return BLOSUM62.get(a.toUpperCase())?.get(b.toUpperCase()) ?? -4
-}
+// gap, or past the end of a row shorter than the alignment
+const GAP = -2
 
 // stockholm and a3m write gaps as '.', not just '-'. Scoring a '.' as a residue
 // charges the pair the unknown-symbol penalty on every padded column, so two
 // sequences that differ only in where an unrelated row forced padding come out
 // as divergent.
-function isGap(c: string) {
-  return c === '-' || c === '.'
+function symbolAt(seq: string, i: number) {
+  if (i >= seq.length) {
+    return GAP
+  }
+  const code = seq.charCodeAt(i)
+  // bit trick: (code - 45) >>> 0 <= 1 checks for '-' (45) or '.' (46)
+  if ((code - 45) >>> 0 <= 1) {
+    return GAP
+  }
+  return code < 128 ? symbolOfCode[code]! : -1
+}
+
+function blosumScore(a: number, b: number) {
+  return a < 0 || b < 0 ? -4 : BLOSUM62[a * NUM_SYMBOLS + b]!
 }
 
 function computePairwiseDistance(seq1: string, seq2: string) {
@@ -63,11 +81,11 @@ function computePairwiseDistance(seq1: string, seq2: string) {
   let maxPossibleScore = 0
 
   for (let i = 0; i < len; i++) {
-    const a = seq1[i] ?? '-'
-    const b = seq2[i] ?? '-'
+    const a = symbolAt(seq1, i)
+    const b = symbolAt(seq2, i)
 
-    const aGap = isGap(a)
-    const bGap = isGap(b)
+    const aGap = a === GAP
+    const bGap = b === GAP
     if (aGap && bGap) {
       continue
     }
@@ -77,8 +95,8 @@ function computePairwiseDistance(seq1: string, seq2: string) {
       continue
     }
 
-    totalScore += getBlosum62Score(a, b)
-    maxPossibleScore += Math.max(getBlosum62Score(a, a), getBlosum62Score(b, b))
+    totalScore += blosumScore(a, b)
+    maxPossibleScore += Math.max(blosumScore(a, a), blosumScore(b, b))
   }
 
   if (compared === 0) {

package/src/renderDomainsSvg.test.tsx

@@ -9,67 +9,12 @@ import { enableStaticRendering } from 'mobx-react'
 import { beforeAll, expect, test } from 'vitest'
 
 import MSAModelF from './model.ts'
+import { installRenderTestEnv } from './renderTestEnv.ts'
 import { renderToSvg } from './renderToSvg.tsx'
 
-class Mat {
-  constructor(
-    public a = 1,
-    public b = 0,
-    public c = 0,
-    public d = 1,
-    public e = 0,
-    public f = 0,
-  ) {}
-  multiply(o: Mat) {
-    return new Mat(
-      this.a * o.a + this.c * o.b,
-      this.b * o.a + this.d * o.b,
-      this.a * o.c + this.c * o.d,
-      this.b * o.c + this.d * o.d,
-      this.a * o.e + this.c * o.f + this.e,
-      this.b * o.e + this.d * o.f + this.f,
-    )
-  }
-  translate(x: number, y = 0) {
-    return this.multiply(new Mat(1, 0, 0, 1, x, y))
-  }
-  scale(x: number, y = x) {
-    return this.multiply(new Mat(x, 0, 0, y, 0, 0))
-  }
-}
-class Pt {
-  constructor(
-    public x = 0,
-    public y = 0,
-  ) {}
-  matrixTransform(m: Mat) {
-    return new Pt(
-      m.a * this.x + m.c * this.y + m.e,
-      m.b * this.x + m.d * this.y + m.f,
-    )
-  }
-}
-
 beforeAll(() => {
   enableStaticRendering(true)
-  const g = globalThis as Record<string, unknown>
-  g.DOMMatrix = Mat
-  g.DOMPoint = Pt
-  HTMLCanvasElement.prototype.getContext = function () {
-    let font = '10px sans-serif'
-    return {
-      get font() {
-        return font
-      },
-      set font(v: string) {
-        font = v
-      },
-      measureText(t: string) {
-        const size = Number.parseFloat(font) || 10
-        return { width: t.length * size * 0.6 } as TextMetrics
-      },
-    } as unknown as CanvasRenderingContext2D
-  } as unknown as typeof HTMLCanvasElement.prototype.getContext
+  installRenderTestEnv()
 })
 
 const msa = `>seq1

package/src/renderMinimapSvg.test.tsx

@@ -0,0 +1,55 @@
+// @vitest-environment jsdom
+//
+// The viewport export draws a minimap by default, and nothing covered it. The
+// export lays the figure out on its own grid rather than the on-screen one, so
+// the minimap has to be told how wide to draw -- reading a width off the model
+// puts its trapezoid short of the alignment column beside it.
+import { createJBrowseTheme } from '@jbrowse/core/ui/theme'
+import { enableStaticRendering } from 'mobx-react'
+import { beforeAll, expect, test } from 'vitest'
+
+import MSAModelF from './model.ts'
+import { installRenderTestEnv } from './renderTestEnv.ts'
+import { renderToSvg } from './renderToSvg.tsx'
+
+beforeAll(() => {
+  enableStaticRendering(true)
+  installRenderTestEnv()
+})
+
+const width = 1000
+
+function makeModel() {
+  const row = 'ACDEFGHIKL'.repeat(40)
+  const model = MSAModelF().create({
+    type: 'MsaView',
+    msaFormat: 'fasta',
+    height: 300,
+    data: { msa: `>seq1\n${row}\n>seq2\n${row}` },
+  })
+  model.setWidth(width)
+  return model
+}
+
+test('the exported minimap spans the exported alignment column', async () => {
+  const model = makeModel()
+  expect(model.showHorizontalScrollbar).toBe(true)
+
+  const svg = await renderToSvg(model, {
+    theme: createJBrowseTheme(),
+    exportType: 'viewport',
+    includeMinimap: true,
+    includeTracks: false,
+  })
+
+  // the minimap column runs from the tree area to the right edge of the figure
+  const minimapWidth = width - model.treeAreaWidth
+  const polygon = /<polygon[^>]*points="([^"]*)"/.exec(svg)?.[1]
+  expect(polygon).toBeDefined()
+  // bottom edge of the trapezoid reaches the full width it was given
+  expect(polygon!.endsWith(`${minimapWidth},${model.minimapHeight - 12}`)).toBe(
+    true,
+  )
+  // and the bar outline is drawn to the same width
+  expect(svg).toContain(`width="${minimapWidth}"`)
+})

package/src/renderSequenceLogoSvg.test.tsx

@@ -0,0 +1,176 @@
+// @vitest-environment jsdom
+//
+// The logo track is the first track kind whose letters are drawn under a
+// per-letter transform rather than at a fixed size, so it is also the first that
+// can silently draw nothing if the export context loses that transform. These
+// tests go through the real SVG export to pin the whole path: the track is off
+// until asked for, the stack is ordered and scaled, and the glyphs land inside
+// the track's own band.
+import { createJBrowseTheme } from '@jbrowse/core/ui/theme'
+import { enableStaticRendering } from 'mobx-react'
+import { beforeAll, expect, test } from 'vitest'
+
+import MSAModelF from './model.ts'
+import { TEST_CHAR_WIDTH_RATIO, installRenderTestEnv } from './renderTestEnv.ts'
+import { renderToSvg } from './renderToSvg.tsx'
+
+beforeAll(() => {
+  enableStaticRendering(true)
+  installRenderTestEnv()
+})
+
+// column 0 is fully conserved A, column 1 is a 3:1 split of C over G, and
+// column 2 is an even four-way split carrying no information at all
+const msa = `>s1\nACA\n>s2\nACC\n>s3\nACG\n>s4\nAGT\n`
+const colWidth = 40
+
+function makeModel() {
+  const model = MSAModelF().create({
+    type: 'MsaView',
+    msaFormat: 'fasta',
+    height: 400,
+    colWidth,
+    data: { msa },
+  })
+  model.setWidth(1000)
+  return model
+}
+
+async function exportSvg(model: ReturnType<typeof makeModel>) {
+  return renderToSvg(model, {
+    theme: createJBrowseTheme(),
+    exportType: 'entire',
+    includeTracks: true,
+  })
+}
+
+// The logo's glyphs are the only <text> drawn at the track's own font size, and
+// the only ones carrying a non-unit vertical scale, which is what separates them
+// from the alignment letters and tree labels in the same document.
+function logoGlyphs(svg: string, fontSize: number) {
+  return [
+    ...svg.matchAll(
+      /<text[^>]*font-size="([\d.]+)px"[^>]*transform="matrix\(([^)]*)\)"[^>]*>([A-Z])<\/text>/g,
+    ),
+  ]
+    .filter(m => Number(m[1]) === fontSize)
+    .map(m => {
+      const [sx, , , sy, tx, ty] = m[2]!.split(/[\s,]+/).map(Number)
+      return { letter: m[3]!, sx: sx!, sy: sy!, x: tx!, y: ty! }
+    })
+}
+
+async function glyphsOf(model: ReturnType<typeof makeModel>) {
+  return logoGlyphs(await exportSvg(model), model.sequenceLogoTrackHeight)
+}
+
+test('the logo track is hidden until it is asked for', () => {
+  const model = makeModel()
+  expect(model.tracks.map(t => t.model.id)).toContain('sequence-logo')
+  expect(model.turnedOnTracks.map(t => t.model.id)).not.toContain(
+    'sequence-logo',
+  )
+  // and being default-off writes nothing into the shareable snapshot
+  expect(model.turnedOffTracks.size).toBe(0)
+})
+
+test('toggling it on shows it, and off again hides it', () => {
+  const model = makeModel()
+  model.toggleTrack('sequence-logo')
+  expect(model.turnedOnTracks.map(t => t.model.id)).toContain('sequence-logo')
+  model.toggleTrack('sequence-logo')
+  expect(model.turnedOnTracks.map(t => t.model.id)).not.toContain(
+    'sequence-logo',
+  )
+})
+
+test('an on-by-default track still toggles off and back on', () => {
+  const model = makeModel()
+  expect(model.turnedOnTracks.map(t => t.model.id)).toContain('conservation')
+  model.toggleTrack('conservation')
+  expect(model.turnedOnTracks.map(t => t.model.id)).not.toContain(
+    'conservation',
+  )
+  model.toggleTrack('conservation')
+  expect(model.turnedOnTracks.map(t => t.model.id)).toContain('conservation')
+})
+
+test('the conserved column draws one full-height letter', async () => {
+  const model = makeModel()
+  model.toggleTrack('sequence-logo')
+  const col0 = (await glyphsOf(model)).filter(g => g.x === 0)
+
+  expect(col0.map(g => g.letter)).toEqual(['A'])
+  // a fully conserved nucleotide column is 2 of 2 bits, so the glyph stretches
+  // to the whole track height over the cap height of the reference font
+  expect(col0[0]!.sy).toBeCloseTo(1 / 0.72, 5)
+})
+
+test('a split column stacks the minor letter below the major one', async () => {
+  const model = makeModel()
+  model.toggleTrack('sequence-logo')
+  const col1 = (await glyphsOf(model)).filter(g => g.x === colWidth)
+
+  // ascending order means C (3 of 4) is drawn last, so it ends up on top
+  expect(col1.map(g => g.letter)).toEqual(['G', 'C'])
+  const [g, c] = col1
+  expect(c!.sy).toBeGreaterThan(g!.sy)
+  // and the taller letter sits higher up the track (smaller y is nearer the top)
+  expect(c!.y).toBeLessThan(g!.y)
+})
+
+test('the uninformative column draws nothing', async () => {
+  const model = makeModel()
+  model.toggleTrack('sequence-logo')
+  const glyphs = await glyphsOf(model)
+  expect(glyphs.filter(g => g.x === colWidth * 2)).toEqual([])
+  // the other two columns did draw, so an empty column 2 is the logo's own
+  // verdict rather than the whole track missing
+  expect(glyphs).toHaveLength(3)
+})
+
+test('every glyph stays inside the track band', async () => {
+  const model = makeModel()
+  model.toggleTrack('sequence-logo')
+
+  // the export stacks the tracks, so the logo's band is offset by whatever is
+  // drawn above it -- assert against that band rather than against 0..height,
+  // which would pass only while the logo happened to be the first track
+  const above = model.turnedOnTracks
+    .slice(
+      0,
+      model.turnedOnTracks.findIndex(t => t.model.id === 'sequence-logo'),
+    )
+    .reduce((a, t) => a + t.model.height, 0)
+  const bandTop = above
+  const bandBottom = above + model.sequenceLogoTrackHeight
+
+  const glyphs = await glyphsOf(model)
+  expect(glyphs.length).toBeGreaterThan(0)
+  for (const glyph of glyphs) {
+    // baselines run from the band's bottom edge upward, never past either end
+    expect(glyph.y).toBeGreaterThan(bandTop)
+    expect(glyph.y).toBeLessThanOrEqual(bandBottom)
+  }
+})
+
+test('letters are stretched to fill their column', async () => {
+  const model = makeModel()
+  model.toggleTrack('sequence-logo')
+  const glyphs = await glyphsOf(model)
+
+  const expected =
+    colWidth / (model.sequenceLogoTrackHeight * TEST_CHAR_WIDTH_RATIO)
+  for (const glyph of glyphs) {
+    expect(glyph.sx).toBeCloseTo(expected, 5)
+  }
+})
+
+test('the logo appears in the export only when the track is on', async () => {
+  const off = makeModel()
+  expect(await glyphsOf(off)).toEqual([])
+
+  const on = makeModel()
+  on.toggleTrack('sequence-logo')
+  expect((await glyphsOf(on)).length).toBeGreaterThan(0)
+})

package/src/renderTestEnv.ts

@@ -0,0 +1,96 @@
+/**
+ * jsdom shims for the SVG-export tests. Test-only -- nothing in the viewer
+ * imports this.
+ *
+ * jsdom implements neither DOMMatrix nor a canvas 2D context, and
+ * `@jbrowse/svgcanvas` needs both: it tracks the current transform as a real
+ * matrix, and the renderers ask a throwaway canvas to measure text.
+ *
+ * The matrix stub has to accept the ARRAY constructor. svgcanvas normalizes
+ * every transform through `new DOMMatrix([a, b, c, d, e, f])`, so a stub that
+ * only takes six positional arguments silently binds the whole array to `a` and
+ * leaves the rest undefined -- every emitted transform then carries `NaN` in its
+ * x components, which no assertion on a drawn x-position can survive.
+ */
+export class TestDOMMatrix {
+  a: number
+  b: number
+  c: number
+  d: number
+  e: number
+  f: number
+
+  constructor(init?: number[]) {
+    const [a = 1, b = 0, c = 0, d = 1, e = 0, f = 0] = init ?? []
+    this.a = a
+    this.b = b
+    this.c = c
+    this.d = d
+    this.e = e
+    this.f = f
+  }
+
+  multiply(o: TestDOMMatrix) {
+    return new TestDOMMatrix([
+      this.a * o.a + this.c * o.b,
+      this.b * o.a + this.d * o.b,
+      this.a * o.c + this.c * o.d,
+      this.b * o.c + this.d * o.d,
+      this.a * o.e + this.c * o.f + this.e,
+      this.b * o.e + this.d * o.f + this.f,
+    ])
+  }
+
+  translate(x: number, y = 0) {
+    return this.multiply(new TestDOMMatrix([1, 0, 0, 1, x, y]))
+  }
+
+  scale(x: number, y = x) {
+    return this.multiply(new TestDOMMatrix([x, 0, 0, y, 0, 0]))
+  }
+}
+
+export class TestDOMPoint {
+  constructor(
+    public x = 0,
+    public y = 0,
+  ) {}
+
+  matrixTransform(m: TestDOMMatrix) {
+    return new TestDOMPoint(
+      m.a * this.x + m.c * this.y + m.e,
+      m.b * this.x + m.d * this.y + m.f,
+    )
+  }
+}
+
+/**
+ * Install the shims. Call from `beforeAll` in any test that exports SVG.
+ *
+ * `measureText` reports 0.6em per character, close enough to a real sans-serif
+ * average for layout assertions and, more usefully, exactly predictable: a test
+ * can compute the width a renderer will see rather than hardcoding a number
+ * measured from one machine's fonts.
+ */
+export function installRenderTestEnv() {
+  const g = globalThis as Record<string, unknown>
+  g.DOMMatrix = TestDOMMatrix
+  g.DOMPoint = TestDOMPoint
+  HTMLCanvasElement.prototype.getContext = function () {
+    let font = '10px sans-serif'
+    return {
+      get font() {
+        return font
+      },
+      set font(v: string) {
+        font = v
+      },
+      measureText: (t: string) => ({
+        width: t.length * (Number.parseFloat(font) || 10) * 0.6,
+      }),
+    } as unknown as CanvasRenderingContext2D
+  } as unknown as typeof HTMLCanvasElement.prototype.getContext
+}
+
+/** the per-character width factor `measureText` above reports */
+export const TEST_CHAR_WIDTH_RATIO = 0.6

package/src/renderToSvg.tsx

@@ -7,7 +7,7 @@ import { when } from 'mobx'
 import MinimapSVG from './components/minimap/MinimapSVG.tsx'
 import { renderBoxFeatureCanvasBlock } from './components/msa/renderBoxFeatureCanvasBlock.ts'
 import { renderMSABlock } from './components/msa/renderMSABlock.ts'
-import { renderAllTracks } from './components/tracks/renderTracksSvg.ts'
+import { renderAllTracks } from './components/tracks/drawTracks.ts'
 import { renderTreeCanvas } from './components/tree/renderTreeCanvas.ts'
 import { colorContrast } from './util.ts'
 
@@ -161,7 +161,7 @@ function MsaSvg({
       {includeMinimap ? (
         <>
           <g transform={`translate(${treeAreaWidth} 0)`}>
-            <MinimapSVG model={model} />
+            <MinimapSVG model={model} width={width - treeAreaWidth} />
           </g>
           <g transform={`translate(0 ${minimapHeight})`}>{body}</g>
         </>
@@ -178,7 +178,7 @@ function MsaSvg({
 }
 
 // the domain color key drawn as a reserved column to the right of the
-// alignment, mirroring the on-screen DomainLegend overlay
+// alignment, mirroring the on-screen AnnotationLegend overlay
 function LegendSVG({ model, width }: { model: MsaViewModel; width: number }) {
   const { visibleDomainTypes, fillPalette, strokePalette } = model
   const boxHeight = LEGEND_PAD * 2 + visibleDomainTypes.length * LEGEND_ROW_H

package/src/rowCoordinateCalculations.ts

@@ -18,6 +18,25 @@ import { isBlank } from './util.ts'
  *    Each row can have different seqPos values for the same globalCol due to gaps.
  */
 
+/**
+ * Index of the first element in `[0, len)` for which `pred` holds, over a range
+ * where `pred` is false up to some point and true from there on. Both
+ * conversions below are that shape, since `blanks` is sorted ascending.
+ */
+function partitionPoint(len: number, pred: (i: number) => boolean) {
+  let left = 0
+  let right = len
+  while (left < right) {
+    const mid = (left + right) >>> 1
+    if (pred(mid)) {
+      right = mid
+    } else {
+      left = mid + 1
+    }
+  }
+  return left
+}
+
 /**
  * Convert a visible column index to a global column index.
  * This is used when translating mouse/screen coordinates to MSA coordinates.
@@ -27,32 +46,12 @@ import { isBlank } from './util.ts'
  * @returns The corresponding global column index in the full MSA
  */
 export function visibleColToGlobalCol(blanks: number[], visibleCol: number) {
-  let currentVisibleCol = 0
-  let blankArrayIndex = 0
-  let globalCol = 0
-  const blanksLen = blanks.length
-
-  // Skip any leading blank columns (blanks at the very beginning)
-  while (blankArrayIndex < blanksLen && blanks[blankArrayIndex] === globalCol) {
-    blankArrayIndex++
-    globalCol++
-  }
-
-  while (currentVisibleCol < visibleCol) {
-    currentVisibleCol++
-    globalCol++
-
-    // Skip any blank columns after incrementing
-    while (
-      blankArrayIndex < blanksLen &&
-      blanks[blankArrayIndex] === globalCol
-    ) {
-      blankArrayIndex++
-      globalCol++
-    }
-  }
-
-  return globalCol
+  // `blanks[i] - i` counts the visible columns before the i-th blank, so the
+  // first blank with more than visibleCol of them in front of it is the first
+  // one sitting past this column. Its index is how many blanks shift it right.
+  return (
+    visibleCol + partitionPoint(blanks.length, i => blanks[i]! - i > visibleCol)
+  )
 }
 
 /**
@@ -67,25 +66,30 @@ export function globalColToVisibleCol(
   blanks: number[],
   globalCol: number,
 ): number | undefined {
-  // Check if this column is hidden
-  // Use binary search since blanks is sorted
-  let left = 0
-  let right = blanks.length - 1
-  while (left <= right) {
-    const mid = Math.floor((left + right) / 2)
-    if (blanks[mid] === globalCol) {
-      return undefined // Column is hidden
-    }
-    if (blanks[mid]! < globalCol) {
-      left = mid + 1
-    } else {
-      right = mid - 1
-    }
-  }
+  const blanksBefore = countBlanksBefore(blanks, globalCol)
+  return blanks[blanksBefore] === globalCol
+    ? undefined // Column is hidden
+    : globalCol - blanksBefore
+}
 
-  // Count blanks before this column (left is now the insertion point)
-  const blanksBefore = left
-  return globalCol - blanksBefore
+function countBlanksBefore(blanks: number[], globalCol: number) {
+  return partitionPoint(blanks.length, i => blanks[i]! >= globalCol)
+}
+
+/**
+ * How many visible columns come before a global column. For a visible column
+ * that is its own visible index; for a hidden one it is the index of the next
+ * visible column, i.e. where the hidden column collapses to.
+ *
+ * That total answer is what spans want: resolving both ends of a span through
+ * globalColToVisibleCol instead loses the whole span whenever either end lands
+ * in a hidden column.
+ *
+ * @param blanks - Sorted array of global column indices that are hidden
+ * @param globalCol - The global column index in the full MSA
+ */
+export function visibleColsBefore(blanks: number[], globalCol: number) {
+  return globalCol - countBlanksBefore(blanks, globalCol)
 }
 
 /**