react-msaview 6.4.2 → 7.0.0

package/src/segmentOverlay.test.ts

@@ -1,70 +0,0 @@
-// Verifies that ordinal segment features (exons) from a GFF overlay are treated
-// as a numbered gene model — alternating two shades, labeled by number, and
-// kept out of the categorical color-key legend — while real domains keep a
-// distinct color + legend entry.
-import { expect, test } from 'vitest'
-
-import { segmentShades } from './constants.ts'
-import MSAModelF from './model.ts'
-
-const msa = `>human
-ACDEFGHIKLMNPQRSTVWYACDEFGHIKLMNPQRSTVWYACDEFGHIKLMNPQRSTVWY
->mouse
-ACDEFGHIKLMNPQRSTVWYACDEFGHIKLMNPQRSTVWYACDEFGHIKLMNPQRSTVWY`
-
-// three exons in CDS coordinates plus one real domain, deliberately out of
-// start order in the file to prove ordering is by position not file/length
-const gff = `##gff-version 3
-human	src	exon	41	60	.	.	.	ID=human.exon3;Name=exon-3
-human	src	exon	1	20	.	.	.	ID=human.exon1;Name=exon-1
-human	src	exon	21	40	.	.	.	ID=human.exon2;Name=exon-2
-human	Pfam	protein_match	5	35	.	.	.	Name=PF00069;signature_desc=Kinase`
-
-function makeModel() {
-  const model = MSAModelF().create({
-    id: 'segment-overlay-test',
-    type: 'MsaView',
-    height: 400,
-    msaFormat: 'fasta',
-    data: { msa },
-  })
-  model.setWidth(800)
-  model.applyGFFText(gff)
-  return model
-}
-
-test('exons are ordered by sequence position, domains kept separate', () => {
-  const model = makeModel()
-  expect(model.segmentDomainTypes.map(d => d.accession)).toEqual([
-    'exon-1',
-    'exon-2',
-    'exon-3',
-  ])
-  expect(model.categoricalDomainTypes.map(d => d.accession)).toEqual([
-    'PF00069',
-  ])
-})
-
-test('exons alternate two shades; domain gets its own color', () => {
-  const { fillPalette } = makeModel()
-  expect(fillPalette['exon-1']).toBe(segmentShades[0])
-  expect(fillPalette['exon-2']).toBe(segmentShades[1])
-  expect(fillPalette['exon-3']).toBe(segmentShades[0])
-  expect(fillPalette.PF00069).not.toBe(segmentShades[0])
-  expect(fillPalette.PF00069).not.toBe(segmentShades[1])
-})
-
-test('exons are labeled by their number', () => {
-  const { segmentLabels } = makeModel()
-  expect(segmentLabels.get('exon-1')).toBe('1')
-  expect(segmentLabels.get('exon-2')).toBe('2')
-  expect(segmentLabels.get('exon-3')).toBe('3')
-})
-
-test('legend lists only categorical domains, not exons', () => {
-  const model = makeModel()
-  for (const acc of ['exon-1', 'exon-2', 'exon-3', 'PF00069']) {
-    model.setFilter(acc, true)
-  }
-  expect(model.visibleDomainTypes.map(d => d.accession)).toEqual(['PF00069'])
-})

package/src/seqPosToGlobalCol.test.ts

@@ -1,59 +0,0 @@
-// 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 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('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('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(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('counts both gap characters, - and .', () => {
-    // Global: A(0) -(1) .(2) G(3) -(4) C(5) .(6)
-    // SeqPos: A(0)           G(1)      C(2)
-    expect(colsOf('A-.G-C.', [0, 1, 2, 3])).toEqual([0, 3, 5, 7])
-  })
-
-  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])
-  })
-
-  test('an all-gap row reports position 0 at column 0', () => {
-    expect(colsOf('---..--', [0, 1])).toEqual([0, 7])
-  })
-
-  test('an empty row reports column 0', () => {
-    expect(colsOf('', [0])).toEqual([0])
-  })
-
-  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/sequenceLogo.test.ts

@@ -1,88 +0,0 @@
-import { expect, test } from 'vitest'
-
-import { columnCountsFromColumns } from './columnCounts.ts'
-import { columnLogoStack, maxBitsFor } from './sequenceLogo.ts'
-
-const dnaBits = maxBitsFor('dna')
-const aminoBits = maxBitsFor('amino')
-
-function stackOf(column: string, maxBits = dnaBits) {
-  return columnLogoStack(columnCountsFromColumns([column]), 0, maxBits)
-}
-
-test('maxBits is log2 of the alphabet', () => {
-  expect(maxBitsFor('dna')).toBe(2)
-  expect(maxBitsFor('rna')).toBe(2)
-  expect(maxBitsFor('amino')).toBeCloseTo(4.3219, 4)
-})
-
-test('a fully conserved column is one letter at the full height', () => {
-  const stack = stackOf('AAAA')
-  expect(stack).toHaveLength(1)
-  expect(stack[0]!.letter).toBe('A')
-  expect(stack[0]!.bits).toBeCloseTo(2, 10)
-})
-
-test('an even four-way column carries no information', () => {
-  expect(stackOf('ACGT')).toEqual([])
-})
-
-test('a two-way split is half the height, shared evenly', () => {
-  const stack = stackOf('AACC')
-  expect(stack.map(s => s.letter)).toEqual(['A', 'C'])
-  // entropy 1 bit, so information content is 2 - 1 = 1, split evenly
-  expect(stack[0]!.bits).toBeCloseTo(0.5, 10)
-  expect(stack[1]!.bits).toBeCloseTo(0.5, 10)
-})
-
-test('letters are ordered ascending so the tallest draws last, on top', () => {
-  const stack = stackOf('AAAC')
-  expect(stack.map(s => s.letter)).toEqual(['C', 'A'])
-  expect(stack[0]!.bits).toBeLessThan(stack[1]!.bits)
-})
-
-test('ties break on letter so redraws are stable', () => {
-  expect(stackOf('GGCC').map(s => s.letter)).toEqual(['C', 'G'])
-  expect(stackOf('CCGG').map(s => s.letter)).toEqual(['C', 'G'])
-})
-
-test('gaps scale the stack down without skewing the frequencies', () => {
-  // 'A' is the only residue, so it takes the whole stack either way; the height
-  // is what the gaps change
-  const clean = stackOf('AAAA')
-  const gappy = stackOf('AA--')
-  expect(gappy[0]!.letter).toBe('A')
-  expect(gappy[0]!.bits).toBeCloseTo(clean[0]!.bits / 2, 10)
-})
-
-test('gaps do not make a two-residue column look like a four-way one', () => {
-  // frequencies come from the two real residues, so this is a 1-bit choice
-  // scaled by the half-gap occupancy, not a 4-way split
-  const stack = stackOf('AC--')
-  expect(stack.map(s => s.letter)).toEqual(['A', 'C'])
-  expect(stack[0]!.bits + stack[1]!.bits).toBeCloseTo(0.5, 10)
-})
-
-test('an all-gap column has no stack', () => {
-  expect(stackOf('----')).toEqual([])
-  expect(stackOf('....')).toEqual([])
-})
-
-test('the protein ceiling is higher than the nucleotide one', () => {
-  const protein = stackOf('WWWW', aminoBits)
-  expect(protein[0]!.bits).toBeCloseTo(aminoBits, 10)
-  expect(protein[0]!.bits).toBeGreaterThan(stackOf('AAAA')[0]!.bits)
-})
-
-test('stack height never exceeds the ceiling', () => {
-  const columns = ['AAAA', 'AACG', 'A-C-', 'ACGT', 'AAAT']
-  for (const column of columns) {
-    const total = stackOf(column).reduce((a, b) => a + b.bits, 0)
-    expect(total).toBeLessThanOrEqual(dnaBits + 1e-9)
-  }
-})
-
-test('a column past the end of a ragged alignment is empty, not a crash', () => {
-  const counts = columnCountsFromColumns(['AC'])
-  expect(columnLogoStack(counts, 5, dnaBits)).toEqual([])
-})

package/src/setFontSize.test.ts

@@ -1,33 +0,0 @@
-import { describe, expect, test } from 'vitest'
-
-import { setFontSize } from './setFontSize.ts'
-
-describe('setFontSize', () => {
-  test('replaces integer size, preserving family', () => {
-    const ctx = { font: '10px sans-serif' }
-    setFontSize(ctx, 16)
-    expect(ctx.font).toBe('16px sans-serif')
-  })
-
-  test('handles fractional sizes from smooth zoom', () => {
-    // regression: \d+ alone matched "8604" inside "14.8604px" and produced an
-    // invalid string like "14 0.18px sans-serif", silently breaking fillText
-    const ctx = { font: '14.8604px sans-serif' }
-    setFontSize(ctx, 16.9372)
-    expect(ctx.font).toBe('16.9372px sans-serif')
-  })
-
-  test('does not accumulate "bold " across re-renders', () => {
-    const ctx = { font: '10px sans-serif' }
-    setFontSize(ctx, 12, true)
-    expect(ctx.font).toBe('bold 12px sans-serif')
-    setFontSize(ctx, 14, true)
-    expect(ctx.font).toBe('bold 14px sans-serif')
-  })
-
-  test('drops "bold " when bold goes false', () => {
-    const ctx = { font: 'bold 12px sans-serif' }
-    setFontSize(ctx, 14)
-    expect(ctx.font).toBe('14px sans-serif')
-  })
-})

package/src/stripDefault.test.ts

@@ -1,48 +0,0 @@
-import { getSnapshot, types } from '@jbrowse/mobx-state-tree'
-import { afterEach, expect, test } from 'vitest'
-
-import { stripDefault } from './stripDefault.ts'
-
-const real = types.stripDefault
-
-afterEach(() => {
-  types.stripDefault = real
-})
-
-test('strips defaults from the snapshot when the host mst supports it', () => {
-  const model = types
-    .model({ a: stripDefault(types.boolean, false) })
-    .create({})
-  expect(model.a).toBe(false)
-  expect(getSnapshot(model).a).toBeUndefined()
-})
-
-// The path that actually runs inside every RELEASED jbrowse-web: the host
-// supplies its own mobx-state-tree, and stripDefault only exists in the copy
-// that ships with unreleased @jbrowse/core. Calling it there used to throw while
-// the model was built, which error-paged the whole app. dev has the API, so
-// without stubbing it away this path is never exercised.
-test('falls back to types.optional when the host mst lacks stripDefault', () => {
-  // @ts-expect-error deleting it is the point: simulate an older host
-  delete types.stripDefault
-  const model = types
-    .model({ a: stripDefault(types.boolean, false) })
-    .create({})
-  expect(model.a).toBe(false)
-  // the only difference: the default is serialized rather than omitted
-  expect(getSnapshot(model).a).toBe(false)
-})
-
-test('non-default values survive both paths', () => {
-  const withApi = types
-    .model({ a: stripDefault(types.number, 1) })
-    .create({ a: 5 })
-  expect(getSnapshot(withApi).a).toBe(5)
-
-  // @ts-expect-error see above
-  delete types.stripDefault
-  const without = types
-    .model({ a: stripDefault(types.number, 1) })
-    .create({ a: 5 })
-  expect(getSnapshot(without).a).toBe(5)
-})

package/src/stripDefaultSnapshot.test.ts

@@ -1,87 +0,0 @@
-import { getSnapshot } from '@jbrowse/mobx-state-tree'
-import { expect, test } from 'vitest'
-
-import stateModelFactory from './model.ts'
-
-const MsaView = stateModelFactory()
-
-test('default view produces a minimal snapshot (defaults stripped)', () => {
-  const model = MsaView.create({ type: 'MsaView' })
-  const snap = getSnapshot(model)
-  // only the always-present keys remain; every defaulted scalar/collection is gone
-  expect(snap.colWidth).toBeUndefined()
-  expect(snap.rowHeight).toBeUndefined()
-  expect(snap.showDomains).toBeUndefined()
-  expect(snap.colorSchemeName).toBeUndefined()
-  expect(snap.drawTree).toBeUndefined()
-  expect(snap.treeAreaWidth).toBeUndefined()
-  expect(snap.collapsed).toBeUndefined()
-  expect(snap.turnedOffTracks).toBeUndefined()
-  expect(snap.type).toBe('MsaView')
-})
-
-test('non-default values are retained in the snapshot', () => {
-  const model = MsaView.create({ type: 'MsaView' })
-  model.setColWidth(30)
-  model.setColorSchemeName('clustalx')
-  model.setDrawTree(false)
-  model.toggleCollapsed('nodeA')
-  const snap = getSnapshot(model)
-  expect(snap.colWidth).toBe(30)
-  expect(snap.colorSchemeName).toBe('clustalx')
-  expect(snap.drawTree).toBe(false)
-  expect(snap.collapsed).toEqual(['nodeA'])
-})
-
-test('setting a value back to its default strips it again', () => {
-  const model = MsaView.create({ type: 'MsaView' })
-  model.setColWidth(30)
-  expect(getSnapshot(model).colWidth).toBe(30)
-  model.setColWidth(12) // defaultColWidth
-  expect(getSnapshot(model).colWidth).toBeUndefined()
-})
-
-test('inline data is stripped when a filehandle can refetch it', () => {
-  const model = MsaView.create({
-    type: 'MsaView',
-    data: { msa: '>s1\nACGT', tree: '(a,b);' },
-    msaFilehandle: {
-      uri: 'http://example.com/x.fa',
-      locationType: 'UriLocation',
-    },
-  })
-  const snap = getSnapshot(model)
-  // msa dropped (msaFilehandle present), tree kept (no treeFilehandle)
-  expect(snap.data.msa).toBeUndefined()
-  expect(snap.data.tree).toBe('(a,b);')
-})
-
-test('inline gff survives the snapshot when no gffFilehandle can refetch it', () => {
-  const gff = 's1\tx\tprotein_match\t1\t3\t.\t.\t.\tName=PF1'
-  const withInlineGff = MsaView.create({
-    type: 'MsaView',
-    data: { msa: '>s1\nACGT', gff },
-  })
-  expect(getSnapshot(withInlineGff).data.gff).toBe(gff)
-
-  const withFilehandle = MsaView.create({
-    type: 'MsaView',
-    data: { msa: '>s1\nACGT', gff },
-    gffFilehandle: {
-      uri: 'http://example.com/x.gff',
-      locationType: 'UriLocation',
-    },
-  })
-  expect(getSnapshot(withFilehandle).data.gff).toBeUndefined()
-})
-
-// The legend floats over the top-right of the alignment, so collapsing it is a
-// way of seeing the residues under it. As component state that choice was lost
-// on every reload and could not be set by a session or a figure at all.
-test('a collapsed domain legend survives into the snapshot', () => {
-  const model = MsaView.create({ type: 'MsaView' })
-  expect(getSnapshot(model).showDomainLegend).toBeUndefined()
-  model.setShowDomainLegend(false)
-  expect(getSnapshot(model).showDomainLegend).toBe(false)
-  expect(MsaView.create(getSnapshot(model)).showDomainLegend).toBe(false)
-})

package/src/treeMetadata.test.ts

@@ -1,39 +0,0 @@
-import { expect, test, vi } from 'vitest'
-
-import stateModelFactory from './model.ts'
-
-const MsaView = stateModelFactory()
-
-const msa = '>seq1\nACGT\n>seq2\nACCT\n'
-
-test('treeMetadata is parsed and keyed by row name', () => {
-  const model = MsaView.create({ type: 'MsaView' })
-  model.setData({
-    msa,
-    treeMetadata: JSON.stringify({ seq1: { genome: 'Human' } }),
-  })
-  expect(model.treeMetadata.seq1?.genome).toBe('Human')
-  expect(model.treeMetadata.seq2).toBeUndefined()
-  expect(model.getRowData('seq1').treeMetadata).toEqual({ genome: 'Human' })
-})
-
-test('malformed treeMetadata degrades to empty rather than throwing', () => {
-  const model = MsaView.create({ type: 'MsaView' })
-  const spy = vi.spyOn(console, 'error').mockImplementation(() => {})
-  model.setData({ msa, treeMetadata: '{not json' })
-
-  // treeMetadata comes from a user-supplied file, and consumers of this
-  // computed run during layout/render (labelWidthMap measures every label), so
-  // a parse failure must not throw out of them
-  expect(model.treeMetadata).toEqual({})
-  expect(() => model.getRowData('seq1')).not.toThrow()
-  expect(spy).toHaveBeenCalled()
-  spy.mockRestore()
-})
-
-test('non-object treeMetadata degrades to empty', () => {
-  const model = MsaView.create({ type: 'MsaView' })
-  model.setData({ msa, treeMetadata: 'null' })
-  expect(model.treeMetadata).toEqual({})
-  expect(() => model.getRowData('seq1')).not.toThrow()
-})

package/src/useCanvasAutorun.test.tsx

@@ -1,98 +0,0 @@
-// @vitest-environment jsdom
-//
-// Assigning width/height to a canvas resets its bitmap, and React assigns them
-// on every commit where they changed. A draw that ran during the mobx reaction
-// -- before React commits -- is therefore wiped by the resize that follows it,
-// which is what used to blank the tree on a tree-area drag and the consensus
-// tracks on a vertical zoom. So the hook has to draw again after the resize.
-import React, { act } from 'react'
-
-import { observable, runInAction } from 'mobx'
-import { observer } from 'mobx-react'
-import { createRoot } from 'react-dom/client'
-import { afterEach, beforeAll, beforeEach, expect, test } from 'vitest'
-
-import { useCanvasAutorun } from './useCanvasAutorun.ts'
-
-import type { Root } from 'react-dom/client'
-
-Reflect.set(globalThis, 'IS_REACT_ACT_ENVIRONMENT', true)
-
-beforeAll(() => {
-  HTMLCanvasElement.prototype.getContext = function (this: HTMLCanvasElement) {
-    return { canvas: this } as unknown as CanvasRenderingContext2D
-  } as unknown as typeof HTMLCanvasElement.prototype.getContext
-})
-
-const state = observable({ width: 100, color: 'red' })
-// what each draw saw: the observables it renders from, and the size of the
-// canvas it was drawing onto
-let draws: { observed: number; color: string; canvas: number }[] = []
-
-const Probe = observer(function () {
-  const ref = useCanvasAutorun({
-    draw: ctx => {
-      draws.push({
-        observed: state.width,
-        color: state.color,
-        canvas: ctx.canvas.width,
-      })
-    },
-    width: state.width,
-    height: 50,
-    deps: [],
-  })
-  return <canvas ref={ref} width={state.width} height={50} />
-})
-
-let container: HTMLElement
-let root: Root
-
-beforeEach(() => {
-  draws = []
-  runInAction(() => {
-    state.width = 100
-    state.color = 'red'
-  })
-  container = document.createElement('div')
-  document.body.appendChild(container)
-  root = createRoot(container)
-  act(() => {
-    root.render(<Probe />)
-  })
-})
-
-afterEach(() => {
-  act(() => {
-    root.unmount()
-  })
-  container.remove()
-})
-
-test('the first draw sees the canvas at its rendered size', () => {
-  expect(draws).toEqual([{ observed: 100, color: 'red', canvas: 100 }])
-})
-
-test('a resize is followed by a draw onto the resized canvas', () => {
-  act(() => {
-    runInAction(() => {
-      state.width = 300
-    })
-  })
-
-  expect(container.querySelector('canvas')!.width).toBe(300)
-  expect(draws.at(-1)).toEqual({ observed: 300, color: 'red', canvas: 300 })
-})
-
-test('a change that leaves the size alone draws exactly once', () => {
-  act(() => {
-    runInAction(() => {
-      state.color = 'blue'
-    })
-  })
-
-  expect(draws).toEqual([
-    { observed: 100, color: 'red', canvas: 100 },
-    { observed: 100, color: 'blue', canvas: 100 },
-  ])
-})

package/src/useColorContrast.ts

@@ -1,18 +0,0 @@
-import { useMemo } from 'react'
-
-import { useTheme } from '@mui/material'
-
-import { colorContrast } from './util.ts'
-
-/**
- * Resolves the current theme and a memoized contrast-color scheme for a given
- * color scheme. Shared by the MSA and text-track canvas blocks.
- */
-export function useColorContrast(colorScheme: Record<string, string>) {
-  const theme = useTheme()
-  const contrastScheme = useMemo(
-    () => colorContrast(colorScheme, theme),
-    [colorScheme, theme],
-  )
-  return { theme, contrastScheme }
-}

package/src/viewChrome.test.tsx

@@ -1,134 +0,0 @@
-// @vitest-environment jsdom
-//
-// The chrome around the alignment -- the tree/height resize handles, the
-// minimap and the vertical scrollbar -- is all built from the same
-// mousedown-then-drag hook, and none of it is exercised by the render tests.
-// This mounts the real view and drives one handle of each kind.
-import React, { act } from 'react'
-
-import { createRoot } from 'react-dom/client'
-import { afterEach, beforeAll, beforeEach, expect, test } from 'vitest'
-
-import MSAView from './components/Loading.tsx'
-import MSAModelF from './model.ts'
-
-import type { MsaViewModel } from './model.ts'
-import type { Root } from 'react-dom/client'
-
-Reflect.set(globalThis, 'IS_REACT_ACT_ENVIRONMENT', true)
-
-beforeAll(() => {
-  HTMLCanvasElement.prototype.getContext = function (this: HTMLCanvasElement) {
-    return {
-      canvas: this,
-      font: '12px sans-serif',
-      measureText: (t: string) => ({ width: t.length * 7 }),
-      arc() {},
-      beginPath() {},
-      clearRect() {},
-      closePath() {},
-      fill() {},
-      fillRect() {},
-      fillText() {},
-      lineTo() {},
-      moveTo() {},
-      resetTransform() {},
-      scale() {},
-      setLineDash() {},
-      stroke() {},
-      strokeRect() {},
-      translate() {},
-    } as unknown as CanvasRenderingContext2D
-  } as unknown as typeof HTMLCanvasElement.prototype.getContext
-})
-
-// tall and wide enough that both scrollbars are on screen
-const names = Array.from({ length: 20 }, (_, i) => `seq${i}`)
-const msa = names.map(name => `>${name}\n${'ACGT'.repeat(25)}`).join('\n')
-const tree = `(${names.map(n => `${n}:0.1`).join(',')});`
-
-let container: HTMLDivElement
-let root: Root
-let model: MsaViewModel
-
-beforeEach(() => {
-  container = document.createElement('div')
-  document.body.append(container)
-  root = createRoot(container)
-  model = MSAModelF().create({
-    type: 'MsaView',
-    msaFormat: 'fasta',
-    height: 200,
-    data: { msa, tree },
-  })
-  model.setWidth(800)
-  act(() => {
-    root.render(<MSAView model={model} />)
-  })
-})
-
-afterEach(() => {
-  act(() => {
-    root.unmount()
-  })
-  container.remove()
-})
-
-function byCursor(cursor: string) {
-  return [...container.querySelectorAll<HTMLElement>('div')].filter(
-    el => el.style.cursor === cursor,
-  )
-}
-
-// useDragScroll defers each move to an animation frame, so a drag needs one
-// flushed frame before the model has moved
-async function drag(el: HTMLElement, { x = 0, y = 0 }) {
-  await act(async () => {
-    el.dispatchEvent(
-      new MouseEvent('mousedown', { bubbles: true, clientX: 0, clientY: 0 }),
-    )
-  })
-  await act(async () => {
-    document.dispatchEvent(
-      new MouseEvent('mousemove', { bubbles: true, clientX: x, clientY: y }),
-    )
-    await new Promise(resolve => {
-      requestAnimationFrame(resolve)
-    })
-  })
-  await act(async () => {
-    document.dispatchEvent(new MouseEvent('mouseup', { bubbles: true }))
-  })
-}
-
-test('the view mounts with both scrollbars', () => {
-  expect(container.querySelector('[data-testid="msa_canvas"]')).toBeTruthy()
-  expect(model.showVerticalScrollbar).toBe(true)
-  expect(model.showHorizontalScrollbar).toBe(true)
-  // one horizontal divider (tree/msa), two vertical (view height, and the
-  // conservation track's own)
-  expect(byCursor('ew-resize')).toHaveLength(1)
-  expect(byCursor('ns-resize')).toHaveLength(2)
-})
-
-test('dragging the tree divider widens the tree area', async () => {
-  const before = model.treeAreaWidth
-  await drag(byCursor('ew-resize')[0]!, { x: 60 })
-  expect(model.treeAreaWidth).toBe(before + 60)
-})
-
-test('dragging the view divider grows the view', async () => {
-  const before = model.height
-  // the last ns-resize handle is the one below the whole view
-  await drag(byCursor('ns-resize').at(-1)!, { y: 50 })
-  expect(model.height).toBe(before + 50)
-})
-
-test('dragging the scrollbar thumb scrolls the alignment', async () => {
-  const thumb = container.querySelector<HTMLElement>(
-    'div[style*="cursor: pointer"]',
-  )!
-  expect(model.scrollX).toBe(0)
-  await drag(thumb, { x: 40 })
-  expect(model.scrollX).toBeLessThan(0)
-})