react-msaview 8.4.1 → 9.0.0

package/src/components/tree/CladeLabels.tsx

@@ -24,14 +24,14 @@ const CladeLabels = observer(function ({ model }: { model: MsaViewModel }) {
     resolvedClades,
     cladeGutterWidth,
     rowHeight,
-    treeAreaWidth,
+    effectiveTreeAreaWidth,
     fontSize,
   } = model
   const theme = useTheme()
   if (cladeGutterWidth === 0) {
     return null
   }
-  const gutterLeft = treeAreaWidth - cladeGutterWidth
+  const gutterLeft = effectiveTreeAreaWidth - cladeGutterWidth
   return (
     <>
       {resolvedClades.map((clade, index) => {
@@ -49,7 +49,7 @@ const CladeLabels = observer(function ({ model }: { model: MsaViewModel }) {
               position: 'absolute',
               left,
               top: rows[0] * rowHeight,
-              width: treeAreaWidth - left - bracketGap,
+              width: effectiveTreeAreaWidth - left - bracketGap,
               height: cladeHeight(clade, rowHeight),
               display: 'flex',
               alignItems: 'center',

package/src/components/tree/TreeCanvas.tsx

@@ -13,7 +13,13 @@ import type { MsaViewModel } from '../../model.ts'
 
 const TreeCanvas = observer(function ({ model }: { model: MsaViewModel }) {
   const ref = useRef<HTMLDivElement>(null)
-  const { height, blocksY, treeAreaWidth, scrollY, highResScaleFactor } = model
+  const {
+    height,
+    blocksY,
+    effectiveTreeAreaWidth,
+    scrollY,
+    highResScaleFactor,
+  } = model
   const onScrollY = useCallback(
     (d: number) => {
       model.doScrollY(d)
@@ -22,7 +28,7 @@ const TreeCanvas = observer(function ({ model }: { model: MsaViewModel }) {
   )
   const { onMouseDown, onMouseUp } = useWheelScroll({ ref, onScrollY })
 
-  const canvasWidth = treeAreaWidth * highResScaleFactor
+  const canvasWidth = effectiveTreeAreaWidth * highResScaleFactor
   const canvasHeight = height * highResScaleFactor
   const mouseoverRef = useCanvasAutorun({
     draw: ctx => {
@@ -43,7 +49,7 @@ const TreeCanvas = observer(function ({ model }: { model: MsaViewModel }) {
       style={{
         height,
         position: 'relative',
-        width: treeAreaWidth,
+        width: effectiveTreeAreaWidth,
       }}
     >
       {/* one transform for the whole block set, matching MSACanvas: the tree
@@ -70,7 +76,7 @@ const TreeCanvas = observer(function ({ model }: { model: MsaViewModel }) {
           position: 'absolute',
           top: 0,
           left: 0,
-          width: treeAreaWidth,
+          width: effectiveTreeAreaWidth,
           height,
           zIndex: 1000,
           pointerEvents: 'none',

package/src/components/tree/TreeCanvasBlock.tsx

@@ -37,9 +37,9 @@ const TreeCanvasBlock = observer(function ({
   )
   const hovered = anchor?.value
 
-  const { treeAreaWidth, blockSize, highResScaleFactor } = model
-  // TreePanel clips to treeAreaWidth, so a wider canvas is wasted backing store
-  const width = treeAreaWidth
+  const { effectiveTreeAreaWidth, blockSize, highResScaleFactor } = model
+  // TreePanel clips to the tree area, so a wider canvas is wasted backing store
+  const width = effectiveTreeAreaWidth
   const height = blockSize
 
   const canvasWidth = width * highResScaleFactor
@@ -121,7 +121,7 @@ const TreeCanvasBlock = observer(function ({
 
       {anchor ? (
         <BaseTooltip clientPoint={anchor.clientPoint}>
-          {anchor.value.name}
+          {anchor.value.label ?? anchor.value.name}
         </BaseTooltip>
       ) : null}
     </>

package/src/components/tree/TreeOverview.tsx

@@ -21,10 +21,10 @@ import type { MsaViewModel } from '../../model.ts'
  * moving across it costs are a blit and two boxes.
  */
 const TreeOverview = observer(function ({ model }: { model: MsaViewModel }) {
-  const { treeAreaWidth, overviewHeight, highResScaleFactor } = model
+  const { effectiveTreeAreaWidth, overviewHeight, highResScaleFactor } = model
   const theme = useTheme()
   const [hover, setHover] = useState<{ id: string; rows: [number, number] }>()
-  const width = Math.round(treeAreaWidth * highResScaleFactor)
+  const width = Math.round(effectiveTreeAreaWidth * highResScaleFactor)
   const height = Math.round(overviewHeight * highResScaleFactor)
 
   const ref = useCanvasAutorun({
@@ -34,12 +34,17 @@ const TreeOverview = observer(function ({ model }: { model: MsaViewModel }) {
       const image = treeOverviewImage({
         model,
         theme,
-        width: treeAreaWidth,
+        width: effectiveTreeAreaWidth,
         height: overviewHeight,
         scale: highResScaleFactor,
       })
       ctx.scale(highResScaleFactor, highResScaleFactor)
-      const box = { model, ctx, width: treeAreaWidth, height: overviewHeight }
+      const box = {
+        model,
+        ctx,
+        width: effectiveTreeAreaWidth,
+        height: overviewHeight,
+      }
       if (image) {
         ctx.drawImage(
           image,
@@ -86,7 +91,7 @@ const TreeOverview = observer(function ({ model }: { model: MsaViewModel }) {
         display: 'block',
         flexShrink: 0,
         cursor: 'pointer',
-        width: treeAreaWidth,
+        width: effectiveTreeAreaWidth,
         height: overviewHeight,
       }}
       onMouseMove={event => {

package/src/components/tree/TreePanel.tsx

@@ -7,9 +7,15 @@ import TreeCanvas from './TreeCanvas.tsx'
 import type { MsaViewModel } from '../../model.ts'
 
 const TreePanel = observer(function ({ model }: { model: MsaViewModel }) {
-  const { treeAreaWidth } = model
+  const { effectiveTreeAreaWidth } = model
   return (
-    <div style={{ overflow: 'hidden', flexShrink: 0, width: treeAreaWidth }}>
+    <div
+      style={{
+        overflow: 'hidden',
+        flexShrink: 0,
+        width: effectiveTreeAreaWidth,
+      }}
+    >
       <TreeCanvas model={model} />
     </div>
   )

package/src/components/tree/TreeRuler.tsx

@@ -13,13 +13,17 @@ import type { MsaViewModel } from '../../model.ts'
 // scale bar: without one the branch lengths are drawn to a scale nothing
 // states.
 const TreeRuler = observer(({ model }: { model: MsaViewModel }) => {
-  const { treeAreaWidth, marginLeft, treeScaleBar: bar } = model
+  const { effectiveTreeAreaWidth, marginLeft, treeScaleBar: bar } = model
   const theme = useTheme()
 
   return (
-    <div style={{ flexShrink: 0, width: treeAreaWidth }}>
+    <div style={{ flexShrink: 0, width: effectiveTreeAreaWidth }}>
       {bar ? (
-        <svg width={treeAreaWidth} height={h} style={{ display: 'block' }}>
+        <svg
+          width={effectiveTreeAreaWidth}
+          height={h}
+          style={{ display: 'block' }}
+        >
           <ScaleBarSVG
             bar={bar}
             marginLeft={marginLeft}

package/src/components/tree/cladeBrackets.ts

@@ -1,6 +1,7 @@
+import { labelFitFontSize } from '../../constants.ts'
 import { measureTextCanvas } from '../../measureTextCanvas.ts'
 
-import type { ResolvedClade } from '../../types.ts'
+import type { Clade, ResolvedClade } from '../../types.ts'
 
 // The bar of the bracket mark and the space around it, in px.
 export const bracketBarWidth = 3
@@ -11,7 +12,7 @@ export const bracketGap = 4
 export const maxCladeGutterWidth = 140
 
 /** whether a clade draws in the gutter: a bracket, or a highlight with a label */
-export function cladeInGutter(clade: ResolvedClade) {
+export function cladeInGutter(clade: Pick<Clade, 'mark' | 'label'>) {
   return (
     clade.mark === 'bracket' || (clade.mark === 'highlight' && !!clade.label)
   )
@@ -35,7 +36,7 @@ export function cladeLabelHorizontal(
 }
 
 /** the px between the left edge of the gutter and the label's own column */
-export function cladeLabelOffset(clade: ResolvedClade) {
+export function cladeLabelOffset(clade: Pick<Clade, 'mark'>) {
   return clade.mark === 'bracket'
     ? bracketGap + bracketBarWidth + bracketGap
     : bracketGap
@@ -43,27 +44,19 @@ export function cladeLabelOffset(clade: ResolvedClade) {
 
 /**
  * The gutter the bracket mark needs at the right of the tree area: the bar plus
- * the widest label at the tree font, zero where no clade draws there, and at
- * most maxCladeGutterWidth.
+ * the widest label read across at labelFitFontSize, zero where no clade draws
+ * there, and at most maxCladeGutterWidth. The records size it, so a zoom, a
+ * collapse or a focus leaves it as it is, and a renderer clips a label that
+ * outgrows it.
  */
-export function cladeGutterWidth({
-  clades,
-  rowHeight,
-  fontSize,
-}: {
-  clades: ResolvedClade[]
-  rowHeight: number
-  fontSize: number
-}) {
+export function cladeGutterWidth(clades: Pick<Clade, 'mark' | 'label'>[]) {
   let widest = 0
   for (const clade of clades) {
     if (!cladeInGutter(clade)) {
       continue
     }
     const text = clade.label
-      ? cladeLabelHorizontal(clade, rowHeight, fontSize)
-        ? measureTextCanvas(clade.label, fontSize)
-        : fontSize
+      ? measureTextCanvas(clade.label, labelFitFontSize)
       : 0
     widest = Math.max(widest, cladeLabelOffset(clade) + text + bracketGap)
   }

package/src/components/tree/clickMap.ts

@@ -2,6 +2,8 @@ import Flatbush from 'flatbush'
 
 export interface ClickEntry {
   name: string
+  /** the text a tip label draws, which may be cut short */
+  label?: string
   id: string
   branch?: boolean
   minX: number

package/src/components/tree/ellipsize.ts

@@ -0,0 +1,24 @@
+const ellipsis = '…'
+
+/**
+ * the longest prefix of `text`, plus an ellipsis, that measures at most
+ * `room` px
+ */
+export function ellipsize(
+  measure: (text: string) => number,
+  text: string,
+  room: number,
+) {
+  const width = measure(text)
+  if (width <= room) {
+    return { text, width }
+  }
+  for (let n = Math.floor((text.length * room) / width); n > 0; n--) {
+    const truncated = text.slice(0, n).trimEnd() + ellipsis
+    const truncatedWidth = measure(truncated)
+    if (truncatedWidth <= room) {
+      return { text: truncated, width: truncatedWidth }
+    }
+  }
+  return { text: '', width: 0 }
+}

package/src/components/tree/renderTreeCanvas.ts

@@ -8,6 +8,7 @@ import {
 } from '../msa/renderHighlights.ts'
 import { referenceColor } from '../overlayColors.ts'
 import { bracketBarWidth, bracketGap } from './cladeBrackets.ts'
+import { ellipsize } from './ellipsize.ts'
 
 import type { HierarchyNode } from '../../hierarchy.ts'
 import type { MsaViewModel } from '../../model.ts'
@@ -382,9 +383,8 @@ function renderTreeLabels({
     treeAreaWidthMinusMargin,
     marginLeft,
     noTree,
-    labelWidthMap,
-    labelWidthScale,
   } = model
+  const treeDrawn = drawTree && !noTree
   const by = blockSizeYOverride ?? blockSize
   // labels only exist for leaves, which are laid out top to bottom, so take the
   // same slice the MSA renderer uses instead of walking every tip per block
@@ -412,22 +412,22 @@ function renderTreeLabels({
       // fontSize/4 below the row center, the baseline the alignment letters
       // share
       const yp = y + fontSize / 4
-      let xp = 0
-      if (!noTree) {
-        xp = getNodeX(node, showBranchLen, tipX, maxDepthToLeaf) ?? 0
-      }
-
-      const measured = labelWidthMap.get(name)
-      const width =
-        measured === undefined
-          ? ctx.measureText(displayName).width
-          : measured * labelWidthScale
+      const xp = treeDrawn
+        ? (getNodeX(node, showBranchLen, tipX, maxDepthToLeaf) ?? 0)
+        : 0
+      const fit = (room: number) =>
+        ellipsize(text => ctx.measureText(text).width, displayName, room)
+      // a label cut to nothing still gets a click box the font size wide
+      const boxWidth = (width: number) => Math.max(width, fontSize)
 
       ctx.fillStyle = tipLabelColors?.get(name) ?? theme.palette.text.primary
       if (labelsAlignRight) {
         const smallPadding = 2
         const offset = treeAreaWidthMinusMargin - smallPadding
-        if (drawTree && !noTree) {
+        const { text, width } = fit(
+          offset - (treeDrawn ? xp + radius + 2 + smallPadding : 0),
+        )
+        if (treeDrawn) {
           // beginPath is load-bearing: without it every leader line re-strokes
           // all the ones before it, which is quadratic in the label count
           ctx.beginPath()
@@ -435,28 +435,31 @@ function renderTreeLabels({
           ctx.lineTo(offset - smallPadding - width, y)
           ctx.stroke()
         }
-        ctx.fillText(displayName, offset, yp)
+        ctx.fillText(text, offset, yp)
         // everything here is drawn under translate(marginLeft), so the click box
         // has to be the text's own right edge in that same space -- taking
-        // treeAreaWidth instead put the target smallPadding off the label
+        // the tree area width instead put the target smallPadding off the label
         const labelRight = offset + marginLeft
         clickMap?.insert({
-          minX: labelRight - width,
+          minX: labelRight - boxWidth(width),
           maxX: labelRight,
           minY: yp - emHeight,
           maxY: yp,
           name,
+          label: displayName,
           id,
         })
       } else {
-        const labelX = noTree ? 2 : xp + d
-        ctx.fillText(displayName, labelX, yp)
+        const labelX = treeDrawn ? xp + d : 2
+        const { text, width } = fit(treeAreaWidthMinusMargin - labelX)
+        ctx.fillText(text, labelX, yp)
         clickMap?.insert({
           minX: labelX + marginLeft,
-          maxX: labelX + width + marginLeft,
+          maxX: labelX + boxWidth(width) + marginLeft,
           minY: yp - emHeight,
           maxY: yp,
           name,
+          label: displayName,
           id,
         })
       }
@@ -502,12 +505,12 @@ function renderCladeHighlights({
     hierarchy,
     showBranchLenEffective: showBranchLen,
     rowHeight,
-    treeAreaWidth,
+    effectiveTreeAreaWidth,
     marginLeft,
     blockSize,
   } = model
   const by = blockSizeYOverride ?? blockSize
-  const right = treeAreaWidth - marginLeft
+  const right = effectiveTreeAreaWidth - marginLeft
   for (const { rows, color, mark } of resolvedClades) {
     if (mark !== 'highlight') {
       continue
@@ -548,7 +551,7 @@ function renderCladeBrackets({
     resolvedClades,
     cladeGutterWidth,
     rowHeight,
-    treeAreaWidth,
+    effectiveTreeAreaWidth,
     marginLeft,
     blockSize,
   } = model
@@ -557,7 +560,7 @@ function renderCladeBrackets({
   }
   const by = blockSizeYOverride ?? blockSize
   const x =
-    treeAreaWidth -
+    effectiveTreeAreaWidth -
     marginLeft -
     cladeGutterWidth +
     bracketGap +
@@ -600,7 +603,7 @@ function renderRowHighlights({
     rowTints,
     referenceRowIndex,
     rowHeight,
-    treeAreaWidth,
+    effectiveTreeAreaWidth,
     marginLeft,
     blockSize,
   } = model
@@ -608,7 +611,12 @@ function renderRowHighlights({
   const pad = blockPad(model)
   const placed: LabelBox[] = []
   const fillRow = (index: number) => {
-    ctx.fillRect(-marginLeft, index * rowHeight, treeAreaWidth, rowHeight)
+    ctx.fillRect(
+      -marginLeft,
+      index * rowHeight,
+      effectiveTreeAreaWidth,
+      rowHeight,
+    )
   }
   if (rowTints) {
     const top = Math.max(0, Math.floor((offsetY - pad) / rowHeight))
@@ -647,8 +655,8 @@ function renderRowHighlights({
         label,
         x: -marginLeft + 2,
         y: first * rowHeight,
-        spanWidth: treeAreaWidth,
-        bounds: { min: -marginLeft, max: treeAreaWidth - marginLeft },
+        spanWidth: effectiveTreeAreaWidth,
+        bounds: { min: -marginLeft, max: effectiveTreeAreaWidth - marginLeft },
         placed,
       })
     }
@@ -698,14 +706,18 @@ export function renderTreeCanvas({
 
   // 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
-  const { maxBranchLength, maxDepthToLeaf, showBranchLenEffective, treeWidth } =
-    model
+  const {
+    maxBranchLength,
+    maxDepthToLeaf,
+    showBranchLenEffective,
+    effectiveTreeWidth,
+  } = model
   // pixel x of the tips. A phylogram scales branch lengths so the longest
   // root-to-tip path lands at maxBranchLength; a cladogram ignores lengths and
   // spreads topological depth across the whole tree area instead. Reusing
   // maxBranchLength for the cladogram would pin every node to x=0 for a tree
   // with no branch lengths -- which is exactly what forces cladogram mode.
-  const tipX = showBranchLenEffective ? maxBranchLength : treeWidth
+  const tipX = showBranchLenEffective ? maxBranchLength : effectiveTreeWidth
   // built once for all three passes: each of them asks about a different node on
   // every block of every redraw, and `collapsed` is a list
   const collapsedSet = new Set(model.collapsed)

package/src/components/tree/renderTreeMouseover.ts

@@ -11,7 +11,7 @@ export function renderTreeMouseover({
 }) {
   const {
     rowHeight,
-    treeAreaWidth: width,
+    effectiveTreeAreaWidth: width,
     height,
     scrollY,
     mouseRow,

package/src/constants.ts

@@ -55,9 +55,14 @@ export const minLetterColWidth = 5
 // sub-row band or a features panel over small rows
 export const minFeatureLabelHeight = 9
 
-// Tree labels are measured once at this size and scaled to the current font
-// size, so a vertical zoom never re-measures the tree.
-export const labelReferenceFontSize = 16
+export function fontSizeFor(rowHeight: number) {
+  return Math.min(Math.max(6, rowHeight - 3), 18)
+}
+
+// The fitted tree area measures the tip labels and the clade labels at the
+// font a default row draws, so a vertical zoom leaves the alignment in place.
+// A larger font ellipsizes the labels.
+export const labelFitFontSize = fontSizeFor(defaultRowHeight)
 
 // Zoom limits, px per cell. maxCellSize caps both smooth zoom and the stepwise
 // zoom-in buttons (which otherwise grow unbounded). minColWidth/minRowHeight are
@@ -74,8 +79,14 @@ export const defaultShowColumnStats = true
 // Tree model defaults
 export const defaultDrawLabels = true
 export const defaultLabelsAlignRight = false
-export const defaultTreeAreaWidth = 400
-export const defaultTreeWidth = 300
+// The fitted tree area gives the tree pxPerTreeDepth per level of its depth,
+// between minTreeWidth and maxFitTreeWidth, beside the widest label, and takes
+// at most maxTreeAreaShare of a view with an alignment. Where the share binds,
+// the tree keeps minTreeWidth and the labels ellipsize.
+export const minTreeWidth = 70
+export const maxFitTreeWidth = 160
+export const pxPerTreeDepth = 10
+export const maxTreeAreaShare = 0.3
 export const defaultShowBranchLen = true
 export const treeOrders = [
   'branchLength',
@@ -93,7 +104,7 @@ export const defaultOverviewHeight = 120
 // Neighbor joining does not run above this many rows. The distance matrix is
 // O(n^2*L) and the join loop O(n^3), both on the main thread with no progress
 // and no cancel: 400 rows measured 1.5s, 800 rows 10s, and 1600 would be about
-// seventy. See agent-docs/ideas/neighbor-joining-scaling.md.
+// seventy. See agent-docs/reference/neighbor-joining-scaling.md.
 export const maxNeighborJoiningRows = 500
 
 // The opacity a `rowTint` encoding draws its scale's color at, so the residues

package/src/measureTextCanvas.ts

@@ -1,7 +1,7 @@
 import { setFontSize } from './setFontSize.ts'
 
-// Cached across calls: labelWidthMap measures every leaf label on every layout,
-// and both createElement and getContext are far more expensive than measureText.
+// Cached across calls, since both createElement and getContext are far more
+// expensive than measureText.
 // `null` records that this environment has no 2d context, so the lookup is not
 // retried on every label.
 let ctxHandle: CanvasRenderingContext2D | null | undefined

package/src/model/treeModel.ts

@@ -10,8 +10,6 @@ import {
   defaultShowBranchLen,
   defaultTreeOrder,
   defaultShowTreeOverview,
-  defaultTreeAreaWidth,
-  defaultTreeWidth,
   treeOrders,
 } from '../constants.ts'
 import { stripDefault } from '../stripDefault.ts'
@@ -36,16 +34,19 @@ export function TreeModelF() {
 
       /**
        * #property
-       * width of the area the tree is drawn in, px
+       * width of the area the tree and its labels draw in, px. Undefined fits
+       * the area to the labels and the tree; `effectiveTreeAreaWidth` reads
+       * the width either way
        */
-      treeAreaWidth: stripDefault(types.number, defaultTreeAreaWidth),
+      treeAreaWidth: types.maybe(types.number),
 
       /**
        * #property
-       * width of the tree within the treeArea, px. automatically synced to
-       * fit within treeAreaWidth
+       * width of the tree within the tree area, px. Undefined gives the tree
+       * the area less the labels; `effectiveTreeWidth` reads the width either
+       * way
        */
-      treeWidth: stripDefault(types.number, defaultTreeWidth),
+      treeWidth: types.maybe(types.number),
 
       /**
        * #property
@@ -97,29 +98,24 @@ export function TreeModelF() {
        * height of the tree overview band, px
        */
       overviewHeight: stripDefault(types.number, defaultOverviewHeight),
-
-      /**
-       * #property
-       * auto-size treeAreaWidth to fit the row labels (plus the tree, if drawn)
-       * 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: stripDefault(types.boolean, false),
     })
     .actions(self => ({
       /**
        * #action
-       * set tree area width (px)
+       * set the tree area width, px, or undefined to fit it to the labels and
+       * the tree. The tree then fills the area less the labels
        */
-      setTreeAreaWidth(n: number) {
-        self.treeAreaWidth = Math.round(n)
+      setTreeAreaWidth(n: number | undefined) {
+        self.treeAreaWidth = n === undefined ? undefined : Math.round(n)
+        self.treeWidth = undefined
       },
       /**
        * #action
-       * set tree width (px)
+       * set the tree width, px, or undefined to fill the tree area less the
+       * labels
        */
-      setTreeWidth(n: number) {
-        self.treeWidth = Math.round(n)
+      setTreeWidth(n: number | undefined) {
+        self.treeWidth = n === undefined ? undefined : Math.round(n)
       },
 
       /**
@@ -134,12 +130,6 @@ export function TreeModelF() {
       setDrawTree(arg: boolean) {
         self.drawTree = arg
       },
-      /**
-       * #action
-       */
-      setAutoTreeAreaWidth(arg: boolean) {
-        self.autoTreeAreaWidth = arg
-      },
 
       /**
        * #action