react-msaview 5.2.1 → 5.4.0

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,52 @@ 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,13 @@ 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 +46,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
+      },
     }))
 }

package/src/model.ts

@@ -1,10 +1,4 @@
-import {
-  clamp,
-  fetchAndMaybeUnzipText,
-  groupBy,
-  notEmpty,
-  sum,
-} from '@jbrowse/core/util'
+import { clamp, groupBy, notEmpty, sum } from '@jbrowse/core/util'
 import { openLocation } from '@jbrowse/core/util/io'
 import { ElementId, FileLocation } from '@jbrowse/core/util/types/mst'
 import { addDisposer, cast, types } from '@jbrowse/mobx-state-tree'
@@ -51,13 +45,16 @@ import {
   minRowHeight,
 } from './constants.ts'
 import { createPaletteMap } from './createPaletteMap.ts'
+import { fetchTextWithProgress, isAbortError } from './fetchUtils.ts'
 import { flatToTree } from './flatToTree.ts'
 import {
   calcDepthToLeaf,
   clusterLayout,
   collapse,
+  collapsedSubtreeLengthExtent,
   find,
   findMaxBranchLen,
+  forEachDescendant,
   hierarchy,
   leaves,
   links,
@@ -669,7 +666,9 @@ function stateModelFactory() {
         const text = self.data.msa
         // uses parseMSA so the named MSAParserType return type is portable
         // to downstream consumers (avoids TS2883 with default exports)
-        return text ? parseMSA(text, self.currentAlignment) : null
+        return text
+          ? parseMSA(text, self.currentAlignment, self.msaFormat)
+          : null
       },
       /**
        * #getter
@@ -1023,7 +1022,18 @@ function stateModelFactory() {
         clusterLayout(r, this.totalHeight, self.treeWidth)
         r.data.length = 0
         const max = maxLength(r)
-        setBrLength(r, 0, max ? self.treeWidth / max : 0)
+        const k = max ? self.treeWidth / max : 0
+        setBrLength(r, 0, k)
+        // for each collapsed clade, record the pixel x-positions of its
+        // nearest/farthest tips so the renderer can draw a triangle that spans
+        // the branch-length extent of the hidden subtree
+        forEachDescendant(r, node => {
+          if (node._children) {
+            const { min, max: mx } = collapsedSubtreeLengthExtent(node)
+            node.collapsedTipXNear = (node.len ?? 0) + min * k
+            node.collapsedTipXFar = (node.len ?? 0) + mx * k
+          }
+        })
         return r as HierarchyNode<NodeWithIdsAndLength>
       },
 
@@ -1759,8 +1769,13 @@ function stateModelFactory() {
               const generation = ++treeGeneration
               try {
                 self.setLoadingTree(true)
-                const text = await fetchAndMaybeUnzipText(
+                const text = await fetchTextWithProgress(
                   openLocation(treeFilehandle),
+                  status => {
+                    if (generation === treeGeneration) {
+                      self.setStatus(status)
+                    }
+                  },
                 )
                 if (generation === treeGeneration) {
                   transaction(() => {
@@ -1773,8 +1788,14 @@ function stateModelFactory() {
                 }
               } catch (e) {
                 if (generation === treeGeneration) {
-                  console.error(e)
-                  self.setError(e)
+                  if (isAbortError(e)) {
+                    // cancelled by the user: drop the filehandle so the view
+                    // returns to the import form instead of a stuck spinner
+                    self.setTreeFilehandle(undefined)
+                  } else {
+                    console.error(e)
+                    self.setError(e)
+                  }
                 }
               } finally {
                 if (generation === treeGeneration) {
@@ -1792,13 +1813,19 @@ function stateModelFactory() {
             if (treeMetadataFilehandle) {
               try {
                 self.setTreeMetadata(
-                  await fetchAndMaybeUnzipText(
+                  await fetchTextWithProgress(
                     openLocation(treeMetadataFilehandle),
+                    status => {
+                      self.setStatus(status)
+                    },
                   ),
                 )
               } catch (e) {
-                console.error(e)
-                self.setError(e)
+                // ignore user cancel (isAbortError); treeMetadata is optional
+                if (!isAbortError(e)) {
+                  console.error(e)
+                  self.setError(e)
+                }
               }
             }
           }),
@@ -1827,16 +1854,24 @@ function stateModelFactory() {
             const { gffFilehandle } = self
             if (gffFilehandle) {
               try {
-                const gffText = await fetchAndMaybeUnzipText(
+                const gffText = await fetchTextWithProgress(
                   openLocation(gffFilehandle),
+                  status => {
+                    self.setStatus(status)
+                  },
                 )
                 self.applyGFFText(gffText)
                 if (gffFilehandle.locationType === 'BlobLocation') {
                   self.setGFFFilehandle(undefined)
                 }
               } catch (e) {
-                console.error(e)
-                self.setError(e)
+                // on user cancel (isAbortError) drop the filehandle
+                if (isAbortError(e)) {
+                  self.setGFFFilehandle(undefined)
+                } else {
+                  console.error(e)
+                  self.setError(e)
+                }
               }
             }
           }),
@@ -1853,8 +1888,13 @@ function stateModelFactory() {
               try {
                 self.setLoadingMSA(true)
                 self.setError(undefined)
-                const txt = await fetchAndMaybeUnzipText(
+                const txt = await fetchTextWithProgress(
                   openLocation(msaFilehandle),
+                  status => {
+                    if (generation === msaGeneration) {
+                      self.setStatus(status)
+                    }
+                  },
                 )
                 if (generation === msaGeneration) {
                   transaction(() => {
@@ -1867,8 +1907,14 @@ function stateModelFactory() {
                 }
               } catch (e) {
                 if (generation === msaGeneration) {
-                  console.error(e)
-                  self.setError(e)
+                  if (isAbortError(e)) {
+                    // cancelled by the user: drop the filehandle so the view
+                    // returns to the import form instead of a stuck spinner
+                    self.setMSAFilehandle(undefined)
+                  } else {
+                    console.error(e)
+                    self.setError(e)
+                  }
                 }
               } finally {
                 if (generation === msaGeneration) {

package/src/version.ts

@@ -1 +1 @@
-export const version = '5.2.1'
+export const version = '5.4.0'