react-msaview 8.2.0 → 8.3.0

package/src/components/tree/renderTreeCanvas.ts

@@ -6,6 +6,7 @@ import {
   highlightLabelHeight,
   highlightRowFill,
 } from '../msa/renderHighlights.ts'
+import { referenceColor } from '../overlayColors.ts'
 import { bracketBarWidth, bracketGap } from './cladeBrackets.ts'
 
 import type { HierarchyNode } from '../../hierarchy.ts'
@@ -64,6 +65,13 @@ function forEachNodeInBlock(
   }
 }
 
+// withId gives an unnamed node its path, node-0-1-1, as its name
+function cladeName(node: HierarchyNode, unnamed: string) {
+  const { id, name } = node.data
+  const label = name === id ? unnamed : name
+  return node.value === undefined ? label : `${label} (${node.value} tips)`
+}
+
 // Calculate node x-coordinate for both phylogram (with branch lengths) and
 // cladogram (topology only) modes. tipX is the pixel x the tips sit at.
 // For cladograms: x = (maxDepthToLeaf - nodeDepthToLeaf) / maxDepthToLeaf * tipX
@@ -182,7 +190,7 @@ function renderCollapsedTriangles({
   const by = blockSizeYOverride ?? blockSize
   const halfHeight = Math.max(2, rowHeight * 0.42)
   forEachNodeInBlock(hierarchy, offsetY, by, blockPad(model), node => {
-    const { id, name } = node.data
+    const { id } = node.data
     if (collapsedSet.has(id)) {
       const apexX = getNodeX(node, showBranchLen, tipX, maxDepthToLeaf)
       const y = node.x!
@@ -212,7 +220,6 @@ function renderCollapsedTriangles({
         // the whole triangle is a click/hover target that opens the
         // branch menu (Expand this node); the apex bubble's own click entry is
         // skipped for collapsed nodes so this descriptive label wins
-        const label = name === id ? 'Collapsed clade' : name
         clickMap?.insert({
           minX: apexX + ml,
           maxX: baseX + ml,
@@ -220,7 +227,7 @@ function renderCollapsedTriangles({
           maxY: y + halfHeight,
           branch: true,
           id,
-          name: count === undefined ? label : `${label} (${count} tips)`,
+          name: cladeName(node, 'Collapsed clade'),
         })
       }
     }
@@ -266,7 +273,7 @@ function renderNodeBubbles({
     }
     const { data } = node
     const y = node.x!
-    const { id, name } = data
+    const { id } = data
     if (node.height >= 1 && inYBlock(y, offsetY, by, blockPad(model))) {
       const isCollapsed = collapsedSet.has(id)
       if (draw) {
@@ -290,7 +297,7 @@ function renderNodeBubbles({
           maxY: y - radius + d,
           branch: true,
           id,
-          name,
+          name: cladeName(node, 'Clade'),
         })
       }
     }
@@ -572,9 +579,9 @@ function renderCladeBrackets({
   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
+// the `rowTint` encoding, the reference row 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,
@@ -591,6 +598,7 @@ function renderRowHighlights({
   const {
     resolvedHighlights,
     rowTints,
+    referenceRowIndex,
     rowHeight,
     treeAreaWidth,
     marginLeft,
@@ -616,6 +624,10 @@ function renderRowHighlights({
       }
     }
   }
+  if (referenceRowIndex !== undefined) {
+    ctx.fillStyle = referenceColor
+    fillRow(referenceRowIndex)
+  }
   for (const { rowIndices, label, color } of resolvedHighlights) {
     ctx.fillStyle = color ?? highlightRowFill
     for (const index of rowIndices) {

package/src/components/tree/renderTreeMouseover.ts

@@ -0,0 +1,41 @@
+import { treeHoverColor } from '../overlayColors.ts'
+
+import type { MsaViewModel } from '../../model.ts'
+
+export function renderTreeMouseover({
+  ctx,
+  model,
+}: {
+  ctx: CanvasRenderingContext2D
+  model: MsaViewModel
+}) {
+  const {
+    rowHeight,
+    treeAreaWidth: width,
+    height,
+    scrollY,
+    mouseRow,
+    referenceRowIndex,
+    hoveredRowIndices,
+    highResScaleFactor,
+  } = model
+  ctx.resetTransform()
+  ctx.clearRect(0, 0, width * highResScaleFactor, height * highResScaleFactor)
+  ctx.scale(highResScaleFactor, highResScaleFactor)
+
+  const rowBand = (index: number) => {
+    ctx.fillRect(0, index * rowHeight + scrollY, width, rowHeight)
+  }
+
+  ctx.fillStyle = treeHoverColor
+  for (const index of hoveredRowIndices) {
+    rowBand(index)
+  }
+  if (
+    mouseRow !== undefined &&
+    mouseRow !== referenceRowIndex &&
+    !hoveredRowIndices.includes(mouseRow)
+  ) {
+    rowBand(mouseRow)
+  }
+}

package/src/components/tree/useTreeHover.ts

@@ -1,21 +1,16 @@
 import { useState } from 'react'
 
+import { useHoverAnchor } from '../useHoverAnchor.ts'
 import { ClickMapIndex } from './clickMap.ts'
 
 import type { MsaViewModel } from '../../model.ts'
 import type { ClickEntry } from './clickMap.ts'
 import type React from 'react'
 
-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.
+ * in, the entry under the pointer with its tooltip anchor, and the model hover
+ * state that the MSA panel mirrors.
  */
 export function useTreeHover({
   model,
@@ -25,10 +20,10 @@ export function useTreeHover({
   offsetY: number
 }) {
   const [clickMap] = useState(() => new ClickMapIndex())
-  const [hovered, setHovered] = useState<TreeHoverTarget>()
+  const { anchor, hoverAt, clearAnchor } = useHoverAnchor<ClickEntry>()
 
   // 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
+  // name opens the leaf's menu
   function hitTest(event: React.MouseEvent) {
     const x = event.nativeEvent.offsetX
     const y = event.nativeEvent.offsetY + offsetY
@@ -43,11 +38,7 @@ export function useTreeHover({
 
   function onMouseMove(event: React.MouseEvent) {
     const entry = hitTest(event)
-    setHovered(
-      entry
-        ? { ...entry, clientX: event.clientX, clientY: event.clientY }
-        : undefined,
-    )
+    hoverAt(event, entry)
     // hovering an internal node highlights every tip below it; hovering a leaf
     // label additionally drives the single-row highlight
     model.setHoveredTreeNode(entry?.id)
@@ -58,10 +49,10 @@ export function useTreeHover({
   }
 
   function onMouseLeave() {
-    setHovered(undefined)
+    clearAnchor()
     model.setHoveredTreeNode(undefined)
     model.setMousePos(undefined, undefined)
   }
 
-  return { clickMap, hovered, hitTest, onMouseMove, onMouseLeave }
+  return { clickMap, anchor, hitTest, onMouseMove, onMouseLeave }
 }

package/src/components/useHoverAnchor.ts

@@ -0,0 +1,31 @@
+import { useState } from 'react'
+
+export interface HoverAnchor<T> {
+  clientPoint: { x: number; y: number }
+  value: T
+}
+
+/**
+ * The thing under the pointer and the point a tooltip about it hangs from,
+ * 15px below the cursor so the tooltip clears it.
+ */
+export function useHoverAnchor<T>() {
+  const [anchor, setAnchor] = useState<HoverAnchor<T>>()
+
+  function hoverAt(
+    event: { clientX: number; clientY: number },
+    value: T | undefined,
+  ) {
+    setAnchor(
+      value === undefined
+        ? undefined
+        : { value, clientPoint: { x: event.clientX, y: event.clientY + 15 } },
+    )
+  }
+
+  function clearAnchor() {
+    setAnchor(undefined)
+  }
+
+  return { anchor, hoverAt, clearAnchor }
+}

package/src/constants.ts

@@ -1,3 +1,5 @@
+import type { TreeOrder } from './types.ts'
+
 // Main model defaults
 export const defaultRowHeight = 16
 export const defaultColWidth = 12
@@ -75,6 +77,13 @@ export const defaultLabelsAlignRight = false
 export const defaultTreeAreaWidth = 400
 export const defaultTreeWidth = 300
 export const defaultShowBranchLen = true
+export const treeOrders = [
+  'branchLength',
+  'input',
+  'ladderize',
+  'ladderizeReverse',
+] as const satisfies readonly TreeOrder[]
+export const defaultTreeOrder: TreeOrder = 'branchLength'
 export const defaultDrawTree = true
 export const defaultDrawNodeBubbles = true
 export const defaultDrawNodeLabels = false
@@ -98,9 +107,11 @@ export const cladeHighlightColor = '#fff3c4'
 export const cladeHighlightAlpha = 0.6
 
 // The largest inline document the snapshot carries. A larger pasted or
-// locally-opened file stays in the live model and out of the snapshot, keeping
-// shared URLs sendable. `unshareableData` warns using the same number.
-export const maxInlineSnapshotBytes = 50_000
+// locally-opened file stays in the live model and out of the snapshot, and
+// `unshareableData` warns using the same number. The demo app gzips the
+// snapshot into `?data=`, where 15 kB of the hosted protein alignments encodes
+// to 6,300-7,600 characters, under the 8,192 gmod.org accepts.
+export const maxInlineSnapshotBytes = 15_000
 
 // Height of the band the `rowPanels` headers draw in, above the strips in the
 // top area beside the tree ruler and the minimap. A panel wider than the band

package/src/expandSpec.ts

@@ -59,9 +59,9 @@ function parseSpan(text: string, what: string) {
       `${what} "${text}" is not "start", "start-end" or either followed by a label`,
     )
   }
-  const start = Number(match[1])
-  const end = match[2] === undefined ? start : Number(match[2])
-  return { start, end, label: match[3] }
+  const a = Number(match[1])
+  const b = match[2] === undefined ? a : Number(match[2])
+  return { start: Math.min(a, b), end: Math.max(a, b), label: match[3] }
 }
 
 function withRow<T extends RowChoice>(entry: T, query?: string) {

package/src/exportFileName.ts

@@ -1,12 +1,13 @@
 import type { FileLocation } from '@jbrowse/core/util/types'
 
 /**
- * The name to save an export under: the loaded alignment's file name with the
- * extension swapped, or a plain default when the alignment was pasted in.
+ * The name to save an export under: the loaded file's name with the extension
+ * swapped, or `fallback` when the data was pasted in.
  */
 export function exportFileName(
   location: FileLocation | undefined,
   extension: string,
+  fallback = 'image',
 ) {
   const loc = location as
     | { uri?: string; localPath?: string; name?: string }
@@ -17,5 +18,5 @@ export function exportFileName(
     ?.split(/[/\\]/)
     .pop()
     ?.replace(/\.[^.]*$/, '')
-  return `${base || 'image'}.${extension}`
+  return `${base || fallback}.${extension}`
 }

package/src/hierarchy.ts

@@ -25,16 +25,16 @@ export interface HierarchyNode<T = NodeWithIds> extends CoreHierarchyNode<T> {
   parent: HierarchyNode<T> | null
   x?: number
   y?: number
-  // the span of `x` over this node's subtree, set by clusterLayout. Leaves are
-  // laid out in order, so a subtree occupies one contiguous run of rows and a
-  // renderer can skip the whole thing when the run misses its block.
+  // the span of `x` over this node's subtree. Leaves are laid out in order, so
+  // a subtree occupies one contiguous run of rows and a renderer can skip the
+  // whole thing when the run misses its block.
   xMin?: number
   xMax?: number
   len?: number
   depthToLeaf?: number
   _children?: HierarchyNode<T>[] | null
   // pixel x-position of the farthest tip of a collapsed subtree, where the base
-  // of the collapsed-clade triangle goes. Set in the model's hierarchy getter.
+  // of the collapsed-clade triangle goes
   collapsedTipXFar?: number
 }
 
@@ -111,6 +111,153 @@ export function clusterLayout<T>(
   }
 }
 
+export interface TreeScale {
+  readonly rowHeight: number
+  readonly treeWidth: number
+}
+
+interface LayoutFrame {
+  scale: TreeScale
+  rootToTipLength: number
+}
+
+/**
+ * A node of `layoutTree`: its source node's fields plus its place in unit
+ * space, rows down and branch length across. The pixel getters multiply by the
+ * scale on every read, so a zoom leaves the nodes valid, and an observer
+ * reading `x` observes whatever the scale reads.
+ */
+export class LaidOutNode<T> implements HierarchyNode<T> {
+  data: T
+  depth: number
+  height: number
+  value?: number
+  children: LaidOutNode<T>[] | null
+  depthToLeaf = 0
+  row = 0
+  rowMin = 0
+  rowMax = 0
+  depthFraction = 0
+  branchLength = 0
+  collapsedBranchLength?: number
+
+  constructor(
+    source: HierarchyNode<T>,
+    readonly parent: LaidOutNode<T> | null,
+    private readonly frame: LayoutFrame,
+  ) {
+    this.data = source.data
+    this.depth = source.depth
+    this.height = source.height
+    this.value = source.value
+    this.children = source.children ? [] : null
+  }
+
+  private get pxPerBranchLength() {
+    const { scale, rootToTipLength } = this.frame
+    return rootToTipLength ? scale.treeWidth / rootToTipLength : 0
+  }
+
+  get x() {
+    return this.row * this.frame.scale.rowHeight
+  }
+
+  get xMin() {
+    return this.rowMin * this.frame.scale.rowHeight
+  }
+
+  get xMax() {
+    return this.rowMax * this.frame.scale.rowHeight
+  }
+
+  get y() {
+    return this.depthFraction * this.frame.scale.treeWidth
+  }
+
+  get len() {
+    return this.branchLength * this.pxPerBranchLength
+  }
+
+  get collapsedTipXFar() {
+    return this.collapsedBranchLength === undefined
+      ? undefined
+      : this.collapsedBranchLength * this.pxPerBranchLength
+  }
+}
+
+/**
+ * The layout `clusterLayout` and `setBrLength` write, on new nodes: tips one
+ * row apart, a parent at the mean of its children, and branch length measured
+ * from the root, whose own branch is not drawn. A collapsed node records the
+ * farthest tip of its hidden subtree, where the base of its triangle goes.
+ */
+export function layoutTree<T extends { length?: number }>(
+  root: HierarchyNode<T>,
+  scale: TreeScale,
+) {
+  const frame: LayoutFrame = { scale, rootToTipLength: 0 }
+  const nodes: LaidOutNode<T>[] = []
+  const leafNodes: LaidOutNode<T>[] = []
+  const rootHeight = root.height
+  const stack: { source: HierarchyNode<T>; parent: LaidOutNode<T> | null }[] = [
+    { source: root, parent: null },
+  ]
+  while (stack.length > 0) {
+    const { source, parent } = stack.pop()!
+    const node = new LaidOutNode(source, parent, frame)
+    nodes.push(node)
+    node.depthFraction =
+      rootHeight === 0 ? 1 : (source.depth - root.depth) / rootHeight
+    if (parent) {
+      parent.children!.push(node)
+      node.branchLength =
+        parent.branchLength + Math.max(source.data.length || 0, 0)
+      frame.rootToTipLength = Math.max(frame.rootToTipLength, node.branchLength)
+    }
+    if (source._children) {
+      node.collapsedBranchLength =
+        node.branchLength + collapsedSubtreeMaxLength(source)
+    }
+    if (source.children) {
+      for (let i = source.children.length - 1; i >= 0; i--) {
+        stack.push({ source: source.children[i]!, parent: node })
+      }
+    } else {
+      node.row = leafNodes.length + 0.5
+      node.depthToLeaf = source.depthToLeaf ?? 0
+      leafNodes.push(node)
+    }
+  }
+
+  for (let i = nodes.length - 1; i >= 0; i--) {
+    const node = nodes[i]!
+    if (node.children) {
+      let sum = 0
+      let min = Infinity
+      let max = -Infinity
+      let depthToLeaf = 0
+      for (const child of node.children) {
+        sum += child.row
+        min = Math.min(min, child.rowMin)
+        max = Math.max(max, child.rowMax)
+        depthToLeaf = Math.max(depthToLeaf, 1 + child.depthToLeaf)
+      }
+      node.row = sum / node.children.length
+      node.rowMin = min
+      node.rowMax = max
+      node.depthToLeaf = depthToLeaf
+    } else {
+      node.rowMin = node.row
+      node.rowMax = node.row
+    }
+  }
+  return {
+    root: nodes[0]!,
+    leaves: leafNodes,
+    rootToTipLength: frame.rootToTipLength,
+  }
+}
+
 export function collapse<T>(node: HierarchyNode<T>) {
   if (node.children) {
     // memoize the real subtree depth onto the node before detaching its

package/src/index.ts

@@ -36,7 +36,7 @@ export type { MsaSvgFigure } from './useMsaSvgFigure.ts'
 export type { MountedViewer } from './mount.tsx'
 export { type MsaViewModel, default as MSAModelF } from './model.ts'
 export type { MSAFormat, MSAParserType } from 'msa-parsers'
-export type { HierarchyNode } from './hierarchy.ts'
+export type { HierarchyNode, LaidOutNode, TreeScale } from './hierarchy.ts'
 // InterProScanResults is the EBI wire format that setDomains still accepts;
 // Annotation is the source-agnostic shape everything else is written against
 export type { InterProScanResults } from 'msa-parsers'
@@ -86,6 +86,8 @@ export type {
   TextTrackModel,
   TidyDomainAnnotation,
   TrackKind,
+  TreeOrder,
+  TreeRoot,
   UnshareableData,
   Viewport,
 } from './types.ts'

package/src/model/treeModel.ts

@@ -8,12 +8,16 @@ import {
   defaultLabelsAlignRight,
   defaultOverviewHeight,
   defaultShowBranchLen,
+  defaultTreeOrder,
   defaultShowTreeOverview,
   defaultTreeAreaWidth,
   defaultTreeWidth,
+  treeOrders,
 } from '../constants.ts'
 import { stripDefault } from '../stripDefault.ts'
 
+import type { TreeOrder } from '../types.ts'
+
 /**
  * #stateModel Tree
  */
@@ -51,6 +55,17 @@ export function TreeModelF() {
        */
       showBranchLen: stripDefault(types.boolean, defaultShowBranchLen),
 
+      /**
+       * #property
+       * the order each node's children draw in: `branchLength` (shortest
+       * first), `input` (as the file gives them), `ladderize` (fewest tips
+       * first) or `ladderizeReverse` (most tips first)
+       */
+      treeOrder: stripDefault(
+        types.enumeration<TreeOrder>('TreeOrder', [...treeOrders]),
+        defaultTreeOrder,
+      ),
+
       /**
        * #property
        * draw tree, boolean
@@ -133,6 +148,13 @@ export function TreeModelF() {
         self.showBranchLen = arg
       },
 
+      /**
+       * #action
+       */
+      setTreeOrder(order: TreeOrder) {
+        self.treeOrder = order
+      },
+
       /**
        * #action
        */