react-msaview 5.9.0 → 5.10.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/renderToSvg.tsx

@@ -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/seqPosToGlobalCol.test.ts

@@ -1,71 +1,59 @@
+// seqPos -> global column, exercised through the model method rather than the
+// buildSeqPosIndex primitive behind it: the method is what
+// jbrowse-plugin-protein3d calls (see the cross-repo note in model.ts), and it
+// owns the past-the-end answers the index alone cannot give.
 import { describe, expect, test } from 'vitest'
 
-import { seqPosToGlobalCol } from './seqPosToGlobalCol.ts'
+import MSAModelF from './model.ts'
+
+function colsOf(row: string, positions: number[]) {
+  const model = MSAModelF().create({
+    type: 'MsaView',
+    data: { msa: `>r\n${row}` },
+  })
+  model.setWidth(800)
+  return positions.map(pos => model.seqPosToGlobalCol('r', pos))
+}
 
 describe('seqPosToGlobalCol', () => {
-  test('converts sequence position to global column with no gaps', () => {
-    const row = 'ATGCATGC'
-    expect(seqPosToGlobalCol({ row, seqPos: 0 })).toBe(0)
-    expect(seqPosToGlobalCol({ row, seqPos: 3 })).toBe(3)
-    expect(seqPosToGlobalCol({ row, seqPos: 7 })).toBe(7)
-    expect(seqPosToGlobalCol({ row, seqPos: 8 })).toBe(8) // Past end
+  test('is the identity when the row has no gaps', () => {
+    // 8 residues, so seqPos 8 is one past the end
+    expect(colsOf('ATGCATGC', [0, 3, 7, 8])).toEqual([0, 3, 7, 8])
   })
 
-  test('converts sequence position to global column with gaps', () => {
-    const row = 'A-TG-CA-TGC'
+  test('skips gap columns', () => {
     // Global: A(0) -(1) T(2) G(3) -(4) C(5) A(6) -(7) T(8) G(9) C(10)
     // SeqPos: A(0)      T(1) G(2)      C(3) A(4)      T(5) G(6) C(7)
-
-    expect(seqPosToGlobalCol({ row, seqPos: 0 })).toBe(0) // A
-    expect(seqPosToGlobalCol({ row, seqPos: 1 })).toBe(2) // T
-    expect(seqPosToGlobalCol({ row, seqPos: 2 })).toBe(3) // G
-    expect(seqPosToGlobalCol({ row, seqPos: 3 })).toBe(5) // C
-    expect(seqPosToGlobalCol({ row, seqPos: 4 })).toBe(6) // A
-    expect(seqPosToGlobalCol({ row, seqPos: 5 })).toBe(8) // T
-    expect(seqPosToGlobalCol({ row, seqPos: 6 })).toBe(9) // G
-    expect(seqPosToGlobalCol({ row, seqPos: 7 })).toBe(10) // C
-    expect(seqPosToGlobalCol({ row, seqPos: 8 })).toBe(11) // Past end
-  })
-
-  test('handles empty row', () => {
-    expect(seqPosToGlobalCol({ row: '', seqPos: 0 })).toBe(0)
+    expect(colsOf('A-TG-CA-TGC', [0, 1, 2, 3, 4, 5, 6, 7, 8])).toEqual([
+      0, 2, 3, 5, 6, 8, 9, 10, 11,
+    ])
   })
 
-  test('handles row with only gaps', () => {
-    const row = '---..--'
-    expect(seqPosToGlobalCol({ row, seqPos: 0 })).toBe(0)
-    expect(seqPosToGlobalCol({ row, seqPos: 1 })).toBe(7) // Past end
-  })
-
-  test('handles mixed gap characters (- and .)', () => {
-    const row = 'A-.G-C.'
+  test('counts both gap characters, - and .', () => {
     // Global: A(0) -(1) .(2) G(3) -(4) C(5) .(6)
     // SeqPos: A(0)           G(1)      C(2)
-
-    expect(seqPosToGlobalCol({ row, seqPos: 0 })).toBe(0) // A
-    expect(seqPosToGlobalCol({ row, seqPos: 1 })).toBe(3) // G
-    expect(seqPosToGlobalCol({ row, seqPos: 2 })).toBe(5) // C
-    expect(seqPosToGlobalCol({ row, seqPos: 3 })).toBe(7) // Past end
+    expect(colsOf('A-.G-C.', [0, 1, 2, 3])).toEqual([0, 3, 5, 7])
   })
 
-  test('handles leading gaps', () => {
-    const row = '--ACG'
-    // Global: -(0) -(1) A(2) C(3) G(4)
-    // SeqPos:           A(0) C(1) G(2)
+  test('handles leading and trailing gaps', () => {
+    expect(colsOf('--ACG', [0, 1, 2])).toEqual([2, 3, 4])
+    expect(colsOf('ACG--', [0, 1, 2, 3])).toEqual([0, 1, 2, 5])
+  })
 
-    expect(seqPosToGlobalCol({ row, seqPos: 0 })).toBe(2) // A
-    expect(seqPosToGlobalCol({ row, seqPos: 1 })).toBe(3) // C
-    expect(seqPosToGlobalCol({ row, seqPos: 2 })).toBe(4) // G
+  test('an all-gap row reports position 0 at column 0', () => {
+    expect(colsOf('---..--', [0, 1])).toEqual([0, 7])
   })
 
-  test('handles trailing gaps', () => {
-    const row = 'ACG--'
-    // Global: A(0) C(1) G(2) -(3) -(4)
-    // SeqPos: A(0) C(1) G(2)
+  test('an empty row reports column 0', () => {
+    expect(colsOf('', [0])).toEqual([0])
+  })
 
-    expect(seqPosToGlobalCol({ row, seqPos: 0 })).toBe(0) // A
-    expect(seqPosToGlobalCol({ row, seqPos: 1 })).toBe(1) // C
-    expect(seqPosToGlobalCol({ row, seqPos: 2 })).toBe(2) // G
-    expect(seqPosToGlobalCol({ row, seqPos: 3 })).toBe(5) // Past end
+  test('an unknown row reports column 0', () => {
+    const model = MSAModelF().create({
+      type: 'MsaView',
+      data: { msa: '>r\nACGT' },
+    })
+    model.setWidth(800)
+    expect(model.seqPosToGlobalCol('nope', 2)).toBe(0)
   })
 })

package/src/seqPosToGlobalCol.ts

@@ -1,25 +1,14 @@
-import { isBlank } from './util.ts'
-
 /**
- * Convert a sequence position (ungapped, 0-based) to a global column index.
- * This finds the global column that contains the Nth non-gap character.
+ * The global column of every ungapped sequence position in a row, i.e.
+ * index[seqPos] is the column holding the seqPos-th non-gap character.
  *
- * @param row - The row's sequence string (including gaps)
- * @param seqPos - The sequence position (0-based count of non-gap characters)
- * @returns The global column index containing the seqPos-th non-gap character
+ * A row is indexed once and then answers seqPos -> column by lookup, which is
+ * what makes the domain overlay affordable: it resolves one position per feature
+ * per row on every redraw, and scanning the row for each would be quadratic.
  *
  * @example
  * // Row: "A-TG-C" (A at 0, T at 2, G at 3, C at 5)
- * seqPosToGlobalCol({ row: "A-TG-C", seqPos: 0 }) // → 0 (A)
- * seqPosToGlobalCol({ row: "A-TG-C", seqPos: 1 }) // → 2 (T)
- * seqPosToGlobalCol({ row: "A-TG-C", seqPos: 2 }) // → 3 (G)
- * seqPosToGlobalCol({ row: "A-TG-C", seqPos: 3 }) // → 5 (C)
- */
-/**
- * The global column of every ungapped sequence position in a row, i.e.
- * index[seqPos] is the column holding the seqPos-th non-gap character. Amortizes
- * repeated seqPosToGlobalCol lookups (the domain overlay does one per feature
- * per row) into a single pass per row.
+ * buildSeqPosIndex('A-TG-C') // → [0, 2, 3, 5]
  */
 export function buildSeqPosIndex(row: string) {
   const index = new Int32Array(row.length)
@@ -32,27 +21,3 @@ export function buildSeqPosIndex(row: string) {
   }
   return index.subarray(0, n)
 }
-
-export function seqPosToGlobalCol({
-  row,
-  seqPos,
-}: {
-  row: string
-  seqPos: number
-}) {
-  let nonGapCount = 0
-  let globalCol = 0
-  // Find the seqPos-th non-gap character
-  while (globalCol < row.length) {
-    if (!isBlank(row[globalCol])) {
-      if (nonGapCount === seqPos) {
-        return globalCol
-      }
-      nonGapCount++
-    }
-    globalCol++
-  }
-  // If seqPos is 0 and we didn't find any non-gap character, return 0
-  // Otherwise return globalCol (which is row.length at this point)
-  return seqPos === 0 ? 0 : globalCol
-}