react-msaview 7.0.0 → 8.0.0

package/src/components/tree/renderTreeCanvas.ts

@@ -1,4 +1,4 @@
-import { calcDepthToLeaf } from '../../hierarchy.ts'
+import { calcDepthToLeaf, nodeCoveringRows } from '../../hierarchy.ts'
 import { setFontSize } from '../../setFontSize.ts'
 import { getVisibleLeaves } from '../getVisibleLeaves.ts'
 import {
@@ -6,6 +6,7 @@ import {
   highlightLabelHeight,
   highlightRowFill,
 } from '../msa/renderHighlights.ts'
+import { bracketBarWidth, bracketGap } from './cladeBrackets.ts'
 
 import type { HierarchyNode } from '../../hierarchy.ts'
 import type { MsaViewModel } from '../../model.ts'
@@ -32,12 +33,12 @@ function inYBlock(y: number, offsetY: number, by: number, pad: number) {
 
 /**
  * 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.
+ * do not. A subtree's leaves are one contiguous run of rows, recorded by
+ * clusterLayout as xMin/xMax, so a block of a 200k-tip tree visits a few dozen
+ * nodes.
  *
- * 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.
+ * A link out of a visited node is drawn even when its child is pruned, so a
+ * branch crossing the block stays visible.
  */
 function forEachNodeInBlock(
   root: HierarchyNode,
@@ -101,9 +102,15 @@ function renderTree({
   maxDepthToLeaf: number
   blockSizeYOverride?: number
 }) {
-  const { hierarchy, showBranchLenEffective: showBranchLen, blockSize } = model
+  const {
+    hierarchy,
+    showBranchLenEffective: showBranchLen,
+    blockSize,
+    branchColors,
+  } = model
   const by = blockSizeYOverride ?? blockSize
-  ctx.strokeStyle = theme.palette.text.primary
+  const defaultStroke = theme.palette.text.primary
+  ctx.strokeStyle = defaultStroke
   forEachNodeInBlock(hierarchy, offsetY, by, blockPad(model), source => {
     const sy = source.x!
     const sx = getNodeX(source, showBranchLen, tipX, maxDepthToLeaf)
@@ -122,6 +129,10 @@ function renderTree({
       // optimization that allows us to skip drawing most tree links outside the
       // block
       if (offsetY + by >= y1 && y2 >= offsetY) {
+        // the edge belongs to the child, whose id the branch channel colors
+        if (branchColors) {
+          ctx.strokeStyle = branchColors.get(target.data.id) ?? defaultStroke
+        }
         ctx.beginPath()
         ctx.moveTo(sx, sy)
         ctx.lineTo(sx, ty)
@@ -130,6 +141,7 @@ function renderTree({
       }
     }
   })
+  ctx.strokeStyle = defaultStroke
 }
 
 function renderCollapsedTriangles({
@@ -160,6 +172,7 @@ function renderCollapsedTriangles({
     rowHeight,
     fontSize,
     marginLeft: ml,
+    branchColors,
   } = model
   // nothing collapsed is the common case, and the traversal below visits every
   // node in the tree on every block of every redraw
@@ -183,7 +196,7 @@ function renderCollapsedTriangles({
         ctx.lineTo(baseX, y - halfHeight)
         ctx.lineTo(baseX, y + halfHeight)
         ctx.closePath()
-        ctx.fillStyle = theme.palette.action.disabled
+        ctx.fillStyle = branchColors?.get(id) ?? theme.palette.action.disabled
         ctx.fill()
         ctx.strokeStyle = theme.palette.text.primary
         ctx.stroke()
@@ -218,6 +231,7 @@ function renderCollapsedTriangles({
 // always runs and `draw` only decides whether it also strokes the circles
 function renderNodeBubbles({
   ctx,
+  theme,
   clickMap,
   offsetY,
   model,
@@ -236,6 +250,7 @@ function renderNodeBubbles({
   blockSizeYOverride?: number
   collapsedSet: Set<string>
   draw: boolean
+  theme: Theme
 }) {
   const {
     hierarchy,
@@ -255,8 +270,10 @@ function renderNodeBubbles({
     if (node.height >= 1 && inYBlock(y, offsetY, by, blockPad(model))) {
       const isCollapsed = collapsedSet.has(id)
       if (draw) {
-        ctx.strokeStyle = 'black'
-        ctx.fillStyle = isCollapsed ? 'black' : 'white'
+        ctx.strokeStyle = theme.palette.text.primary
+        ctx.fillStyle = isCollapsed
+          ? theme.palette.text.primary
+          : theme.palette.background.default
         ctx.beginPath()
         ctx.arc(x, y, radius, 0, 2 * Math.PI)
         ctx.fill()
@@ -280,6 +297,53 @@ function renderNodeBubbles({
   })
 }
 
+// The label a newick file puts on an internal node, which is where a bootstrap
+// or posterior support value lands: ((A,B)95,(C,D)80);. withId falls back to the
+// path-derived id for an unnamed node, so a node whose name is its id has no
+// label of its own and an ungated pass prints node-0-1-1 across the tree.
+function renderNodeLabels({
+  ctx,
+  theme,
+  offsetY,
+  model,
+  tipX,
+  maxDepthToLeaf,
+  blockSizeYOverride,
+}: {
+  ctx: RenderCtx
+  theme: Theme
+  offsetY: number
+  model: MsaViewModel
+  tipX: number
+  maxDepthToLeaf: number
+  blockSizeYOverride?: number
+}) {
+  const {
+    hierarchy,
+    showBranchLenEffective: showBranchLen,
+    blockSize,
+    fontSize,
+  } = model
+  const by = blockSizeYOverride ?? blockSize
+  const pad = blockPad(model)
+  setFontSize(ctx, Math.max(6, fontSize - 3))
+  ctx.fillStyle = theme.palette.text.primary
+  ctx.textAlign = 'right'
+  forEachNodeInBlock(hierarchy, offsetY, by, pad, node => {
+    const { id, name } = node.data
+    if (node.height < 1 || name === id) {
+      return
+    }
+    const x = getNodeX(node, showBranchLen, tipX, maxDepthToLeaf)
+    const y = node.x!
+    if (x !== undefined && inYBlock(y, offsetY, by, pad)) {
+      ctx.fillText(name, x - radius - 1, y - radius - 1)
+    }
+  })
+  ctx.textAlign = 'start'
+  setFontSize(ctx, fontSize)
+}
+
 function renderTreeLabels({
   theme,
   model,
@@ -304,7 +368,7 @@ function renderTreeLabels({
   const {
     fontSize,
     showBranchLenEffective: showBranchLen,
-    treeMetadata,
+    tipLabelColors,
     blockSize,
     labelsAlignRight,
     drawTree,
@@ -333,7 +397,7 @@ function renderTreeLabels({
     } = node
     const y = node.x!
 
-    const displayName = treeMetadata[name]?.genome || name
+    const displayName = model.rowDataOf(name)?.genome || name
     // 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
@@ -351,7 +415,7 @@ function renderTreeLabels({
           ? ctx.measureText(displayName).width
           : measured * labelWidthScale
 
-      ctx.fillStyle = theme.palette.text.primary
+      ctx.fillStyle = tipLabelColors?.get(name) ?? theme.palette.text.primary
       if (labelsAlignRight) {
         const smallPadding = 2
         const offset = treeAreaWidthMinusMargin - smallPadding
@@ -393,8 +457,123 @@ function renderTreeLabels({
   ctx.setLineDash([])
 }
 
-// the row sets of `highlights`, tinted across the tree area under the labels
-// with the label in the gutter at the first row of each set
+// the first row of a set, as a loop: spreading into Math.min passes one
+// argument per row, and the ~125k argument limit throws RangeError on a set
+// covering the 230k-tip COVID tree
+function firstRow(rowIndices: number[]) {
+  let min = Infinity
+  for (const index of rowIndices) {
+    if (index < min) {
+      min = index
+    }
+  }
+  return min
+}
+
+// the highlight mark of the `clades` layer: a translucent rectangle from the
+// clade's common ancestor to the right edge of the tree area, under the
+// branches. A clade spanning hundreds of rows crosses several blocks, so each
+// block draws the whole rectangle and the canvas takes the part that is its.
+function renderCladeHighlights({
+  ctx,
+  model,
+  offsetY,
+  tipX,
+  maxDepthToLeaf,
+  blockSizeYOverride,
+}: {
+  ctx: RenderCtx
+  model: MsaViewModel
+  offsetY: number
+  tipX: number
+  maxDepthToLeaf: number
+  blockSizeYOverride?: number
+}) {
+  const {
+    resolvedClades,
+    hierarchy,
+    showBranchLenEffective: showBranchLen,
+    rowHeight,
+    treeAreaWidth,
+    marginLeft,
+    blockSize,
+  } = model
+  const by = blockSizeYOverride ?? blockSize
+  const right = treeAreaWidth - marginLeft
+  for (const { rows, color, mark } of resolvedClades) {
+    if (mark !== 'highlight') {
+      continue
+    }
+    const top = rows[0] * rowHeight
+    const bottom = (rows[1] + 1) * rowHeight
+    if (bottom < offsetY || top > offsetY + by) {
+      continue
+    }
+    const node = nodeCoveringRows(
+      hierarchy,
+      top + rowHeight / 2,
+      bottom - rowHeight / 2,
+    )
+    const x = getNodeX(node, showBranchLen, tipX, maxDepthToLeaf) ?? 0
+    ctx.fillStyle = color
+    ctx.fillRect(x, top, right - x, bottom - top)
+  }
+}
+
+// the bar of the bracket mark, in the gutter `cladeGutterWidth` reserves at the
+// right of the tree area. The label beside it is DOM text on screen and a
+// <text> in the export, since the canvas layer has no rotation.
+function renderCladeBrackets({
+  ctx,
+  model,
+  theme,
+  offsetY,
+  blockSizeYOverride,
+}: {
+  ctx: RenderCtx
+  model: MsaViewModel
+  theme: Theme
+  offsetY: number
+  blockSizeYOverride?: number
+}) {
+  const {
+    resolvedClades,
+    cladeGutterWidth,
+    rowHeight,
+    treeAreaWidth,
+    marginLeft,
+    blockSize,
+  } = model
+  if (cladeGutterWidth === 0) {
+    return
+  }
+  const by = blockSizeYOverride ?? blockSize
+  const x =
+    treeAreaWidth -
+    marginLeft -
+    cladeGutterWidth +
+    bracketGap +
+    bracketBarWidth / 2
+  ctx.lineWidth = bracketBarWidth
+  for (const { rows, mark, markColor } of resolvedClades) {
+    const top = rows[0] * rowHeight + 1
+    const bottom = (rows[1] + 1) * rowHeight - 1
+    if (mark !== 'bracket' || bottom < offsetY || top > offsetY + by) {
+      continue
+    }
+    ctx.strokeStyle = markColor ?? theme.palette.text.primary
+    ctx.beginPath()
+    ctx.moveTo(x, top)
+    ctx.lineTo(x, bottom)
+    ctx.stroke()
+  }
+  ctx.lineWidth = 1
+  ctx.strokeStyle = theme.palette.text.primary
+}
+
+// the `rowTint` encoding and the row sets of `highlights`, washed across the
+// tree area under the labels, with each set's label in the gutter at its first
+// row
 function renderRowHighlights({
   ctx,
   model,
@@ -410,6 +589,7 @@ function renderRowHighlights({
 }) {
   const {
     resolvedHighlights,
+    rowTints,
     rowHeight,
     treeAreaWidth,
     marginLeft,
@@ -418,15 +598,31 @@ function renderRowHighlights({
   const by = blockSizeYOverride ?? blockSize
   const pad = blockPad(model)
   const placed: LabelBox[] = []
+  const fillRow = (index: number) => {
+    ctx.fillRect(-marginLeft, index * rowHeight, treeAreaWidth, rowHeight)
+  }
+  if (rowTints) {
+    const top = Math.max(0, Math.floor((offsetY - pad) / rowHeight))
+    const bottom = Math.min(
+      rowTints.length - 1,
+      Math.ceil((offsetY + by + pad) / rowHeight),
+    )
+    for (let index = top; index <= bottom; index++) {
+      const color = rowTints[index]
+      if (color) {
+        ctx.fillStyle = color
+        fillRow(index)
+      }
+    }
+  }
   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, pad)) {
-        ctx.fillRect(-marginLeft, y, treeAreaWidth, rowHeight)
+      if (inYBlock(index * rowHeight + rowHeight / 2, offsetY, by, pad)) {
+        fillRow(index)
       }
     }
-    const first = Math.min(...rowIndices)
+    const first = firstRow(rowIndices)
     if (
       label &&
       rowIndices.length &&
@@ -470,6 +666,7 @@ export function renderTreeCanvas({
     noTree,
     drawTree,
     drawNodeBubbles,
+    drawNodeLabels,
     highResScaleFactor,
     fontSize,
     showTreeText,
@@ -500,6 +697,14 @@ export function renderTreeCanvas({
   // every block of every redraw, and `collapsed` is a list
   const collapsedSet = new Set(model.collapsed)
 
+  renderCladeHighlights({
+    ctx,
+    model,
+    offsetY,
+    tipX,
+    maxDepthToLeaf,
+    blockSizeYOverride,
+  })
   renderRowHighlights({ ctx, model, theme, offsetY, blockSizeYOverride })
   setFontSize(ctx, fontSize)
 
@@ -528,6 +733,7 @@ export function renderTreeCanvas({
 
     renderNodeBubbles({
       ctx,
+      theme,
       offsetY,
       clickMap,
       model,
@@ -537,6 +743,18 @@ export function renderTreeCanvas({
       collapsedSet,
       draw: drawNodeBubbles,
     })
+
+    if (drawNodeLabels) {
+      renderNodeLabels({
+        ctx,
+        theme,
+        offsetY,
+        model,
+        tipX,
+        maxDepthToLeaf,
+        blockSizeYOverride,
+      })
+    }
   }
 
   if (showTreeText) {
@@ -553,6 +771,8 @@ export function renderTreeCanvas({
     })
   }
 
+  renderCladeBrackets({ ctx, model, theme, offsetY, blockSizeYOverride })
+
   // Finish the index so it's ready for queries
   clickMap?.finish()
 }

package/src/components/tree/renderTreeOverview.ts

@@ -0,0 +1,212 @@
+import { descendants } from '../../hierarchy.ts'
+import { getNodeX } from './renderTreeCanvas.ts'
+
+import type { HierarchyNode } from '../../hierarchy.ts'
+import type { MsaViewModel } from '../../model.ts'
+import type { RasterCanvas } from '../msa/msaRaster.ts'
+import type { RenderCtx } from '../renderCtx.ts'
+import type { Theme } from '@mui/material'
+
+// the tree draws this far inside the band, so a box around the first or the
+// last row keeps both of its edges
+const pad = 1
+
+interface OverviewArgs {
+  model: MsaViewModel
+  ctx: RenderCtx
+  theme: Theme
+  width: number
+  height: number
+}
+
+function rowScale(numTips: number, height: number) {
+  const inner = height - pad * 2
+  return (row: number) => pad + (row / numTips) * inner
+}
+
+/**
+ * The whole tree at the size of the overview band, with the clade highlights
+ * under it.
+ *
+ * A branch that moves less than a pixel on both axes is dropped. The 230k-tip
+ * COVID tree has 460k of them over a 120px band, and the ones landing on the
+ * pixel their parent already covers cost a path segment each and change no
+ * pixel; the test in renderTreeOverview.test.ts measures a 200k-tip tree.
+ */
+export function drawTreeOverview({
+  model,
+  ctx,
+  theme,
+  width,
+  height,
+}: OverviewArgs) {
+  const layout = model.treeOverviewLayout
+  if (!layout) {
+    return
+  }
+  const { root, numTips, maxDepthToLeaf, showBranchLen } = layout
+  const innerWidth = width - pad * 2
+  const rowY = rowScale(numTips, height)
+  const nodeX = (node: HierarchyNode) =>
+    pad + (getNodeX(node, showBranchLen, 1, maxDepthToLeaf) ?? 0) * innerWidth
+
+  for (const { rows, color } of model.treeOverviewClades) {
+    ctx.fillStyle = color
+    ctx.fillRect(0, rowY(rows[0]), width, rowY(rows[1] + 1) - rowY(rows[0]))
+  }
+
+  ctx.strokeStyle = theme.palette.text.primary
+  ctx.beginPath()
+  for (const source of descendants(root)) {
+    if (!source.children) {
+      continue
+    }
+    const sx = nodeX(source)
+    const sy = rowY(source.x!)
+    for (const target of source.children) {
+      const tx = nodeX(target)
+      const ty = rowY(target.x!)
+      if (Math.abs(tx - sx) < 1 && Math.abs(ty - sy) < 1) {
+        continue
+      }
+      ctx.moveTo(sx, sy)
+      ctx.lineTo(sx, ty)
+      ctx.lineTo(tx, ty)
+    }
+  }
+  ctx.stroke()
+}
+
+/**
+ * A box across the overview around a run of tip rows: the focused subtree's
+ * extent, or the one a hovered pixel would focus.
+ */
+export function drawTreeOverviewBox({
+  model,
+  ctx,
+  color,
+  rows,
+  width,
+  height,
+}: Omit<OverviewArgs, 'theme'> & {
+  color: string
+  rows: [number, number]
+}) {
+  const layout = model.treeOverviewLayout
+  if (!layout) {
+    return
+  }
+  const rowY = rowScale(layout.numTips, height)
+  const top = rowY(rows[0])
+  ctx.strokeStyle = color
+  ctx.strokeRect(0.5, top, width - 1, Math.max(2, rowY(rows[1] + 1) - top))
+}
+
+/**
+ * The overview as the figure carries it: the tree, the clade highlights and
+ * the focus box. The SVG export draws it straight onto a svgcanvas Context,
+ * and the live canvas blits `treeOverviewImage` in place of the first two.
+ */
+export function renderTreeOverview(args: OverviewArgs) {
+  drawTreeOverview(args)
+  const rows = args.model.treeOverviewFocusRows
+  if (rows) {
+    drawTreeOverviewBox({
+      ...args,
+      rows,
+      color: args.theme.palette.text.primary,
+    })
+  }
+}
+
+interface OverviewCache {
+  keys: unknown[]
+  canvas: RasterCanvas | undefined
+}
+
+const caches = new WeakMap<object, OverviewCache>()
+
+/**
+ * Everything the drawn tree depends on. `treeOverviewLayout` and
+ * `treeOverviewClades` are computed views, which recompute on every read
+ * outside a reaction, so the key holds the values behind them instead.
+ */
+function overviewKeys({
+  model,
+  theme,
+  width,
+  height,
+  scale,
+}: {
+  model: MsaViewModel
+  theme: Theme
+  width: number
+  height: number
+  scale: number
+}) {
+  return [
+    model.data.tree,
+    model.data.msa,
+    model.currentAlignment,
+    model.collapsed.join(','),
+    JSON.stringify(model.clades),
+    model.showBranchLen,
+    width,
+    height,
+    scale,
+    theme.palette.text.primary,
+  ]
+}
+
+function makeCanvas(width: number, height: number) {
+  const canvas =
+    typeof OffscreenCanvas !== 'undefined'
+      ? new OffscreenCanvas(width, height)
+      : typeof document !== 'undefined'
+        ? Object.assign(document.createElement('canvas'), { width, height })
+        : undefined
+  const ctx = canvas?.getContext('2d')
+  return ctx && typeof (ctx as CanvasRenderingContext2D).stroke === 'function'
+    ? { canvas: canvas as RasterCanvas, ctx: ctx as CanvasRenderingContext2D }
+    : undefined
+}
+
+/**
+ * The tree and its clade highlights on an offscreen canvas, drawn once per
+ * change of anything they depend on and blitted every frame after that. A
+ * 230k-branch tree takes hundreds of milliseconds to walk and cannot be redrawn
+ * as the focus box follows the pointer.
+ *
+ * Returns undefined where a canvas has no 2d context (jsdom), and the caller
+ * then draws the tree itself.
+ */
+export function treeOverviewImage({
+  model,
+  theme,
+  width,
+  height,
+  scale,
+}: {
+  model: MsaViewModel
+  theme: Theme
+  width: number
+  height: number
+  scale: number
+}) {
+  const keys = overviewKeys({ model, theme, width, height, scale })
+  const prev = caches.get(model)
+  if (prev && keys.every((key, i) => key === prev.keys[i])) {
+    return prev.canvas
+  }
+  const made = makeCanvas(
+    Math.max(1, Math.round(width * scale)),
+    Math.max(1, Math.round(height * scale)),
+  )
+  if (made) {
+    made.ctx.scale(scale, scale)
+    drawTreeOverview({ model, ctx: made.ctx, theme, width, height })
+  }
+  const next = { keys, canvas: made?.canvas }
+  caches.set(model, next)
+  return next.canvas
+}

package/src/components/tree/useTreeHover.ts

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react'
+import { useState } from 'react'
 
 import { ClickMapIndex } from './clickMap.ts'
 
@@ -24,9 +24,7 @@ export function useTreeHover({
   model: MsaViewModel
   offsetY: number
 }) {
-  const clickMapRef = useRef<ClickMapIndex>(null)
-  clickMapRef.current ??= new ClickMapIndex()
-  const clickMap = clickMapRef.current
+  const [clickMap] = useState(() => new ClickMapIndex())
   const [hovered, setHovered] = useState<TreeHoverTarget>()
 
   // leaf labels win over the branch/bubble targets they overlap, so a click on a