react-msaview 5.0.6 → 5.0.13

package/src/flatToTree.ts

@@ -1,10 +1,8 @@
-// Define the input item interface
 interface FlatItem {
   id: number
   parent?: number
 }
 
-// Define the tree node interface
 interface TreeNode {
   id: string
   name: string
@@ -12,46 +10,30 @@ interface TreeNode {
   children: TreeNode[]
 }
 
-/**
- * Parses a flat list of items into a tree structure
- * @param items - Array of flat items with id and optional parent
- * @returns Array of root tree nodes
- */
 export function flatToTree(items: FlatItem[]): TreeNode {
-  // Create a map to store all nodes by their id for quick lookup
-  const nodeMap = new Map<number, 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[],
+      },
+    ]),
+  )
 
-  // First pass: Create all tree nodes
-  items.forEach(item => {
-    nodeMap.set(item.id, {
-      ...item,
-      id: `${item.id}`,
-      name: `${item.id}`,
-      parent: item.parent !== undefined ? `${item.parent}` : undefined,
-      children: [],
-    })
-  })
-
-  // Second pass: Build parent-child relationships
-  const roots: TreeNode[] = []
-
-  items.forEach(item => {
+  let root: TreeNode | undefined
+  for (const item of items) {
     const node = nodeMap.get(item.id)!
-
-    if (item.parent !== undefined) {
-      // This item has a parent, add it to parent's children
-      const parentNode = nodeMap.get(item.parent)
-      if (parentNode) {
-        parentNode.children.push(node)
-      } else {
-        // Parent doesn't exist, treat as root
-        roots.push(node)
-      }
+    const parent =
+      item.parent !== undefined ? nodeMap.get(item.parent) : undefined
+    if (parent) {
+      parent.children.push(node)
     } else {
-      // This item has no parent, it's a root node
-      roots.push(node)
+      root ??= node
     }
-  })
+  }
 
-  return roots[0]!
+  return root!
 }

package/src/hierarchy.test.ts

@@ -0,0 +1,120 @@
+import { describe, expect, test } from 'vitest'
+
+import { collapse, find, hierarchy, leaves, sort, sum } from './hierarchy.ts'
+
+import type { NodeWithIds } from './types.ts'
+
+function makeTree(): NodeWithIds {
+  return {
+    id: 'root',
+    name: 'root',
+    children: [
+      {
+        id: 'A',
+        name: 'A',
+        children: [
+          { id: 'A1', name: 'A1', children: [] },
+          { id: 'A2', name: 'A2', children: [] },
+        ],
+      },
+      {
+        id: 'B',
+        name: 'B',
+        children: [
+          { id: 'B1', name: 'B1', children: [] },
+          { id: 'B2', name: 'B2', children: [] },
+        ],
+      },
+    ],
+  }
+}
+
+describe('hierarchy', () => {
+  test('builds hierarchy from tree data', () => {
+    const h = hierarchy(makeTree(), d => d.children)
+    expect(h.data.id).toBe('root')
+    expect(h.children?.length).toBe(2)
+    expect(h.height).toBe(2)
+  })
+
+  test('sets parent references', () => {
+    const h = hierarchy(makeTree(), d => d.children)
+    expect(h.parent).toBeNull()
+    expect(h.children![0]!.parent).toBe(h)
+    expect(h.children![0]!.children![0]!.parent).toBe(h.children![0])
+  })
+})
+
+describe('leaves', () => {
+  test('returns leaf nodes', () => {
+    const h = hierarchy(makeTree(), d => d.children)
+    const l = leaves(h)
+    expect(l.map(n => n.data.name)).toEqual(['A1', 'A2', 'B1', 'B2'])
+  })
+})
+
+describe('find', () => {
+  test('finds node by id', () => {
+    const h = hierarchy(makeTree(), d => d.children)
+    const node = find(h, n => n.data.id === 'B1')
+    expect(node?.data.name).toBe('B1')
+  })
+
+  test('returns undefined for missing id', () => {
+    const h = hierarchy(makeTree(), d => d.children)
+    expect(find(h, n => n.data.id === 'Z')).toBeUndefined()
+  })
+})
+
+describe('collapse', () => {
+  test('hides children of a branch node', () => {
+    const h = hierarchy(makeTree(), d => d.children)
+    const nodeA = find(h, n => n.data.id === 'A')!
+    collapse(nodeA)
+    expect(nodeA.children).toBeNull()
+    expect(nodeA._children?.length).toBe(2)
+    expect(leaves(h).map(n => n.data.name)).toEqual(['A', 'B1', 'B2'])
+  })
+
+  test('does nothing on a leaf node', () => {
+    const h = hierarchy(makeTree(), d => d.children)
+    const leaf = find(h, n => n.data.id === 'A1')!
+    collapse(leaf)
+    expect(leaves(h).map(n => n.data.name)).toEqual(['A1', 'A2', 'B1', 'B2'])
+  })
+})
+
+describe('leaf removal via parent.children filter', () => {
+  test('removing a leaf from its parent hides it from leaves()', () => {
+    const h = hierarchy(makeTree(), d => d.children)
+    const leaf = find(h, n => n.data.id === 'A1')!
+    leaf.parent!.children = leaf.parent!.children!.filter(
+      c => c.data.id !== 'A1',
+    )
+    expect(leaves(h).map(n => n.data.name)).toEqual(['A2', 'B1', 'B2'])
+  })
+
+  test('removing all leaves from a branch makes the branch a leaf', () => {
+    const h = hierarchy(makeTree(), d => d.children)
+    const nodeA = find(h, n => n.data.id === 'A')!
+    nodeA.children = []
+    expect(leaves(h).map(n => n.data.name)).toEqual(['B1', 'B2'])
+  })
+})
+
+describe('sort', () => {
+  test('sorts children', () => {
+    const h = hierarchy(makeTree(), d => d.children)
+    sort(h, (a, b) => b.data.name.localeCompare(a.data.name))
+    expect(h.children!.map(c => c.data.name)).toEqual(['B', 'A'])
+  })
+})
+
+describe('sum', () => {
+  test('computes leaf counts', () => {
+    const h = hierarchy(makeTree(), d => d.children)
+    sum(h, d => (d.children.length > 0 ? 0 : 1))
+    expect(h.value).toBe(4)
+    expect(find(h, n => n.data.id === 'A')?.value).toBe(2)
+  })
+})

package/src/hierarchy.ts

@@ -0,0 +1,220 @@
+import type { NodeWithIds } from './types.ts'
+
+export interface HierarchyNode<T = NodeWithIds> {
+  data: T
+  children: HierarchyNode<T>[] | null
+  parent: HierarchyNode<T> | null
+  depth: number
+  height: number
+  value?: number
+  x?: number
+  y?: number
+  len?: number
+  _children?: HierarchyNode<T>[] | null
+}
+
+export interface HierarchyLink<T = NodeWithIds> {
+  source: HierarchyNode<T>
+  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
+      }
+    }
+  }
+  node.height = h
+  return h
+}
+
+function wrap<T>(
+  data: T,
+  childrenAccessor: (d: T) => T[] | undefined,
+  parent: HierarchyNode<T> | null,
+  depth: number,
+): HierarchyNode<T> {
+  const kids = childrenAccessor(data)
+  const node: HierarchyNode<T> = {
+    data,
+    children: null,
+    parent,
+    depth,
+    height: 0,
+  }
+  if (kids?.length) {
+    node.children = kids.map(d => wrap(d, childrenAccessor, node, depth + 1))
+  }
+  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
+}
+
+export function sum<T>(
+  node: HierarchyNode<T>,
+  valueFn: (d: T) => number,
+): HierarchyNode<T> {
+  function visit(n: HierarchyNode<T>): number {
+    let s = valueFn(n.data)
+    if (n.children) {
+      for (const child of n.children) {
+        s += visit(child)
+      }
+    }
+    n.value = s
+    return s
+  }
+  visit(node)
+  return node
+}
+
+export function sort<T>(
+  node: HierarchyNode<T>,
+  compareFn: (a: HierarchyNode<T>, b: HierarchyNode<T>) => number,
+): HierarchyNode<T> {
+  function visit(n: HierarchyNode<T>) {
+    if (n.children) {
+      n.children.sort(compareFn)
+      for (const child of n.children) {
+        visit(child)
+      }
+    }
+  }
+  visit(node)
+  return node
+}
+
+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
+      }
+    }
+  }
+  return undefined
+}
+
+export function leaves<T>(node: HierarchyNode<T>): HierarchyNode<T>[] {
+  const result: HierarchyNode<T>[] = []
+  function visit(n: HierarchyNode<T>) {
+    if (n.children) {
+      for (const child of n.children) {
+        visit(child)
+      }
+    } 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)
+  return result
+}
+
+export function clusterLayout<T>(
+  root: HierarchyNode<T>,
+  sizeX: number,
+  sizeY: number,
+) {
+  const leafNodes = leaves(root)
+  const n = leafNodes.length
+  const step = sizeX / n
+
+  for (let i = 0; i < n; i++) {
+    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!
+    }
+    node.x = sum / node.children.length
+  }
+  assignX(root)
+
+  const rootHeight = root.height
+  function assignY(node: HierarchyNode<T>, depth: number) {
+    node.y = rootHeight === 0 ? sizeY : (depth / rootHeight) * sizeY
+    if (node.children) {
+      for (const child of node.children) {
+        assignY(child, depth + 1)
+      }
+    }
+  }
+  assignY(root, 0)
+}
+
+export function collapse<T>(node: HierarchyNode<T>) {
+  if (node.children) {
+    node._children = node.children
+    node.children = null
+  }
+}
+
+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)
+  )
+}
+
+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)
+    }
+  }
+}

package/src/index.ts

@@ -1,6 +1,8 @@
 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'
 export type { MSAParserType } from 'msa-parsers'
+export type { HierarchyNode } from './hierarchy.ts'
 export type { InterProScanResults } from './launchInterProScan.ts'
 export type {
   Accession,

package/src/launchInterProScan.ts

@@ -52,7 +52,7 @@ async function runInterProScan({
   await loadInterProScanResultsWithStatus({ jobId, model })
 }
 
-export function loadInterProScanResults(jobId: string) {
+function loadInterProScanResults(jobId: string) {
   return jsonfetch<InterProScanResponse>(
     `${base}/iprscan5/result/${jobId}/json`,
   )
@@ -111,14 +111,15 @@ export async function launchInterProScan({
         programs,
         model,
       })
+    } else {
+      throw new Error('unknown algorithm')
     }
-    throw new Error('unknown algorithm')
   } finally {
     onProgress()
   }
 }
 
-export async function loadInterProScanResultsWithStatus({
+async function loadInterProScanResultsWithStatus({
   jobId,
   model,
 }: {

package/src/model/DataModel.ts

@@ -22,6 +22,10 @@ export function DataModelF() {
        * #property
        */
       treeMetadata: types.maybe(types.string),
+      /**
+       * #property
+       */
+      gff: types.maybe(types.string),
     })
     .actions(self => ({
       /**
@@ -42,15 +46,22 @@ export function DataModelF() {
       setTreeMetadata(treeMetadata?: string) {
         self.treeMetadata = treeMetadata
       },
+      /**
+       * #action
+       */
+      setGFF(gff?: string) {
+        self.gff = gff
+      },
     }))
     .postProcessSnapshot(snap => {
-      const { tree, msa, treeMetadata } = snap
+      const { tree, msa, treeMetadata, gff } = snap
       const max = 50_000
       return {
         tree: tree && tree.length > max ? undefined : tree,
         msa: msa && msa.length > max ? undefined : msa,
         treeMetadata:
           treeMetadata && treeMetadata.length > max ? undefined : treeMetadata,
+        gff: gff && gff.length > max ? undefined : gff,
       }
     })
 }

package/src/model/msaModel.ts

@@ -5,8 +5,6 @@ import { defaultBgColor, defaultColorSchemeName } from '../constants.ts'
 /**
  * #stateModel MSAModel
  */
-function x() {} // eslint-disable-line @typescript-eslint/no-unused-vars
-
 export function MSAModelF() {
   return types
     .model({

package/src/model/treeModel.ts

@@ -8,14 +8,11 @@ import {
   defaultShowBranchLen,
   defaultTreeAreaWidth,
   defaultTreeWidth,
-  defaultTreeWidthMatchesArea,
 } from '../constants.ts'
 
 /**
  * #stateModel Tree
  */
-function x() {} // eslint-disable-line @typescript-eslint/no-unused-vars
-
 export function TreeModelF() {
   return types
     .model({
@@ -37,16 +34,11 @@ export function TreeModelF() {
 
       /**
        * #property
-       * width of the tree within the treeArea, px
+       * width of the tree within the treeArea, px. automatically synced to
+       * fit within treeAreaWidth
        */
       treeWidth: types.optional(types.number, defaultTreeWidth),
 
-      /**
-       * #getter
-       * synchronization that matches treeWidth to treeAreaWidth
-       */
-      treeWidthMatchesArea: defaultTreeWidthMatchesArea,
-
       /**
        * #property
        * use "branch length" e.g. evolutionary distance to draw tree branch
@@ -68,14 +60,6 @@ export function TreeModelF() {
       drawNodeBubbles: defaultDrawNodeBubbles,
     })
     .actions(self => ({
-      /**
-       * #action
-       * synchronize the treewidth and treeareawidth
-       */
-      setTreeWidthMatchesArea(arg: boolean) {
-        self.treeWidthMatchesArea = arg
-      },
-
       /**
        * #action
        * set tree area width (px)