react-msaview 8.4.0 → 9.0.0

package/dist/components/header/settingsMenuItems.js

@@ -56,7 +56,7 @@ export function msaSettingsMenuItems(model) {
     ];
 }
 export function treeSettingsMenuItems(model) {
-    const { drawTree, showBranchLen, labelsAlignRight, drawNodeBubbles, drawNodeLabels, drawLabels, showTreeOverview, treeOrder, treeRoot, rotated, } = model;
+    const { drawTree, showBranchLen, labelsAlignRight, drawNodeBubbles, drawNodeLabels, drawLabels, treeAreaWidth, showTreeOverview, treeOrder, treeRoot, rotated, } = model;
     return [
         {
             label: 'Order',
@@ -119,6 +119,9 @@ export function treeSettingsMenuItems(model) {
         toggle('Draw labels', drawLabels, arg => {
             model.setDrawLabels(arg);
         }),
+        toggle('Fit tree area to labels and tree', treeAreaWidth === undefined, arg => {
+            model.setTreeAreaWidth(arg ? undefined : model.effectiveTreeAreaWidth);
+        }),
     ];
 }
 //# sourceMappingURL=settingsMenuItems.js.map

package/dist/components/header/settingsMenuItems.js.map

@@ -1 +1 @@
-{"version":3,"file":"settingsMenuItems.js","sourceRoot":"","sources":["../../../src/components/header/settingsMenuItems.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"settingsMenuItems.js","sourceRoot":"","sources":["../../../src/components/header/settingsMenuItems.ts"],"names":[],"mappings":"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"}

package/dist/components/tree/CladeLabels.js

@@ -9,12 +9,12 @@ import { bracketGap, cladeHeight, cladeInGutter, cladeLabelHorizontal, cladeLabe
  * the same labels with a `rotate(-90)`.
  */
 const CladeLabels = observer(function ({ model }) {
-    const { resolvedClades, cladeGutterWidth, rowHeight, treeAreaWidth, fontSize, } = model;
+    const { resolvedClades, cladeGutterWidth, rowHeight, effectiveTreeAreaWidth, fontSize, } = model;
     const theme = useTheme();
     if (cladeGutterWidth === 0) {
         return null;
     }
-    const gutterLeft = treeAreaWidth - cladeGutterWidth;
+    const gutterLeft = effectiveTreeAreaWidth - cladeGutterWidth;
     return (React.createElement(React.Fragment, null, resolvedClades.map((clade, index) => {
         const { label, markColor, rows } = clade;
         if (!label || !cladeInGutter(clade)) {
@@ -26,7 +26,7 @@ const CladeLabels = observer(function ({ model }) {
                 position: 'absolute',
                 left,
                 top: rows[0] * rowHeight,
-                width: treeAreaWidth - left - bracketGap,
+                width: effectiveTreeAreaWidth - left - bracketGap,
                 height: cladeHeight(clade, rowHeight),
                 display: 'flex',
                 alignItems: 'center',

package/dist/components/tree/CladeLabels.js.map

@@ -1 +1 @@
-{"version":3,"file":"CladeLabels.js","sourceRoot":"","sources":["../../../src/components/tree/CladeLabels.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAErC,OAAO,EACL,UAAU,EACV,WAAW,EACX,aAAa,EACb,oBAAoB,EACpB,gBAAgB,GACjB,MAAM,oBAAoB,CAAA;AAI3B;;;;;GAKG;AACH,MAAM,WAAW,GAAG,QAAQ,CAAC,UAAU,EAAE,KAAK,EAA2B;IACvE,MAAM,EACJ,cAAc,EACd,gBAAgB,EAChB,SAAS,EACT,aAAa,EACb,QAAQ,GACT,GAAG,KAAK,CAAA;IACT,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,IAAI,gBAAgB,KAAK,CAAC,EAAE,CAAC;QAC3B,OAAO,IAAI,CAAA;IACb,CAAC;IACD,MAAM,UAAU,GAAG,aAAa,GAAG,gBAAgB,CAAA;IACnD,OAAO,CACL,0CACG,cAAc,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;QACnC,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,KAAK,CAAA;QACxC,IAAI,CAAC,KAAK,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,CAAC;YACpC,OAAO,IAAI,CAAA;QACb,CAAC;QACD,MAAM,IAAI,GAAG,UAAU,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAA;QACjD,MAAM,UAAU,GAAG,oBAAoB,CAAC,KAAK,EAAE,SAAS,EAAE,QAAQ,CAAC,CAAA;QACnE,OAAO,CACL,6BACE,GAAG,EAAE,GAAG,IAAI,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,KAAK,EAAE,EACrC,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE;gBACL,QAAQ,EAAE,UAAU;gBACpB,IAAI;gBACJ,GAAG,EAAE,IAAI,CAAC,CAAC,CAAC,GAAG,SAAS;gBACxB,KAAK,EAAE,aAAa,GAAG,IAAI,GAAG,UAAU;gBACxC,MAAM,EAAE,WAAW,CAAC,KAAK,EAAE,SAAS,CAAC;gBACrC,OAAO,EAAE,MAAM;gBACf,UAAU,EAAE,QAAQ;gBACpB,KAAK,EAAE,SAAS,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO;gBAC9C,QAAQ;gBACR,QAAQ,EAAE,QAAQ;gBAClB,YAAY,EAAE,UAAU;gBACxB,UAAU,EAAE,QAAQ;gBACpB,aAAa,EAAE,MAAM;gBACrB,8DAA8D;gBAC9D,kDAAkD;gBAClD,GAAG,CAAC,UAAU;oBACZ,CAAC,CAAC,EAAE;oBACJ,CAAC,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;aACjE,IAEA,KAAK,CACF,CACP,CAAA;IACH,CAAC,CAAC,CACD,CACJ,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,WAAW,CAAA"}
+{"version":3,"file":"CladeLabels.js","sourceRoot":"","sources":["../../../src/components/tree/CladeLabels.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAErC,OAAO,EACL,UAAU,EACV,WAAW,EACX,aAAa,EACb,oBAAoB,EACpB,gBAAgB,GACjB,MAAM,oBAAoB,CAAA;AAI3B;;;;;GAKG;AACH,MAAM,WAAW,GAAG,QAAQ,CAAC,UAAU,EAAE,KAAK,EAA2B;IACvE,MAAM,EACJ,cAAc,EACd,gBAAgB,EAChB,SAAS,EACT,sBAAsB,EACtB,QAAQ,GACT,GAAG,KAAK,CAAA;IACT,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,IAAI,gBAAgB,KAAK,CAAC,EAAE,CAAC;QAC3B,OAAO,IAAI,CAAA;IACb,CAAC;IACD,MAAM,UAAU,GAAG,sBAAsB,GAAG,gBAAgB,CAAA;IAC5D,OAAO,CACL,0CACG,cAAc,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;QACnC,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,KAAK,CAAA;QACxC,IAAI,CAAC,KAAK,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,CAAC;YACpC,OAAO,IAAI,CAAA;QACb,CAAC;QACD,MAAM,IAAI,GAAG,UAAU,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAA;QACjD,MAAM,UAAU,GAAG,oBAAoB,CAAC,KAAK,EAAE,SAAS,EAAE,QAAQ,CAAC,CAAA;QACnE,OAAO,CACL,6BACE,GAAG,EAAE,GAAG,IAAI,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,KAAK,EAAE,EACrC,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE;gBACL,QAAQ,EAAE,UAAU;gBACpB,IAAI;gBACJ,GAAG,EAAE,IAAI,CAAC,CAAC,CAAC,GAAG,SAAS;gBACxB,KAAK,EAAE,sBAAsB,GAAG,IAAI,GAAG,UAAU;gBACjD,MAAM,EAAE,WAAW,CAAC,KAAK,EAAE,SAAS,CAAC;gBACrC,OAAO,EAAE,MAAM;gBACf,UAAU,EAAE,QAAQ;gBACpB,KAAK,EAAE,SAAS,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO;gBAC9C,QAAQ;gBACR,QAAQ,EAAE,QAAQ;gBAClB,YAAY,EAAE,UAAU;gBACxB,UAAU,EAAE,QAAQ;gBACpB,aAAa,EAAE,MAAM;gBACrB,8DAA8D;gBAC9D,kDAAkD;gBAClD,GAAG,CAAC,UAAU;oBACZ,CAAC,CAAC,EAAE;oBACJ,CAAC,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;aACjE,IAEA,KAAK,CACF,CACP,CAAA;IACH,CAAC,CAAC,CACD,CACJ,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,WAAW,CAAA"}

package/dist/components/tree/TreeCanvas.js

@@ -8,12 +8,12 @@ import TreeCanvasBlock from './TreeCanvasBlock.js';
 import { renderTreeMouseover } from './renderTreeMouseover.js';
 const TreeCanvas = observer(function ({ model }) {
     const ref = useRef(null);
-    const { height, blocksY, treeAreaWidth, scrollY, highResScaleFactor } = model;
+    const { height, blocksY, effectiveTreeAreaWidth, scrollY, highResScaleFactor, } = model;
     const onScrollY = useCallback((d) => {
         model.doScrollY(d);
     }, [model]);
     const { onMouseDown, onMouseUp } = useWheelScroll({ ref, onScrollY });
-    const canvasWidth = treeAreaWidth * highResScaleFactor;
+    const canvasWidth = effectiveTreeAreaWidth * highResScaleFactor;
     const canvasHeight = height * highResScaleFactor;
     const mouseoverRef = useCanvasAutorun({
         draw: ctx => {
@@ -28,7 +28,7 @@ const TreeCanvas = observer(function ({ model }) {
     return (React.createElement("div", { ref: ref, onMouseDown: onMouseDown, onMouseUp: onMouseUp, style: {
             height,
             position: 'relative',
-            width: treeAreaWidth,
+            width: effectiveTreeAreaWidth,
         } },
         React.createElement("div", { style: {
                 position: 'absolute',
@@ -43,7 +43,7 @@ const TreeCanvas = observer(function ({ model }) {
                 position: 'absolute',
                 top: 0,
                 left: 0,
-                width: treeAreaWidth,
+                width: effectiveTreeAreaWidth,
                 height,
                 zIndex: 1000,
                 pointerEvents: 'none',

package/dist/components/tree/TreeCanvas.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeCanvas.js","sourceRoot":"","sources":["../../../src/components/tree/TreeCanvas.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAElD,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAA;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAErC,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAA;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAA;AACxD,OAAO,WAAW,MAAM,kBAAmB,CAAA;AAC3C,OAAO,eAAe,MAAM,sBAAuB,CAAA;AACnD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAI9D,MAAM,UAAU,GAAG,QAAQ,CAAC,UAAU,EAAE,KAAK,EAA2B;IACtE,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IACxC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,kBAAkB,EAAE,GAAG,KAAK,CAAA;IAC7E,MAAM,SAAS,GAAG,WAAW,CAC3B,CAAC,CAAS,EAAE,EAAE;QACZ,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAA;IACpB,CAAC,EACD,CAAC,KAAK,CAAC,CACR,CAAA;IACD,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,GAAG,cAAc,CAAC,EAAE,GAAG,EAAE,SAAS,EAAE,CAAC,CAAA;IAErE,MAAM,WAAW,GAAG,aAAa,GAAG,kBAAkB,CAAA;IACtD,MAAM,YAAY,GAAG,MAAM,GAAG,kBAAkB,CAAA;IAChD,MAAM,YAAY,GAAG,gBAAgB,CAAC;QACpC,IAAI,EAAE,GAAG,CAAC,EAAE;YACV,IAAI,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;gBACnB,mBAAmB,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC,CAAA;YACrC,CAAC;QACH,CAAC;QACD,KAAK,EAAE,WAAW;QAClB,MAAM,EAAE,YAAY;QACpB,IAAI,EAAE,CAAC,KAAK,CAAC;KACd,CAAC,CAAA;IAEF,OAAO,CACL,6BACE,GAAG,EAAE,GAAG,EACR,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE;YACL,MAAM;YACN,QAAQ,EAAE,UAAU;YACpB,KAAK,EAAE,aAAa;SACrB;QAID,6BACE,KAAK,EAAE;gBACL,QAAQ,EAAE,UAAU;gBACpB,GAAG,EAAE,CAAC;gBACN,IAAI,EAAE,CAAC;gBACP,SAAS,EAAE,cAAc,OAAO,KAAK;gBACrC,UAAU,EAAE,WAAW;aACxB;YAEA,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CACpB,oBAAC,eAAe,IAAC,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,GAAI,CAC9D,CAAC;YACF,oBAAC,WAAW,IAAC,KAAK,EAAE,KAAK,GAAI,CACzB;QACN,gCACE,GAAG,EAAE,YAAY,EACjB,KAAK,EAAE,WAAW,EAClB,MAAM,EAAE,YAAY,EACpB,KAAK,EAAE;gBACL,QAAQ,EAAE,UAAU;gBACpB,GAAG,EAAE,CAAC;gBACN,IAAI,EAAE,CAAC;gBACP,KAAK,EAAE,aAAa;gBACpB,MAAM;gBACN,MAAM,EAAE,IAAI;gBACZ,aAAa,EAAE,MAAM;aACtB,GACD,CACE,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,UAAU,CAAA"}
+{"version":3,"file":"TreeCanvas.js","sourceRoot":"","sources":["../../../src/components/tree/TreeCanvas.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAElD,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAA;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAErC,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAA;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAA;AACxD,OAAO,WAAW,MAAM,kBAAmB,CAAA;AAC3C,OAAO,eAAe,MAAM,sBAAuB,CAAA;AACnD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAI9D,MAAM,UAAU,GAAG,QAAQ,CAAC,UAAU,EAAE,KAAK,EAA2B;IACtE,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IACxC,MAAM,EACJ,MAAM,EACN,OAAO,EACP,sBAAsB,EACtB,OAAO,EACP,kBAAkB,GACnB,GAAG,KAAK,CAAA;IACT,MAAM,SAAS,GAAG,WAAW,CAC3B,CAAC,CAAS,EAAE,EAAE;QACZ,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAA;IACpB,CAAC,EACD,CAAC,KAAK,CAAC,CACR,CAAA;IACD,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,GAAG,cAAc,CAAC,EAAE,GAAG,EAAE,SAAS,EAAE,CAAC,CAAA;IAErE,MAAM,WAAW,GAAG,sBAAsB,GAAG,kBAAkB,CAAA;IAC/D,MAAM,YAAY,GAAG,MAAM,GAAG,kBAAkB,CAAA;IAChD,MAAM,YAAY,GAAG,gBAAgB,CAAC;QACpC,IAAI,EAAE,GAAG,CAAC,EAAE;YACV,IAAI,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;gBACnB,mBAAmB,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC,CAAA;YACrC,CAAC;QACH,CAAC;QACD,KAAK,EAAE,WAAW;QAClB,MAAM,EAAE,YAAY;QACpB,IAAI,EAAE,CAAC,KAAK,CAAC;KACd,CAAC,CAAA;IAEF,OAAO,CACL,6BACE,GAAG,EAAE,GAAG,EACR,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE;YACL,MAAM;YACN,QAAQ,EAAE,UAAU;YACpB,KAAK,EAAE,sBAAsB;SAC9B;QAID,6BACE,KAAK,EAAE;gBACL,QAAQ,EAAE,UAAU;gBACpB,GAAG,EAAE,CAAC;gBACN,IAAI,EAAE,CAAC;gBACP,SAAS,EAAE,cAAc,OAAO,KAAK;gBACrC,UAAU,EAAE,WAAW;aACxB;YAEA,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CACpB,oBAAC,eAAe,IAAC,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,GAAI,CAC9D,CAAC;YACF,oBAAC,WAAW,IAAC,KAAK,EAAE,KAAK,GAAI,CACzB;QACN,gCACE,GAAG,EAAE,YAAY,EACjB,KAAK,EAAE,WAAW,EAClB,MAAM,EAAE,YAAY,EACpB,KAAK,EAAE;gBACL,QAAQ,EAAE,UAAU;gBACpB,GAAG,EAAE,CAAC;gBACN,IAAI,EAAE,CAAC;gBACP,KAAK,EAAE,sBAAsB;gBAC7B,MAAM;gBACN,MAAM,EAAE,IAAI;gBACZ,aAAa,EAAE,MAAM;aACtB,GACD,CACE,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,UAAU,CAAA"}

package/dist/components/tree/TreeCanvasBlock.js

@@ -21,9 +21,9 @@ const TreeCanvasBlock = observer(function ({ model, offsetY, }) {
     const [menu, setMenu] = useState();
     const { clickMap, anchor, hitTest, onMouseMove, onMouseLeave } = useTreeHover({ model, offsetY });
     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;
     const canvasHeight = height * highResScaleFactor;
@@ -76,7 +76,7 @@ const TreeCanvasBlock = observer(function ({ model, offsetY, }) {
                 width: hovered.maxX - hovered.minX,
                 height: hovered.maxY - hovered.minY,
             } })) : null,
-        anchor ? (React.createElement(BaseTooltip, { clientPoint: anchor.clientPoint }, anchor.value.name)) : null));
+        anchor ? (React.createElement(BaseTooltip, { clientPoint: anchor.clientPoint }, anchor.value.label ?? anchor.value.name)) : null));
 });
 export default TreeCanvasBlock;
 //# sourceMappingURL=TreeCanvasBlock.js.map

package/dist/components/tree/TreeCanvasBlock.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeCanvasBlock.js","sourceRoot":"","sources":["../../../src/components/tree/TreeCanvasBlock.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"TreeCanvasBlock.js","sourceRoot":"","sources":["../../../src/components/tree/TreeCanvasBlock.tsx"],"names":[],"mappings":"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"}

package/dist/components/tree/TreeOverview.js

@@ -12,10 +12,10 @@ import { drawTreeOverview, drawTreeOverviewBox, treeOverviewImage, } from './ren
  * moving across it costs are a blit and two boxes.
  */
 const TreeOverview = observer(function ({ model }) {
-    const { treeAreaWidth, overviewHeight, highResScaleFactor } = model;
+    const { effectiveTreeAreaWidth, overviewHeight, highResScaleFactor } = model;
     const theme = useTheme();
     const [hover, setHover] = useState();
-    const width = Math.round(treeAreaWidth * highResScaleFactor);
+    const width = Math.round(effectiveTreeAreaWidth * highResScaleFactor);
     const height = Math.round(overviewHeight * highResScaleFactor);
     const ref = useCanvasAutorun({
         draw: ctx => {
@@ -24,12 +24,17 @@ const TreeOverview = observer(function ({ model }) {
             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, 0, 0, image.width, image.height, 0, 0, box.width, box.height);
             }
@@ -60,7 +65,7 @@ const TreeOverview = observer(function ({ model }) {
             display: 'block',
             flexShrink: 0,
             cursor: 'pointer',
-            width: treeAreaWidth,
+            width: effectiveTreeAreaWidth,
             height: overviewHeight,
         }, onMouseMove: event => {
             const hit = model.treeOverviewHit(event.nativeEvent.offsetY);

package/dist/components/tree/TreeOverview.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeOverview.js","sourceRoot":"","sources":["../../../src/components/tree/TreeOverview.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"TreeOverview.js","sourceRoot":"","sources":["../../../src/components/tree/TreeOverview.tsx"],"names":[],"mappings":"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"}

package/dist/components/tree/TreePanel.js

@@ -2,8 +2,12 @@ import React from 'react';
 import { observer } from 'mobx-react';
 import TreeCanvas from './TreeCanvas.js';
 const TreePanel = observer(function ({ model }) {
-    const { treeAreaWidth } = model;
-    return (React.createElement("div", { style: { overflow: 'hidden', flexShrink: 0, width: treeAreaWidth } },
+    const { effectiveTreeAreaWidth } = model;
+    return (React.createElement("div", { style: {
+            overflow: 'hidden',
+            flexShrink: 0,
+            width: effectiveTreeAreaWidth,
+        } },
         React.createElement(TreeCanvas, { model: model })));
 });
 export default TreePanel;

package/dist/components/tree/TreePanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreePanel.js","sourceRoot":"","sources":["../../../src/components/tree/TreePanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAErC,OAAO,UAAU,MAAM,iBAAkB,CAAA;AAIzC,MAAM,SAAS,GAAG,QAAQ,CAAC,UAAU,EAAE,KAAK,EAA2B;IACrE,MAAM,EAAE,aAAa,EAAE,GAAG,KAAK,CAAA;IAC/B,OAAO,CACL,6BAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE;QACrE,oBAAC,UAAU,IAAC,KAAK,EAAE,KAAK,GAAI,CACxB,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,SAAS,CAAA"}
+{"version":3,"file":"TreePanel.js","sourceRoot":"","sources":["../../../src/components/tree/TreePanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAErC,OAAO,UAAU,MAAM,iBAAkB,CAAA;AAIzC,MAAM,SAAS,GAAG,QAAQ,CAAC,UAAU,EAAE,KAAK,EAA2B;IACrE,MAAM,EAAE,sBAAsB,EAAE,GAAG,KAAK,CAAA;IACxC,OAAO,CACL,6BACE,KAAK,EAAE;YACL,QAAQ,EAAE,QAAQ;YAClB,UAAU,EAAE,CAAC;YACb,KAAK,EAAE,sBAAsB;SAC9B;QAED,oBAAC,UAAU,IAAC,KAAK,EAAE,KAAK,GAAI,CACxB,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,SAAS,CAAA"}

package/dist/components/tree/TreeRuler.js

@@ -8,9 +8,9 @@ import ScaleBarSVG from './ScaleBarSVG.js';
 // scale bar: without one the branch lengths are drawn to a scale nothing
 // states.
 const TreeRuler = observer(({ model }) => {
-    const { treeAreaWidth, marginLeft, treeScaleBar: bar } = model;
+    const { effectiveTreeAreaWidth, marginLeft, treeScaleBar: bar } = model;
     const theme = useTheme();
-    return (React.createElement("div", { style: { flexShrink: 0, width: treeAreaWidth } }, bar ? (React.createElement("svg", { width: treeAreaWidth, height: h, style: { display: 'block' } },
+    return (React.createElement("div", { style: { flexShrink: 0, width: effectiveTreeAreaWidth } }, bar ? (React.createElement("svg", { width: effectiveTreeAreaWidth, height: h, style: { display: 'block' } },
         React.createElement(ScaleBarSVG, { bar: bar, marginLeft: marginLeft, y: h, color: theme.palette.text.primary }))) : null));
 });
 export default TreeRuler;

package/dist/components/tree/TreeRuler.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeRuler.js","sourceRoot":"","sources":["../../../src/components/tree/TreeRuler.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAErC,OAAO,EAAE,kBAAkB,IAAI,CAAC,EAAE,MAAM,oBAAoB,CAAA;AAC5D,OAAO,WAAW,MAAM,kBAAmB,CAAA;AAI3C,4EAA4E;AAC5E,2EAA2E;AAC3E,yEAAyE;AACzE,UAAU;AACV,MAAM,SAAS,GAAG,QAAQ,CAAC,CAAC,EAAE,KAAK,EAA2B,EAAE,EAAE;IAChE,MAAM,EAAE,aAAa,EAAE,UAAU,EAAE,YAAY,EAAE,GAAG,EAAE,GAAG,KAAK,CAAA;IAC9D,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IAExB,OAAO,CACL,6BAAK,KAAK,EAAE,EAAE,UAAU,EAAE,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,IAChD,GAAG,CAAC,CAAC,CAAC,CACL,6BAAK,KAAK,EAAE,aAAa,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;QAC/D,oBAAC,WAAW,IACV,GAAG,EAAE,GAAG,EACR,UAAU,EAAE,UAAU,EACtB,CAAC,EAAE,CAAC,EACJ,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,GACjC,CACE,CACP,CAAC,CAAC,CAAC,IAAI,CACJ,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,SAAS,CAAA"}
+{"version":3,"file":"TreeRuler.js","sourceRoot":"","sources":["../../../src/components/tree/TreeRuler.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAErC,OAAO,EAAE,kBAAkB,IAAI,CAAC,EAAE,MAAM,oBAAoB,CAAA;AAC5D,OAAO,WAAW,MAAM,kBAAmB,CAAA;AAI3C,4EAA4E;AAC5E,2EAA2E;AAC3E,yEAAyE;AACzE,UAAU;AACV,MAAM,SAAS,GAAG,QAAQ,CAAC,CAAC,EAAE,KAAK,EAA2B,EAAE,EAAE;IAChE,MAAM,EAAE,sBAAsB,EAAE,UAAU,EAAE,YAAY,EAAE,GAAG,EAAE,GAAG,KAAK,CAAA;IACvE,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IAExB,OAAO,CACL,6BAAK,KAAK,EAAE,EAAE,UAAU,EAAE,CAAC,EAAE,KAAK,EAAE,sBAAsB,EAAE,IACzD,GAAG,CAAC,CAAC,CAAC,CACL,6BACE,KAAK,EAAE,sBAAsB,EAC7B,MAAM,EAAE,CAAC,EACT,KAAK,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;QAE3B,oBAAC,WAAW,IACV,GAAG,EAAE,GAAG,EACR,UAAU,EAAE,UAAU,EACtB,CAAC,EAAE,CAAC,EACJ,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,GACjC,CACE,CACP,CAAC,CAAC,CAAC,IAAI,CACJ,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,SAAS,CAAA"}

package/dist/components/tree/cladeBrackets.d.ts

@@ -1,9 +1,9 @@
-import type { ResolvedClade } from '../../types.ts';
+import type { Clade, ResolvedClade } from '../../types.ts';
 export declare const bracketBarWidth = 3;
 export declare const bracketGap = 4;
 export declare const maxCladeGutterWidth = 140;
 /** whether a clade draws in the gutter: a bracket, or a highlight with a label */
-export declare function cladeInGutter(clade: ResolvedClade): boolean;
+export declare function cladeInGutter(clade: Pick<Clade, 'mark' | 'label'>): boolean;
 /** the pixel height of the rows a clade covers */
 export declare function cladeHeight(clade: ResolvedClade, rowHeight: number): number;
 /**
@@ -12,14 +12,12 @@ export declare function cladeHeight(clade: ResolvedClade, rowHeight: number): nu
  */
 export declare function cladeLabelHorizontal(clade: ResolvedClade, rowHeight: number, fontSize: number): boolean;
 /** the px between the left edge of the gutter and the label's own column */
-export declare function cladeLabelOffset(clade: ResolvedClade): number;
+export declare function cladeLabelOffset(clade: Pick<Clade, 'mark'>): number;
 /**
  * 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 declare function cladeGutterWidth({ clades, rowHeight, fontSize, }: {
-    clades: ResolvedClade[];
-    rowHeight: number;
-    fontSize: number;
-}): number;
+export declare function cladeGutterWidth(clades: Pick<Clade, 'mark' | 'label'>[]): number;

package/dist/components/tree/cladeBrackets.js

@@ -1,3 +1,4 @@
+import { labelFitFontSize } from '../../constants.js';
 import { measureTextCanvas } from '../../measureTextCanvas.js';
 // The bar of the bracket mark and the space around it, in px.
 export const bracketBarWidth = 3;
@@ -28,19 +29,19 @@ export function cladeLabelOffset(clade) {
 }
 /**
  * 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, }) {
+export function cladeGutterWidth(clades) {
     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/dist/components/tree/cladeBrackets.js.map

@@ -1 +1 @@
-{"version":3,"file":"cladeBrackets.js","sourceRoot":"","sources":["../../../src/components/tree/cladeBrackets.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAA;AAI9D,8DAA8D;AAC9D,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,CAAA;AAChC,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,CAAA;AAE3B,8EAA8E;AAC9E,kDAAkD;AAClD,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAA;AAEtC,kFAAkF;AAClF,MAAM,UAAU,aAAa,CAAC,KAAoB;IAChD,OAAO,CACL,KAAK,CAAC,IAAI,KAAK,SAAS,IAAI,CAAC,KAAK,CAAC,IAAI,KAAK,WAAW,IAAI,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAC1E,CAAA;AACH,CAAC;AAED,kDAAkD;AAClD,MAAM,UAAU,WAAW,CAAC,KAAoB,EAAE,SAAiB;IACjE,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,SAAS,CAAA;AACxD,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,oBAAoB,CAClC,KAAoB,EACpB,SAAiB,EACjB,QAAgB;IAEhB,OAAO,WAAW,CAAC,KAAK,EAAE,SAAS,CAAC,IAAI,QAAQ,CAAA;AAClD,CAAC;AAED,4EAA4E;AAC5E,MAAM,UAAU,gBAAgB,CAAC,KAAoB;IACnD,OAAO,KAAK,CAAC,IAAI,KAAK,SAAS;QAC7B,CAAC,CAAC,UAAU,GAAG,eAAe,GAAG,UAAU;QAC3C,CAAC,CAAC,UAAU,CAAA;AAChB,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,gBAAgB,CAAC,EAC/B,MAAM,EACN,SAAS,EACT,QAAQ,GAKT;IACC,IAAI,MAAM,GAAG,CAAC,CAAA;IACd,KAAK,MAAM,KAAK,IAAI,MAAM,EAAE,CAAC;QAC3B,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,CAAC;YAC1B,SAAQ;QACV,CAAC;QACD,MAAM,IAAI,GAAG,KAAK,CAAC,KAAK;YACtB,CAAC,CAAC,oBAAoB,CAAC,KAAK,EAAE,SAAS,EAAE,QAAQ,CAAC;gBAChD,CAAC,CAAC,iBAAiB,CAAC,KAAK,CAAC,KAAK,EAAE,QAAQ,CAAC;gBAC1C,CAAC,CAAC,QAAQ;YACZ,CAAC,CAAC,CAAC,CAAA;QACL,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE,gBAAgB,CAAC,KAAK,CAAC,GAAG,IAAI,GAAG,UAAU,CAAC,CAAA;IACxE,CAAC;IACD,4EAA4E;IAC5E,4CAA4C;IAC5C,OAAO,IAAI,CAAC,GAAG,CAAC,mBAAmB,EAAE,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAA;AACzD,CAAC"}
+{"version":3,"file":"cladeBrackets.js","sourceRoot":"","sources":["../../../src/components/tree/cladeBrackets.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AACrD,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAA;AAI9D,8DAA8D;AAC9D,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,CAAA;AAChC,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,CAAA;AAE3B,8EAA8E;AAC9E,kDAAkD;AAClD,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAA;AAEtC,kFAAkF;AAClF,MAAM,UAAU,aAAa,CAAC,KAAoC;IAChE,OAAO,CACL,KAAK,CAAC,IAAI,KAAK,SAAS,IAAI,CAAC,KAAK,CAAC,IAAI,KAAK,WAAW,IAAI,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAC1E,CAAA;AACH,CAAC;AAED,kDAAkD;AAClD,MAAM,UAAU,WAAW,CAAC,KAAoB,EAAE,SAAiB;IACjE,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,SAAS,CAAA;AACxD,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,oBAAoB,CAClC,KAAoB,EACpB,SAAiB,EACjB,QAAgB;IAEhB,OAAO,WAAW,CAAC,KAAK,EAAE,SAAS,CAAC,IAAI,QAAQ,CAAA;AAClD,CAAC;AAED,4EAA4E;AAC5E,MAAM,UAAU,gBAAgB,CAAC,KAA0B;IACzD,OAAO,KAAK,CAAC,IAAI,KAAK,SAAS;QAC7B,CAAC,CAAC,UAAU,GAAG,eAAe,GAAG,UAAU;QAC3C,CAAC,CAAC,UAAU,CAAA;AAChB,CAAC;AAED;;;;;;GAMG;AACH,MAAM,UAAU,gBAAgB,CAAC,MAAuC;IACtE,IAAI,MAAM,GAAG,CAAC,CAAA;IACd,KAAK,MAAM,KAAK,IAAI,MAAM,EAAE,CAAC;QAC3B,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,CAAC;YAC1B,SAAQ;QACV,CAAC;QACD,MAAM,IAAI,GAAG,KAAK,CAAC,KAAK;YACtB,CAAC,CAAC,iBAAiB,CAAC,KAAK,CAAC,KAAK,EAAE,gBAAgB,CAAC;YAClD,CAAC,CAAC,CAAC,CAAA;QACL,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE,gBAAgB,CAAC,KAAK,CAAC,GAAG,IAAI,GAAG,UAAU,CAAC,CAAA;IACxE,CAAC;IACD,4EAA4E;IAC5E,4CAA4C;IAC5C,OAAO,IAAI,CAAC,GAAG,CAAC,mBAAmB,EAAE,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAA;AACzD,CAAC"}

package/dist/components/tree/clickMap.d.ts

@@ -1,5 +1,7 @@
 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/dist/components/tree/clickMap.js.map

@@ -1 +1 @@
-{"version":3,"file":"clickMap.js","sourceRoot":"","sources":["../../../src/components/tree/clickMap.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,UAAU,CAAA;AAmB/B,uEAAuE;AACvE,+EAA+E;AAC/E,6DAA6D;AAC7D,MAAM,OAAO,aAAa;IAChB,QAAQ,GAAoB,IAAI,CAAA;IAChC,OAAO,GAAiB,EAAE,CAAA;IAElC,KAAK;QACH,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAA;QACpB,IAAI,CAAC,OAAO,GAAG,EAAE,CAAA;IACnB,CAAC;IAED,MAAM,CAAC,KAAiB;QACtB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;IAC1B,CAAC;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YAC9B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAA;QACtB,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,QAAQ,GAAG,IAAI,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAA;YACjD,KAAK,MAAM,KAAK,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;gBACjC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,CAAA;YACnE,CAAC;YACD,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAA;QACxB,CAAC;IACH,CAAC;IAED,MAAM,CAAC,GAAQ;QACb,OAAO,CACL,IAAI,CAAC,QAAQ;YACX,EAAE,MAAM,CAAC,GAAG,CAAC,IAAI,EAAE,GAAG,CAAC,IAAI,EAAE,GAAG,CAAC,IAAI,EAAE,GAAG,CAAC,IAAI,CAAC;aAC/C,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAE,CAAC,IAAI,EAAE,CACpC,CAAA;IACH,CAAC;CACF"}
+{"version":3,"file":"clickMap.js","sourceRoot":"","sources":["../../../src/components/tree/clickMap.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,UAAU,CAAA;AAqB/B,uEAAuE;AACvE,+EAA+E;AAC/E,6DAA6D;AAC7D,MAAM,OAAO,aAAa;IAChB,QAAQ,GAAoB,IAAI,CAAA;IAChC,OAAO,GAAiB,EAAE,CAAA;IAElC,KAAK;QACH,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAA;QACpB,IAAI,CAAC,OAAO,GAAG,EAAE,CAAA;IACnB,CAAC;IAED,MAAM,CAAC,KAAiB;QACtB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;IAC1B,CAAC;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YAC9B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAA;QACtB,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,QAAQ,GAAG,IAAI,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAA;YACjD,KAAK,MAAM,KAAK,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;gBACjC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,CAAA;YACnE,CAAC;YACD,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAA;QACxB,CAAC;IACH,CAAC;IAED,MAAM,CAAC,GAAQ;QACb,OAAO,CACL,IAAI,CAAC,QAAQ;YACX,EAAE,MAAM,CAAC,GAAG,CAAC,IAAI,EAAE,GAAG,CAAC,IAAI,EAAE,GAAG,CAAC,IAAI,EAAE,GAAG,CAAC,IAAI,CAAC;aAC/C,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAE,CAAC,IAAI,EAAE,CACpC,CAAA;IACH,CAAC;CACF"}

package/dist/components/tree/ellipsize.d.ts

@@ -0,0 +1,8 @@
+/**
+ * the longest prefix of `text`, plus an ellipsis, that measures at most
+ * `room` px
+ */
+export declare function ellipsize(measure: (text: string) => number, text: string, room: number): {
+    text: string;
+    width: number;
+};

package/dist/components/tree/ellipsize.js

@@ -0,0 +1,20 @@
+const ellipsis = '…';
+/**
+ * the longest prefix of `text`, plus an ellipsis, that measures at most
+ * `room` px
+ */
+export function ellipsize(measure, text, room) {
+    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 };
+}
+//# sourceMappingURL=ellipsize.js.map

package/dist/components/tree/ellipsize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ellipsize.js","sourceRoot":"","sources":["../../../src/components/tree/ellipsize.ts"],"names":[],"mappings":"AAAA,MAAM,QAAQ,GAAG,GAAG,CAAA;AAEpB;;;GAGG;AACH,MAAM,UAAU,SAAS,CACvB,OAAiC,EACjC,IAAY,EACZ,IAAY;IAEZ,MAAM,KAAK,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;IAC3B,IAAI,KAAK,IAAI,IAAI,EAAE,CAAC;QAClB,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,CAAA;IACxB,CAAC;IACD,KAAK,IAAI,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC;QAClE,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,EAAE,GAAG,QAAQ,CAAA;QACvD,MAAM,cAAc,GAAG,OAAO,CAAC,SAAS,CAAC,CAAA;QACzC,IAAI,cAAc,IAAI,IAAI,EAAE,CAAC;YAC3B,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,cAAc,EAAE,CAAA;QACnD,CAAC;IACH,CAAC;IACD,OAAO,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,CAAA;AAC/B,CAAC"}

package/dist/components/tree/renderTreeCanvas.js

@@ -4,6 +4,7 @@ import { getVisibleLeaves } from '../getVisibleLeaves.js';
 import { drawHighlightLabel, highlightLabelHeight, highlightRowFill, } from '../msa/renderHighlights.js';
 import { referenceColor } from '../overlayColors.js';
 import { bracketBarWidth, bracketGap } from './cladeBrackets.js';
+import { ellipsize } from './ellipsize.js';
 const radius = 2.5;
 const d = radius * 2;
 // How far outside a block a node's row-center can sit and still draw into it: a
@@ -219,7 +220,8 @@ function renderNodeLabels({ ctx, theme, offsetY, model, tipX, maxDepthToLeaf, bl
     setFontSize(ctx, fontSize);
 }
 function renderTreeLabels({ theme, model, offsetY, ctx, clickMap, tipX, maxDepthToLeaf, blockSizeYOverride, collapsedSet, }) {
-    const { fontSize, showBranchLenEffective: showBranchLen, tipLabelColors, blockSize, labelsAlignRight, drawTree, treeAreaWidthMinusMargin, marginLeft, noTree, labelWidthMap, labelWidthScale, } = model;
+    const { fontSize, showBranchLenEffective: showBranchLen, tipLabelColors, blockSize, labelsAlignRight, drawTree, treeAreaWidthMinusMargin, marginLeft, noTree, } = 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
@@ -245,19 +247,18 @@ function renderTreeLabels({ theme, model, offsetY, ctx, clickMap, tipX, maxDepth
             // 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) => 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) => 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();
@@ -265,29 +266,32 @@ function renderTreeLabels({ theme, model, offsetY, ctx, clickMap, tipX, maxDepth
                     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,
                 });
             }
@@ -312,9 +316,9 @@ function firstRow(rowIndices) {
 // branches. A clade spanning hundreds of rows crosses several blocks, so each
 // block draws the whole rectangle and the canvas takes the part that is its.
 function renderCladeHighlights({ ctx, model, offsetY, tipX, maxDepthToLeaf, blockSizeYOverride, }) {
-    const { resolvedClades, hierarchy, showBranchLenEffective: showBranchLen, rowHeight, treeAreaWidth, marginLeft, blockSize, } = model;
+    const { resolvedClades, hierarchy, showBranchLenEffective: showBranchLen, rowHeight, 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;
@@ -334,12 +338,12 @@ function renderCladeHighlights({ ctx, model, offsetY, tipX, maxDepthToLeaf, bloc
 // right of the tree area. The label beside it is DOM text on screen and a
 // <text> in the export, since the canvas layer has no rotation.
 function renderCladeBrackets({ ctx, model, theme, offsetY, blockSizeYOverride, }) {
-    const { resolvedClades, cladeGutterWidth, rowHeight, treeAreaWidth, marginLeft, blockSize, } = model;
+    const { resolvedClades, cladeGutterWidth, rowHeight, effectiveTreeAreaWidth, marginLeft, blockSize, } = model;
     if (cladeGutterWidth === 0) {
         return;
     }
     const by = blockSizeYOverride ?? blockSize;
-    const x = treeAreaWidth -
+    const x = effectiveTreeAreaWidth -
         marginLeft -
         cladeGutterWidth +
         bracketGap +
@@ -364,12 +368,12 @@ function renderCladeBrackets({ ctx, model, theme, offsetY, blockSizeYOverride, }
 // washed across the tree area under the labels, with each set's label in the
 // gutter at its first row
 function renderRowHighlights({ ctx, model, theme, offsetY, blockSizeYOverride, }) {
-    const { resolvedHighlights, rowTints, referenceRowIndex, rowHeight, treeAreaWidth, marginLeft, blockSize, } = model;
+    const { resolvedHighlights, rowTints, referenceRowIndex, rowHeight, effectiveTreeAreaWidth, marginLeft, blockSize, } = model;
     const by = blockSizeYOverride ?? blockSize;
     const pad = blockPad(model);
     const placed = [];
     const fillRow = (index) => {
-        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));
@@ -403,8 +407,8 @@ function renderRowHighlights({ ctx, model, theme, offsetY, blockSizeYOverride, }
                 label,
                 x: -marginLeft + 2,
                 y: first * rowHeight,
-                spanWidth: treeAreaWidth,
-                bounds: { min: -marginLeft, max: treeAreaWidth - marginLeft },
+                spanWidth: effectiveTreeAreaWidth,
+                bounds: { min: -marginLeft, max: effectiveTreeAreaWidth - marginLeft },
                 placed,
             });
         }
@@ -424,13 +428,13 @@ export function renderTreeCanvas({ model, clickMap, ctx, offsetY, theme, highRes
     setFontSize(ctx, fontSize);
     // memoized on the model and shared across the tree/bubble/label passes (and
     // across all tree blocks) rather than re-traversing the hierarchy in each
-    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);