react-msaview 5.8.0 → 5.10.0

package/src/{renderDomainLegendSvg.test.tsx → renderDomainsSvg.test.tsx}

@@ -1,8 +1,9 @@
 // @vitest-environment jsdom
 //
-// Verifies the domain color-key legend is drawn as a reserved column on the
-// right of the SVG export when domains are shown. Polyfills mirror
-// impgRender.test.tsx (svgcanvas needs DOMMatrix/DOMPoint + a measureText).
+// 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 { enableStaticRendering } from 'mobx-react'
 import { beforeAll, expect, test } from 'vitest'
@@ -76,13 +77,17 @@ ACDEFGHIKL
 >seq2
 ACDE-GHIKL`
 
-function makeModel() {
+function makeModel({
+  data = msa,
+  start = 1,
+  end = 5,
+}: { data?: string; start?: number; end?: number } = {}) {
   const model = MSAModelF().create({
-    id: 'domain-legend-test',
+    id: 'domain-svg-test',
     type: 'MsaView',
     height: 400,
     msaFormat: 'fasta',
-    data: { msa },
+    data: { msa: data },
   })
   model.setWidth(800)
   model.setDomains({
@@ -97,7 +102,7 @@ function makeModel() {
               description: 'Protein kinase domain',
             },
           },
-          locations: [{ start: 1, end: 5 }],
+          locations: [{ start, end }],
         },
       ],
     },
@@ -105,18 +110,21 @@ function makeModel() {
   return model
 }
 
-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'])
-
-  const svg = await renderToSvg(model, {
+function exportEntire(model: ReturnType<typeof makeModel>) {
+  return renderToSvg(model, {
     theme: createJBrowseTheme(),
     exportType: 'entire',
     includeMinimap: false,
     includeTracks: false,
   })
-  expect(svg).toContain('Kinase')
+}
+
+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 () => {
@@ -124,11 +132,27 @@ test('no legend column when domains are hidden', async () => {
   model.setShowDomains(false)
   expect(model.actuallyShowDomains).toBe(false)
 
-  const svg = await renderToSvg(model, {
-    theme: createJBrowseTheme(),
-    exportType: 'entire',
-    includeMinimap: false,
-    includeTracks: false,
+  expect(await exportEntire(model)).not.toContain('Kinase')
+})
+
+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,
   })
-  expect(svg).not.toContain('Kinase')
+  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/renderToSvg.tsx

@@ -251,6 +251,9 @@ function CoreRendering({
     ctx: msaCtx,
     offsetX,
     offsetY,
+    // the overlay culls bands to this width; without it the export falls back
+    // to the on-screen 500px block size and drops every band past it
+    blockSizeXOverride: msaAreaWidth,
     blockSizeYOverride: contentHeight,
     highResScaleFactorOverride: 1,
   })

package/src/seqPosToGlobalCol.test.ts

@@ -1,71 +1,59 @@
+// seqPos -> global column, exercised through the model method rather than the
+// buildSeqPosIndex primitive behind it: the method is what
+// jbrowse-plugin-protein3d calls (see the cross-repo note in model.ts), and it
+// owns the past-the-end answers the index alone cannot give.
 import { describe, expect, test } from 'vitest'
 
-import { seqPosToGlobalCol } from './seqPosToGlobalCol.ts'
+import MSAModelF from './model.ts'
+
+function colsOf(row: string, positions: number[]) {
+  const model = MSAModelF().create({
+    type: 'MsaView',
+    data: { msa: `>r\n${row}` },
+  })
+  model.setWidth(800)
+  return positions.map(pos => model.seqPosToGlobalCol('r', pos))
+}
 
 describe('seqPosToGlobalCol', () => {
-  test('converts sequence position to global column with no gaps', () => {
-    const row = 'ATGCATGC'
-    expect(seqPosToGlobalCol({ row, seqPos: 0 })).toBe(0)
-    expect(seqPosToGlobalCol({ row, seqPos: 3 })).toBe(3)
-    expect(seqPosToGlobalCol({ row, seqPos: 7 })).toBe(7)
-    expect(seqPosToGlobalCol({ row, seqPos: 8 })).toBe(8) // Past end
+  test('is the identity when the row has no gaps', () => {
+    // 8 residues, so seqPos 8 is one past the end
+    expect(colsOf('ATGCATGC', [0, 3, 7, 8])).toEqual([0, 3, 7, 8])
   })
 
-  test('converts sequence position to global column with gaps', () => {
-    const row = 'A-TG-CA-TGC'
+  test('skips gap columns', () => {
     // Global: A(0) -(1) T(2) G(3) -(4) C(5) A(6) -(7) T(8) G(9) C(10)
     // SeqPos: A(0)      T(1) G(2)      C(3) A(4)      T(5) G(6) C(7)
-
-    expect(seqPosToGlobalCol({ row, seqPos: 0 })).toBe(0) // A
-    expect(seqPosToGlobalCol({ row, seqPos: 1 })).toBe(2) // T
-    expect(seqPosToGlobalCol({ row, seqPos: 2 })).toBe(3) // G
-    expect(seqPosToGlobalCol({ row, seqPos: 3 })).toBe(5) // C
-    expect(seqPosToGlobalCol({ row, seqPos: 4 })).toBe(6) // A
-    expect(seqPosToGlobalCol({ row, seqPos: 5 })).toBe(8) // T
-    expect(seqPosToGlobalCol({ row, seqPos: 6 })).toBe(9) // G
-    expect(seqPosToGlobalCol({ row, seqPos: 7 })).toBe(10) // C
-    expect(seqPosToGlobalCol({ row, seqPos: 8 })).toBe(11) // Past end
-  })
-
-  test('handles empty row', () => {
-    expect(seqPosToGlobalCol({ row: '', seqPos: 0 })).toBe(0)
+    expect(colsOf('A-TG-CA-TGC', [0, 1, 2, 3, 4, 5, 6, 7, 8])).toEqual([
+      0, 2, 3, 5, 6, 8, 9, 10, 11,
+    ])
   })
 
-  test('handles row with only gaps', () => {
-    const row = '---..--'
-    expect(seqPosToGlobalCol({ row, seqPos: 0 })).toBe(0)
-    expect(seqPosToGlobalCol({ row, seqPos: 1 })).toBe(7) // Past end
-  })
-
-  test('handles mixed gap characters (- and .)', () => {
-    const row = 'A-.G-C.'
+  test('counts both gap characters, - and .', () => {
     // Global: A(0) -(1) .(2) G(3) -(4) C(5) .(6)
     // SeqPos: A(0)           G(1)      C(2)
-
-    expect(seqPosToGlobalCol({ row, seqPos: 0 })).toBe(0) // A
-    expect(seqPosToGlobalCol({ row, seqPos: 1 })).toBe(3) // G
-    expect(seqPosToGlobalCol({ row, seqPos: 2 })).toBe(5) // C
-    expect(seqPosToGlobalCol({ row, seqPos: 3 })).toBe(7) // Past end
+    expect(colsOf('A-.G-C.', [0, 1, 2, 3])).toEqual([0, 3, 5, 7])
   })
 
-  test('handles leading gaps', () => {
-    const row = '--ACG'
-    // Global: -(0) -(1) A(2) C(3) G(4)
-    // SeqPos:           A(0) C(1) G(2)
+  test('handles leading and trailing gaps', () => {
+    expect(colsOf('--ACG', [0, 1, 2])).toEqual([2, 3, 4])
+    expect(colsOf('ACG--', [0, 1, 2, 3])).toEqual([0, 1, 2, 5])
+  })
 
-    expect(seqPosToGlobalCol({ row, seqPos: 0 })).toBe(2) // A
-    expect(seqPosToGlobalCol({ row, seqPos: 1 })).toBe(3) // C
-    expect(seqPosToGlobalCol({ row, seqPos: 2 })).toBe(4) // G
+  test('an all-gap row reports position 0 at column 0', () => {
+    expect(colsOf('---..--', [0, 1])).toEqual([0, 7])
   })
 
-  test('handles trailing gaps', () => {
-    const row = 'ACG--'
-    // Global: A(0) C(1) G(2) -(3) -(4)
-    // SeqPos: A(0) C(1) G(2)
+  test('an empty row reports column 0', () => {
+    expect(colsOf('', [0])).toEqual([0])
+  })
 
-    expect(seqPosToGlobalCol({ row, seqPos: 0 })).toBe(0) // A
-    expect(seqPosToGlobalCol({ row, seqPos: 1 })).toBe(1) // C
-    expect(seqPosToGlobalCol({ row, seqPos: 2 })).toBe(2) // G
-    expect(seqPosToGlobalCol({ row, seqPos: 3 })).toBe(5) // Past end
+  test('an unknown row reports column 0', () => {
+    const model = MSAModelF().create({
+      type: 'MsaView',
+      data: { msa: '>r\nACGT' },
+    })
+    model.setWidth(800)
+    expect(model.seqPosToGlobalCol('nope', 2)).toBe(0)
   })
 })

package/src/seqPosToGlobalCol.ts

@@ -1,25 +1,14 @@
-import { isBlank } from './util.ts'
-
 /**
- * Convert a sequence position (ungapped, 0-based) to a global column index.
- * This finds the global column that contains the Nth non-gap character.
+ * The global column of every ungapped sequence position in a row, i.e.
+ * index[seqPos] is the column holding the seqPos-th non-gap character.
  *
- * @param row - The row's sequence string (including gaps)
- * @param seqPos - The sequence position (0-based count of non-gap characters)
- * @returns The global column index containing the seqPos-th non-gap character
+ * A row is indexed once and then answers seqPos -> column by lookup, which is
+ * what makes the domain overlay affordable: it resolves one position per feature
+ * per row on every redraw, and scanning the row for each would be quadratic.
  *
  * @example
  * // Row: "A-TG-C" (A at 0, T at 2, G at 3, C at 5)
- * seqPosToGlobalCol({ row: "A-TG-C", seqPos: 0 }) // → 0 (A)
- * seqPosToGlobalCol({ row: "A-TG-C", seqPos: 1 }) // → 2 (T)
- * seqPosToGlobalCol({ row: "A-TG-C", seqPos: 2 }) // → 3 (G)
- * seqPosToGlobalCol({ row: "A-TG-C", seqPos: 3 }) // → 5 (C)
- */
-/**
- * The global column of every ungapped sequence position in a row, i.e.
- * index[seqPos] is the column holding the seqPos-th non-gap character. Amortizes
- * repeated seqPosToGlobalCol lookups (the domain overlay does one per feature
- * per row) into a single pass per row.
+ * buildSeqPosIndex('A-TG-C') // → [0, 2, 3, 5]
  */
 export function buildSeqPosIndex(row: string) {
   const index = new Int32Array(row.length)
@@ -32,27 +21,3 @@ export function buildSeqPosIndex(row: string) {
   }
   return index.subarray(0, n)
 }
-
-export function seqPosToGlobalCol({
-  row,
-  seqPos,
-}: {
-  row: string
-  seqPos: number
-}) {
-  let nonGapCount = 0
-  let globalCol = 0
-  // Find the seqPos-th non-gap character
-  while (globalCol < row.length) {
-    if (!isBlank(row[globalCol])) {
-      if (nonGapCount === seqPos) {
-        return globalCol
-      }
-      nonGapCount++
-    }
-    globalCol++
-  }
-  // If seqPos is 0 and we didn't find any non-gap character, return 0
-  // Otherwise return globalCol (which is row.length at this point)
-  return seqPos === 0 ? 0 : globalCol
-}

package/src/stripDefaultSnapshot.test.ts

@@ -74,3 +74,14 @@ test('inline gff survives the snapshot when no gffFilehandle can refetch it', ()
   })
   expect(getSnapshot(withFilehandle).data.gff).toBeUndefined()
 })
+
+// The legend floats over the top-right of the alignment, so collapsing it is a
+// way of seeing the residues under it. As component state that choice was lost
+// on every reload and could not be set by a session or a figure at all.
+test('a collapsed domain legend survives into the snapshot', () => {
+  const model = MsaView.create({ type: 'MsaView' })
+  expect(getSnapshot(model).showDomainLegend).toBeUndefined()
+  model.setShowDomainLegend(false)
+  expect(getSnapshot(model).showDomainLegend).toBe(false)
+  expect(MsaView.create(getSnapshot(model)).showDomainLegend).toBe(false)
+})

package/src/useCanvasAutorun.test.tsx

@@ -0,0 +1,98 @@
+// @vitest-environment jsdom
+//
+// Assigning width/height to a canvas resets its bitmap, and React assigns them
+// on every commit where they changed. A draw that ran during the mobx reaction
+// -- before React commits -- is therefore wiped by the resize that follows it,
+// which is what used to blank the tree on a tree-area drag and the consensus
+// tracks on a vertical zoom. So the hook has to draw again after the resize.
+import React, { act } from 'react'
+
+import { observable, runInAction } from 'mobx'
+import { observer } from 'mobx-react'
+import { createRoot } from 'react-dom/client'
+import { afterEach, beforeAll, beforeEach, expect, test } from 'vitest'
+
+import { useCanvasAutorun } from './useCanvasAutorun.ts'
+
+import type { Root } from 'react-dom/client'
+
+Reflect.set(globalThis, 'IS_REACT_ACT_ENVIRONMENT', true)
+
+beforeAll(() => {
+  HTMLCanvasElement.prototype.getContext = function (this: HTMLCanvasElement) {
+    return { canvas: this } as unknown as CanvasRenderingContext2D
+  } as unknown as typeof HTMLCanvasElement.prototype.getContext
+})
+
+const state = observable({ width: 100, color: 'red' })
+// what each draw saw: the observables it renders from, and the size of the
+// canvas it was drawing onto
+let draws: { observed: number; color: string; canvas: number }[] = []
+
+const Probe = observer(function () {
+  const ref = useCanvasAutorun({
+    draw: ctx => {
+      draws.push({
+        observed: state.width,
+        color: state.color,
+        canvas: ctx.canvas.width,
+      })
+    },
+    width: state.width,
+    height: 50,
+    deps: [],
+  })
+  return <canvas ref={ref} width={state.width} height={50} />
+})
+
+let container: HTMLElement
+let root: Root
+
+beforeEach(() => {
+  draws = []
+  runInAction(() => {
+    state.width = 100
+    state.color = 'red'
+  })
+  container = document.createElement('div')
+  document.body.appendChild(container)
+  root = createRoot(container)
+  act(() => {
+    root.render(<Probe />)
+  })
+})
+
+afterEach(() => {
+  act(() => {
+    root.unmount()
+  })
+  container.remove()
+})
+
+test('the first draw sees the canvas at its rendered size', () => {
+  expect(draws).toEqual([{ observed: 100, color: 'red', canvas: 100 }])
+})
+
+test('a resize is followed by a draw onto the resized canvas', () => {
+  act(() => {
+    runInAction(() => {
+      state.width = 300
+    })
+  })
+
+  expect(container.querySelector('canvas')!.width).toBe(300)
+  expect(draws.at(-1)).toEqual({ observed: 300, color: 'red', canvas: 300 })
+})
+
+test('a change that leaves the size alone draws exactly once', () => {
+  act(() => {
+    runInAction(() => {
+      state.color = 'blue'
+    })
+  })
+
+  expect(draws).toEqual([
+    { observed: 100, color: 'red', canvas: 100 },
+    { observed: 100, color: 'blue', canvas: 100 },
+  ])
+})

package/src/useCanvasAutorun.ts

@@ -4,18 +4,37 @@ import { autorun } from 'mobx'
 
 import type React from 'react'
 
-// Wires a canvas ref to a mobx autorun: grabs the 2d context once the canvas
-// mounts and re-runs `draw` whenever any observable it reads changes. Collapses
-// the getContext/null-guard/autorun-dispose boilerplate repeated by every
-// canvas block host. `deps` controls when the effect (and thus the context
-// lookup) is torn down and re-created, matching a normal useEffect dep array.
-export function useCanvasAutorun(
-  draw: (ctx: CanvasRenderingContext2D) => void,
-  deps: React.DependencyList,
-) {
+/**
+ * Wires a canvas ref to a mobx autorun: grabs the 2d context once the canvas
+ * mounts and re-runs `draw` whenever any observable it reads changes. Collapses
+ * the getContext/null-guard/autorun-dispose boilerplate repeated by every canvas
+ * block host.
+ *
+ * `width`/`height` are the canvas *backing store* size the caller renders onto
+ * the element (logical size times the high-res scale factor), and they are load
+ * bearing rather than informational. Assigning either resets the canvas bitmap,
+ * and React assigns them on every commit where they changed -- which lands
+ * *after* the mobx reaction that already redrew at the old size. Without a redraw
+ * on the far side of that commit the canvas is left blank: it is what blanked the
+ * tree on a tree-area resize and the consensus tracks on a vertical zoom.
+ *
+ * `deps` covers everything else the effect should re-subscribe on, matching a
+ * normal useEffect dep array.
+ */
+export function useCanvasAutorun({
+  draw,
+  width,
+  height,
+  deps,
+}: {
+  draw: (ctx: CanvasRenderingContext2D) => void
+  width: number
+  height: number
+  deps: React.DependencyList
+}) {
   const ref = useRef<HTMLCanvasElement>(null)
   // the autorun tracks its own observable reads, so `draw` is intentionally not
-  // a dependency; `deps` alone controls when the effect re-subscribes
+  // a dependency; `deps` plus the canvas size control when it re-subscribes
   useEffect(() => {
     const ctx = ref.current?.getContext('2d')
     return ctx
@@ -24,6 +43,6 @@ export function useCanvasAutorun(
         })
       : undefined
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, deps)
+  }, [...deps, width, height])
   return ref
 }

package/src/version.ts

@@ -1 +1 @@
-export const version = '5.8.0'
+export const version = '5.10.0'