react-msaview 6.5.0 → 7.0.0

package/src/components/minimap/minimapLayout.test.ts

@@ -1,71 +0,0 @@
-// @vitest-environment jsdom
-import { expect, test } from 'vitest'
-
-import MSAModelF from '../../model.ts'
-import { MINIMAP_BAR_HEIGHT, getMinimapLayout } from './minimapLayout.ts'
-
-// wide enough to overflow horizontally, tall enough to raise the vertical
-// scrollbar — which takes 20px out of the width the alignment actually draws on
-function makeModel() {
-  const names = Array.from({ length: 60 }, (_, i) => `s${i}`)
-  const model = MSAModelF().create({
-    type: 'MsaView',
-    msaFormat: 'fasta',
-    height: 400,
-    data: { msa: names.map(n => `>${n}\n${'ACGT'.repeat(50)}`).join('\n') },
-  })
-  model.setWidth(1000)
-  return model
-}
-
-test('the viewport rectangle scales by the canvas width, not the msa area', () => {
-  const model = makeModel()
-  expect(model.showVerticalScrollbar).toBe(true)
-  expect(model.msaCanvasWidth).toBe(model.msaAreaWidth - 20)
-
-  const { unit, s, w } = getMinimapLayout(model)
-  expect(unit).toBeCloseTo(model.msaCanvasWidth / model.totalWidth)
-  // unscrolled, the rectangle starts at the left edge and covers the fraction
-  // of the alignment on screen. Sizing it by msaAreaWidth instead overstated
-  // that fraction by the scrollbar's width.
-  expect(s).toBeCloseTo(0)
-  expect(w).toBeCloseTo(
-    (model.msaCanvasWidth / model.totalWidth) * model.msaCanvasWidth,
-  )
-})
-
-test('the rectangle tracks scrollX and the trapezoid spans the bar', () => {
-  const model = makeModel()
-  model.setScrollX(-300)
-
-  const { msaCanvasWidth: width } = model
-  const { s, polygonHeight, polygonPoints } = getMinimapLayout(model)
-  expect(s).toBeCloseTo((300 / model.totalWidth) * width)
-  expect(polygonHeight).toBe(model.minimapHeight - MINIMAP_BAR_HEIGHT)
-  // bottom edge spans the full minimap, top edge is the viewport rectangle
-  expect(
-    polygonPoints.endsWith(`0,${polygonHeight} ${width},${polygonHeight}`),
-  ).toBe(true)
-})
-
-test('an alignment that already fits never overflows the bar', () => {
-  const model = MSAModelF().create({
-    type: 'MsaView',
-    msaFormat: 'fasta',
-    data: { msa: '>a\nACGT\n>b\nACGT' },
-  })
-  model.setWidth(1000)
-  expect(model.totalWidth).toBeLessThan(model.msaCanvasWidth)
-  expect(getMinimapLayout(model).w).toBe(model.msaCanvasWidth)
-})
-
-test('an empty alignment collapses to a zero-width unit instead of dividing by zero', () => {
-  const model = MSAModelF().create({ type: 'MsaView' })
-  model.setWidth(1000)
-  expect(model.totalWidth).toBe(0)
-  const { unit, s, w } = getMinimapLayout(model)
-  expect(unit).toBe(0)
-  expect(s).toBeCloseTo(0)
-  // still clamped to the minimum grabbable width
-  expect(w).toBe(20)
-})

package/src/components/msa/msaRaster.test.ts

@@ -1,145 +0,0 @@
-// @vitest-environment jsdom
-import { beforeAll, expect, test } from 'vitest'
-
-import MSAModelF from '../../model.ts'
-import { drawMsaRaster, rasterPixels } from './msaRaster.ts'
-
-import type { RasterSpec } from './msaRaster.ts'
-
-// the stub context resolves a color by parsing '#rrggbb', so every color the
-// raster asks about in this file is written that way
-function hexBytes(css: string) {
-  const hex = css.replace('#', '')
-  return [
-    Number.parseInt(hex.slice(0, 2), 16),
-    Number.parseInt(hex.slice(2, 4), 16),
-    Number.parseInt(hex.slice(4, 6), 16),
-    255,
-  ]
-}
-
-const drawn: unknown[] = []
-
-beforeAll(() => {
-  HTMLCanvasElement.prototype.getContext = function () {
-    let fillStyle = '#000000'
-    return {
-      get fillStyle() {
-        return fillStyle
-      },
-      set fillStyle(v: string) {
-        fillStyle = v
-      },
-      imageSmoothingEnabled: true,
-      font: '10px sans-serif',
-      measureText: (t: string) => ({ width: t.length * 6 }),
-      clearRect: () => {},
-      fillRect: () => {},
-      resetTransform: () => {},
-      scale: () => {},
-      translate: () => {},
-      getImageData: () => ({
-        data: Uint8ClampedArray.from(hexBytes(fillStyle)),
-      }),
-      createImageData: (width: number, height: number) => ({
-        data: new Uint8ClampedArray(width * height * 4),
-        width,
-        height,
-      }),
-      putImageData: () => {},
-      drawImage: (image: unknown) => {
-        drawn.push(image)
-      },
-    } as unknown as CanvasRenderingContext2D
-  } as unknown as typeof HTMLCanvasElement.prototype.getContext
-})
-
-const spec: RasterSpec = {
-  rowNames: ['a', 'b', 'c'],
-  columns: new Map([
-    ['a', 'MKL'],
-    ['b', 'MKL'],
-    ['c', 'MK'],
-  ]),
-  relativeTo: 'a',
-  colorAt: (_col, letter) => (letter === 'M' ? '#ff0000' : undefined),
-  bg: '#000000',
-  hover: '#00ff00',
-}
-
-const ids: Record<string, number> = { '#ff0000': 1, '#000000': 2, '#00ff00': 3 }
-const toPixel = (css: string) => ids[css]!
-
-test('one pixel per cell, reference matches and short rows', () => {
-  const px = rasterPixels({
-    spec,
-    col0: 0,
-    row0: 0,
-    width: 3,
-    height: 4,
-    toPixel,
-  })
-
-  // the reference row itself keeps its scheme colors
-  expect([...px.slice(0, 3)]).toEqual([1, 2, 2])
-  // every cell of an identical row reads as a match
-  expect([...px.slice(3, 6)]).toEqual([3, 3, 3])
-  // past the end of a short row, and past the last row, stays transparent
-  expect([...px.slice(6, 9)]).toEqual([3, 3, 0])
-  expect([...px.slice(9, 12)]).toEqual([0, 0, 0])
-})
-
-test('sampling steps over columns and rows', () => {
-  const px = rasterPixels({
-    spec,
-    col0: 0,
-    row0: 0,
-    width: 2,
-    height: 2,
-    colStep: 2,
-    rowStep: 2,
-    toPixel,
-  })
-  // the second sampled column falls past the end of the short row 'c'
-  expect([...px]).toEqual([1, 2, 3, 0])
-})
-
-function make() {
-  const model = MSAModelF().create({
-    id: 'raster',
-    type: 'MsaView',
-    msaFormat: 'fasta',
-    data: { msa: '>a\nMKLVIL\n>b\nMRLVIL\n>c\nMKLAIL' },
-  })
-  model.setWidth(1000)
-  return model
-}
-
-function tilesFor(model: ReturnType<typeof make>) {
-  drawn.length = 0
-  const ctx = document.createElement('canvas').getContext('2d')!
-  drawMsaRaster({ ctx, model, theme: theme(), offsetX: 0, offsetY: 0 })
-  return [...drawn]
-}
-
-// only the two palette entries the raster reads
-const theme = () =>
-  ({
-    palette: {
-      action: { hover: '#00ff00' },
-      background: { default: '#ffffff' },
-    },
-  }) as never
-
-test('a zoom reuses the tiles, a recolor rebuilds them', () => {
-  const model = make()
-  const tile = tilesFor(model)[0]
-  expect(tile).toBeDefined()
-
-  model.setColWidth(3)
-  model.setRowHeight(2)
-  expect(tilesFor(model)[0]).toBe(tile)
-
-  model.setColorSchemeName('clustalx_protein_dynamic')
-  expect(tilesFor(model)[0]).not.toBe(tile)
-})

package/src/components/msa/renderBoxFeatureCanvasBlock.test.ts

@@ -1,51 +0,0 @@
-import { expect, test } from 'vitest'
-
-import stateModelFactory from '../../model.ts'
-import { renderBoxFeatureCanvasBlock } from './renderBoxFeatureCanvasBlock.ts'
-
-import type { RenderCtx } from '../renderCtx.ts'
-
-const row = 'ACDEFGHIKLMNPQRSTVWY'.repeat(3)
-
-// only `human` carries the gene model; `mouse` is there to push it off the top
-// of the block
-const msa = `>mouse\n${row}\n>human\n${row}`
-
-const gff = `##gff-version 3
-human	src	exon	1	20	.	.	.	ID=human.exon1;Name=exon-1
-human	src	exon	21	40	.	.	.	ID=human.exon2;Name=exon-2
-human	src	exon	41	60	.	.	.	ID=human.exon3;Name=exon-3`
-
-function drawnLabels() {
-  const model = stateModelFactory().create({
-    type: 'MsaView',
-    data: { msa },
-  })
-  model.setWidth(1000)
-  model.setRowHeight(20)
-  // segment numbers are drawn in place of residue letters, never on top of them
-  model.setDrawMsaLetters(false)
-  model.applyGFFText(gff)
-  expect(model.rowNames).toEqual(['mouse', 'human'])
-
-  const labels: string[] = []
-  const ctx = {
-    font: '12px sans-serif',
-    resetTransform() {},
-    scale() {},
-    translate() {},
-    fillRect() {},
-    strokeRect() {},
-    measureText: (text: string) => ({ width: text.length * 6 }),
-    fillText(text: string) {
-      labels.push(text)
-    },
-  } as unknown as RenderCtx
-
-  renderBoxFeatureCanvasBlock({ model, ctx, offsetX: 0, offsetY: 0 })
-  return labels
-}
-
-test('segment numbers are drawn once each, even when row 0 has no gene model', () => {
-  expect(drawnLabels()).toEqual(['1', '2', '3'])
-})

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