react-msaview 6.5.0 → 8.0.0

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

package/src/wheelZoom.test.ts

@@ -1,46 +0,0 @@
-import { describe, expect, test } from 'vitest'
-
-import {
-  getZoomNormalizer,
-  normalizeWheelDelta,
-  zoomFactorFromAccum,
-} from './wheelZoom.ts'
-
-describe('normalizeWheelDelta', () => {
-  test('pixel mode passes through', () => {
-    expect(normalizeWheelDelta(120, 0)).toBe(120)
-  })
-  test('line mode scales to pixels', () => {
-    expect(normalizeWheelDelta(3, 1)).toBe(48)
-  })
-  test('page mode scales to pixels', () => {
-    expect(normalizeWheelDelta(2, 2)).toBe(200)
-  })
-})
-
-describe('getZoomNormalizer', () => {
-  test('tiny pinch deltas get the smallest divisor (largest step)', () => {
-    expect(getZoomNormalizer(3)).toBe(25)
-  })
-  test('large mouse notches get the largest divisor (finest step)', () => {
-    expect(getZoomNormalizer(200)).toBe(500)
-  })
-  test('medium deltas land in between', () => {
-    expect(getZoomNormalizer(50)).toBe(150)
-    expect(getZoomNormalizer(20)).toBe(75)
-  })
-})
-
-describe('zoomFactorFromAccum', () => {
-  test('negative accum zooms in (factor > 1)', () => {
-    expect(zoomFactorFromAccum(-0.1, 16.67)).toBeCloseTo(1.1)
-  })
-  test('positive accum zooms out (factor < 1)', () => {
-    expect(zoomFactorFromAccum(0.1, 16.67)).toBeCloseTo(1 / 1.1)
-  })
-  test('rate-limits a big burst to ~0.2 per frame', () => {
-    // a huge accumulated delta cannot zoom more than the per-frame cap
-    expect(zoomFactorFromAccum(99, 16.67)).toBeCloseTo(1 / 1.2, 2)
-    expect(zoomFactorFromAccum(-99, 16.67)).toBeCloseTo(1.2, 2)
-  })
-})