react-msaview 5.3.0 → 5.4.1

package/src/components/tree/renderTreeCanvas.ts

@@ -29,6 +29,9 @@ function getNodeX(
   if (showBranchLen) {
     return node.len
   }
+  if (maxDepthToLeaf === 0) {
+    return 0
+  }
   const depthToLeaf = calcDepthToLeaf(node)
   return ((maxDepthToLeaf - depthToLeaf) / maxDepthToLeaf) * maxBranchLen
 }
@@ -99,6 +102,85 @@ export function renderTree({
   })
 }
 
+export function renderCollapsedTriangles({
+  ctx,
+  clickMap,
+  offsetY,
+  model,
+  theme,
+  maxBranchLen,
+  maxDepthToLeaf,
+  blockSizeYOverride,
+}: {
+  ctx: RenderCtx
+  clickMap?: ClickMapIndex
+  offsetY: number
+  model: MsaViewModel
+  theme: Theme
+  maxBranchLen: number
+  maxDepthToLeaf: number
+  blockSizeYOverride?: number
+}) {
+  const {
+    hierarchy,
+    showBranchLenEffective: showBranchLen,
+    collapsed,
+    blockSize,
+    rowHeight,
+    fontSize,
+    marginLeft: ml,
+  } = model
+  const by = blockSizeYOverride ?? blockSize
+  const halfHeight = Math.max(2, rowHeight * 0.42)
+  forEachDescendant(hierarchy, node => {
+    const { id, name } = node.data
+    if (collapsed.includes(id)) {
+      const apexX = getNodeX(node, showBranchLen, maxBranchLen, maxDepthToLeaf)
+      const y = node.x!
+      const inBlock =
+        y > offsetY - extendBounds && y < offsetY + by + extendBounds
+      // in cladogram mode the hidden tips align at the right edge, otherwise use
+      // the branch-length extent recorded in the model's hierarchy getter
+      const baseX = showBranchLen
+        ? (node.collapsedTipXFar ?? maxBranchLen)
+        : maxBranchLen
+      if (apexX !== undefined && inBlock && baseX > apexX) {
+        ctx.beginPath()
+        ctx.moveTo(apexX, y)
+        ctx.lineTo(baseX, y - halfHeight)
+        ctx.lineTo(baseX, y + halfHeight)
+        ctx.closePath()
+        ctx.fillStyle = theme.palette.action.disabled
+        ctx.fill()
+        ctx.strokeStyle = theme.palette.text.primary
+        ctx.stroke()
+
+        // node.value carries the leaf count from the pre-collapse sum() pass
+        const count = node.value
+        if (count !== undefined && rowHeight >= 8) {
+          ctx.fillStyle = theme.palette.text.primary
+          ctx.textAlign = 'left'
+          ctx.fillText(`${count}`, baseX + 3, y + fontSize / 4)
+        }
+
+        // the whole triangle is a click/hover target that opens the
+        // branch menu (Expand this node); the apex bubble's own click entry is
+        // skipped for collapsed nodes so this descriptive label wins
+        const label = name === id ? 'Collapsed clade' : name
+        clickMap?.insert({
+          minX: apexX + ml,
+          maxX: baseX + ml,
+          minY: y - halfHeight,
+          maxY: y + halfHeight,
+          branch: true,
+          id,
+          name: count === undefined ? label : `${label} (${count} tips)`,
+        })
+      }
+    }
+  })
+}
+
 export function renderNodeBubbles({
   ctx,
   clickMap,
@@ -137,22 +219,27 @@ export function renderNodeBubbles({
       y > offsetY - extendBounds &&
       y < offsetY + by + extendBounds
     ) {
+      const isCollapsed = collapsed.includes(id)
       ctx.strokeStyle = 'black'
-      ctx.fillStyle = collapsed.includes(id) ? 'black' : 'white'
+      ctx.fillStyle = isCollapsed ? 'black' : 'white'
       ctx.beginPath()
       ctx.arc(x, y, radius, 0, 2 * Math.PI)
       ctx.fill()
       ctx.stroke()
 
-      clickMap?.insert({
-        minX: x - radius + ml,
-        maxX: x - radius + d + ml,
-        minY: y - radius,
-        maxY: y - radius + d,
-        branch: true,
-        id,
-        name,
-      })
+      // collapsed nodes get their click/hover target from the triangle pass,
+      // which covers the apex bubble and carries a descriptive label
+      if (!isCollapsed) {
+        clickMap?.insert({
+          minX: x - radius + ml,
+          maxX: x - radius + d + ml,
+          minY: y - radius,
+          maxY: y - radius + d,
+          branch: true,
+          id,
+          name,
+        })
+      }
     }
   })
 }
@@ -189,6 +276,7 @@ export function renderTreeLabels({
     leaves,
     noTree,
     labelWidthMap,
+    collapsed,
   } = model
   const by = blockSizeYOverride ?? blockSize
   const emHeight = ctx.measureText('M').width
@@ -205,7 +293,14 @@ export function renderTreeLabels({
     const y = node.x!
 
     const displayName = treeMetadata[name]?.genome || name
-    if (y > offsetY - extendBounds && y < offsetY + by + extendBounds) {
+    // 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
+    if (
+      !isAnonymousCollapsed &&
+      y > offsetY - extendBounds &&
+      y < offsetY + by + extendBounds
+    ) {
       // note: +rowHeight/4 matches with -rowHeight/4 in msa
       const yp = y + fontSize / 4
       let xp = 0
@@ -306,6 +401,17 @@ export function renderTreeCanvas({
       blockSizeYOverride,
     })
 
+    renderCollapsedTriangles({
+      ctx,
+      clickMap,
+      offsetY,
+      model,
+      theme,
+      maxBranchLen,
+      maxDepthToLeaf,
+      blockSizeYOverride,
+    })
+
     if (drawNodeBubbles) {
       renderNodeBubbles({
         ctx,

package/src/fetchUtils.test.ts

@@ -0,0 +1,66 @@
+import { openLocation } from '@jbrowse/core/util/io'
+import { describe, expect, test } from 'vitest'
+
+import { fetchTextWithProgress, isAbortError } from './fetchUtils.ts'
+
+import type { FetchStatus } from './fetchUtils.ts'
+
+const loc = openLocation({
+  uri: 'http://example.com/data.fa',
+  locationType: 'UriLocation',
+})
+
+describe('fetchTextWithProgress', () => {
+  test('reports progress messages then clears status', async () => {
+    const statuses: (FetchStatus | undefined)[] = []
+    const result = await fetchTextWithProgress(
+      loc,
+      s => statuses.push(s),
+      async (_loc, opts) => {
+        opts.statusCallback('Downloading file')
+        opts.statusCallback('')
+        return 'GREETINGS'
+      },
+    )
+    expect(result).toBe('GREETINGS')
+    expect(statuses.map(s => s?.msg)).toEqual([
+      'Downloading file',
+      undefined,
+      undefined,
+    ])
+  })
+
+  test('clears status even when the fetch throws', async () => {
+    const statuses: (FetchStatus | undefined)[] = []
+    await expect(
+      fetchTextWithProgress(
+        loc,
+        s => statuses.push(s),
+        async () => {
+          throw new Error('network down')
+        },
+      ),
+    ).rejects.toThrow('network down')
+    expect(statuses.at(-1)).toBeUndefined()
+  })
+
+  test('onCancel aborts the underlying request', async () => {
+    const statuses: (FetchStatus | undefined)[] = []
+    const promise = fetchTextWithProgress(
+      loc,
+      s => statuses.push(s),
+      (_loc, opts) =>
+        new Promise<string>((_resolve, reject) => {
+          opts.statusCallback('Downloading file')
+          opts.signal.addEventListener('abort', () => {
+            reject(new DOMException('Aborted', 'AbortError'))
+          })
+        }),
+    )
+
+    statuses.find(s => s?.onCancel)?.onCancel?.()
+
+    await expect(promise).rejects.toSatisfy(isAbortError)
+    expect(statuses.at(-1)).toBeUndefined()
+  })
+})

package/src/fetchUtils.ts

@@ -1,3 +1,51 @@
+import { fetchAndMaybeUnzipText } from '@jbrowse/core/util'
+
+export interface FetchStatus {
+  msg: string
+  url?: string
+  onCancel?: () => void
+}
+
+type Filehandle = Parameters<typeof fetchAndMaybeUnzipText>[0]
+
+type ProgressFetcher = (
+  loc: Filehandle,
+  opts: { signal: AbortSignal; statusCallback: (msg: string) => void },
+) => Promise<string>
+
+/**
+ * Fetch text from a filehandle while reporting download/unzip progress through
+ * setStatus, and wiring a Cancel handler that aborts the underlying request.
+ * The status is always cleared once the fetch settles. The fetcher is injectable
+ * for testing.
+ */
+export async function fetchTextWithProgress(
+  loc: Filehandle,
+  setStatus: (status?: FetchStatus) => void,
+  fetcher: ProgressFetcher = fetchAndMaybeUnzipText,
+) {
+  const controller = new AbortController()
+  try {
+    return await fetcher(loc, {
+      signal: controller.signal,
+      statusCallback: msg => {
+        setStatus(
+          msg
+            ? {
+                msg,
+                onCancel: () => {
+                  controller.abort()
+                },
+              }
+            : undefined,
+        )
+      },
+    })
+  } finally {
+    setStatus(undefined)
+  }
+}
+
 export async function myfetch(url: string, args?: RequestInit) {
   const response = await fetch(url, args)
 

package/src/hierarchy.test.ts

@@ -3,6 +3,7 @@ import { describe, expect, test } from 'vitest'
 import {
   calcDepthToLeaf,
   collapse,
+  collapsedSubtreeLengthExtent,
   find,
   findMaxBranchLen,
   hierarchy,
@@ -109,6 +110,61 @@ describe('collapse', () => {
     collapse(leaf)
     expect(leaves(h).map(n => n.data.name)).toEqual(['A1', 'A2', 'B1', 'B2'])
   })
+
+  test('preserves the subtree depth so the layout stays stable', () => {
+    const h = hierarchy(makeTree(), d => d.children)
+    const nodeA = find(h, n => n.data.id === 'A')!
+    collapse(nodeA)
+    // the collapsed node keeps its real depth (1) rather than becoming a depth-0
+    // leaf, so the cladogram apex sits at the true branch point
+    expect(nodeA.depthToLeaf).toBe(1)
+    // and the root still measures the tree as 2 deep, so collapsing A does not
+    // horizontally shift the rest of the tree
+    expect(calcDepthToLeaf(h)).toBe(2)
+  })
+})
+
+describe('collapsedSubtreeLengthExtent', () => {
+  // root → A(1) → [ A1(2), C(3) → [ C1(1), C2(10) ] ]
+  function makeLenTree(): NodeWithIds {
+    return {
+      id: 'root',
+      name: 'root',
+      children: [
+        {
+          id: 'A',
+          name: 'A',
+          length: 1,
+          children: [
+            { id: 'A1', name: 'A1', length: 2, children: [] },
+            {
+              id: 'C',
+              name: 'C',
+              length: 3,
+              children: [
+                { id: 'C1', name: 'C1', length: 1, children: [] },
+                { id: 'C2', name: 'C2', length: 10, children: [] },
+              ],
+            },
+          ],
+        },
+      ],
+    }
+  }
+
+  test('min/max cumulative branch length to the tips 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 })
+  })
+
+  test('returns zero extent 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 })
+  })
 })
 
 describe('leaf removal via parent.children filter', () => {

package/src/hierarchy.ts

@@ -12,6 +12,10 @@ export interface HierarchyNode<T = NodeWithIds> {
   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
+  collapsedTipXFar?: number
 }
 
 export interface HierarchyLink<T = NodeWithIds> {
@@ -235,16 +239,55 @@ export function clusterLayout<T>(
 
 export function collapse<T>(node: HierarchyNode<T>) {
   if (node.children) {
+    // memoize the real subtree depth onto the node before detaching its
+    // children, so cladogram positioning keeps the node (now the apex of a
+    // collapsed-clade triangle) at its true branch point rather than snapping
+    // it to the tip-alignment line. This also keeps the rest of the tree's
+    // horizontal layout stable when a clade is collapsed.
+    calcDepthToLeaf(node)
     node._children = node.children
     node.children = null
   }
 }
 
+// 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
+// collapsed-clade triangle in phylogram mode.
+export function collapsedSubtreeLengthExtent<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 => ({
+      node: child,
+      acc: Math.max(child.data.length ?? 0, 0),
+    }))
+    while (stack.length > 0) {
+      const { node: n, acc } = stack.pop()!
+      const kids = n.children ?? n._children
+      if (kids?.length) {
+        for (const child of kids) {
+          stack.push({
+            node: child,
+            acc: acc + Math.max(child.data.length ?? 0, 0),
+          })
+        }
+      } else {
+        min = Math.min(min, acc)
+        max = Math.max(max, acc)
+      }
+    }
+  }
+  return { min: min === Infinity ? 0 : min, max }
+}
+
 // Cladogram positioning based on ape's plot.phylo: uses topological depth (max
 // steps to a tip) instead of branch length so all leaves align at the rightmost
 // x. Memoizes onto node.depthToLeaf since the layout walks the tree repeatedly.
 // See https://github.com/emmanuelparadis/ape/blob/master/R/plot.phylo.R
-export function calcDepthToLeaf(node: HierarchyNode): number {
+export function calcDepthToLeaf<T>(node: HierarchyNode<T>): number {
   const nodes = descendants(node)
   for (let i = nodes.length - 1; i >= 0; i--) {
     const n = nodes[i]!

package/src/impgRender.test.tsx

@@ -0,0 +1,125 @@
+// @vitest-environment jsdom
+//
+// End-to-end check of the impg (https://github.com/pangenome/impg) integration:
+// impg's scripts/faln2html.py drives the viewer exactly as below --
+//   MSAModelF().create({ type:'MsaView', data:{ msa } })
+//   model.setColorSchemeName('percent_identity_dynamic')
+//   model.setBgColor(true); model.setWidth(1300)
+// then renders <MSAView model/>. This exercises that path headlessly via the
+// public renderToSvg export. Polyfills mirror scripts/generateFigures.tsx.
+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'
+
+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
+})
+
+// representative `impg query -o fasta-aln` block: PanSN names with region
+// colons, dash gaps, mixed-case (soft-masked) bases
+const impgFastaAln = `>HG002#1#chr1:1000-1040
+ACGTACGT--ACGTNNNNacgtACGTACGTACGTACGT
+>HG003#1#chr1:1000-1040
+ACGTAC-TGGACGTNNNNACGTAC--ACGTacgtACGT
+>CHM13#0#chr1:1000-1040
+ACGTACGTGGACGTNNNNACGT----ACGTACGTACGT`
+
+test('renders an impg fasta-aln block with declarative impg config', async () => {
+  // everything except width is a declarative MST property, so it can be set in
+  // the create() snapshot -- no setColorSchemeName/setBgColor/setMSAFormat
+  // action calls needed. msaFormat:'fasta' forces the parser and skips the
+  // heuristic fasta-vs-a3m sniffing. width is volatile (tracks container size)
+  // so it remains an action.
+  const model = MSAModelF().create({
+    id: 'impg-test',
+    type: 'MsaView',
+    height: 400,
+    colorSchemeName: 'percent_identity_dynamic',
+    bgColor: true,
+    msaFormat: 'fasta',
+    data: { msa: impgFastaAln },
+  })
+  model.setWidth(1300)
+
+  // the declarative config took effect
+  expect(model.colorSchemeName).toBe('percent_identity_dynamic')
+  expect(model.bgColor).toBe(true)
+  expect(model.msaFormat).toBe('fasta')
+
+  // the alignment parsed and all 3 rows are present at equal width
+  expect(model.rowNames).toEqual([
+    'HG002#1#chr1:1000-1040',
+    'HG003#1#chr1:1000-1040',
+    'CHM13#0#chr1:1000-1040',
+  ])
+  expect(model.numColumns).toBe(38)
+
+  const svg = await renderToSvg(model, {
+    theme: createJBrowseTheme(),
+    exportType: 'entire',
+    includeMinimap: false,
+    includeTracks: false,
+  })
+  expect(svg).toContain('<svg')
+  expect(svg).toContain('HG002#1#chr1:1000-1040')
+})

package/src/model/msaModel.ts

@@ -2,6 +2,10 @@ import { types } from '@jbrowse/mobx-state-tree'
 
 import { defaultBgColor, defaultColorSchemeName } from '../constants.ts'
 
+import type { MSAFormat } from 'msa-parsers'
+
+const msaFormats: MSAFormat[] = ['stockholm', 'a3m', 'fasta', 'emf', 'clustal']
+
 /**
  * #stateModel MSAModel
  */
@@ -19,6 +23,15 @@ export function MSAModelF() {
        * default color scheme name
        */
       colorSchemeName: defaultColorSchemeName,
+
+      /**
+       * #property
+       * force the MSA data to be parsed as a specific format instead of relying
+       * on auto-detection (which is ambiguous between e.g. fasta and a3m)
+       */
+      msaFormat: types.maybe(
+        types.enumeration<MSAFormat>('MSAFormat', msaFormats),
+      ),
     })
     .actions(self => ({
       /**
@@ -35,5 +48,13 @@ export function MSAModelF() {
       setBgColor(arg: boolean) {
         self.bgColor = arg
       },
+
+      /**
+       * #action
+       * force a specific MSA parser, or pass undefined to auto-detect
+       */
+      setMSAFormat(arg?: MSAFormat) {
+        self.msaFormat = arg
+      },
     }))
 }