react-msaview 6.2.2 → 6.3.0

package/src/renderHighlightsSvg.test.tsx

@@ -0,0 +1,85 @@
+// @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

@@ -5,30 +5,23 @@
 // 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 { renderToSvg } from './renderToSvg.tsx'
+import { createTestModel, installSvgTestEnv } from './svgTestUtil.ts'
 
 beforeAll(() => {
-  enableStaticRendering(true)
-  installHeadlessRenderEnv()
+  installSvgTestEnv()
 })
 
 const width = 1000
 
 function makeModel(cols = 400) {
   const row = 'ACDEFGHIKL'.repeat(cols / 10)
-  const model = MSAModelF().create({
-    type: 'MsaView',
-    msaFormat: 'fasta',
-    height: 300,
-    data: { msa: `>seq1\n${row}\n>seq2\n${row}` },
-  })
-  model.setWidth(width)
-  return model
+  return createTestModel(
+    { height: 300, data: { msa: `>seq1\n${row}\n>seq2\n${row}` } },
+    width,
+  )
 }
 
 function exportViewport(model: ReturnType<typeof makeModel>) {

package/src/renderRasterSvg.test.tsx

@@ -5,114 +5,42 @@
 // 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'
+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(() => {
-  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
+  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) {
-  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({
+  return createTestModel({
     id: 'raster',
-    type: 'MsaView',
-    height: 400,
-    msaFormat: 'fasta',
-    data: { msa },
+    data: { msa: syntheticProteinMsa(rows, cols) },
   })
-  model.setWidth(800)
-  return model
 }
 
 function exportEntire(model: ReturnType<typeof makeModel>) {

package/src/renderSequenceLogoSvg.test.tsx

@@ -7,19 +7,14 @@
 // 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 { enableStaticRendering } from 'mobx-react'
 import { beforeAll, expect, test } from 'vitest'
 
-import {
-  CHAR_WIDTH_RATIO,
-  installHeadlessRenderEnv,
-} from './headlessRenderEnv.ts'
-import MSAModelF from './model.ts'
+import { CHAR_WIDTH_RATIO } from './headlessRenderEnv.ts'
 import { renderToSvg } from './renderToSvg.tsx'
+import { createTestModel, installSvgTestEnv } from './svgTestUtil.ts'
 
 beforeAll(() => {
-  enableStaticRendering(true)
-  installHeadlessRenderEnv()
+  installSvgTestEnv()
 })
 
 // column 0 is fully conserved A, column 1 is a 3:1 split of C over G, and
@@ -28,15 +23,7 @@ const msa = `>s1\nACA\n>s2\nACC\n>s3\nACG\n>s4\nAGT\n`
 const colWidth = 40
 
 function makeModel() {
-  const model = MSAModelF().create({
-    type: 'MsaView',
-    msaFormat: 'fasta',
-    height: 400,
-    colWidth,
-    data: { msa },
-  })
-  model.setWidth(1000)
-  return model
+  return createTestModel({ colWidth, data: { msa } }, 1000)
 }
 
 async function exportSvg(model: ReturnType<typeof makeModel>) {

package/src/renderToSvg.test.tsx

@@ -3,35 +3,21 @@
 // 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'
+import {
+  createTestModel,
+  installSvgTestEnv,
+  syntheticProteinMsa,
+} from './svgTestUtil.ts'
 
 beforeAll(() => {
-  enableStaticRendering(true)
-  installHeadlessRenderEnv()
+  installSvgTestEnv()
 })
 
 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
+  return createTestModel({ data: { msa: syntheticProteinMsa(rows, cols) } })
 }
 
 const rootRect = (svg: string) => /<rect[^>]*height="100%"[^>]*>/.exec(svg)?.[0]

package/src/renderToSvg.tsx

@@ -8,6 +8,7 @@ import { visibleRowRange } from './components/getVisibleLeaves.ts'
 import MinimapSVG from './components/minimap/MinimapSVG.tsx'
 import { rasterImageHref, rasterSupported } from './components/msa/msaRaster.ts'
 import { renderBoxFeatureCanvasBlock } from './components/msa/renderBoxFeatureCanvasBlock.ts'
+import { renderHighlights } from './components/msa/renderHighlights.ts'
 import { renderMSABlock } from './components/msa/renderMSABlock.ts'
 import { visibleColRange } from './components/msa/visibleColRange.ts'
 import { renderAllTracks } from './components/tracks/drawTracks.ts'
@@ -45,6 +46,10 @@ function getLegendWidth(model: MsaViewModel) {
   return Math.min(LEGEND_MAX_W, Math.max(120, w))
 }
 
+function legendHeight(domainTypes: unknown[]) {
+  return LEGEND_PAD * 2 + domainTypes.length * LEGEND_ROW_H
+}
+
 // resolved sizes/offsets (in svg user units) for the chosen export, shared by
 // every layer; 'entire' renders the whole alignment unscrolled, 'viewport'
 // mirrors the live scroll position
@@ -119,7 +124,12 @@ function getLayout(model: MsaViewModel, opts: ExportSvgOptions): Layout {
 }
 
 export async function renderToSvg(model: MsaViewModel, opts: ExportSvgOptions) {
-  await when(() => model.dataInitialized)
+  // dataInitialized stays false while the model holds a load error, so waiting
+  // on it alone would never settle
+  await when(() => model.dataInitialized || !!model.error)
+  if (model.error) {
+    throw model.error
+  }
   const { Context } = await import('@jbrowse/svgcanvas')
   return renderToStaticMarkup(
     <MsaSvg
@@ -142,10 +152,16 @@ function MsaSvg({
   Context: typeof ContextType
   layout: Layout
 }) {
-  const { width, height, trackHeight, includeMinimap, legendWidth } = layout
-  const { treeAreaWidth, minimapHeight } = model
+  const { width, trackHeight, includeMinimap, legendWidth } = layout
+  const { treeAreaWidth, minimapHeight, visibleDomainTypes } = model
   const totalWidth = width + legendWidth
   const legendTop = includeMinimap ? minimapHeight : 0
+  // a short alignment with many domain types has a key taller than its rows,
+  // and the page has to hold the whole key
+  const height =
+    legendWidth > 0
+      ? Math.max(layout.height, legendTop + legendHeight(visibleDomainTypes))
+      : layout.height
   const contrastScheme = colorContrast(model.colorScheme, theme)
   const props = { Context, model, theme, layout, contrastScheme }
 
@@ -207,7 +223,7 @@ function LegendSVG({
   width: number
 }) {
   const { visibleDomainTypes, fillPalette, strokePalette } = model
-  const boxHeight = LEGEND_PAD * 2 + visibleDomainTypes.length * LEGEND_ROW_H
+  const boxHeight = legendHeight(visibleDomainTypes)
   // the column is capped at LEGEND_MAX_W, so a name too long for it has to be
   // clipped here -- text that overruns the reserved width runs off the figure
   const maxChars = Math.floor(
@@ -221,7 +237,7 @@ function LegendSVG({
         width={width - 4}
         height={boxHeight}
         fill={theme.palette.background.paper}
-        stroke="#ccc"
+        stroke={theme.palette.divider}
         rx={2}
       />
       {visibleDomainTypes.map((d, i) => {
@@ -307,6 +323,16 @@ function CoreRendering({
     highResScaleFactorOverride: 1,
     rasterTiles: !!raster,
   })
+  msaCtx.resetTransform()
+  renderHighlights({
+    ctx: msaCtx,
+    model,
+    theme,
+    offsetX,
+    offsetY,
+    width: msaAreaWidth,
+    height: contentHeight,
+  })
 
   return (
     <>
@@ -364,7 +390,7 @@ function rasterBackground({
     blockSizeY: contentHeight,
   })
   const numCols = Math.min(xEnd, model.numColumns) - xStart
-  const numRows = Math.min(yEnd, model.leaves.length) - yStart
+  const numRows = Math.min(yEnd, model.numRows) - yStart
   const href = rasterImageHref({
     model,
     theme,

package/src/svgTestUtil.ts

@@ -0,0 +1,40 @@
+// Shared setup for the tests that drive renderToSvg headlessly.
+import { enableStaticRendering } from 'mobx-react'
+
+import { installHeadlessRenderEnv } from './headlessRenderEnv.ts'
+import MSAModelF from './model.ts'
+
+type Snapshot = NonNullable<
+  Parameters<ReturnType<typeof MSAModelF>['create']>[0]
+>
+
+export function installSvgTestEnv(
+  contextExtras?: Partial<CanvasRenderingContext2D>,
+) {
+  enableStaticRendering(true)
+  installHeadlessRenderEnv(globalThis, contextExtras)
+}
+
+export function createTestModel(snapshot: Omit<Snapshot, 'type'>, width = 800) {
+  const model = MSAModelF().create({
+    type: 'MsaView',
+    msaFormat: 'fasta',
+    height: 400,
+    ...snapshot,
+  })
+  model.setWidth(width)
+  return model
+}
+
+// a protein alignment with no two neighbouring cells alike, so any color or
+// letter landing in the wrong cell shows up
+export function syntheticProteinMsa(rows: number, cols: number) {
+  const letters = 'ACDEFGHIKLMNPQRSTVWY'
+  return 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')
+}

package/src/types.ts

@@ -34,6 +34,22 @@ export interface BasicTrack {
   model: TextTrackModel & BarTrackModel
 }
 
+// a track supplied as data in the snapshot rather than computed from the
+// alignment. `values` (bar) or `data` (text) index alignment columns, or the
+// 1-based residues of `row` when it names one
+export interface ColumnTrackSpec {
+  id: string
+  name: string
+  kind: 'bar' | 'text'
+  values?: number[]
+  data?: string
+  max?: number
+  color?: string
+  colors?: Record<string, string>
+  row?: string
+  height?: number
+}
+
 // the overlay annotation itself lives in msa-parsers, alongside the adapters
 // that build it. TidyDomainAnnotation is its former name, kept because
 // downstream plugins name it in their emitted declarations.
@@ -50,6 +66,29 @@ export interface DomainBand {
   stackIndex: number
 }
 
+/**
+ * A persistent, labeled highlight. Coordinates are 1-based and inclusive, as
+ * GFF's are. `row` makes `start`/`end` residues of that row; without it they
+ * are alignment columns. `rows` marks whole rows instead.
+ */
+export interface Highlight {
+  row?: string
+  rows?: string[]
+  start?: number
+  end?: number
+  label?: string
+  color?: string
+}
+
+/** a Highlight resolved to visible column indices and row indices */
+export interface ResolvedHighlight {
+  startCol?: number
+  endCol?: number
+  rowIndices: number[]
+  label?: string
+  color?: string
+}
+
 export interface Node {
   children?: Node[]
   name?: string

package/src/umd.ts

@@ -1,5 +1,8 @@
 import * as React from 'react'
 
+// a host that swaps models (the R htmlwidget on re-render) has to destroy the
+// old one, or the disposers its autoruns registered never run
+export { destroy } from '@jbrowse/mobx-state-tree'
 export { default as MSAView } from './components/Loading.tsx'
 export { type MsaViewModel, default as MSAModelF } from './model.ts'
 

package/src/util.ts

@@ -46,6 +46,14 @@ export function colorContrast(
   ])
 }
 
+export function dropBlanks<T>(blanks: number[], arr: T[]) {
+  if (blanks.length === 0) {
+    return arr
+  }
+  const set = new Set(blanks)
+  return arr.filter((_, i) => !set.has(i))
+}
+
 export function skipBlanks(blanks: number[], str: string) {
   if (blanks.length === 0) {
     return str

package/src/version.ts

@@ -1 +1 @@
-export const version = '6.2.2'
+export const version = '6.3.0'