react-msaview 5.2.0 → 5.3.0

package/src/hierarchy.ts

@@ -19,45 +19,72 @@ export interface HierarchyLink<T = NodeWithIds> {
   target: HierarchyNode<T>
 }
 
-function computeHeight<T>(node: HierarchyNode<T>): number {
-  let h = 0
-  if (node.children) {
-    for (const child of node.children) {
-      const ch = computeHeight(child) + 1
-      if (ch > h) {
-        h = ch
+// All traversals below are iterative (explicit stack / reversed-preorder) rather
+// than recursive: phylogenetic trees can be deeply unbalanced (a caterpillar tree
+// has depth ~= leaf count), which overflows the JS call stack on recursion.
+
+// Pre-order: every parent precedes all of its descendants. Iterating the result
+// in reverse therefore yields a valid post-order (children before parents), which
+// the accumulation helpers rely on.
+export function descendants<T>(node: HierarchyNode<T>): HierarchyNode<T>[] {
+  const result: HierarchyNode<T>[] = []
+  const stack = [node]
+  while (stack.length > 0) {
+    const n = stack.pop()!
+    result.push(n)
+    if (n.children) {
+      for (let i = n.children.length - 1; i >= 0; i--) {
+        stack.push(n.children[i]!)
+      }
+    }
+  }
+  return result
+}
+
+function computeHeight<T>(node: HierarchyNode<T>) {
+  const nodes = descendants(node)
+  for (let i = nodes.length - 1; i >= 0; i--) {
+    const n = nodes[i]!
+    let h = 0
+    if (n.children) {
+      for (const child of n.children) {
+        if (child.height + 1 > h) {
+          h = child.height + 1
+        }
       }
     }
+    n.height = h
   }
-  node.height = h
-  return h
 }
 
-function wrap<T>(
+export function hierarchy<T>(
   data: T,
   childrenAccessor: (d: T) => T[] | undefined,
-  parent: HierarchyNode<T> | null,
-  depth: number,
 ): HierarchyNode<T> {
-  const kids = childrenAccessor(data)
-  const node: HierarchyNode<T> = {
+  const root: HierarchyNode<T> = {
     data,
     children: null,
-    parent,
-    depth,
+    parent: null,
+    depth: 0,
     height: 0,
   }
-  if (kids?.length) {
-    node.children = kids.map(d => wrap(d, childrenAccessor, node, depth + 1))
+  const stack = [root]
+  while (stack.length > 0) {
+    const node = stack.pop()!
+    const kids = childrenAccessor(node.data)
+    if (kids?.length) {
+      node.children = kids.map(d => ({
+        data: d,
+        children: null,
+        parent: node,
+        depth: node.depth + 1,
+        height: 0,
+      }))
+      for (const child of node.children) {
+        stack.push(child)
+      }
+    }
   }
-  return node
-}
-
-export function hierarchy<T>(
-  data: T,
-  childrenAccessor: (d: T) => T[] | undefined,
-): HierarchyNode<T> {
-  const root = wrap(data, childrenAccessor, null, 0)
   computeHeight(root)
   return root
 }
@@ -66,17 +93,17 @@ export function sum<T>(
   node: HierarchyNode<T>,
   valueFn: (d: T) => number,
 ): HierarchyNode<T> {
-  function visit(n: HierarchyNode<T>): number {
+  const nodes = descendants(node)
+  for (let i = nodes.length - 1; i >= 0; i--) {
+    const n = nodes[i]!
     let s = valueFn(n.data)
     if (n.children) {
       for (const child of n.children) {
-        s += visit(child)
+        s += child.value!
       }
     }
     n.value = s
-    return s
   }
-  visit(node)
   return node
 }
 
@@ -84,15 +111,16 @@ export function sort<T>(
   node: HierarchyNode<T>,
   compareFn: (a: HierarchyNode<T>, b: HierarchyNode<T>) => number,
 ): HierarchyNode<T> {
-  function visit(n: HierarchyNode<T>) {
+  const stack = [node]
+  while (stack.length > 0) {
+    const n = stack.pop()!
     if (n.children) {
       n.children.sort(compareFn)
       for (const child of n.children) {
-        visit(child)
+        stack.push(child)
       }
     }
   }
-  visit(node)
   return node
 }
 
@@ -100,60 +128,42 @@ export function find<T>(
   node: HierarchyNode<T>,
   predicate: (n: HierarchyNode<T>) => boolean,
 ): HierarchyNode<T> | undefined {
-  if (predicate(node)) {
-    return node
-  }
-  if (node.children) {
-    for (const child of node.children) {
-      const result = find(child, predicate)
-      if (result) {
-        return result
+  const stack = [node]
+  let found: HierarchyNode<T> | undefined
+  while (stack.length > 0 && found === undefined) {
+    const n = stack.pop()!
+    if (predicate(n)) {
+      found = n
+    } else if (n.children) {
+      for (let i = n.children.length - 1; i >= 0; i--) {
+        stack.push(n.children[i]!)
       }
     }
   }
-  return undefined
+  return found
 }
 
 export function leaves<T>(node: HierarchyNode<T>): HierarchyNode<T>[] {
   const result: HierarchyNode<T>[] = []
-  function visit(n: HierarchyNode<T>) {
+  const stack = [node]
+  while (stack.length > 0) {
+    const n = stack.pop()!
     if (n.children) {
-      for (const child of n.children) {
-        visit(child)
+      for (let i = n.children.length - 1; i >= 0; i--) {
+        stack.push(n.children[i]!)
       }
     } else {
       result.push(n)
     }
   }
-  visit(node)
-  return result
-}
-
-export function descendants<T>(node: HierarchyNode<T>): HierarchyNode<T>[] {
-  const result: HierarchyNode<T>[] = []
-  function visit(n: HierarchyNode<T>) {
-    result.push(n)
-    if (n.children) {
-      for (const child of n.children) {
-        visit(child)
-      }
-    }
-  }
-  visit(node)
   return result
 }
 
 export function links<T>(node: HierarchyNode<T>): HierarchyLink<T>[] {
   const result: HierarchyLink<T>[] = []
-  function visit(n: HierarchyNode<T>) {
-    if (n.children) {
-      for (const child of n.children) {
-        result.push({ source: n, target: child })
-        visit(child)
-      }
-    }
-  }
-  visit(node)
+  forEachLink(node, (source, target) => {
+    result.push({ source, target })
+  })
   return result
 }
 
@@ -161,26 +171,25 @@ export function forEachLink<T>(
   node: HierarchyNode<T>,
   cb: (source: HierarchyNode<T>, target: HierarchyNode<T>) => void,
 ) {
-  function visit(n: HierarchyNode<T>) {
+  const stack = [node]
+  while (stack.length > 0) {
+    const n = stack.pop()!
     if (n.children) {
-      for (const child of n.children) {
+      for (let i = n.children.length - 1; i >= 0; i--) {
+        const child = n.children[i]!
         cb(n, child)
-        visit(child)
+        stack.push(child)
       }
     }
   }
-  visit(node)
 }
 
 export function forEachDescendant<T>(
   node: HierarchyNode<T>,
   cb: (n: HierarchyNode<T>) => void,
 ) {
-  cb(node)
-  if (node.children) {
-    for (const child of node.children) {
-      forEachDescendant(child, cb)
-    }
+  for (const n of descendants(node)) {
+    cb(n)
   }
 }
 
@@ -197,31 +206,31 @@ export function clusterLayout<T>(
     leafNodes[i]!.x = (i + 0.5) * step
   }
 
-  function assignX(node: HierarchyNode<T>) {
-    if (!node.children) {
-      return
-    }
-    for (const child of node.children) {
-      assignX(child)
-    }
-    let sum = 0
-    for (const child of node.children) {
-      sum += child.x!
+  // x of an internal node is the mean of its children's x, so process in
+  // post-order (children before parents)
+  const nodes = descendants(root)
+  for (let i = nodes.length - 1; i >= 0; i--) {
+    const node = nodes[i]!
+    if (node.children) {
+      let sum = 0
+      for (const child of node.children) {
+        sum += child.x!
+      }
+      node.x = sum / node.children.length
     }
-    node.x = sum / node.children.length
   }
-  assignX(root)
 
   const rootHeight = root.height
-  function assignY(node: HierarchyNode<T>, depth: number) {
+  const stack = [{ node: root, depth: 0 }]
+  while (stack.length > 0) {
+    const { node, depth } = stack.pop()!
     node.y = rootHeight === 0 ? sizeY : (depth / rootHeight) * sizeY
     if (node.children) {
       for (const child of node.children) {
-        assignY(child, depth + 1)
+        stack.push({ node: child, depth: depth + 1 })
       }
     }
   }
-  assignY(root, 0)
 }
 
 export function collapse<T>(node: HierarchyNode<T>) {
@@ -236,40 +245,57 @@ export function collapse<T>(node: HierarchyNode<T>) {
 // 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 {
-  if (node.depthToLeaf === undefined) {
-    let maxDepth = 0
-    if (node.children) {
-      for (const child of node.children) {
-        maxDepth = Math.max(maxDepth, 1 + calcDepthToLeaf(child))
+  const nodes = descendants(node)
+  for (let i = nodes.length - 1; i >= 0; i--) {
+    const n = nodes[i]!
+    if (n.depthToLeaf === undefined) {
+      let maxDepth = 0
+      if (n.children) {
+        for (const child of n.children) {
+          maxDepth = Math.max(maxDepth, 1 + child.depthToLeaf!)
+        }
       }
+      n.depthToLeaf = maxDepth
     }
-    node.depthToLeaf = maxDepth
   }
-  return node.depthToLeaf
+  return node.depthToLeaf!
 }
 
 export function findMaxBranchLen(node: HierarchyNode): number {
-  let maxLen = node.len || 0
-  if (node.children) {
-    for (const child of node.children) {
-      maxLen = Math.max(maxLen, findMaxBranchLen(child))
-    }
+  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
 export function maxLength(d: HierarchyNode): number {
-  return (
-    (d.data.length || 0) +
-    (d.children ? d.children.reduce((m, c) => Math.max(m, maxLength(c)), 0) : 0)
-  )
+  const nodes = descendants(d)
+  const pathLen = new Map<HierarchyNode, number>()
+  for (let i = nodes.length - 1; i >= 0; i--) {
+    const n = nodes[i]!
+    let childMax = 0
+    if (n.children) {
+      for (const child of n.children) {
+        childMax = Math.max(childMax, pathLen.get(child)!)
+      }
+    }
+    pathLen.set(n, (n.data.length || 0) + childMax)
+  }
+  return pathLen.get(d)!
 }
 
 export function setBrLength(d: HierarchyNode, y0: number, k: number) {
-  d.len = (y0 += Math.max(d.data.length || 0, 0)) * k
-  if (d.children) {
-    for (const child of d.children) {
-      setBrLength(child, y0, k)
+  const stack = [{ node: d, y0 }]
+  while (stack.length > 0) {
+    const { node, y0: acc } = stack.pop()!
+    const next = acc + Math.max(node.data.length || 0, 0)
+    node.len = next * k
+    if (node.children) {
+      for (const child of node.children) {
+        stack.push({ node: child, y0: next })
+      }
     }
   }
 }

package/src/index.ts

@@ -5,6 +5,7 @@
 // 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.
+export { renderToSvg } from './renderToSvg.tsx'
 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'

package/src/launchInterProScan.ts

@@ -73,21 +73,36 @@ async function wait({
   signal?: AbortSignal
 }) {
   const url = `${base}/iprscan5/status/${jobId}`
+  // EBI jobs run for minutes; cap polling so an unexpected/stuck status can't
+  // spin forever (the abort signal is the normal early exit). ~10s per check.
+  const maxChecks = 360
   try {
-    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-    while (true) {
+    let finished = false
+    for (let check = 0; check < maxChecks && !finished; check++) {
       for (let i = 0; i < 10; i++) {
         await timeout(1000, signal)
         onProgress({ msg: `Checking status ${10 - i}`, url })
       }
-      const result = await textfetch(url, { signal })
-      if (result.includes('FINISHED')) {
-        break
-      }
-      if (result.includes('FAILURE')) {
-        throw new Error(`Failed to run: jobId ${jobId}`)
+      // status endpoint returns a bare status token; match exactly rather than
+      // substring so an error page mentioning "FINISHED" can't be a false hit
+      const status = (await textfetch(url, { signal })).trim()
+      if (status === 'FINISHED') {
+        finished = true
+      } else if (
+        status === 'FAILURE' ||
+        status === 'ERROR' ||
+        status === 'NOT_FOUND'
+      ) {
+        throw new Error(
+          `InterProScan job ${jobId} ended with status: ${status}`,
+        )
       }
     }
+    if (!finished) {
+      throw new Error(
+        `InterProScan job ${jobId} did not finish after ${maxChecks} status checks`,
+      )
+    }
   } finally {
     onProgress()
   }
@@ -152,10 +167,17 @@ async function loadInterProScanResultsWithStatus({
       url: `https://www.ebi.ac.uk/Tools/services/rest/iprscan5/result/${jobId}/json`,
     })
     const ret = await loadInterProScanResults(jobId, signal)
-    model.setInterProAnnotations(
-      Object.fromEntries(ret.results.map(r => [r.xref[0]!.id, r])),
+    // 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.setShowDomains(true)
     getSession(model).notify(`Loaded interproscan ${jobId} results`, 'success')
   } catch (e) {
     if (isAbortError(e)) {

package/src/measureTextCanvas.ts

@@ -1,3 +1,5 @@
+import { setFontSize } from './setFontSize.ts'
+
 let canvasHandle: HTMLCanvasElement | undefined
 
 export function measureTextCanvas(text: string, fontSize: number) {
@@ -9,6 +11,6 @@ export function measureTextCanvas(text: string, fontSize: number) {
   if (!ctx) {
     throw new Error('no canvas context')
   }
-  ctx.font = ctx.font.replace(/\d+px/, `${fontSize}px`)
+  setFontSize(ctx, fontSize)
   return ctx.measureText(text).width
 }