react-msaview-cli 8.4.1 → 9.0.0

package/dist/index.js

@@ -46123,7 +46123,10 @@ var init_legendRows = __esm({
 });
 
 // ../lib/dist/constants.js
-var defaultRowHeight, defaultColWidth, defaultHeight, defaultScrollX, defaultScrollY, defaultCurrentAlignment, defaultShowDomains, defaultShowDomainLegend, defaultHideGaps, defaultAllowedGappyness, defaultSubFeatureRows, subFeatureRowHeight, domainUnderlineHeight, segmentFeatureTypes, segmentShades, defaultDrawMsaLetters, defaultScrollZoom, scrollZoomAxes, defaultScrollZoomAxis, minLetterRowHeight, minLetterColWidth, minFeatureLabelHeight, labelReferenceFontSize, minColWidth, minRowHeight, maxCellSize, defaultBgColor, defaultColorSchemeName, defaultShowColumnStats, defaultDrawLabels, defaultLabelsAlignRight, defaultTreeAreaWidth, defaultTreeWidth, defaultShowBranchLen, treeOrders, defaultTreeOrder, defaultDrawTree, defaultDrawNodeBubbles, defaultDrawNodeLabels, defaultShowTreeOverview, defaultOverviewHeight, maxNeighborJoiningRows, rowTintAlpha, cladeHighlightColor, cladeHighlightAlpha, maxInlineSnapshotBytes, rowPanelHeaderHeight, treeScaleBarHeight, defaultFeaturePanelWidth, msaOverlayZIndex, legendZIndex;
+function fontSizeFor(rowHeight) {
+  return Math.min(Math.max(6, rowHeight - 3), 18);
+}
+var defaultRowHeight, defaultColWidth, defaultHeight, defaultScrollX, defaultScrollY, defaultCurrentAlignment, defaultShowDomains, defaultShowDomainLegend, defaultHideGaps, defaultAllowedGappyness, defaultSubFeatureRows, subFeatureRowHeight, domainUnderlineHeight, segmentFeatureTypes, segmentShades, defaultDrawMsaLetters, defaultScrollZoom, scrollZoomAxes, defaultScrollZoomAxis, minLetterRowHeight, minLetterColWidth, minFeatureLabelHeight, labelFitFontSize, minColWidth, minRowHeight, maxCellSize, defaultBgColor, defaultColorSchemeName, defaultShowColumnStats, defaultDrawLabels, defaultLabelsAlignRight, minTreeWidth, maxFitTreeWidth, pxPerTreeDepth, maxTreeAreaShare, defaultShowBranchLen, treeOrders, defaultTreeOrder, defaultDrawTree, defaultDrawNodeBubbles, defaultDrawNodeLabels, defaultShowTreeOverview, defaultOverviewHeight, maxNeighborJoiningRows, rowTintAlpha, cladeHighlightColor, cladeHighlightAlpha, maxInlineSnapshotBytes, rowPanelHeaderHeight, treeScaleBarHeight, defaultFeaturePanelWidth, msaOverlayZIndex, legendZIndex;
 var init_constants = __esm({
   "../lib/dist/constants.js"() {
     "use strict";
@@ -46156,7 +46159,7 @@ var init_constants = __esm({
     minLetterRowHeight = 8;
     minLetterColWidth = 5;
     minFeatureLabelHeight = 9;
-    labelReferenceFontSize = 16;
+    labelFitFontSize = fontSizeFor(defaultRowHeight);
     minColWidth = 0.2;
     minRowHeight = 1;
     maxCellSize = 80;
@@ -46165,8 +46168,10 @@ var init_constants = __esm({
     defaultShowColumnStats = true;
     defaultDrawLabels = true;
     defaultLabelsAlignRight = false;
-    defaultTreeAreaWidth = 400;
-    defaultTreeWidth = 300;
+    minTreeWidth = 70;
+    maxFitTreeWidth = 160;
+    pxPerTreeDepth = 10;
+    maxTreeAreaShare = 0.3;
     defaultShowBranchLen = true;
     treeOrders = [
       "branchLength",
@@ -47629,13 +47634,13 @@ function cladeLabelHorizontal(clade, rowHeight, fontSize2) {
 function cladeLabelOffset(clade) {
   return clade.mark === "bracket" ? bracketGap + bracketBarWidth + bracketGap : bracketGap;
 }
-function cladeGutterWidth({ clades, rowHeight, fontSize: fontSize2 }) {
+function cladeGutterWidth(clades) {
   let widest = 0;
   for (const clade of clades) {
     if (!cladeInGutter(clade)) {
       continue;
     }
-    const text2 = clade.label ? cladeLabelHorizontal(clade, rowHeight, fontSize2) ? measureTextCanvas(clade.label, fontSize2) : fontSize2 : 0;
+    const text2 = clade.label ? measureTextCanvas(clade.label, labelFitFontSize) : 0;
     widest = Math.max(widest, cladeLabelOffset(clade) + text2 + bracketGap);
   }
   return Math.min(maxCladeGutterWidth, Math.ceil(widest));
@@ -47644,6 +47649,7 @@ var bracketBarWidth, bracketGap, maxCladeGutterWidth;
 var init_cladeBrackets = __esm({
   "../lib/dist/components/tree/cladeBrackets.js"() {
     "use strict";
+    init_constants();
     init_measureTextCanvas();
     bracketBarWidth = 3;
     bracketGap = 4;
@@ -47928,6 +47934,29 @@ var init_hierarchy2 = __esm({
   }
 });
 
+// ../lib/dist/components/tree/ellipsize.js
+function ellipsize(measure, text2, room) {
+  const width3 = measure(text2);
+  if (width3 <= room) {
+    return { text: text2, width: width3 };
+  }
+  for (let n2 = Math.floor(text2.length * room / width3); n2 > 0; n2--) {
+    const truncated = text2.slice(0, n2).trimEnd() + ellipsis;
+    const truncatedWidth = measure(truncated);
+    if (truncatedWidth <= room) {
+      return { text: truncated, width: truncatedWidth };
+    }
+  }
+  return { text: "", width: 0 };
+}
+var ellipsis;
+var init_ellipsize = __esm({
+  "../lib/dist/components/tree/ellipsize.js"() {
+    "use strict";
+    ellipsis = "\u2026";
+  }
+});
+
 // ../lib/dist/components/tree/renderTreeCanvas.js
 function blockPad(model2) {
   return Math.max(model2.rowHeight, highlightLabelHeight);
@@ -48100,7 +48129,8 @@ function renderNodeLabels({ ctx, theme, offsetY, model: model2, tipX, maxDepthTo
   setFontSize(ctx, fontSize2);
 }
 function renderTreeLabels({ theme, model: model2, offsetY, ctx, clickMap, tipX, maxDepthToLeaf, blockSizeYOverride, collapsedSet }) {
-  const { fontSize: fontSize2, showBranchLenEffective: showBranchLen, tipLabelColors, blockSize, labelsAlignRight, drawTree, treeAreaWidthMinusMargin, marginLeft, noTree, labelWidthMap, labelWidthScale } = model2;
+  const { fontSize: fontSize2, showBranchLenEffective: showBranchLen, tipLabelColors, blockSize, labelsAlignRight, drawTree, treeAreaWidthMinusMargin, marginLeft, noTree } = model2;
+  const treeDrawn = drawTree && !noTree;
   const by = blockSizeYOverride ?? blockSize;
   const visibleLeaves = getVisibleLeaves({ model: model2, offsetY, blockSizeY: by });
   const pad2 = blockPad(model2);
@@ -48119,41 +48149,42 @@ function renderTreeLabels({ theme, model: model2, offsetY, ctx, clickMap, tipX,
     const isAnonymousCollapsed = collapsedSet.has(id) && name === id;
     if (!isAnonymousCollapsed && inYBlock(y2, offsetY, by, pad2)) {
       const yp = y2 + fontSize2 / 4;
-      let xp = 0;
-      if (!noTree) {
-        xp = getNodeX(node2, showBranchLen, tipX, maxDepthToLeaf) ?? 0;
-      }
-      const measured = labelWidthMap.get(name);
-      const width3 = measured === void 0 ? ctx.measureText(displayName).width : measured * labelWidthScale;
+      const xp = treeDrawn ? getNodeX(node2, showBranchLen, tipX, maxDepthToLeaf) ?? 0 : 0;
+      const fit = (room) => ellipsize((text2) => ctx.measureText(text2).width, displayName, room);
+      const boxWidth = (width3) => Math.max(width3, fontSize2);
       ctx.fillStyle = tipLabelColors?.get(name) ?? theme.palette.text.primary;
       if (labelsAlignRight) {
         const smallPadding = 2;
         const offset4 = treeAreaWidthMinusMargin - smallPadding;
-        if (drawTree && !noTree) {
+        const { text: text2, width: width3 } = fit(offset4 - (treeDrawn ? xp + radius + 2 + smallPadding : 0));
+        if (treeDrawn) {
           ctx.beginPath();
           ctx.moveTo(xp + radius + 2, y2);
           ctx.lineTo(offset4 - smallPadding - width3, y2);
           ctx.stroke();
         }
-        ctx.fillText(displayName, offset4, yp);
+        ctx.fillText(text2, offset4, yp);
         const labelRight = offset4 + marginLeft;
         clickMap?.insert({
-          minX: labelRight - width3,
+          minX: labelRight - boxWidth(width3),
           maxX: labelRight,
           minY: yp - emHeight,
           maxY: yp,
           name,
+          label: displayName,
           id
         });
       } else {
-        const labelX = noTree ? 2 : xp + d2;
-        ctx.fillText(displayName, labelX, yp);
+        const labelX = treeDrawn ? xp + d2 : 2;
+        const { text: text2, width: width3 } = fit(treeAreaWidthMinusMargin - labelX);
+        ctx.fillText(text2, labelX, yp);
         clickMap?.insert({
           minX: labelX + marginLeft,
-          maxX: labelX + width3 + marginLeft,
+          maxX: labelX + boxWidth(width3) + marginLeft,
           minY: yp - emHeight,
           maxY: yp,
           name,
+          label: displayName,
           id
         });
       }
@@ -48171,9 +48202,9 @@ function firstRow(rowIndices) {
   return min3;
 }
 function renderCladeHighlights({ ctx, model: model2, offsetY, tipX, maxDepthToLeaf, blockSizeYOverride }) {
-  const { resolvedClades, hierarchy: hierarchy3, showBranchLenEffective: showBranchLen, rowHeight, treeAreaWidth, marginLeft, blockSize } = model2;
+  const { resolvedClades, hierarchy: hierarchy3, showBranchLenEffective: showBranchLen, rowHeight, effectiveTreeAreaWidth, marginLeft, blockSize } = model2;
   const by = blockSizeYOverride ?? blockSize;
-  const right2 = treeAreaWidth - marginLeft;
+  const right2 = effectiveTreeAreaWidth - marginLeft;
   for (const { rows, color: color2, mark } of resolvedClades) {
     if (mark !== "highlight") {
       continue;
@@ -48190,12 +48221,12 @@ function renderCladeHighlights({ ctx, model: model2, offsetY, tipX, maxDepthToLe
   }
 }
 function renderCladeBrackets({ ctx, model: model2, theme, offsetY, blockSizeYOverride }) {
-  const { resolvedClades, cladeGutterWidth: cladeGutterWidth2, rowHeight, treeAreaWidth, marginLeft, blockSize } = model2;
+  const { resolvedClades, cladeGutterWidth: cladeGutterWidth2, rowHeight, effectiveTreeAreaWidth, marginLeft, blockSize } = model2;
   if (cladeGutterWidth2 === 0) {
     return;
   }
   const by = blockSizeYOverride ?? blockSize;
-  const x2 = treeAreaWidth - marginLeft - cladeGutterWidth2 + bracketGap + bracketBarWidth / 2;
+  const x2 = effectiveTreeAreaWidth - marginLeft - cladeGutterWidth2 + bracketGap + bracketBarWidth / 2;
   ctx.lineWidth = bracketBarWidth;
   for (const { rows, mark, markColor } of resolvedClades) {
     const top2 = rows[0] * rowHeight + 1;
@@ -48213,12 +48244,12 @@ function renderCladeBrackets({ ctx, model: model2, theme, offsetY, blockSizeYOve
   ctx.strokeStyle = theme.palette.text.primary;
 }
 function renderRowHighlights({ ctx, model: model2, theme, offsetY, blockSizeYOverride }) {
-  const { resolvedHighlights, rowTints, referenceRowIndex, rowHeight, treeAreaWidth, marginLeft, blockSize } = model2;
+  const { resolvedHighlights, rowTints, referenceRowIndex, rowHeight, effectiveTreeAreaWidth, marginLeft, blockSize } = model2;
   const by = blockSizeYOverride ?? blockSize;
   const pad2 = blockPad(model2);
   const placed = [];
   const fillRow = (index3) => {
-    ctx.fillRect(-marginLeft, index3 * rowHeight, treeAreaWidth, rowHeight);
+    ctx.fillRect(-marginLeft, index3 * rowHeight, effectiveTreeAreaWidth, rowHeight);
   };
   if (rowTints) {
     const top2 = Math.max(0, Math.floor((offsetY - pad2) / rowHeight));
@@ -48250,8 +48281,8 @@ function renderRowHighlights({ ctx, model: model2, theme, offsetY, blockSizeYOve
         label: label2,
         x: -marginLeft + 2,
         y: first * rowHeight,
-        spanWidth: treeAreaWidth,
-        bounds: { min: -marginLeft, max: treeAreaWidth - marginLeft },
+        spanWidth: effectiveTreeAreaWidth,
+        bounds: { min: -marginLeft, max: effectiveTreeAreaWidth - marginLeft },
         placed
       });
     }
@@ -48277,8 +48308,8 @@ function renderTreeCanvas({ model: model2, clickMap, ctx, offsetY, theme, highRe
   ctx.scale(k2, k2);
   ctx.translate(marginLeft, -offsetY);
   setFontSize(ctx, fontSize2);
-  const { maxBranchLength, maxDepthToLeaf, showBranchLenEffective, treeWidth } = model2;
-  const tipX = showBranchLenEffective ? maxBranchLength : treeWidth;
+  const { maxBranchLength, maxDepthToLeaf, showBranchLenEffective, effectiveTreeWidth } = model2;
+  const tipX = showBranchLenEffective ? maxBranchLength : effectiveTreeWidth;
   const collapsedSet = new Set(model2.collapsed);
   renderCladeHighlights({
     ctx,
@@ -48361,6 +48392,7 @@ var init_renderTreeCanvas = __esm({
     init_renderHighlights();
     init_overlayColors();
     init_cladeBrackets();
+    init_ellipsize();
     radius = 2.5;
     d2 = radius * 2;
   }
@@ -62833,13 +62865,13 @@ function legendHeight(rows) {
   return LEGEND_PAD * 2 + rows.length * LEGEND_ROW_H;
 }
 function getLayout(model2, opts) {
-  const { scrollX, scrollY, totalWidth, totalHeight, treeAreaWidth, rowPanelsWidth, rowPanelsHeaderHeight, totalTrackAreaHeight, minimapHeight, msaAreaHeight, msaCanvasWidth, showHorizontalScrollbar, treeOverviewHeight, treeScaleBar } = model2;
+  const { scrollX, scrollY, totalWidth, totalHeight, effectiveTreeAreaWidth, rowPanelsWidth, rowPanelsHeaderHeight, totalTrackAreaHeight, minimapHeight, msaAreaHeight, msaCanvasWidth, showHorizontalScrollbar, treeOverviewHeight, treeScaleBar } = model2;
   const trackHeight = opts.includeTracks ? totalTrackAreaHeight : 0;
   const includeMinimap = opts.exportType === "viewport" && !!opts.includeMinimap && showHorizontalScrollbar;
   const rows = legendRows(model2.legends);
   const legendWidth = rows.length > 0 ? getLegendWidth(rows) : 0;
   const topHeight = Math.max(includeMinimap ? minimapHeight : 0, rowPanelsHeaderHeight, treeOverviewHeight + (treeScaleBar ? treeScaleBarHeight : 0));
-  const gutterWidth = treeAreaWidth + rowPanelsWidth;
+  const gutterWidth = effectiveTreeAreaWidth + rowPanelsWidth;
   return opts.exportType === "entire" ? {
     width: totalWidth + gutterWidth,
     msaAreaWidth: totalWidth,
@@ -62879,7 +62911,7 @@ async function renderToSvg(model2, opts) {
 }
 function MsaSvg({ model: model2, theme, Context: Context2, layout, layers }) {
   const { width: width3, trackHeight, includeMinimap, legendWidth, topHeight } = layout;
-  const { treeAreaWidth, rowPanelsWidth } = model2;
+  const { effectiveTreeAreaWidth, rowPanelsWidth } = model2;
   const totalWidth = width3 + legendWidth;
   const legendTop = topHeight;
   const height2 = legendWidth > 0 ? Math.max(layout.height, legendTop + legendHeight(legendRows(model2.legends))) : layout.height;
@@ -62903,7 +62935,7 @@ function MsaSvg({ model: model2, theme, Context: Context2, layout, layers }) {
       null,
       includeMinimap ? import_react10.default.createElement(
         "g",
-        { id: "minimap-panel", transform: `translate(${treeAreaWidth + rowPanelsWidth} 0)` },
+        { id: "minimap-panel", transform: `translate(${effectiveTreeAreaWidth + rowPanelsWidth} 0)` },
         import_react10.default.createElement(MinimapSVG, { model: model2, theme })
       ) : null,
       import_react10.default.createElement(RowPanelHeadersSVG, { model: model2, theme, bandHeight: topHeight }),
@@ -62919,16 +62951,16 @@ function MsaSvg({ model: model2, theme, Context: Context2, layout, layers }) {
   );
 }
 function TreeOverviewSVG({ model: model2, theme, Context: Context2, layers }) {
-  const { treeAreaWidth, overviewHeight, id } = model2;
-  const ctx = new Context2(treeAreaWidth, overviewHeight);
+  const { effectiveTreeAreaWidth, overviewHeight, id } = model2;
+  const ctx = new Context2(effectiveTreeAreaWidth, overviewHeight);
   renderTreeOverview({
     model: model2,
     ctx,
     theme,
-    width: treeAreaWidth,
+    width: effectiveTreeAreaWidth,
     height: overviewHeight
   });
-  return import_react10.default.createElement(ClipGroup, { panelId: "tree-overview", clipId: `tree-overview-${id}`, width: treeAreaWidth, height: overviewHeight, ctx, layers });
+  return import_react10.default.createElement(ClipGroup, { panelId: "tree-overview", clipId: `tree-overview-${id}`, width: effectiveTreeAreaWidth, height: overviewHeight, ctx, layers });
 }
 function TreeScaleBarSVG({ model: model2, theme }) {
   const { marginLeft, treeScaleBar: bar, treeOverviewHeight } = model2;
@@ -62942,12 +62974,12 @@ function TreeScaleBarSVG({ model: model2, theme }) {
   );
 }
 function RowPanelHeadersSVG({ model: model2, theme, bandHeight }) {
-  const { resolvedRowPanels, treeAreaWidth, fontSize: fontSize2 } = model2;
+  const { resolvedRowPanels, effectiveTreeAreaWidth, fontSize: fontSize2 } = model2;
   const y2 = bandHeight - 4;
   return resolvedRowPanels.length === 0 ? null : import_react10.default.createElement("g", { id: "rowpanel-headers" }, resolvedRowPanels.map((panel) => {
     const across = headerRunsAcross(panel.width);
     const size5 = across ? fontSize2 : Math.min(fontSize2, panel.width);
-    const center = treeAreaWidth + panel.offsetX + panel.width / 2;
+    const center = effectiveTreeAreaWidth + panel.offsetX + panel.width / 2;
     const x2 = across ? center : center + size5 / 3;
     const room = across ? panel.width : y2 - LEGEND_PAD;
     const maxChars = Math.floor(room / (size5 * CHAR_WIDTH));
@@ -62963,11 +62995,11 @@ function clipCladeLabel(label2, room, fontSize2) {
   return `${label2.slice(0, Math.max(1, fits - 1))}\u2026`;
 }
 function CladeLabelsSVG({ model: model2, theme, offsetY }) {
-  const { resolvedClades, cladeGutterWidth: cladeGutterWidth2, rowHeight, treeAreaWidth, fontSize: fontSize2 } = model2;
+  const { resolvedClades, cladeGutterWidth: cladeGutterWidth2, rowHeight, effectiveTreeAreaWidth, fontSize: fontSize2 } = model2;
   if (cladeGutterWidth2 === 0) {
     return null;
   }
-  const gutterLeft = treeAreaWidth - cladeGutterWidth2;
+  const gutterLeft = effectiveTreeAreaWidth - cladeGutterWidth2;
   return import_react10.default.createElement("g", { id: "clade-labels" }, resolvedClades.map((clade, index3) => {
     const { label: label2, markColor, rows } = clade;
     if (!label2 || !cladeInGutter(clade)) {
@@ -62977,7 +63009,7 @@ function CladeLabelsSVG({ model: model2, theme, offsetY }) {
     const top2 = rows[0] * rowHeight - offsetY;
     const height2 = cladeHeight(clade, rowHeight);
     const horizontal = cladeLabelHorizontal(clade, rowHeight, fontSize2);
-    const room = horizontal ? treeAreaWidth - left2 - bracketGap : height2;
+    const room = horizontal ? effectiveTreeAreaWidth - left2 - bracketGap : height2;
     const x2 = horizontal ? left2 : left2 + fontSize2;
     const y2 = horizontal ? top2 + height2 / 2 + fontSize2 / 3 : top2 + height2;
     return import_react10.default.createElement("text", { key: `${rows[0]}-${rows[1]}-${index3}`, x: x2, y: y2, transform: horizontal ? void 0 : `rotate(-90 ${x2} ${y2})`, fontSize: fontSize2, fill: markColor ?? theme.palette.text.primary }, clipCladeLabel(label2, room, fontSize2));
@@ -63004,8 +63036,8 @@ function LegendSVG({ model: model2, theme, width: width3 }) {
 }
 function CoreRendering({ model: model2, theme, layout, Context: Context2, layers }) {
   const { contentHeight, offsetX, offsetY, msaAreaWidth } = layout;
-  const { treeAreaWidth, rowPanelsWidth, id } = model2;
-  const treeCtx = new Context2(treeAreaWidth, contentHeight);
+  const { effectiveTreeAreaWidth, rowPanelsWidth, id } = model2;
+  const treeCtx = new Context2(effectiveTreeAreaWidth, contentHeight);
   renderTreeCanvas({
     model: model2,
     theme,
@@ -63063,10 +63095,10 @@ function CoreRendering({ model: model2, theme, layout, Context: Context2, layers
   return import_react10.default.createElement(
     import_react10.default.Fragment,
     null,
-    import_react10.default.createElement(ClipGroup, { panelId: "tree-panel", clipId: `tree-${id}`, width: treeAreaWidth, height: contentHeight, ctx: treeCtx, layers }),
+    import_react10.default.createElement(ClipGroup, { panelId: "tree-panel", clipId: `tree-${id}`, width: effectiveTreeAreaWidth, height: contentHeight, ctx: treeCtx, layers }),
     import_react10.default.createElement(CladeLabelsSVG, { model: model2, theme, offsetY }),
-    rowPanelsCtx ? import_react10.default.createElement(ClipGroup, { panelId: "rowpanels-panel", clipId: `rowpanels-${id}`, width: rowPanelsWidth, height: contentHeight, transform: `translate(${treeAreaWidth} 0)`, ctx: rowPanelsCtx, layers }) : null,
-    import_react10.default.createElement(ClipGroup, { panelId: "msa-panel", clipId: `msa-${id}`, width: msaAreaWidth, height: contentHeight, transform: `translate(${treeAreaWidth + rowPanelsWidth} 0)`, ctx: msaCtx, layers, underlay: raster })
+    rowPanelsCtx ? import_react10.default.createElement(ClipGroup, { panelId: "rowpanels-panel", clipId: `rowpanels-${id}`, width: rowPanelsWidth, height: contentHeight, transform: `translate(${effectiveTreeAreaWidth} 0)`, ctx: rowPanelsCtx, layers }) : null,
+    import_react10.default.createElement(ClipGroup, { panelId: "msa-panel", clipId: `msa-${id}`, width: msaAreaWidth, height: contentHeight, transform: `translate(${effectiveTreeAreaWidth + rowPanelsWidth} 0)`, ctx: msaCtx, layers, underlay: raster })
   );
 }
 function rasterBackground({ model: model2, theme, layout }) {
@@ -63099,7 +63131,7 @@ function rasterBackground({ model: model2, theme, layout }) {
 }
 function TrackRendering({ model: model2, theme, layout, Context: Context2, layers }) {
   const { trackHeight, offsetX, msaAreaWidth } = layout;
-  const { treeAreaWidth, rowPanelsWidth, id } = model2;
+  const { effectiveTreeAreaWidth, rowPanelsWidth, id } = model2;
   const ctx = new Context2(msaAreaWidth, trackHeight);
   renderAllTracks({
     model: model2,
@@ -63115,13 +63147,13 @@ function TrackRendering({ model: model2, theme, layout, Context: Context2, layer
     import_react10.default.createElement(TrackLabelsSVG, { model: model2, theme }),
     import_react10.default.createElement(
       "g",
-      { transform: `translate(${treeAreaWidth + rowPanelsWidth} 0)` },
+      { transform: `translate(${effectiveTreeAreaWidth + rowPanelsWidth} 0)` },
       import_react10.default.createElement(ClipGroup, { panelId: "tracks-panel", clipId: `tracks-${id}`, width: msaAreaWidth, height: trackHeight, ctx, layers })
     )
   );
 }
 function TrackLabelsSVG({ model: model2, theme }) {
-  const { turnedOnTracks, treeAreaWidth, fontSize: fontSize2, drawLabels } = model2;
+  const { turnedOnTracks, effectiveTreeAreaWidth, fontSize: fontSize2, drawLabels } = model2;
   if (!drawLabels) {
     return null;
   }
@@ -63132,7 +63164,7 @@ function TrackLabelsSVG({ model: model2, theme }) {
     return { id, name, size: size5, baseline: top2 + height2 / 2 + size5 / 3 };
   });
   return import_react10.default.createElement(import_react10.default.Fragment, null, labels.map(({ id, name, size: size5, baseline }) => {
-    return size5 < 5 ? null : import_react10.default.createElement("text", { key: id, x: treeAreaWidth - 4, y: baseline, fontSize: size5, textAnchor: "end", fill: theme.palette.text.primary }, name);
+    return size5 < 5 ? null : import_react10.default.createElement("text", { key: id, x: effectiveTreeAreaWidth - 4, y: baseline, fontSize: size5, textAnchor: "end", fill: theme.palette.text.primary }, name);
   }));
 }
 function ClipGroup({ panelId, clipId, width: width3, height: height2, transform: transform2, ctx, layers, underlay }) {
@@ -79971,7 +80003,7 @@ var init_ResizeHandles = __esm({
       const onDrag = (0, import_react33.useCallback)((delta, startWidth) => {
         model2.setTreeAreaWidth(startWidth + delta);
       }, [model2]);
-      return import_react33.default.createElement(DragHandle, { axis: "x", variant: "resizer", getStart: () => model2.treeAreaWidth, onDrag, style: { width: model2.resizeHandleWidth } });
+      return import_react33.default.createElement(DragHandle, { axis: "x", variant: "resizer", getStart: () => model2.effectiveTreeAreaWidth, onDrag, style: { width: model2.resizeHandleWidth } });
     });
     HorizontalResizeHandle = (0, import_mobx_react6.observer)(function({ model: model2 }) {
       const onDrag = (0, import_react33.useCallback)((delta, startHeight) => {
@@ -82783,7 +82815,7 @@ var init_Track = __esm({
       const closeMenu = () => {
         setAnchorEl(void 0);
       };
-      const { drawLabels, fontSize: fontSize2, treeAreaWidth: width3 } = model2;
+      const { drawLabels, fontSize: fontSize2, effectiveTreeAreaWidth: width3 } = model2;
       const { model: { name, height: height2 } } = track;
       const { classes } = useStyles10();
       const trackLabelHeight = Math.min(height2, fontSize2);
@@ -84039,9 +84071,9 @@ var init_ExportSVGDialog = __esm({
       const [error, setError] = (0, import_react54.useState)();
       const [exporting, setExporting] = (0, import_react54.useState)(false);
       const theme = useTheme4();
-      const { totalWidth, totalHeight, treeAreaWidth, rowPanelsWidth, turnedOnTracks, totalTrackAreaHeight, numColumns, leaves: leaves2, showMsaLetters, treeOverviewHeight } = model2;
+      const { totalWidth, totalHeight, effectiveTreeAreaWidth, rowPanelsWidth, turnedOnTracks, totalTrackAreaHeight, numColumns, leaves: leaves2, showMsaLetters, treeOverviewHeight } = model2;
       const hasTracks = turnedOnTracks.length > 0;
-      const entireWidth = totalWidth + treeAreaWidth + rowPanelsWidth;
+      const entireWidth = totalWidth + effectiveTreeAreaWidth + rowPanelsWidth;
       const entireHeight = totalHeight + (includeTracks ? totalTrackAreaHeight : 0) + treeOverviewHeight;
       const glyphs = showMsaLetters && exportType === "entire" ? numColumns * leaves2.length : 0;
       const isLargeExport = glyphs > 1e5;
@@ -84496,7 +84528,7 @@ function msaSettingsMenuItems(model2) {
   ];
 }
 function treeSettingsMenuItems(model2) {
-  const { drawTree, showBranchLen, labelsAlignRight, drawNodeBubbles, drawNodeLabels, drawLabels, showTreeOverview, treeOrder, treeRoot, rotated } = model2;
+  const { drawTree, showBranchLen, labelsAlignRight, drawNodeBubbles, drawNodeLabels, drawLabels, treeAreaWidth, showTreeOverview, treeOrder, treeRoot, rotated } = model2;
   return [
     {
       label: "Order",
@@ -84557,6 +84589,9 @@ function treeSettingsMenuItems(model2) {
     }),
     toggle("Draw labels", drawLabels, (arg2) => {
       model2.setDrawLabels(arg2);
+    }),
+    toggle("Fit tree area to labels and tree", treeAreaWidth === void 0, (arg2) => {
+      model2.setTreeAreaWidth(arg2 ? void 0 : model2.effectiveTreeAreaWidth);
     })
   ];
 }
@@ -85049,7 +85084,7 @@ var version2;
 var init_version3 = __esm({
   "../lib/dist/version.js"() {
     "use strict";
-    version2 = "8.4.1";
+    version2 = "9.0.0";
   }
 });
 
@@ -85949,10 +85984,10 @@ var init_TreeOverview = __esm({
     init_useCanvasAutorun();
     init_renderTreeOverview();
     TreeOverview = (0, import_mobx_react39.observer)(function({ model: model2 }) {
-      const { treeAreaWidth, overviewHeight, highResScaleFactor } = model2;
+      const { effectiveTreeAreaWidth, overviewHeight, highResScaleFactor } = model2;
       const theme = useTheme4();
       const [hover, setHover] = (0, import_react82.useState)();
-      const width3 = Math.round(treeAreaWidth * highResScaleFactor);
+      const width3 = Math.round(effectiveTreeAreaWidth * highResScaleFactor);
       const height2 = Math.round(overviewHeight * highResScaleFactor);
       const ref = useCanvasAutorun({
         draw: (ctx) => {
@@ -85961,12 +85996,17 @@ var init_TreeOverview = __esm({
           const image = treeOverviewImage({
             model: model2,
             theme,
-            width: treeAreaWidth,
+            width: effectiveTreeAreaWidth,
             height: overviewHeight,
             scale: highResScaleFactor
           });
           ctx.scale(highResScaleFactor, highResScaleFactor);
-          const box = { model: model2, ctx, width: treeAreaWidth, height: overviewHeight };
+          const box = {
+            model: model2,
+            ctx,
+            width: effectiveTreeAreaWidth,
+            height: overviewHeight
+          };
           if (image) {
             ctx.drawImage(image, 0, 0, image.width, image.height, 0, 0, box.width, box.height);
           } else {
@@ -85996,7 +86036,7 @@ var init_TreeOverview = __esm({
         display: "block",
         flexShrink: 0,
         cursor: "pointer",
-        width: treeAreaWidth,
+        width: effectiveTreeAreaWidth,
         height: overviewHeight
       }, onMouseMove: (event) => {
         const hit = model2.treeOverviewHit(event.nativeEvent.offsetY);
@@ -86021,12 +86061,12 @@ var init_CladeLabels = __esm({
     import_mobx_react40 = __toESM(require_dist3(), 1);
     init_cladeBrackets();
     CladeLabels = (0, import_mobx_react40.observer)(function({ model: model2 }) {
-      const { resolvedClades, cladeGutterWidth: cladeGutterWidth2, rowHeight, treeAreaWidth, fontSize: fontSize2 } = model2;
+      const { resolvedClades, cladeGutterWidth: cladeGutterWidth2, rowHeight, effectiveTreeAreaWidth, fontSize: fontSize2 } = model2;
       const theme = useTheme4();
       if (cladeGutterWidth2 === 0) {
         return null;
       }
-      const gutterLeft = treeAreaWidth - cladeGutterWidth2;
+      const gutterLeft = effectiveTreeAreaWidth - cladeGutterWidth2;
       return import_react83.default.createElement(import_react83.default.Fragment, null, resolvedClades.map((clade, index3) => {
         const { label: label2, markColor, rows } = clade;
         if (!label2 || !cladeInGutter(clade)) {
@@ -86038,7 +86078,7 @@ var init_CladeLabels = __esm({
           position: "absolute",
           left: left2,
           top: rows[0] * rowHeight,
-          width: treeAreaWidth - left2 - bracketGap,
+          width: effectiveTreeAreaWidth - left2 - bracketGap,
           height: cladeHeight(clade, rowHeight),
           display: "flex",
           alignItems: "center",
@@ -86773,8 +86813,8 @@ var init_TreeCanvasBlock = __esm({
       const [menu, setMenu] = (0, import_react87.useState)();
       const { clickMap, anchor, hitTest, onMouseMove, onMouseLeave } = useTreeHover({ model: model2, offsetY });
       const hovered = anchor?.value;
-      const { treeAreaWidth, blockSize, highResScaleFactor } = model2;
-      const width3 = treeAreaWidth;
+      const { effectiveTreeAreaWidth, blockSize, highResScaleFactor } = model2;
+      const width3 = effectiveTreeAreaWidth;
       const height2 = blockSize;
       const canvasWidth = width3 * highResScaleFactor;
       const canvasHeight = height2 * highResScaleFactor;
@@ -86829,7 +86869,7 @@ var init_TreeCanvasBlock = __esm({
           width: hovered.maxX - hovered.minX,
           height: hovered.maxY - hovered.minY
         } }) : null,
-        anchor ? import_react87.default.createElement(BaseTooltip, { clientPoint: anchor.clientPoint }, anchor.value.name) : null
+        anchor ? import_react87.default.createElement(BaseTooltip, { clientPoint: anchor.clientPoint }, anchor.value.label ?? anchor.value.name) : null
       );
     });
     TreeCanvasBlock_default = TreeCanvasBlock;
@@ -86838,7 +86878,7 @@ var init_TreeCanvasBlock = __esm({
 
 // ../lib/dist/components/tree/renderTreeMouseover.js
 function renderTreeMouseover({ ctx, model: model2 }) {
-  const { rowHeight, treeAreaWidth: width3, height: height2, scrollY, mouseRow, referenceRowIndex, hoveredRowIndices, highResScaleFactor } = model2;
+  const { rowHeight, effectiveTreeAreaWidth: width3, height: height2, scrollY, mouseRow, referenceRowIndex, hoveredRowIndices, highResScaleFactor } = model2;
   ctx.resetTransform();
   ctx.clearRect(0, 0, width3 * highResScaleFactor, height2 * highResScaleFactor);
   ctx.scale(highResScaleFactor, highResScaleFactor);
@@ -86875,12 +86915,12 @@ var init_TreeCanvas = __esm({
     init_renderTreeMouseover();
     TreeCanvas = (0, import_mobx_react44.observer)(function({ model: model2 }) {
       const ref = (0, import_react88.useRef)(null);
-      const { height: height2, blocksY, treeAreaWidth, scrollY, highResScaleFactor } = model2;
+      const { height: height2, blocksY, effectiveTreeAreaWidth, scrollY, highResScaleFactor } = model2;
       const onScrollY = (0, import_react88.useCallback)((d3) => {
         model2.doScrollY(d3);
       }, [model2]);
       const { onMouseDown, onMouseUp } = useWheelScroll({ ref, onScrollY });
-      const canvasWidth = treeAreaWidth * highResScaleFactor;
+      const canvasWidth = effectiveTreeAreaWidth * highResScaleFactor;
       const canvasHeight = height2 * highResScaleFactor;
       const mouseoverRef = useCanvasAutorun({
         draw: (ctx) => {
@@ -86897,7 +86937,7 @@ var init_TreeCanvas = __esm({
         { ref, onMouseDown, onMouseUp, style: {
           height: height2,
           position: "relative",
-          width: treeAreaWidth
+          width: effectiveTreeAreaWidth
         } },
         import_react88.default.createElement(
           "div",
@@ -86915,7 +86955,7 @@ var init_TreeCanvas = __esm({
           position: "absolute",
           top: 0,
           left: 0,
-          width: treeAreaWidth,
+          width: effectiveTreeAreaWidth,
           height: height2,
           zIndex: 1e3,
           pointerEvents: "none"
@@ -86935,10 +86975,14 @@ var init_TreePanel = __esm({
     import_mobx_react45 = __toESM(require_dist3(), 1);
     init_TreeCanvas();
     TreePanel = (0, import_mobx_react45.observer)(function({ model: model2 }) {
-      const { treeAreaWidth } = model2;
+      const { effectiveTreeAreaWidth } = model2;
       return import_react89.default.createElement(
         "div",
-        { style: { overflow: "hidden", flexShrink: 0, width: treeAreaWidth } },
+        { style: {
+          overflow: "hidden",
+          flexShrink: 0,
+          width: effectiveTreeAreaWidth
+        } },
         import_react89.default.createElement(TreeCanvas_default, { model: model2 })
       );
     });
@@ -86957,11 +87001,11 @@ var init_TreeRuler = __esm({
     init_constants();
     init_ScaleBarSVG();
     TreeRuler = (0, import_mobx_react46.observer)(({ model: model2 }) => {
-      const { treeAreaWidth, marginLeft, treeScaleBar: bar } = model2;
+      const { effectiveTreeAreaWidth, marginLeft, treeScaleBar: bar } = model2;
       const theme = useTheme4();
-      return import_react90.default.createElement("div", { style: { flexShrink: 0, width: treeAreaWidth } }, bar ? import_react90.default.createElement(
+      return import_react90.default.createElement("div", { style: { flexShrink: 0, width: effectiveTreeAreaWidth } }, bar ? import_react90.default.createElement(
         "svg",
-        { width: treeAreaWidth, height: treeScaleBarHeight, style: { display: "block" } },
+        { width: effectiveTreeAreaWidth, height: treeScaleBarHeight, style: { display: "block" } },
         import_react90.default.createElement(ScaleBarSVG, { bar, marginLeft, y: treeScaleBarHeight, color: theme.palette.text.primary })
       ) : null);
     });
@@ -87005,7 +87049,7 @@ var init_MSAView = __esm({
       );
     });
     TrackColumnIndicator = (0, import_mobx_react47.observer)(function({ model: model2 }) {
-      const { mouseCol, mouseClickCol, colWidth, scrollX, treeAreaWidth, rowPanelsWidth, resizeHandleWidth, totalTrackAreaHeight, msaCanvasWidth, resolvedSelection } = model2;
+      const { mouseCol, mouseClickCol, colWidth, scrollX, effectiveTreeAreaWidth, rowPanelsWidth, resizeHandleWidth, totalTrackAreaHeight, msaCanvasWidth, resolvedSelection } = model2;
       const bands = [
         {
           start: resolvedSelection?.startCol,
@@ -87017,7 +87061,7 @@ var init_MSAView = __esm({
       ];
       return import_react91.default.createElement("div", { style: {
         position: "absolute",
-        left: treeAreaWidth + rowPanelsWidth + resizeHandleWidth,
+        left: effectiveTreeAreaWidth + rowPanelsWidth + resizeHandleWidth,
         top: 0,
         width: msaCanvasWidth,
         height: totalTrackAreaHeight,
@@ -88027,15 +88071,18 @@ function TreeModelF() {
     labelsAlignRight: stripDefault2(types.boolean, defaultLabelsAlignRight),
     /**
      * #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: stripDefault2(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: stripDefault2(types.number, defaultTreeWidth),
+    treeWidth: types.maybe(types.number),
     /**
      * #property
      * use "branch length" e.g. evolutionary distance to draw tree branch
@@ -88076,28 +88123,24 @@ function TreeModelF() {
      * #property
      * height of the tree overview band, px
      */
-    overviewHeight: stripDefault2(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: stripDefault2(types.boolean, false)
+    overviewHeight: stripDefault2(types.number, defaultOverviewHeight)
   }).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(n2) {
-      self.treeAreaWidth = Math.round(n2);
+      self.treeAreaWidth = n2 === void 0 ? void 0 : Math.round(n2);
+      self.treeWidth = void 0;
     },
     /**
      * #action
-     * set tree width (px)
+     * set the tree width, px, or undefined to fill the tree area less the
+     * labels
      */
     setTreeWidth(n2) {
-      self.treeWidth = Math.round(n2);
+      self.treeWidth = n2 === void 0 ? void 0 : Math.round(n2);
     },
     /**
      * #action
@@ -88111,12 +88154,6 @@ function TreeModelF() {
     setDrawTree(arg2) {
       self.drawTree = arg2;
     },
-    /**
-     * #action
-     */
-    setAutoTreeAreaWidth(arg2) {
-      self.autoTreeAreaWidth = arg2;
-    },
     /**
      * #action
      */
@@ -88841,6 +88878,53 @@ var init_seqPosToGlobalCol = __esm({
   }
 });
 
+// ../lib/dist/tipLabels.js
+function treeTips(tree) {
+  const names = [];
+  let depth = 0;
+  const stack = [[tree, 0]];
+  for (let entry = stack.pop(); entry; entry = stack.pop()) {
+    const [node2, level] = entry;
+    const { children } = node2;
+    if (children.length > 0) {
+      for (const child of children) {
+        stack.push([child, level + 1]);
+      }
+    } else {
+      names.push(node2.name);
+      depth = Math.max(depth, level);
+    }
+  }
+  return { names, depth };
+}
+function widestLabel(labels, fontSize2) {
+  const counts = [];
+  for (const label2 of labels) {
+    counts[label2.length] = (counts[label2.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 label2 of labels) {
+    if (label2.length > shortest || label2.length === shortest && ties++ < measuredLabels) {
+      widest = Math.max(widest, measureTextCanvas(label2, fontSize2));
+    }
+  }
+  return widest;
+}
+var measuredLabels;
+var init_tipLabels = __esm({
+  "../lib/dist/tipLabels.js"() {
+    "use strict";
+    init_measureTextCanvas();
+    measuredLabels = 100;
+  }
+});
+
 // ../lib/dist/writeNewick.js
 function quote(name) {
   return needsQuotes.test(name) ? `'${name.replaceAll("'", "''")}'` : name;
@@ -90056,10 +90140,10 @@ function stateModelFactory({ maxInlineSnapshotBytes: maxInlineSnapshotBytes2 = m
      * 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() {
       const text2 = self.data.treeMetadata;
@@ -90169,11 +90253,80 @@ function stateModelFactory({ maxInlineSnapshotBytes: maxInlineSnapshotBytes2 = m
      * 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 ?? clamp3(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
@@ -90330,7 +90483,7 @@ function stateModelFactory({ maxInlineSnapshotBytes: maxInlineSnapshotBytes2 = m
      * for the MSA
      */
     get msaAreaWidth() {
-      return self.width - self.treeAreaWidth - this.rowPanelsWidth - self.resizeHandleWidth;
+      return self.width - this.effectiveTreeAreaWidth - this.rowPanelsWidth - self.resizeHandleWidth;
     },
     /**
      * #getter
@@ -90338,7 +90491,7 @@ function stateModelFactory({ maxInlineSnapshotBytes: maxInlineSnapshotBytes2 = m
      * margin and the bracket gutter
      */
     get treeAreaWidthMinusMargin() {
-      return self.treeAreaWidth - self.marginLeft - this.cladeGutterWidth;
+      return this.effectiveTreeAreaWidth - self.marginLeft - this.cladeGutterWidth;
     },
     /**
      * #getter
@@ -90461,7 +90614,7 @@ function stateModelFactory({ maxInlineSnapshotBytes: maxInlineSnapshotBytes2 = m
      * #getter
      */
     get fontSize() {
-      return Math.min(Math.max(6, self.rowHeight - 3), 18);
+      return fontSizeFor(self.rowHeight);
     },
     /**
      * #getter
@@ -90551,17 +90704,18 @@ function stateModelFactory({ maxInlineSnapshotBytes: maxInlineSnapshotBytes2 = m
     /**
      * #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();
         }
       });
     },
@@ -90594,11 +90748,11 @@ function stateModelFactory({ maxInlineSnapshotBytes: maxInlineSnapshotBytes2 = m
     },
     /**
      * #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;
     },
     /**
      * #getter
@@ -90607,7 +90761,7 @@ function stateModelFactory({ maxInlineSnapshotBytes: maxInlineSnapshotBytes2 = m
      */
     get pxPerBranchLength() {
       const max3 = this.rootToTipLength;
-      return this.showBranchLenEffective && max3 ? self.treeWidth / max3 : 0;
+      return this.showBranchLenEffective && max3 ? this.effectiveTreeWidth / max3 : 0;
     },
     /**
      * #getter
@@ -90642,12 +90796,6 @@ function stateModelFactory({ maxInlineSnapshotBytes: maxInlineSnapshotBytes2 = m
      */
     get showMsaLetters() {
       return self.drawMsaLetters && self.rowHeight >= minLetterRowHeight && self.colWidth >= minLetterColWidth && self.colWidth > self.rowHeight / 2;
-    },
-    /**
-     * #getter
-     */
-    get showTreeText() {
-      return self.drawLabels && self.rowHeight >= minLetterRowHeight;
     }
   })).views((self) => {
     const columnTrackModels = /* @__PURE__ */ new WeakMap();
@@ -90750,37 +90898,6 @@ function stateModelFactory({ maxInlineSnapshotBytes: maxInlineSnapshotBytes2 = m
       }
     };
   }).views((self) => ({
-    /**
-     * #getter
-     */
-    get labelWidthMap() {
-      const { showTreeText, leaves: leaves2 } = self;
-      return showTreeText ? new Map(leaves2.map((node2) => {
-        const { name } = node2.data;
-        const displayName = self.rowDataOf(name)?.genome || name;
-        return [
-          name,
-          measureTextCanvas(displayName, labelReferenceFontSize)
-        ];
-      })) : /* @__PURE__ */ new Map();
-    },
-    /**
-     * #getter
-     * factor turning a labelWidthMap entry into its width at the current
-     * font size
-     */
-    get labelWidthScale() {
-      return self.fontSize / labelReferenceFontSize;
-    },
-    get labelsWidth() {
-      let max3 = 0;
-      for (const width3 of this.labelWidthMap.values()) {
-        if (width3 > max3) {
-          max3 = width3;
-        }
-      }
-      return max3 * this.labelWidthScale;
-    },
     /**
      * #getter
      */
@@ -91194,7 +91311,7 @@ function stateModelFactory({ maxInlineSnapshotBytes: maxInlineSnapshotBytes2 = m
      * or when the tree area is too narrow for one
      */
     get treeScaleBar() {
-      return scaleBarLength(self.pxPerBranchLength, self.treeAreaWidth - self.marginLeft * 2);
+      return scaleBarLength(self.pxPerBranchLength, self.effectiveTreeAreaWidth - self.marginLeft * 2);
     },
     /**
      * #getter
@@ -92522,21 +92639,6 @@ function stateModelFactory({ maxInlineSnapshotBytes: maxInlineSnapshotBytes2 = m
         }
         self.columns;
       }));
-      addDisposer(self, (0, import_mobx5.autorun)(() => {
-        if (self.autoTreeAreaWidth && (self.noTree || !self.drawTree) && self.labelsWidth) {
-          self.setTreeAreaWidth(self.labelsWidth + self.marginLeft + 12 + self.cladeGutterWidth);
-        }
-      }));
-      let pinnedAreaWidth = self.treeWidth === defaultTreeWidth ? void 0 : self.treeAreaWidth;
-      addDisposer(self, (0, import_mobx5.autorun)(() => {
-        const areaWidth = self.treeAreaWidth;
-        const labelsWidth = self.labelsWidth;
-        if (pinnedAreaWidth === areaWidth) {
-          return;
-        }
-        pinnedAreaWidth = void 0;
-        self.setTreeWidth(Math.max(50, areaWidth - labelsWidth - 10 - self.marginLeft - self.cladeGutterWidth));
-      }));
     }
   })).postProcessSnapshot(({ data, columnTracks, ...rest }) => ({
     // stripDefault handles per-property defaults; this drops inline documents
@@ -92580,7 +92682,6 @@ var init_model = __esm({
     init_fetchUtils();
     init_flatToTree();
     init_hierarchy2();
-    init_measureTextCanvas();
     init_DataModel();
     init_DialogQueue();
     init_msaModel();
@@ -92594,6 +92695,7 @@ var init_model = __esm({
     init_seqPosToGlobalCol();
     init_sequenceLogo();
     init_stripDefault();
+    init_tipLabels();
     init_util3();
     init_fileSaver();
     init_writeNewick();
@@ -92637,7 +92739,6 @@ var init_model = __esm({
       "drawNodeLabels",
       "showTreeOverview",
       "overviewHeight",
-      "autoTreeAreaWidth",
       "turnedOffTracks",
       "trackHeights",
       "hideGaps",
@@ -92692,7 +92793,7 @@ function useModelReaction(model2, key, handler) {
     latest.current?.(value);
   }, { equals: import_mobx6.compareStructural }) : void 0, [model2, key, listening]);
 }
-function Viewer({ msa, tree, gff, msaFilehandle, treeFilehandle, gffFilehandle, colorScheme, height: height2, colWidth, rowHeight, allowedGappyness, highlightColumns, highlights, features, clades, relativeTo, columnTracks, residueMappings, rowData, encodings, rowPanels, drawTree, residueEncoding, treeAreaWidth, autoTreeAreaWidth, showBranchLen, treeOrder, treeRoot, region, selection, hideHeader, theme, onCellHover, onCellClick, onViewportChange, onSelectionChange, onModel }) {
+function Viewer({ msa, tree, gff, msaFilehandle, treeFilehandle, gffFilehandle, colorScheme, height: height2, colWidth, rowHeight, allowedGappyness, highlightColumns, highlights, features, clades, relativeTo, columnTracks, residueMappings, rowData, encodings, rowPanels, drawTree, residueEncoding, treeAreaWidth, showBranchLen, treeOrder, treeRoot, region, selection, hideHeader, theme, onCellHover, onCellClick, onViewportChange, onSelectionChange, onModel }) {
   const [model2] = (0, import_react96.useState)(() => model_default().create({
     type: "MsaView",
     ...msa || tree || gff || rowData ? {
@@ -92725,7 +92826,6 @@ function Viewer({ msa, tree, gff, msaFilehandle, treeFilehandle, gffFilehandle,
     ...rowPanels ? { rowPanels } : {},
     ...drawTree !== void 0 ? { drawTree } : {},
     ...treeAreaWidth ? { treeAreaWidth } : {},
-    ...autoTreeAreaWidth ? { autoTreeAreaWidth } : {},
     ...showBranchLen !== void 0 ? { showBranchLen } : {},
     ...treeOrder ? { treeOrder } : {},
     ...treeRoot ? { treeRoot } : {},

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-msaview-cli",
-  "version": "8.4.1",
+  "version": "9.0.0",
   "license": "MIT",
   "type": "module",
   "repository": {
@@ -20,8 +20,8 @@
     "@types/node": "^26.6.2",
     "esbuild": "^0.28.2",
     "mobx-react": "^10.0.2",
-    "msa-parsers": "8.4.1",
-    "react-msaview": "8.4.1"
+    "msa-parsers": "9.0.0",
+    "react-msaview": "9.0.0"
   },
   "dependencies": {
     "jsdom": "^30.1.1"