react-msaview 5.6.1 → 5.6.2

package/src/components/tree/useTreeHover.ts

@@ -0,0 +1,69 @@
+import { useRef, useState } from 'react'
+import type React from 'react'
+
+import { ClickMapIndex } from './clickMap.ts'
+
+import type { ClickEntry } from './clickMap.ts'
+import type { MsaViewModel } from '../../model.ts'
+
+export interface TreeHoverTarget extends ClickEntry {
+  clientX: number
+  clientY: number
+}
+
+/**
+ * Owns hit-testing for one tree block: the spatial index the render pass fills
+ * in, the entry currently under the pointer, and the model hover state that the
+ * MSA panel mirrors. The index is a render artifact rather than display state, so
+ * it lives in a ref; everything the component draws comes back as plain state.
+ */
+export function useTreeHover({
+  model,
+  offsetY,
+}: {
+  model: MsaViewModel
+  offsetY: number
+}) {
+  const clickMapRef = useRef<ClickMapIndex>(null)
+  clickMapRef.current ??= new ClickMapIndex()
+  const clickMap = clickMapRef.current
+  const [hovered, setHovered] = useState<TreeHoverTarget>()
+
+  // leaf labels win over the branch/bubble targets they overlap, so a click on a
+  // name opens the node menu rather than the branch menu
+  function hitTest(event: React.MouseEvent) {
+    const x = event.nativeEvent.offsetX
+    const y = event.nativeEvent.offsetY + offsetY
+    const entries = clickMap.search({
+      minX: x,
+      maxX: x + 1,
+      minY: y,
+      maxY: y + 1,
+    })
+    return entries.find(entry => !entry.branch) ?? entries[0]
+  }
+
+  function onMouseMove(event: React.MouseEvent) {
+    const entry = hitTest(event)
+    setHovered(
+      entry
+        ? { ...entry, clientX: event.clientX, clientY: event.clientY }
+        : undefined,
+    )
+    // hovering an internal node highlights every tip below it; hovering a leaf
+    // label additionally drives the single-row highlight
+    model.setHoveredTreeNode(entry?.id)
+    model.setMousePos(
+      undefined,
+      entry && !entry.branch ? model.rowNamesSet.get(entry.name) : undefined,
+    )
+  }
+
+  function onMouseLeave() {
+    setHovered(undefined)
+    model.setHoveredTreeNode(undefined)
+    model.setMousePos(undefined, undefined)
+  }
+
+  return { clickMap, hovered, hitTest, onMouseMove, onMouseLeave }
+}

package/src/domainBands.test.ts

@@ -0,0 +1,98 @@
+// @vitest-environment jsdom
+// The domain overlay resolves each annotation to the visible column span it is
+// drawn across once, on the model, instead of converting sequence positions
+// inside every canvas block. These tests pin that span (including across hidden
+// gappy columns) and the hit-test built on top of it.
+import { expect, test } from 'vitest'
+
+import MSAModelF from './model.ts'
+
+// row `b` has a 4-residue insertion relative to `a`, which becomes a run of
+// mostly-gap columns that gap hiding can remove
+const msa = `>a
+MKLV----WYAC
+>b
+MKLVQQQQWYAC`
+
+const gff = `##gff-version 3
+a	Pfam	protein_match	1	4	.	.	.	Name=PF00001;signature_desc=First
+a	Pfam	protein_match	5	8	.	.	.	Name=PF00002;signature_desc=Second`
+
+function makeModel() {
+  const model = MSAModelF().create({
+    id: 'domain-bands-test',
+    type: 'MsaView',
+    msaFormat: 'fasta',
+    height: 400,
+    data: { msa },
+  })
+  model.setWidth(800)
+  model.applyGFFText(gff)
+  return model
+}
+
+test('bands span the columns their residues occupy', () => {
+  const model = makeModel()
+  const bands = model.domainBands.get('a')!
+  expect(
+    bands.map(b => [b.annotation.accession, b.startCol, b.endCol]),
+  ).toEqual([
+    ['PF00001', 0, 4],
+    ['PF00002', 8, 12],
+  ])
+})
+
+test('bands follow the columns when gappy columns are hidden', () => {
+  const model = makeModel()
+  model.setHideGaps(true)
+  model.setAllowedGappyness(50)
+  // the 4 insertion columns are gaps in half the rows, so they are hidden and
+  // everything to their right shifts left by 4
+  expect(model.blanks).toEqual([4, 5, 6, 7])
+  const bands = model.domainBands.get('a')!
+  expect(bands.map(b => [b.startCol, b.endCol])).toEqual([
+    [0, 4],
+    [4, 8],
+  ])
+})
+
+test('mouseOverDomains hit-tests against the drawn span', () => {
+  const model = makeModel()
+  const rowIndex = model.rowNames.indexOf('a')
+
+  model.setMousePos(0, rowIndex)
+  expect(model.mouseOverDomains.map(d => d.accession)).toEqual(['PF00001'])
+
+  // the columns between the two domains are the insertion gap: no domain there
+  model.setMousePos(5, rowIndex)
+  expect(model.mouseOverDomains).toEqual([])
+
+  model.setMousePos(8, rowIndex)
+  expect(model.mouseOverDomains.map(d => d.accession)).toEqual(['PF00002'])
+
+  // end column is exclusive
+  model.setMousePos(12, rowIndex)
+  expect(model.mouseOverDomains).toEqual([])
+
+  // the other row has no annotations of its own
+  model.setMousePos(0, model.rowNames.indexOf('b'))
+  expect(model.mouseOverDomains).toEqual([])
+})
+
+test('filtering a domain off removes its band', () => {
+  const model = makeModel()
+  model.setFilter('PF00001', false)
+  expect(model.domainBands.get('a')!.map(b => b.annotation.accession)).toEqual([
+    'PF00002',
+  ])
+})
+
+test('highlighted columns collapse into contiguous runs', () => {
+  const model = makeModel()
+  model.setHighlightedColumns([5, 1, 2, 3, 9])
+  expect(model.highlightedColumnRuns).toEqual([
+    { start: 1, end: 3 },
+    { start: 5, end: 5 },
+    { start: 9, end: 9 },
+  ])
+})

package/src/hierarchy.ts

@@ -288,17 +288,23 @@ export function collapsedSubtreeLengthExtent<T extends { length?: number }>(
 // 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<T>(node: HierarchyNode<T>): number {
-  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!)
+  // the memo check has to guard the traversal, not just the arithmetic: the tree
+  // renderer asks for the depth of every node on every pass, and re-walking each
+  // subtree makes that quadratic (a 5000-tip caterpillar tree spent >1s per draw
+  // here). Once a node is memoized so are all of its descendants.
+  if (node.depthToLeaf === undefined) {
+    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
       }
-      n.depthToLeaf = maxDepth
     }
   }
   return node.depthToLeaf!

package/src/model/msaModel.ts

@@ -5,6 +5,7 @@ import {
   defaultColorSchemeName,
   defaultShowColumnStats,
 } from '../constants.ts'
+import { stripDefault } from '../stripDefault.ts'
 
 import type { MSAFormat } from 'msa-parsers'
 
@@ -20,23 +21,20 @@ export function MSAModelF() {
        * #property
        * draw MSA tiles with a background color
        */
-      bgColor: types.stripDefault(types.boolean, defaultBgColor),
+      bgColor: stripDefault(types.boolean, defaultBgColor),
 
       /**
        * #property
        * default color scheme name
        */
-      colorSchemeName: types.stripDefault(types.string, defaultColorSchemeName),
+      colorSchemeName: stripDefault(types.string, defaultColorSchemeName),
 
       /**
        * #property
        * show a per-column statistics tooltip (consensus, conservation, gaps,
        * residue distribution) while hovering the alignment
        */
-      showColumnStats: types.stripDefault(
-        types.boolean,
-        defaultShowColumnStats,
-      ),
+      showColumnStats: stripDefault(types.boolean, defaultShowColumnStats),
 
       /**
        * #property

package/src/model/treeModel.ts

@@ -9,6 +9,7 @@ import {
   defaultTreeAreaWidth,
   defaultTreeWidth,
 } from '../constants.ts'
+import { stripDefault } from '../stripDefault.ts'
 
 /**
  * #stateModel Tree
@@ -19,28 +20,25 @@ export function TreeModelF() {
       /**
        * #property
        */
-      drawLabels: types.stripDefault(types.boolean, defaultDrawLabels),
+      drawLabels: stripDefault(types.boolean, defaultDrawLabels),
       /**
        * #property
        * right-align the labels
        */
-      labelsAlignRight: types.stripDefault(
-        types.boolean,
-        defaultLabelsAlignRight,
-      ),
+      labelsAlignRight: stripDefault(types.boolean, defaultLabelsAlignRight),
 
       /**
        * #property
        * width of the area the tree is drawn in, px
        */
-      treeAreaWidth: types.stripDefault(types.number, defaultTreeAreaWidth),
+      treeAreaWidth: stripDefault(types.number, defaultTreeAreaWidth),
 
       /**
        * #property
        * width of the tree within the treeArea, px. automatically synced to
        * fit within treeAreaWidth
        */
-      treeWidth: types.stripDefault(types.number, defaultTreeWidth),
+      treeWidth: stripDefault(types.number, defaultTreeWidth),
 
       /**
        * #property
@@ -48,22 +46,19 @@ export function TreeModelF() {
        * lengths. if false, the layout is a "cladogram" that does not take into
        * account evolutionary distances
        */
-      showBranchLen: types.stripDefault(types.boolean, defaultShowBranchLen),
+      showBranchLen: stripDefault(types.boolean, defaultShowBranchLen),
 
       /**
        * #property
        * draw tree, boolean
        */
-      drawTree: types.stripDefault(types.boolean, defaultDrawTree),
+      drawTree: stripDefault(types.boolean, defaultDrawTree),
 
       /**
        * #property
        * draw clickable node bubbles on the tree
        */
-      drawNodeBubbles: types.stripDefault(
-        types.boolean,
-        defaultDrawNodeBubbles,
-      ),
+      drawNodeBubbles: stripDefault(types.boolean, defaultDrawNodeBubbles),
 
       /**
        * #property
@@ -71,7 +66,7 @@ export function TreeModelF() {
        * instead of using a fixed width. useful when there is no tree, so the
        * label gutter isn't padded out to the default 400px
        */
-      autoTreeAreaWidth: types.stripDefault(types.boolean, false),
+      autoTreeAreaWidth: stripDefault(types.boolean, false),
     })
     .actions(self => ({
       /**