react-msaview 6.5.0 → 8.0.0

package/src/components/tree/renderTreeCanvas.test.ts

@@ -1,296 +0,0 @@
-import { describe, expect, it } from 'vitest'
-
-import { calcDepthToLeaf, findMaxBranchLen } from '../../hierarchy.ts'
-import stateModelFactory from '../../model.ts'
-import { ClickMapIndex } from './clickMap.ts'
-import { getNodeX, renderTreeCanvas } from './renderTreeCanvas.ts'
-
-import type { HierarchyNode } from '../../hierarchy.ts'
-import type { RenderCtx } from '../renderCtx.ts'
-import type { Theme } from '@mui/material'
-
-function leaf(id: string, len?: number): HierarchyNode {
-  return {
-    data: { id, name: id, children: [] },
-    children: null,
-    parent: null,
-    depth: 0,
-    height: 0,
-    len,
-  }
-}
-
-function internal(
-  id: string,
-  children: HierarchyNode[],
-  len?: number,
-): HierarchyNode {
-  const node: HierarchyNode = {
-    data: { id, name: id, children: children.map(c => c.data) },
-    children,
-    parent: null,
-    depth: 0,
-    height: 1,
-    len,
-  }
-  for (const child of children) {
-    child.parent = node
-  }
-  return node
-}
-
-describe('calcDepthToLeaf', () => {
-  it('is 0 for a leaf', () => {
-    expect(calcDepthToLeaf(leaf('a'))).toBe(0)
-  })
-
-  it('counts steps to the deepest tip', () => {
-    const tips = [leaf('a'), leaf('b')]
-    const intermediate = internal('int', tips)
-    const root = internal('root', [intermediate])
-
-    expect(calcDepthToLeaf(tips[0]!)).toBe(0)
-    expect(calcDepthToLeaf(intermediate)).toBe(1)
-    expect(calcDepthToLeaf(root)).toBe(2)
-  })
-
-  it('memoizes without re-walking the subtree', () => {
-    // the renderer asks for every node's depth on every pass, so the memo has to
-    // short-circuit the traversal itself, not just the arithmetic. A sentinel
-    // planted on an already-computed child must survive a second root call.
-    const child = leaf('a')
-    const root = internal('root', [child])
-    expect(calcDepthToLeaf(root)).toBe(1)
-
-    child.depthToLeaf = 99
-    expect(calcDepthToLeaf(root)).toBe(1)
-    expect(child.depthToLeaf).toBe(99)
-  })
-})
-
-describe('findMaxBranchLen', () => {
-  it('uses the node itself when it is a leaf', () => {
-    expect(findMaxBranchLen(leaf('a', 1.5))).toBe(1.5)
-  })
-
-  it('takes the max across descendants', () => {
-    expect(
-      findMaxBranchLen(internal('p', [leaf('a', 0.5), leaf('b', 1.5)], 0.3)),
-    ).toBe(1.5)
-  })
-
-  it('treats a missing len as 0', () => {
-    expect(findMaxBranchLen(leaf('a'))).toBe(0)
-  })
-})
-
-describe('getNodeX cladogram positioning', () => {
-  it('aligns every tip at the rightmost x', () => {
-    const tips = [leaf('a'), leaf('b')]
-    calcDepthToLeaf(internal('root', tips))
-
-    const xs = tips.map(tip => getNodeX(tip, false, 100, 1))
-    expect(xs).toEqual([100, 100])
-  })
-
-  it('puts the root at the leftmost x and internal nodes in between', () => {
-    const tips = [leaf('a'), leaf('b')]
-    const intermediate = internal('int', tips)
-    const root = internal('root', [intermediate])
-    calcDepthToLeaf(root)
-
-    const xRoot = getNodeX(root, false, 100, 2)!
-    const xInt = getNodeX(intermediate, false, 100, 2)!
-    const xTip = getNodeX(tips[0]!, false, 100, 2)!
-
-    expect(xRoot).toBe(0)
-    expect(xInt).toBeGreaterThan(xRoot)
-    expect(xTip).toBeGreaterThan(xInt)
-    expect(xTip).toBe(100)
-  })
-
-  it('collapses to the root x when there is no topological depth', () => {
-    expect(getNodeX(leaf('a'), false, 100, 0)).toBe(0)
-  })
-
-  it('uses branch length in phylogram mode', () => {
-    expect(getNodeX(leaf('a', 2.5), true, 100, 1)).toBe(2.5)
-  })
-})
-
-// the x values the tree pass actually strokes, for a model built from newick,
-// alongside the tree width they are expected to span
-function drawnTree(newick: string) {
-  const model = stateModelFactory().create({
-    type: 'MsaView',
-    data: { msa: '>a\nA\n>b\nA\n>c\nA\n>d\nA', tree: newick },
-  })
-  model.setWidth(1000)
-  // labels would need a canvas to measure; the branch geometry is the subject
-  model.setDrawLabels(false)
-  model.setDrawNodeBubbles(false)
-
-  const xs: number[] = []
-  const ctx = {
-    font: '12px sans-serif',
-    beginPath() {},
-    stroke() {},
-    resetTransform() {},
-    scale() {},
-    translate() {},
-    moveTo(x: number) {
-      xs.push(x)
-    },
-    lineTo(x: number) {
-      xs.push(x)
-    },
-  } as unknown as RenderCtx
-
-  renderTreeCanvas({
-    model,
-    ctx,
-    offsetY: 0,
-    theme: { palette: { text: { primary: '#000' } } } as Theme,
-  })
-  return { xs, model }
-}
-
-describe('renderTreeCanvas horizontal extent', () => {
-  it('spreads a cladogram across the tree area when branch lengths are absent', () => {
-    // a lengthless newick forces cladogram mode; scaling it by the (zero) max
-    // branch length would stack every node on x=0 as one vertical line
-    const { xs, model } = drawnTree('((a,b),(c,d));')
-    expect(Math.max(...xs)).toBe(model.treeWidth)
-  })
-
-  it('scales a phylogram by branch length', () => {
-    const { xs, model } = drawnTree('((a:0.1,b:0.2):0.3,(c:0.4,d:0.5):0.6);')
-    expect(Math.max(...xs)).toBeCloseTo(model.treeWidth)
-  })
-
-  // labels off means no label gutter to reserve, so the tips reach the far edge
-  // of the tree area rather than stopping at the default treeWidth
-  it('hands the label gutter to the tree when labels are off', () => {
-    const { model } = drawnTree('((a,b),(c,d));')
-    expect(model.treeWidth).toBe(model.treeAreaWidth - 10 - model.marginLeft)
-  })
-})
-
-describe('node bubble click targets', () => {
-  const bounds = { minX: 0, minY: 0, maxX: 10000, maxY: 10000 }
-
-  // "draw clickable bubbles" only controls the painting; the branches have to
-  // stay clickable with it off
-  function renderWithBubbles(drawNodeBubbles: boolean) {
-    const model = stateModelFactory().create({
-      type: 'MsaView',
-      data: { msa: '>a\nA\n>b\nA\n>c\nA\n>d\nA', tree: '((a,b),(c,d));' },
-    })
-    model.setWidth(1000)
-    model.setDrawLabels(false)
-    model.setDrawNodeBubbles(drawNodeBubbles)
-
-    let arcs = 0
-    const ctx = {
-      font: '12px sans-serif',
-      beginPath() {},
-      stroke() {},
-      fill() {},
-      resetTransform() {},
-      scale() {},
-      translate() {},
-      moveTo() {},
-      lineTo() {},
-      arc() {
-        arcs++
-      },
-    } as unknown as RenderCtx
-
-    const clickMap = new ClickMapIndex()
-    renderTreeCanvas({
-      model,
-      ctx,
-      clickMap,
-      offsetY: 0,
-      theme: { palette: { text: { primary: '#000' } } } as Theme,
-    })
-    return { arcs, hits: clickMap.search(bounds) }
-  }
-
-  it('indexes the internal nodes when the bubbles are drawn', () => {
-    const { arcs, hits } = renderWithBubbles(true)
-    expect(arcs).toBe(3)
-    expect(hits.filter(h => h.branch).length).toBe(3)
-  })
-
-  it('indexes them just the same when the bubbles are off', () => {
-    const { arcs, hits } = renderWithBubbles(false)
-    expect(arcs).toBe(0)
-    expect(hits.filter(h => h.branch).length).toBe(3)
-  })
-})
-
-describe('leaf label click targets', () => {
-  const bounds = { minX: 0, minY: 0, maxX: 10000, maxY: 10000 }
-  // the recorded fillText x is in content coordinates -- the fake ctx applies
-  // the same translate the real one does -- so it is directly comparable to the
-  // clickMap box, which is what the hit test searches
-  function renderLabels(labelsAlignRight: boolean) {
-    const model = stateModelFactory().create({
-      type: 'MsaView',
-      data: { msa: '>a\nA\n>b\nA', tree: '(a,b);' },
-    })
-    model.setWidth(1000)
-    model.setDrawTree(false)
-    model.setLabelsAlignRight(labelsAlignRight)
-
-    let tx = 0
-    const drawn: number[] = []
-    const ctx = {
-      font: '12px sans-serif',
-      measureText: (text: string) => ({ width: text.length * 6 }),
-      beginPath() {},
-      stroke() {},
-      setLineDash() {},
-      resetTransform() {
-        tx = 0
-      },
-      scale() {},
-      translate(x: number) {
-        tx += x
-      },
-      moveTo() {},
-      lineTo() {},
-      fillText(_text: string, x: number) {
-        drawn.push(x + tx)
-      },
-    } as unknown as RenderCtx
-
-    const clickMap = new ClickMapIndex()
-    renderTreeCanvas({
-      model,
-      ctx,
-      clickMap,
-      offsetY: 0,
-      theme: { palette: { text: { primary: '#000' } } } as Theme,
-    })
-    return { drawn, hits: clickMap.search(bounds).filter(h => !h.branch) }
-  }
-
-  it('boxes a right-aligned label at the edge it is drawn against', () => {
-    const { drawn, hits } = renderLabels(true)
-    expect(hits.length).toBe(drawn.length)
-    // textAlign is 'right' here, so the drawn x is the label's right edge
-    for (const hit of hits) {
-      expect(drawn).toContain(hit.maxX)
-    }
-  })
-
-  it('boxes a left-aligned label at the edge it is drawn from', () => {
-    const { drawn, hits } = renderLabels(false)
-    expect(hits.length).toBe(drawn.length)
-    for (const hit of hits) {
-      expect(drawn).toContain(hit.minX)
-    }
-  })
-})

package/src/dataInitialized.test.ts

@@ -1,42 +0,0 @@
-import { getSnapshot } from '@jbrowse/mobx-state-tree'
-import { expect, test } from 'vitest'
-
-import stateModelFactory from './model.ts'
-
-const MsaView = stateModelFactory()
-
-test('an empty model is not initialized', () => {
-  expect(MsaView.create({ type: 'MsaView' }).dataInitialized).toBe(false)
-})
-
-test('inline data initializes the view', () => {
-  const model = MsaView.create({
-    type: 'MsaView',
-    data: { msa: '>a\nACGT\n>b\nACGA\n', tree: '' },
-  })
-  expect(model.dataInitialized).toBe(true)
-})
-
-// DataModel's postProcessSnapshot drops a document over 50kb rather than
-// inlining it into a session or a shared URL, so it comes back `undefined`
-// rather than ''. That has to read as "no data" -- otherwise the restored
-// session renders an empty alignment instead of the import form
-test('a dropped oversize inline msa restores as uninitialized', () => {
-  const msa = `>a\n${'A'.repeat(60_000)}\n>b\n${'C'.repeat(60_000)}\n`
-  const model = MsaView.create({ type: 'MsaView', data: { msa, tree: '' } })
-  expect(model.dataInitialized).toBe(true)
-
-  const restored = MsaView.create(getSnapshot(model))
-  expect(restored.data.msa).toBeUndefined()
-  expect(restored.MSA).toBe(null)
-  expect(restored.dataInitialized).toBe(false)
-})
-
-test('an error keeps the view uninitialized', () => {
-  const model = MsaView.create({
-    type: 'MsaView',
-    data: { msa: '>a\nACGT\n', tree: '' },
-  })
-  model.setError(new Error('boom'))
-  expect(model.dataInitialized).toBe(false)
-})

package/src/domainBands.test.ts

@@ -1,122 +0,0 @@
-// @vitest-environment jsdom
-// The domain overlay resolves each annotation to the visible column span it is
-// drawn across once, on the model, instead of converting sequence positions
-// inside every canvas block. These tests pin that span (including across hidden
-// gappy columns) and the hit-test built on top of it.
-import { expect, test } from 'vitest'
-
-import MSAModelF from './model.ts'
-
-// row `b` has a 4-residue insertion relative to `a`, which becomes a run of
-// mostly-gap columns that gap hiding can remove
-const msa = `>a
-MKLV----WYAC
->b
-MKLVQQQQWYAC`
-
-const gff = `##gff-version 3
-a	Pfam	protein_match	1	4	.	.	.	Name=PF00001;signature_desc=First
-a	Pfam	protein_match	5	8	.	.	.	Name=PF00002;signature_desc=Second`
-
-// row `b` only: PF00003 ends inside the insertion, PF00004 lies entirely within
-// it, so gap hiding puts one end and then both ends into hidden columns
-const insertionGff = `##gff-version 3
-b	Pfam	protein_match	4	8	.	.	.	Name=PF00003;signature_desc=Overlapping
-b	Pfam	protein_match	5	8	.	.	.	Name=PF00004;signature_desc=Inside`
-
-function makeModel() {
-  const model = MSAModelF().create({
-    id: 'domain-bands-test',
-    type: 'MsaView',
-    msaFormat: 'fasta',
-    height: 400,
-    data: { msa },
-  })
-  model.setWidth(800)
-  model.applyGFFText(gff)
-  return model
-}
-
-test('bands span the columns their residues occupy', () => {
-  const model = makeModel()
-  const bands = model.domainBands.get('a')!
-  expect(
-    bands.map(b => [b.annotation.accession, b.startCol, b.endCol]),
-  ).toEqual([
-    ['PF00001', 0, 4],
-    ['PF00002', 8, 12],
-  ])
-})
-
-test('bands follow the columns when gappy columns are hidden', () => {
-  const model = makeModel()
-  model.setHideGaps(true)
-  model.setAllowedGappyness(50)
-  // the 4 insertion columns are gaps in half the rows, so they are hidden and
-  // everything to their right shifts left by 4
-  expect(model.blanks).toEqual([4, 5, 6, 7])
-  const bands = model.domainBands.get('a')!
-  expect(bands.map(b => [b.startCol, b.endCol])).toEqual([
-    [0, 4],
-    [4, 8],
-  ])
-})
-
-test('a band whose end lands in a hidden column keeps its visible part', () => {
-  const model = makeModel()
-  model.applyGFFText(insertionGff)
-  expect(model.domainBands.get('b')!.map(b => [b.startCol, b.endCol])).toEqual([
-    [3, 8],
-    [4, 8],
-  ])
-
-  model.setHideGaps(true)
-  model.setAllowedGappyness(50)
-  expect(model.blanks).toEqual([4, 5, 6, 7])
-  // PF00003 covers V + the 4 hidden Qs, so only the V column survives; PF00004
-  // is nothing but hidden columns and drops out entirely
-  expect(model.domainBands.get('b')!.map(b => [b.startCol, b.endCol])).toEqual([
-    [3, 4],
-  ])
-})
-
-test('mouseOverDomains hit-tests against the drawn span', () => {
-  const model = makeModel()
-  const rowIndex = model.rowNames.indexOf('a')
-
-  model.setMousePos(0, rowIndex)
-  expect(model.mouseOverDomains.map(d => d.accession)).toEqual(['PF00001'])
-
-  // the columns between the two domains are the insertion gap: no domain there
-  model.setMousePos(5, rowIndex)
-  expect(model.mouseOverDomains).toEqual([])
-
-  model.setMousePos(8, rowIndex)
-  expect(model.mouseOverDomains.map(d => d.accession)).toEqual(['PF00002'])
-
-  // end column is exclusive
-  model.setMousePos(12, rowIndex)
-  expect(model.mouseOverDomains).toEqual([])
-
-  // the other row has no annotations of its own
-  model.setMousePos(0, model.rowNames.indexOf('b'))
-  expect(model.mouseOverDomains).toEqual([])
-})
-
-test('filtering a domain off removes its band', () => {
-  const model = makeModel()
-  model.setFilter('PF00001', false)
-  expect(model.domainBands.get('a')!.map(b => b.annotation.accession)).toEqual([
-    'PF00002',
-  ])
-})
-
-test('highlighted columns collapse into contiguous runs', () => {
-  const model = makeModel()
-  model.setHighlightedColumns([5, 1, 2, 3, 9])
-  expect(model.highlightedColumnRuns).toEqual([
-    { start: 1, end: 3 },
-    { start: 5, end: 5 },
-    { start: 9, end: 9 },
-  ])
-})

package/src/domainLetterColor.test.ts

@@ -1,80 +0,0 @@
-// @vitest-environment jsdom
-//
-// Letters drawn on top of the domain overlay take their color from the box
-// underneath them. The overlay paints bands largest-first, so with nested
-// signatures -- routine in InterProScan output, where a family encloses a
-// domain -- the box actually visible at a column is the *last* one painted,
-// not the first one covering it.
-import { expect, test } from 'vitest'
-
-import { domainBandCursor } from './components/msa/domainBandCursor.ts'
-import MSAModelF from './model.ts'
-
-const row = 'ACDEFGHIKLMNPQRSTVWY'
-const msa = `>seq1\n${row}\n>seq2\n${row}`
-
-// PF_OUTER spans the whole row, PF_INNER sits inside it. tidyInterProAnnotations
-// orders by length descending, so the outer band paints first and the inner one
-// covers it.
-const gff = `##gff-version 3
-seq1\tPfam\tprotein_match\t1\t20\t.\t.\t.\tName=PF_OUTER;signature_desc=Outer
-seq1\tPfam\tprotein_match\t8\t12\t.\t.\t.\tName=PF_INNER;signature_desc=Inner`
-
-function makeModel() {
-  const model = MSAModelF().create({
-    type: 'MsaView',
-    msaFormat: 'fasta',
-    data: { msa },
-  })
-  model.setWidth(800)
-  model.applyGFFText(gff)
-  return model
-}
-
-function sweep(model: ReturnType<typeof makeModel>, from = 0) {
-  const bandAt = domainBandCursor(model.domainBandsByStart.get('seq1'))
-  const out: (string | undefined)[] = []
-  for (let col = from; col < 20; col++) {
-    out.push(bandAt(col)?.annotation.accession)
-  }
-  return out
-}
-
-test('the overlay paints largest-first, so stackIndex is paint order', () => {
-  const bands = makeModel().domainBands.get('seq1')!
-  expect(bands.map(b => [b.annotation.accession, b.stackIndex])).toEqual([
-    ['PF_OUTER', 0],
-    ['PF_INNER', 1],
-  ])
-})
-
-test('a nested band wins the columns it covers', () => {
-  const model = makeModel()
-  // PF_INNER is seq positions 8-12 (1-based), i.e. columns 7..11
-  expect(sweep(model)).toEqual([
-    ...Array.from({ length: 7 }, () => 'PF_OUTER'),
-    ...Array.from({ length: 5 }, () => 'PF_INNER'),
-    ...Array.from({ length: 8 }, () => 'PF_OUTER'),
-  ])
-})
-
-test('a sweep starting mid-block picks up bands opened before it', () => {
-  // canvas blocks start at arbitrary columns, so the cursor has to catch up on
-  // its first call rather than assuming it began at column 0
-  const model = makeModel()
-  expect(sweep(model, 9)).toEqual([
-    'PF_INNER',
-    'PF_INNER',
-    'PF_INNER',
-    ...Array.from({ length: 8 }, () => 'PF_OUTER'),
-  ])
-})
-
-test('columns outside every band have no covering band', () => {
-  const model = makeModel()
-  model.setFilter('PF_OUTER', false)
-  const bandAt = domainBandCursor(model.domainBandsByStart.get('seq1'))
-  expect(bandAt(0)).toBeUndefined()
-  expect(bandAt(9)?.annotation.accession).toBe('PF_INNER')
-  expect(bandAt(19)).toBeUndefined()
-})

package/src/exportFileName.test.ts

@@ -1,40 +0,0 @@
-import { expect, test } from 'vitest'
-
-import { exportFileName } from './exportFileName.ts'
-
-test('takes the alignment file name and swaps the extension', () => {
-  expect(
-    exportFileName(
-      {
-        uri: 'https://example.org/data/PF00069.stock?dl=1',
-        locationType: 'UriLocation',
-      },
-      'svg',
-    ),
-  ).toBe('PF00069.svg')
-  expect(
-    exportFileName(
-      {
-        localPath: 'C:\\aligns\\hemoglobin.fa',
-        locationType: 'LocalPathLocation',
-      },
-      'svg',
-    ),
-  ).toBe('hemoglobin.svg')
-  expect(
-    exportFileName(
-      { blobId: 'b1', name: 'pasted.aln', locationType: 'BlobLocation' },
-      'svg',
-    ),
-  ).toBe('pasted.svg')
-})
-
-test('falls back to a plain name without a file', () => {
-  expect(exportFileName(undefined, 'svg')).toBe('image.svg')
-  expect(
-    exportFileName(
-      { uri: 'https://example.org/', locationType: 'UriLocation' },
-      'svg',
-    ),
-  ).toBe('image.svg')
-})

package/src/fetchUtils.test.ts

@@ -1,83 +0,0 @@
-import { openLocation } from '@jbrowse/core/util/io'
-import { describe, expect, test } from 'vitest'
-
-import { fetchTextWithProgress, isAbortError } from './fetchUtils.ts'
-
-import type { FetchStatus } from './fetchUtils.ts'
-
-const loc = openLocation({
-  uri: 'http://example.com/data.fa',
-  locationType: 'UriLocation',
-})
-
-describe('fetchTextWithProgress', () => {
-  test('reports progress messages then clears status', async () => {
-    const statuses: (FetchStatus | undefined)[] = []
-    const result = await fetchTextWithProgress(
-      loc,
-      s => statuses.push(s),
-      async (_loc, opts) => {
-        opts.statusCallback('Downloading file')
-        opts.statusCallback('')
-        return 'GREETINGS'
-      },
-    )
-    expect(result).toBe('GREETINGS')
-    expect(statuses.map(s => s?.msg)).toEqual([
-      'Downloading file',
-      undefined,
-      undefined,
-    ])
-  })
-
-  test('reports the message from a determinate progress status', async () => {
-    const statuses: (FetchStatus | undefined)[] = []
-    await fetchTextWithProgress(
-      loc,
-      s => statuses.push(s),
-      async (_loc, opts) => {
-        opts.statusCallback({
-          message: 'Downloading file',
-          current: 5,
-          total: 10,
-        })
-        return 'GREETINGS'
-      },
-    )
-    expect(statuses[0]?.msg).toBe('Downloading file')
-  })
-
-  test('clears status even when the fetch throws', async () => {
-    const statuses: (FetchStatus | undefined)[] = []
-    await expect(
-      fetchTextWithProgress(
-        loc,
-        s => statuses.push(s),
-        async () => {
-          throw new Error('network down')
-        },
-      ),
-    ).rejects.toThrow('network down')
-    expect(statuses.at(-1)).toBeUndefined()
-  })
-
-  test('onCancel aborts the underlying request', async () => {
-    const statuses: (FetchStatus | undefined)[] = []
-    const promise = fetchTextWithProgress(
-      loc,
-      s => statuses.push(s),
-      (_loc, opts) =>
-        new Promise<string>((_resolve, reject) => {
-          opts.statusCallback('Downloading file')
-          opts.signal.addEventListener('abort', () => {
-            reject(new DOMException('Aborted', 'AbortError'))
-          })
-        }),
-    )
-
-    statuses.find(s => s?.onCancel)?.onCancel?.()
-
-    await expect(promise).rejects.toSatisfy(isAbortError)
-    expect(statuses.at(-1)).toBeUndefined()
-  })
-})