react-msaview 6.1.1 → 6.2.1

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/model.ts

@@ -1,7 +1,13 @@
 import { clamp, groupBy, notEmpty, sum } from '@jbrowse/core/util'
 import { openLocation } from '@jbrowse/core/util/io'
 import { ElementId, FileLocation } from '@jbrowse/core/util/types/mst'
-import { addDisposer, cast, types } from '@jbrowse/mobx-state-tree'
+import {
+  addDisposer,
+  applySnapshot,
+  cast,
+  getSnapshot,
+  types,
+} from '@jbrowse/mobx-state-tree'
 import { colord } from 'colord'
 import { autorun, transaction } from 'mobx'
 import {
@@ -107,6 +113,46 @@ function parseTreeText(text: string) {
 // asked for.
 const defaultOffTracks = new Set(['sequence-logo'])
 
+/**
+ * The snapshot properties reset() carries across a return to the import form:
+ * display preferences and layout, nothing derived from the loaded file.
+ *
+ * reset() applies a default snapshot filtered to this list, so the list is the
+ * whole decision: a property left off it resets to its default, a visible and
+ * benign failure. The previous shape — a hand-maintained list of things to
+ * CLEAR — failed in the dangerous direction: a forgotten property silently
+ * carried the previous file's state into the next one, and because node ids
+ * are path-derived (node-0-0-1), a stale `collapsed` or `showOnly` id matched
+ * a real node in the new tree and folded it. Downstream composed properties
+ * (e.g. the jbrowse plugin's) are not on the list, so they reset too.
+ *
+ * Exported for modelReset.test.ts, which checks that everything off this list
+ * matches a freshly created model after reset().
+ */
+export const preservedOnReset = new Set([
+  'id',
+  'type',
+  'height',
+  'drawMsaLetters',
+  'scrollZoom',
+  'bgColor',
+  'colorSchemeName',
+  'showColumnStats',
+  'drawLabels',
+  'labelsAlignRight',
+  'treeAreaWidth',
+  'treeWidth',
+  'showBranchLen',
+  'drawTree',
+  'drawNodeBubbles',
+  'autoTreeAreaWidth',
+  'turnedOffTracks',
+  'hideGaps',
+  'allowedGappyness',
+  'subFeatureRows',
+  'showDomainLegend',
+])
+
 // `turnedOffTracks` records the user's explicit choices only: an id is absent
 // until they touch that track, and then its value is whether the track is OFF.
 // Reading the default through this is what lets a track ship hidden without
@@ -622,6 +668,13 @@ function stateModelFactory() {
         self.gffFilehandle = gffFilehandle
       },
 
+      /**
+       * #action
+       */
+      setTreeMetadataFilehandle(treeMetadataFilehandle?: FileLocationType) {
+        self.treeMetadataFilehandle = treeMetadataFilehandle
+      },
+
       /**
        * #action
        */
@@ -2058,21 +2111,26 @@ function stateModelFactory() {
       },
       /**
        * #action
+       * Return to the import form: every property off `preservedOnReset`
+       * (data, filehandles, collapsed/showOnly, zoom, scroll, ...) goes back
+       * to its default, then the file-derived volatiles applySnapshot cannot
+       * reach are cleared by hand.
        */
       reset() {
-        self.setData({
-          tree: '',
-          msa: '',
-        })
-        self.resetZoom()
+        applySnapshot(
+          self,
+          Object.fromEntries(
+            Object.entries(getSnapshot(self) as Record<string, unknown>).filter(
+              ([key]) => preservedOnReset.has(key),
+            ),
+          ),
+        )
         self.setError(undefined)
-        self.setScrollY(0)
-        self.setScrollX(0)
-        self.setCurrentAlignment(0)
-        self.setTreeFilehandle(undefined)
-        self.setMSAFilehandle(undefined)
-        self.setGFFFilehandle(undefined)
         self.setAnnotations([])
+        self.setHighlightedColumns(undefined)
+        self.setMousePos(undefined, undefined)
+        self.setMouseClickPos(undefined, undefined)
+        self.setHoveredTreeNode(undefined)
       },
       /**
        * #action
@@ -2205,10 +2263,16 @@ function stateModelFactory() {
             self,
             autorun(async () => {
               const filehandle = getFilehandle()
+              // a cleared filehandle bumps the generation too, so a reset()
+              // mid-download invalidates the in-flight fetch instead of letting
+              // its onLoad land on the emptied model. That also orphans the
+              // invalidated run's `finally`, so the loading flag is cleared
+              // here on its behalf
+              const current = ++generation
               if (!filehandle) {
+                setLoading?.(false)
                 return
               }
-              const current = ++generation
               const isCurrent = () => current === generation
               try {
                 setLoading?.(true)

package/src/modelReset.test.ts

@@ -0,0 +1,120 @@
+// reset() returns the view to the import form, and the next file loads into
+// the same model instance. It applies a default snapshot filtered to
+// preservedOnReset, so anything file-derived that survived would be a hole in
+// that list — the last test enumerates the snapshot keys to keep the list and
+// the model's properties from drifting apart as properties are added. The
+// stakes: node ids are path-derived (node-0-0-1), so a stale collapsed or
+// showOnly id names a real node in the next tree and folds it.
+import { getSnapshot } from '@jbrowse/mobx-state-tree'
+import { describe, expect, test } from 'vitest'
+
+import MSAModelF, { preservedOnReset } from './model.ts'
+
+const firstFile = {
+  msa: '>a\nACGT\n>b\nACGT\n>c\nACGT\n>d\nACGT',
+  tree: '((a,b),(c,d));',
+}
+const secondFile = {
+  msa: '>e\nTTTT\n>f\nTTTT\n>g\nTTTT\n>h\nTTTT',
+  tree: '((e,f),(g,h));',
+}
+
+function makeModel() {
+  const model = MSAModelF().create({ type: 'MsaView', data: firstFile })
+  model.setWidth(800)
+  return model
+}
+
+function internalNodeId(model: ReturnType<typeof makeModel>) {
+  return model.leaves[0]!.parent!.data.id
+}
+
+describe('reset', () => {
+  test('a collapsed clade does not fold the next loaded tree', () => {
+    const model = makeModel()
+    model.toggleCollapsed(internalNodeId(model))
+    expect(model.leaves.length).toBe(3)
+
+    model.reset()
+    model.setData(secondFile)
+    expect(model.collapsed.length).toBe(0)
+    expect(model.leaves.map(l => l.data.name).toSorted()).toEqual([
+      'e',
+      'f',
+      'g',
+      'h',
+    ])
+  })
+
+  test('showOnly does not restrict the next loaded tree', () => {
+    const model = makeModel()
+    model.setShowOnly(internalNodeId(model))
+    expect(model.leaves.length).toBe(2)
+
+    model.reset()
+    model.setData(secondFile)
+    expect(model.showOnly).toBe(undefined)
+    expect(model.leaves.length).toBe(4)
+  })
+
+  test('clears file-derived volatiles', () => {
+    const model = makeModel()
+    model.setMousePos(2, 1)
+    model.setMouseClickPos(3, 0)
+    model.setHighlightedColumns([1, 2])
+    model.setHoveredTreeNode(internalNodeId(model))
+
+    model.reset()
+    expect(model.mouseCol).toBe(undefined)
+    expect(model.mouseClickCol).toBe(undefined)
+    expect(model.highlightedColumns).toBe(undefined)
+    expect(model.hoveredTreeNode).toBe(undefined)
+    expect(model.error).toBe(undefined)
+    expect(model.annotations).toEqual([])
+  })
+
+  test('display preferences survive', () => {
+    const model = makeModel()
+    model.setColorSchemeName('clustalx')
+    model.setDrawNodeBubbles(false)
+    model.toggleTrack('conservation')
+
+    model.reset()
+    expect(model.colorSchemeName).toBe('clustalx')
+    expect(model.drawNodeBubbles).toBe(false)
+    expect(model.turnedOffTracks.get('conservation')).toBe(true)
+  })
+
+  test('every property off preservedOnReset matches a fresh model', () => {
+    const model = makeModel()
+    model.toggleCollapsed(internalNodeId(model))
+    model.setShowOnly(internalNodeId(model))
+    model.drawRelativeTo('a')
+    model.setFilter('PF00001', true)
+    model.setScrollX(-100)
+    model.setScrollY(-50)
+    model.zoomIn()
+    model.setCurrentAlignment(1)
+    model.setMSAFilehandle({
+      uri: 'http://x/msa.fa',
+      locationType: 'UriLocation',
+    })
+    model.setTreeFilehandle({
+      uri: 'http://x/t.nh',
+      locationType: 'UriLocation',
+    })
+    model.setTreeMetadataFilehandle({
+      uri: 'http://x/m.json',
+      locationType: 'UriLocation',
+    })
+    model.setMSAFormat('fasta')
+
+    model.reset()
+    const fresh = MSAModelF().create({ type: 'MsaView' })
+    const strip = (snap: object) =>
+      Object.fromEntries(
+        Object.entries(snap).filter(([key]) => !preservedOnReset.has(key)),
+      )
+    expect(strip(getSnapshot(model))).toEqual(strip(getSnapshot(fresh)))
+  })
+})

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