react-msaview 8.4.1 → 9.0.0

package/src/model.ts

@@ -56,15 +56,19 @@ import {
   defaultShowDomainLegend,
   defaultShowDomains,
   defaultSubFeatureRows,
-  defaultTreeWidth,
-  labelReferenceFontSize,
+  fontSizeFor,
+  labelFitFontSize,
   maxCellSize,
+  maxFitTreeWidth,
+  maxTreeAreaShare,
   maxInlineSnapshotBytes as defaultMaxInlineSnapshotBytes,
   maxNeighborJoiningRows,
   minColWidth,
   minLetterColWidth,
   minLetterRowHeight,
   minRowHeight,
+  minTreeWidth,
+  pxPerTreeDepth,
   rowPanelHeaderHeight,
   rowTintAlpha,
   scrollZoomAxes,
@@ -95,7 +99,6 @@ import {
   sort,
   sum as hierarchySum,
 } from './hierarchy.ts'
-import { measureTextCanvas } from './measureTextCanvas.ts'
 import { DataModelF } from './model/DataModel.ts'
 import { DialogQueueSessionMixin } from './model/DialogQueue.ts'
 import { MSAModelF } from './model/msaModel.ts'
@@ -114,6 +117,7 @@ import { resolveScale } from './scales.ts'
 import { buildSeqPosIndex } from './seqPosToGlobalCol.ts'
 import { maxBitsFor } from './sequenceLogo.ts'
 import { stripDefault } from './stripDefault.ts'
+import { treeTips, widestLabel } from './tipLabels.ts'
 import {
   computeRowInsertions,
   dropBlanks,
@@ -528,7 +532,6 @@ export const preservedOnReset = new Set([
   'drawNodeLabels',
   'showTreeOverview',
   'overviewHeight',
-  'autoTreeAreaWidth',
   'turnedOffTracks',
   'trackHeights',
   'hideGaps',
@@ -1804,10 +1807,10 @@ function stateModelFactory({
        * the row table: extra fields per row, keyed by row name, which the
        * `encodings` channels read. It is stored as the JSON string
        * `data.treeMetadata`, the name that travels in existing links, so the
-       * inline size limit and `treeMetadataFilehandle` cover it. labelWidthMap
-       * reads it on every layout, so a malformed user-supplied file returns {}
-       * instead of throwing out of rendering, and every field is a string by
-       * the time a scale sorts it.
+       * inline size limit and `treeMetadataFilehandle` cover it. The tree area
+       * fit reads it on every layout, so a malformed user-supplied file
+       * returns {} instead of throwing out of rendering, and every field is a
+       * string by the time a scale sorts it.
        */
       get rowData(): Record<string, Record<string, string> | undefined> {
         const text = self.data.treeMetadata
@@ -1938,11 +1941,107 @@ function stateModelFactory({
        * where no clade draws a bar or a label.
        */
       get cladeGutterWidth() {
-        return cladeGutterWidth({
-          clades: this.resolvedClades,
-          rowHeight: self.rowHeight,
-          fontSize: this.fontSize,
-        })
+        return cladeGutterWidth(self.clades)
+      },
+      /**
+       * #getter
+       * whether a tree draws beside the labels: false for a file with no
+       * tree, and with drawTree off
+       */
+      get treeDrawn() {
+        return self.drawTree && !this.noTree
+      },
+      /**
+       * #getter
+       * the leaf names of the whole tree and its depth in levels. The fit
+       * reads these, so a collapse or a focus leaves the tree area as it is
+       */
+      get treeTips() {
+        return treeTips(this.tree)
+      },
+      /**
+       * #getter
+       * the widest tip label at labelFitFontSize, measured whether or not a
+       * zoom hides the labels
+       */
+      get maxTipLabelWidth() {
+        return widestLabel(
+          this.treeTips.names.map(name => this.rowDataOf(name)?.genome || name),
+          labelFitFontSize,
+        )
+      },
+      /**
+       * #getter
+       * the px the tip labels take across the tree area: the widest label at
+       * labelFitFontSize and the gaps either side of it, or 0 with drawLabels
+       * off
+       */
+      get labelColumnWidth() {
+        return self.drawLabels
+          ? this.maxTipLabelWidth + (this.treeDrawn ? 10 : 6)
+          : 0
+      },
+      /**
+       * #getter
+       * the tree area width while treeAreaWidth is undefined: the label column
+       * beside a tree that widens with its depth, up to maxTreeAreaShare of the
+       * view, or the room the row panels leave where there is no alignment.
+       * Where that binds, the tree keeps minTreeWidth and the renderer
+       * ellipsizes the labels
+       */
+      get fittedTreeAreaWidth() {
+        const chrome = self.marginLeft + this.cladeGutterWidth
+        const tree = this.treeDrawn
+          ? (self.treeWidth ??
+            clamp(
+              this.treeTips.depth * pxPerTreeDepth,
+              minTreeWidth,
+              maxFitTreeWidth,
+            ))
+          : 0
+        const fit = chrome + tree + this.labelColumnWidth
+        const room = self.viewInitialized
+          ? this.numColumns > 0
+            ? self.width * maxTreeAreaShare
+            : self.width - this.rowPanelsWidth - self.resizeHandleWidth
+          : Infinity
+        const cap = Math.max(room, chrome + Math.min(tree, minTreeWidth))
+        return Math.ceil(Math.min(fit, cap))
+      },
+      /**
+       * #getter
+       * the width of the area the tree and its labels draw in, px:
+       * treeAreaWidth where set, the fit otherwise
+       */
+      get effectiveTreeAreaWidth() {
+        return self.treeAreaWidth ?? this.fittedTreeAreaWidth
+      },
+      /**
+       * #getter
+       * the width of the tree, px: treeWidth where set, otherwise the tree
+       * area less the label column, which a zoom hiding the labels gives to
+       * the tree
+       */
+      get effectiveTreeWidth() {
+        const labels = this.showTreeText ? this.labelColumnWidth : 0
+        return (
+          self.treeWidth ??
+          Math.max(
+            minTreeWidth,
+            Math.floor(
+              this.effectiveTreeAreaWidth -
+                self.marginLeft -
+                this.cladeGutterWidth -
+                labels,
+            ),
+          )
+        )
+      },
+      /**
+       * #getter
+       */
+      get showTreeText() {
+        return self.drawLabels && self.rowHeight >= minLetterRowHeight
       },
       /**
        * #getter
@@ -2125,7 +2224,7 @@ function stateModelFactory({
       get msaAreaWidth() {
         return (
           self.width -
-          self.treeAreaWidth -
+          this.effectiveTreeAreaWidth -
           this.rowPanelsWidth -
           self.resizeHandleWidth
         )
@@ -2137,7 +2236,9 @@ function stateModelFactory({
        * margin and the bracket gutter
        */
       get treeAreaWidthMinusMargin() {
-        return self.treeAreaWidth - self.marginLeft - this.cladeGutterWidth
+        return (
+          this.effectiveTreeAreaWidth - self.marginLeft - this.cladeGutterWidth
+        )
       },
       /**
        * #getter
@@ -2282,7 +2383,7 @@ function stateModelFactory({
        * #getter
        */
       get fontSize() {
-        return Math.min(Math.max(6, self.rowHeight - 3), 18)
+        return fontSizeFor(self.rowHeight)
       },
       /**
        * #getter
@@ -2388,17 +2489,18 @@ function stateModelFactory({
       /**
        * #getter
        * `root` laid out on new nodes in row and branch-length units, read in
-       * pixels through `rowHeight` and `treeWidth`. A zoom leaves it and every
-       * node in it as they are, and an observer reading a node's `x` or `len`
-       * observes the size it scales by.
+       * pixels through `rowHeight` and `effectiveTreeWidth`. A zoom leaves it
+       * and every node in it as they are, and an observer reading a node's `x`
+       * or `len` observes the size it scales by.
        */
       get treeLayout() {
+        const treeWidth = () => this.effectiveTreeWidth
         return layoutTree(this.root, {
           get rowHeight() {
             return self.rowHeight
           },
           get treeWidth() {
-            return self.treeWidth
+            return treeWidth()
           },
         })
       },
@@ -2436,11 +2538,11 @@ function stateModelFactory({
 
       /**
        * #getter
-       * x-position of the farthest tip in a phylogram, px: treeWidth, or 0 for
-       * a tree with no branch lengths (drawn as a cladogram)
+       * x-position of the farthest tip in a phylogram, px: effectiveTreeWidth,
+       * or 0 for a tree with no branch lengths (drawn as a cladogram)
        */
       get maxBranchLength() {
-        return this.rootToTipLength ? self.treeWidth : 0
+        return this.rootToTipLength ? this.effectiveTreeWidth : 0
       },
 
       /**
@@ -2450,7 +2552,9 @@ function stateModelFactory({
        */
       get pxPerBranchLength() {
         const max = this.rootToTipLength
-        return this.showBranchLenEffective && max ? self.treeWidth / max : 0
+        return this.showBranchLenEffective && max
+          ? this.effectiveTreeWidth / max
+          : 0
       },
 
       /**
@@ -2497,12 +2601,6 @@ function stateModelFactory({
           self.colWidth > self.rowHeight / 2
         )
       },
-      /**
-       * #getter
-       */
-      get showTreeText() {
-        return self.drawLabels && self.rowHeight >= minLetterRowHeight
-      },
     }))
     .views(self => {
       // a spec is a frozen value, so it keys its computed until setColumnTracks
@@ -2639,53 +2737,6 @@ function stateModelFactory({
       }
     })
     .views(self => ({
-      /**
-       * #getter
-       */
-      get labelWidthMap() {
-        const { showTreeText, leaves } = self
-        // gated on the renderer's label condition, so hidden labels reserve no
-        // gutter. Measured once at a reference size and scaled by
-        // labelWidthScale: re-measuring per vertical-zoom frame cost ~200ms on a
-        // 50k-leaf tree
-        return showTreeText
-          ? new Map(
-              leaves.map(node => {
-                const { name } = node.data
-                // `||`, matching renderTreeLabels: an empty genome falls back
-                // to the row name
-                const displayName = self.rowDataOf(name)?.genome || name
-                return [
-                  name,
-                  measureTextCanvas(displayName, labelReferenceFontSize),
-                ] as const
-              }),
-            )
-          : new Map<string, number>()
-      },
-
-      /**
-       * #getter
-       * factor turning a labelWidthMap entry into its width at the current
-       * font size
-       */
-      get labelWidthScale() {
-        return self.fontSize / labelReferenceFontSize
-      },
-
-      get labelsWidth() {
-        // a loop, not Math.max(...): spreading passes one argument per leaf,
-        // and the ~125k argument limit throws RangeError on the 230k-tip COVID
-        // tree
-        let max = 0
-        for (const width of this.labelWidthMap.values()) {
-          if (width > max) {
-            max = width
-          }
-        }
-        return max * this.labelWidthScale
-      },
-
       /**
        * #getter
        */
@@ -3180,7 +3231,7 @@ function stateModelFactory({
       get treeScaleBar() {
         return scaleBarLength(
           self.pxPerBranchLength,
-          self.treeAreaWidth - self.marginLeft * 2,
+          self.effectiveTreeAreaWidth - self.marginLeft * 2,
         )
       },
       /**
@@ -4942,52 +4993,6 @@ function stateModelFactory({
             self.columns
           }),
         )
-
-        // with autoTreeAreaWidth and no tree drawn, size the tree area to the
-        // labels. Gated on noTree/!drawTree so it does not loop with the
-        // treeWidth autorun below
-        addDisposer(
-          self,
-          autorun(() => {
-            if (
-              self.autoTreeAreaWidth &&
-              (self.noTree || !self.drawTree) &&
-              self.labelsWidth
-            ) {
-              self.setTreeAreaWidth(
-                self.labelsWidth + self.marginLeft + 12 + self.cladeGutterWidth,
-              )
-            }
-          }),
-        )
-
-        // treeWidth follows the tree area less the labels. A non-default
-        // snapshot treeWidth (jbrowse-plugin-msaview opens at 100 in a 200px
-        // area) is kept until the tree area changes. Not a getter, because
-        // labelsWidth is measured off leaves laid out against treeWidth.
-        let pinnedAreaWidth =
-          self.treeWidth === defaultTreeWidth ? undefined : self.treeAreaWidth
-        addDisposer(
-          self,
-          autorun(() => {
-            const areaWidth = self.treeAreaWidth
-            const labelsWidth = self.labelsWidth
-            if (pinnedAreaWidth === areaWidth) {
-              return
-            }
-            pinnedAreaWidth = undefined
-            self.setTreeWidth(
-              Math.max(
-                50,
-                areaWidth -
-                  labelsWidth -
-                  10 -
-                  self.marginLeft -
-                  self.cladeGutterWidth,
-              ),
-            )
-          }),
-        )
       },
     }))
     .postProcessSnapshot(({ data, columnTracks, ...rest }) => ({

package/src/renderToSvg.tsx

@@ -90,7 +90,7 @@ function getLayout(model: MsaViewModel, opts: ExportSvgOptions): Layout {
     scrollY,
     totalWidth,
     totalHeight,
-    treeAreaWidth,
+    effectiveTreeAreaWidth,
     rowPanelsWidth,
     rowPanelsHeaderHeight,
     totalTrackAreaHeight,
@@ -117,7 +117,7 @@ function getLayout(model: MsaViewModel, opts: ExportSvgOptions): Layout {
     rowPanelsHeaderHeight,
     treeOverviewHeight + (treeScaleBar ? treeScaleBarHeight : 0),
   )
-  const gutterWidth = treeAreaWidth + rowPanelsWidth
+  const gutterWidth = effectiveTreeAreaWidth + rowPanelsWidth
 
   // width stays content-only; the legend occupies an extra column added at the
   // svg root in MsaSvg. The viewport export takes the alignment canvas's own
@@ -195,7 +195,7 @@ function MsaSvg({
   layers: LayerMap
 }) {
   const { width, trackHeight, includeMinimap, legendWidth, topHeight } = layout
-  const { treeAreaWidth, rowPanelsWidth } = model
+  const { effectiveTreeAreaWidth, rowPanelsWidth } = model
   const totalWidth = width + legendWidth
   const legendTop = topHeight
   // a short alignment with many legend entries has a key taller than its rows,
@@ -241,7 +241,7 @@ function MsaSvg({
           {includeMinimap ? (
             <g
               id="minimap-panel"
-              transform={`translate(${treeAreaWidth + rowPanelsWidth} 0)`}
+              transform={`translate(${effectiveTreeAreaWidth + rowPanelsWidth} 0)`}
             >
               <MinimapSVG model={model} theme={theme} />
             </g>
@@ -288,20 +288,20 @@ function TreeOverviewSVG({
   Context: typeof ContextType
   layers: LayerMap
 }) {
-  const { treeAreaWidth, overviewHeight, id } = model
-  const ctx = new Context(treeAreaWidth, overviewHeight)
+  const { effectiveTreeAreaWidth, overviewHeight, id } = model
+  const ctx = new Context(effectiveTreeAreaWidth, overviewHeight)
   renderTreeOverview({
     model,
     ctx,
     theme,
-    width: treeAreaWidth,
+    width: effectiveTreeAreaWidth,
     height: overviewHeight,
   })
   return (
     <ClipGroup
       panelId="tree-overview"
       clipId={`tree-overview-${id}`}
-      width={treeAreaWidth}
+      width={effectiveTreeAreaWidth}
       height={overviewHeight}
       ctx={ctx}
       layers={layers}
@@ -349,14 +349,14 @@ function RowPanelHeadersSVG({
   theme: Theme
   bandHeight: number
 }) {
-  const { resolvedRowPanels, treeAreaWidth, fontSize } = model
+  const { resolvedRowPanels, effectiveTreeAreaWidth, fontSize } = model
   const y = bandHeight - 4
   return resolvedRowPanels.length === 0 ? null : (
     <g id="rowpanel-headers">
       {resolvedRowPanels.map(panel => {
         const across = headerRunsAcross(panel.width)
         const size = across ? fontSize : Math.min(fontSize, panel.width)
-        const center = treeAreaWidth + panel.offsetX + panel.width / 2
+        const center = effectiveTreeAreaWidth + panel.offsetX + panel.width / 2
         const x = across ? center : center + size / 3
         const room = across ? panel.width : y - LEGEND_PAD
         const maxChars = Math.floor(room / (size * CHAR_WIDTH))
@@ -409,13 +409,13 @@ function CladeLabelsSVG({
     resolvedClades,
     cladeGutterWidth,
     rowHeight,
-    treeAreaWidth,
+    effectiveTreeAreaWidth,
     fontSize,
   } = model
   if (cladeGutterWidth === 0) {
     return null
   }
-  const gutterLeft = treeAreaWidth - cladeGutterWidth
+  const gutterLeft = effectiveTreeAreaWidth - cladeGutterWidth
   return (
     <g id="clade-labels">
       {resolvedClades.map((clade, index) => {
@@ -427,7 +427,9 @@ function CladeLabelsSVG({
         const top = rows[0] * rowHeight - offsetY
         const height = cladeHeight(clade, rowHeight)
         const horizontal = cladeLabelHorizontal(clade, rowHeight, fontSize)
-        const room = horizontal ? treeAreaWidth - left - bracketGap : height
+        const room = horizontal
+          ? effectiveTreeAreaWidth - left - bracketGap
+          : height
         const x = horizontal ? left : left + fontSize
         const y = horizontal ? top + height / 2 + fontSize / 3 : top + height
         return (
@@ -520,9 +522,9 @@ interface LayerProps {
 
 function CoreRendering({ model, theme, layout, Context, layers }: LayerProps) {
   const { contentHeight, offsetX, offsetY, msaAreaWidth } = layout
-  const { treeAreaWidth, rowPanelsWidth, id } = model
+  const { effectiveTreeAreaWidth, rowPanelsWidth, id } = model
 
-  const treeCtx = new Context(treeAreaWidth, contentHeight)
+  const treeCtx = new Context(effectiveTreeAreaWidth, contentHeight)
   renderTreeCanvas({
     model,
     theme,
@@ -588,7 +590,7 @@ function CoreRendering({ model, theme, layout, Context, layers }: LayerProps) {
       <ClipGroup
         panelId="tree-panel"
         clipId={`tree-${id}`}
-        width={treeAreaWidth}
+        width={effectiveTreeAreaWidth}
         height={contentHeight}
         ctx={treeCtx}
         layers={layers}
@@ -600,7 +602,7 @@ function CoreRendering({ model, theme, layout, Context, layers }: LayerProps) {
           clipId={`rowpanels-${id}`}
           width={rowPanelsWidth}
           height={contentHeight}
-          transform={`translate(${treeAreaWidth} 0)`}
+          transform={`translate(${effectiveTreeAreaWidth} 0)`}
           ctx={rowPanelsCtx}
           layers={layers}
         />
@@ -610,7 +612,7 @@ function CoreRendering({ model, theme, layout, Context, layers }: LayerProps) {
         clipId={`msa-${id}`}
         width={msaAreaWidth}
         height={contentHeight}
-        transform={`translate(${treeAreaWidth + rowPanelsWidth} 0)`}
+        transform={`translate(${effectiveTreeAreaWidth + rowPanelsWidth} 0)`}
         ctx={msaCtx}
         layers={layers}
         underlay={raster}
@@ -677,7 +679,7 @@ function rasterBackground({
 
 function TrackRendering({ model, theme, layout, Context, layers }: LayerProps) {
   const { trackHeight, offsetX, msaAreaWidth } = layout
-  const { treeAreaWidth, rowPanelsWidth, id } = model
+  const { effectiveTreeAreaWidth, rowPanelsWidth, id } = model
 
   const ctx = new Context(msaAreaWidth, trackHeight)
   renderAllTracks({
@@ -692,7 +694,7 @@ function TrackRendering({ model, theme, layout, Context, layers }: LayerProps) {
   return (
     <>
       <TrackLabelsSVG model={model} theme={theme} />
-      <g transform={`translate(${treeAreaWidth + rowPanelsWidth} 0)`}>
+      <g transform={`translate(${effectiveTreeAreaWidth + rowPanelsWidth} 0)`}>
         <ClipGroup
           panelId="tracks-panel"
           clipId={`tracks-${id}`}
@@ -716,7 +718,7 @@ function TrackLabelsSVG({
   model: MsaViewModel
   theme: Theme
 }) {
-  const { turnedOnTracks, treeAreaWidth, fontSize, drawLabels } = model
+  const { turnedOnTracks, effectiveTreeAreaWidth, fontSize, drawLabels } = model
   if (!drawLabels) {
     return null
   }
@@ -734,7 +736,7 @@ function TrackLabelsSVG({
         return size < 5 ? null : (
           <text
             key={id}
-            x={treeAreaWidth - 4}
+            x={effectiveTreeAreaWidth - 4}
             y={baseline}
             fontSize={size}
             textAnchor="end"

package/src/tipLabels.ts

@@ -0,0 +1,51 @@
+import { measureTextCanvas } from './measureTextCanvas.ts'
+
+import type { NodeWithIds } from './types.ts'
+
+// A label's width follows its length closely enough that the widest one is
+// among the longest few, so a 230k-tip tree measures this many strings.
+const measuredLabels = 100
+
+/** the leaf names of a tree, and its depth in levels from the root */
+export function treeTips(tree: NodeWithIds) {
+  const names: string[] = []
+  let depth = 0
+  const stack: [NodeWithIds, number][] = [[tree, 0]]
+  for (let entry = stack.pop(); entry; entry = stack.pop()) {
+    const [node, level] = entry
+    const { children } = node
+    if (children.length > 0) {
+      for (const child of children) {
+        stack.push([child, level + 1])
+      }
+    } else {
+      names.push(node.name)
+      depth = Math.max(depth, level)
+    }
+  }
+  return { names, depth }
+}
+
+/** the width of the widest label at `fontSize`, measuring the longest few */
+export function widestLabel(labels: string[], fontSize: number) {
+  const counts: number[] = []
+  for (const label of labels) {
+    counts[label.length] = (counts[label.length] ?? 0) + 1
+  }
+  let shortest = counts.length
+  for (let seen = 0; shortest > 0 && seen < measuredLabels;) {
+    shortest--
+    seen += counts[shortest] ?? 0
+  }
+  let widest = 0
+  let ties = 0
+  for (const label of labels) {
+    if (
+      label.length > shortest ||
+      (label.length === shortest && ties++ < measuredLabels)
+    ) {
+      widest = Math.max(widest, measureTextCanvas(label, fontSize))
+    }
+  }
+  return widest
+}

package/src/version.ts

@@ -1 +1 @@
-export const version = '8.4.1'
+export const version = '9.0.0'