react-msaview 5.9.0 → 6.0.0

package/src/modelFilehandleLoaders.test.ts

@@ -0,0 +1,137 @@
+// The reactive filehandle loaders in afterCreate: each fetches when its
+// filehandle changes, and each guards against a stale response, since a user can
+// pick a second file while the first is still downloading.
+import { beforeEach, expect, test, vi } from 'vitest'
+
+import MSAModelF from './model.ts'
+
+import type * as FetchUtils from './fetchUtils.ts'
+
+// uri -> settle functions for the fetch that autorun kicked off
+const inFlight = new Map<
+  string,
+  { resolve: (text: string) => void; reject: (e: unknown) => void }
+>()
+
+vi.mock('@jbrowse/core/util/io', () => ({
+  openLocation: (loc: { uri: string }) => loc,
+}))
+
+vi.mock('./fetchUtils.ts', async importOriginal => ({
+  ...(await importOriginal<typeof FetchUtils>()),
+  fetchTextWithProgress: (loc: { uri: string }) =>
+    new Promise<string>((resolve, reject) => {
+      inFlight.set(loc.uri, { resolve, reject })
+    }),
+}))
+
+function uri(u: string) {
+  return { locationType: 'UriLocation' as const, uri: u }
+}
+
+function fasta(seq: string) {
+  return `>seq1\n${seq}`
+}
+
+// let the awaited fetch and the actions that follow it run
+function flush() {
+  return new Promise(resolve => setTimeout(resolve, 0))
+}
+
+function makeModel() {
+  const model = MSAModelF().create({ type: 'MsaView' })
+  model.setWidth(800)
+  return model
+}
+
+beforeEach(() => {
+  inFlight.clear()
+})
+
+test('an msa filehandle loads into the model and clears its loading flag', async () => {
+  const model = makeModel()
+  model.setMSAFilehandle(uri('aln.fa'))
+  expect(model.loadingMSA).toBe(true)
+
+  inFlight.get('aln.fa')!.resolve(fasta('ACDE'))
+  await flush()
+
+  expect(model.data.msa).toBe(fasta('ACDE'))
+  expect(model.loadingMSA).toBe(false)
+})
+
+test('a slower earlier fetch never clobbers a newer one', async () => {
+  const model = makeModel()
+  model.setMSAFilehandle(uri('first.fa'))
+  model.setMSAFilehandle(uri('second.fa'))
+
+  // the newer fetch finishes first, then the abandoned one comes back
+  inFlight.get('second.fa')!.resolve(fasta('SECOND'))
+  await flush()
+  inFlight.get('first.fa')!.resolve(fasta('FIRST'))
+  await flush()
+
+  expect(model.data.msa).toBe(fasta('SECOND'))
+  expect(model.loadingMSA).toBe(false)
+})
+
+test('a stale failure does not raise an error over live data', async () => {
+  const model = makeModel()
+  model.setMSAFilehandle(uri('first.fa'))
+  model.setMSAFilehandle(uri('second.fa'))
+
+  inFlight.get('second.fa')!.resolve(fasta('SECOND'))
+  await flush()
+  inFlight.get('first.fa')!.reject(new Error('too slow'))
+  await flush()
+
+  expect(model.error).toBeUndefined()
+  expect(model.data.msa).toBe(fasta('SECOND'))
+})
+
+test('cancelling drops the filehandle so the view returns to the import form', async () => {
+  const model = makeModel()
+  model.setMSAFilehandle(uri('aln.fa'))
+
+  inFlight.get('aln.fa')!.reject(new DOMException('Aborted', 'AbortError'))
+  await flush()
+
+  expect(model.msaFilehandle).toBeUndefined()
+  expect(model.error).toBeUndefined()
+  expect(model.loadingMSA).toBe(false)
+})
+
+test('a failed fetch surfaces as an error', async () => {
+  const model = makeModel()
+  model.setMSAFilehandle(uri('aln.fa'))
+
+  inFlight.get('aln.fa')!.reject(new Error('404'))
+  await flush()
+
+  expect(model.error).toBeInstanceOf(Error)
+  expect(model.loadingMSA).toBe(false)
+})
+
+test('tree, treeMetadata and gff filehandles each load into their own field', async () => {
+  const model = MSAModelF().create({
+    type: 'MsaView',
+    treeFilehandle: uri('tree.nh'),
+    treeMetadataFilehandle: uri('meta.json'),
+    gffFilehandle: uri('domains.gff'),
+  })
+  model.setWidth(800)
+
+  inFlight.get('tree.nh')!.resolve('(a,b);')
+  inFlight.get('meta.json')!.resolve('{"a":{"genome":"human"}}')
+  inFlight
+    .get('domains.gff')!
+    .resolve(
+      '##gff-version 3\na\tPfam\tprotein_match\t1\t2\t.\t.\t.\tName=PF00069',
+    )
+  await flush()
+
+  expect(model.data.tree).toBe('(a,b);')
+  expect(model.treeMetadata.a?.genome).toBe('human')
+  expect(model.actuallyShowDomains).toBe(true)
+  expect(model.loadingTree).toBe(false)
+})

package/src/neighborJoining.test.ts

@@ -149,4 +149,16 @@ describe('calculateNeighborJoiningTree', () => {
     expect(tree).toContain('similar2')
     expect(tree).toContain('different')
   })
+
+  test('handles ragged rows, treating a short row as gapped past its end', () => {
+    const rows: [string, string][] = [
+      ['full', 'MKAAYLSMFGKED'],
+      ['short', 'MKAAYL'],
+      ['other', 'WWWWWWWWWWWWW'],
+    ]
+    const tree = calculateNeighborJoiningTree(rows)
+
+    expect(tree).toMatch(/;$/)
+    expect(tree).toContain('short')
+  })
 })

package/src/neighborJoining.ts

@@ -53,18 +53,18 @@ function isGap(c: string) {
 }
 
 function computePairwiseDistance(seq1: string, seq2: string) {
-  if (seq1.length !== seq2.length) {
-    throw new Error('Sequences must have the same length (aligned)')
-  }
-
-  let matches = 0
-  let mismatches = 0
+  // ragged input is real -- a3m and hand-edited fasta both produce rows shorter
+  // than the alignment -- so a row that stops early counts as gapped for the
+  // remainder, the same rule the model's `blanks` getter applies. Requiring
+  // equal lengths here instead made "build tree from MSA" throw on those files.
+  const len = Math.max(seq1.length, seq2.length)
+  let compared = 0
   let totalScore = 0
   let maxPossibleScore = 0
 
-  for (let i = 0; i < seq1.length; i++) {
-    const a = seq1[i]!
-    const b = seq2[i]!
+  for (let i = 0; i < len; i++) {
+    const a = seq1[i] ?? '-'
+    const b = seq2[i] ?? '-'
 
     const aGap = isGap(a)
     const bGap = isGap(b)
@@ -72,24 +72,16 @@ function computePairwiseDistance(seq1: string, seq2: string) {
       continue
     }
 
+    compared++
     if (aGap || bGap) {
-      mismatches++
       continue
     }
 
-    const score = getBlosum62Score(a, b)
-    totalScore += score
+    totalScore += getBlosum62Score(a, b)
     maxPossibleScore += Math.max(getBlosum62Score(a, a), getBlosum62Score(b, b))
-
-    if (a.toUpperCase() === b.toUpperCase()) {
-      matches++
-    } else {
-      mismatches++
-    }
   }
 
-  const total = matches + mismatches
-  if (total === 0) {
+  if (compared === 0) {
     return 1
   }
 

package/src/parseAsn1.ts

@@ -32,28 +32,38 @@ const remap: Record<string, string> = {
   'leaf-count': 'leafCount',
 }
 
+// index just past the '}' closing the '{' at openIdx, or -1 when it never
+// closes. Braces nest (a node holds features, which hold values), so finding the
+// end of a block means counting depth rather than taking the next '}'.
+function afterMatchingBrace(str: string, openIdx: number) {
+  let depth = 1
+  let pos = openIdx + 1
+  while (pos < str.length && depth > 0) {
+    if (str[pos] === '{') {
+      depth++
+    } else if (str[pos] === '}') {
+      depth--
+    }
+    pos++
+  }
+  return depth === 0 ? pos : -1
+}
+
+// the contents of each top-level {...} block in str, siblings only
 function extractBracedBlocks(str: string): string[] {
   const blocks: string[] = []
   let pos = 0
   while (pos < str.length) {
-    pos = str.indexOf('{', pos)
-    if (pos === -1) {
+    const openIdx = str.indexOf('{', pos)
+    if (openIdx === -1) {
       break
     }
-    let depth = 1
-    const start = pos + 1
-    pos++
-    while (pos < str.length && depth > 0) {
-      if (str[pos] === '{') {
-        depth++
-      } else if (str[pos] === '}') {
-        depth--
-      }
-      pos++
-    }
-    if (depth === 0) {
-      blocks.push(str.slice(start, pos - 1).trim())
+    const end = afterMatchingBrace(str, openIdx)
+    if (end === -1) {
+      break
     }
+    blocks.push(str.slice(openIdx + 1, end - 1).trim())
+    pos = end
   }
   return blocks
 }
@@ -63,17 +73,8 @@ function findBracedContent(str: string, after: number) {
   if (openIdx === -1) {
     return undefined
   }
-  let depth = 1
-  let pos = openIdx + 1
-  while (pos < str.length && depth > 0) {
-    if (str[pos] === '{') {
-      depth++
-    } else if (str[pos] === '}') {
-      depth--
-    }
-    pos++
-  }
-  return depth === 0 ? str.slice(openIdx + 1, pos - 1).trim() : undefined
+  const end = afterMatchingBrace(str, openIdx)
+  return end === -1 ? undefined : str.slice(openIdx + 1, end - 1).trim()
 }
 
 export function parseAsn1(
@@ -163,22 +164,13 @@ function extractSections(asnString: string): Record<string, string> {
       continue
     }
 
-    let depth = 1
-    const start = pos + 1
-    pos++
-    while (pos < content.length && depth > 0) {
-      if (content[pos] === '{') {
-        depth++
-      } else if (content[pos] === '}') {
-        depth--
-      }
-      pos++
-    }
-    if (depth === 0) {
-      sections[name] = content.slice(start, pos - 1).trim()
+    const end = afterMatchingBrace(content, pos)
+    if (end === -1) {
+      break
     }
+    sections[name] = content.slice(pos + 1, end - 1).trim()
 
-    pos = content.indexOf(',', pos)
+    pos = content.indexOf(',', end)
     pos = pos === -1 ? content.length : pos + 1
   }
 

package/src/{renderDomainLegendSvg.test.tsx → renderDomainsSvg.test.tsx}

@@ -1,8 +1,9 @@
 // @vitest-environment jsdom
 //
-// Verifies the domain color-key legend is drawn as a reserved column on the
-// right of the SVG export when domains are shown. Polyfills mirror
-// impgRender.test.tsx (svgcanvas needs DOMMatrix/DOMPoint + a measureText).
+// Verifies the SVG export draws the domain overlay: the boxes themselves across
+// the full alignment width, and the color-key legend as a reserved column on the
+// right. Polyfills mirror impgRender.test.tsx (svgcanvas needs
+// DOMMatrix/DOMPoint + a measureText).
 import { createJBrowseTheme } from '@jbrowse/core/ui/theme'
 import { enableStaticRendering } from 'mobx-react'
 import { beforeAll, expect, test } from 'vitest'
@@ -76,13 +77,17 @@ ACDEFGHIKL
 >seq2
 ACDE-GHIKL`
 
-function makeModel() {
+function makeModel({
+  data = msa,
+  start = 1,
+  end = 5,
+}: { data?: string; start?: number; end?: number } = {}) {
   const model = MSAModelF().create({
-    id: 'domain-legend-test',
+    id: 'domain-svg-test',
     type: 'MsaView',
     height: 400,
     msaFormat: 'fasta',
-    data: { msa },
+    data: { msa: data },
   })
   model.setWidth(800)
   model.setDomains({
@@ -97,7 +102,7 @@ function makeModel() {
               description: 'Protein kinase domain',
             },
           },
-          locations: [{ start: 1, end: 5 }],
+          locations: [{ start, end }],
         },
       ],
     },
@@ -105,18 +110,21 @@ function makeModel() {
   return model
 }
 
-test('domain legend is drawn in the svg export when domains are shown', async () => {
-  const model = makeModel()
-  expect(model.actuallyShowDomains).toBe(true)
-  expect(model.visibleDomainTypes.map(d => d.accession)).toEqual(['PF00069'])
-
-  const svg = await renderToSvg(model, {
+function exportEntire(model: ReturnType<typeof makeModel>) {
+  return renderToSvg(model, {
     theme: createJBrowseTheme(),
     exportType: 'entire',
     includeMinimap: false,
     includeTracks: false,
   })
-  expect(svg).toContain('Kinase')
+}
+
+test('domain legend is drawn in the svg export when domains are shown', async () => {
+  const model = makeModel()
+  expect(model.actuallyShowDomains).toBe(true)
+  expect(model.visibleDomainTypes.map(d => d.accession)).toEqual(['PF00069'])
+
+  expect(await exportEntire(model)).toContain('Kinase')
 })
 
 test('no legend column when domains are hidden', async () => {
@@ -124,11 +132,27 @@ test('no legend column when domains are hidden', async () => {
   model.setShowDomains(false)
   expect(model.actuallyShowDomains).toBe(false)
 
-  const svg = await renderToSvg(model, {
-    theme: createJBrowseTheme(),
-    exportType: 'entire',
-    includeMinimap: false,
-    includeTracks: false,
+  expect(await exportEntire(model)).not.toContain('Kinase')
+})
+
+test('a domain box past the on-screen block size still draws', async () => {
+  // the export renders the alignment in one pass, so the overlay has to be told
+  // how wide that pass is; falling back to the 500px on-screen block size culled
+  // every band to the left edge of a wide alignment
+  const row = 'ACDEFGHIKL'.repeat(20)
+  const model = makeModel({
+    data: `>seq1\n${row}\n>seq2\n${row}`,
+    start: 151,
+    end: 190,
   })
-  expect(svg).not.toContain('Kinase')
+  const band = model.domainBands.get('seq1')![0]!
+  const x = band.startCol * model.colWidth
+  expect(x).toBeGreaterThan(model.blockSize)
+
+  const svg = await exportEntire(model)
+  const fill = model.fillPalette.PF00069!
+  const rects = [...svg.matchAll(/<rect[^>]*>/g)].map(m => m[0])
+  expect(
+    rects.some(r => r.includes(`fill="${fill}"`) && r.includes(`x="${x}"`)),
+  ).toBe(true)
 })

package/src/renderMinimapSvg.test.tsx

@@ -0,0 +1,109 @@
+// @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 { 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) => ({
+        width: t.length * (Number.parseFloat(font) || 10) * 0.6,
+      }),
+    } as unknown as CanvasRenderingContext2D
+  } as unknown as typeof HTMLCanvasElement.prototype.getContext
+})
+
+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/renderToSvg.tsx

@@ -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
@@ -251,6 +251,9 @@ function CoreRendering({
     ctx: msaCtx,
     offsetX,
     offsetY,
+    // the overlay culls bands to this width; without it the export falls back
+    // to the on-screen 500px block size and drops every band past it
+    blockSizeXOverride: msaAreaWidth,
     blockSizeYOverride: contentHeight,
     highResScaleFactorOverride: 1,
   })

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)
 }
 
 /**