react-msaview 5.7.3 → 5.8.0

package/src/colSpace.test.ts

@@ -0,0 +1,40 @@
+// @vitest-environment jsdom
+import { expect, test } from 'vitest'
+
+import MSAModelF from './model.ts'
+
+// a ragged alignment: row `a` stops early, so the alignment is as wide as `b`.
+// Column space has to follow the widest row -- the gap analysis already does --
+// or every column past the first row's end becomes unreachable: unscrollable,
+// unhoverable, and missing from the minimap.
+const msa = `>a
+ACGT
+>b
+ACGTACGTAC`
+
+function makeModel() {
+  const model = MSAModelF().create({
+    id: 'col-space-test',
+    type: 'MsaView',
+    msaFormat: 'fasta',
+    data: { msa },
+  })
+  model.setWidth(800)
+  return model
+}
+
+test('column space spans the widest row', () => {
+  const model = makeModel()
+  expect(model.numColumns).toBe(10)
+  expect(model.totalWidth).toBe(10 * model.colWidth)
+})
+
+test('the last column agrees with the column statistics', () => {
+  const model = makeModel()
+  expect(model.colStats.numColumns).toBe(model.numColumns)
+  expect(model.conservation).toHaveLength(model.numColumns)
+
+  model.setMousePos(model.numColumns - 1, 1)
+  expect(model.mouseOverColumnStats?.col).toBe(9)
+  expect(model.visibleColToRowLetter('b', 9)).toBe('C')
+})

package/src/components/SequenceTextArea.tsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react'
 
 import { makeStyles } from '@jbrowse/core/util/tss-react'
 import { Button, TextField } from '@mui/material'
+import { getUngappedSequence } from 'msa-parsers'
 
 import copy from '../vendor/copyToClipboard.ts'
 import Checkbox2 from './Checkbox2.tsx'
@@ -24,9 +25,8 @@ export default function SequenceTextArea({ str }: { str: [string, string][] }) {
   const [showGaps, setShowGaps] = useState(false)
   const [showEmpty, setShowEmpty] = useState(false)
 
-  const removeGaps = (s: string) => s.replaceAll('-', '').replaceAll('.', '')
   const disp = str
-    .map(([s1, s2]) => [s1, showGaps ? s2 : removeGaps(s2)] as const)
+    .map(([s1, s2]) => [s1, showGaps ? s2 : getUngappedSequence(s2)] as const)
     .filter(([, s2]) => showEmpty || !!s2)
     .map(([s1, s2]) => `>${s1}\n${s2}`)
     .join('\n')

package/src/components/dialogs/UserProvidedDomainsDialog.tsx

@@ -112,8 +112,15 @@ const UserProvidedDomainsDialog = observer(function ({
                   ? JSON.parse(await file.text())
                   : await jsonfetch(interProURL)
 
+                // key each result by its xref id; a result without one has no
+                // row to attach to, and keying it `undefined` would draw a
+                // phantom row's worth of domains
                 model.setDomains(
-                  Object.fromEntries(ret.results.map(r => [r.xref[0]!.id, r])),
+                  Object.fromEntries(
+                    ret.results
+                      .map(r => [r.xref[0]?.id, r] as const)
+                      .filter(e => e[0] !== undefined),
+                  ),
                 )
                 getSession(model).notify(
                   'Loaded interproscan results',

package/src/components/header/getDomainsMenu.ts

@@ -49,7 +49,7 @@ export function getDomainMenu({ model }: { model: MsaViewModel }) {
       label: `Show domains${noDomains ? ' (no domains loaded)' : ''}`,
       disabled: noDomains,
       icon: Visibility,
-      checked: actuallyShowDomains ? showDomains : false,
+      checked: actuallyShowDomains,
       type: 'checkbox' as const,
       onClick: () => {
         model.setShowDomains(!showDomains)

package/src/components/import/ImportForm.tsx

@@ -57,15 +57,12 @@ const ImportForm = observer(function ({ model }: { model: MsaViewModel }) {
         <div>
           <Button
             onClick={() => {
-              // eslint-disable-next-line @typescript-eslint/no-floating-promises
-              ;(async () => {
-                try {
-                  await load(model, msaFile, treeFile, gffFile)
-                } catch (e) {
-                  console.error(e)
-                  model.setError(e)
-                }
-              })()
+              try {
+                load(model, msaFile, treeFile, gffFile)
+              } catch (e) {
+                console.error(e)
+                model.setError(e)
+              }
             }}
             variant="contained"
             color="primary"

package/src/components/import/ImportFormExamples.tsx

@@ -49,20 +49,17 @@ const ImportFormExamples = observer(function ({
     tree?: string
     gff?: string
   }) {
-    // eslint-disable-next-line @typescript-eslint/no-floating-promises
-    ;(async () => {
-      try {
-        await load(
-          model,
-          msa ? { uri: msa, locationType: 'UriLocation' } : undefined,
-          tree ? { uri: tree, locationType: 'UriLocation' } : undefined,
-          gff ? { uri: gff, locationType: 'UriLocation' } : undefined,
-        )
-      } catch (e) {
-        console.error(e)
-        model.setError(e)
-      }
-    })()
+    try {
+      load(
+        model,
+        msa ? { uri: msa, locationType: 'UriLocation' } : undefined,
+        tree ? { uri: tree, locationType: 'UriLocation' } : undefined,
+        gff ? { uri: gff, locationType: 'UriLocation' } : undefined,
+      )
+    } catch (e) {
+      console.error(e)
+      model.setError(e)
+    }
   }
   return (
     <ul>

package/src/components/import/util.ts

@@ -1,7 +1,7 @@
 import type { MsaViewModel } from '../../model.ts'
 import type { FileLocation } from '@jbrowse/core/util'
 
-export async function load(
+export function load(
   model: MsaViewModel,
   msaFile?: FileLocation,
   treeFile?: FileLocation,

package/src/components/msa/renderBoxFeatureCanvasBlock.ts

@@ -23,8 +23,9 @@ export function renderBoxFeatureCanvasBlock({
   blockSizeXOverride?: number
   blockSizeYOverride?: number
 }) {
-  const { blockSize, rowHeight, highResScaleFactor, showDomains } = model
-  if (showDomains) {
+  const { blockSize, rowHeight, highResScaleFactor, actuallyShowDomains } =
+    model
+  if (actuallyShowDomains) {
     const k = highResScaleFactorOverride ?? highResScaleFactor
     const bx = blockSizeXOverride ?? blockSize
     const by = blockSizeYOverride ?? blockSize

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

@@ -1,9 +1,12 @@
 import { describe, expect, it } from 'vitest'
 
 import { calcDepthToLeaf, findMaxBranchLen } from '../../hierarchy.ts'
-import { getNodeX } from './renderTreeCanvas.ts'
+import stateModelFactory from '../../model.ts'
+import { getNodeX, renderTreeCanvas } from './renderTreeCanvas.ts'
 
 import type { HierarchyNode } from '../../hierarchy.ts'
+import type { RenderCtx } from '../renderCtx.ts'
+import type { Theme } from '@mui/material'
 
 function leaf(id: string, len?: number): HierarchyNode {
   return {
@@ -113,3 +116,53 @@ describe('getNodeX cladogram positioning', () => {
     expect(getNodeX(leaf('a', 2.5), true, 100, 1)).toBe(2.5)
   })
 })
+
+// the x values the tree pass actually strokes, for a model built from newick
+function drawnTreeXs(newick: string) {
+  const model = stateModelFactory().create({
+    type: 'MsaView',
+    data: { msa: '>a\nA\n>b\nA\n>c\nA\n>d\nA', tree: newick },
+  })
+  model.setWidth(1000)
+  // labels would need a canvas to measure; the branch geometry is the subject
+  model.setDrawLabels(false)
+  model.setDrawNodeBubbles(false)
+
+  const xs: number[] = []
+  const ctx = {
+    font: '12px sans-serif',
+    beginPath() {},
+    stroke() {},
+    resetTransform() {},
+    scale() {},
+    translate() {},
+    moveTo(x: number) {
+      xs.push(x)
+    },
+    lineTo(x: number) {
+      xs.push(x)
+    },
+  } as unknown as RenderCtx
+
+  renderTreeCanvas({
+    model,
+    ctx,
+    offsetY: 0,
+    theme: { palette: { text: { primary: '#000' } } } as Theme,
+  })
+  return xs
+}
+
+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)
+  })
+
+  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)
+  })
+})

package/src/components/tree/renderTreeCanvas.ts

@@ -24,14 +24,15 @@ function inYBlock(y: number, offsetY: number, by: number) {
   return y > offsetY - extendBounds && y < offsetY + by + extendBounds
 }
 
-// Calculate node x-coordinate for both phylogram (with branch lengths) and cladogram (topology only) modes
-// For cladograms: x = (maxDepthToLeaf - nodeDepthToLeaf) / maxDepthToLeaf * maxWidth
-// This positions: leaves at maxWidth (rightmost), root at 0 (leftmost), internal nodes proportionally in between
+// Calculate node x-coordinate for both phylogram (with branch lengths) and
+// cladogram (topology only) modes. tipX is the pixel x the tips sit at.
+// For cladograms: x = (maxDepthToLeaf - nodeDepthToLeaf) / maxDepthToLeaf * tipX
+// This positions: leaves at tipX (rightmost), root at 0 (leftmost), internal nodes proportionally in between
 // Matches ape's: xx <- max(xx) - xx (where xx is depth from each node to tips)
 export function getNodeX(
   node: HierarchyNode,
   showBranchLen: boolean,
-  maxBranchLen: number,
+  tipX: number,
   maxDepthToLeaf: number,
 ): number | undefined {
   if (showBranchLen) {
@@ -41,7 +42,7 @@ export function getNodeX(
     return 0
   }
   const depthToLeaf = calcDepthToLeaf(node)
-  return ((maxDepthToLeaf - depthToLeaf) / maxDepthToLeaf) * maxBranchLen
+  return ((maxDepthToLeaf - depthToLeaf) / maxDepthToLeaf) * tipX
 }
 
 export function renderTree({
@@ -49,7 +50,7 @@ export function renderTree({
   ctx,
   model,
   theme,
-  maxBranchLen,
+  tipX,
   maxDepthToLeaf,
   blockSizeYOverride,
 }: {
@@ -57,7 +58,7 @@ export function renderTree({
   ctx: RenderCtx
   model: MsaViewModel
   theme: Theme
-  maxBranchLen: number
+  tipX: number
   maxDepthToLeaf: number
   blockSizeYOverride?: number
 }) {
@@ -67,8 +68,8 @@ export function renderTree({
   forEachLink(hierarchy, (source, target) => {
     const sy = source.x!
     const ty = target.x!
-    const tx = getNodeX(target, showBranchLen, maxBranchLen, maxDepthToLeaf)
-    const sx = getNodeX(source, showBranchLen, maxBranchLen, maxDepthToLeaf)
+    const tx = getNodeX(target, showBranchLen, tipX, maxDepthToLeaf)
+    const sx = getNodeX(source, showBranchLen, tipX, maxDepthToLeaf)
     if (tx === undefined || sx === undefined) {
       return
     }
@@ -94,7 +95,7 @@ export function renderCollapsedTriangles({
   offsetY,
   model,
   theme,
-  maxBranchLen,
+  tipX,
   maxDepthToLeaf,
   blockSizeYOverride,
 }: {
@@ -103,7 +104,7 @@ export function renderCollapsedTriangles({
   offsetY: number
   model: MsaViewModel
   theme: Theme
-  maxBranchLen: number
+  tipX: number
   maxDepthToLeaf: number
   blockSizeYOverride?: number
 }) {
@@ -116,19 +117,23 @@ export function renderCollapsedTriangles({
     fontSize,
     marginLeft: ml,
   } = 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) {
+    return
+  }
+  const collapsedSet = new Set(collapsed)
   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)
+    if (collapsedSet.has(id)) {
+      const apexX = getNodeX(node, showBranchLen, tipX, maxDepthToLeaf)
       const y = node.x!
       const inBlock = inYBlock(y, offsetY, by)
       // 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
+      const baseX = showBranchLen ? (node.collapsedTipXFar ?? tipX) : tipX
       if (apexX !== undefined && inBlock && baseX > apexX) {
         ctx.beginPath()
         ctx.moveTo(apexX, y)
@@ -171,7 +176,7 @@ export function renderNodeBubbles({
   clickMap,
   offsetY,
   model,
-  maxBranchLen,
+  tipX,
   maxDepthToLeaf,
   blockSizeYOverride,
 }: {
@@ -179,7 +184,7 @@ export function renderNodeBubbles({
   clickMap?: ClickMapIndex
   offsetY: number
   model: MsaViewModel
-  maxBranchLen: number
+  tipX: number
   maxDepthToLeaf: number
   blockSizeYOverride?: number
 }) {
@@ -191,8 +196,9 @@ export function renderNodeBubbles({
     marginLeft: ml,
   } = model
   const by = blockSizeYOverride ?? blockSize
+  const collapsedSet = new Set(collapsed)
   forEachDescendant(hierarchy, node => {
-    const x = getNodeX(node, showBranchLen, maxBranchLen, maxDepthToLeaf)
+    const x = getNodeX(node, showBranchLen, tipX, maxDepthToLeaf)
     if (x === undefined) {
       return
     }
@@ -200,7 +206,7 @@ export function renderNodeBubbles({
     const y = node.x!
     const { id, name } = data
     if (node.height >= 1 && inYBlock(y, offsetY, by)) {
-      const isCollapsed = collapsed.includes(id)
+      const isCollapsed = collapsedSet.has(id)
       ctx.strokeStyle = 'black'
       ctx.fillStyle = isCollapsed ? 'black' : 'white'
       ctx.beginPath()
@@ -231,7 +237,7 @@ export function renderTreeLabels({
   offsetY,
   ctx,
   clickMap,
-  maxBranchLen,
+  tipX,
   maxDepthToLeaf,
   blockSizeYOverride,
 }: {
@@ -240,7 +246,7 @@ export function renderTreeLabels({
   ctx: RenderCtx
   clickMap?: ClickMapIndex
   theme: Theme
-  maxBranchLen: number
+  tipX: number
   maxDepthToLeaf: number
   blockSizeYOverride?: number
 }) {
@@ -289,7 +295,7 @@ export function renderTreeLabels({
       const yp = y + fontSize / 4
       let xp = 0
       if (!noTree) {
-        xp = getNodeX(node, showBranchLen, maxBranchLen, maxDepthToLeaf) ?? 0
+        xp = getNodeX(node, showBranchLen, tipX, maxDepthToLeaf) ?? 0
       }
 
       const width =
@@ -375,7 +381,14 @@ export function renderTreeCanvas({
 
   // memoized on the model and shared across the tree/bubble/label passes (and
   // across all tree blocks) rather than re-traversing the hierarchy in each
-  const { maxBranchLength: maxBranchLen, maxDepthToLeaf } = model
+  const { maxBranchLength, maxDepthToLeaf, showBranchLenEffective, treeWidth } =
+    model
+  // pixel x of the tips. A phylogram scales branch lengths so the longest
+  // root-to-tip path lands at maxBranchLength; a cladogram ignores lengths and
+  // spreads topological depth across the whole tree area instead. Reusing
+  // 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
 
   if (!noTree && drawTree) {
     renderTree({
@@ -383,7 +396,7 @@ export function renderTreeCanvas({
       offsetY,
       model,
       theme,
-      maxBranchLen,
+      tipX,
       maxDepthToLeaf,
       blockSizeYOverride,
     })
@@ -394,7 +407,7 @@ export function renderTreeCanvas({
       offsetY,
       model,
       theme,
-      maxBranchLen,
+      tipX,
       maxDepthToLeaf,
       blockSizeYOverride,
     })
@@ -405,7 +418,7 @@ export function renderTreeCanvas({
         offsetY,
         clickMap,
         model,
-        maxBranchLen,
+        tipX,
         maxDepthToLeaf,
         blockSizeYOverride,
       })
@@ -419,7 +432,7 @@ export function renderTreeCanvas({
       model,
       clickMap,
       theme,
-      maxBranchLen,
+      tipX,
       maxDepthToLeaf,
       blockSizeYOverride,
     })

package/src/flatToTree.test.ts

@@ -15,6 +15,27 @@ describe('flatToTree', () => {
     expect(root.children[0]!.children.map(c => c.id)).toEqual(['3'])
   })
 
+  test('carries the label and branch length of a BioTreeContainer node', () => {
+    const root = flatToTree([
+      { id: 0, label: 'Multiple organisms' },
+      {
+        id: 1,
+        parent: 0,
+        label: 'sodium/glucose cotransporter 4',
+        dist: '0.5',
+      },
+      { id: 2, parent: 0 },
+    ])
+    expect(root.name).toBe('Multiple organisms')
+    expect(root.children[0]).toMatchObject({
+      name: 'sodium/glucose cotransporter 4',
+      length: 0.5,
+    })
+    // no label falls back to the id, and no dist leaves the length unset
+    expect(root.children[1]!.name).toBe('2')
+    expect(root.children[1]!.length).toBeUndefined()
+  })
+
   test('throws on empty input rather than returning undefined', () => {
     expect(() => flatToTree([])).toThrow(/no root/)
   })

package/src/flatToTree.ts

@@ -1,26 +1,37 @@
 interface FlatItem {
   id: number
   parent?: number
+  // NCBI BioTreeContainer features, already un-remapped by parseAsn1. Both are
+  // strings there: the ASN.1 encodes every feature value as one.
+  label?: string
+  dist?: string
 }
 
 interface TreeNode {
   id: string
   name: string
-  parent?: string
+  length?: number
   children: TreeNode[]
 }
 
 export function flatToTree(items: FlatItem[]): TreeNode {
   const nodeMap = new Map(
-    items.map(item => [
-      item.id,
-      {
-        id: `${item.id}`,
-        name: `${item.id}`,
-        parent: item.parent !== undefined ? `${item.parent}` : undefined,
-        children: [] as TreeNode[],
-      },
-    ]),
+    items.map(item => {
+      const length = item.dist === undefined ? undefined : Number(item.dist)
+      return [
+        item.id,
+        {
+          id: `${item.id}`,
+          // the label is what NCBI's own tree viewer shows; falling back to the
+          // node id would render a tree of bare numbers
+          name: item.label || `${item.id}`,
+          ...(length !== undefined && Number.isFinite(length)
+            ? { length }
+            : {}),
+          children: [] as TreeNode[],
+        },
+      ]
+    }),
   )
 
   let root: TreeNode | undefined