react-msaview 5.1.1 → 5.2.1

package/src/components/tree/renderTreeCanvas.ts

@@ -1,7 +1,13 @@
-import { calcDepthToLeaf, descendants, links } from '../../hierarchy.ts'
+import {
+  calcDepthToLeaf,
+  forEachDescendant,
+  forEachLink,
+} from '../../hierarchy.ts'
+import { setFontSize } from '../../setFontSize.ts'
 
 import type { HierarchyNode } from '../../hierarchy.ts'
 import type { MsaViewModel } from '../../model.ts'
+import type { RenderCtx } from '../renderCtx.ts'
 import type { Theme } from '@mui/material'
 
 export const padding = 600
@@ -59,7 +65,7 @@ export function renderTree({
   blockSizeYOverride,
 }: {
   offsetY: number
-  ctx: CanvasRenderingContext2D
+  ctx: RenderCtx
   model: MsaViewModel
   theme: Theme
   maxBranchLen: number
@@ -67,16 +73,15 @@ export function renderTree({
   blockSizeYOverride?: number
 }) {
   const { hierarchy, showBranchLenEffective: showBranchLen, blockSize } = model
-  const by = blockSizeYOverride || blockSize
+  const by = blockSizeYOverride ?? blockSize
   ctx.strokeStyle = theme.palette.text.primary
-  for (const link of links(hierarchy)) {
-    const { source, target } = link
+  forEachLink(hierarchy, (source, target) => {
     const sy = source.x!
     const ty = target.x!
     const tx = getNodeX(target, showBranchLen, maxBranchLen, maxDepthToLeaf)
     const sx = getNodeX(source, showBranchLen, maxBranchLen, maxDepthToLeaf)
     if (tx === undefined || sx === undefined) {
-      continue
+      return
     }
 
     const y1 = Math.min(sy, ty)
@@ -91,7 +96,7 @@ export function renderTree({
       ctx.lineTo(tx, ty)
       ctx.stroke()
     }
-  }
+  })
 }
 
 export function renderNodeBubbles({
@@ -103,7 +108,7 @@ export function renderNodeBubbles({
   maxDepthToLeaf,
   blockSizeYOverride,
 }: {
-  ctx: CanvasRenderingContext2D
+  ctx: RenderCtx
   clickMap?: ClickMapIndex
   offsetY: number
   model: MsaViewModel
@@ -118,11 +123,11 @@ export function renderNodeBubbles({
     blockSize,
     marginLeft: ml,
   } = model
-  const by = blockSizeYOverride || blockSize
-  for (const node of descendants(hierarchy)) {
+  const by = blockSizeYOverride ?? blockSize
+  forEachDescendant(hierarchy, node => {
     const x = getNodeX(node, showBranchLen, maxBranchLen, maxDepthToLeaf)
     if (x === undefined) {
-      continue
+      return
     }
     const { data } = node
     const y = node.x!
@@ -149,7 +154,7 @@ export function renderNodeBubbles({
         name,
       })
     }
-  }
+  })
 }
 
 export function renderTreeLabels({
@@ -164,7 +169,7 @@ export function renderTreeLabels({
 }: {
   model: MsaViewModel
   offsetY: number
-  ctx: CanvasRenderingContext2D
+  ctx: RenderCtx
   clickMap?: ClickMapIndex
   theme: Theme
   maxBranchLen: number
@@ -183,8 +188,9 @@ export function renderTreeLabels({
     marginLeft,
     leaves,
     noTree,
+    labelWidthMap,
   } = model
-  const by = blockSizeYOverride || blockSize
+  const by = blockSizeYOverride ?? blockSize
   const emHeight = ctx.measureText('M').width
   if (labelsAlignRight) {
     ctx.textAlign = 'right'
@@ -204,10 +210,11 @@ export function renderTreeLabels({
       const yp = y + fontSize / 4
       let xp = 0
       if (!noTree) {
-        xp = getNodeX(node, showBranchLen, maxBranchLen, maxDepthToLeaf) || 0
+        xp = getNodeX(node, showBranchLen, maxBranchLen, maxDepthToLeaf) ?? 0
       }
 
-      const { width } = ctx.measureText(displayName)
+      const width =
+        labelWidthMap.get(name) ?? ctx.measureText(displayName).width
 
       ctx.fillStyle = theme.palette.text.primary
       if (labelsAlignRight) {
@@ -255,7 +262,7 @@ export function renderTreeCanvas({
 }: {
   model: MsaViewModel
   offsetY: number
-  ctx: CanvasRenderingContext2D
+  ctx: RenderCtx
   clickMap?: ClickMapIndex
   theme: Theme
   highResScaleFactorOverride?: number
@@ -272,27 +279,17 @@ export function renderTreeCanvas({
     fontSize,
     showTreeText,
     marginLeft,
-    nref,
     // eslint-disable-next-line  @typescript-eslint/no-unused-vars
-    rowHeight: _rowHeight, // this is needed for redrawing after zoom change
+    rowHeight: _rowHeight, // read so the draw autorun re-fires after a zoom change
   } = model
 
   ctx.resetTransform()
 
-  // this is a bogus use of nref, it is never less than 0. we just are using
-  // it in this statement because otherwise it would be an unused variable,
-  // we just need to use nref to indicate a redraw in an autorun when canvas
-  // ref is updated and in order to convince bundlers like not to delete
-  // unused usage with propertyReadSideEffects
-  const k =
-    nref < 0
-      ? Number.NEGATIVE_INFINITY
-      : highResScaleFactorOverride || highResScaleFactor
+  const k = highResScaleFactorOverride ?? highResScaleFactor
   ctx.scale(k, k)
   ctx.translate(marginLeft, -offsetY)
 
-  const font = ctx.font
-  ctx.font = font.replace(/\d+px/, `${fontSize}px`)
+  setFontSize(ctx, fontSize)
 
   // memoized on the model and shared across the tree/bubble/label passes (and
   // across all tree blocks) rather than re-traversing the hierarchy in each

package/src/components/util.ts

@@ -1,84 +1,3 @@
-/**
- * Given a scale ( bp/px ) and minimum distances (px) between major and minor
- * gridlines, return an object like `{ majorPitch: bp, minorPitch: bp }` giving
- * the gridline pitches to use.
- */
-export function chooseGridPitch(
-  scale: number,
-  minMajorPitchPx: number,
-  minMinorPitchPx: number,
-) {
-  scale = Math.abs(scale)
-  const minMajorPitchBp = minMajorPitchPx * scale
-  const majorMagnitude = Number.parseInt(
-    minMajorPitchBp.toExponential().split(/e/i)[1]!,
-    10,
-  )
-
-  let majorPitch = 10 ** majorMagnitude
-  while (majorPitch < minMajorPitchBp) {
-    majorPitch *= 2
-    if (majorPitch >= minMajorPitchBp) {
-      break
-    }
-    majorPitch *= 2.5
-  }
-
-  majorPitch = Math.max(majorPitch, 5)
-
-  const majorPitchPx = majorPitch / scale
-
-  let minorPitch = 0
-  if (!(majorPitch % 10) && majorPitchPx / 10 >= minMinorPitchPx) {
-    minorPitch = majorPitch / 10
-  } else if (!(majorPitch % 5) && majorPitchPx / 5 >= minMinorPitchPx) {
-    minorPitch = majorPitch / 5
-  } else if (!(majorPitch % 2) && majorPitchPx / 2 >= minMinorPitchPx) {
-    minorPitch = majorPitch / 2
-  }
-
-  return { majorPitch, minorPitch }
-}
-export function makeTicks(
-  start: number,
-  end: number,
-  bpPerPx: number,
-  emitMajor = true,
-  emitMinor = true,
-) {
-  const gridPitch = chooseGridPitch(bpPerPx, 60, 15)
-
-  let minBase = start
-  let maxBase = end
-
-  if (bpPerPx < 0) {
-    ;[minBase, maxBase] = [maxBase, minBase]
-  }
-
-  // add 20px additional on the right and left to allow us to draw the ends of
-  // labels that lie a little outside our region
-  minBase -= Math.abs(20 * bpPerPx)
-  maxBase += Math.abs(20 * bpPerPx) + 1
-
-  const iterPitch = gridPitch.minorPitch || gridPitch.majorPitch
-  let index = 0
-  const ticks = []
-  for (
-    let base = Math.ceil(minBase / iterPitch) * iterPitch;
-    base < maxBase;
-    base += iterPitch
-  ) {
-    if (emitMinor && base % (gridPitch.majorPitch * 2)) {
-      ticks.push({ type: 'minor', base: base - 1, index })
-      index += 1
-    } else if (emitMajor && !(base % (gridPitch.majorPitch * 2))) {
-      ticks.push({ type: 'major', base: base - 1, index })
-      index += 1
-    }
-  }
-  return ticks
-}
-
 export function mathPower(num: number): string {
   if (num < 999) {
     return String(num)

package/src/constants.ts

@@ -10,6 +10,14 @@ export const defaultHideGaps = true
 export const defaultAllowedGappyness = 100
 export const defaultSubFeatureRows = false
 export const defaultDrawMsaLetters = true
+export const defaultScrollZoom = false
+
+// Zoom limits, px per cell. maxCellSize caps both smooth zoom and the stepwise
+// zoom-in buttons (which otherwise grow unbounded). minColWidth/minRowHeight are
+// the smooth-zoom floors.
+export const minColWidth = 0.2
+export const minRowHeight = 1
+export const maxCellSize = 80
 
 // MSA model defaults
 export const defaultBgColor = true

package/src/flatToTree.test.ts

@@ -0,0 +1,30 @@
+import { describe, expect, test } from 'vitest'
+
+import { flatToTree } from './flatToTree.ts'
+
+describe('flatToTree', () => {
+  test('builds a tree from a flat parent list', () => {
+    const root = flatToTree([
+      { id: 0 },
+      { id: 1, parent: 0 },
+      { id: 2, parent: 0 },
+      { id: 3, parent: 1 },
+    ])
+    expect(root.id).toBe('0')
+    expect(root.children.map(c => c.id)).toEqual(['1', '2'])
+    expect(root.children[0]!.children.map(c => c.id)).toEqual(['3'])
+  })
+
+  test('throws on empty input rather than returning undefined', () => {
+    expect(() => flatToTree([])).toThrow(/no root/)
+  })
+
+  test('throws when every node has a parent (cycle) rather than returning undefined', () => {
+    expect(() =>
+      flatToTree([
+        { id: 0, parent: 1 },
+        { id: 1, parent: 0 },
+      ]),
+    ).toThrow(/no root/)
+  })
+})

package/src/flatToTree.ts

@@ -35,5 +35,14 @@ export function flatToTree(items: FlatItem[]): TreeNode {
     }
   }
 
-  return root!
+  if (root === undefined) {
+    // no node lacks a (resolvable) parent: empty input, or every node's parent
+    // points back into the set (a cycle). returning undefined here would crash
+    // cryptically downstream, so fail with a diagnosable message instead
+    throw new Error(
+      'could not build tree from flat node list: no root found (input was empty or contains a parent cycle)',
+    )
+  }
+
+  return root
 }

package/src/hierarchy.test.ts

@@ -1,9 +1,36 @@
 import { describe, expect, test } from 'vitest'
 
-import { collapse, find, hierarchy, leaves, sort, sum } from './hierarchy.ts'
+import {
+  calcDepthToLeaf,
+  collapse,
+  find,
+  findMaxBranchLen,
+  hierarchy,
+  leaves,
+  maxLength,
+  setBrLength,
+  sort,
+  sum,
+} from './hierarchy.ts'
 
 import type { NodeWithIds } from './types.ts'
 
+// Builds a fully unbalanced "caterpillar" tree of the given depth: each internal
+// node has one leaf child and one internal child. Recursion over this would blow
+// the call stack; the iterative traversals must handle it.
+function makeDeepTree(depth: number): NodeWithIds {
+  let node: NodeWithIds = { id: 'leaf0', name: 'leaf0', children: [] }
+  for (let i = 1; i <= depth; i++) {
+    node = {
+      id: `node${i}`,
+      name: `node${i}`,
+      length: 1,
+      children: [{ id: `leaf${i}`, name: `leaf${i}`, children: [] }, node],
+    }
+  }
+  return node
+}
+
 function makeTree(): NodeWithIds {
   return {
     id: 'root',
@@ -118,3 +145,28 @@ describe('sum', () => {
     expect(find(h, n => n.data.id === 'A')?.value).toBe(2)
   })
 })
+
+describe('deep (caterpillar) trees do not overflow the stack', () => {
+  const depth = 100_000
+
+  test('build, height, leaf count, and ordering', () => {
+    const h = hierarchy(makeDeepTree(depth), d => d.children)
+    expect(h.height).toBe(depth)
+    const l = leaves(h)
+    expect(l.length).toBe(depth + 1)
+    // each level contributes its own leafN before descending; deepest leaf last
+    expect(l[0]!.data.name).toBe(`leaf${depth}`)
+    expect(l.at(-1)!.data.name).toBe('leaf0')
+  })
+
+  test('accumulation helpers (sum, find, maxLength, setBrLength, depth)', () => {
+    const h = hierarchy(makeDeepTree(depth), d => d.children)
+    sum(h, d => (d.children.length > 0 ? 0 : 1))
+    expect(h.value).toBe(depth + 1)
+    expect(find(h, n => n.data.id === 'leaf0')?.data.name).toBe('leaf0')
+    expect(maxLength(h)).toBe(depth)
+    expect(calcDepthToLeaf(h)).toBe(depth)
+    setBrLength(h, 0, 1)
+    expect(findMaxBranchLen(h)).toBe(depth)
+  })
+})