react-msaview 6.5.0 → 8.0.0

package/src/renderColumnTracksSvg.test.tsx

@@ -1,108 +0,0 @@
-// @vitest-environment jsdom
-import { createJBrowseTheme } from '@jbrowse/core/ui/theme'
-import { enableStaticRendering } from 'mobx-react'
-import { beforeAll, expect, test } from 'vitest'
-
-import { installHeadlessRenderEnv } from './headlessRenderEnv.ts'
-import MSAModelF from './model.ts'
-import { renderToSvg } from './renderToSvg.tsx'
-
-import type { ColumnTrackSpec } from './types.ts'
-
-beforeAll(() => {
-  enableStaticRendering(true)
-  installHeadlessRenderEnv()
-})
-
-const msa = '>s1\nACGT\n>s2\nACGT\n'
-const colWidth = 20
-const barColor = '#123456'
-
-function makeModel(columnTracks: ColumnTrackSpec[]) {
-  const model = MSAModelF().create({
-    type: 'MsaView',
-    msaFormat: 'fasta',
-    height: 400,
-    colWidth,
-    data: { msa },
-    columnTracks,
-  })
-  model.setWidth(1000)
-  model.toggleTrack('conservation')
-  return model
-}
-
-async function exportSvg(model: ReturnType<typeof makeModel>) {
-  return renderToSvg(model, {
-    theme: createJBrowseTheme(),
-    exportType: 'entire',
-    includeTracks: true,
-  })
-}
-
-function rectsFilled(svg: string, fill: string) {
-  return [...svg.matchAll(/<rect ([^>]*)\/?>/g)]
-    .map(m => m[1]!)
-    .filter(attrs => attrs.includes(`fill="${fill}"`))
-    .map(attrs => ({
-      x: Number(/x="([\d.-]+)"/.exec(attrs)?.[1]),
-      width: Number(/width="([\d.-]+)"/.exec(attrs)?.[1]),
-      height: Number(/height="([\d.-]+)"/.exec(attrs)?.[1]),
-    }))
-}
-
-test('a bar track from values exports one bar per column in its color', async () => {
-  const model = makeModel([
-    {
-      id: 'dnds',
-      name: 'dN/dS',
-      kind: 'bar',
-      values: [1, 0.5, 0, 0.25],
-      color: barColor,
-    },
-  ])
-  const bars = rectsFilled(await exportSvg(model), barColor).sort(
-    (a, b) => a.x - b.x,
-  )
-  const trackHeight = model.conservationTrackHeight
-  expect(bars.map(b => b.x)).toEqual([0, colWidth, colWidth * 2, colWidth * 3])
-  expect(bars.map(b => b.height)).toEqual([
-    trackHeight,
-    trackHeight / 2,
-    0,
-    trackHeight / 4,
-  ])
-  expect(svgNamesTrack(await exportSvg(model))).toContain('dN/dS')
-})
-
-test('a text track from data exports its letters and its own colors', async () => {
-  const model = makeModel([
-    {
-      id: 'frame',
-      name: 'Codon frame',
-      kind: 'text',
-      data: '1231',
-      colors: { 1: '#aaaaaa', 2: '#bbbbbb', 3: '#cccccc' },
-    },
-  ])
-  const svg = await exportSvg(model)
-  expect(
-    rectsFilled(svg, '#aaaaaa')
-      .map(b => b.x)
-      .sort((a, b) => a - b),
-  ).toEqual([0, colWidth * 3])
-  expect(rectsFilled(svg, '#bbbbbb').map(b => b.x)).toEqual([colWidth])
-  expect(svgNamesTrack(svg)).toContain('Codon frame')
-})
-
-test('a data track that is toggled off stays out of the export', async () => {
-  const model = makeModel([
-    { id: 'dnds', name: 'dN/dS', kind: 'bar', values: [1], color: barColor },
-  ])
-  model.toggleTrack('dnds')
-  expect(rectsFilled(await exportSvg(model), barColor)).toEqual([])
-})
-
-function svgNamesTrack(svg: string) {
-  return [...svg.matchAll(/<text[^>]*>([^<]*)<\/text>/g)].map(m => m[1])
-}

package/src/renderDomainsSvg.test.tsx

@@ -1,118 +0,0 @@
-// @vitest-environment jsdom
-//
-// 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 { beforeAll, expect, test } from 'vitest'
-
-import { renderToSvg } from './renderToSvg.tsx'
-import { createTestModel, installSvgTestEnv } from './svgTestUtil.ts'
-
-beforeAll(() => {
-  installSvgTestEnv()
-})
-
-const msa = `>seq1
-ACDEFGHIKL
->seq2
-ACDE-GHIKL`
-
-function makeModel({
-  data = msa,
-  start = 1,
-  end = 5,
-}: { data?: string; start?: number; end?: number } = {}) {
-  const model = createTestModel({
-    id: 'domain-svg-test',
-    data: { msa: data },
-  })
-  model.setDomains({
-    seq1: {
-      xref: [{ id: 'seq1' }],
-      matches: [
-        {
-          signature: {
-            entry: {
-              name: 'Kinase',
-              accession: 'PF00069',
-              description: 'Protein kinase domain',
-            },
-          },
-          locations: [{ start, end }],
-        },
-      ],
-    },
-  })
-  return model
-}
-
-function exportEntire(model: ReturnType<typeof makeModel>) {
-  return renderToSvg(model, {
-    theme: createJBrowseTheme(),
-    exportType: 'entire',
-    includeMinimap: false,
-    includeTracks: false,
-  })
-}
-
-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 () => {
-  const model = makeModel()
-  model.setShowDomains(false)
-  expect(model.actuallyShowDomains).toBe(false)
-
-  expect(await exportEntire(model)).not.toContain('Kinase')
-})
-
-test('the page grows to hold a key taller than the alignment', async () => {
-  const model = makeModel()
-  model.setDomains({
-    seq1: {
-      xref: [{ id: 'seq1' }],
-      matches: Array.from({ length: 12 }, (_, i) => ({
-        signature: {
-          entry: { name: `Dom${i}`, accession: `PF${i}`, description: '' },
-        },
-        locations: [{ start: 1, end: 5 }],
-      })),
-    },
-  })
-  expect(model.visibleDomainTypes).toHaveLength(12)
-  const keyHeight = 16 + 12 * 16
-  expect(model.totalHeight).toBeLessThan(keyHeight)
-
-  const svg = await exportEntire(model)
-  expect(svg).toContain(`height="${keyHeight}"`)
-  expect(/<svg[^>]*height="(\d+)"/.exec(svg)?.[1]).toBe(String(keyHeight))
-})
-
-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,
-  })
-  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/renderHighlightsSvg.test.tsx

@@ -1,85 +0,0 @@
-// @vitest-environment jsdom
-//
-// The SVG export draws the `highlights` layer: a bordered band with its label
-// over the alignment, a residue span at the column the row's gaps put it in,
-// and a row set tinted across both the tree and the alignment.
-import { createJBrowseTheme } from '@jbrowse/core/ui/theme'
-import { enableStaticRendering } from 'mobx-react'
-import { beforeAll, expect, test } from 'vitest'
-
-import { installHeadlessRenderEnv } from './headlessRenderEnv.ts'
-import MSAModelF from './model.ts'
-import { renderToSvg } from './renderToSvg.tsx'
-
-import type { Highlight } from './types.ts'
-
-beforeAll(() => {
-  enableStaticRendering(true)
-  installHeadlessRenderEnv()
-})
-
-const msa = `>seq1
-ACDEFGHIKL
->seq2
-AC--FGHIKL
->seq3
-ACDEFGHIKL`
-
-async function exportWith(highlights: Highlight[]) {
-  const model = MSAModelF().create({
-    id: 'highlight-svg-test',
-    type: 'MsaView',
-    height: 400,
-    msaFormat: 'fasta',
-    data: { msa },
-    highlights,
-  })
-  model.setWidth(800)
-  const svg = await renderToSvg(model, {
-    theme: createJBrowseTheme(),
-    exportType: 'entire',
-  })
-  return { model, svg }
-}
-
-const rects = (svg: string) => svg.match(/<rect[^>]*>/g) ?? []
-
-test('a labeled column span draws a band and its label', async () => {
-  const { model, svg } = await exportWith([
-    { start: 3, end: 5, label: 'motif', color: 'rgb(1, 2, 3)' },
-  ])
-  const { colWidth, totalHeight } = model
-  const band = rects(svg).find(
-    r => r.includes(`x="${2 * colWidth}"`) && r.includes('rgb(1, 2, 3)'),
-  )
-  expect(band).toBeDefined()
-  expect(band).toContain(`width="${3 * colWidth}"`)
-  expect(band).toContain(`height="${totalHeight}"`)
-  expect(svg).toContain('>motif<')
-})
-
-test('a residue span lands where the row has its residues', async () => {
-  const { model, svg } = await exportWith([
-    { row: 'seq2', start: 3, end: 3, color: 'rgb(9, 9, 9)' },
-  ])
-  expect(model.resolvedHighlights[0]).toMatchObject({
-    startCol: 4,
-    endCol: 4,
-  })
-  const band = rects(svg).find(r => r.includes('rgb(9, 9, 9)'))
-  expect(band).toContain(`x="${4 * model.colWidth}"`)
-})
-
-test('a row set tints the row in the tree and the alignment', async () => {
-  const { model, svg } = await exportWith([
-    { rows: ['seq3'], label: 'odd one out', color: 'rgb(7, 7, 7)' },
-  ])
-  const { rowHeight, treeAreaWidth, totalWidth } = model
-  const tints = rects(svg).filter(
-    r => r.includes('rgb(7, 7, 7)') && r.includes(`y="${2 * rowHeight}"`),
-  )
-  expect(tints.map(r => /width="([^"]+)"/.exec(r)?.[1])).toEqual(
-    expect.arrayContaining([`${treeAreaWidth}`, `${totalWidth}`]),
-  )
-  expect(svg).toContain('>odd one out<')
-})

package/src/renderMinimapSvg.test.tsx

@@ -1,62 +0,0 @@
-// @vitest-environment jsdom
-//
-// The viewport export draws a minimap by default, and nothing covered it. It
-// spans the same alignment canvas the live minimap does, so its trapezoid has
-// to reach the right edge of the exported alignment column -- and it is drawn
-// only when the live view shows one at all.
-import { createJBrowseTheme } from '@jbrowse/core/ui/theme'
-import { beforeAll, expect, test } from 'vitest'
-
-import { renderToSvg } from './renderToSvg.tsx'
-import { createTestModel, installSvgTestEnv } from './svgTestUtil.ts'
-
-beforeAll(() => {
-  installSvgTestEnv()
-})
-
-const width = 1000
-
-function makeModel(cols = 400) {
-  const row = 'ACDEFGHIKL'.repeat(cols / 10)
-  return createTestModel(
-    { height: 300, data: { msa: `>seq1\n${row}\n>seq2\n${row}` } },
-    width,
-  )
-}
-
-function exportViewport(model: ReturnType<typeof makeModel>) {
-  return renderToSvg(model, {
-    theme: createJBrowseTheme(),
-    exportType: 'viewport',
-    includeMinimap: true,
-    includeTracks: false,
-  })
-}
-
-test('the exported minimap spans the exported alignment column', async () => {
-  const model = makeModel()
-  expect(model.showHorizontalScrollbar).toBe(true)
-
-  const svg = await exportViewport(model)
-
-  // the minimap column is the alignment canvas, which is what the export lays
-  // out beside the tree
-  const minimapWidth = model.msaCanvasWidth
-  const polygon = /<polygon[^>]*points="([^"]*)"/.exec(svg)?.[1]
-  expect(polygon).toBeDefined()
-  // bottom edge of the trapezoid reaches the full width it was given
-  expect(polygon!.endsWith(`${minimapWidth},${model.minimapHeight - 12}`)).toBe(
-    true,
-  )
-  // and the bar outline is drawn to the same width
-  expect(svg).toContain(`width="${minimapWidth}"`)
-})
-
-test('no minimap when the alignment already fits across', async () => {
-  const model = makeModel(10)
-  expect(model.showHorizontalScrollbar).toBe(false)
-
-  // a minimap here would mark a viewport wider than the bar it sits in, and the
-  // live view draws none either
-  expect(await exportViewport(model)).not.toContain('<polygon')
-})

package/src/renderRasterSvg.test.tsx

@@ -1,144 +0,0 @@
-// @vitest-environment jsdom
-//
-// The SVG export's raster background. jsdom has no canvas, so the export falls
-// back to a <rect> per cell there and every other export test exercises that
-// path; this file supplies the canvas the raster needs and checks the export
-// takes it instead.
-import { createJBrowseTheme } from '@jbrowse/core/ui/theme'
-import { beforeAll, expect, test } from 'vitest'
-
-import { renderToSvg } from './renderToSvg.tsx'
-import {
-  createTestModel,
-  installSvgTestEnv,
-  syntheticProteinMsa,
-} from './svgTestUtil.ts'
-
-const dataUrl = 'data:image/png;base64,STUB'
-
-// enough of a 2d context for the raster: a color parser, an ImageData that is
-// really backed by bytes, and a canvas that reads back
-beforeAll(() => {
-  installSvgTestEnv({
-    fillStyle: '#000000',
-    clearRect: () => {},
-    fillRect: () => {},
-    createImageData: ((width: number, height: number) => ({
-      data: new Uint8ClampedArray(width * height * 4),
-      width,
-      height,
-    })) as unknown as CanvasRenderingContext2D['createImageData'],
-    putImageData: () => {},
-    getImageData: (() => ({
-      data: Uint8ClampedArray.from([1, 2, 3, 255]),
-    })) as unknown as CanvasRenderingContext2D['getImageData'],
-  })
-  HTMLCanvasElement.prototype.toDataURL = () => dataUrl
-})
-
-function makeModel(rows: number, cols: number) {
-  return createTestModel({
-    id: 'raster',
-    data: { msa: syntheticProteinMsa(rows, cols) },
-  })
-}
-
-function exportEntire(model: ReturnType<typeof makeModel>) {
-  return renderToSvg(model, {
-    theme: createJBrowseTheme(),
-    exportType: 'entire',
-  })
-}
-
-test('the background is one image, not a rect per cell', async () => {
-  const model = makeModel(40, 300)
-  expect(model.bgColor).toBe(true)
-  expect(model.actuallyShowDomains).toBe(false)
-
-  const svg = await exportEntire(model)
-  const images = [...svg.matchAll(/<image[^>]*>/g)].map(m => m[0])
-
-  expect(images).toHaveLength(1)
-  expect(images[0]).toContain(dataUrl)
-  // the alignment's own rectangle, one pixel per cell scaled up by whole cells
-  expect(images[0]).toContain(`width="${300 * model.colWidth}"`)
-  expect(images[0]).toContain(`height="${40 * model.rowHeight}"`)
-  expect(images[0]).toContain('image-rendering="pixelated"')
-
-  // 12000 cells would have been 12000 rects
-  expect((svg.match(/<rect/g) ?? []).length).toBeLessThan(10)
-})
-
-test('letters still draw on top of the raster', async () => {
-  const model = makeModel(4, 10)
-  expect(model.showMsaLetters).toBe(true)
-
-  const svg = await exportEntire(model)
-
-  expect(svg).toContain('<image')
-  expect((svg.match(/<text/g) ?? []).length).toBeGreaterThanOrEqual(40)
-})
-
-test('the domain overlay keeps the vector path, which paints its own boxes', async () => {
-  const model = makeModel(4, 10)
-  model.setDomains({
-    seq0: {
-      xref: [{ id: 'seq0' }],
-      matches: [
-        {
-          signature: {
-            entry: { name: 'Kinase', accession: 'PF00069', description: '' },
-          },
-          locations: [{ start: 1, end: 5 }],
-        },
-      ],
-    },
-  })
-  expect(model.actuallyShowDomains).toBe(true)
-
-  expect(await exportEntire(model)).not.toContain('<image')
-})
-
-test('turning background color off leaves nothing for a raster to draw', async () => {
-  const model = makeModel(4, 10)
-  model.setBgColor(false)
-
-  expect(await exportEntire(model)).not.toContain('<image')
-})
-
-test('the exported minimap carries the alignment thumbnail', async () => {
-  const model = makeModel(20, 2000)
-  expect(model.showHorizontalScrollbar).toBe(true)
-
-  const svg = await renderToSvg(model, {
-    theme: createJBrowseTheme(),
-    exportType: 'viewport',
-    includeMinimap: true,
-  })
-
-  // the bar is the same downsampled alignment the live minimap draws, rather
-  // than the empty outline the export used to leave
-  const bar = [...svg.matchAll(/<image[^>]*>/g)]
-    .map(m => m[0])
-    .find(i => i.includes('height="12"'))
-  expect(bar).toBeDefined()
-  expect(bar).toContain(dataUrl)
-  expect(bar).toContain(`width="${model.msaCanvasWidth}"`)
-})
-
-test('each track is named in the tree column beside it', async () => {
-  const model = makeModel(4, 40)
-  model.toggleTrack('sequence-logo')
-  const names = model.turnedOnTracks.map(t => t.model.name)
-  expect(names.length).toBeGreaterThan(1)
-
-  const svg = await renderToSvg(model, {
-    theme: createJBrowseTheme(),
-    exportType: 'entire',
-    includeTracks: true,
-  })
-
-  for (const name of names) {
-    expect(svg).toContain(`>${name}</text>`)
-  }
-})

package/src/renderSequenceLogoSvg.test.tsx

@@ -1,165 +0,0 @@
-// @vitest-environment jsdom
-//
-// The logo track is the first track kind whose letters are drawn under a
-// per-letter transform rather than at a fixed size, so it is also the first that
-// can silently draw nothing if the export context loses that transform. These
-// tests go through the real SVG export to pin the whole path: the track is off
-// until asked for, the stack is ordered and scaled, and the glyphs land inside
-// the track's own band.
-import { createJBrowseTheme } from '@jbrowse/core/ui/theme'
-import { beforeAll, expect, test } from 'vitest'
-
-import { CHAR_WIDTH_RATIO } from './headlessRenderEnv.ts'
-import { renderToSvg } from './renderToSvg.tsx'
-import { createTestModel, installSvgTestEnv } from './svgTestUtil.ts'
-
-beforeAll(() => {
-  installSvgTestEnv()
-})
-
-// column 0 is fully conserved A, column 1 is a 3:1 split of C over G, and
-// column 2 is an even four-way split carrying no information at all
-const msa = `>s1\nACA\n>s2\nACC\n>s3\nACG\n>s4\nAGT\n`
-const colWidth = 40
-
-function makeModel() {
-  return createTestModel({ colWidth, data: { msa } }, 1000)
-}
-
-async function exportSvg(model: ReturnType<typeof makeModel>) {
-  return renderToSvg(model, {
-    theme: createJBrowseTheme(),
-    exportType: 'entire',
-    includeTracks: true,
-  })
-}
-
-// The logo's glyphs are the only <text> drawn at the track's own font size, and
-// the only ones carrying a non-unit vertical scale, which is what separates them
-// from the alignment letters and tree labels in the same document.
-function logoGlyphs(svg: string, fontSize: number) {
-  return [
-    ...svg.matchAll(
-      /<text[^>]*font-size="([\d.]+)px"[^>]*transform="matrix\(([^)]*)\)"[^>]*>([A-Z])<\/text>/g,
-    ),
-  ]
-    .filter(m => Number(m[1]) === fontSize)
-    .map(m => {
-      const [sx, , , sy, tx, ty] = m[2]!.split(/[\s,]+/).map(Number)
-      return { letter: m[3]!, sx: sx!, sy: sy!, x: tx!, y: ty! }
-    })
-}
-
-async function glyphsOf(model: ReturnType<typeof makeModel>) {
-  return logoGlyphs(await exportSvg(model), model.sequenceLogoTrackHeight)
-}
-
-test('the logo track is hidden until it is asked for', () => {
-  const model = makeModel()
-  expect(model.tracks.map(t => t.model.id)).toContain('sequence-logo')
-  expect(model.turnedOnTracks.map(t => t.model.id)).not.toContain(
-    'sequence-logo',
-  )
-  // and being default-off writes nothing into the shareable snapshot
-  expect(model.turnedOffTracks.size).toBe(0)
-})
-
-test('toggling it on shows it, and off again hides it', () => {
-  const model = makeModel()
-  model.toggleTrack('sequence-logo')
-  expect(model.turnedOnTracks.map(t => t.model.id)).toContain('sequence-logo')
-  model.toggleTrack('sequence-logo')
-  expect(model.turnedOnTracks.map(t => t.model.id)).not.toContain(
-    'sequence-logo',
-  )
-})
-
-test('an on-by-default track still toggles off and back on', () => {
-  const model = makeModel()
-  expect(model.turnedOnTracks.map(t => t.model.id)).toContain('conservation')
-  model.toggleTrack('conservation')
-  expect(model.turnedOnTracks.map(t => t.model.id)).not.toContain(
-    'conservation',
-  )
-  model.toggleTrack('conservation')
-  expect(model.turnedOnTracks.map(t => t.model.id)).toContain('conservation')
-})
-
-test('the conserved column draws one full-height letter', async () => {
-  const model = makeModel()
-  model.toggleTrack('sequence-logo')
-  const col0 = (await glyphsOf(model)).filter(g => g.x === 0)
-
-  expect(col0.map(g => g.letter)).toEqual(['A'])
-  // a fully conserved nucleotide column is 2 of 2 bits, so the glyph stretches
-  // to the whole track height over the cap height of the reference font
-  expect(col0[0]!.sy).toBeCloseTo(1 / 0.72, 5)
-})
-
-test('a split column stacks the minor letter below the major one', async () => {
-  const model = makeModel()
-  model.toggleTrack('sequence-logo')
-  const col1 = (await glyphsOf(model)).filter(g => g.x === colWidth)
-
-  // ascending order means C (3 of 4) is drawn last, so it ends up on top
-  expect(col1.map(g => g.letter)).toEqual(['G', 'C'])
-  const [g, c] = col1
-  expect(c!.sy).toBeGreaterThan(g!.sy)
-  // and the taller letter sits higher up the track (smaller y is nearer the top)
-  expect(c!.y).toBeLessThan(g!.y)
-})
-
-test('the uninformative column draws nothing', async () => {
-  const model = makeModel()
-  model.toggleTrack('sequence-logo')
-  const glyphs = await glyphsOf(model)
-  expect(glyphs.filter(g => g.x === colWidth * 2)).toEqual([])
-  // the other two columns did draw, so an empty column 2 is the logo's own
-  // verdict rather than the whole track missing
-  expect(glyphs).toHaveLength(3)
-})
-
-test('every glyph stays inside the track band', async () => {
-  const model = makeModel()
-  model.toggleTrack('sequence-logo')
-
-  // the export stacks the tracks, so the logo's band is offset by whatever is
-  // drawn above it -- assert against that band rather than against 0..height,
-  // which would pass only while the logo happened to be the first track
-  const above = model.turnedOnTracks
-    .slice(
-      0,
-      model.turnedOnTracks.findIndex(t => t.model.id === 'sequence-logo'),
-    )
-    .reduce((a, t) => a + t.model.height, 0)
-  const bandTop = above
-  const bandBottom = above + model.sequenceLogoTrackHeight
-
-  const glyphs = await glyphsOf(model)
-  expect(glyphs.length).toBeGreaterThan(0)
-  for (const glyph of glyphs) {
-    // baselines run from the band's bottom edge upward, never past either end
-    expect(glyph.y).toBeGreaterThan(bandTop)
-    expect(glyph.y).toBeLessThanOrEqual(bandBottom)
-  }
-})
-
-test('letters are stretched to fill their column', async () => {
-  const model = makeModel()
-  model.toggleTrack('sequence-logo')
-  const glyphs = await glyphsOf(model)
-
-  const expected = colWidth / (model.sequenceLogoTrackHeight * CHAR_WIDTH_RATIO)
-  for (const glyph of glyphs) {
-    expect(glyph.sx).toBeCloseTo(expected, 5)
-  }
-})
-
-test('the logo appears in the export only when the track is on', async () => {
-  const off = makeModel()
-  expect(await glyphsOf(off)).toEqual([])
-
-  const on = makeModel()
-  on.toggleTrack('sequence-logo')
-  expect((await glyphsOf(on)).length).toBeGreaterThan(0)
-})