archaeopteryx 3.5.0 → 3.6.0

package/archaeopteryx.js

@@ -20,7 +20,7 @@
  *
  */
 
-// v 3.5.0
+// v 3.6.0
 // 2026-09-10
 //
 // Archaeopteryx.js is a software tool for the visualization and
@@ -103,7 +103,7 @@ function (root, d3, forester, phyloXml) {
     // IIFE's own function name -- a plain object says what it is.)
     let archaeopteryx = {};
 
-    const VERSION = '3.5.0';
+    const VERSION = '3.6.0';
     const WEBSITE = 'https://cmzmasek.github.io/archaeopteryx-js/';
     const DESKTOP_WEBSITE = 'https://cmzmasek.github.io/archaeopteryx/';
     const SOURCE_WEBSITE = 'https://github.com/cmzmasek/archaeopteryx-js';
@@ -283,16 +283,24 @@ function (root, d3, forester, phyloXml) {
     const SVG_EXPORT_FORMAT = 'SVG';
     const TOP_AND_BOTTOM_BORDER_HEIGHT = 10;
     const TRANSITION_DURATION_DEFAULT = 750;
-    // Above this many nodes the first draw is deferred by one frame behind a
-    // "working" card, so the page shows it is busy instead of appearing frozen,
-    // and later redraws coalesce instead of running synchronously. Below it
-    // everything stays synchronous exactly as before -- the deferral buys
-    // nothing on a tree that draws in a few hundred milliseconds.
+    // A tree of at least this many nodes OPENS behind a "Drawing N nodes"
+    // card: its first draw is deferred by one frame, so the page shows it is
+    // busy instead of appearing frozen. A first draw cannot be timed before
+    // it happens, so this one stays a node count. Measured 2026-09-14 with
+    // Chrome's CPU slowed 6x (DevTools' low-end machine): a bare 5,000-node
+    // tree opens in about half a second there, 20,000 in a second, and a real
+    // annotated tree takes several times longer than a bare one its size.
     //
-    // Raised from 2000 to 3000 on 2026-09-11: a redraw of the 18,512-node tree
-    // went from ~4.2 s to ~1.9 s that day, so the size at which a draw is slow
-    // enough to need announcing moved up with it.
-    const BIG_TREE_NODES = 3000;
+    // This was BIG_TREE_NODES = 3000, which also decided the "Redrawing" card
+    // and whether redraws coalesce. Both are now decided otherwise -- see
+    // scheduleUpdate -- because node count does not predict a redraw: a
+    // 1,386-node tree with 1,428 domain architectures redraws slower than a
+    // 50,000-node tree without.
+    const OPENING_CARD_NODES = 5000;
+    // A redraw shows the "Redrawing" card when this tree's previous redraw
+    // took at least this long on this machine, measured to the frame that
+    // painted it. Below that the card would only flash.
+    const REDRAW_CARD_MS = 300;
     const WARNING = 'ArchaeopteryxJS: WARNING';
     const MESSAGE = 'ArchaeopteryxJS: ';
     const ERROR = 'ArchaeopteryxJS: ERROR: ';
@@ -581,11 +589,14 @@ function (root, d3, forester, phyloXml) {
     // Bumped by every launch() and destroy(), so a first draw deferred by a
     // launch that was since torn down or replaced knows not to run.
     let _launchSeq = 0;
-    // A redraw waiting for its frame (big trees only): the arguments of every
-    // scheduleUpdate() call made since, merged, so that one update() serves
-    // them all.
+    // A redraw waiting for its frame: the arguments of every scheduleUpdate()
+    // call made since, merged, so that one update() serves them all.
     let _pendingUpdate = null;
-    // Work to run once the pending redraw has happened (big trees only):
+    // How long this tree's last redraw took on this machine, ms, from the
+    // start of update() to the frame that painted it (timeRedraw); decides
+    // whether the next one shows the "Redrawing" card. 0 until timed.
+    let _redrawMs = 0;
+    // Work to run once the pending redraw has happened:
     // the viewport re-centring a zoom needs the new layout for.
     let _afterUpdate = [];
     // The viewport centre captured by the FIRST zoom step of a burst; the
@@ -1532,79 +1543,104 @@ function (root, d3, forester, phyloXml) {
         document.addEventListener('keydown', onKey);
     }
 
-    // One set of listeners on the tree group instead of five on every node.
+    // Hover and click find their node by POSITION, not by element.
     //
-    // These used to be attached in the node enter: click and contextmenu on
-    // each g.node, and mouseover/mousemove/mouseout on each
-    // circle.nodeCircleOptions. On an 18,512-node tree that is 92,560
-    // registrations on the first draw, and it measured 300-450 ms of one.
-    // Mouse events bubble, so one listener per type on the group does the same
-    // work -- find which node the event came from, and hand the handler its
-    // datum. The handlers never used `this`, which is what makes this a
-    // straight substitution rather than a rewrite.
+    // A node is not an element any more: branches, dots and shapes are a
+    // handful of batched paths (drawTreeGeometry), and a node has a <g> of its
+    // own only when something is drawn for it individually -- a label, a
+    // collapsed clade, a branch value. Every node used to carry an invisible
+    // 5px circle as its hover target; the hit area is that circle's, a radius
+    // of NODE_HIT_RADIUS in tree units (so it scales with the zoom as the
+    // circle did), looked up in a quadtree built on the first pointer event
+    // after each render.
     //
-    // Note it is mouseover/mouseout, NOT mouseenter/mouseleave: only the
-    // former pair bubbles, so only the former pair can be delegated.
+    // One listener per type on the svg rather than the tree group: the group
+    // only receives events over painted content, and a hit area is mostly
+    // empty space. Namespaced, so d3.zoom's own listeners on the same svg
+    // are left alone. A click on a node's own group -- its label, a collapsed
+    // clade's wedge -- takes that node first: a label is a much easier thing
+    // to aim at than a point.
     function attachNodeEventDelegation(group) {
+        let svg = d3.select(group.node().ownerSVGElement);
+        _hoverNode = null;
 
-        // d3 stores a node's datum on the element as __data__, which is all
-        // selection.datum() reads. Going straight to it avoids allocating a
-        // selection on every mousemove.
-        function datumOf(el) {
-            return el ? el.__data__ : null;
+        // Over the tree: on the tree group, or on the empty canvas around it --
+        // which is the full-size background rect, not the svg itself. NOT on
+        // the legends, the overview or the floating strips drawn over it.
+        function overTree(event) {
+            let t = event.target;
+            return t === svg.node() || group.node().contains(t)
+                || (t.classList !== undefined && t.classList.contains(BASE_BACKGROUND));
         }
 
-        // The hover target stays the invisible 5px circle rather than the whole
-        // node, or the tooltip would follow the labels too.
-        function hoverDatum(event) {
+        function nodeDatum(event) {
             let t = event.target;
-            if (!t || !t.classList || !t.classList.contains('nodeCircleOptions')) {
-                return null;
+            let g = (t && t.closest) ? t.closest('g.node') : null;
+            if (g && g.__data__ && group.node().contains(g)) {
+                return g.__data__;
             }
-            return datumOf(t.parentNode);
+            return overTree(event) ? nodeAtPointer(event) : null;
         }
 
-        // Click and the context menu take the whole node group, so the node's
-        // LABEL works as a target too -- a much easier thing to aim at than a
-        // 5px circle.
-        function nodeDatum(event) {
-            let t = event.target;
-            return datumOf(t && t.closest ? t.closest('g.node') : null);
+        function hover(event, d) {
+            if (d === _hoverNode) {
+                return;
+            }
+            if (_hoverNode) {
+                mouseout();
+            }
+            _hoverNode = d;
+            svg.style('cursor', d ? 'pointer' : null);
+            if (d) {
+                mouseover(event, d);
+            }
         }
 
-        group
-            .on('click', function (event) {
+        svg
+            .on('click.aptxnode', function (event) {
                 let d = nodeDatum(event);
                 if (d && _treeFn.clickEvent) {
                     _treeFn.clickEvent(event, d);
                 }
             })
-            .on('contextmenu', function (event) {
+            .on('contextmenu.aptxnode', function (event) {
                 let d = nodeDatum(event);
                 if (d && _treeFn.clickEvent) {
                     event.preventDefault(); // ours instead of the browser's menu
                     _treeFn.clickEvent(event, d);
                 }
             })
-            .on('mouseover', function (event) {
-                let d = hoverDatum(event);
-                if (d) {
-                    mouseover(event, d);
-                }
-            })
-            .on('mousemove', function (event) {
-                let d = hoverDatum(event);
+            .on('mousemove.aptxnode', function (event) {
+                let d = overTree(event) ? nodeAtPointer(event) : null;
+                hover(event, d);
                 if (d) {
                     mousemove(event, d);
                 }
             })
-            .on('mouseout', function (event) {
-                if (hoverDatum(event)) {
-                    mouseout();
-                }
+            .on('mouseleave.aptxnode', function (event) {
+                hover(event, null);
             });
     }
 
+    // The node whose hit area holds the pointer, nearest first; null if none.
+    function nodeAtPointer(event) {
+        if (!_svgGroup || _hitNodes.length === 0) {
+            return null;
+        }
+        if (!_nodeIndex) {
+            _nodeIndex = d3.quadtree()
+                .x(function (d) {
+                    return layoutPointXY(d)[0];
+                })
+                .y(function (d) {
+                    return layoutPointXY(d)[1];
+                })
+                .addAll(_hitNodes);
+        }
+        let p = d3.pointer(event, _svgGroup.node());
+        return _nodeIndex.find(p[0], p[1], NODE_HIT_RADIUS) || null;
+    }
+
     function mouseout() {
         hideHoverGlow();
         // Fade only. Emptying the tooltip here collapsed it to nothing but its
@@ -2556,20 +2592,25 @@ function (root, d3, forester, phyloXml) {
 
     // --------------------------------------------------------------
 
-    // Redraw -- at once on a small tree, coalesced and deferred on a big one.
-    //
-    // Two things this buys on a big tree, both measured on the 18,512-node
-    // BV-BRC tree where one update() costs over a second:
+    // Redraw on the next animation frame, coalescing every request made
+    // before it -- for a tree of any size.
     //
     //   - Coalescing. Several handlers redraw more than once per click:
     //     nine of them run search0(), search1() and update() -- three full
     //     redraws, since runSearches() ends in its own update() -- and the
     //     Visualizations and Auto-hide toggles call update() twice back to
-    //     back. A slider drag fires an update per input event. Every call
-    //     made in the same tick now collapses into ONE update().
-    //   - The yield. The redraw runs behind the "working" card on the next
-    //     frame, so a click is answered by a visible card instead of a page
-    //     that has stopped responding.
+    //     back. A slider drag fires an update per input event, a wheel flick
+    //     one per notch. Every call before the frame collapses into ONE
+    //     update(). This was for trees over 3,000 nodes only, and below that
+    //     every notch redrew on its own: with the CPU slowed 6x, a ten-notch
+    //     flick froze a 3,000-node tree for 0.77 s and a coalesced 5,000-node
+    //     tree for 0.39 s. The wait is one frame, which is not visible.
+    //   - The card. When this tree's previous redraw took REDRAW_CARD_MS or
+    //     more on this machine, the redraw waits for the "Redrawing" card to
+    //     paint first, so a click is answered by a visible card instead of a
+    //     page that has stopped responding. Timed, not counted: a redraw's
+    //     cost depends on the machine and on what the tree carries as much
+    //     as on its size.
     //
     // Only for callers that read nothing back afterwards. zoomToFit() and
     // the layout switches update() and then read the fresh layout in the
@@ -2584,11 +2625,6 @@ function (root, d3, forester, phyloXml) {
             runAfterUpdate();   // nothing pending; anything queued can run now
             return;
         }
-        if (!_basicTreeProperties || _basicTreeProperties.nodeCount < BIG_TREE_NODES) {
-            update(source, transitionDuration, doNotRecalculateWidth);
-            runAfterUpdate();
-            return;
-        }
         let dur = (transitionDuration === undefined) ? TRANSITION_DURATION_DEFAULT : transitionDuration;
         if (_pendingUpdate) {
             _pendingUpdate.source = _pendingUpdate.source || source;
@@ -2598,24 +2634,35 @@ function (root, d3, forester, phyloXml) {
         }
         _pendingUpdate = {source: source, duration: dur, noWidth: doNotRecalculateWidth === true};
         let seq = _launchSeq;
-        showBusy(_container, 'Redrawing ' + _basicTreeProperties.nodeCount.toLocaleString() + ' nodes');
+        let card = _redrawMs >= REDRAW_CARD_MS && _basicTreeProperties !== null;
+        if (card) {
+            showBusy(_container, 'Redrawing ' + _basicTreeProperties.nodeCount.toLocaleString() + ' nodes');
+        }
+        // After the paint even without the card: a redraw run INSIDE the next
+        // frame never merged the wheel notch arriving in that frame, and a
+        // ten-notch flick measured about twice as long on a 50,000-node tree
+        // (0.9 s against 0.47 s). One frame later is not visible.
         afterPaint(function () {
             let p = _pendingUpdate;
             _pendingUpdate = null;
             if (seq !== _launchSeq || !p) {
                 return;   // the view was torn down or replaced meanwhile
             }
+            let start = performance.now();
             try {
                 update(p.source, p.duration, p.noWidth);
                 runAfterUpdate();
             } finally {
-                hideBusy();
+                if (card) {
+                    hideBusy();
+                }
             }
+            timeRedraw(start, seq, 1);
         });
     }
 
-    // Run fn once the redraw has happened: now, if none is pending (a small
-    // tree, or nothing scheduled), else after the deferred update() runs.
+    // Run fn once the redraw has happened: now, if none is pending, else
+    // after the deferred update() runs.
     function afterUpdate(fn) {
         if (_pendingUpdate) {
             _afterUpdate.push(fn);
@@ -2891,51 +2938,24 @@ function (root, d3, forester, phyloXml) {
 
         updateButtonEnabledState();
 
+        // Only the nodes with something drawn for them individually get a
+        // <g>: a label, a collapsed clade, a branch value or a support dot
+        // (prepareNodeDrawing). Branches, dots, shapes and halos are batched
+        // paths, drawn below by drawTreeGeometry, which also places these
+        // groups. On a 50,000-node tree with its labels auto-hidden that is
+        // tens of groups, not 50,000.
         let node = _svgGroup.selectAll('g.node')
-            .data(nodes, function (d) {
-                return d.id || (d.id = ++_i);
+            .data(prepareNodeDrawing(nodes), function (d) {
+                return d.id;
             });
 
-        // No listeners here: click, contextmenu and the hover trio are
-        // delegated once to the tree group -- see attachNodeEventDelegation().
+        // No listeners and no children here: hover and click find their node
+        // by position (attachNodeEventDelegation), and the children are
+        // created on demand by drawCollapsedClades and syncOptionalNodeChildren.
         let nodeEnter = node.enter().append('g')
             .attr('class', 'node')
-            .attr('transform', function () {
-                return 'translate(' + source.y0 + ',' + source.x0 + ')';
-            })
             .style('cursor', 'default');
 
-
-        // Only the three elements EVERY node needs are created here. The other
-        // six -- the found halo, the four text labels and the support dot --
-        // are created on demand by syncOptionalNodeChildren() below.
-        //
-        // They used to be appended unconditionally, nine elements per node
-        // whether or not they would ever show anything, and on a real BV-BRC
-        // tree (18,512 nodes) that was 222,197 SVG elements of which HALF were
-        // inert: 74,052 of 74,064 <text> elements empty, 43,413 circles at
-        // r=0. The cost is not creating them -- allocating that many elements
-        // takes about two seconds -- it is that every later redraw walks them
-        // all, setting attributes and running an accessor per element. Dropping
-        // the inert half measured 2.7x faster redraws.
-        nodeEnter.append('path')
-            .attr('d', 'M0,0');
-
-        nodeEnter.append('circle')
-            .attr('class', 'nodeCircle')
-            .attr('r', 0);
-
-        nodeEnter.append('circle')
-            .style('cursor', 'pointer')
-            .style('opacity', '0')
-            .attr('class', 'nodeCircleOptions')
-            .attr('r', function (d) {
-                if (d.parent) {
-                    return 5;
-                }
-                return 0;
-            });
-
         // Grab the exit selection BEFORE merging. In d3 v3 the exit selection
         // survived on the merged result, but in v4+ merge() returns a NEW
         // selection with no exit, so calling .exit() after this line silently
@@ -3128,54 +3148,10 @@ function (root, d3, forester, phyloXml) {
                 }
             });
 
-        if (anySearchHits()) {
-        node.select('circle.foundHalo')
-            .attr('class', function (d) {
-                // the animated class ONLY on hits: hundreds of idle infinite
-                // animations otherwise composite on every frame for the life
-                // of the page
-                return isNodeFound(d) ? 'foundHalo aptx-found-halo' : 'foundHalo';
-            })
-            .attr('r', function (d) {
-                // the trough must clear the node dot, or a medium-sized node
-                // buries its own pulse (the halo is UNDER the node); the CSS
-                // 2.5x peak then keeps the desktop's 4->10px pulse ratio
-                return isNodeFound(d) ? Math.max(4, makeNodeSize(d) + 2) : 0;
-            })
-            .style('fill', function (d) {
-                return isNodeFound(d) ? getFoundColor(d) : 'none';
-            });
-        }
-
-        // One pass, and the fill colour computed once.
-        //
-        // This was four chained .attr/.style calls, so d3 walked all 18.5k
-        // circles four times; and makeNodeFillColor() was called TWICE per
-        // node -- once to decide whether the dot collapses to r=0, once for
-        // the fill itself -- which is not a cheap accessor: it checks the
-        // search hits, the node events, the visualization colour and the
-        // node's own style.
-        //
-        // The union of the two conditions that need the colour is just the
-        // fill condition, since (showVisualizations && !showNodeEvents)
-        // implies showVisualizations. So it is computed once when needed and
-        // reused, and left null when neither branch wants it.
-        node.select('circle.nodeCircle').each(function (d) {
-            let fill = (_state.showVisualizations || _state.showNodeEvents
-                || isNodeFound(d) || isNodeSelected(d)) ? makeNodeFillColor(d) : null;
-            let r = ((_state.showVisualizations && !_state.showNodeEvents)
-                && (fill === _state.backgroundColorDefault)) ? 0 : makeNodeSize(d);
-            this.setAttribute('r', r);
-            this.style.stroke = makeNodeStrokeColor(d);
-            this.style.strokeWidth = _state.branchWidthDefault;
-            this.style.fill = (fill === null) ? _state.backgroundColorDefault : fill;
-        });
-
-
-        // Dim Non-Matches: one opacity on the node GROUP dims its labels, dot,
-        // shape and branch-data numbers together; the branch lines are separate
-        // path.link elements and keep their full colour, as on the desktop.
-        // Hits and selected nodes (getFoundColor) are never dimmed -- and
+        // Dim Non-Matches: one opacity on the node GROUP dims its labels and
+        // branch-data numbers together, and drawTreeGeometry gives its dot and
+        // shape the same opacity; the branch lines keep their full colour, as
+        // on the desktop. Hits and selected nodes (getFoundColor) are never dimmed -- and
         // neither is a collapsed clade holding one: its wedge and label live in
         // the clade node's group, and the clade node itself is never a hit.
         node.style('opacity', function (d) {
@@ -3185,58 +3161,39 @@ function (root, d3, forester, phyloXml) {
             return DIM_NON_MATCH_OPACITY;
         });
 
-        let nodeUpdate = animateOrSet(node, transitionDuration)
-            .attr('transform', function (d) {
-                return nodeTransform(d);
-            });
-
-        // The same rule for a node's CHILD elements: derive from the transition
-        // when animating, else select straight off the node and interrupt any
-        // animation still on that child.
+        // A node's CHILD elements animate (or are set outright) on their own;
+        // the group itself is moved by drawTreeGeometry, in step with the
+        // branches.
         function nodeChild(selector) {
-            return transitionDuration > 0
-                ? nodeUpdate.select(selector)
-                : node.select(selector).interrupt();
+            return animateOrSet(node.select(selector), transitionDuration);
         }
 
         nodeChild('text')
             .style('fill-opacity', 1);
 
+        // The texts were computed by prepareNodeDrawing, which decided on them
+        // which groups exist. Guarded, not just passed a null accessor:
+        // syncOptionalNodeChildren has already removed these elements when the
+        // switch is off, and a .select() that finds nothing still walks every
+        // group to find out.
         nodeChild('text.extlabel')
             .text(function (d) {
-                return d._extLabelText;   // computed in syncOptionalNodeChildren
+                return d._extLabelText;
             });
-
-        // Guarded, not just passed a null accessor: syncOptionalNodeChildren
-        // has already removed these elements when the switch is off, and a
-        // .select() that finds nothing still walks every node to find out.
         if (_state.showBranchLengthValues) {
-            nodeChild('text.bllabel').text(makeBranchLengthLabel);
+            nodeChild('text.bllabel').text(function (d) {
+                return d._blText;
+            });
         }
         if (_state.showConfidenceValues || _state.showMadValues) {
-            nodeChild('text.conflabel').text(makeConfidenceValuesLabel);
+            nodeChild('text.conflabel').text(function (d) {
+                return d._confText;
+            });
         }
         if (_state.showBranchEvents) {
-            nodeChild('text.brancheventlabel').text(makeBranchEventsLabel);
-        }
-
-        let drawShapes = _state.showVisualizations || stylesActive();
-        nodeChild('path')
-            .style('stroke', drawShapes ? makeNodeStrokeColor : null)
-            .style('stroke-width', _state.branchWidthDefault)
-            .style('fill', drawShapes ? makeNodeFillColor : null)
-            .attr('d', drawShapes ? makeNodeVisShape : null);
-
-        // Collapse the vis shape on internal nodes that no longer have one.
-        // This used to be a node.each() that built a fresh d3 selection AND a
-        // fresh transition per internal node -- 5,265 of them on a big tree,
-        // and a full 18k-node walk even when drawShapes made it a no-op. One
-        // filtered selection with one transition does the same thing.
-        if (!drawShapes) {
-            animateOrSet(node.filter(function (d) {
-                return d.children && makeNodeVisShape(d) === null;
-            }).select('path'), transitionDuration)
-                .attr('d', 'M0,0');
+            nodeChild('text.brancheventlabel').text(function (d) {
+                return d._eventText;
+            });
         }
 
         // Departing nodes are removed OUTRIGHT rather than on the end of a
@@ -3249,70 +3206,7 @@ function (root, d3, forester, phyloXml) {
         // way; nodes now match.
         nodeExitSelection.remove();
 
-        // No .attr('d', elbow) before the join: it ran elbow() for all 18k+
-        // links against the PRE-JOIN data and the transition below overwrote
-        // the result, so every redraw computed the same geometry twice.
-        // stroke-width used to ride along here and is applied on the merged
-        // selection instead -- it is the only place existing links get it.
-        let link = _svgGroup.selectAll('path.link')
-            .data(links, function (d) {
-                return d.target.id;
-            });
-
-        // The reference node for the insert below, resolved ONCE.
-        //
-        // d3's insert(name, before) takes `before` as a SELECTOR STRING and
-        // then runs parent.querySelector(before) for EVERY element it
-        // inserts. With 18.5k links going into a group that already holds
-        // 18.5k node <g>s, that is 18.5k full-subtree queries and it
-        // dominated the first draw: measured 1,883 ms against 66 ms for the
-        // same inserts with the lookup hoisted -- 28x, and about a third of
-        // the time to open the biggest demo tree.
-        //
-        // Passing a function instead makes d3 use its return value as-is. The
-        // result is identical: every link still lands before the first node
-        // group, in the same order, so links stay painted behind nodes. It
-        // must be re-resolved each update because the node join above may
-        // have just created or removed those groups.
-        let linkBefore = _svgGroup.node().querySelector('g');
-
-        let linkEnter = link.enter().insert('path', function () {
-            return linkBefore;
-        })
-            .attr('class', 'link')
-            .attr('fill', 'none')
-            .attr('stroke-width', makeBranchWidth)
-            .attr('stroke', makeBranchColor)
-            .attr('d', function () {
-                let o = {
-                    x: source.x0, y: source.y0,
-                    ux: source.ux, uy: source.uy
-                };
-                return elbow({
-                    source: o, target: o
-                });
-            });
-
-        let linkExitSelection = link.exit(); // before the merge -- see nodeExitSelection
-
-        link = linkEnter.merge(link);
-
-        link.attr('stroke-width', makeBranchWidth);
-
-        animateOrSet(link, transitionDuration)
-            .attr('stroke', makeBranchColor)
-            .attr('d', elbow);
-
-        linkExitSelection
-            .attr('d', function () {
-                let o = {
-                    x: source.x, y: source.y
-                };
-                return elbow({
-                    source: o, target: o
-                });
-            })
-            .remove();
+        drawTreeGeometry(nodes, links, node, source, transitionDuration);
 
 
         // Aligned phylogram: a faint extension from each tip out to the column
@@ -3326,9 +3220,8 @@ function (root, d3, forester, phyloXml) {
         // while these are built from rectangular geometry and would be drawn as
         // straight lines right across the circular tree.
         //
-        // The class is deliberately NOT "link": these paths live under
-        // _svgGroup, so that name put them in the way of selectAll('path.link')
-        // -- the main link data-join, and the overview's miniature.
+        // Inserted before the tree group's first <g>, so they paint under the
+        // batched branches (drawTreeGeometry's layers) and the node groups.
         _svgGroup.selectAll('g.aptx-align-ext').remove();
         let alignedRect = !radialDisplay() && _state.phylogram && _state.alignPhylogram;
         let tipGuides = alignedRect && _state.showExternalLabels
@@ -3576,7 +3469,9 @@ function (root, d3, forester, phyloXml) {
         return _state.labelColorDefault;
     };
 
-    let makeNodeVisShape = function (node) {
+    // The d3 symbol type a node is drawn as, or null for none. Drawn at the
+    // node's position, at nodeSymbolArea(), by drawTreeGeometry.
+    function nodeShapeType(node) {
         if (isNodeFound(node) || isNodeSelected(node)
             || (_state.showNodeEvents && node.events && (node.events.duplications || node.events.speciations))) {
             return null;
@@ -3586,16 +3481,16 @@ function (root, d3, forester, phyloXml) {
             let value = forester.visualizationNodeValue(node, vis);
             if (value !== null) {
                 node.hasVis = true;
-                return d3.symbol().type(d3SymbolType(vis.shapeScale(value))).size(nodeSymbolArea())();
+                return d3SymbolType(vis.shapeScale(value));
             }
         }
         let style = nodeStyle(node);
         if (style && style.shape) {
             node.hasVis = true;
-            return d3.symbol().type(d3SymbolType(style.shape)).size(nodeSymbolArea())();
+            return d3SymbolType(style.shape);
         }
         return null;
-    };
+    }
 
         // ONE colour visualization drives both the label and the node fill -- these
     // were two identical code paths over two identical maps. Returns null when
@@ -3822,6 +3717,40 @@ function (root, d3, forester, phyloXml) {
             || (_foundNodes1 && _foundNodes1.size > 0);
     }
 
+    // What each displayed node draws individually, decided over plain objects
+    // before any DOM is touched: the texts of its labels and whether it wants
+    // a support dot. Returns the nodes that need a <g> -- those with any of
+    // them, and every collapsed clade (its wedge and label). The rest are
+    // drawn entirely by drawTreeGeometry's batched paths.
+    function prepareNodeDrawing(nodes) {
+        let wantBl = _state.showBranchLengthValues === true;
+        let wantConf = _state.showConfidenceValues === true || _state.showMadValues === true;
+        let wantEvent = _state.showBranchEvents === true;
+        let wantDot = _state.showSupportDots === true;
+        let asText = function (v) {
+            return (v === undefined || v === null) ? '' : String(v);
+        };
+        let drawn = [];
+        for (let i = 0, len = nodes.length; i !== len; ++i) {
+            let d = nodes[i];
+            if (!d.id) {
+                d.id = ++_i;
+            }
+            // Empty is the common case on a big tree: Auto-hide Labels blanks
+            // them exactly when there are most nodes to blank.
+            d._extLabelText = (!_state.dynahide || !d.hide) ? (makeNodeLabel(d) || '') : '';
+            d._blText = wantBl ? asText(makeBranchLengthLabel(d)) : '';
+            d._confText = wantConf ? asText(makeConfidenceValuesLabel(d)) : '';
+            d._eventText = wantEvent ? asText(makeBranchEventsLabel(d)) : '';
+            d._suppDot = wantDot && showSupportDot(d);
+            if (d._extLabelText !== '' || d._blText !== '' || d._confText !== ''
+                || d._eventText !== '' || d._suppDot || isCollapsed(d)) {
+                drawn.push(d);
+            }
+        }
+        return drawn;
+    }
+
     function syncOptionalNodeChildren(node) {
         let wantBl = _state.showBranchLengthValues === true;
         let wantConf = _state.showConfidenceValues === true || _state.showMadValues === true;
@@ -3855,83 +3784,59 @@ function (root, d3, forester, phyloXml) {
             dropAll('circle.suppdot');
         }
 
-        // No search running means no halo anywhere -- one pass instead of
-        // 18,512 set lookups plus 18,512 DOM queries.
-        let anyFound = anySearchHits();
-        if (!anyFound) {
-            dropAll('circle.foundHalo');
-        }
-
-        // Raw DOM inside the loop, not d3 selections: this runs once per node
-        // per redraw, and wrapping each node in a d3 selection just to ask
+        // Raw DOM inside the loop, not d3 selections: this runs once per group
+        // per redraw, and wrapping each group in a d3 selection just to ask
         // whether a child exists costs more than the question is worth.
         let font = _state.defaultFont;
-        node.each(function (d) {
-            let g = this;
-
-            // The label the update is about to draw. Empty is the common case
-            // on a big tree: Auto-hide Labels blanks them exactly when there
-            // are most nodes to blank.
-            d._extLabelText = (!_state.dynahide || !d.hide) ? (makeNodeLabel(d) || '') : '';
-            let ext = g.querySelector('text.extlabel');
-            if (d._extLabelText !== '') {
-                if (!ext) {
-                    d3.select(g).append('text')
-                        .attr('class', 'extlabel')
-                        .attr('text-anchor', d.children ? 'end' : 'start')
-                        .style('font-family', font)
-                        .style('fill-opacity', 0.5);
-                }
-            } else if (ext) {
-                ext.remove();
-            }
-
-            if (anyFound) {
-                // The pulse behind a search hit. It must be FIRST in the group
-                // so everything else draws over it -- appending would put it
-                // on top.
-                let halo = g.querySelector('circle.foundHalo');
-                if (isNodeFound(d)) {
-                    if (!halo) {
-                        d3.select(g).insert('circle', ':first-child')
-                            .attr('class', 'foundHalo aptx-found-halo')
-                            .attr('r', 0)
-                            .style('pointer-events', 'none');
-                    }
-                } else if (halo) {
-                    halo.remove();
+        let sync = function (g, selector, wanted, create) {
+            let el = g.querySelector(selector);
+            if (wanted) {
+                if (!el) {
+                    create(d3.select(g));
                 }
+            } else if (el) {
+                el.remove();
             }
-
-            if (wantBl && !g.querySelector('text.bllabel')) {
-                d3.select(g).append('text')
-                    .attr('class', 'bllabel')
+        };
+        node.each(function (d) {
+            let g = this;
+            sync(g, 'text.extlabel', d._extLabelText !== '', function (sel) {
+                sel.append('text')
+                    .attr('class', 'extlabel')
+                    .attr('text-anchor', d.children ? 'end' : 'start')
                     .style('font-family', font)
                     .style('fill-opacity', 0.5);
+            });
+            if (wantBl) {
+                sync(g, 'text.bllabel', d._blText !== '', function (sel) {
+                    sel.append('text')
+                        .attr('class', 'bllabel')
+                        .style('font-family', font)
+                        .style('fill-opacity', 0.5);
+                });
             }
-            if (wantConf && !g.querySelector('text.conflabel')) {
-                d3.select(g).append('text')
-                    .attr('class', 'conflabel')
-                    .attr('text-anchor', 'middle')
-                    .style('font-family', font);
+            if (wantConf) {
+                sync(g, 'text.conflabel', d._confText !== '', function (sel) {
+                    sel.append('text')
+                        .attr('class', 'conflabel')
+                        .attr('text-anchor', 'middle')
+                        .style('font-family', font);
+                });
             }
-            if (wantEvent && !g.querySelector('text.brancheventlabel')) {
-                d3.select(g).append('text')
-                    .attr('class', 'brancheventlabel')
-                    .attr('text-anchor', 'middle')
-                    .style('font-family', font);
+            if (wantEvent) {
+                sync(g, 'text.brancheventlabel', d._eventText !== '', function (sel) {
+                    sel.append('text')
+                        .attr('class', 'brancheventlabel')
+                        .attr('text-anchor', 'middle')
+                        .style('font-family', font);
+                });
             }
             if (wantDot) {
-                let dot = g.querySelector('circle.suppdot');
-                if (showSupportDot(d)) {
-                    if (!dot) {
-                        d3.select(g).append('circle')
-                            .attr('class', 'suppdot')
-                            .style('pointer-events', 'none');
-                    }
-                } else if (dot) {
-                    dot.remove();
-                }
+                sync(g, 'circle.suppdot', d._suppDot, function (sel) {
+                    sel.append('circle')
+                        .attr('class', 'suppdot')
+                        .style('pointer-events', 'none');
+                });
             }
         });
     }
@@ -4241,11 +4146,6 @@ function (root, d3, forester, phyloXml) {
         return [d.y, d.x];
     }
 
-    function nodeTransform(d) {
-        let p = layoutPointXY(d);
-        return 'translate(' + p[0] + ',' + p[1] + ')';
-    }
-
     // The screen angle (radians, y down) of the node's spoke: the direction
     // its incoming branch points away from the centre. Circular derives it
     // from the cluster position; unrooted carries it from the equal-angle
@@ -4285,20 +4185,436 @@ function (root, d3, forester, phyloXml) {
         return 'rotate(' + labelAngleDeg(d) + ') translate(' + mid + ',0)' + (labelFlip(d) ? ' rotate(180)' : '');
     }
 
-    let elbow = function (d) {
+    // ===================== Batched tree geometry =====================
+    // The branches, node dots, node shapes and search halos are drawn as a
+    // handful of paths, not as elements per node.
+    //
+    // Every node used to own a <g> holding a shape path (usually empty), a
+    // dot circle and an invisible 5px hover circle, and every branch its own
+    // path: 250,374 elements for a 50,000-node tree. Measured 2026-09-14 in
+    // headless Chrome (test_trees/bench.html), dragging that tree ran at about
+    // 12 frames a second -- and it was the node groups, not the branches:
+    // hiding the groups made the same drag nearly smooth, and hiding them
+    // with the branches merged into one path made it 60. The browser pays per
+    // ELEMENT painted, not per segment drawn.
+    //
+    // So: one path per distinct branch style (colour, width), and one per
+    // distinct shape or dot style (fill, stroke, dimmed), in layers under the
+    // node groups -- which exist only for nodes with something drawn
+    // individually (prepareNodeDrawing). Styles, not nodes, set the element
+    // count: an uncoloured tree is ONE branch path however big it is. Where
+    // dots of different styles overlap, the later style now paints on top,
+    // where tree order used to decide.
+    //
+    // Animation moves every node from where it was last drawn to where it
+    // goes, and each frame redraws the paths and places the groups from those
+    // positions, so branches, dots and labels move as one. The circular layout
+    // interpolates angle and radius, so nodes sweep along the circle; d3's
+    // path-string interpolation used to cut straight across it.
+
+    const NODE_HIT_RADIUS = 5;   // tree units: the radius of the hover circle every node used to carry
+    const OUTLINED_DOTS_MAX = 2000;   // outlined dots (hits, selection) drawn one element each up to this many
+    const ANIMATED_HALOS_MAX = 1000;  // search-hit halos pulse up to this many hits; past it they are still
+    const HALO_REST_OPACITY = 0.35;   // a halo's opacity at rest: the pulse's ends, and a still halo
+    let _geomLayers = null;      // {branches, halos, shapes, dots}: the layer <g>s at the bottom of the tree group
+    let _drawnGeom = null;       // the positions last drawn: {mode, nodes, a, b}, for the next animation to start from
+    let _nodeIndex = null;       // quadtree over _hitNodes, built on the first pointer event after a render
+    let _hitNodes = [];          // the nodes hover and click can find: every displayed node but the wrapper
+    let _hoverNode = null;       // the node under the pointer, as hover last saw it
+
+    // A node's position in the current layout's own two coordinates, the
+    // ones an animation interpolates: x and y in the rectangular and unrooted
+    // layouts, angle and radius in the circular one.
+    function geometryMode() {
         if (_state.unrootedDisplay) {
-            return 'M' + d.source.ux + ',' + d.source.uy + 'L' + d.target.ux + ',' + d.target.uy;
+            return 'unrooted';
         }
-        if (_state.circularDisplay) {
-            let sa = radialAngle(d.source.x), ta = radialAngle(d.target.x);
-            let sr = radialRadius(d.source.y), tr = radialRadius(d.target.y);
-            let sp = polarXY(sa, sr), mp = polarXY(ta, sr), tp = polarXY(ta, tr);
+        return _state.circularDisplay ? 'circular' : 'rectangular';
+    }
+
+    function geometryA(d, mode) {
+        if (mode === 'unrooted') {
+            return d.ux;
+        }
+        return mode === 'circular' ? radialAngle(d.x) : d.y;
+    }
+
+    function geometryB(d, mode) {
+        if (mode === 'unrooted') {
+            return d.uy;
+        }
+        return mode === 'circular' ? radialRadius(d.y) : d.x;
+    }
+
+    // One branch, from its parent's position (sa, sb) to its node's (ta, tb).
+    function branchSegment(mode, sa, sb, ta, tb) {
+        if (mode === 'unrooted') {
+            return 'M' + sa + ',' + sb + 'L' + ta + ',' + tb;
+        }
+        if (mode === 'circular') {
+            let sp = polarXY(sa, sb), mp = polarXY(ta, sb), tp = polarXY(ta, tb);
             let large = Math.abs(ta - sa) > Math.PI ? 1 : 0, sweep = ta > sa ? 1 : 0;
-            return 'M' + sp[0] + ',' + sp[1] + 'A' + sr + ',' + sr + ' 0 ' + large + ' ' + sweep + ' ' + mp[0] + ',' + mp[1] + 'L' + tp[0] + ',' + tp[1];
+            return 'M' + sp[0] + ',' + sp[1] + 'A' + sb + ',' + sb + ' 0 ' + large + ' ' + sweep + ' ' + mp[0] + ',' + mp[1] + 'L' + tp[0] + ',' + tp[1];
         }
-        return 'M' + d.source.y + ',' + d.source.x + 'V' + d.target.x + 'H' + d.target.y;
+        return 'M' + sa + ',' + sb + 'V' + tb + 'H' + ta;
+    }
+
+    let elbow = function (d) {
+        let mode = geometryMode();
+        return branchSegment(mode, geometryA(d.source, mode), geometryB(d.source, mode),
+            geometryA(d.target, mode), geometryB(d.target, mode));
     };
 
+    // Clear `layer` down, or fill it up, to `count` children of `tag`.
+    function sizeLayer(layer, tag, count) {
+        while (layer.childElementCount > count) {
+            layer.lastChild.remove();
+        }
+        while (layer.childElementCount < count) {
+            layer.appendChild(document.createElementNS(d3.namespaces.svg, tag));
+        }
+        return layer.children;
+    }
+
+    // nodes: every displayed node, links: their branches, groups: the node
+    // <g>s this render keeps, source: the node an animation grows out of.
+    function drawTreeGeometry(nodes, links, groups, source, duration) {
+        let treeGroup = _svgGroup.node();
+        if (!_geomLayers || _geomLayers.branches.parentNode !== treeGroup) {
+            _geomLayers = {};
+            // inserted topmost first, so they end up bottom to top: branches,
+            // halos (under the node they mark), shapes, dots, outlined dots
+            [['outlined', 'aptx-node-outlined'], ['dots', 'aptx-node-dots'], ['shapes', 'aptx-node-shapes'],
+                ['halos', 'aptx-halos'], ['branches', 'aptx-branches']].forEach(function (layer) {
+                let g = document.createElementNS(d3.namespaces.svg, 'g');
+                g.setAttribute('class', layer[1]);
+                // hover and click find nodes by position; hit-testing a
+                // 50,000-segment path on every mouse move is pure cost
+                g.style.pointerEvents = 'none';
+                treeGroup.insertBefore(g, treeGroup.firstChild);
+                _geomLayers[layer[0]] = g;
+            });
+        }
+        let driver = d3.select(_geomLayers.branches);
+        driver.interrupt('aptx-geometry');
+
+        let mode = geometryMode();
+        let n = nodes.length;
+        let endA = new Float64Array(n);
+        let endB = new Float64Array(n);
+        for (let i = 0; i !== n; ++i) {
+            endA[i] = geometryA(nodes[i], mode);
+            endB[i] = geometryB(nodes[i], mode);
+        }
+
+        // Where each node starts: where it was last drawn -- mid-flight, if
+        // this redraw cut an animation short. A node new to the screen grows
+        // out of the source's last drawn position, as entering elements did.
+        let animate = duration > 0;
+        let startA = null;
+        let startB = null;
+        if (animate) {
+            let prev = (_drawnGeom && _drawnGeom.mode === mode) ? _drawnGeom : null;
+            let prevIndex = function (d) {
+                let j = d._geomIndex;
+                return (prev && j !== undefined && prev.nodes[j] === d) ? j : -1;
+            };
+            let sj = prevIndex(source);
+            let fromA;
+            let fromB;
+            if (sj >= 0) {
+                fromA = prev.a[sj];
+                fromB = prev.b[sj];
+            } else if (mode === 'rectangular' && source.x0 !== undefined) {
+                fromA = source.y0;   // a first draw unfolds from the launch's root point
+                fromB = source.x0;
+            } else {
+                fromA = geometryA(source, mode);
+                fromB = geometryB(source, mode);
+            }
+            let fromKnown = isFinite(fromA) && isFinite(fromB);
+            startA = new Float64Array(n);
+            startB = new Float64Array(n);
+            for (let i = 0; i !== n; ++i) {
+                let j = prevIndex(nodes[i]);
+                if (j >= 0) {
+                    startA[i] = prev.a[j];
+                    startB[i] = prev.b[j];
+                } else {
+                    startA[i] = fromKnown ? fromA : endA[i];
+                    startB[i] = fromKnown ? fromB : endB[i];
+                }
+            }
+        }
+        for (let i = 0; i !== n; ++i) {
+            nodes[i]._geomIndex = i;
+        }
+
+        // ---- the styles: everything that does not move with the nodes ----
+        let branchBatches = new Map();
+        for (let i = 0, len = links.length; i !== len; ++i) {
+            let color = makeBranchColor(links[i]);
+            let width = makeBranchWidth(links[i]);
+            let key = color + '|' + width;
+            let b = branchBatches.get(key);
+            if (!b) {
+                b = {color: color, width: width, items: []};
+                branchBatches.set(key, b);
+            }
+            b.items.push(links[i].source._geomIndex, links[i].target._geomIndex);
+        }
+
+        let halos = [];
+        let outlined = [];   // dots whose outline is not their fill: search hits, selected nodes
+        let shapeBatches = new Map();
+        let dotBatches = new Map();
+        let hitDotBatches = new Map();   // outlined dots past OUTLINED_DOTS_MAX: painted after every other dot
+        let addDot = function (batches, i, fill, stroke, r, dim) {
+            let key = fill + '|' + stroke + '|' + r + '|' + dim;
+            let b = batches.get(key);
+            if (!b) {
+                b = {fill: fill, stroke: stroke, r: r, dim: dim, items: []};
+                batches.set(key, b);
+            }
+            b.items.push(i);
+        };
+        let anyFound = anySearchHits();
+        let drawShapes = _state.showVisualizations || stylesActive();
+        let bg = _state.backgroundColorDefault;
+        for (let i = 0; i !== n; ++i) {
+            let d = nodes[i];
+            if (anyFound && isNodeFound(d)) {
+                // the trough must clear the node dot, or a medium-sized node
+                // buries its own pulse; the CSS 2.5x peak then keeps the
+                // desktop's 4->10px pulse ratio
+                halos.push({i: i, r: Math.max(4, makeNodeSize(d) + 2), fill: getFoundColor(d)});
+            }
+            // Dim Non-Matches, by the rule update() applies to node groups
+            let dim = _dimNonMatches && !getFoundColor(d) && !(isCollapsed(d) && collapsedHoldsHighlight(d));
+
+            // The shape BEFORE the dot: nodeShapeType marks the node hasVis,
+            // which takes its dot away.
+            let type = drawShapes ? nodeShapeType(d) : null;
+            if (type) {
+                let fill = makeNodeFillColor(d);
+                let stroke = makeNodeStrokeColor(d);
+                let key = fill + '|' + stroke + '|' + dim;
+                let b = shapeBatches.get(key);
+                if (!b) {
+                    b = {fill: fill, stroke: stroke, dim: dim, items: [], types: []};
+                    shapeBatches.set(key, b);
+                }
+                b.items.push(i);
+                b.types.push(type);
+            }
+
+            // The dot, with its fill computed once: the union of the two
+            // conditions that need it is just the fill condition, since
+            // (showVisualizations && !showNodeEvents) implies showVisualizations.
+            let fill = (_state.showVisualizations || _state.showNodeEvents
+                || isNodeFound(d) || isNodeSelected(d)) ? makeNodeFillColor(d) : null;
+            let r = ((_state.showVisualizations && !_state.showNodeEvents)
+                && (fill === bg)) ? 0 : makeNodeSize(d);
+            if (r > 0) {
+                let dotFill = (fill === null) ? bg : fill;
+                let stroke = makeNodeStrokeColor(d);
+                if (stroke !== dotFill) {
+                    outlined.push({i: i, fill: dotFill, stroke: stroke, r: r, dim: dim});
+                } else {
+                    addDot(dotBatches, i, dotFill, stroke, r, dim);
+                }
+            }
+        }
+        // A path paints ALL its fills before ANY of its strokes, so a stack of
+        // overlapping outlined dots in one stroked path reads as a mesh of
+        // rings, where one element per dot paints each dot whole over the last.
+        // Those are the search hits and selected nodes, usually few: they keep
+        // an element each, in tree order. Past OUTLINED_DOTS_MAX (a search
+        // hitting thousands of tips) the elements would bring the cost back,
+        // so each outline style becomes two FILLED paths: discs as wide as the
+        // outer edge of the stroke in the outline colour, then discs as wide
+        // as its inner edge in the fill colour. A lone dot comes out exactly
+        // as a stroked circle does; a stack comes out as one outlined blob.
+        if (outlined.length > OUTLINED_DOTS_MAX) {
+            let half = _state.branchWidthDefault / 2;
+            outlined.forEach(function (o) {
+                addDot(hitDotBatches, o.i, o.stroke, 'none', o.r + half, o.dim);
+                if (o.r > half) {
+                    addDot(hitDotBatches, o.i, o.fill, 'none', o.r - half, o.dim);
+                }
+            });
+            outlined = [];
+        }
+
+        // The most common style paints first, so where dots of different
+        // styles overlap the rarer one stays on top: a single sample of a rare
+        // category is not buried in a dense cluster of the common one. (Tree
+        // order decided when every dot was its own element.)
+        let byCount = function (a, b) {
+            return b.items.length - a.items.length;
+        };
+        let branchList = Array.from(branchBatches.values()).sort(byCount);
+        let els = sizeLayer(_geomLayers.branches, 'path', branchList.length);
+        branchList.forEach(function (b, k) {
+            b.el = els[k];
+            b.el.setAttribute('fill', 'none');
+            b.el.setAttribute('stroke', b.color);
+            b.el.setAttribute('stroke-width', b.width);
+        });
+        // `last`: batches painted after the sorted ones, whatever their count
+        let paintLayer = function (batches, layer, last) {
+            let list = Array.from(batches.values()).sort(byCount)
+                .concat(last ? Array.from(last.values()) : []);
+            let paths = sizeLayer(layer, 'path', list.length);
+            list.forEach(function (b, k) {
+                b.el = paths[k];
+                b.el.style.fill = b.fill;
+                b.el.style.stroke = b.stroke;
+                b.el.style.strokeWidth = _state.branchWidthDefault;
+                b.el.style.opacity = b.dim ? DIM_NON_MATCH_OPACITY : '';
+            });
+            return list;
+        };
+        let shapeList = paintLayer(shapeBatches, _geomLayers.shapes);
+        let dotList = paintLayer(dotBatches, _geomLayers.dots, hitDotBatches);
+        // The pulse only while there are few enough hits for it to point at
+        // something. Each pulsing halo is an animation the browser recomposites
+        // on every frame: measured on the 50,000-node tree with 3,571 hits,
+        // the drag ran at ~41 ms a frame with them pulsing and 17 ms with the
+        // same halos still -- the elements were never the cost.
+        let pulse = halos.length <= ANIMATED_HALOS_MAX;
+        let haloEls = sizeLayer(_geomLayers.halos, 'circle', halos.length);
+        halos.forEach(function (h, k) {
+            h.el = haloEls[k];
+            h.el.setAttribute('class', pulse ? 'foundHalo aptx-found-halo' : 'foundHalo');
+            h.el.setAttribute('r', h.r);
+            h.el.style.fill = h.fill;
+            h.el.style.opacity = pulse ? '' : HALO_REST_OPACITY;
+        });
+        let outlinedEls = sizeLayer(_geomLayers.outlined, 'circle', outlined.length);
+        outlined.forEach(function (o, k) {
+            o.el = outlinedEls[k];
+            o.el.setAttribute('r', o.r);
+            o.el.style.fill = o.fill;
+            o.el.style.stroke = o.stroke;
+            o.el.style.strokeWidth = _state.branchWidthDefault;
+            o.el.style.opacity = o.dim ? DIM_NON_MATCH_OPACITY : '';
+        });
+        let groupEls = [];
+        let groupIndex = [];
+        groups.each(function (d) {
+            groupEls.push(this);
+            groupIndex.push(d._geomIndex);
+        });
+
+        // ---- the positions: set once, or on every animation frame ----
+        let curA = new Float64Array(n);
+        let curB = new Float64Array(n);
+        _drawnGeom = {mode: mode, nodes: nodes, a: curA, b: curB};
+        _hitNodes = nodes.filter(function (d) {
+            return !!d.parent;
+        });
+        _nodeIndex = null;
+
+        let circular = mode === 'circular';
+        let area = nodeSymbolArea();
+        let x = 0;
+        let y = 0;
+        let place = function (i) {   // node i's point on screen, into x and y (layoutPointXY)
+            if (circular) {
+                let a = curA[i] - Math.PI / 2;
+                x = curB[i] * Math.cos(a);
+                y = curB[i] * Math.sin(a);
+            } else {
+                x = curA[i];
+                y = curB[i];
+            }
+        };
+        // a d3 symbol draws around the origin; this context moves it to (x, y)
+        let symbolPath = null;
+        let atPoint = {
+            moveTo: function (px, py) {
+                symbolPath.moveTo(px + x, py + y);
+            },
+            lineTo: function (px, py) {
+                symbolPath.lineTo(px + x, py + y);
+            },
+            arc: function (px, py, radius, a0, a1, ccw) {
+                symbolPath.arc(px + x, py + y, radius, a0, a1, ccw);
+            },
+            rect: function (px, py, w, h) {
+                symbolPath.rect(px + x, py + y, w, h);
+            },
+            closePath: function () {
+                symbolPath.closePath();
+            }
+        };
+
+        let frame = function (t) {
+            if (animate && t < 1) {
+                for (let i = 0; i !== n; ++i) {
+                    curA[i] = startA[i] + ((endA[i] - startA[i]) * t);
+                    curB[i] = startB[i] + ((endB[i] - startB[i]) * t);
+                }
+            } else {
+                curA.set(endA);
+                curB.set(endB);
+            }
+            branchList.forEach(function (b) {
+                let items = b.items;
+                let parts = new Array(items.length / 2);
+                for (let k = 0; k < items.length; k += 2) {
+                    let s = items[k];
+                    let e = items[k + 1];
+                    parts[k / 2] = branchSegment(mode, curA[s], curB[s], curA[e], curB[e]);
+                }
+                b.el.setAttribute('d', parts.join(''));
+            });
+            shapeList.forEach(function (b) {
+                symbolPath = d3.path();
+                for (let k = 0; k < b.items.length; ++k) {
+                    place(b.items[k]);
+                    b.types[k].draw(atPoint, area);
+                }
+                b.el.setAttribute('d', symbolPath.toString());
+            });
+            dotList.forEach(function (b) {
+                let r = b.r;
+                let arcs = 'a' + r + ',' + r + ' 0 1,0 ' + (2 * r) + ',0a' + r + ',' + r + ' 0 1,0 ' + (-2 * r) + ',0Z';
+                let parts = new Array(b.items.length);
+                for (let k = 0; k < b.items.length; ++k) {
+                    place(b.items[k]);
+                    parts[k] = 'M' + (x - r) + ',' + y + arcs;
+                }
+                b.el.setAttribute('d', parts.join(''));
+            });
+            halos.forEach(function (h) {
+                place(h.i);
+                h.el.setAttribute('cx', x);
+                h.el.setAttribute('cy', y);
+            });
+            outlined.forEach(function (o) {
+                place(o.i);
+                o.el.setAttribute('cx', x);
+                o.el.setAttribute('cy', y);
+            });
+            for (let k = 0; k < groupEls.length; ++k) {
+                place(groupIndex[k]);
+                groupEls[k].setAttribute('transform', 'translate(' + x + ',' + y + ')');
+            }
+        };
+
+        if (animate) {
+            frame(0);
+            driver.transition('aptx-geometry').duration(duration)
+                .tween('geometry', function () {
+                    return frame;
+                });
+        } else {
+            frame(1);
+        }
+    }
+
     let connection = function (n) {
         if (_state.phylogram) {
             let x1 = n.y + 5;
@@ -5236,6 +5552,11 @@ function (root, d3, forester, phyloXml) {
         _basicTreeProperties = null;
         _baseSvg = null;
         _svgGroup = null;
+        _geomLayers = null;
+        _drawnGeom = null;
+        _hitNodes = [];
+        _nodeIndex = null;
+        _hoverNode = null;
         _overviewGroup = null;
         _overviewLinks = null;
         _overviewContent = null;
@@ -5382,6 +5703,11 @@ function (root, d3, forester, phyloXml) {
         _in_subtree = false;
         _baseSvg = null;
         _svgGroup = null;
+        _geomLayers = null;
+        _drawnGeom = null;
+        _hitNodes = [];
+        _nodeIndex = null;
+        _hoverNode = null;
         _overviewGroup = null;
         _overviewContent = null;
         _overviewViewport = null;
@@ -5448,8 +5774,14 @@ function (root, d3, forester, phyloXml) {
         // unresolvable container -- so deferring the rest keeps launch()'s
         // synchronous-error contract intact. The handle closes over module
         // state, so it is valid before the draw; viewer.ready says when.
+        //
+        // The first draw is timed too, and stands in for this tree's redraws
+        // until one has been timed -- at a third, since it builds everything
+        // from scratch. Measured 2026-09-14 (bench, CPU 1x to 6x), a redraw
+        // took from 0.1 to 0.9 of a first draw, most often a quarter to a third.
         let nodeCount = _basicTreeProperties ? _basicTreeProperties.nodeCount : 0;
-        if (nodeCount >= BIG_TREE_NODES) {
+        _redrawMs = 0;
+        if (nodeCount >= OPENING_CARD_NODES) {
             showBusy(containerEl, 'Drawing ' + nodeCount.toLocaleString() + ' nodes',
                 'this can take a moment on a tree this size');
             _readyPromise = new Promise(function (resolve) {
@@ -5459,16 +5791,20 @@ function (root, d3, forester, phyloXml) {
                         resolve();
                         return;
                     }
+                    let start = performance.now();
                     try {
                         setupAndDraw();
                     } finally {
                         hideBusy();
                         resolve();
                     }
+                    timeRedraw(start, seq, 1 / 3);
                 });
             });
         } else {
+            let start = performance.now();
             setupAndDraw();
+            timeRedraw(start, seq, 1 / 3);
             _readyPromise = Promise.resolve();
         }
 
@@ -7977,54 +8313,134 @@ function (root, d3, forester, phyloXml) {
         return Math.max(DOMAIN_BOX_MIN_H, Math.min(DOMAIN_BOX_MAX_H, Math.round(pitch)));
     }
 
+    // A rounded rectangle as path data. Returns '' for a non-finite
+    // rectangle, which in a shared path would end the path data there and
+    // lose every rectangle after it.
+    //
+    // Compact on purpose: one absolute point, then relative steps, every
+    // number to a hundredth of a pixel (below what a screen shows at the 10x
+    // zoom limit). Full-precision coordinates made the exported SVG larger
+    // than the rects this replaced: the dense influenza tree's went from
+    // 5.5 MB to 10.6 MB; with this, 3.9 MB.
+    //
+    // Each corner is ONE cubic curve, the usual quarter-circle approximation
+    // (off by 0.03% of the radius, which is at most a few px here), not an
+    // arc: svg2pdf splits an arc into several curves, and a circular export
+    // came out with 5.4 curves per rectangle against 4.0 for rects -- the
+    // circular influenza tree's PDF 4.6 MB against 3.96 MB (2026-09-14).
+    function roundRectPath(x, y, w, h, r) {
+        if (!isFinite(x) || !isFinite(y) || !(w > 0) || !isFinite(w) || !(h > 0) || !isFinite(h)) {
+            return '';
+        }
+        let num = function (n) {
+            return Math.round(n * 100) / 100;
+        };
+        if (!(r > 0)) {
+            return 'M' + num(x) + ',' + num(y) + 'h' + num(w) + 'v' + num(h) + 'h' + num(-w) + 'Z';
+        }
+        let iw = num(w - (2 * r));
+        let ih = num(h - (2 * r));
+        let a = num(r);
+        let b = num(r * (1 - 0.5522847498));   // the control points sit 0.5523 r along each tangent
+        return 'M' + num(x + r) + ',' + num(y)
+            + 'h' + iw + 'c' + num(a - b) + ',0 ' + a + ',' + b + ' ' + a + ',' + a
+            + 'v' + ih + 'c0,' + num(a - b) + ' ' + (-b) + ',' + a + ' ' + (-a) + ',' + a
+            + 'h' + (-iw) + 'c' + num(b - a) + ',0 ' + (-a) + ',' + (-b) + ' ' + (-a) + ',' + (-a)
+            + 'v' + (-ih) + 'c0,' + num(b - a) + ' ' + b + ',' + (-a) + ' ' + a + ',' + (-a) + 'Z';
+    }
+
+    // The track, drawn the desktop's way: per architecture a backbone, per
+    // admitted domain a stepped drop shadow, the optional glow, the gradient
+    // body with its border, and -- rectangular only -- the name when it fits.
+    //
+    // Batched like the tree (drawTreeGeometry). Each domain used to be three
+    // shadow rects, two glow rects when on, and a body, in a <g> per tip in
+    // the radial layouts: 32,346 elements on a 1,386-node BV-BRC tree with
+    // 1,428 architectures, 23,208 of them shadows, and a redraw of 430 ms
+    // against 22 ms with the track off (2026-09-14). Now the backbones are one
+    // path, each shadow level one path and each glow level one path per
+    // colour -- for the whole track in the rectangular layout, per tip in the
+    // radial ones (see "collect" below) -- all under the bodies; the elements
+    // are kept and reused from redraw to redraw.
+    //
+    // The BODIES stay one rect each: their vertical gradient is sized to the
+    // element's own bounding box, so one path per colour would stretch a
+    // single gradient over the whole column. (One path per colour per ROW
+    // would keep it exact, but on the flu trees nearly every box in a row
+    // has a colour of its own: 7,706 such pairs for 7,736 boxes.)
+    //
+    // What batching changes: where two domains of one architecture overlap,
+    // the later one's shadow and glow used to fall across the earlier body,
+    // and now lie under it; overlapping shadows of one level no longer
+    // darken each other.
     function drawDomainArchitectures() {
         if (!_svgGroup) {
             return;
         }
-        _svgGroup.selectAll('g.aptx-domains').remove();
-        if (!domainsShown() || !_root) {
-            return;
-        }
-        let tips = displayedTips().filter(function (d) {
+        let existing = _svgGroup.select('g.aptx-domains');
+        let tips = (domainsShown() && _root) ? displayedTips().filter(function (d) {
             return _state.unrootedDisplay ? (d.ux !== undefined) : (d.x !== undefined);
-        });
-        let f = domainScale();
+        }) : [];
+        let f = tips.length > 0 ? domainScale() : 0;
         if (tips.length === 0 || !(f > 0) || !isFinite(f)) {
+            existing.remove();
             return;
         }
-        let g = _svgGroup.append('g').attr('class', 'aptx-domains').style('pointer-events', 'none');
+        // [defs, the batched paths, the bodies, the names], kept between
+        // redraws and moved to the end of the tree group, where a fresh
+        // append used to put it
+        let g = existing.node();
+        if (!g) {
+            g = document.createElementNS(d3.namespaces.svg, 'g');
+            g.setAttribute('class', 'aptx-domains');
+            g.style.pointerEvents = 'none';
+            ['defs', 'g', 'g', 'g'].forEach(function (tag) {
+                g.appendChild(document.createElementNS(d3.namespaces.svg, tag));
+            });
+        }
+        _svgGroup.node().appendChild(g);
+        let defs = g.children[0];
+        let underLayer = g.children[1];
+        let bodyLayer = g.children[2];
+        let labelLayer = g.children[3];
+
         // one vertical gradient per base colour, lighter at the top; the
         // defs ride into the SVG / PDF / PNG exports with the boxes
-        let defs = g.append('defs');
+        defs.textContent = '';
         let made = Object.create(null);
         function gradientFor(base) {
             let id = 'aptx-dom-' + base.substring(1);
             if (!made[id]) {
                 made[id] = true;
-                let grad = defs.append('linearGradient').attr('id', id)
+                let grad = d3.select(defs).append('linearGradient').attr('id', id)
                     .attr('x1', 0).attr('y1', 0).attr('x2', 0).attr('y2', 1);
                 grad.append('stop').attr('offset', '0%').attr('stop-color', forester.domainLighten(base, 0.12));
                 grad.append('stop').attr('offset', '100%').attr('stop-color', forester.domainDarken(base, 0.10));
             }
             return 'url(#' + id + ')';
         }
+
+        // Where each tip's architecture goes: its start along the track, the
+        // top and height of its boxes, and in the radial layouts the
+        // transform that turns (and for unrooted moves) it onto its spoke.
         let labelSpace = domainLabelSpace();
+        let rows = [];
         if (_state.circularDisplay) {
             // every bar starts on one ring past the labels and rides its
             // tip's spoke outward
             let r0 = _radial.maxRad + labelSpace + DOMAIN_RADIAL_GAP;
             let h = domainBoxHeight((r0 * 2 * Math.PI) / tips.length);
             tips.forEach(function (d) {
-                let t = g.append('g').attr('transform', 'rotate(' + labelAngleDeg(d) + ')');
-                drawOneArchitecture(t, forester.domainArchitectureOf(d), r0, -h / 2, h, f, false, gradientFor);
+                rows.push({d: d, start: r0, y1: -h / 2, h: h,
+                    transform: 'rotate(' + labelAngleDeg(d) + ')', labelsOn: false});
             });
         } else if (_state.unrootedDisplay) {
             // no common ring: each bar starts past its own tip's label
             let h = domainBoxHeight((Math.PI * 2 * _unroot.maxRad) / tips.length);
             let start = labelSpace + DOMAIN_RADIAL_GAP;
             tips.forEach(function (d) {
-                let t = g.append('g').attr('transform', 'translate(' + d.ux + ',' + d.uy + ') rotate(' + labelAngleDeg(d) + ')');
-                drawOneArchitecture(t, forester.domainArchitectureOf(d), start, -h / 2, h, f, false, gradientFor);
+                rows.push({d: d, start: start, y1: -h / 2, h: h,
+                    transform: 'translate(' + d.ux + ',' + d.uy + ') rotate(' + labelAngleDeg(d) + ')', labelsOn: false});
             });
         } else {
             // one aligned column: past the deepest tip and the longest label.
@@ -8038,61 +8454,132 @@ function (root, d3, forester, phyloXml) {
             let start = _w + _state.nodeLabelGap + labelSpace + DOMAIN_TRACK_START_GAP;
             let labelsOn = _state.domainLabels === 'domains';
             tips.forEach(function (d) {
-                drawOneArchitecture(g, forester.domainArchitectureOf(d), start, d.x - (h / 2), h, f, labelsOn, gradientFor);
+                rows.push({d: d, start: start, y1: d.x - (h / 2), h: h, transform: null, labelsOn: labelsOn});
             });
         }
-    }
-
-    function domainRect(g, x, y, w, h, r) {
-        return g.append('rect')
-            .attr('x', x).attr('y', y).attr('width', w).attr('height', h)
-            .attr('rx', r).attr('ry', r);
-    }
 
-    // One architecture, in the desktop's order: the backbone, then per
-    // admitted domain its stepped drop shadow, the optional glow, the
-    // gradient body with its border, and -- rectangular only -- the name,
-    // when it fits the box.
-    function drawOneArchitecture(g, da, start, y1, h, f, labelsOn, gradientFor) {
-        if (!da) {
-            return;
-        }
-        let geo = forester.domainBoxes(da, start, f, _state.domainEvalueExponent);
-        g.append('rect')
-            .attr('x', geo.backbone.x).attr('y', y1 + (h / 2) - 0.5)
-            .attr('width', geo.backbone.w).attr('height', 1)
-            .style('fill', DOMAIN_BACKBONE_COLOR);
-        let fs = Math.min(_state.externalNodeFontSize, h - 2);
-        let font = fs + 'px ' + FONT_DEFAULTS;
-        geo.boxes.forEach(function (b) {
-            let base = domainColor(b.name);
-            let r = Math.min(2, Math.min(b.w, h) / 2);
-            DOMAIN_SHADOWS.forEach(function (s) {
-                domainRect(g, b.x + s[0], y1 + s[1], b.w, h, r)
-                    .style('fill', DOMAIN_SHADOW_COLOR)
-                    .style('fill-opacity', s[2] / 255);
+        // ---- collect. Backbones, shadows and glows go into shared path
+        // data: one set for the whole track in the rectangular layout, one
+        // set per tip in the radial layouts, drawn in the tip's own turned
+        // frame as its bodies are. One set across a circular track holds
+        // coordinates already turned onto the spokes, every one different,
+        // and svg2pdf writes each of them to sixteen digits: the circular
+        // influenza tree's PDF came out at 9.1 MB against 3.96 MB for the
+        // rects, whose local coordinates repeat and so compress (2026-09-14).
+        let under = [];   // {d, fill, opacity, transform}, bottom to top
+        let pathSet = function () {
+            return {
+                backbones: [],
+                shadows: DOMAIN_SHADOWS.map(function () {
+                    return [];
+                }),
+                glows: DOMAIN_GLOWS.map(function () {
+                    return new Map();   // base colour -> path data
+                })
+            };
+        };
+        let flush = function (set, transform) {
+            let add = function (parts, fill, opacity) {
+                let d = parts.join('');
+                if (d !== '') {
+                    under.push({d: d, fill: fill, opacity: opacity, transform: transform});
+                }
+            };
+            add(set.backbones, DOMAIN_BACKBONE_COLOR, '');
+            DOMAIN_SHADOWS.forEach(function (s, k) {
+                add(set.shadows[k], DOMAIN_SHADOW_COLOR, s[2] / 255);
             });
-            if (_state.domainGlow) {
-                DOMAIN_GLOWS.forEach(function (gl) {
-                    let o = gl[0];
-                    domainRect(g, b.x - o, y1 - o, b.w + (2 * o), h + (2 * o), r + o)
-                        .style('fill', base)
-                        .style('fill-opacity', gl[1] / 255);
+            DOMAIN_GLOWS.forEach(function (gl, k) {
+                set.glows[k].forEach(function (parts, base) {
+                    add(parts, base, gl[1] / 255);
                 });
+            });
+        };
+        let track = pathSet();
+        let bodies = [];
+        let names = [];
+        rows.forEach(function (row) {
+            let da = forester.domainArchitectureOf(row.d);
+            if (!da) {
+                return;
             }
-            domainRect(g, b.x, y1, b.w, h, r)
-                .style('fill', gradientFor(base))
-                .style('stroke', forester.domainDarken(base, 0.24))
-                .style('stroke-width', 1);
-            if (labelsOn && b.name && fs > 4 && legendTextWidth(b.name, font) <= b.w - 4) {
-                g.append('text')
-                    .attr('x', b.x + (b.w / 2)).attr('y', y1 + (h / 2))
-                    .attr('dy', '0.35em')
-                    .attr('text-anchor', 'middle')
-                    .style('font', font)
-                    .style('fill', forester.domainLabelInk(base))
-                    .text(b.name);
+            let set = row.transform ? pathSet() : track;
+            let geo = forester.domainBoxes(da, row.start, f, _state.domainEvalueExponent);
+            let h = row.h;
+            let y1 = row.y1;
+            set.backbones.push(roundRectPath(geo.backbone.x, y1 + (h / 2) - 0.5, geo.backbone.w, 1, 0));
+            let fs = Math.min(_state.externalNodeFontSize, h - 2);
+            let font = fs + 'px ' + FONT_DEFAULTS;
+            geo.boxes.forEach(function (b) {
+                let base = domainColor(b.name);
+                let r = Math.min(2, Math.min(b.w, h) / 2);
+                DOMAIN_SHADOWS.forEach(function (s, k) {
+                    set.shadows[k].push(roundRectPath(b.x + s[0], y1 + s[1], b.w, h, r));
+                });
+                if (_state.domainGlow) {
+                    DOMAIN_GLOWS.forEach(function (gl, k) {
+                        let o = gl[0];
+                        let parts = set.glows[k].get(base);
+                        if (!parts) {
+                            parts = [];
+                            set.glows[k].set(base, parts);
+                        }
+                        parts.push(roundRectPath(b.x - o, y1 - o, b.w + (2 * o), h + (2 * o), r + o));
+                    });
+                }
+                bodies.push({x: b.x, y: y1, w: b.w, h: h, r: r, transform: row.transform,
+                    fill: gradientFor(base), stroke: forester.domainDarken(base, 0.24)});
+                if (row.labelsOn && b.name && fs > 4 && legendTextWidth(b.name, font) <= b.w - 4) {
+                    names.push({x: b.x + (b.w / 2), y: y1 + (h / 2), font: font,
+                        fill: forester.domainLabelInk(base), text: b.name});
+                }
+            });
+            if (row.transform) {
+                flush(set, row.transform);
+            }
+        });
+        flush(track, null);   // empty in the radial layouts
+
+        // ---- draw: bottom to top, reusing the elements already there
+        let paths = sizeLayer(underLayer, 'path', under.length);
+        under.forEach(function (u, k) {
+            paths[k].setAttribute('d', u.d);
+            if (u.transform) {
+                paths[k].setAttribute('transform', u.transform);
+            } else {
+                paths[k].removeAttribute('transform');
+            }
+            paths[k].style.fill = u.fill;
+            paths[k].style.fillOpacity = u.opacity;
+        });
+        let rects = sizeLayer(bodyLayer, 'rect', bodies.length);
+        bodies.forEach(function (b, k) {
+            let el = rects[k];
+            el.setAttribute('x', b.x);
+            el.setAttribute('y', b.y);
+            el.setAttribute('width', b.w);
+            el.setAttribute('height', b.h);
+            el.setAttribute('rx', b.r);
+            el.setAttribute('ry', b.r);
+            if (b.transform) {
+                el.setAttribute('transform', b.transform);
+            } else {
+                el.removeAttribute('transform');
             }
+            el.style.fill = b.fill;
+            el.style.stroke = b.stroke;
+            el.style.strokeWidth = 1;
+        });
+        let texts = sizeLayer(labelLayer, 'text', names.length);
+        names.forEach(function (t, k) {
+            let el = texts[k];
+            el.setAttribute('x', t.x);
+            el.setAttribute('y', t.y);
+            el.setAttribute('dy', '0.35em');
+            el.setAttribute('text-anchor', 'middle');
+            el.style.font = t.font;
+            el.style.fill = t.fill;
+            el.textContent = t.text;
         });
     }
 
@@ -10635,8 +11122,8 @@ function (root, d3, forester, phyloXml) {
             + '.aptx-panel .aptx-searchnav { align-items:center; gap:4px; margin:2px 0 4px; }'
             + '.aptx-panel .aptx-searchnav span { flex:1 1 auto; text-align:center; font-weight:600; font-size:11px; color:var(--p-ink); }'
             + '.aptx-panel .aptx-searchnav .aptx-gbtn:last-child { margin-right:0; }'
-            + '.aptx-found-halo { opacity:0.35; transform-box:fill-box; transform-origin:center; animation:aptx-halo-pulse 1.3s ease-in-out infinite; }'
-            + '@keyframes aptx-halo-pulse { 0%,100% { transform:scale(1); opacity:0.35; } 50% { transform:scale(2.5); opacity:0.12; } }'
+            + '.aptx-found-halo { opacity:' + HALO_REST_OPACITY + '; transform-box:fill-box; transform-origin:center; animation:aptx-halo-pulse 1.3s ease-in-out infinite; }'
+            + '@keyframes aptx-halo-pulse { 0%,100% { transform:scale(1); opacity:' + HALO_REST_OPACITY + '; } 50% { transform:scale(2.5); opacity:0.12; } }'
             + '@media (prefers-reduced-motion: reduce) { .aptx-found-halo { animation:none; } }'
             + '.aptx-panel .aptx-zoomgrid { display:flex; flex-direction:column; align-items:stretch; }'
             + '.aptx-panel .aptx-zoomgrid > input[type=button] { width:100%; margin-right:0; }'
@@ -11180,6 +11667,25 @@ function (root, d3, forester, phyloXml) {
         setTimeout(go, 150);
     }
 
+    // Record how long a redraw that began at `start` took, up to the frame
+    // that painted it: the second animation frame from here runs after that
+    // paint, whether the redraw ran in a frame or just after one. `share`
+    // scales the measurement (a first draw stands in for a redraw at a
+    // third, see launchInto). A hidden tab runs no frames, and the last
+    // estimate stands.
+    function timeRedraw(start, seq, share) {
+        if (typeof requestAnimationFrame !== 'function') {
+            return;
+        }
+        requestAnimationFrame(function () {
+            requestAnimationFrame(function () {
+                if (seq === _launchSeq) {
+                    _redrawMs = (performance.now() - start) * share;
+                }
+            });
+        });
+    }
+
     function makeDialogShell(id, title, width) {
         let existing = document.getElementById(id);
         if (existing) {