react-msaview 6.4.2 → 7.0.0

package/src/components/tree/renderTreeCanvas.ts

@@ -1,31 +1,66 @@
-import {
-  calcDepthToLeaf,
-  forEachDescendant,
-  forEachLink,
-} from '../../hierarchy.ts'
+import { calcDepthToLeaf } from '../../hierarchy.ts'
 import { setFontSize } from '../../setFontSize.ts'
 import { getVisibleLeaves } from '../getVisibleLeaves.ts'
 import {
   drawHighlightLabel,
+  highlightLabelHeight,
   highlightRowFill,
 } from '../msa/renderHighlights.ts'
 
 import type { HierarchyNode } from '../../hierarchy.ts'
 import type { MsaViewModel } from '../../model.ts'
+import type { LabelBox } from '../msa/renderHighlights.ts'
 import type { RenderCtx } from '../renderCtx.ts'
 import type { ClickMapIndex } from './clickMap.ts'
 import type { Theme } from '@mui/material'
 
-export const padding = 600
-
-const extendBounds = 5
 const radius = 2.5
 const d = radius * 2
 
-// whether a node's row-center y falls within the block being drawn, padded by
-// extendBounds so bubbles/labels/triangles straddling the edge still render
-function inYBlock(y: number, offsetY: number, by: number) {
-  return y > offsetY - extendBounds && y < offsetY + by + extendBounds
+// How far outside a block a node's row-center can sit and still draw into it: a
+// collapsed triangle reaches 0.42 rows each way, a tip label an em, and a
+// highlight label its whole box. Five pixels clipped all three at block edges.
+function blockPad(model: MsaViewModel) {
+  return Math.max(model.rowHeight, highlightLabelHeight)
+}
+
+// whether a node's row-center y falls within the block being drawn, padded so
+// bubbles/labels/triangles straddling the edge still render
+function inYBlock(y: number, offsetY: number, by: number, pad: number) {
+  return y > offsetY - pad && y < offsetY + by + pad
+}
+
+/**
+ * Every node whose subtree reaches into the block, skipping the subtrees that
+ * do not. A subtree's leaves are one contiguous run of rows -- clusterLayout
+ * records the run as xMin/xMax -- so a block of a 200k-tip tree visits a few
+ * dozen nodes instead of every one of them, three times over.
+ *
+ * A link out of a visited node is still drawn even when the child it reaches is
+ * pruned, which is what keeps a branch that crosses the block from vanishing.
+ */
+function forEachNodeInBlock(
+  root: HierarchyNode,
+  offsetY: number,
+  by: number,
+  pad: number,
+  cb: (node: HierarchyNode) => void,
+) {
+  const top = offsetY - pad
+  const bottom = offsetY + by + pad
+  const stack = [root]
+  while (stack.length > 0) {
+    const node = stack.pop()!
+    if (node.xMax! < top || node.xMin! > bottom) {
+      continue
+    }
+    cb(node)
+    if (node.children) {
+      for (const child of node.children) {
+        stack.push(child)
+      }
+    }
+  }
 }
 
 // Calculate node x-coordinate for both phylogram (with branch lengths) and
@@ -69,26 +104,30 @@ function renderTree({
   const { hierarchy, showBranchLenEffective: showBranchLen, blockSize } = model
   const by = blockSizeYOverride ?? blockSize
   ctx.strokeStyle = theme.palette.text.primary
-  forEachLink(hierarchy, (source, target) => {
+  forEachNodeInBlock(hierarchy, offsetY, by, blockPad(model), source => {
     const sy = source.x!
-    const ty = target.x!
-    const tx = getNodeX(target, showBranchLen, tipX, maxDepthToLeaf)
     const sx = getNodeX(source, showBranchLen, tipX, maxDepthToLeaf)
-    if (tx === undefined || sx === undefined) {
+    if (sx === undefined || !source.children) {
       return
     }
-
-    const y1 = Math.min(sy, ty)
-    const y2 = Math.max(sy, ty)
-    // 1d line intersection to check if line crosses block at all, this is an
-    // optimization that allows us to skip drawing most tree links outside the
-    // block
-    if (offsetY + by >= y1 && y2 >= offsetY) {
-      ctx.beginPath()
-      ctx.moveTo(sx, sy)
-      ctx.lineTo(sx, ty)
-      ctx.lineTo(tx, ty)
-      ctx.stroke()
+    for (const target of source.children) {
+      const ty = target.x!
+      const tx = getNodeX(target, showBranchLen, tipX, maxDepthToLeaf)
+      if (tx === undefined) {
+        continue
+      }
+      const y1 = Math.min(sy, ty)
+      const y2 = Math.max(sy, ty)
+      // 1d line intersection to check if line crosses block at all, this is an
+      // optimization that allows us to skip drawing most tree links outside the
+      // block
+      if (offsetY + by >= y1 && y2 >= offsetY) {
+        ctx.beginPath()
+        ctx.moveTo(sx, sy)
+        ctx.lineTo(sx, ty)
+        ctx.lineTo(tx, ty)
+        ctx.stroke()
+      }
     }
   })
 }
@@ -129,12 +168,12 @@ function renderCollapsedTriangles({
   }
   const by = blockSizeYOverride ?? blockSize
   const halfHeight = Math.max(2, rowHeight * 0.42)
-  forEachDescendant(hierarchy, node => {
+  forEachNodeInBlock(hierarchy, offsetY, by, blockPad(model), node => {
     const { id, name } = node.data
     if (collapsedSet.has(id)) {
       const apexX = getNodeX(node, showBranchLen, tipX, maxDepthToLeaf)
       const y = node.x!
-      const inBlock = inYBlock(y, offsetY, by)
+      const inBlock = inYBlock(y, offsetY, by, blockPad(model))
       // 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 ?? tipX) : tipX
@@ -205,7 +244,7 @@ function renderNodeBubbles({
     marginLeft: ml,
   } = model
   const by = blockSizeYOverride ?? blockSize
-  forEachDescendant(hierarchy, node => {
+  forEachNodeInBlock(hierarchy, offsetY, by, blockPad(model), node => {
     const x = getNodeX(node, showBranchLen, tipX, maxDepthToLeaf)
     if (x === undefined) {
       return
@@ -213,7 +252,7 @@ function renderNodeBubbles({
     const { data } = node
     const y = node.x!
     const { id, name } = data
-    if (node.height >= 1 && inYBlock(y, offsetY, by)) {
+    if (node.height >= 1 && inYBlock(y, offsetY, by, blockPad(model))) {
       const isCollapsed = collapsedSet.has(id)
       if (draw) {
         ctx.strokeStyle = 'black'
@@ -279,6 +318,7 @@ function renderTreeLabels({
   // 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: by })
+  const pad = blockPad(model)
   const emHeight = ctx.measureText('M').width
   if (labelsAlignRight) {
     ctx.textAlign = 'right'
@@ -297,7 +337,7 @@ function renderTreeLabels({
     // 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 = collapsedSet.has(id) && name === id
-    if (!isAnonymousCollapsed && inYBlock(y, offsetY, by)) {
+    if (!isAnonymousCollapsed && inYBlock(y, offsetY, by, pad)) {
       // note: +rowHeight/4 matches with -rowHeight/4 in msa
       const yp = y + fontSize / 4
       let xp = 0
@@ -376,11 +416,13 @@ function renderRowHighlights({
     blockSize,
   } = model
   const by = blockSizeYOverride ?? blockSize
+  const pad = blockPad(model)
+  const placed: LabelBox[] = []
   for (const { rowIndices, label, color } of resolvedHighlights) {
     ctx.fillStyle = color ?? highlightRowFill
     for (const index of rowIndices) {
       const y = index * rowHeight
-      if (inYBlock(y + rowHeight / 2, offsetY, by)) {
+      if (inYBlock(y + rowHeight / 2, offsetY, by, pad)) {
         ctx.fillRect(-marginLeft, y, treeAreaWidth, rowHeight)
       }
     }
@@ -388,7 +430,7 @@ function renderRowHighlights({
     if (
       label &&
       rowIndices.length &&
-      inYBlock(first * rowHeight, offsetY, by)
+      inYBlock(first * rowHeight, offsetY, by, pad)
     ) {
       drawHighlightLabel({
         ctx,
@@ -397,6 +439,8 @@ function renderRowHighlights({
         x: -marginLeft + 2,
         y: first * rowHeight,
         spanWidth: treeAreaWidth,
+        bounds: { min: -marginLeft, max: treeAreaWidth - marginLeft },
+        placed,
       })
     }
   }

package/src/components/tree/scaleBar.ts

@@ -0,0 +1,23 @@
+/**
+ * A round branch-length step and its width in pixels: the largest 1/2/5 x 10^n
+ * substitutions-per-site that fits in `maxPx`, aiming at about half of it.
+ * Returns undefined in cladogram mode, where the x-positions carry no length.
+ */
+export function scaleBarLength(pxPerUnit: number, maxPx: number) {
+  if (pxPerUnit <= 0 || maxPx < 20) {
+    return undefined
+  }
+  const target = maxPx / 2 / pxPerUnit
+  const magnitude = 10 ** Math.floor(Math.log10(target))
+  const mantissa = target / magnitude
+  const step = (mantissa >= 5 ? 5 : mantissa >= 2 ? 2 : 1) * magnitude
+  const px = step * pxPerUnit
+  return px > maxPx
+    ? undefined
+    : {
+        step,
+        px,
+        // a length of 0.02 reads as 0.02, not 0.020000000000000004
+        label: `${Number(step.toPrecision(2))}`,
+      }
+}

package/src/constants.ts

@@ -5,7 +5,11 @@ export const defaultHeight = 550
 export const defaultScrollX = 0
 export const defaultScrollY = 0
 export const defaultCurrentAlignment = 0
-export const defaultShowDomains = false
+// Annotations are loaded on purpose -- a gff filehandle, a file picked in the
+// dialog -- so they are drawn unless the reader has said otherwise. Since only
+// the "no" is stored, a shared link with the overlay hidden reopens hidden, and
+// one that never mentions it opens showing whatever annotations it carries.
+export const defaultShowDomains = true
 export const defaultShowDomainLegend = true
 export const defaultHideGaps = true
 export const defaultAllowedGappyness = 100
@@ -61,3 +65,18 @@ export const defaultTreeWidth = 300
 export const defaultShowBranchLen = true
 export const defaultDrawTree = true
 export const defaultDrawNodeBubbles = true
+
+// Neighbor joining refuses above this many rows. The distance matrix is O(n^2*L)
+// and the join loop O(n^3), both on the main thread with no progress and no
+// cancel: 400 rows measured 1.5s, 800 rows 10s, and 1600 would be about seventy.
+// See agent-docs/ideas/neighbor-joining-scaling.md for why the RapidNJ fix is a
+// real algorithm change rather than a port, and why capping is the honest answer
+// -- NJ on thousands of sequences is the wrong tool however fast it runs.
+export const maxNeighborJoiningRows = 500
+
+// The largest inline document the snapshot carries. Past this a pasted or
+// locally-opened file stays in the live model and leaves the snapshot, since a
+// session or a shared URL holding megabytes of sequence is not a link anyone
+// can send. `unshareableData` reads the same number, so what the viewer warns
+// about and what the snapshot drops cannot drift apart.
+export const maxInlineSnapshotBytes = 50_000

package/src/fetchUtils.ts

@@ -19,7 +19,6 @@ function statusMessageText(status: RpcStatus | undefined) {
 
 export interface FetchStatus {
   msg: string
-  url?: string
   onCancel?: () => void
 }
 
@@ -34,14 +33,18 @@ type ProgressFetcher = (
  * 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.
+ * for testing, and so is the AbortController: a caller that can supersede its
+ * own request -- the model's loaders, when the filehandle changes under them --
+ * holds one and aborts the download it no longer wants.
  */
 export async function fetchTextWithProgress(
   loc: Filehandle,
   setStatus: (status?: FetchStatus) => void,
-  fetcher: ProgressFetcher = fetchAndMaybeUnzipText,
+  {
+    fetcher = fetchAndMaybeUnzipText,
+    controller = new AbortController(),
+  }: { fetcher?: ProgressFetcher; controller?: AbortController } = {},
 ) {
-  const controller = new AbortController()
   try {
     return await fetcher(loc, {
       signal: controller.signal,
@@ -64,42 +67,6 @@ export async function fetchTextWithProgress(
   }
 }
 
-export async function myfetch(url: string, args?: RequestInit) {
-  const response = await fetch(url, args)
-
-  if (!response.ok) {
-    throw new Error(
-      `HTTP ${response.status} fetching ${url} ${await response.text()}`,
-    )
-  }
-
-  return response
-}
-
-export async function textfetch(url: string, args?: RequestInit) {
-  const response = await myfetch(url, args)
-  return response.text()
-}
-
-export async function jsonfetch<T>(url: string, args?: RequestInit) {
-  const response = await myfetch(url, args)
-  return response.json() as T
-}
-
-export function timeout(time: number, signal?: AbortSignal) {
-  return new Promise<void>((resolve, reject) => {
-    if (signal?.aborted) {
-      reject(new DOMException('Aborted', 'AbortError'))
-    } else {
-      const id = setTimeout(resolve, time)
-      signal?.addEventListener('abort', () => {
-        clearTimeout(id)
-        reject(new DOMException('Aborted', 'AbortError'))
-      })
-    }
-  })
-}
-
 export function isAbortError(e: unknown) {
   return e instanceof DOMException && e.name === 'AbortError'
 }

package/src/hierarchy.ts

@@ -25,6 +25,11 @@ export interface HierarchyNode<T = NodeWithIds> extends CoreHierarchyNode<T> {
   parent: HierarchyNode<T> | null
   x?: number
   y?: number
+  // the span of `x` over this node's subtree, set by clusterLayout. Leaves are
+  // laid out in order, so a subtree occupies one contiguous run of rows and a
+  // renderer can skip the whole thing when the run misses its block.
+  xMin?: number
+  xMax?: number
   len?: number
   depthToLeaf?: number
   _children?: HierarchyNode<T>[] | null
@@ -75,16 +80,26 @@ export function clusterLayout<T>(
   }
 
   // x of an internal node is the mean of its children's x, so process in
-  // post-order (children before parents)
+  // post-order (children before parents). The subtree span comes from the same
+  // pass, for the block culls in the tree renderer.
   const nodes = descendants(root)
   for (let i = nodes.length - 1; i >= 0; i--) {
     const node = nodes[i]!
     if (node.children) {
       let sum = 0
+      let min = Infinity
+      let max = -Infinity
       for (const child of node.children) {
         sum += child.x!
+        min = Math.min(min, child.xMin!)
+        max = Math.max(max, child.xMax!)
       }
       node.x = sum / node.children.length
+      node.xMin = min
+      node.xMax = max
+    } else {
+      node.xMin = node.x
+      node.xMax = node.x
     }
   }
 
@@ -172,15 +187,9 @@ export function calcDepthToLeaf<T>(node: HierarchyNode<T>): number {
   return node.depthToLeaf!
 }
 
-export function findMaxBranchLen(node: HierarchyNode): number {
-  let maxLen = 0
-  for (const n of descendants(node)) {
-    maxLen = Math.max(maxLen, n.len || 0)
-  }
-  return maxLen
-}
-
-// Max root-to-leaf sum of branch lengths within the subtree at d
+// Max root-to-leaf sum of branch lengths within the subtree at d. Negative
+// lengths are floored at zero, the same as setBrLength does when it lays the
+// tree out, so the extent this reports is the one that gets drawn
 export function maxLength(d: HierarchyNode): number {
   const nodes = descendants(d)
   const pathLen = new Map<HierarchyNode, number>()
@@ -192,7 +201,7 @@ export function maxLength(d: HierarchyNode): number {
         childMax = Math.max(childMax, pathLen.get(child)!)
       }
     }
-    pathLen.set(n, (n.data.length || 0) + childMax)
+    pathLen.set(n, Math.max(n.data.length || 0, 0) + childMax)
   }
   return pathLen.get(d)!
 }

package/src/index.ts

@@ -1,10 +1,12 @@
 // PUBLIC API — consumed by external JBrowse 2 plugins. Changing or removing any
 // export here is a breaking change for downstream repos:
-//   - jbrowse-plugin-msaview   (wraps MSAModelF + MSAView into a JBrowse view)
-//   - jbrowse-plugin-protein3d (drives MSA<->structure hover/highlight sync)
+//   - jbrowse-plugin-msaview (wraps MSAModelF + MSAView into a JBrowse view)
+//   - jbrowse-plugin-tview   (the same, for a tree-first view)
 // Those plugins also reach into the MsaViewModel instance at runtime; the model
 // members they rely on (e.g. mouseCol/setMousePos, setHighlightedColumns,
 // seqPosToVisibleCol/visibleColToSeqPos) are flagged inline in model.ts.
+// jbrowse-plugin-protein3d no longer depends on this package at all: it reads
+// the msaview plugin's model through a structural type of its own.
 export { renderToSvg } from './renderToSvg.tsx'
 export type { ExportSvgOptions } from './renderToSvg.tsx'
 // renderToSvg outside a browser needs DOM bits jsdom omits; react-msaview-cli
@@ -13,6 +15,10 @@ export {
   CHAR_WIDTH_RATIO,
   installHeadlessRenderEnv,
 } from './headlessRenderEnv.ts'
+// the row count past which calculateNeighborJoiningTreeFromMSA refuses, so a
+// host can gate its own menu item on the same number instead of offering a
+// button that throws
+export { maxNeighborJoiningRows } from './constants.ts'
 export { default as MSAView } from './components/Loading.tsx'
 export { default as MSAViewer } from './components/MSAViewer.tsx'
 export { type MsaViewModel, default as MSAModelF } from './model.ts'
@@ -29,15 +35,25 @@ export type { ColumnCounts } from './columnCounts.ts'
 export type {
   Accession,
   Annotation,
+  Arc,
+  ArcSpec,
+  ArcTrackModel,
   BasicTrack,
   BasicTrackModel,
   ColumnTrackSpec,
   DomainBand,
   Highlight,
   Node,
+  MappedStructure,
   NodeWithIds,
   NodeWithIdsAndLength,
+  ResidueMapping,
+  ResidueMappingProblem,
+  ResidueSegment,
   ResolvedHighlight,
+  RowResidue,
+  StructureResidue,
   TextTrackModel,
   TidyDomainAnnotation,
+  UnshareableData,
 } from './types.ts'

package/src/model/DataModel.ts

@@ -1,5 +1,7 @@
 import { types } from '@jbrowse/mobx-state-tree'
 
+import { maxInlineSnapshotBytes } from '../constants.ts'
+
 /**
  * #stateModel DataModel
  * the data stored for the model. this is sometimes temporary in the case that
@@ -56,11 +58,13 @@ export function DataModelF() {
     .postProcessSnapshot(snap =>
       // a large document is dropped from the snapshot rather than inlined
       // into a session or a shared URL, and every field here holds one, so
-      // the rule is the same for all of them
+      // the rule is the same for all of them. The parent model's
+      // `unshareableData` reports what this drops, since dropping it silently
+      // is how a copied link comes to open an empty viewer
       Object.fromEntries(
         Object.entries(snap).map(([key, text]) => [
           key,
-          text && text.length > 50_000 ? undefined : text,
+          text && text.length > maxInlineSnapshotBytes ? undefined : text,
         ]),
       ),
     )