react-msaview 5.9.0 → 6.0.0

package/src/components/tree/renderTreeCanvas.ts

@@ -45,7 +45,7 @@ export function getNodeX(
   return ((maxDepthToLeaf - depthToLeaf) / maxDepthToLeaf) * tipX
 }
 
-export function renderTree({
+function renderTree({
   offsetY,
   ctx,
   model,
@@ -89,7 +89,7 @@ export function renderTree({
   })
 }
 
-export function renderCollapsedTriangles({
+function renderCollapsedTriangles({
   ctx,
   clickMap,
   offsetY,
@@ -98,6 +98,7 @@ export function renderCollapsedTriangles({
   tipX,
   maxDepthToLeaf,
   blockSizeYOverride,
+  collapsedSet,
 }: {
   ctx: RenderCtx
   clickMap?: ClickMapIndex
@@ -107,11 +108,11 @@ export function renderCollapsedTriangles({
   tipX: number
   maxDepthToLeaf: number
   blockSizeYOverride?: number
+  collapsedSet: Set<string>
 }) {
   const {
     hierarchy,
     showBranchLenEffective: showBranchLen,
-    collapsed,
     blockSize,
     rowHeight,
     fontSize,
@@ -119,10 +120,9 @@ export function renderCollapsedTriangles({
   } = model
   // nothing collapsed is the common case, and the traversal below visits every
   // node in the tree on every block of every redraw
-  if (collapsed.length === 0) {
+  if (collapsedSet.size === 0) {
     return
   }
-  const collapsedSet = new Set(collapsed)
   const by = blockSizeYOverride ?? blockSize
   const halfHeight = Math.max(2, rowHeight * 0.42)
   forEachDescendant(hierarchy, node => {
@@ -171,7 +171,7 @@ export function renderCollapsedTriangles({
   })
 }
 
-export function renderNodeBubbles({
+function renderNodeBubbles({
   ctx,
   clickMap,
   offsetY,
@@ -179,6 +179,7 @@ export function renderNodeBubbles({
   tipX,
   maxDepthToLeaf,
   blockSizeYOverride,
+  collapsedSet,
 }: {
   ctx: RenderCtx
   clickMap?: ClickMapIndex
@@ -187,16 +188,15 @@ export function renderNodeBubbles({
   tipX: number
   maxDepthToLeaf: number
   blockSizeYOverride?: number
+  collapsedSet: Set<string>
 }) {
   const {
     hierarchy,
     showBranchLenEffective: showBranchLen,
-    collapsed,
     blockSize,
     marginLeft: ml,
   } = model
   const by = blockSizeYOverride ?? blockSize
-  const collapsedSet = new Set(collapsed)
   forEachDescendant(hierarchy, node => {
     const x = getNodeX(node, showBranchLen, tipX, maxDepthToLeaf)
     if (x === undefined) {
@@ -231,7 +231,7 @@ export function renderNodeBubbles({
   })
 }
 
-export function renderTreeLabels({
+function renderTreeLabels({
   theme,
   model,
   offsetY,
@@ -240,6 +240,7 @@ export function renderTreeLabels({
   tipX,
   maxDepthToLeaf,
   blockSizeYOverride,
+  collapsedSet,
 }: {
   model: MsaViewModel
   offsetY: number
@@ -249,6 +250,7 @@ export function renderTreeLabels({
   tipX: number
   maxDepthToLeaf: number
   blockSizeYOverride?: number
+  collapsedSet: Set<string>
 }) {
   const {
     fontSize,
@@ -262,16 +264,11 @@ export function renderTreeLabels({
     marginLeft,
     noTree,
     labelWidthMap,
-    collapsed,
   } = model
+  const by = blockSizeYOverride ?? blockSize
   // labels only exist for leaves, which are laid out top to bottom, so take the
   // same slice the MSA renderer uses instead of walking every tip per block
-  const visibleLeaves = getVisibleLeaves({
-    model,
-    offsetY,
-    blockSizeY: blockSizeYOverride ?? model.blockSize,
-  })
-  const by = blockSizeYOverride ?? blockSize
+  const visibleLeaves = getVisibleLeaves({ model, offsetY, blockSizeY: by })
   const emHeight = ctx.measureText('M').width
   if (labelsAlignRight) {
     ctx.textAlign = 'right'
@@ -289,7 +286,7 @@ export function renderTreeLabels({
     const displayName = treeMetadata[name]?.genome || name
     // a collapsed clade is drawn as a triangle + tip count; suppress its leaf
     // label when the "name" is just the auto-generated internal-node id
-    const isAnonymousCollapsed = collapsed.includes(id) && name === id
+    const isAnonymousCollapsed = collapsedSet.has(id) && name === id
     if (!isAnonymousCollapsed && inYBlock(y, offsetY, by)) {
       // note: +rowHeight/4 matches with -rowHeight/4 in msa
       const yp = y + fontSize / 4
@@ -389,6 +386,9 @@ export function renderTreeCanvas({
   // maxBranchLength for the cladogram would pin every node to x=0 for a tree
   // with no branch lengths -- which is exactly what forces cladogram mode.
   const tipX = showBranchLenEffective ? maxBranchLength : treeWidth
+  // built once for all three passes: each of them asks about a different node on
+  // every block of every redraw, and `collapsed` is a list
+  const collapsedSet = new Set(model.collapsed)
 
   if (!noTree && drawTree) {
     renderTree({
@@ -410,6 +410,7 @@ export function renderTreeCanvas({
       tipX,
       maxDepthToLeaf,
       blockSizeYOverride,
+      collapsedSet,
     })
 
     if (drawNodeBubbles) {
@@ -421,6 +422,7 @@ export function renderTreeCanvas({
         tipX,
         maxDepthToLeaf,
         blockSizeYOverride,
+        collapsedSet,
       })
     }
   }
@@ -435,6 +437,7 @@ export function renderTreeCanvas({
       tipX,
       maxDepthToLeaf,
       blockSizeYOverride,
+      collapsedSet,
     })
   }
 

package/src/domainBands.test.ts

@@ -18,6 +18,12 @@ const gff = `##gff-version 3
 a	Pfam	protein_match	1	4	.	.	.	Name=PF00001;signature_desc=First
 a	Pfam	protein_match	5	8	.	.	.	Name=PF00002;signature_desc=Second`
 
+// row `b` only: PF00003 ends inside the insertion, PF00004 lies entirely within
+// it, so gap hiding puts one end and then both ends into hidden columns
+const insertionGff = `##gff-version 3
+b	Pfam	protein_match	4	8	.	.	.	Name=PF00003;signature_desc=Overlapping
+b	Pfam	protein_match	5	8	.	.	.	Name=PF00004;signature_desc=Inside`
+
 function makeModel() {
   const model = MSAModelF().create({
     id: 'domain-bands-test',
@@ -56,6 +62,24 @@ test('bands follow the columns when gappy columns are hidden', () => {
   ])
 })
 
+test('a band whose end lands in a hidden column keeps its visible part', () => {
+  const model = makeModel()
+  model.applyGFFText(insertionGff)
+  expect(model.domainBands.get('b')!.map(b => [b.startCol, b.endCol])).toEqual([
+    [3, 8],
+    [4, 8],
+  ])
+
+  model.setHideGaps(true)
+  model.setAllowedGappyness(50)
+  expect(model.blanks).toEqual([4, 5, 6, 7])
+  // PF00003 covers V + the 4 hidden Qs, so only the V column survives; PF00004
+  // is nothing but hidden columns and drops out entirely
+  expect(model.domainBands.get('b')!.map(b => [b.startCol, b.endCol])).toEqual([
+    [3, 4],
+  ])
+})
+
 test('mouseOverDomains hit-tests against the drawn span', () => {
   const model = makeModel()
   const rowIndex = model.rowNames.indexOf('a')

package/src/domainLetterColor.test.ts

@@ -0,0 +1,80 @@
+// @vitest-environment jsdom
+//
+// Letters drawn on top of the domain overlay take their color from the box
+// underneath them. The overlay paints bands largest-first, so with nested
+// signatures -- routine in InterProScan output, where a family encloses a
+// domain -- the box actually visible at a column is the *last* one painted,
+// not the first one covering it.
+import { expect, test } from 'vitest'
+
+import { domainBandCursor } from './components/msa/domainBandCursor.ts'
+import MSAModelF from './model.ts'
+
+const row = 'ACDEFGHIKLMNPQRSTVWY'
+const msa = `>seq1\n${row}\n>seq2\n${row}`
+
+// PF_OUTER spans the whole row, PF_INNER sits inside it. tidyInterProAnnotations
+// orders by length descending, so the outer band paints first and the inner one
+// covers it.
+const gff = `##gff-version 3
+seq1\tPfam\tprotein_match\t1\t20\t.\t.\t.\tName=PF_OUTER;signature_desc=Outer
+seq1\tPfam\tprotein_match\t8\t12\t.\t.\t.\tName=PF_INNER;signature_desc=Inner`
+
+function makeModel() {
+  const model = MSAModelF().create({
+    type: 'MsaView',
+    msaFormat: 'fasta',
+    data: { msa },
+  })
+  model.setWidth(800)
+  model.applyGFFText(gff)
+  return model
+}
+
+function sweep(model: ReturnType<typeof makeModel>, from = 0) {
+  const bandAt = domainBandCursor(model.domainBandsByStart.get('seq1'))
+  const out: (string | undefined)[] = []
+  for (let col = from; col < 20; col++) {
+    out.push(bandAt(col)?.annotation.accession)
+  }
+  return out
+}
+
+test('the overlay paints largest-first, so stackIndex is paint order', () => {
+  const bands = makeModel().domainBands.get('seq1')!
+  expect(bands.map(b => [b.annotation.accession, b.stackIndex])).toEqual([
+    ['PF_OUTER', 0],
+    ['PF_INNER', 1],
+  ])
+})
+
+test('a nested band wins the columns it covers', () => {
+  const model = makeModel()
+  // PF_INNER is seq positions 8-12 (1-based), i.e. columns 7..11
+  expect(sweep(model)).toEqual([
+    ...Array.from({ length: 7 }, () => 'PF_OUTER'),
+    ...Array.from({ length: 5 }, () => 'PF_INNER'),
+    ...Array.from({ length: 8 }, () => 'PF_OUTER'),
+  ])
+})
+
+test('a sweep starting mid-block picks up bands opened before it', () => {
+  // canvas blocks start at arbitrary columns, so the cursor has to catch up on
+  // its first call rather than assuming it began at column 0
+  const model = makeModel()
+  expect(sweep(model, 9)).toEqual([
+    'PF_INNER',
+    'PF_INNER',
+    'PF_INNER',
+    ...Array.from({ length: 8 }, () => 'PF_OUTER'),
+  ])
+})
+
+test('columns outside every band have no covering band', () => {
+  const model = makeModel()
+  model.setFilter('PF_OUTER', false)
+  const bandAt = domainBandCursor(model.domainBandsByStart.get('seq1'))
+  expect(bandAt(0)).toBeUndefined()
+  expect(bandAt(9)?.annotation.accession).toBe('PF_INNER')
+  expect(bandAt(19)).toBeUndefined()
+})

package/src/ggplotPalettes.ts

@@ -18,8 +18,4 @@ const palettes = [
   ],
 ]
 
-export function getPalette(l: number) {
-  return palettes[Math.min(l, palettes.length - 1)]!
-}
-
 export default palettes

package/src/hierarchy.test.ts

@@ -3,7 +3,7 @@ import { describe, expect, test } from 'vitest'
 import {
   calcDepthToLeaf,
   collapse,
-  collapsedSubtreeLengthExtent,
+  collapsedSubtreeMaxLength,
   find,
   findMaxBranchLen,
   hierarchy,
@@ -124,7 +124,7 @@ describe('collapse', () => {
   })
 })
 
-describe('collapsedSubtreeLengthExtent', () => {
+describe('collapsedSubtreeMaxLength', () => {
   // root → A(1) → [ A1(2), C(3) → [ C1(1), C2(10) ] ]
   function makeLenTree(): NodeWithIds {
     return {
@@ -152,18 +152,18 @@ describe('collapsedSubtreeLengthExtent', () => {
     }
   }
 
-  test('min/max cumulative branch length to the tips below a node', () => {
+  test('cumulative branch length to the farthest tip below a node', () => {
     const h = hierarchy(makeLenTree(), d => d.children)
     const nodeA = find(h, n => n.data.id === 'A')!
     collapse(nodeA)
-    // excludes A's own branch: nearest tip A1 = 2, farthest tip C2 = 3 + 10 = 13
-    expect(collapsedSubtreeLengthExtent(nodeA)).toEqual({ min: 2, max: 13 })
+    // excludes A's own branch: farthest tip C2 = 3 + 10 = 13, vs A1 = 2
+    expect(collapsedSubtreeMaxLength(nodeA)).toBe(13)
   })
 
-  test('returns zero extent for a node with no descendants', () => {
+  test('returns zero for a node with no descendants', () => {
     const h = hierarchy(makeLenTree(), d => d.children)
     const leaf = find(h, n => n.data.id === 'A1')!
-    expect(collapsedSubtreeLengthExtent(leaf)).toEqual({ min: 0, max: 0 })
+    expect(collapsedSubtreeMaxLength(leaf)).toBe(0)
   })
 })
 

package/src/hierarchy.ts

@@ -28,9 +28,8 @@ export interface HierarchyNode<T = NodeWithIds> extends CoreHierarchyNode<T> {
   len?: number
   depthToLeaf?: number
   _children?: HierarchyNode<T>[] | null
-  // pixel x-positions of the nearest/farthest tips of a collapsed subtree, used
-  // to draw the collapsed-clade triangle. Set in the model's hierarchy getter.
-  collapsedTipXNear?: number
+  // pixel x-position of the farthest tip of a collapsed subtree, where the base
+  // of the collapsed-clade triangle goes. Set in the model's hierarchy getter.
   collapsedTipXFar?: number
 }
 
@@ -115,14 +114,13 @@ export function collapse<T>(node: HierarchyNode<T>) {
   }
 }
 
-// Min/max cumulative raw branch length from a collapsed node down to the tips of
-// its detached subtree (excludes the node's own branch). Used to size the
+// Cumulative raw branch length from a collapsed node down to the farthest tip of
+// its detached subtree (excludes the node's own branch). Sizes the base of the
 // collapsed-clade triangle in phylogram mode.
-export function collapsedSubtreeLengthExtent<T extends { length?: number }>(
+export function collapsedSubtreeMaxLength<T extends { length?: number }>(
   node: HierarchyNode<T>,
 ) {
   const roots = node._children ?? node.children
-  let min = Infinity
   let max = 0
   if (roots) {
     const stack = roots.map(child => ({
@@ -140,12 +138,11 @@ export function collapsedSubtreeLengthExtent<T extends { length?: number }>(
           })
         }
       } else {
-        min = Math.min(min, acc)
         max = Math.max(max, acc)
       }
     }
   }
-  return { min: min === Infinity ? 0 : min, max }
+  return max
 }
 
 // Cladogram positioning based on ape's plot.phylo: uses topological depth (max

package/src/index.ts

@@ -11,7 +11,9 @@ export { default as MSAViewer } from './components/MSAViewer.tsx'
 export { type MsaViewModel, default as MSAModelF } from './model.ts'
 export type { MSAFormat, MSAParserType } from 'msa-parsers'
 export type { HierarchyNode } from './hierarchy.ts'
-export type { InterProScanResults } from './launchInterProScan.ts'
+// InterProScanResults is the EBI wire format that setDomains still accepts;
+// Annotation is the source-agnostic shape everything else is written against
+export type { InterProScanResults } from 'msa-parsers'
 // ColumnCounts, DomainBand and TidyDomainAnnotation surface in the inferred type
 // of the composed state model, so a downstream plugin cannot emit declarations
 // for its own stateModelFactory without being able to name them (TS2883).
@@ -19,6 +21,7 @@ export type { InterProScanResults } from './launchInterProScan.ts'
 export type { ColumnCounts } from './columnCounts.ts'
 export type {
   Accession,
+  Annotation,
   BasicTrack,
   BasicTrackModel,
   DomainBand,

package/src/largeTree.test.ts

@@ -3,8 +3,8 @@ import { expect, test } from 'vitest'
 
 import MSAModelF from './model.ts'
 
-// jsdom has no 2d context, and measureTextCanvas throws without one. Only the
-// width matters here, so a stub keeps the test about tree size.
+// jsdom has no 2d context, so measureTextCanvas falls back to an estimate. Only
+// the width matters here, so a stub keeps the test about tree size.
 HTMLCanvasElement.prototype.getContext = (() => ({
   font: '12px sans-serif',
   measureText: (t: string) => ({ width: t.length * 7 }),
@@ -30,3 +30,24 @@ test('a tree far past the argument limit still lays out', () => {
   expect(model.labelsWidth).toBe(49)
   expect(model.treeWidth).toBeGreaterThan(0)
 })
+
+test('re-hovering the same tree node does not re-walk the tree', () => {
+  const model = MSAModelF().create({
+    type: 'MsaView',
+    data: { tree: flatNewick(200_000) },
+  })
+  model.setWidth(1000)
+
+  const leafId = model.leaves[1000]!.data.id
+  model.setHoveredTreeNode(leafId)
+  const first = model.hoveredTreeNode
+
+  // the tree's mousemove handler fires this on every event, so an unchanged id
+  // has to leave the state object alone: rebuilding it walks all 200k nodes and
+  // invalidates every overlay that reads hoveredRowIndices
+  model.setHoveredTreeNode(leafId)
+  expect(model.hoveredTreeNode).toBe(first)
+
+  model.setHoveredTreeNode(undefined)
+  expect(model.hoveredTreeNode).toBeUndefined()
+})

package/src/launchInterProScan.ts

@@ -1,30 +1,13 @@
 import { getSession } from '@jbrowse/core/util'
+import { interProScanResponseToAnnotations } from 'msa-parsers'
 
 import { isAbortError, jsonfetch, textfetch, timeout } from './fetchUtils.ts'
 
 import type { MsaViewModel } from './model.ts'
+import type { InterProScanResponse } from 'msa-parsers'
 
 const base = 'https://www.ebi.ac.uk/Tools/services/rest'
 
-export interface InterProScanResults {
-  matches: {
-    signature: {
-      entry?: {
-        name: string
-        description: string
-        accession: string
-        // original GFF feature type (exon, CDS, ...) when sourced from GFF
-        featureType?: string
-      }
-    }
-    locations: { start: number; end: number; strand?: number }[]
-  }[]
-  xref: { id: string }[]
-}
-export interface InterProScanResponse {
-  results: InterProScanResults[]
-}
-
 async function runInterProScan({
   seq,
   onProgress,
@@ -169,17 +152,7 @@ async function loadInterProScanResultsWithStatus({
       url: `https://www.ebi.ac.uk/Tools/services/rest/iprscan5/result/${jobId}/json`,
     })
     const ret = await loadInterProScanResults(jobId, signal)
-    // key each result by its xref id; skip any result lacking an xref entry
-    // rather than crashing the whole load on one malformed result
-    model.setDomains(
-      Object.fromEntries(
-        ret.results
-          .map(r => [r.xref[0]?.id, r] as const)
-          .filter(
-            (e): e is [string, InterProScanResults] => e[0] !== undefined,
-          ),
-      ),
-    )
+    model.setAnnotations(interProScanResponseToAnnotations(ret))
     getSession(model).notify(`Loaded interproscan ${jobId} results`, 'success')
   } catch (e) {
     if (isAbortError(e)) {

package/src/loadErrorDisplay.test.tsx

@@ -0,0 +1,102 @@
+// @vitest-environment jsdom
+//
+// What a failed load LOOKS like, which is a different question from what the
+// model recorded. modelFilehandleLoaders.test.ts already pins the model half --
+// a rejected fetch sets `error` and clears `loadingMSA`, under the name "a
+// failed fetch surfaces as an error" -- and it passed throughout the whole time
+// a failed url showed the reader a spinner and nothing else.
+//
+// The error display was never missing. ImportForm renders `model.error`, and
+// the reader could not get to it: a non-abort failure KEEPS its filehandle
+// (only an abort clears it), so `hasPendingFilehandle` stayed true and
+// Loading.tsx took its spinner branch ahead of the import form, permanently.
+// Found on AlphaFold's `files/msa/` prefix answering 403 to every key in August
+// 2026 -- the view opened, said "Downloading file" with a Cancel button, and
+// was still saying it at 105s.
+import React, { act } from 'react'
+
+import { createRoot } from 'react-dom/client'
+import { afterEach, beforeEach, expect, test } from 'vitest'
+
+import MSAView from './components/Loading.tsx'
+import MSAModelF from './model.ts'
+
+import type { MsaViewModel } from './model.ts'
+import type { Root } from 'react-dom/client'
+
+Reflect.set(globalThis, 'IS_REACT_ACT_ENVIRONMENT', true)
+
+let container: HTMLDivElement
+let root: Root
+let model: MsaViewModel
+
+function uri(u: string) {
+  return { locationType: 'UriLocation' as const, uri: u }
+}
+
+function render() {
+  act(() => {
+    root.render(<MSAView model={model} />)
+  })
+}
+
+beforeEach(() => {
+  container = document.createElement('div')
+  document.body.append(container)
+  root = createRoot(container)
+  model = MSAModelF().create({ type: 'MsaView' })
+  model.setWidth(800)
+})
+
+afterEach(() => {
+  act(() => {
+    root.unmount()
+  })
+  container.remove()
+})
+
+test('a load that fails shows the error rather than a spinner forever', () => {
+  // the state the loader leaves behind on a 403: the filehandle it could not
+  // read is still set, nothing parsed, and the error recorded
+  model.setMSAFilehandle(uri('https://example.com/blocked.a3m'))
+  model.setLoadingMSA(false)
+  model.setError(new Error('HTTP 403 fetching blocked.a3m'))
+  render()
+
+  expect(container.textContent).toContain('403')
+  expect(container.textContent).not.toContain('Loading')
+})
+
+test('a load still in flight is a spinner, not an error', () => {
+  model.setMSAFilehandle(uri('https://example.com/slow.a3m'))
+  render()
+
+  expect(model.loadingMSA).toBe(true)
+  expect(container.textContent).not.toContain('Return to import form')
+})
+
+// A guard rather than a pin: this one passes without the fix too, because with
+// no filehandle left set the view reaches the ImportForm and that already shows
+// the error. It is here so the new branch cannot quietly swallow the case.
+//
+// It also records the surprise underneath: `dataInitialized` is itself
+// `(msa || tree) && !error`, so ANY error hides a loaded alignment, including a
+// tree or gff that 404s beside a good one -- setError is shared by every
+// filehandle loader. Whether a failed OPTIONAL file should blank a good
+// alignment is a real question and a wider one, since `dataInitialized` is read
+// in several places; narrowing it is a design change rather than this fix.
+test('an error over loaded data says so instead of a bare import form', () => {
+  const loaded = MSAModelF().create({
+    type: 'MsaView',
+    msaFormat: 'fasta',
+    height: 200,
+    data: { msa: '>seq1\nACDE\n>seq2\nACDF' },
+  })
+  loaded.setWidth(800)
+  loaded.setError(new Error('domains.gff 404'))
+  act(() => {
+    root.render(<MSAView model={loaded} />)
+  })
+
+  expect(container.textContent).toContain('domains.gff 404')
+})

package/src/measureTextCanvas.ts

@@ -1,15 +1,31 @@
 import { setFontSize } from './setFontSize.ts'
 
-let canvasHandle: HTMLCanvasElement | undefined
+// Cached across calls: labelWidthMap measures every leaf label on every layout,
+// and both createElement and getContext are far more expensive than measureText.
+// `null` records that this environment has no 2d context, so the lookup is not
+// retried on every label.
+let ctxHandle: CanvasRenderingContext2D | null | undefined
 
-export function measureTextCanvas(text: string, fontSize: number) {
-  if (!canvasHandle) {
-    canvasHandle = document.createElement('canvas')
+function getCtx() {
+  if (ctxHandle === undefined) {
+    ctxHandle =
+      typeof document === 'undefined'
+        ? null
+        : document.createElement('canvas').getContext('2d')
   }
+  return ctxHandle
+}
 
-  const ctx = canvasHandle.getContext('2d')
+// Rough average glyph width as a fraction of the font size for the sans-serif
+// stack the tree labels use. Only reached where there is no canvas to measure
+// with (jsdom, SSR); estimating the label gutter beats throwing out of the
+// layout getters that read this on every render.
+const fallbackGlyphWidthRatio = 0.6
+
+export function measureTextCanvas(text: string, fontSize: number) {
+  const ctx = getCtx()
   if (!ctx) {
-    throw new Error('no canvas context')
+    return text.length * fontSize * fallbackGlyphWidthRatio
   }
   setFontSize(ctx, fontSize)
   return ctx.measureText(text).width