react-msaview 5.10.0 → 6.1.0

package/src/components/tree/TreeCanvasBlock.tsx

@@ -3,6 +3,7 @@ import React, { useState } from 'react'
 import { makeStyles } from '@jbrowse/core/util/tss-react'
 import { useTheme } from '@mui/material'
 import { observer } from 'mobx-react'
+import { createPortal } from 'react-dom'
 
 import { useCanvasAutorun } from '../../useCanvasAutorun.ts'
 import TreeBranchMenu from './TreeBranchMenu.tsx'
@@ -56,7 +57,7 @@ const TreeCanvasBlock = observer(function ({
   const { clickMap, hovered, hitTest, onMouseMove, onMouseLeave } =
     useTreeHover({ model, offsetY })
 
-  const { scrollY, treeAreaWidth, blockSize, highResScaleFactor } = model
+  const { treeAreaWidth, blockSize, highResScaleFactor } = model
   const width = treeAreaWidth + padding
   const height = blockSize
 
@@ -82,7 +83,7 @@ const TreeCanvasBlock = observer(function ({
   const style = {
     width,
     height,
-    top: scrollY + offsetY,
+    top: offsetY,
     left: 0,
     position: 'absolute',
   } as const
@@ -144,21 +145,27 @@ const TreeCanvasBlock = observer(function ({
           className={classes.hover}
           style={{
             left: hovered.minX,
-            top: hovered.minY + scrollY,
+            top: hovered.minY,
             width: hovered.maxX - hovered.minX,
             height: hovered.maxY - hovered.minY,
           }}
         />
       ) : null}
 
-      {hovered ? (
-        <div
-          className={classes.tooltip}
-          style={{ left: hovered.clientX + 12, top: hovered.clientY + 12 }}
-        >
-          {hovered.name}
-        </div>
-      ) : null}
+      {/* portaled: the block set sits under a transform, which would otherwise
+      make this fixed tooltip position against the scrolled tree instead of the
+      window */}
+      {hovered
+        ? createPortal(
+            <div
+              className={classes.tooltip}
+              style={{ left: hovered.clientX + 12, top: hovered.clientY + 12 }}
+            >
+              {hovered.name}
+            </div>,
+            document.body,
+          )
+        : null}
     </>
   )
 })

package/src/components/tree/TreeRuler.tsx

@@ -4,9 +4,14 @@ import { observer } from 'mobx-react'
 
 import type { MsaViewModel } from '../../model.ts'
 
+// The gutter above the tree panel. It spans the resize handle too, so whatever
+// follows it in the top row starts exactly where the alignment canvas does --
+// MainArea has TreePanel + VerticalResizeHandle before the alignment.
 const TreeRuler = observer(({ model }: { model: MsaViewModel }) => {
-  const { treeAreaWidth } = model
-  return <div style={{ flexShrink: 0, width: treeAreaWidth }} />
+  const { treeAreaWidth, resizeHandleWidth } = model
+  return (
+    <div style={{ flexShrink: 0, width: treeAreaWidth + resizeHandleWidth }} />
+  )
 })
 
 export default TreeRuler

package/src/components/tree/renderTreeCanvas.test.ts

@@ -117,8 +117,9 @@ describe('getNodeX cladogram positioning', () => {
   })
 })
 
-// the x values the tree pass actually strokes, for a model built from newick
-function drawnTreeXs(newick: string) {
+// the x values the tree pass actually strokes, for a model built from newick,
+// alongside the tree width they are expected to span
+function drawnTree(newick: string) {
   const model = stateModelFactory().create({
     type: 'MsaView',
     data: { msa: '>a\nA\n>b\nA\n>c\nA\n>d\nA', tree: newick },
@@ -150,19 +151,26 @@ function drawnTreeXs(newick: string) {
     offsetY: 0,
     theme: { palette: { text: { primary: '#000' } } } as Theme,
   })
-  return xs
+  return { xs, model }
 }
 
 describe('renderTreeCanvas horizontal extent', () => {
   it('spreads a cladogram across the tree area when branch lengths are absent', () => {
     // a lengthless newick forces cladogram mode; scaling it by the (zero) max
     // branch length would stack every node on x=0 as one vertical line
-    const xs = drawnTreeXs('((a,b),(c,d));')
-    expect(Math.max(...xs)).toBe(300)
+    const { xs, model } = drawnTree('((a,b),(c,d));')
+    expect(Math.max(...xs)).toBe(model.treeWidth)
   })
 
   it('scales a phylogram by branch length', () => {
-    const xs = drawnTreeXs('((a:0.1,b:0.2):0.3,(c:0.4,d:0.5):0.6);')
-    expect(Math.max(...xs)).toBeCloseTo(300)
+    const { xs, model } = drawnTree('((a:0.1,b:0.2):0.3,(c:0.4,d:0.5):0.6);')
+    expect(Math.max(...xs)).toBeCloseTo(model.treeWidth)
+  })
+
+  // labels off means no label gutter to reserve, so the tips reach the far edge
+  // of the tree area rather than stopping at the default treeWidth
+  it('hands the label gutter to the tree when labels are off', () => {
+    const { model } = drawnTree('((a,b),(c,d));')
+    expect(model.treeWidth).toBe(model.treeAreaWidth - 10 - model.marginLeft)
   })
 })

package/src/components/tree/renderTreeCanvas.ts

@@ -264,6 +264,7 @@ function renderTreeLabels({
     marginLeft,
     noTree,
     labelWidthMap,
+    labelWidthScale,
   } = model
   const by = blockSizeYOverride ?? blockSize
   // labels only exist for leaves, which are laid out top to bottom, so take the
@@ -295,8 +296,11 @@ function renderTreeLabels({
         xp = getNodeX(node, showBranchLen, tipX, maxDepthToLeaf) ?? 0
       }
 
+      const measured = labelWidthMap.get(name)
       const width =
-        labelWidthMap.get(name) ?? ctx.measureText(displayName).width
+        measured === undefined
+          ? ctx.measureText(displayName).width
+          : measured * labelWidthScale
 
       ctx.fillStyle = theme.palette.text.primary
       if (labelsAlignRight) {

package/src/constants.ts

@@ -31,6 +31,16 @@ export const segmentShades = ['#9fb6d4', '#d4dcea']
 export const defaultDrawMsaLetters = true
 export const defaultScrollZoom = false
 
+// Cell size floors for drawing residue letters and tree labels. Below these a
+// 500px block holds thousands of glyphs, and fillText -- which no sprite atlas
+// beats, measured -- dominates every zoom frame.
+export const minLetterRowHeight = 8
+export const minLetterColWidth = 5
+
+// Tree labels are measured once at this size and scaled to the current font
+// size, so a vertical zoom never re-measures the tree.
+export const labelReferenceFontSize = 16
+
 // Zoom limits, px per cell. maxCellSize caps both smooth zoom and the stepwise
 // zoom-in buttons (which otherwise grow unbounded). minColWidth/minRowHeight are
 // the smooth-zoom floors.

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/impgRender.test.tsx

@@ -12,67 +12,12 @@ import { enableStaticRendering } from 'mobx-react'
 import { beforeAll, expect, test } from 'vitest'
 
 import MSAModelF from './model.ts'
+import { installRenderTestEnv } from './renderTestEnv.ts'
 import { renderToSvg } from './renderToSvg.tsx'
 
-class Mat {
-  constructor(
-    public a = 1,
-    public b = 0,
-    public c = 0,
-    public d = 1,
-    public e = 0,
-    public f = 0,
-  ) {}
-  multiply(o: Mat) {
-    return new Mat(
-      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 Mat(1, 0, 0, 1, x, y))
-  }
-  scale(x: number, y = x) {
-    return this.multiply(new Mat(x, 0, 0, y, 0, 0))
-  }
-}
-class Pt {
-  constructor(
-    public x = 0,
-    public y = 0,
-  ) {}
-  matrixTransform(m: Mat) {
-    return new Pt(
-      m.a * this.x + m.c * this.y + m.e,
-      m.b * this.x + m.d * this.y + m.f,
-    )
-  }
-}
-
 beforeAll(() => {
   enableStaticRendering(true)
-  const g = globalThis as Record<string, unknown>
-  g.DOMMatrix = Mat
-  g.DOMPoint = Pt
-  HTMLCanvasElement.prototype.getContext = function () {
-    let font = '10px sans-serif'
-    return {
-      get font() {
-        return font
-      },
-      set font(v: string) {
-        font = v
-      },
-      measureText(t: string) {
-        const size = Number.parseFloat(font) || 10
-        return { width: t.length * size * 0.6 } as TextMetrics
-      },
-    } as unknown as CanvasRenderingContext2D
-  } as unknown as typeof HTMLCanvasElement.prototype.getContext
+  installRenderTestEnv()
 })
 
 // representative `impg query -o fasta-aln` block: PanSN names with region

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 }),
@@ -26,7 +26,42 @@ test('a tree far past the argument limit still lays out', () => {
   model.setWidth(1000)
 
   expect(model.numRows).toBe(200_000)
-  // 's199999' is the longest name, at 7 chars * 7px
-  expect(model.labelsWidth).toBe(49)
+  // 's199999' is the longest name, at 7 chars * 7px, scaled from the reference
+  // font size the labels are measured at down to the current one (13/16)
+  expect(model.labelsWidth).toBeCloseTo((49 * 13) / 16)
   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()
+})
+
+test('a vertical zoom does not re-measure every label', () => {
+  const model = MSAModelF().create({
+    type: 'MsaView',
+    data: { tree: flatNewick(200_000) },
+  })
+  model.setWidth(1000)
+
+  const before = model.labelWidthMap
+  model.setRowHeight(24)
+  expect(model.labelWidthMap).toBe(before)
+  expect(model.labelsWidth).toBeCloseTo((49 * 18) / 16)
+})

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)) {