react-msaview 6.1.0 → 6.2.0

package/src/{renderTestEnv.ts → headlessRenderEnv.ts}

@@ -1,6 +1,6 @@
 /**
- * jsdom shims for the SVG-export tests. Test-only -- nothing in the viewer
- * imports this.
+ * DOM shims for driving `renderToSvg` outside a browser -- the SVG-export
+ * tests, the README figure generator, and react-msaview-cli all need them.
  *
  * jsdom implements neither DOMMatrix nor a canvas 2D context, and
  * `@jbrowse/svgcanvas` needs both: it tracks the current transform as a real
@@ -12,7 +12,7 @@
  * leaves the rest undefined -- every emitted transform then carries `NaN` in its
  * x components, which no assertion on a drawn x-position can survive.
  */
-export class TestDOMMatrix {
+export class HeadlessDOMMatrix {
   a: number
   b: number
   c: number
@@ -30,8 +30,8 @@ export class TestDOMMatrix {
     this.f = f
   }
 
-  multiply(o: TestDOMMatrix) {
-    return new TestDOMMatrix([
+  multiply(o: HeadlessDOMMatrix) {
+    return new HeadlessDOMMatrix([
       this.a * o.a + this.c * o.b,
       this.b * o.a + this.d * o.b,
       this.a * o.c + this.c * o.d,
@@ -42,22 +42,22 @@ export class TestDOMMatrix {
   }
 
   translate(x: number, y = 0) {
-    return this.multiply(new TestDOMMatrix([1, 0, 0, 1, x, y]))
+    return this.multiply(new HeadlessDOMMatrix([1, 0, 0, 1, x, y]))
   }
 
   scale(x: number, y = x) {
-    return this.multiply(new TestDOMMatrix([x, 0, 0, y, 0, 0]))
+    return this.multiply(new HeadlessDOMMatrix([x, 0, 0, y, 0, 0]))
   }
 }
 
-export class TestDOMPoint {
+export class HeadlessDOMPoint {
   constructor(
     public x = 0,
     public y = 0,
   ) {}
 
-  matrixTransform(m: TestDOMMatrix) {
-    return new TestDOMPoint(
+  matrixTransform(m: HeadlessDOMMatrix) {
+    return new HeadlessDOMPoint(
       m.a * this.x + m.c * this.y + m.e,
       m.b * this.x + m.d * this.y + m.f,
     )
@@ -65,18 +65,22 @@ export class TestDOMPoint {
 }
 
 /**
- * Install the shims. Call from `beforeAll` in any test that exports SVG.
+ * Install the shims, into `globalThis` by default. A Node caller that builds
+ * its own jsdom passes that window instead, because Node has no global
+ * HTMLCanvasElement to patch.
  *
  * `measureText` reports 0.6em per character, close enough to a real sans-serif
- * average for layout assertions and, more usefully, exactly predictable: a test
- * can compute the width a renderer will see rather than hardcoding a number
+ * average for layout and, more usefully, exactly predictable: a caller can
+ * compute the width a renderer will see rather than hardcoding a number
  * measured from one machine's fonts.
  */
-export function installRenderTestEnv() {
+export function installHeadlessRenderEnv(win: unknown = globalThis) {
   const g = globalThis as Record<string, unknown>
-  g.DOMMatrix = TestDOMMatrix
-  g.DOMPoint = TestDOMPoint
-  HTMLCanvasElement.prototype.getContext = function () {
+  g.DOMMatrix = HeadlessDOMMatrix
+  g.DOMPoint = HeadlessDOMPoint
+  const canvas = (win as { HTMLCanvasElement: typeof HTMLCanvasElement })
+    .HTMLCanvasElement
+  canvas.prototype.getContext = function () {
     let font = '10px sans-serif'
     return {
       get font() {
@@ -86,11 +90,11 @@ export function installRenderTestEnv() {
         font = v
       },
       measureText: (t: string) => ({
-        width: t.length * (Number.parseFloat(font) || 10) * 0.6,
+        width: t.length * (Number.parseFloat(font) || 10) * CHAR_WIDTH_RATIO,
       }),
     } as unknown as CanvasRenderingContext2D
   } as unknown as typeof HTMLCanvasElement.prototype.getContext
 }
 
 /** the per-character width factor `measureText` above reports */
-export const TEST_CHAR_WIDTH_RATIO = 0.6
+export const CHAR_WIDTH_RATIO = 0.6

package/src/impgRender.test.tsx

@@ -11,13 +11,13 @@ 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 { installRenderTestEnv } from './renderTestEnv.ts'
 import { renderToSvg } from './renderToSvg.tsx'
 
 beforeAll(() => {
   enableStaticRendering(true)
-  installRenderTestEnv()
+  installHeadlessRenderEnv()
 })
 
 // representative `impg query -o fasta-aln` block: PanSN names with region

package/src/index.ts

@@ -6,6 +6,12 @@
 // members they rely on (e.g. mouseCol/setMousePos, setHighlightedColumns,
 // seqPosToVisibleCol/visibleColToSeqPos) are flagged inline in model.ts.
 export { renderToSvg } from './renderToSvg.tsx'
+// renderToSvg outside a browser needs DOM bits jsdom omits; react-msaview-cli
+// and the README figure generator both drive it that way
+export {
+  CHAR_WIDTH_RATIO,
+  installHeadlessRenderEnv,
+} from './headlessRenderEnv.ts'
 export { default as MSAView } from './components/Loading.tsx'
 export { default as MSAViewer } from './components/MSAViewer.tsx'
 export { type MsaViewModel, default as MSAModelF } from './model.ts'

package/src/model/treeModel.ts

@@ -56,7 +56,7 @@ export function TreeModelF() {
 
       /**
        * #property
-       * draw clickable node bubbles on the tree
+       * draw node bubbles on the tree; the branches stay clickable either way
        */
       drawNodeBubbles: stripDefault(types.boolean, defaultDrawNodeBubbles),
 

package/src/renderDomainsSvg.test.tsx

@@ -8,13 +8,13 @@ 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 { installRenderTestEnv } from './renderTestEnv.ts'
 import { renderToSvg } from './renderToSvg.tsx'
 
 beforeAll(() => {
   enableStaticRendering(true)
-  installRenderTestEnv()
+  installHeadlessRenderEnv()
 })
 
 const msa = `>seq1

package/src/renderMinimapSvg.test.tsx

@@ -1,26 +1,26 @@
 // @vitest-environment jsdom
 //
-// The viewport export draws a minimap by default, and nothing covered it. The
-// export lays the figure out on its own grid rather than the on-screen one, so
-// the minimap has to be told how wide to draw -- reading a width off the model
-// puts its trapezoid short of the alignment column beside it.
+// 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 { enableStaticRendering } from 'mobx-react'
 import { beforeAll, expect, test } from 'vitest'
 
+import { installHeadlessRenderEnv } from './headlessRenderEnv.ts'
 import MSAModelF from './model.ts'
-import { installRenderTestEnv } from './renderTestEnv.ts'
 import { renderToSvg } from './renderToSvg.tsx'
 
 beforeAll(() => {
   enableStaticRendering(true)
-  installRenderTestEnv()
+  installHeadlessRenderEnv()
 })
 
 const width = 1000
 
-function makeModel() {
-  const row = 'ACDEFGHIKL'.repeat(40)
+function makeModel(cols = 400) {
+  const row = 'ACDEFGHIKL'.repeat(cols / 10)
   const model = MSAModelF().create({
     type: 'MsaView',
     msaFormat: 'fasta',
@@ -31,19 +31,24 @@ function makeModel() {
   return model
 }
 
-test('the exported minimap spans the exported alignment column', async () => {
-  const model = makeModel()
-  expect(model.showHorizontalScrollbar).toBe(true)
-
-  const svg = await renderToSvg(model, {
+function exportViewport(model: ReturnType<typeof makeModel>) {
+  return renderToSvg(model, {
     theme: createJBrowseTheme(),
     exportType: 'viewport',
     includeMinimap: true,
     includeTracks: false,
   })
+}
 
-  // the minimap column runs from the tree area to the right edge of the figure
-  const minimapWidth = width - model.treeAreaWidth
+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
@@ -53,3 +58,12 @@ test('the exported minimap spans the exported alignment column', async () => {
   // 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

@@ -0,0 +1,216 @@
+// @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 { enableStaticRendering } from 'mobx-react'
+import { beforeAll, expect, test } from 'vitest'
+
+import MSAModelF from './model.ts'
+import { renderToSvg } from './renderToSvg.tsx'
+
+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(() => {
+  enableStaticRendering(true)
+  globalThis.DOMMatrix = class {
+    a = 1
+    b = 0
+    c = 0
+    d = 1
+    e = 0
+    f = 0
+    constructor(init?: number[]) {
+      const [a = 1, b = 0, c = 0, d = 1, e = 0, f = 0] = init ?? []
+      Object.assign(this, { a, b, c, d, e, f })
+    }
+    multiply(o: any) {
+      return new (globalThis.DOMMatrix as any)([
+        this.a * o.a + this.c * o.b,
+        this.b * o.a + this.d * o.b,
+        this.a * o.c + this.c * o.d,
+        this.b * o.c + this.d * o.d,
+        this.a * o.e + this.c * o.f + this.e,
+        this.b * o.e + this.d * o.f + this.f,
+      ])
+    }
+    translate(x: number, y = 0) {
+      return this.multiply(
+        new (globalThis.DOMMatrix as any)([1, 0, 0, 1, x, y]),
+      )
+    }
+    scale(x: number, y = x) {
+      return this.multiply(
+        new (globalThis.DOMMatrix as any)([x, 0, 0, y, 0, 0]),
+      )
+    }
+  } as any
+  globalThis.DOMPoint = class {
+    constructor(
+      public x = 0,
+      public y = 0,
+    ) {}
+    matrixTransform(m: any) {
+      return new (globalThis.DOMPoint as any)(
+        m.a * this.x + m.c * this.y + m.e,
+        m.b * this.x + m.d * this.y + m.f,
+      )
+    }
+  } as any
+
+  HTMLCanvasElement.prototype.getContext = function () {
+    let font = '10px sans-serif'
+    let fillStyle = '#000000'
+    return {
+      get font() {
+        return font
+      },
+      set font(v: string) {
+        font = v
+      },
+      get fillStyle() {
+        return fillStyle
+      },
+      set fillStyle(v: string) {
+        fillStyle = v
+      },
+      measureText: (t: string) => ({
+        width: t.length * (Number.parseFloat(font) || 10) * 0.6,
+      }),
+      clearRect: () => {},
+      fillRect: () => {},
+      createImageData: (width: number, height: number) => ({
+        data: new Uint8ClampedArray(width * height * 4),
+        width,
+        height,
+      }),
+      putImageData: () => {},
+      getImageData: () => ({ data: Uint8ClampedArray.from([1, 2, 3, 255]) }),
+    } as unknown as CanvasRenderingContext2D
+  } as unknown as typeof HTMLCanvasElement.prototype.getContext
+  HTMLCanvasElement.prototype.toDataURL = () => dataUrl
+})
+
+function makeModel(rows: number, cols: number) {
+  const letters = 'ACDEFGHIKLMNPQRSTVWY'
+  const msa = Array.from({ length: rows }, (_, r) => {
+    let s = ''
+    for (let c = 0; c < cols; c++) {
+      s += letters[(r * 7 + c * 3) % letters.length]
+    }
+    return `>seq${r}\n${s}`
+  }).join('\n')
+  const model = MSAModelF().create({
+    id: 'raster',
+    type: 'MsaView',
+    height: 400,
+    msaFormat: 'fasta',
+    data: { msa },
+  })
+  model.setWidth(800)
+  return model
+}
+
+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

@@ -10,13 +10,16 @@ import { createJBrowseTheme } from '@jbrowse/core/ui/theme'
 import { enableStaticRendering } from 'mobx-react'
 import { beforeAll, expect, test } from 'vitest'
 
+import {
+  CHAR_WIDTH_RATIO,
+  installHeadlessRenderEnv,
+} from './headlessRenderEnv.ts'
 import MSAModelF from './model.ts'
-import { TEST_CHAR_WIDTH_RATIO, installRenderTestEnv } from './renderTestEnv.ts'
 import { renderToSvg } from './renderToSvg.tsx'
 
 beforeAll(() => {
   enableStaticRendering(true)
-  installRenderTestEnv()
+  installHeadlessRenderEnv()
 })
 
 // column 0 is fully conserved A, column 1 is a 3:1 split of C over G, and
@@ -159,8 +162,7 @@ test('letters are stretched to fill their column', async () => {
   model.toggleTrack('sequence-logo')
   const glyphs = await glyphsOf(model)
 
-  const expected =
-    colWidth / (model.sequenceLogoTrackHeight * TEST_CHAR_WIDTH_RATIO)
+  const expected = colWidth / (model.sequenceLogoTrackHeight * CHAR_WIDTH_RATIO)
   for (const glyph of glyphs) {
     expect(glyph.sx).toBeCloseTo(expected, 5)
   }

package/src/renderToSvg.test.tsx

@@ -0,0 +1,79 @@
+// @vitest-environment jsdom
+//
+// Layout and palette of the exported figure itself, as opposed to what any one
+// layer draws inside it.
+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'
+
+beforeAll(() => {
+  enableStaticRendering(true)
+  installHeadlessRenderEnv()
+})
+
+function makeModel({ rows = 60, cols = 400 } = {}) {
+  const letters = 'ACDEFGHIKLMNPQRSTVWY'
+  const msa = Array.from({ length: rows }, (_, r) => {
+    const seq = Array.from(
+      { length: cols },
+      (_, c) => letters[(r * 7 + c * 3) % letters.length],
+    ).join('')
+    return `>seq${r}\n${seq}`
+  }).join('\n')
+  const model = MSAModelF().create({
+    type: 'MsaView',
+    msaFormat: 'fasta',
+    height: 400,
+    data: { msa },
+  })
+  model.setWidth(800)
+  return model
+}
+
+const rootRect = (svg: string) => /<rect[^>]*height="100%"[^>]*>/.exec(svg)?.[0]
+
+test('the page takes the theme background, not a hardcoded white', async () => {
+  const model = makeModel()
+  const dark = createJBrowseTheme({ palette: { mode: 'dark' } })
+  expect(dark.palette.background.default).not.toBe('white')
+
+  const svg = await renderToSvg(model, { theme: dark, exportType: 'entire' })
+
+  // the layers below draw in theme colors: text.primary is near-white in a dark
+  // theme, so a white page would export white on white
+  expect(rootRect(svg)).toContain(`fill="${dark.palette.background.default}"`)
+})
+
+test('a viewport export is the alignment canvas, not the whole widget', async () => {
+  const model = makeModel()
+  expect(model.showHorizontalScrollbar).toBe(true)
+  expect(model.showVerticalScrollbar).toBe(true)
+
+  const svg = await renderToSvg(model, {
+    theme: createJBrowseTheme(),
+    exportType: 'viewport',
+    includeMinimap: true,
+  })
+
+  // the widget box also covers the resize handle and the scrollbars; exporting
+  // it drew the rows and columns those hide
+  const { treeAreaWidth, msaCanvasWidth, msaAreaHeight, minimapHeight } = model
+  expect(svg).toContain(`width="${treeAreaWidth + msaCanvasWidth}"`)
+  expect(svg).toContain(`height="${msaAreaHeight + minimapHeight}"`)
+  expect(msaAreaHeight + minimapHeight).toBe(model.height)
+})
+
+test('no attribute is serialized as the string "undefined"', async () => {
+  const model = makeModel({ rows: 4, cols: 20 })
+  const svg = await renderToSvg(model, {
+    theme: createJBrowseTheme(),
+    exportType: 'entire',
+  })
+
+  expect(svg).toContain('<text')
+  expect(svg).not.toContain('="undefined"')
+})