react-msaview 6.1.1 → 6.2.0

package/src/components/minimap/MinimapSVG.tsx

@@ -1,46 +1,61 @@
 import React from 'react'
 
-import { observer } from 'mobx-react'
-
+import { scrollbarThumbFill } from '../DragHandle.tsx'
+import { canvasHref, msaThumbnail } from '../msa/msaRaster.ts'
 import { MINIMAP_BAR_HEIGHT, getMinimapLayout } from './minimapLayout.ts'
 
 import type { MsaViewModel } from '../../model.ts'
+import type { Theme } from '@mui/material'
 
-const MinimapSVG = observer(
-  ({ model, width }: { model: MsaViewModel; width: number }) => {
-    const { s, w, polygonPoints } = getMinimapLayout(model, width)
-    const fillColor = 'rgb(66, 119, 127)'
-    const fillOpacity = 0.3
+// The static counterpart to Minimap, for the SVG export. renderToSvg drives it
+// through renderToStaticMarkup, so it reads the model once and never re-renders
+// -- no observer wrapper.
+export default function MinimapSVG({
+  model,
+  theme,
+}: {
+  model: MsaViewModel
+  theme: Theme
+}) {
+  const { msaCanvasWidth } = model
+  const { s, w, polygonPoints } = getMinimapLayout(model)
+  // the same downsampled alignment the live minimap draws behind its thumb;
+  // undefined wherever a canvas cannot be read back, leaving a bare outline
+  const href = canvasHref(
+    msaThumbnail({ model, theme, height: MINIMAP_BAR_HEIGHT }),
+  )
 
-    return (
-      <>
-        <rect
+  return (
+    <>
+      {href ? (
+        <image
+          href={href}
           x={0}
           y={0}
-          width={width}
+          width={msaCanvasWidth}
           height={MINIMAP_BAR_HEIGHT}
-          stroke="#555"
-          fill="none"
+          preserveAspectRatio="none"
         />
-        <rect
-          x={Math.max(0, s)}
-          y={0}
-          width={w}
-          height={MINIMAP_BAR_HEIGHT}
-          fill={fillColor}
-          fillOpacity={fillOpacity}
-          stroke="#555"
-        />
-        <g transform={`translate(0 ${MINIMAP_BAR_HEIGHT})`}>
-          <polygon
-            fill={fillColor}
-            fillOpacity={fillOpacity}
-            points={polygonPoints}
-          />
-        </g>
-      </>
-    )
-  },
-)
-
-export default MinimapSVG
+      ) : null}
+      <rect
+        x={0}
+        y={0}
+        width={msaCanvasWidth}
+        height={MINIMAP_BAR_HEIGHT}
+        stroke="#555"
+        fill="none"
+      />
+      <rect
+        x={Math.max(0, s)}
+        y={0}
+        width={w}
+        height={MINIMAP_BAR_HEIGHT}
+        fill={scrollbarThumbFill}
+        stroke="#555"
+      />
+      <g transform={`translate(0 ${MINIMAP_BAR_HEIGHT})`}>
+        <polygon fill={scrollbarThumbFill} points={polygonPoints} />
+      </g>
+    </>
+  )
+}

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

@@ -23,7 +23,7 @@ test('the viewport rectangle scales by the canvas width, not the msa area', () =
   expect(model.showVerticalScrollbar).toBe(true)
   expect(model.msaCanvasWidth).toBe(model.msaAreaWidth - 20)
 
-  const { unit, s, w } = getMinimapLayout(model, model.msaCanvasWidth)
+  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
@@ -34,12 +34,12 @@ test('the viewport rectangle scales by the canvas width, not the msa area', () =
   )
 })
 
-test('the rectangle tracks scrollX and the trapezoid spans the given width', () => {
+test('the rectangle tracks scrollX and the trapezoid spans the bar', () => {
   const model = makeModel()
   model.setScrollX(-300)
 
-  const width = 400
-  const { s, polygonHeight, polygonPoints } = getMinimapLayout(model, width)
+  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
@@ -48,11 +48,22 @@ test('the rectangle tracks scrollX and the trapezoid spans the given width', ()
   ).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, 400)
+  const { unit, s, w } = getMinimapLayout(model)
   expect(unit).toBe(0)
   expect(s).toBeCloseTo(0)
   // still clamped to the minimum grabbable width

package/src/components/minimap/minimapLayout.ts

@@ -3,20 +3,19 @@ import type { MsaViewModel } from '../../model.ts'
 export const MINIMAP_BAR_HEIGHT = 12
 
 /**
- * Viewport-rectangle and trapezoid geometry for a minimap drawn `minimapWidth`
- * pixels wide, shared by the interactive Minimap and the static MinimapSVG.
- *
- * The width is a parameter rather than read off the model because the two
- * differ: on screen the minimap sits over the alignment canvas, while the SVG
- * export lays the whole figure out on its own grid. What the rectangle *marks*
- * is always the on-screen viewport, so that part comes from the model.
+ * Viewport-rectangle and trapezoid geometry for the minimap, shared by the
+ * interactive Minimap and the static MinimapSVG. Both span the alignment canvas
+ * exactly -- a minimap drawn a different width than the columns it maps puts
+ * its viewport rectangle over the wrong ones.
  */
-export function getMinimapLayout(model: MsaViewModel, minimapWidth: number) {
+export function getMinimapLayout(model: MsaViewModel) {
   const { scrollX, minimapHeight, totalWidth, msaCanvasWidth } = model
-  const unit = totalWidth > 0 ? minimapWidth / totalWidth : 0
+  const unit = totalWidth > 0 ? msaCanvasWidth / totalWidth : 0
   const s = -scrollX * unit
-  const w = Math.max(msaCanvasWidth * unit, 20)
+  // the rectangle marks the visible slice of the alignment, so it can never be
+  // wider than the bar itself
+  const w = Math.min(msaCanvasWidth, Math.max(msaCanvasWidth * unit, 20))
   const polygonHeight = minimapHeight - MINIMAP_BAR_HEIGHT
-  const polygonPoints = `${s + w},0 ${s},0 0,${polygonHeight} ${minimapWidth},${polygonHeight}`
+  const polygonPoints = `${s + w},0 ${s},0 0,${polygonHeight} ${msaCanvasWidth},${polygonHeight}`
   return { unit, s, w, polygonHeight, polygonPoints }
 }

package/src/components/msa/msaRaster.ts

@@ -11,7 +11,7 @@ const maxCachedTiles = 64
 const maxThumbnailColumns = 2000
 const maxColorCacheEntries = 4096
 
-type RasterCanvas = HTMLCanvasElement | OffscreenCanvas
+export type RasterCanvas = HTMLCanvasElement | OffscreenCanvas
 type RasterCtx = CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D
 
 export interface RasterSpec {
@@ -125,23 +125,32 @@ export function rasterPixels({
   return out
 }
 
+// Getting a context object back is not the same as getting one that can do
+// this: the headless render shim hands back a context carrying only measureText,
+// which a truthiness test accepts and putImageData then does not survive. Name
+// the methods the raster actually calls, so every caller degrades together.
+function usableRasterCtx(ctx: unknown): ctx is RasterCtx {
+  const c = ctx as Record<string, unknown> | null
+  return (
+    !!c &&
+    typeof c.createImageData === 'function' &&
+    typeof c.putImageData === 'function' &&
+    typeof c.getImageData === 'function' &&
+    typeof c.clearRect === 'function' &&
+    typeof c.fillRect === 'function'
+  )
+}
+
 function makeRasterCanvas(width: number, height: number) {
-  if (typeof OffscreenCanvas !== 'undefined') {
-    const canvas = new OffscreenCanvas(width, height)
-    const ctx = canvas.getContext('2d', { willReadFrequently: true })
-    return ctx
-      ? { canvas: canvas as RasterCanvas, ctx: ctx as RasterCtx }
-      : undefined
-  }
-  if (typeof document === 'undefined') {
-    return undefined
-  }
-  const canvas = document.createElement('canvas')
-  canvas.width = width
-  canvas.height = height
-  const ctx = canvas.getContext('2d', { willReadFrequently: true })
-  return ctx
-    ? { canvas: canvas as RasterCanvas, ctx: ctx as RasterCtx }
+  const canvas =
+    typeof OffscreenCanvas !== 'undefined'
+      ? new OffscreenCanvas(width, height)
+      : typeof document !== 'undefined'
+        ? Object.assign(document.createElement('canvas'), { width, height })
+        : undefined
+  const ctx = canvas?.getContext('2d', { willReadFrequently: true })
+  return usableRasterCtx(ctx)
+    ? { canvas: canvas as RasterCanvas, ctx }
     : undefined
 }
 
@@ -308,6 +317,104 @@ export function drawMsaRaster({
   ctx.imageSmoothingEnabled = true
 }
 
+/**
+ * A raster canvas as a PNG data URI, for embedding in the SVG export.
+ *
+ * toDataURL is the synchronous read-back and only the DOM canvas has it, so an
+ * OffscreenCanvas -- which is what the tile and thumbnail caches hold wherever
+ * it exists -- gets copied onto one first. Returns undefined wherever the
+ * read-back is unavailable (jsdom) rather than throwing, which is the signal to
+ * fall back to drawing the thing in vector.
+ */
+export function canvasHref(canvas: RasterCanvas | undefined) {
+  if (!canvas || typeof document === 'undefined') {
+    return undefined
+  }
+  try {
+    if (canvas instanceof HTMLCanvasElement) {
+      return canvas.toDataURL('image/png')
+    }
+    const out = document.createElement('canvas')
+    out.width = canvas.width
+    out.height = canvas.height
+    const ctx = out.getContext('2d')
+    if (typeof ctx?.drawImage !== 'function') {
+      return undefined
+    }
+    ctx.drawImage(canvas as CanvasImageSource, 0, 0)
+    return out.toDataURL('image/png')
+  } catch {
+    return undefined
+  }
+}
+
+// A canvas much past this many pixels fails to allocate, and the browser's own
+// per-side limit is lower still, so a raster bigger than either samples down.
+// The result is still drawn across the same rectangle -- it loses cell-exact
+// detail at a size where no figure could show it anyway.
+const maxImagePixels = 64e6
+const maxImageSide = 16384
+
+/**
+ * The alignment rectangle [col0, col0+numCols) x [row0, row0+numRows) as a PNG
+ * data URI, for the SVG export.
+ *
+ * SVG has no blit, so the export cannot reuse the tile cache the live canvas
+ * draws from: one <image> is the whole background instead. That is the
+ * difference between an export that scales and one that does not -- the vector
+ * path emits a <rect> per cell, and a 200x500 alignment exhausts the heap
+ * building them.
+ *
+ * Returns undefined wherever a canvas cannot be read back (jsdom, notably),
+ * which is the signal to keep the per-cell path.
+ */
+export function rasterImageHref({
+  model,
+  theme,
+  col0,
+  row0,
+  numCols,
+  numRows,
+}: {
+  model: MsaViewModel
+  theme: Theme
+  col0: number
+  row0: number
+  numCols: number
+  numRows: number
+}) {
+  if (numCols <= 0 || numRows <= 0 || typeof document === 'undefined') {
+    return undefined
+  }
+  const cache = getCache(model, theme)
+  let step = 1
+  while (
+    Math.ceil(numCols / step) * Math.ceil(numRows / step) > maxImagePixels ||
+    Math.ceil(numCols / step) > maxImageSide ||
+    Math.ceil(numRows / step) > maxImageSide
+  ) {
+    step *= 2
+  }
+  const width = Math.ceil(numCols / step)
+  const height = Math.ceil(numRows / step)
+
+  return canvasHref(
+    paint(
+      rasterPixels({
+        spec: cache.spec,
+        col0,
+        row0,
+        width,
+        height,
+        colStep: step,
+        rowStep: step,
+      }),
+      width,
+      height,
+    ),
+  )
+}
+
 /**
  * The whole alignment sampled down to a strip small enough to sit behind the
  * minimap thumb, cached alongside the block tiles because it goes stale under

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/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')
+})