archaeopteryx 3.0.0 → 3.2.0

package/archaeopteryx.js

@@ -20,8 +20,8 @@
  *
  */
 
-// v 3.0.0
-// 2026-09-04
+// v 3.2.0
+// 2026-09-10
 //
 // Archaeopteryx.js is a software tool for the visualization and
 // analysis of highly annotated phylogenetic trees.
@@ -54,10 +54,7 @@
 //   DOM elements, so jQuery UI (and its CSS) is no longer required.
 //
 //
-// Developer documentation:
-// https://docs.google.com/document/d/1COVe0iYbKtcBQxGTP4_zuimpk2FH9iusOVOgd5xCJ3A
-//
-// User documentation:
+// Documentation and live demos:
 // https://cmzmasek.github.io/archaeopteryx-js/
 
 // UMD: one file that loads everywhere an embedder might put it --
@@ -106,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.0.0';
+    const VERSION = '3.1.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';
@@ -177,6 +174,11 @@ function (root, d3, forester, phyloXml) {
         'Helvetica Neue', 'Arial', 'sans-serif'];
     // Okabe-Ito color-blind-safe palette for search / selection highlights.
     const FOUND0_COLOR_DEFAULT = '#0072B2';      // Search A  — blue
+    // Search A in the dark theme: the same Okabe-Ito palette's sky blue. The
+    // light theme's blue is right on white and sinks into a dark ground; sky
+    // blue keeps the hue and stays distinct from B's vermillion and A&B's
+    // yellow. The other two already read on dark.
+    const FOUND0_COLOR_DARK = '#56B4E9';
     const FOUND1_COLOR_DEFAULT = '#D55E00';      // Search B  — vermillion
     const FOUND0AND1_COLOR_DEFAULT = '#F0E442';  // A and B   — yellow
     const SELECTED_COLOR_DEFAULT = '#009E73';    // Selected  — bluish green
@@ -280,6 +282,11 @@ 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.
+    // Below it everything stays synchronous exactly as before -- the deferral
+    // buys nothing on a tree that draws in a few hundred milliseconds.
+    const BIG_TREE_NODES = 2000;
     const WARNING = 'ArchaeopteryxJS: WARNING';
     const MESSAGE = 'ArchaeopteryxJS: ';
     const ERROR = 'ArchaeopteryxJS: ERROR: ';
@@ -338,7 +345,6 @@ function (root, d3, forester, phyloXml) {
     const CONFIDENCE_VALUES_CB = 'conf_cb';
     const SUPPORT_DOTS_CB = 'suppdots_cb';
     const DOWNLOAD_BUTTON = 'dl_b';
-    const SUBMIT_SELECTED_NODES_BUTTON = 'submit_sel_nodes_b';
     const DYNAHIDE_CB = 'dynahide_cb';
     const MSA_CB = 'msa_cb';
     const TIME_AXIS_CB = 'timeaxis_cb';
@@ -356,6 +362,7 @@ function (root, d3, forester, phyloXml) {
     // embedding page's own defs.
     const ARCHAEOPTERYX_LOGO_SVG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" role="img" aria-label="Archaeopteryx"> <defs> <linearGradient id="aptxlogo-wg" x1="0" y1="1" x2="1" y2="0"> <stop offset="0" stop-color="#4f46e5"/><stop offset="0.55" stop-color="#38bdf8"/><stop offset="1" stop-color="#a7f3d0"/> </linearGradient> <linearGradient id="aptxlogo-wg2" x1="0" y1="1" x2="1" y2="0"> <stop offset="0" stop-color="#3730a3"/><stop offset="1" stop-color="#4f79e0"/> </linearGradient> <linearGradient id="aptxlogo-tg" x1="0" y1="1" x2="1" y2="0"> <stop offset="0" stop-color="#f43f5e"/><stop offset="0.5" stop-color="#fb923c"/><stop offset="1" stop-color="#fde047"/> </linearGradient> <linearGradient id="aptxlogo-bg" x1="0" y1="0" x2="0" y2="1"> <stop offset="0" stop-color="#fff7e0"/><stop offset="1" stop-color="#fcd34d"/> </linearGradient> </defs> <g transform="translate(28.9,18.0) scale(0.9091)"> <g stroke="#25304f" stroke-width="6" stroke-linejoin="round" stroke-linecap="round"> <path d="M 78.0,152.0 C 49.3,150.6 12.5,173.3 -4.4,194.3 C 25.1,192.0 66.1,175.5 78.0,152.0 Z" fill="url(#aptxlogo-tg)"/> <path d="M 78.0,152.0 C 48.1,143.8 3.5,158.8 -19.7,176.6 C 12.1,181.2 59.5,173.7 78.0,152.0 Z" fill="url(#aptxlogo-tg)"/> <path d="M 78.0,152.0 C 51.8,138.2 6.9,142.5 -18.7,154.0 C 10.0,164.8 56.0,167.9 78.0,152.0 Z" fill="url(#aptxlogo-tg)"/> <path d="M 78.0,152.0 C 58.9,135.3 20.6,130.3 -2.8,135.1 C 18.9,149.7 56.6,161.2 78.0,152.0 Z" fill="url(#aptxlogo-tg)"/> <path d="M 118.0,126.0 C 110.4,106.2 84.4,93.0 65.5,92.1 C 75.9,110.5 99.0,129.6 118.0,126.0 Z" fill="url(#aptxlogo-wg2)"/> <path d="M 118.0,126.0 C 115.6,103.3 92.6,79.7 73.5,71.3 C 79.1,93.8 97.5,122.0 118.0,126.0 Z" fill="url(#aptxlogo-wg2)"/> <path d="M 118.0,126.0 C 123.0,106.1 110.4,79.8 96.5,67.4 C 94.4,87.9 101.6,117.0 118.0,126.0 Z" fill="url(#aptxlogo-wg2)"/> <path d="M 106,172 L 101,202 M 132,172 L 129,202" fill="none" stroke-width="9"/> <path d="M 101,202 L 88,209 M 101,202 L 112,210 M 101,202 L 99,213 M 129,202 L 116,209 M 129,202 L 140,210 M 129,202 L 128,213" fill="none" stroke-width="6"/> <path d="M 96,176 C 74,168 66,146 76,128 C 86,110 110,102 132,106 C 152,110 164,126 162,146 C 160,166 142,180 120,180 C 112,180 103,179 96,176 Z" fill="url(#aptxlogo-bg)"/> <path d="M 100,174 C 86,166 82,150 90,138 C 96,146 108,152 122,152 C 136,152 148,148 156,140 C 160,156 150,172 128,177 C 118,179 108,178 100,174 Z" fill="#fff6dd" stroke="none"/> <path d="M 96,176 C 74,168 66,146 76,128 C 86,110 110,102 132,106 C 152,110 164,126 162,146 C 160,166 142,180 120,180 C 112,180 103,179 96,176 Z" fill="none"/> <path d="M 150.0,60.0 C 159.5,51.2 158.7,35.2 152.9,25.9 C 145.3,35.7 141.5,51.8 150.0,60.0 Z" fill="url(#aptxlogo-wg)"/> <path d="M 164.0,56.0 C 174.4,51.0 177.8,37.3 175.2,28.0 C 166.2,34.2 158.9,46.9 164.0,56.0 Z" fill="url(#aptxlogo-wg)"/> <path d="M 136.0,66.0 C 141.8,56.5 137.0,44.2 129.6,38.5 C 125.7,48.3 126.7,61.9 136.0,66.0 Z" fill="url(#aptxlogo-wg)"/> <path d="M 158,58 C 186,54 208,72 208,96 C 208,120 188,136 164,134 C 140,132 126,114 128,92 C 130,72 142,60 158,58 Z" fill="url(#aptxlogo-bg)"/> <path d="M 203,82 C 216,84 230,92 238,100 C 230,108 216,113 202,112 C 206,104 206,90 203,82 Z" fill="#fb923c"/> <path d="M 204,101 C 214,102 224,103 234,101" fill="none" stroke-width="4"/> <path d="M 128.0,116.0 C 113.1,91.9 75.3,80.3 50.0,83.2 C 68.3,104.8 103.7,124.6 128.0,116.0 Z" fill="url(#aptxlogo-wg)"/> <path d="M 128.0,116.0 C 118.0,85.8 79.7,60.2 51.1,54.1 C 65.4,83.1 98.9,116.3 128.0,116.0 Z" fill="url(#aptxlogo-wg)"/> <path d="M 128.0,116.0 C 127.0,83.7 97.3,47.3 71.5,32.7 C 76.9,65.0 99.8,107.4 128.0,116.0 Z" fill="url(#aptxlogo-wg)"/> <path d="M 128.0,116.0 C 136.1,88.7 121.1,50.1 103.3,30.9 C 99.0,59.5 106.6,101.2 128.0,116.0 Z" fill="url(#aptxlogo-wg)"/> </g> <g> <ellipse cx="172" cy="94" rx="15" ry="17" fill="#25304f"/> <ellipse cx="172" cy="97" rx="10" ry="11" fill="#38bdf8"/> <circle cx="167" cy="88" r="6" fill="#ffffff"/> <circle cx="178" cy="103" r="3" fill="#ffffff" opacity="0.9"/> <ellipse cx="146" cy="112" rx="9" ry="5" fill="#fb7185" opacity="0.75"/> <path d="M 52,53 C 53.62,59.75 54.25,60.38 61,62 C 54.25,63.62 53.62,64.25 52,71 C 50.38,64.25 49.75,63.62 43,62 C 49.75,60.38 50.38,59.75 52,53 Z" fill="#fde68a"/> <path d="M 222,161 C 223.26,166.25 223.75,166.74 229,168 C 223.75,169.26 223.26,169.75 222,175 C 220.74,169.75 220.25,169.26 215,168 C 220.25,166.74 220.74,166.25 222,161 Z" fill="#fde68a"/> <path d="M 86,208 C 87.08,212.5 87.5,212.92 92,214 C 87.5,215.08 87.08,215.5 86,220 C 84.92,215.5 84.5,215.08 80,214 C 84.5,212.92 84.92,212.5 86,208 Z" fill="#fde68a"/> </g> </g> </svg>';
     const NODE_DATA = 'node_data_dialog';
+    const COLOR_PICKER = 'color_picker_dialog';
     const NODE_EVENTS_CB = 'nevts_cb';
     const NODE_NAME_CB = 'nn_cb';
     const NODE_SHAPE_SELECT_MENU = 'nshapes_menu';
@@ -469,6 +476,14 @@ function (root, d3, forester, phyloXml) {
     let _searchBox1Empty = true;
     let _settings = null;   // fixed for the life of the launch; never written after init
     let _svgGroup = null;
+    // The floating layer: a sibling of _svgGroup that is NOT zoomed or
+    // panned. The bottom strips -- the time axis, the alignment's
+    // conservation/consensus/ruler -- are drawn into it in tree coordinates
+    // and placed by placeFloatingOverlays() from the current zoom transform,
+    // so they ride with the tree until their bottom would leave the viewport
+    // and then stick there. See floatStripGroup().
+    let _floatGroup = null;
+    let _floatStrips = {};                // class -> {top, height} in tree coordinates
     let _treeData = null;
     let _treeFn = null;
     let _vis = null;        // the automatic visualizations: candidates, scales, choices
@@ -485,10 +500,12 @@ function (root, d3, forester, phyloXml) {
     const MSA_CONS_BAR_H = 22;            // conservation bar band height
     const MSA_CONS_TOP_GAP = 4;
     const MSA_BOTTOM_RESERVE = 56;        // vertical room under the rows (conservation + ruler)
+    const MSA_NAV_RESERVE = 46;           // ... plus the navigation bar floating at the viewport bottom
     const MSA_MIN_TREE_PX = 220;          // the tree itself never shrinks below this
     let _msaColOffset = 0;                // first shown alignment column (0-based)
     let _msaReserve = 0;                  // horizontal px reserved for the track, set with _w
     let _msaScroller = null;              // the fixed HTML range input, created lazily
+    let _msaNav = null;                   // the bar around it: paging, jump-to-column, readout
     let _msaGeom = null;                  // window geometry of the last draw, for the hover readout
     // ------ time axis (the desktop's geologic / calendar overlays) ------
     const TIME_GEO_RESERVE = 52;          // two ICS band rows + the Ma ruler
@@ -509,6 +526,29 @@ function (root, d3, forester, phyloXml) {
     const RADIAL_MAX_EXTENT = 24000;
     let _radialLabelsHorizontal = false;   // circular layout: external labels upright at the ring instead of riding their spokes
     let _panelTheme = null;   // null = follow OS; 'light' / 'dark' = header switch choice
+    // Resolves once the current launch has drawn. Immediately for a small
+    // tree; after the deferred first draw for a big one. Exposed as
+    // viewer.ready so an embedder can wait for the DOM to exist.
+    let _readyPromise = Promise.resolve();
+    // 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.
+    let _pendingUpdate = null;
+    // Work to run once the pending redraw has happened (big trees only):
+    // 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
+    // re-centring after the coalesced redraw maps that one point forward.
+    let _pendingCentre = null;
+    // True while initialize() runs. A redraw scheduled from inside it -- the
+    // searches it runs end in one -- is dropped: the draw in progress renders
+    // that same state, so the extra pass was always redundant, and on a big
+    // tree it would run after the card had gone and merge later interactions
+    // into an invisible redraw.
+    let _initializing = false;
     let _searchFields = [];   // available search-field descriptors, rebuilt per tree
     let _zoomListener = null;
     let _zoomed_x_or_y = false;
@@ -569,8 +609,8 @@ function (root, d3, forester, phyloXml) {
     // at. It appears and disappears on its own -- there is nothing to switch on.
     // Clicking or dragging inside it moves the main view there.
 
-    const OVERVIEW_WIDTH = 118;
-    const OVERVIEW_HEIGHT = 92;
+    const OVERVIEW_WIDTH = 142;
+    const OVERVIEW_HEIGHT = 111;
     const OVERVIEW_MARGIN = 12;
     const OVERVIEW_PAD = 5;
 
@@ -991,9 +1031,44 @@ function (root, d3, forester, phyloXml) {
 
     function zoom(event) {
         _svgGroup.attr('transform', event.transform);
+        placeFloatingOverlays();
         updateOverviewViewport();
     }
 
+    // A strip in the floating layer. Drawn in TREE coordinates like everything
+    // else (its content is x-aligned with the tree), it is then placed by a
+    // transform of its own rather than the tree's -- the same x and scale, but
+    // a y that is STICKY: the strip rides at the tree's bottom edge until that
+    // edge would leave the viewport, and holds at the viewport bottom from
+    // there. Nothing changes while the whole tree fits; nothing disappears
+    // when it does not. `top` and `height` are the strip's extent in tree
+    // coordinates, which is all the placement needs.
+    function floatStripGroup(cls, top, height) {
+        _floatGroup.selectAll('g.' + cls).remove();
+        _floatStrips[cls] = {top: top, height: height};
+        return _floatGroup.append('g').attr('class', cls);
+    }
+
+    const FLOAT_STRIP_MARGIN = 6;   // px between a stuck strip and the viewport edge
+
+    function placeFloatingOverlays() {
+        if (!_floatGroup || !_baseSvg) {
+            return;
+        }
+        let t = d3.zoomTransform(_baseSvg.node());
+        let size = svgSize();
+        if (!size) {
+            return;
+        }
+        Object.keys(_floatStrips).forEach(function (cls) {
+            let s = _floatStrips[cls];
+            let stuckY = size.h - FLOAT_STRIP_MARGIN - (t.k * (s.top + s.height));
+            let ty = Math.min(t.y, stuckY);
+            _floatGroup.select('g.' + cls)
+                .attr('transform', 'translate(' + t.x + ',' + ty + ') scale(' + t.k + ')');
+        });
+    }
+
     function centerNode(source, x, y) {
         let scale = currentZoomScale();
         if (!x) {
@@ -1028,6 +1103,53 @@ function (root, d3, forester, phyloXml) {
     const HOVER_GLOW_ALPHAS = [34 / 255, 44 / 255, 58 / 255];
     const HOVER_GLOW_MIN_DIA = 18;
     const HOVER_GLOW_ACCENT = 'rgb(38,117,191)';
+    // Normalisation floors for a node-hued glow (see hoverGlowColor).
+    const HOVER_GLOW_MIN_SAT = 0.15;    // below this the colour has no hue to take
+    const HOVER_GLOW_SAT_FLOOR = 0.55;
+    const HOVER_GLOW_VAL_FLOOR = 0.80;
+
+    // The glow takes the hue of the node it marks, when the node has one --
+    // a node coloured by Host Group glows in its host colour -- and the UI
+    // accent otherwise. As on the desktop (TreePanel.hoverGlowColor). The
+    // precedence is the one the node itself is painted by: the Color-by
+    // value, then a per-node visual style, then an event colour, then a
+    // colourised clade's branch colour. NEVER the found/search colour: a
+    // focus ring must not read as a selection state.
+    //
+    // The glow is a 13-23% alpha wash, so a dark or a pale colour would
+    // vanish in it. The hue is kept and saturation and value are floored:
+    // Tableau-style oranges and reds pass unchanged, a muted blue gets a
+    // modest lift, and a grey (no hue to speak of) falls back to the accent.
+    function hoverGlowColor(d) {
+        let c = null;
+        let vis = makeVisNodeFillColor(d);
+        if (vis && vis !== _state.backgroundColorDefault) {
+            c = vis;
+        }
+        if (!c) {
+            let style = nodeStyle(d);
+            if (style && (style.nodeColor || style.fontColor)) {
+                c = style.nodeColor || style.fontColor;
+            }
+        }
+        if (!c && _state.showNodeEvents && d.events && d.children) {
+            c = makeNodeEventsDependentColor(d.events);
+        }
+        if (!c && _state.useVisualStyles && d.color) {
+            let bc = 'rgb(' + d.color.red + ',' + d.color.green + ',' + d.color.blue + ')';
+            if (bc !== _state.branchColorDefault) {
+                c = bc;
+            }
+        }
+        if (!c) {
+            return HOVER_GLOW_ACCENT;
+        }
+        let hsv = rgbToHsv(c);
+        if (hsv.s < HOVER_GLOW_MIN_SAT) {
+            return HOVER_GLOW_ACCENT;
+        }
+        return hsvToHex({h: hsv.h, s: Math.max(hsv.s, HOVER_GLOW_SAT_FLOOR), v: Math.max(hsv.v, HOVER_GLOW_VAL_FLOOR)});
+    }
 
     function showHoverGlow(d) {
         if (!_svgGroup || !d || d.x === undefined) {
@@ -1039,19 +1161,21 @@ function (root, d3, forester, phyloXml) {
                 .style('pointer-events', 'none');
             HOVER_GLOW_RADII.forEach(function (unused, i) {
                 g.append('circle')
-                    .attr('fill', HOVER_GLOW_ACCENT)
                     .attr('fill-opacity', HOVER_GLOW_ALPHAS[i])
                     .attr('stroke', 'none');
             });
         }
         let dia = Math.max(HOVER_GLOW_MIN_DIA, (_state.nodeSizeDefault || 0) * 3);
         let p = layoutPointXY(d);
+        let fill = hoverGlowColor(d);
         g.attr('transform', 'translate(' + p[0] + ',' + p[1] + ')')
             .style('display', null)
             .raise();
-        g.selectAll('circle').attr('r', function (unused, i) {
-            return (dia * HOVER_GLOW_RADII[i]) / 2;
-        });
+        g.selectAll('circle')
+            .attr('fill', fill)
+            .attr('r', function (unused, i) {
+                return (dia * HOVER_GLOW_RADII[i]) / 2;
+            });
     }
 
     function hideHoverGlow() {
@@ -1074,147 +1198,7 @@ function (root, d3, forester, phyloXml) {
 
     function mousemove(event, d) {
 
-        let mo_text = '';
-        if (d.name) {
-            mo_text += 'Name: ' + d.name + '<br>';
-        }
-        if (d.branch_length) {
-            mo_text += 'Distance to Parent: ' + d.branch_length + '<br>';
-        }
-        if (d.date && (typeof d.date.value === 'number'
-            || (typeof d.date.minimum === 'number' && typeof d.date.maximum === 'number'))) {
-            let dv = typeof d.date.value === 'number' ? String(d.date.value) : '';
-            if (typeof d.date.minimum === 'number' && typeof d.date.maximum === 'number') {
-                dv += ' [' + d.date.minimum + ' - ' + d.date.maximum + ']';
-            }
-            if (d.date.unit) {
-                dv += ' ' + d.date.unit;
-            }
-            mo_text += 'Date: ' + dv.trim() + '<br>';
-        }
-        mo_text += 'Depth: ' + forester.calcDepth(d) + '<br>';
-        let i = 0;
-        if (d.confidences) {
-            for (i = 0; i < d.confidences.length; ++i) {
-                let c = d.confidences[i];
-                if (c.type) {
-                    mo_text += 'Confidence [' + c.type + ']: ' + c.value + '<br>';
-                } else {
-                    mo_text += 'Confidence: ' + c.value + '<br>';
-                }
-                if (c.stddev) {
-                    mo_text += '- stdev: ' + c.stddev + '<br>';
-                }
-            }
-        }
-        if (d.taxonomies) {
-            for (i = 0; i < d.taxonomies.length; ++i) {
-                mo_text += 'Taxonomy<br>';
-                let t = d.taxonomies[i];
-                if (t.id) {
-                    if (t.id.provider) {
-                        mo_text += '- Id [' + t.id.provider + ']: ' + t.id.value + '<br>';
-                    } else {
-                        mo_text += '- Id: ' + t.id.value + '<br>';
-                    }
-                }
-                if (t.code) {
-                    mo_text += '- Code: ' + t.code + '<br>';
-                }
-                if (t.scientific_name) {
-                    mo_text += '- Scientific name: ' + t.scientific_name + '<br>';
-                }
-                if (t.common_name) {
-                    mo_text += '- Common name: ' + t.common_name + '<br>';
-                }
-                if (t.rank) {
-                    mo_text += '- Rank: ' + t.rank + '<br>';
-                }
-            }
-        }
-        if (d.sequences) {
-            for (i = 0; i < d.sequences.length; ++i) {
-                mo_text += 'Sequence<br>';
-                let s = d.sequences[i];
-                if (s.accession) {
-                    if (s.accession.source) {
-                        mo_text += '- Accession [' + s.accession.source + ']: ' + s.accession.value + '<br>';
-                    } else {
-                        mo_text += '- Accession: ' + s.accession.value + '<br>';
-                    }
-                    if (s.accession.comment) {
-                        mo_text += '-- comment: ' + s.accession.comment + '<br>';
-                    }
-                }
-                if (s.symbol) {
-                    mo_text += '- Symbol: ' + s.symbol + '<br>';
-                }
-                if (s.name) {
-                    mo_text += '- Name: ' + s.name + '<br>';
-                }
-                if (s.gene_name) {
-                    mo_text += '- Gene name: ' + s.gene_name + '<br>';
-                }
-                if (s.location) {
-                    mo_text += '- Location: ' + s.location + '<br>';
-                }
-                if (s.type) {
-                    mo_text += '- Type: ' + s.type + '<br>';
-                }
-            }
-        }
-        if (d.distributions) {
-            let distributions = d.distributions;
-            for (i = 0; i < distributions.length; ++i) {
-                mo_text += 'Distribution: ';
-                if (distributions[i].desc) {
-                    mo_text += distributions[i].desc + '<br>';
-                }
-            }
-        }
-        if (d.date) {
-            mo_text += 'Date: ';
-            let date = d.date;
-            if (date.desc) {
-                mo_text += date.desc + '<br>';
-            }
-        }
-        if (d.events) {
-            mo_text += 'Events<br>';
-            let ev = d.events;
-            if (ev.type && ev.type.length > 0) {
-                mo_text += '- Type: ' + ev.type + '<br>';
-            }
-            if (ev.duplications && ev.duplications > 0) {
-                mo_text += '- Duplications: ' + ev.duplications + '<br>';
-            }
-            if (ev.speciations && ev.speciations > 0) {
-                mo_text += '- Speciations: ' + ev.speciations + '<br>';
-            }
-            if (ev.losses && ev.losses > 0) {
-                mo_text += '- Losses: ' + ev.losses + '<br>';
-            }
-        }
-        if (d.properties && d.properties.length > 0) {
-            let propertiesLength = d.properties.length;
-            for (i = 0; i < propertiesLength; ++i) {
-                let property = d.properties[i];
-                if (property.ref && property.value) {
-                    let prop_ref = property.ref
-                    if (prop_ref.indexOf(':') > 0) {
-                        prop_ref = prop_ref.substring(prop_ref.indexOf(':') + 1)
-                    }
-                    if (property.unit) {
-                        mo_text += prop_ref + ': ' + property.value + property.unit + '<br>';
-                    } else {
-                        mo_text += prop_ref + ': ' + property.value + '<br>';
-                    }
-                }
-            }
-        }
-        if (d.children) {
-            mo_text += 'Sum of Subtree Tips: ' + forester.calcSumOfAllExternalDescendants(d) + '<br>';
-        }
+        let mo_text = nodeDataText(d);
 
         // Same label/value layout as the node-data dialog, so the two read alike.
         let tip = _node_mouseover_div.node();
@@ -1359,7 +1343,7 @@ function (root, d3, forester, phyloXml) {
         _vis = {candidates: [], byId: {}, colorId: null, shapeId: null, autoColorId: null,
             labelRef: null, labelPrefix: null,
             legendSortById: {}, colorModeById: {}, legendExpandedById: {},
-            colorMemory: {}, colorNext: {}, shapeMemory: {}, shapeNext: {},
+            colorMemory: {}, colorNext: {}, colorOverrides: {}, shapeMemory: {}, shapeNext: {},
             hasStyles: false};
         // The readable-name inference stands on its own: it applies even when
         // the Color / Shape menus are disabled.
@@ -1440,6 +1424,325 @@ function (root, d3, forester, phyloXml) {
     // values first met in a smaller view extend the memory with the next free
     // palette slots. (On the launch view this assigns the sorted domain
     // 0,1,2,... -- exactly the old fixed-palette behaviour.)
+    // Clicking a legend colour opens a colour picker and repaints that value
+    // everywhere -- the legend swatch and every node carrying it -- because
+    // both read the same categoryScale.
+    //
+    // Built in-page rather than using <input type="color">, which was the first
+    // version and was wrong on three counts a user noticed immediately: an OS
+    // widget cannot follow the panel's light/dark choice, cannot carry a close
+    // button of its own, and only reports its value on dismissal, so the tree
+    // did not move while you were choosing. This one is a non-modal dialog --
+    // NOT showModal(), whose backdrop would dim the very tree being previewed.
+    function openColorPicker(current, valueLabel, anchor, onChange) {
+        let anchorClass = anchor && anchor.getAttribute ? anchor.getAttribute('class') : null;
+        let hsv = rgbToHsv(current);
+        let shell = makeDialogShell(COLOR_PICKER, valueLabel, 212);
+        let dialog = shell.dialog;
+
+        let sv = document.createElement('div');
+        sv.className = 'aptx-cp-sv';
+        let svKnob = document.createElement('div');
+        svKnob.className = 'aptx-cp-knob';
+        sv.appendChild(svKnob);
+
+        let hue = document.createElement('div');
+        hue.className = 'aptx-cp-hue';
+        let hueKnob = document.createElement('div');
+        hueKnob.className = 'aptx-cp-knob';
+        hueKnob.style.top = '6px';
+        hue.appendChild(hueKnob);
+
+        let row = document.createElement('div');
+        row.className = 'aptx-cp-row';
+        let preview = document.createElement('div');
+        preview.className = 'aptx-cp-prev';
+        let hex = document.createElement('input');
+        hex.className = 'aptx-cp-hex';
+        hex.type = 'text';
+        hex.spellcheck = false;
+        hex.setAttribute('aria-label', 'hex colour');
+        row.appendChild(preview);
+        row.appendChild(hex);
+
+        // The palette the tree hands out, so "put it back to something that
+        // belongs" is one click rather than a hunt in the gradient.
+        let grid = document.createElement('div');
+        grid.className = 'aptx-cp-grid';
+        VIS_COLOR_PALETTE.forEach(function (c) {
+            let b = document.createElement('button');
+            b.type = 'button';
+            b.className = 'aptx-cp-sw';
+            b.style.background = c;
+            b.title = c;
+            b.addEventListener('click', function () {
+                hsv = rgbToHsv(c);
+                render(true);
+            });
+            grid.appendChild(b);
+        });
+
+        let note = document.createElement('div');
+        note.className = 'aptx-cp-note';
+        note.textContent = 'The tree updates as you pick.';
+
+        shell.body.appendChild(sv);
+        shell.body.appendChild(hue);
+        shell.body.appendChild(row);
+        shell.body.appendChild(grid);
+        shell.body.appendChild(note);
+
+        // Repainting a big tree on every pointer move would fall behind the
+        // pointer, so the tree redraw is coalesced to one per frame while the
+        // picker's own chrome updates immediately.
+        let pendingColor = null;
+        let frame = 0;
+
+        function render(applyNow) {
+            let color = hsvToHex(hsv);
+            sv.style.background = 'linear-gradient(to top,#000,rgba(0,0,0,0)),'
+                + 'linear-gradient(to right,#fff,rgba(255,255,255,0)),'
+                + 'hsl(' + hsv.h + ',100%,50%)';
+            svKnob.style.left = (hsv.s * 100) + '%';
+            svKnob.style.top = ((1 - hsv.v) * 100) + '%';
+            svKnob.style.background = color;
+            hueKnob.style.left = ((hsv.h / 360) * 100) + '%';
+            hueKnob.style.background = 'hsl(' + hsv.h + ',100%,50%)';
+            preview.style.background = color;
+            if (document.activeElement !== hex) {
+                hex.value = color;
+            }
+            if (applyNow) {
+                pendingColor = color;
+                if (!frame) {
+                    frame = requestAnimationFrame(function () {
+                        frame = 0;
+                        onChange(pendingColor);
+                        place();   // the legend may have just changed width
+                    });
+                }
+            }
+        }
+
+        function track(el, move) {
+            el.addEventListener('pointerdown', function (event) {
+                el.setPointerCapture(event.pointerId);
+                move(event);
+                event.preventDefault();
+            });
+            el.addEventListener('pointermove', function (event) {
+                if (el.hasPointerCapture(event.pointerId)) {
+                    move(event);
+                }
+            });
+        }
+        track(sv, function (event) {
+            let r = sv.getBoundingClientRect();
+            hsv.s = Math.max(0, Math.min(1, (event.clientX - r.left) / r.width));
+            hsv.v = 1 - Math.max(0, Math.min(1, (event.clientY - r.top) / r.height));
+            render(true);
+        });
+        track(hue, function (event) {
+            let r = hue.getBoundingClientRect();
+            hsv.h = Math.max(0, Math.min(1, (event.clientX - r.left) / r.width)) * 360;
+            render(true);
+        });
+        hex.addEventListener('input', function () {
+            if (/^#[0-9a-f]{6}$/i.test(hex.value.trim())) {
+                hsv = rgbToHsv(hex.value.trim());
+                render(true);
+            }
+        });
+
+        let closed = false;
+        function close() {
+            document.removeEventListener('pointerdown', onOutside, true);
+            document.removeEventListener('keydown', onKey, true);
+            if (frame) {
+                cancelAnimationFrame(frame);
+                frame = 0;
+            }
+            if (closed) {
+                return;
+            }
+            closed = true;
+            if (dialog.open) {
+                dialog.close();
+            }
+        }
+        // A non-modal dialog gets neither Escape nor a light-dismiss for free.
+        function onKey(event) {
+            if (event.key === 'Escape') {
+                close();
+            }
+        }
+        function onOutside(event) {
+            if (!dialog.contains(event.target)) {
+                close();
+            }
+        }
+
+        // The shell's own close button calls dialog.close() directly, which
+        // would leave these page-level listeners behind on every dismissal
+        // that is not Escape or an outside click. Both routes now run the same
+        // teardown, and close() is idempotent.
+        let shellClose = dialog.querySelector('.aptx-dialog-close');
+        if (shellClose) {
+            shellClose.addEventListener('click', close);
+        }
+        dialog.addEventListener('close', close);
+
+        render(false);
+        dialog.show();
+        place();
+
+        // Beside the legend it edits, never on top of it -- a picker that hides
+        // the swatch it is changing defeats the live preview.
+        //
+        // Re-measured rather than remembered, for two reasons: every redraw
+        // DESTROYS and rebuilds the legend group, so a held reference goes
+        // stale and measures zero; and the card grows when the [reset colors]
+        // chip appears on the first pick, which would leave a
+        // positioned-once picker sitting over the counts. It only MOVES when
+        // it would otherwise overlap, so the dialog does not chase the legend
+        // around while the user drags.
+        function place() {
+            let el = anchorClass ? document.querySelector('g.' + anchorClass) : null;
+            let box = el ? el.getBoundingClientRect() : null;
+            if (!box || !box.width) {
+                return;
+            }
+            let now = dialog.getBoundingClientRect();
+            let overlaps = now.width > 0
+                && !(now.left >= box.right || now.right <= box.left
+                    || now.top >= box.bottom || now.bottom <= box.top);
+            if (now.width > 0 && !overlaps) {
+                return;
+            }
+            let w = dialog.offsetWidth;
+            let h = dialog.offsetHeight;
+            // to the right of the card, or to its left when that would leave
+            // the viewport
+            let left = box.right + 10;
+            if (left + w > window.innerWidth - 6) {
+                left = box.left - w - 10;
+            }
+            setStyles(dialog, {
+                'position': 'fixed',
+                'margin': '0',
+                'left': Math.max(6, Math.min(window.innerWidth - w - 6, left)) + 'px',
+                'top': Math.max(6, Math.min(window.innerHeight - h - 6, box.top)) + 'px'
+            });
+        }
+        setTimeout(function () {
+            document.addEventListener('pointerdown', onOutside, true);
+            document.addEventListener('keydown', onKey, true);
+        }, 0);
+    }
+
+    // HSV, not d3's HSL: a saturation/value square is what a colour picker
+    // shows, and round-tripping through HSL would drift the knob.
+    function rgbToHsv(c) {
+        let col = null;
+        try {
+            col = d3.color(c);
+        } catch {
+            col = null;
+        }
+        col = col ? col.rgb() : {r: 0, g: 0, b: 0};
+        let r = col.r / 255, g = col.g / 255, b = col.b / 255;
+        let max = Math.max(r, g, b), min = Math.min(r, g, b), d = max - min;
+        let h = 0;
+        if (d > 0) {
+            if (max === r) {
+                h = 60 * (((g - b) / d) % 6);
+            } else if (max === g) {
+                h = 60 * (((b - r) / d) + 2);
+            } else {
+                h = 60 * (((r - g) / d) + 4);
+            }
+        }
+        return {h: (h + 360) % 360, s: max === 0 ? 0 : d / max, v: max};
+    }
+
+    function hsvToHex(hsv) {
+        let c = hsv.v * hsv.s;
+        let x = c * (1 - Math.abs(((hsv.h / 60) % 2) - 1));
+        let m = hsv.v - c;
+        let i = Math.floor(hsv.h / 60) % 6;
+        let rgb = [[c, x, 0], [x, c, 0], [0, c, x], [0, x, c], [x, 0, c], [c, 0, x]][i];
+        return '#' + rgb.map(function (v) {
+            return Math.round((v + m) * 255).toString(16).padStart(2, '0');
+        }).join('');
+    }
+
+    // The key a value is remembered under. Property values fold to lower case
+    // (the same fold the value grouping uses), so a legend override applies to
+    // every case variant of that value -- which is what the legend shows as
+    // one row anyway. ONE definition: the candidate builder and the legend's
+    // colour picker must agree, or an override would be written under a key
+    // the scale never reads.
+    function visMemoryKey(vis, v) {
+        return vis.kind === 'property' ? String(v).toLowerCase() : v;
+    }
+
+    // Colours live in a per-candidate MEMORY map rather than being computed
+    // from the value's position, so they survive a re-render, a Color-by
+    // switch away and back, and a legend re-sort. That is also what makes a
+    // user override possible at all: writing one entry and rebuilding is
+    // enough, and every consumer (the legend swatch AND the node colour) reads
+    // through the same scale.
+    function buildCategoryScale(vis) {
+        let mem = _vis.colorMemory[vis.id] || (_vis.colorMemory[vis.id] = {});
+        let next = _vis.colorNext[vis.id] || 0;
+        vis.values.forEach(function (v) {
+            let k = visMemoryKey(vis, v);
+            if (!(k in mem)) {
+                mem[k] = extendedPaletteColor(next++);
+            }
+        });
+        _vis.colorNext[vis.id] = next;
+        vis.categoryScale = d3.scaleOrdinal()
+            .domain(vis.values)
+            .range(vis.values.map(function (v) {
+                return mem[visMemoryKey(vis, v)];
+            }));
+    }
+
+    // What the PALETTE had assigned before the user overrode it, keyed the
+    // same way as colorMemory. Storing the displaced colour rather than the
+    // chosen one is what makes reset exact: deleting the memory entry instead
+    // and re-running buildCategoryScale would hand the value the next UNUSED
+    // palette colour, since colorNext has moved on -- so "reset" would restore
+    // a palette colour, just not the one that was there.
+    function hasColorOverrides(vis) {
+        let o = _vis && _vis.colorOverrides && _vis.colorOverrides[vis.id];
+        return !!(o && Object.keys(o).length > 0);
+    }
+
+    function setColorOverride(vis, value, color) {
+        let o = _vis.colorOverrides[vis.id] || (_vis.colorOverrides[vis.id] = {});
+        let k = visMemoryKey(vis, value);
+        if (!(k in o)) {
+            // first override of this value: remember what it displaced
+            o[k] = _vis.colorMemory[vis.id][k];
+        }
+        _vis.colorMemory[vis.id][k] = color;
+        buildCategoryScale(vis);
+    }
+
+    function clearColorOverrides(vis) {
+        let o = _vis.colorOverrides[vis.id];
+        if (!o) {
+            return;
+        }
+        Object.keys(o).forEach(function (k) {
+            _vis.colorMemory[vis.id][k] = o[k];
+        });
+        delete _vis.colorOverrides[vis.id];
+        buildCategoryScale(vis);
+    }
+
     function computeVisualizationCandidates(viewRoot) {
         _vis.candidates = [];
         _vis.byId = {};
@@ -1456,24 +1759,11 @@ function (root, d3, forester, phyloXml) {
                     .domain([nums[0], mean, nums[nums.length - 1]]);
             }
             function memoryKey(v) {
-                return c.kind === 'property' ? v.toLowerCase() : v;
+                return visMemoryKey(c, v);
             }
             // a switchable candidate needs both scales standing by
             if (c.colorMode === 'category' || c.switchable) {
-                let mem = _vis.colorMemory[c.id] || (_vis.colorMemory[c.id] = {});
-                let next = _vis.colorNext[c.id] || 0;
-                c.values.forEach(function (v) {
-                    let k = memoryKey(v);
-                    if (!(k in mem)) {
-                        mem[k] = extendedPaletteColor(next++);
-                    }
-                });
-                _vis.colorNext[c.id] = next;
-                c.categoryScale = d3.scaleOrdinal()
-                    .domain(c.values)
-                    .range(c.values.map(function (v) {
-                        return mem[memoryKey(v)];
-                    }));
+                buildCategoryScale(c);
             }
             if (c.shape) {
                 let mem = _vis.shapeMemory[c.id] || (_vis.shapeMemory[c.id] = {});
@@ -1669,6 +1959,16 @@ function (root, d3, forester, phyloXml) {
                 }
             });
         }
+        if (kind === 'color' && !isRange && hasColorOverrides(vis)) {
+            chips.push({
+                text: '[reset colors]',
+                tip: 'put the palette colors back',
+                act: function () {
+                    clearColorOverrides(vis);
+                    update(null, 0);
+                }
+            });
+        }
         if (!isRange && (hidden > 0 || (_vis.legendExpandedById[vis.id] && vis.values.length > LEGEND_MAX_ROWS))) {
             chips.push({
                 text: hidden > 0 ? '[+' + hidden + ' more]' : '[fewer]',
@@ -1797,11 +2097,38 @@ function (root, d3, forester, phyloXml) {
                     .style('fill', 'none')
                     .style('stroke', frame);
             } else {
-                g.append('rect')
+                let sw = g.append('rect')
                     .attr('x', x + PAD).attr('y', swY)
                     .attr('width', SWATCH).attr('height', SWATCH)
                     .attr('rx', 2)
                     .style('fill', vis.categoryScale(r.value));
+                if (kind === 'color') {
+                    // A 9px square is a poor target, so the hit area is the
+                    // swatch plus its label -- and it is a separate transparent
+                    // rect so the visible swatch keeps its exact geometry.
+                    let value = r.value;
+                    g.append('rect')
+                        .attr('x', x + PAD - 2).attr('y', swY - 2)
+                        .attr('width', SWATCH + GAP + legendTextWidth(r.text, rowFont) + 4)
+                        .attr('height', SWATCH + 4)
+                        .style('fill', 'transparent')
+                        .style('cursor', 'pointer')
+                        .on('mousedown', function (event) {
+                            event.stopPropagation();   // picking a colour is not a drag
+                        })
+                        .on('click', function (event) {
+                            event.stopPropagation();
+                            // the legend CARD, not the swatch: a picker that
+                            // covers the legend hides the very swatch it changes
+                            openColorPicker(vis.categoryScale(value), r.text, this.parentNode, function (picked) {
+                                setColorOverride(vis, value, picked);
+                                update(null, 0);
+                            });
+                        })
+                        .append('title')
+                        .text('click to change the color for "' + r.text + '"');
+                    sw.style('cursor', 'pointer');
+                }
             }
             g.append('text')
                 .attr('x', x + PAD + SWATCH + GAP).attr('y', baseline)
@@ -1880,6 +2207,82 @@ 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:
+    //
+    //   - 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.
+    //
+    // Only for callers that read nothing back afterwards. zoomToFit() and
+    // the layout switches update() and then read the fresh layout in the
+    // same tick, so they keep calling update() directly -- deferring those
+    // would have them measure a tree that has not been drawn yet.
+    //
+    // Arguments merge conservatively: any caller that wants the width
+    // recalculated gets it, the shortest transition wins, and a named source
+    // survives a null one.
+    function scheduleUpdate(source, transitionDuration, doNotRecalculateWidth) {
+        if (_initializing) {
+            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;
+            _pendingUpdate.duration = Math.min(_pendingUpdate.duration, dur);
+            _pendingUpdate.noWidth = _pendingUpdate.noWidth && (doNotRecalculateWidth === true);
+            return;
+        }
+        _pendingUpdate = {source: source, duration: dur, noWidth: doNotRecalculateWidth === true};
+        let seq = _launchSeq;
+        showBusy(_container, 'Redrawing ' + _basicTreeProperties.nodeCount.toLocaleString() + ' nodes');
+        afterPaint(function () {
+            let p = _pendingUpdate;
+            _pendingUpdate = null;
+            if (seq !== _launchSeq || !p) {
+                return;   // the view was torn down or replaced meanwhile
+            }
+            try {
+                update(p.source, p.duration, p.noWidth);
+                runAfterUpdate();
+            } finally {
+                hideBusy();
+            }
+        });
+    }
+
+    // Run fn once the redraw has happened: now, if none is pending (a small
+    // tree, or nothing scheduled), else after the deferred update() runs.
+    function afterUpdate(fn) {
+        if (_pendingUpdate) {
+            _afterUpdate.push(fn);
+        } else {
+            fn();
+        }
+    }
+
+    function runAfterUpdate() {
+        let fns = _afterUpdate;
+        _afterUpdate = [];
+        fns.forEach(function (fn) {
+            fn();
+        });
+    }
+
     function update(source, transitionDuration, doNotRecalculateWidth) {
 
         if (!source) {
@@ -2060,14 +2463,18 @@ function (root, d3, forester, phyloXml) {
             });
 
 
-        // "Pulse Found Nodes", as on the desktop: a translucent breathing
-        // disc in the hit's colour behind each hit (first in the group, so
-        // everything else draws over it; never a pointer target).
-        nodeEnter.append('circle')
-            .attr('class', 'foundHalo aptx-found-halo')
-            .attr('r', 0)
-            .style('pointer-events', 'none');
-
+        // 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');
 
@@ -2091,33 +2498,6 @@ function (root, d3, forester, phyloXml) {
                 return 0;
             });
 
-        nodeEnter.append('text')
-            .attr('class', 'extlabel')
-            .attr('text-anchor', function (d) {
-                return d.children ? "end" : "start";
-            })
-            .style('font-family', _state.defaultFont)
-            .style('fill-opacity', 0.5);
-
-        nodeEnter.append('text')
-            .attr('class', 'bllabel')
-            .style('font-family', _state.defaultFont)
-            .style('fill-opacity', 0.5);
-
-        nodeEnter.append('text')
-            .attr('class', 'conflabel')
-            .attr('text-anchor', 'middle')
-            .style('font-family', _state.defaultFont);
-
-        nodeEnter.append('circle')
-            .attr('class', 'suppdot')
-            .style('pointer-events', 'none');
-
-        nodeEnter.append('text')
-            .attr('class', 'brancheventlabel')
-            .attr('text-anchor', 'middle')
-            .style('font-family', _state.defaultFont);
-
         // 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
@@ -2130,6 +2510,12 @@ function (root, d3, forester, phyloXml) {
         // merge them before the shared styling/positioning below.
         node = nodeEnter.merge(node);
 
+        // Create the optional children only where they will show something,
+        // and drop them where they will not. Must run BEFORE node.transition()
+        // below, so a child created now still gets its attributes set by the
+        // .select() calls that follow.
+        syncOptionalNodeChildren(node);
+
         node.select("text.extlabel")
             .style('font-size', function (d) {
                 let style = nodeStyle(d);
@@ -2303,6 +2689,7 @@ 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
@@ -2319,6 +2706,7 @@ function (root, d3, forester, phyloXml) {
             .style('fill', function (d) {
                 return isNodeFound(d) ? getFoundColor(d) : 'none';
             });
+        }
 
         node.select('circle.nodeCircle')
             .attr('r', function (d) {
@@ -2355,19 +2743,21 @@ function (root, d3, forester, phyloXml) {
 
         nodeUpdate.select('text.extlabel')
             .text(function (d) {
-                if (!_state.dynahide || !d.hide) {
-                    return makeNodeLabel(d);
-                }
+                return d._extLabelText;   // computed in syncOptionalNodeChildren
             });
 
-        nodeUpdate.select('text.bllabel')
-            .text(_state.showBranchLengthValues ? makeBranchLengthLabel : null);
-
-        nodeUpdate.select('text.conflabel')
-            .text(_state.showConfidenceValues ? makeConfidenceValuesLabel : null);
-
-        nodeUpdate.select('text.brancheventlabel')
-            .text(_state.showBranchEvents ? makeBranchEventsLabel : null);
+        // 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) {
+            nodeUpdate.select('text.bllabel').text(makeBranchLengthLabel);
+        }
+        if (_state.showConfidenceValues) {
+            nodeUpdate.select('text.conflabel').text(makeConfidenceValuesLabel);
+        }
+        if (_state.showBranchEvents) {
+            nodeUpdate.select('text.brancheventlabel').text(makeBranchEventsLabel);
+        }
 
         let drawShapes = _state.showVisualizations || stylesActive();
         nodeUpdate.select('path')
@@ -2376,16 +2766,17 @@ function (root, d3, forester, phyloXml) {
             .style('fill', drawShapes ? makeNodeFillColor : null)
             .attr('d', drawShapes ? makeNodeVisShape : null);
 
-        node.each(function (d) {
-            if (d.children) {
-                if (!drawShapes && makeNodeVisShape(d) === null) {
-                    d3.select(this).select('path').transition().duration(transitionDuration)
-                        .attr('d', function () {
-                            return 'M0,0';
-                        });
-                }
-            }
-        });
+        // 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) {
+            node.filter(function (d) {
+                return d.children && makeNodeVisShape(d) === null;
+            }).select('path').transition().duration(transitionDuration)
+                .attr('d', 'M0,0');
+        }
 
         // Departing nodes are removed OUTRIGHT rather than on the end of a
         // transition. Going to a subtree (or deleting one) fires several updates
@@ -2397,9 +2788,12 @@ 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')
-            .attr('d', elbow)
-            .attr('stroke-width', makeBranchWidth)
             .data(links, function (d) {
                 return d.target.id;
             });
@@ -2423,6 +2817,8 @@ function (root, d3, forester, phyloXml) {
 
         link = linkEnter.merge(link);
 
+        link.attr('stroke-width', makeBranchWidth);
+
         link.transition()
             .duration(transitionDuration)
             .attr('stroke', makeBranchColor)
@@ -2877,6 +3273,121 @@ function (root, d3, forester, phyloXml) {
         return false;
     }
 
+    // The six per-node children that are usually not needed. Whether one is
+    // wanted is either a GLOBAL switch (three of the four labels, the support
+    // dot) -- in which case the whole class can be dropped in a single
+    // selectAll().remove() rather than a per-node test -- or a per-node
+    // question (the external label's text, and whether a search hit this node).
+    //
+    // The external label's text is computed HERE and stashed, because it is the
+    // one predicate that costs something and the update below would otherwise
+    // compute it a second time.
+    function anySearchHits() {
+        return (_foundNodes0 && _foundNodes0.size > 0)
+            || (_foundNodes1 && _foundNodes1.size > 0);
+    }
+
+    function syncOptionalNodeChildren(node) {
+        let wantBl = _state.showBranchLengthValues === true;
+        let wantConf = _state.showConfidenceValues === true;
+        let wantEvent = _state.showBranchEvents === true;
+        let wantDot = _state.showSupportDots === true;
+
+        // whole-class removals first: one pass, no per-node callback
+        if (!wantBl) {
+            node.selectAll('text.bllabel').remove();
+        }
+        if (!wantConf) {
+            node.selectAll('text.conflabel').remove();
+        }
+        if (!wantEvent) {
+            node.selectAll('text.brancheventlabel').remove();
+        }
+        if (!wantDot) {
+            node.selectAll('circle.suppdot').remove();
+        }
+
+        // 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) {
+            node.selectAll('circle.foundHalo').remove();
+        }
+
+        // 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
+        // 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();
+                }
+            }
+
+            if (wantBl && !g.querySelector('text.bllabel')) {
+                d3.select(g).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 (wantEvent && !g.querySelector('text.brancheventlabel')) {
+                d3.select(g).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();
+                }
+            }
+        });
+    }
+
     let makeNodeLabel = function (phynode) {
         if (!_state.showExternalLabels && !(phynode.children)) {
             return null;
@@ -3253,6 +3764,49 @@ function (root, d3, forester, phyloXml) {
     // One list, because there is one config object. Checking each of the two old
     // bags only against its own list meant the right name in the wrong bag was
     // silently ignored -- the very failure this list exists to prevent.
+    // THE one source for the parse-time defaults. initializeSettings runs from
+    // launch(), which is AFTER launchArchaeopteryx has already parsed, and
+    // parseTree is a public entry point that docs/open.html calls directly --
+    // so a second copy of these literals in either place is a default that
+    // cannot take effect. (The desktop's command-line launch drifted from its
+    // File>Open exactly this way, on a constant that had been hardcoded false
+    // since its config parser was removed.) Two equal literals is the bug;
+    // one object read by both is the fix.
+    const PARSE_DEFAULTS = {
+        internalNumericLabels: 'auto'
+    };
+
+    // Keys that still WORK but have moved, or have been retired outright.
+    // Unlike REMOVED_CONFIG these do not throw: they are translated (or
+    // ignored) with a warning, so an upgrade does not break a working embed
+    // over a rename. An entry without a "to" has no replacement -- it is
+    // accepted and dropped.
+    const DEPRECATED_CONFIG = {
+        nhConfidenceValuesInBrackets: {
+            // Retired in 3.1.0. It gated whether "[95]" after a node is read
+            // as a confidence, and setting it false did not reinterpret the
+            // bracket -- it DISCARDED it, so the flag's only power was to
+            // throw support values away. Non-numeric brackets (plain Newick
+            // comments) are ignored either way, and NHX / BEAST blobs go
+            // through a different path entirely, so there is no tree for
+            // which false was the right answer. Its one real purpose was
+            // historical: it used to be mutually exclusive with
+            // nhConfidenceValuesAsInternalNames, and that guard is gone.
+            note: 'bracketed values such as "[95]" are always read as confidences now; the option had no other effect'
+        },
+        nhConfidenceValuesAsInternalNames: {
+            to: 'internalNumericLabels',
+            // true meant "read every numeric internal label as a confidence",
+            // which is exactly 'confidence'. It is NOT 'auto': auto is
+            // all-or-nothing and promotes nothing in a mixed tree, so a caller
+            // silently moved to auto would lose promotions they had.
+            map: function (v) {
+                return v === true ? 'confidence' : PARSE_DEFAULTS.internalNumericLabels;
+            },
+            note: 'use \'confidence\' for what this flag did (\'auto\' is the new default, and does not promote mixed trees)'
+        }
+    };
+
     const REMOVED_CONFIG = {
         circular: 'renamed to "layout": use layout: "circular"',
         circularDisplay: 'replaced by "layout": use layout: "circular" (or "rectangular" / "unrooted")',
@@ -3428,9 +3982,8 @@ function (root, d3, forester, phyloXml) {
         'enableSubtreeDeletion',
         'enableVisualizations',
         'initialVisualization',
+        'internalNumericLabels',
         'ladderizeTree',
-        'nhConfidenceValuesAsInternalNames',
-        'nhConfidenceValuesInBrackets',
         'nhExportWriteConfidences',
         'nodeLabels',
         'pngExportScale',
@@ -3453,6 +4006,24 @@ function (root, d3, forester, phyloXml) {
             });
         }
 
+        Object.keys(given).forEach(function (k) {
+            let dep = DEPRECATED_CONFIG[k];
+            if (dep === undefined) {
+                return;
+            }
+            if (dep.to) {
+                console.warn(WARNING + ': "' + k + '" was replaced by "' + dep.to
+                    + '": ' + dep.note);
+                // An explicit new key always wins over the old alias.
+                if (given[dep.to] === undefined) {
+                    given[dep.to] = dep.map(given[k]);
+                }
+            } else {
+                console.warn(WARNING + ': "' + k + '" is retired and has no effect: ' + dep.note);
+            }
+            delete given[k];
+        });
+
         let removed = Object.keys(given).filter(function (k) {
             return REMOVED_CONFIG[k] !== undefined;
         });
@@ -3493,6 +4064,16 @@ function (root, d3, forester, phyloXml) {
         return CONTROLS_0_LEFT_DEFAULT + PANEL_WIDTH + ROOT_CLEARANCE;
     }
 
+    // The only validation initializeState() performs. Hoisted so launch() can
+    // run it synchronously and defer the rest of initializeState behind the
+    // working card on a big tree; the check inside initializeState stays as
+    // a backstop and can no longer fire from launch().
+    function checkLayoutValue(layout) {
+        if (layout !== undefined && layout !== 'rectangular' && layout !== 'circular' && layout !== 'unrooted') {
+            throw new Error(ERROR + '"layout" must be "rectangular", "circular", or "unrooted"');
+        }
+    }
+
     function initializeState(state) {
         _state = state;
 
@@ -3507,12 +4088,38 @@ function (root, d3, forester, phyloXml) {
             });
         }
 
-        // Branch lengths are worth drawing to scale only when MOST branches
-        // carry one. A tree where a handful of branches have a length and the
-        // rest do not is not a phylogram with gaps -- it is a cladogram.
-        let branchCount = _basicTreeProperties.nodeCount - 1;
-        _state.phylogram = branchCount > 0
-            && (_basicTreeProperties.branchesWithPositiveLength / branchCount) > PHYLOGRAM_MIN_BRANCH_FRACTION;
+        // Branch lengths are worth drawing to scale only when MOST of the
+        // branches that CARRY THE SCALE have one. Two corrections to the
+        // obvious "count every branch" version, both from real BV-BRC trees:
+        //
+        // 1. Judge INTERNAL branches, not all of them. Exporters routinely
+        //    omit branch_length on tips where it would be zero, so a tree can
+        //    be fully measured internally and still have most of its branches
+        //    bare -- segment_3_2025_12_09.xml is 100% measured across its 5265
+        //    internal branches and only 16% across its 13246 tips, and used to
+        //    open as a cladogram on 0.40 of all branches. A missing TIP length
+        //    still draws correctly (the tip sits at its parent); a missing
+        //    INTERNAL length is what destroys the scale. A star tree has no
+        //    internal branches at all, so there the tips are all there is.
+        // 2. Ask whether a branch HAS a length, not whether it is positive.
+        //    An explicit zero is a real measurement -- a tree writing its
+        //    polytomies as zero-length internal branches is a phylogram.
+        //
+        // The root is excluded from every count: a branch length is a property
+        // of the branch ABOVE a node, and the root has none.
+        let scaleBearing = _basicTreeProperties.internalBranchCount > 0;
+        let measured = scaleBearing
+            ? _basicTreeProperties.internalBranchesWithLength
+            : _basicTreeProperties.branchesWithLength;
+        let branchCount = scaleBearing
+            ? _basicTreeProperties.internalBranchCount
+            : _basicTreeProperties.branchCount;
+        // branchLengths gates the phylogram BUTTON too (a tree whose every
+        // length is zero cannot be drawn to scale), so the default must agree
+        // with it or the view would contradict its own control.
+        _state.phylogram = _basicTreeProperties.branchLengths === true
+            && branchCount > 0
+            && (measured / branchCount) > PHYLOGRAM_MIN_BRANCH_FRACTION;
         _state.alignPhylogram = false;
         // "layout" is launch-time only: a caller picks the starting layout by
         // name, and from here on _state.circularDisplay/_state.unrootedDisplay
@@ -3554,7 +4161,22 @@ function (root, d3, forester, phyloXml) {
         // The Confidence checkbox APPEARS whenever the tree has support values
         // (that is driven by _basicTreeProperties.confidences where the panel
         // is built) but starts unchecked: confidence values clutter the tree.
-        _state.showConfidenceValues = false;
+        //
+        // The ONE exception is a tree whose confidences were just promoted from
+        // bare internal labels: those numbers were ON SCREEN a moment ago, as
+        // node names. Promotion MOVES the label, so leaving the display off
+        // would delete them from the view -- turning "my support values show as
+        // names" into "my support values are gone", which is worse than the bug
+        // being fixed. Promotion must be visually neutral: the same numbers
+        // stay, they merely become confidences.
+        //
+        // Deliberately NOT "any tree that has confidences" (which is what the
+        // desktop does): a phyloXML tree carrying real confidences never had
+        // them drawn, so there is nothing to preserve and today's uncluttered
+        // default is right. Only promotion destroys visible information. That
+        // difference between the two programs is a NAMED divergence, agreed
+        // 2026-09-08 -- do not "fix" it into either shape.
+        _state.showConfidenceValues = !!(_treeData && _treeData.confidencesFromInternalLabels > 0);
         // A tree carrying an aligned mol_seq per tip shows its alignment
         // track from the start, as the desktop auto-enables it on load --
         // unless the caller already said so explicitly (an explicit value
@@ -3786,13 +4408,14 @@ function (root, d3, forester, phyloXml) {
         if (_settings.nhExportWriteConfidences === undefined) {
             _settings.nhExportWriteConfidences = true;
         }
-        // the two New Hampshire parse options (used by launchArchaeopteryx /
-        // parseTree; they were positional arguments before the one-config API)
-        if (_settings.nhConfidenceValuesInBrackets === undefined) {
-            _settings.nhConfidenceValuesInBrackets = true;
-        }
-        if (_settings.nhConfidenceValuesAsInternalNames === undefined) {
-            _settings.nhConfidenceValuesAsInternalNames = false;
+        // the New Hampshire parse options (used by launchArchaeopteryx /
+        // parseTree; they were positional arguments before the one-config API).
+        // Both read PARSE_DEFAULTS -- see the comment there for why a second
+        // copy of these literals would be a default that cannot take effect.
+        if (_settings.internalNumericLabels === undefined) {
+            _settings.internalNumericLabels = PARSE_DEFAULTS.internalNumericLabels;
+        } else if (['auto', 'confidence', 'label'].indexOf(_settings.internalNumericLabels) < 0) {
+            throw new Error(ERROR + 'internalNumericLabels must be "auto", "confidence" or "label"');
         }
         // custom label-field checkboxes (was launch()'s sixth positional arg)
         if (_settings.nodeLabels === undefined) {
@@ -3887,6 +4510,10 @@ function (root, d3, forester, phyloXml) {
         populateSearchMenus();
 
         _svgGroup = _baseSvg.append('g');
+        // the floating strips paint over the tree and under the overview
+        _floatGroup = _baseSvg.append('g').attr('class', 'aptx-float')
+            .style('pointer-events', 'none');
+        _floatStrips = {};
         makeOverview(); // appended after the tree group, so it paints on top of it
 
         if (_settings.ladderizeTree) {
@@ -3919,6 +4546,9 @@ function (root, d3, forester, phyloXml) {
             getSelectedNodes: function () {
                 return archaeopteryx.getSelectedNodes();
             },
+            // resolves once the tree is drawn: at once for a small tree,
+            // after the deferred first draw for a big one
+            ready: _readyPromise,
             destroy: destroyViewer
         };
     }
@@ -3930,6 +4560,8 @@ function (root, d3, forester, phyloXml) {
     // outlived the view. A later launch() into any container works normally
     // (the page-level handlers rebind).
     function destroyViewer() {
+        ++_launchSeq;   // a first draw still waiting for its frame must not run
+        hideBusy();
         if (_container) {
             d3.select(_container).selectAll('svg').remove();
             _container.querySelectorAll('.aptx-panel').forEach(function (p) {
@@ -3940,8 +4572,9 @@ function (root, d3, forester, phyloXml) {
         document.querySelectorAll('dialog.aptx-dialog').forEach(function (dlg) {
             dlg.remove();
         });
-        if (_msaScroller) {
-            _msaScroller.remove();
+        if (_msaNav) {
+            _msaNav.remove();
+            _msaNav = null;
             _msaScroller = null;
         }
         if (_node_mouseover_div) {
@@ -4044,27 +4677,25 @@ function (root, d3, forester, phyloXml) {
         _radialRotation = 0;
         _radialLabelsHorizontal = false;
         _msaColOffset = 0;
-        _vis = null;
-
-
-        initializeState(cfg.state);
+        // ---- synchronous: everything that can throw, and the cheap setup --
+        //
+        // initializeSettings validates values and throws on a bad one, so it
+        // stays here. It reads nothing initializeState produces, so it can
+        // run first -- which lets initializeState, the visualization
+        // candidates and the panel move BEHIND the working card on a big tree:
+        // together they were ~2.7 s of synchronous label intelligence and
+        // candidate ranking over 13k tips before the card could even paint.
+        checkLayoutValue(cfg.state ? cfg.state.layout : undefined);
         initializeSettings(cfg.settings);
         _nodeLabels = _settings.nodeLabels || null;
 
-
-        initializeVisualizations();
-
-        // launch() may run again on the same container (tree switchers do
-        // exactly that): tear the previous viewer's DOM down first, or the
-        // duplicated element ids leave the NEW panel's controls wired to the
-        // OLD, invisible one.
+        // whatever a previous launch left in this container (or in the
+        // container before it) goes now, so the old tree does not sit under
+        // the card while the new one is prepared
         d3.select(containerEl).selectAll('svg').remove();
         containerEl.querySelectorAll('.aptx-panel').forEach(function (p) {
             p.remove();
         });
-        // ...and a previous viewer in a DIFFERENT container: one viewer per
-        // page is the contract, and "replaced" must never mean "abandoned on
-        // screen with its controls cross-wired to the new tree"
         if (previousContainer && previousContainer !== containerEl) {
             d3.select(previousContainer).selectAll('svg').remove();
             previousContainer.querySelectorAll('.aptx-panel').forEach(function (p) {
@@ -4072,10 +4703,6 @@ function (root, d3, forester, phyloXml) {
             });
         }
         _selectedNodes = new Set();
-        // and null the old tree: the initialization sequence runs update()
-        // once mid-way (applyTreeTheme), which on the first launch is a no-op
-        // because _root is null -- a relaunch must start from the same state,
-        // not render the OLD tree against half-reset globals
         _root = null;
         _root_const = null;
         _in_subtree = false;
@@ -4085,50 +4712,86 @@ function (root, d3, forester, phyloXml) {
         _overviewContent = null;
         _overviewViewport = null;
         _overviewMap = null;
+        _vis = null;
 
-        createGui();
+        // ---- the rest: deferred one frame on a big tree, immediate otherwise
+        let seq = ++_launchSeq;
+        function setupAndDraw() {
+            initializeState(cfg.state);
+            initializeVisualizations();
+            createGui();
 
-        _baseSvg = d3.select(containerEl).append('svg')
-            .attr('width', _displayWidth)
-            .attr('height', _displayHeight)
-            .call(_zoomListener);
+            _baseSvg = d3.select(containerEl).append('svg')
+                .attr('width', _displayWidth)
+                .attr('height', _displayHeight)
+                .call(_zoomListener);
 
-        if (_settings.enableDynamicSizing) {
-            // namespaced: the HOST page may have its own d3 window-resize
-            // listener, which an un-namespaced .on('resize') would CLOBBER --
-            // and destroy() below must be able to take only ours down
-            d3.select(window)
-                .on('resize.archaeopteryx', function () {
-                    let size = displaySizeFromContainer();
-                    if (!size) {
+            if (_settings.enableDynamicSizing) {
+                d3.select(window)
+                    .on('resize.archaeopteryx', function () {
+                        let size = displaySizeFromContainer();
+                        if (!size) {
+                            return;
+                        }
+                        _displayWidth = size.w;
+                        _displayHeight = size.h;
+                        _baseSvg.attr('width', size.w);
+                        _baseSvg.attr('height', size.h);
+                        rebuildOverview();
+                        if ((_settings.zoomToFitUponWindowResize === true) && (_zoomed_x_or_y === false) && (Math.abs(currentZoomScale() - 1.0) < 0.001)) {
+                            zoomToFit();
+                        }
+                    });
+            }
+
+            _treeFn = d3.cluster()
+                .size([_displayHeight, _displayWidth]);
+
+            _treeFn.clickEvent = getClickEventListenerNode(phylo);
+
+            _root = phylo;
+            _root_const = _root;
+
+            calcMaxExtLabel();
+            _root.x0 = _displayHeight / 2;
+            _root.y0 = 0;
+            _initializing = true;
+            try {
+                initialize();
+            } finally {
+                _initializing = false;
+            }
+        }
+
+        // Everything that can THROW has already happened above -- bad
+        // arguments, unknown config keys, invalid setting values, an
+        // 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.
+        let nodeCount = _basicTreeProperties ? _basicTreeProperties.nodeCount : 0;
+        if (nodeCount >= BIG_TREE_NODES) {
+            showBusy(containerEl, 'Drawing ' + nodeCount.toLocaleString() + ' nodes',
+                'this can take a moment on a tree this size');
+            _readyPromise = new Promise(function (resolve) {
+                afterPaint(function () {
+                    // torn down or replaced while we waited: nothing to draw
+                    if (seq !== _launchSeq) {
+                        resolve();
                         return;
                     }
-                    _displayWidth = size.w;
-                    _displayHeight = size.h;
-
-                    _baseSvg.attr('width', size.w);
-                    _baseSvg.attr('height', size.h);
-                    rebuildOverview();
-                    if ((_settings.zoomToFitUponWindowResize === true) && (_zoomed_x_or_y === false) && (Math.abs(currentZoomScale() - 1.0) < 0.001)) {
-                        zoomToFit();
+                    try {
+                        setupAndDraw();
+                    } finally {
+                        hideBusy();
+                        resolve();
                     }
                 });
+            });
+        } else {
+            setupAndDraw();
+            _readyPromise = Promise.resolve();
         }
 
-        _treeFn = d3.cluster()
-            .size([_displayHeight, _displayWidth]);
-
-        _treeFn.clickEvent = getClickEventListenerNode(phylo);
-
-        _root = phylo;
-        _root_const = _root;
-
-        calcMaxExtLabel();
-
-        _root.x0 = _displayHeight / 2;
-        _root.y0 = 0;
-        initialize();
-
         return makeViewerHandle();
 
         //////////////////////////////////////////////////////////////////////
@@ -4143,9 +4806,43 @@ function (root, d3, forester, phyloXml) {
         return phy;
     };
 
-    archaeopteryx.parseNewHampshire = function (data, confidenceValuesInBrackets, confidenceValuesAsInternalNames) {
+    // Bare numeric internal labels become confidence values here, in the two
+    // thin wrappers rather than in launchArchaeopteryx -- because parseTree
+    // dispatches by calling THESE two by name, so every JS path picks it up at
+    // once: parseTree, launchArchaeopteryx (which calls parseTree), and
+    // docs/open.html, which calls parseTree DIRECTLY. Hooking the launch path
+    // instead would have shipped the fix while missing the page the bug was
+    // reported from. (Calling forester.parseNewHampshire directly still
+    // bypasses it -- deliberately: forester is a library that also serves
+    // callers who want the file exactly as written.)
+    //
+    // Nexus needs this as much as Newick: a Nexus tree statement IS Newick, so
+    // ")100:" has always had the same problem there. phyloXML and Auspice do
+    // not -- both carry real confidences, and promoting would corrupt them.
+    //
+    // The count rides on the phylogeny so the VIEWER can react without the
+    // promotion knowing anything about display state: initialize() switches
+    // the confidence display on when anything was promoted, so support values
+    // APPEAR rather than names silently vanishing.
+    function promoteInternalLabels(phy, mode) {
+        let promoted = forester.promoteInternalLabelsToConfidence(phy,
+            mode === undefined ? PARSE_DEFAULTS.internalNumericLabels : mode);
+        if (promoted > 0) {
+            phy.confidencesFromInternalLabels = promoted;
+        }
+        return phy;
+    }
+
+    // The retired brackets flag used to be the second argument and is still
+    // accepted there, ignored, with the mode following it. forester keeps its
+    // own flag -- that parameter is a shared contract with forester-Java, and
+    // a caller reaching straight past this wrapper can still set it -- but
+    // nothing here ever passes anything but true, because false only ever
+    // discarded the bracketed value.
+    archaeopteryx.parseNewHampshire = function (data, mode, legacyMode) {
         requireForester();
-        return forester.parseNewHampshire(data, confidenceValuesInBrackets, confidenceValuesAsInternalNames);
+        let m = (typeof mode === 'boolean' || mode === undefined) ? legacyMode : mode;
+        return promoteInternalLabels(forester.parseNewHampshire(data, true, false), m);
     };
 
     // An Auspice / Nextstrain v2 dataset.json; the tree opens on the time
@@ -4158,13 +4855,14 @@ function (root, d3, forester, phyloXml) {
 
     // A Nexus file can hold several trees; the FIRST one is displayed (any
     // alignment from the file's characters matrix rides along on its tips).
-    archaeopteryx.parseNexus = function (data, confidenceValuesInBrackets, confidenceValuesAsInternalNames) {
+    archaeopteryx.parseNexus = function (data, mode, legacyMode) {
         requireForester();
-        let trees = forester.parseNexus(data, confidenceValuesInBrackets, confidenceValuesAsInternalNames);
+        let m = (typeof mode === 'boolean' || mode === undefined) ? legacyMode : mode;
+        let trees = forester.parseNexus(data, true, false);
         if (trees.length === 0) {
             throw new Error('no tree found in the Nexus data');
         }
-        return trees[0];
+        return promoteInternalLabels(trees[0], m);
     };
 
     function calcMaxExtLabel() {
@@ -4245,132 +4943,7 @@ function (root, d3, forester, phyloXml) {
 
             function displayNodeData(n) {
                 let title = 'Node Data';
-                let text = '';
-                if (n.name) {
-                    text += 'Name: ' + n.name + '<br>';
-                }
-                if (n.branch_length) {
-                    text += 'Distance to Parent: ' + n.branch_length + '<br>';
-                }
-                text += 'Depth: ' + forester.calcDepth(n) + '<br>';
-                let i = 0;
-                if (n.confidences) {
-                    for (i = 0; i < n.confidences.length; ++i) {
-                        let c = n.confidences[i];
-                        if (c.type) {
-                            text += 'Confidence [' + c.type + ']: ' + c.value + '<br>';
-                        } else {
-                            text += 'Confidence: ' + c.value + '<br>';
-                        }
-                        if (c.stddev) {
-                            text += '- stdev: ' + c.stddev + '<br>';
-                        }
-                    }
-                }
-                if (n.taxonomies) {
-                    for (i = 0; i < n.taxonomies.length; ++i) {
-                        text += 'Taxonomy<br>';
-                        let t = n.taxonomies[i];
-                        if (t.id) {
-                            if (t.id.provider) {
-                                text += '- Id [' + t.id.provider + ']: ' + t.id.value + '<br>';
-                            } else {
-                                text += '- Id: ' + t.id.value + '<br>';
-                            }
-                        }
-                        if (t.code) {
-                            text += '- Code: ' + t.code + '<br>';
-                        }
-                        if (t.scientific_name) {
-                            text += '- Scientific name: ' + t.scientific_name + '<br>';
-                        }
-                        if (t.common_name) {
-                            text += '- Common name: ' + t.common_name + '<br>';
-                        }
-                        if (t.rank) {
-                            text += '- Rank: ' + t.rank + '<br>';
-                        }
-                    }
-                }
-                if (n.sequences) {
-                    for (i = 0; i < n.sequences.length; ++i) {
-                        text += 'Sequence<br>';
-                        let s = n.sequences[i];
-                        if (s.accession) {
-                            if (s.accession.source) {
-                                text += '- Accession [' + s.accession.source + ']: ' + s.accession.value + '<br>';
-                            } else {
-                                text += '- Accession: ' + s.accession.value + '<br>';
-                            }
-                            if (s.accession.comment) {
-                                text += '-- comment: ' + s.accession.comment + '<br>';
-                            }
-                        }
-                        if (s.symbol) {
-                            text += '- Symbol: ' + s.symbol + '<br>';
-                        }
-                        if (s.name) {
-                            text += '- Name: ' + s.name + '<br>';
-                        }
-                        if (s.gene_name) {
-                            text += '- Gene name: ' + s.gene_name + '<br>';
-                        }
-                        if (s.location) {
-                            text += '- Location: ' + s.location + '<br>';
-                        }
-                        if (s.type) {
-                            text += '- Type: ' + s.type + '<br>';
-                        }
-                    }
-                }
-                if (n.distributions) {
-                    let distributions = n.distributions;
-                    for (i = 0; i < distributions.length; ++i) {
-                        text += 'Distribution: ';
-                        if (distributions[i].desc) {
-                            text += distributions[i].desc + '<br>';
-                        }
-                    }
-                }
-                if (n.date) {
-                    text += 'Date: ';
-                    let date = n.date;
-                    if (date.desc) {
-                        text += date.desc + '<br>';
-                    }
-                }
-                if (n.events) {
-                    text += 'Events<br>';
-                    let ev = n.events;
-                    if (ev.type && ev.type.length > 0) {
-                        text += '- Type: ' + ev.type + '<br>';
-                    }
-                    if (ev.duplications && ev.duplications > 0) {
-                        text += '- Duplications: ' + ev.duplications + '<br>';
-                    }
-                    if (ev.speciations && ev.speciations > 0) {
-                        text += '- Speciations: ' + ev.speciations + '<br>';
-                    }
-                    if (ev.losses && ev.losses > 0) {
-                        text += '- Losses: ' + ev.losses + '<br>';
-                    }
-                }
-                if (n.properties && n.properties.length > 0) {
-                    let propertiesLength = n.properties.length;
-                    for (i = 0; i < propertiesLength; ++i) {
-                        let property = n.properties[i];
-                        if (property.ref && property.value) {
-                            if (property.unit) {
-                                text += property.ref + ': ' + property.value + property.unit + '<br>';
-                            } else {
-                                text += property.ref + ': ' + property.value + '<br>';
-                            }
-                        }
-                    }
-                }
-                if (n.children) {
-                    text += 'Sum of Subtree Tips: ' + forester.calcSumOfAllExternalDescendants(n) + '<br>';
-                }
+                let text = nodeDataText(n);
 
                 showNodeDataDialog(title, text, false, 260, 300);
 
@@ -4832,39 +5405,44 @@ function (root, d3, forester, phyloXml) {
             applyZoom();
             return;
         }
-        let t = d3.zoomTransform(_baseSvg.node());
-        let before = layoutSpans();
-        // the layout point currently under the middle of the viewport
-        let cx = ((size.w / 2) - t.x) / t.k;
-        let cy = ((size.h / 2) - t.y) / t.k;
+        // The point under the viewport centre, captured ONCE per burst: with
+        // a big tree the zoom steps of a wheel flick coalesce into one
+        // deferred redraw, and the re-centring after it maps this one point
+        // forward to the final layout. Capturing again on each step would
+        // measure a transform that has not been applied yet.
+        if (!_pendingCentre) {
+            let t = d3.zoomTransform(_baseSvg.node());
+            _pendingCentre = {
+                size: size,
+                t: t,
+                before: layoutSpans(),
+                cx: ((size.w / 2) - t.x) / t.k,
+                cy: ((size.h / 2) - t.y) / t.k
+            };
+        }
 
         applyZoom();
 
+        afterUpdate(recentreViewport);
+    }
+
+    function recentreViewport() {
+        let p = _pendingCentre;
+        _pendingCentre = null;
+        if (!p || !_baseSvg) {
+            return;
+        }
         let after = layoutSpans();
-        // Taken from the layout spans, NOT from a measured bounding box: nodes
-        // and labels are moved by a transition, so straight after update() the
-        // rendered geometry is still a mix of old and new and measuring it puts
-        // the anchor in the wrong place (which showed up as the tree wandering
-        // up the screen while zooming out). The spans are exact and immediate.
-        //
-        // Horizontally the layout has two zones. Points inside the branch span
-        // SCALE with it, but a viewport centre can also sit over the label
-        // zone beyond it (with long labels, most of the picture) -- label text
-        // keeps its length and only TRANSLATES with its anchor node, so that
-        // part of the distance is carried over unscaled. Splitting the anchor
-        // this way is exact for labels anchored at the far edge and a close
-        // approximation for the rest; scaling the whole distance made the
-        // display race off horizontally on long-labelled trees.
-        // ... and the same at the OTHER end: a centre panned before the root
-        // (negative) or past the span is empty margin too, and scaling it
-        // flings the tree the way the label overshoot once did.
-        let bx = Math.max(0, Math.min(cx, before.horizontal));
-        let nx = (bx * (after.horizontal / before.horizontal)) + (cx - bx);
-        let by = Math.max(0, Math.min(cy, before.vertical));
-        let ny = (by * (after.vertical / before.vertical)) + (cy - by);
+        // Map the captured point through the change in layout extent: a
+        // point inside the tree scales with it, a point in the margin keeps
+        // its offset from the tree's edge.
+        let bx = Math.max(0, Math.min(p.cx, p.before.horizontal));
+        let nx = (bx * (after.horizontal / p.before.horizontal)) + (p.cx - bx);
+        let by = Math.max(0, Math.min(p.cy, p.before.vertical));
+        let ny = (by * (after.vertical / p.before.vertical)) + (p.cy - by);
         _baseSvg.call(_zoomListener.transform, d3.zoomIdentity
-            .translate((size.w / 2) - (nx * t.k), (size.h / 2) - (ny * t.k))
-            .scale(t.k));
+            .translate((p.size.w / 2) - (nx * p.t.k), (p.size.h / 2) - (ny * p.t.k))
+            .scale(p.t.k));
     }
 
     // The desktop's radial rotation: each press turns the circular layout by
@@ -4873,7 +5451,7 @@ function (root, d3, forester, phyloXml) {
     // so horizontal zoom would be redundant there.
     function rotateRadial(clockwise) {
         _radialRotation = (_radialRotation + (clockwise ? 1 : -1) * Math.PI / 32) % (2 * Math.PI);
-        update(null, 0, true);
+        scheduleUpdate(null, 0, true);
     }
 
     // The desktop's fit-width button: fit the tree to the window width,
@@ -4912,7 +5490,7 @@ function (root, d3, forester, phyloXml) {
             } else {
                 _displayWidth = _displayWidth * BUTTON_ZOOM_IN_FACTOR;
             }
-            update(null, 0);
+            scheduleUpdate(null, 0);
         });
     }
 
@@ -4933,7 +5511,7 @@ function (root, d3, forester, phyloXml) {
             } else {
                 _displayHeight = _displayHeight * f;
             }
-            update(null, 0);
+            scheduleUpdate(null, 0);
         });
     }
 
@@ -4952,7 +5530,7 @@ function (root, d3, forester, phyloXml) {
             }
             if ((newDisplayWidth - calcMaxTreeLengthForDisplay()) >= 1) {
                 _displayWidth = newDisplayWidth;
-                update(null, 0);
+                scheduleUpdate(null, 0);
             }
         });
     }
@@ -4973,7 +5551,7 @@ function (root, d3, forester, phyloXml) {
                     _displayHeight = min;
                 }
             }
-            update(null, 0);
+            scheduleUpdate(null, 0);
         });
     }
 
@@ -5039,6 +5617,10 @@ function (root, d3, forester, phyloXml) {
             return;
         }
         _svgGroup.selectAll('g.aptx-msa').remove();
+        if (_floatGroup) {
+            _floatGroup.selectAll('g.aptx-msa-strip').remove();
+            delete _floatStrips['aptx-msa-strip'];
+        }
         if (!msaShown() || !_root) {
             _msaGeom = null;
             updateMsaScrollbar(0, 1, 0);
@@ -5202,8 +5784,47 @@ function (root, d3, forester, phyloXml) {
         let cons = forester.msaConservation(tips.map(function (t) {
             return msaRowSeq(t).slice(offset, offset + visible);
         }), visible, 'identity', isNuc);
+        // A faint dashed guide from each tip -- from the end of its label, or
+        // from the node itself when the label is hidden -- across to its row
+        // in the track, so a row can be read back to its sequence without
+        // counting. Same idea as the aligned-phylogram extension; dashed so it
+        // cannot be mistaken for a branch. Skipped where a label already
+        // reaches the track.
+        let guideFont = _state.externalNodeFontSize + 'px ' + _state.defaultFont;
+        let guideGap = _state.nodeLabelGap;
+        let guideEnd = originX - 3;
+        for (let r = 0; r < n; ++r) {
+            let d = tips[r];
+            let label = d._extLabelText || '';
+            let from;
+            if (label) {
+                let labelX = (_state.phylogram && _state.alignPhylogram && _yScale)
+                    ? d.y - _yScale(d.distToRoot) + _w + guideGap
+                    : d.y + guideGap;
+                from = labelX + legendTextWidth(label, guideFont) + 5;
+            } else {
+                from = d.y + makeNodeSize(d) + 4;
+            }
+            if (guideEnd - from < 6) {
+                continue;
+            }
+            g.append('line')
+                .attr('x1', from).attr('x2', guideEnd)
+                .attr('y1', d.x).attr('y2', d.x)
+                .attr('stroke', ink)
+                .attr('stroke-width', 1)
+                .attr('stroke-dasharray', '2,3')
+                .style('stroke-opacity', 0.35)
+                .style('pointer-events', 'none');
+        }
+
+        // ---- conservation, consensus, ruler: a FLOATING strip ----
+        let strip = floatStripGroup('aptx-msa-strip', _clusterH, MSA_BOTTOM_RESERVE);
+        strip.append('rect').attr('x', Math.round(originX) - 2).attr('y', _clusterH)
+            .attr('width', trackW + 4).attr('height', MSA_BOTTOM_RESERVE)
+            .attr('fill', _state.backgroundColorDefault);
         let consTop = _clusterH + MSA_CONS_TOP_GAP;
-        g.append('rect').attr('x', Math.round(originX)).attr('y', consTop)
+        strip.append('rect').attr('x', Math.round(originX)).attr('y', consTop)
             .attr('width', trackW).attr('height', MSA_CONS_BAR_H)
             .attr('fill', ink).attr('fill-opacity', 0.08);
         for (let i = 0; i < visible; ++i) {
@@ -5214,12 +5835,12 @@ function (root, d3, forester, phyloXml) {
             let bh = Math.max(1, Math.round(score * MSA_CONS_BAR_H));
             let x0 = Math.round(originX + (i * cw));
             let x1 = Math.round(originX + ((i + 1) * cw));
-            g.append('rect').attr('x', x0).attr('y', (consTop + MSA_CONS_BAR_H) - bh)
+            strip.append('rect').attr('x', x0).attr('y', (consTop + MSA_CONS_BAR_H) - bh)
                 .attr('width', Math.max(1, x1 - x0)).attr('height', bh)
                 .attr('fill', ink).attr('fill-opacity', 0.7);
         }
         if (trackW > 170) {
-            g.append('text').attr('x', Math.round(originX) + trackW - 3).attr('y', consTop + 9)
+            strip.append('text').attr('x', Math.round(originX) + trackW - 3).attr('y', consTop + 9)
                 .attr('text-anchor', 'end')
                 .style('font-size', '8px').style('fill', ink).style('fill-opacity', 0.9)
                 .text('Consensus identity (n = ' + n + ')');
@@ -5231,7 +5852,7 @@ function (root, d3, forester, phyloXml) {
                 if (!cc) {
                     continue;
                 }
-                g.append('text').attr('x', Math.round(originX + (i * cw)) + (cw / 2))
+                strip.append('text').attr('x', Math.round(originX + (i * cw)) + (cw / 2))
                     .attr('y', consTop + MSA_CONS_BAR_H + 10)
                     .attr('text-anchor', 'middle')
                     .style('font-family', 'monospace').style('font-size', '8px')
@@ -5243,7 +5864,7 @@ function (root, d3, forester, phyloXml) {
         // the 1-based column ruler: absolute column numbers at nice steps,
         // and always the first and last column when their edge is in view
         let rulerY = consTop + MSA_CONS_BAR_H + (consensusRow ? 13 : 3);
-        g.append('line').attr('x1', Math.round(originX)).attr('x2', Math.round(originX) + trackW)
+        strip.append('line').attr('x1', Math.round(originX)).attr('x2', Math.round(originX) + trackW)
             .attr('y1', rulerY).attr('y2', rulerY)
             .attr('stroke', ink).attr('stroke-opacity', 0.8).attr('stroke-width', 1);
         let lastRight = -Infinity;
@@ -5253,12 +5874,12 @@ function (root, d3, forester, phyloXml) {
                 return;
             }
             let x = Math.round(originX + (i * cw)) + (cw / 2);
-            g.append('line').attr('x1', x).attr('x2', x).attr('y1', rulerY).attr('y2', rulerY + 4)
+            strip.append('line').attr('x1', x).attr('x2', x).attr('y1', rulerY).attr('y2', rulerY + 4)
                 .attr('stroke', ink).attr('stroke-opacity', 0.8).attr('stroke-width', 1);
             let label = String(c);
             let half = label.length * 2.8;
             if (force || (x - half) >= (lastRight + 4)) {
-                g.append('text').attr('x', x).attr('y', rulerY + 14).attr('text-anchor', 'middle')
+                strip.append('text').attr('x', x).attr('y', rulerY + 14).attr('text-anchor', 'middle')
                     .style('font-size', '9px').style('fill', ink)
                     .text(label);
                 lastRight = x + half;
@@ -5285,49 +5906,152 @@ function (root, d3, forester, phyloXml) {
                 if (delta === 0) {
                     return;
                 }
-                let next = Math.max(0, Math.min(maxOffset, _msaColOffset + (delta > 0 ? 3 : -3)));
-                if (next !== _msaColOffset) {
-                    _msaColOffset = next;
-                    drawMsaTrack();
-                }
+                // a tenth of a screen per notch (never under three columns):
+                // fine enough to place a column, and a long alignment is not
+                // ten thousand notches end to end
+                let step = Math.max(3, Math.round(visible / 10));
+                msaScrollTo(_msaColOffset + (delta > 0 ? step : -step));
             });
         _msaGeom = {
             originX: originX, cw: cw, offset: offset, visible: visible, total: total,
             bounds: bounds, tips: tips, isNuc: isNuc
         };
         updateMsaScrollbar(offset, visible, total);
+        placeFloatingOverlays();
     }
 
     // The dedicated column scroller: a fixed HTML range input at the window
     // bottom, shown only while the alignment is wider than its window. Lives
     // outside the svg, so exports never include it.
+    // Scroll the alignment window to start at column `offset` (0-based),
+    // clamped, and redraw. Every way of moving -- slider, wheel, paging
+    // buttons, the jump box -- lands here.
+    function msaScrollTo(offset) {
+        if (!_msaGeom) {
+            return;
+        }
+        let max = Math.max(0, _msaGeom.total - _msaGeom.visible);
+        let next = Math.max(0, Math.min(max, Math.round(offset)));
+        if (next !== _msaColOffset) {
+            _msaColOffset = next;
+            drawMsaTrack();
+        }
+    }
+
+    // The navigation bar under a scrollable alignment. A bare range slider
+    // used to be all there was, and on a 30,000-column alignment 260 px of
+    // slider is ~115 columns per pixel and the wheel moved three columns a
+    // notch -- nothing could be FOUND, only scrolled past. Now: first / page
+    // back / slider / page forward / last, a jump-to-column box, and a
+    // readout of the columns on screen. A page is one screenful of columns.
     function updateMsaScrollbar(offset, visible, total) {
         let scrollable = msaShown() && total > visible;
-        if (!_msaScroller && !scrollable) {
-            return; // never park a page-level slider under a tree that has no use for it
-        }
-        if (!_msaScroller) {
+        if (!_msaNav && !scrollable) {
+            return; // never park page-level controls under a tree that has no use for them
+        }
+        if (!_msaNav) {
+            let nav = document.createElement('div');
+            nav.className = 'aptx-msa-nav';
+            if (_panelTheme) {
+                nav.classList.add('aptx-' + _panelTheme);
+            }
+            function button(text, title, act) {
+                let b = document.createElement('button');
+                b.type = 'button';
+                b.className = 'aptx-msa-nav-btn';
+                b.textContent = text;
+                b.title = title;
+                b.addEventListener('click', act);
+                nav.appendChild(b);
+                return b;
+            }
+            button('\u23EE', 'first column', function () {
+                msaScrollTo(0);
+            });
+            button('\u25C0', 'back one screen of columns', function () {
+                msaScrollTo(_msaColOffset - (_msaGeom ? _msaGeom.visible : 0));
+            });
             let el = document.createElement('input');
             el.type = 'range';
             el.id = MSA_SCROLL_ID;
             el.className = 'aptx-msa-scroll';
             el.min = '0';
             el.step = '1';
-            el.title = 'scroll the alignment columns (the mouse wheel over the alignment works too)';
+            el.title = 'scroll the alignment (the wheel over the alignment works too; PageUp/PageDown jump)';
             el.addEventListener('input', function () {
                 let v = parseInt(el.value, 10);
-                if (!isNaN(v) && v !== _msaColOffset) {
-                    _msaColOffset = v;
-                    drawMsaTrack();
+                if (!isNaN(v)) {
+                    msaScrollTo(v);
+                }
+            });
+            nav.appendChild(el);
+            button('\u25B6', 'forward one screen of columns', function () {
+                msaScrollTo(_msaColOffset + (_msaGeom ? _msaGeom.visible : 0));
+            });
+            button('\u23ED', 'last column', function () {
+                msaScrollTo(Infinity);
+            });
+
+            // "column [ 1234 ] - 1357 of 30,000": the box is the left edge of
+            // the window and takes a column to jump to; the rest reads back
+            let read = document.createElement('span');
+            read.className = 'aptx-msa-nav-read';
+            let lbl = document.createElement('span');
+            lbl.textContent = 'column';
+            let jump = document.createElement('input');
+            jump.type = 'number';
+            jump.min = '1';
+            jump.step = '1';
+            jump.className = 'aptx-msa-nav-jump';
+            jump.title = 'type a column number and press Enter to scroll there';
+            jump.setAttribute('aria-label', 'first visible column; type a column to jump to');
+            function jumpNow() {
+                let v = parseInt(jump.value, 10);
+                if (!isNaN(v)) {
+                    msaScrollTo(v - 1);
+                }
+                jump.blur();
+            }
+            jump.addEventListener('keydown', function (event) {
+                if (event.key === 'Enter') {
+                    event.preventDefault();
+                    jumpNow();
+                } else if (event.key === 'Escape') {
+                    jump.value = String(_msaColOffset + 1);
+                    jump.blur();
                 }
             });
-            document.body.appendChild(el);
+            jump.addEventListener('change', jumpNow);
+            let tail = document.createElement('span');
+            tail.className = 'aptx-msa-nav-tail';
+            read.appendChild(lbl);
+            read.appendChild(jump);
+            read.appendChild(tail);
+            nav.appendChild(read);
+
+            document.body.appendChild(nav);
+            _msaNav = nav;
             _msaScroller = el;
+            _msaNav._jump = jump;
+            _msaNav._tail = tail;
         }
-        _msaScroller.style.display = scrollable ? 'block' : 'none';
+        _msaNav.style.display = scrollable ? 'flex' : 'none';
         if (scrollable) {
             _msaScroller.max = String(total - visible);
             _msaScroller.value = String(offset);
+            if (document.activeElement !== _msaNav._jump) {
+                _msaNav._jump.value = String(offset + 1);
+            }
+            _msaNav._jump.max = String(total);
+            _msaNav._tail.textContent = '\u2013 ' + (offset + visible).toLocaleString()
+                + ' of ' + total.toLocaleString();
+            let atStart = offset <= 0;
+            let atEnd = offset >= total - visible;
+            let btns = _msaNav.querySelectorAll('.aptx-msa-nav-btn');
+            btns[0].disabled = atStart;
+            btns[1].disabled = atStart;
+            btns[2].disabled = atEnd;
+            btns[3].disabled = atEnd;
         }
     }
 
@@ -5399,7 +6123,7 @@ function (root, d3, forester, phyloXml) {
 
     function msaCbClicked() {
         _state.showMsa = getCheckboxValue(MSA_CB);
-        update(null, 0);
+        scheduleUpdate(null, 0);
     }
 
     // Search B starts hidden to keep the panel compact; one click (or a
@@ -5446,7 +6170,10 @@ function (root, d3, forester, phyloXml) {
     // under the tree (left) -- horizontally disjoint, so the two reserves
     // share the same strip rather than stacking.
     function bottomOverlayReserve() {
-        return Math.max(msaShown() ? MSA_BOTTOM_RESERVE : 0, timeAxisBottomReserve());
+        // The navigation bar is fixed at the viewport bottom, so the track's
+        // own bottom rows (conservation, consensus, ruler) must end above it
+        // or the bar covers them -- the old bare slider did exactly that.
+        return Math.max(msaShown() ? MSA_BOTTOM_RESERVE + MSA_NAV_RESERVE : 0, timeAxisBottomReserve());
     }
 
     function hexToRgbTriple(hex) {
@@ -5460,6 +6187,10 @@ function (root, d3, forester, phyloXml) {
             return;
         }
         _svgGroup.selectAll('g.aptx-time').remove();
+        if (_floatGroup) {
+            _floatGroup.selectAll('g.aptx-time-axis').remove();
+            delete _floatStrips['aptx-time-axis'];
+        }
         _svgGroup.selectAll('g.aptx-timegrid').remove();
         if (!timeAxisShown() || !_root || !_yScale) {
             return;
@@ -5551,6 +6282,19 @@ function (root, d3, forester, phyloXml) {
             }
         });
 
+        // ---- the axis itself: a FLOATING strip (see floatStripGroup) ----
+        let ax = floatStripGroup('aptx-time-axis', axisTop - 4, timeAxisBottomReserve() + 4);
+        function axisBackdrop(x0, x1) {
+            // opaque, in the background colour, so tips panned under the
+            // strip do not show through between the bands and the ruler
+            let left = Math.min(x0, x1);
+            ax.append('rect').attr('x', left - 2).attr('y', axisTop - 4)
+                .attr('width', Math.abs(x1 - x0) + 4).attr('height', timeAxisBottomReserve() + 4)
+                .attr('fill', _state.backgroundColorDefault);
+            ax.append('line').attr('x1', left - 2).attr('x2', left - 2 + Math.abs(x1 - x0) + 4)
+                .attr('y1', axisTop - 4).attr('y2', axisTop - 4)
+                .attr('stroke', ink).attr('stroke-opacity', 0.25).attr('stroke-width', 1);
+        }
         if (info.type === 'geologic') {
             let rootAge = info.rootAge;
             if (!(rootAge > 0)) {
@@ -5562,7 +6306,10 @@ function (root, d3, forester, phyloXml) {
                 return anchorX + ((anchorAge - age) * corr);
             };
             let youngBound = Math.max(0, anchorAge - ((maxTipX - anchorX) / corr));
-            let ranks = forester.geoBandRanks(rootAge);
+            // both bounds: a fossil-only clade spans [youngest tip, root],
+            // and a narrow window bands Series over Stage
+            axisBackdrop(xOfAge(rootAge), xOfAge(youngBound));
+            let ranks = forester.geoBandRanks(youngBound, rootAge);
             if (grid) {
                 // the FINE rank's old-side boundaries, root and tip edges
                 // excluded (they would just retrace the tree's outline)
@@ -5585,12 +6332,12 @@ function (root, d3, forester, phyloXml) {
                     if (w <= 0) {
                         continue;
                     }
-                    g.append('rect').attr('x', left).attr('y', rowY)
+                    ax.append('rect').attr('x', left).attr('y', rowY)
                         .attr('width', w).attr('height', TIME_BAND_ROW_H)
                         .attr('fill', iv.color)
                         .attr('stroke', ink).attr('stroke-opacity', 0.5).attr('stroke-width', 0.5);
                     if ((iv.name.length * 5.5) + 4 <= w) {
-                        g.append('text').attr('x', left + (w / 2)).attr('y', rowY + TIME_BAND_ROW_H - 3.5)
+                        ax.append('text').attr('x', left + (w / 2)).attr('y', rowY + TIME_BAND_ROW_H - 3.5)
                             .attr('text-anchor', 'middle')
                             .style('font-size', '9px')
                             .style('fill', forester.msaLetterInk(hexToRgbTriple(iv.color)))
@@ -5600,7 +6347,7 @@ function (root, d3, forester, phyloXml) {
             }
             // the "Ma before present" ruler
             let rulerY = axisTop + (2 * TIME_BAND_ROW_H) + 4;
-            g.append('line').attr('x1', xOfAge(rootAge)).attr('x2', xOfAge(youngBound))
+            ax.append('line').attr('x1', xOfAge(rootAge)).attr('x2', xOfAge(youngBound))
                 .attr('y1', rulerY).attr('y2', rulerY)
                 .attr('stroke', ink).attr('stroke-width', 1);
             let labels = [];
@@ -5620,7 +6367,7 @@ function (root, d3, forester, phyloXml) {
             let placed = [];
             labels.forEach(function (l) {
                 let x = xOfAge(l.age);
-                g.append('line').attr('x1', x).attr('x2', x)
+                ax.append('line').attr('x1', x).attr('x2', x)
                     .attr('y1', rulerY).attr('y2', rulerY + 4)
                     .attr('stroke', ink).attr('stroke-width', 1);
                 let text = String(l.age);
@@ -5633,14 +6380,14 @@ function (root, d3, forester, phyloXml) {
                     }
                 }
                 if (ok || l.priority > 0) {
-                    g.append('text').attr('x', x).attr('y', rulerY + 14)
+                    ax.append('text').attr('x', x).attr('y', rulerY + 14)
                         .attr('text-anchor', 'middle')
                         .style('font-size', '9px').style('fill', ink)
                         .text(text);
                     placed.push(x);
                 }
             });
-            g.append('text').attr('x', xOfAge(youngBound) + 8).attr('y', rulerY + 14)
+            ax.append('text').attr('x', xOfAge(youngBound) + 8).attr('y', rulerY + 14)
                 .attr('text-anchor', 'start')
                 .style('font-size', '9px').style('fill', ink)
                 .text('Ma');
@@ -5666,20 +6413,21 @@ function (root, d3, forester, phyloXml) {
                     }
                 });
             }
+            axisBackdrop(xOfYear(rootYear), xOfYear(present));
             let rulerY = axisTop + 4;
-            g.append('line').attr('x1', xOfYear(rootYear)).attr('x2', xOfYear(present))
+            ax.append('line').attr('x1', xOfYear(rootYear)).attr('x2', xOfYear(present))
                 .attr('y1', rulerY).attr('y2', rulerY)
                 .attr('stroke', ink).attr('stroke-width', 1);
             let lastRight = -Infinity;
             forester.calendarTickYears(rootYear, present).forEach(function (yv) {
                 let x = xOfYear(yv);
-                g.append('line').attr('x1', x).attr('x2', x)
+                ax.append('line').attr('x1', x).attr('x2', x)
                     .attr('y1', rulerY).attr('y2', rulerY + 4)
                     .attr('stroke', ink).attr('stroke-width', 1);
                 let text = String(Math.round(yv));
                 let half = text.length * 2.8;
                 if ((x - half) >= lastRight + 4) {
-                    g.append('text').attr('x', x).attr('y', rulerY + 14)
+                    ax.append('text').attr('x', x).attr('y', rulerY + 14)
                         .attr('text-anchor', 'middle')
                         .style('font-size', '9px').style('fill', ink)
                         .text(text);
@@ -5687,16 +6435,17 @@ function (root, d3, forester, phyloXml) {
                 }
             });
         }
+        placeFloatingOverlays();
     }
 
     function timeAxisCbClicked() {
         _state.showTimeAxis = getCheckboxValue(TIME_AXIS_CB);
-        update(null, 0);
+        scheduleUpdate(null, 0);
     }
 
     function timeGridCbClicked() {
         _state.timeAxisGrid = getCheckboxValue(TIME_GRID_CB);
-        update(null, 0);
+        scheduleUpdate(null, 0);
     }
 
     // Fit the circular tree into the viewport, centred. The root is at the
@@ -5910,7 +6659,9 @@ function (root, d3, forester, phyloXml) {
             setValue(SEARCH_FIELD_1, '');
         }
 
-        update(null, 0);
+        // the searches each end in a redraw of their own; on a big tree all
+        // three collapse into one
+        scheduleUpdate(null, 0);
         search0();
         search1();
 
@@ -5957,7 +6708,7 @@ function (root, d3, forester, phyloXml) {
             if (aActive) _foundNodes0 = forester.searchWithSpec(_root, specA);
             if (bActive) _foundNodes1 = forester.searchWithSpec(_root, specB);
         }
-        update(null, 0, true);
+        scheduleUpdate(null, 0, true);
     }
 
     // The Combine control only makes sense when both boxes hold a query.
@@ -6127,21 +6878,21 @@ function (root, d3, forester, phyloXml) {
         _state.phylogram = true;
         _state.alignPhylogram = false;
         setDisplayTypeButtons();
-        update(null, 0);
+        scheduleUpdate(null, 0);
     }
 
     function toAlignedPhylogram() {
         _state.phylogram = true;
         _state.alignPhylogram = true;
         setDisplayTypeButtons();
-        update(null, 0);
+        scheduleUpdate(null, 0);
     }
 
     function toCladegram() {
         _state.phylogram = false;
         _state.alignPhylogram = false;
         setDisplayTypeButtons();
-        update(null, 0);
+        scheduleUpdate(null, 0);
     }
 
     function layoutButtonClicked() {
@@ -6248,7 +6999,7 @@ function (root, d3, forester, phyloXml) {
         }
         search0();
         search1();
-        update();
+        scheduleUpdate();
     }
 
 
@@ -6276,7 +7027,7 @@ function (root, d3, forester, phyloXml) {
         }
         search0();
         search1();
-        update();
+        scheduleUpdate();
     }
 
     function sequenceCbClicked() {
@@ -6287,65 +7038,64 @@ function (root, d3, forester, phyloXml) {
         }
         search0();
         search1();
-        update();
+        scheduleUpdate();
     }
 
     function confidenceValuesCbClicked() {
         _state.showConfidenceValues = getCheckboxValue(CONFIDENCE_VALUES_CB);
         search0();
         search1();
-        update();
+        scheduleUpdate();
     }
 
     function supportDotsCbClicked() {
         _state.showSupportDots = getCheckboxValue(SUPPORT_DOTS_CB);
-        update();
+        scheduleUpdate();
     }
 
     function branchLengthsCbClicked() {
         _state.showBranchLengthValues = getCheckboxValue(BRANCH_LENGTH_VALUES_CB);
-        update();
+        scheduleUpdate();
     }
 
     function nodeEventsCbClicked() {
         _state.showNodeEvents = getCheckboxValue(NODE_EVENTS_CB);
         search0();
         search1();
-        update();
+        scheduleUpdate();
     }
 
     function branchEventsCbClicked() {
         _state.showBranchEvents = getCheckboxValue(BRANCH_EVENTS_CB);
         search0();
         search1();
-        update();
+        scheduleUpdate();
     }
 
     function internalLabelsCbClicked() {
         _state.showInternalLabels = getCheckboxValue(INTERNAL_LABEL_CB);
         search0();
         search1();
-        update();
+        scheduleUpdate();
     }
 
     function externalLabelsCbClicked() {
         _state.showExternalLabels = getCheckboxValue(EXTERNAL_LABEL_CB);
         search0();
         search1();
-        update();
+        scheduleUpdate();
     }
 
     function visCbClicked() {
         _state.showVisualizations = getCheckboxValue(VIS_CB);
         resetVis();
-        update(null, 0);
-        update(null, 0);
+        scheduleUpdate(null, 0);
     }
 
     function visualStylesCbClicked() {
         _state.useVisualStyles = getCheckboxValue(VISUAL_STYLES_CB);
         resetVis();
-        update(null, 0);
+        scheduleUpdate(null, 0);
     }
 
     function dynaHideCbClicked() {
@@ -6353,8 +7103,7 @@ function (root, d3, forester, phyloXml) {
         resetVis();
         search0();
         search1();
-        update(null, 0);
-        update(null, 0);
+        scheduleUpdate(null, 0);
     }
 
     function shortenCbClicked() {
@@ -6362,7 +7111,7 @@ function (root, d3, forester, phyloXml) {
         resetVis();
         search0();
         search1();
-        update(null, 0);
+        scheduleUpdate(null, 0);
     }
 
     function downloadButtonPressed() {
@@ -6373,11 +7122,6 @@ function (root, d3, forester, phyloXml) {
         }
     }
 
-    function submitSelectedPressed() {
-        const event = new Event('submit_selected_nodes_event');
-        document.dispatchEvent(event);
-    }
-
     function changeBaseBackgoundColor(color) {
         setStylesAll('.' + BASE_BACKGROUND, {
             'fill': color
@@ -6386,12 +7130,12 @@ function (root, d3, forester, phyloXml) {
 
     function changeBranchWidth(e) {
         _state.branchWidthDefault = getSliderValue(e);
-        update(null, 0, true);
+        scheduleUpdate(null, 0, true);
     }
 
     function changeNodeSize(e) {
         _state.nodeSizeDefault = getSliderValue(e);
-        update(null, 0, true);
+        scheduleUpdate(null, 0, true);
     }
 
 
@@ -6399,7 +7143,7 @@ function (root, d3, forester, phyloXml) {
     // data alike, as the desktop does it.
     function changeFontSize(e) {
         setFontSizes(getSliderValue(e));
-        update(null, 0, true);
+        scheduleUpdate(null, 0, true);
     }
 
     function clampFontSize(v) {
@@ -6568,6 +7312,7 @@ function (root, d3, forester, phyloXml) {
         _state.backgroundColorDefault = dark ? BACKGROUND_COLOR_DARK : BACKGROUND_COLOR_DEFAULT;
         _state.branchColorDefault = dark ? BRANCH_COLOR_DARK : BRANCH_COLOR_DEFAULT;
         _state.labelColorDefault = dark ? LABEL_COLOR_DARK : LABEL_COLOR_DEFAULT;
+        _state.found0ColorDefault = dark ? FOUND0_COLOR_DARK : FOUND0_COLOR_DEFAULT;
         // Always white, in both themes: getTreeAsSvg() rewrites the dark label
         // and branch colours to their light counterparts on the way out, so an
         // export can no longer end up as white text on a white ground.
@@ -6577,7 +7322,7 @@ function (root, d3, forester, phyloXml) {
         }
         changeBaseBackgoundColor(_state.backgroundColorDefault);
         applyOverviewTheme();
-        update(null, 0);
+        scheduleUpdate(null, 0);
     }
 
     // Apply the current theme choice to every panel and refresh the switch icons.
@@ -6988,13 +7733,30 @@ function (root, d3, forester, phyloXml) {
             + '  background:#e5484d; color:#fff; }'
             + '.aptx-node-menu hr { border:0; border-top:1px solid var(--p-line); margin:3px 4px; }'
             // The node-data dialog, on the same palette as the panel and the menu.
-            + '.aptx-dialog {'
+            + '.aptx-dialog, .aptx-busy, .aptx-msa-nav {'
             + '  --p-bg: rgba(255,255,255,0.98); --p-ink:#1e2a35; --p-muted:#6b7a89; --p-faint:#93a3b2;'
             + '  --p-line:#e3e9f0; --p-line-strong:#cad6e1; --p-surface2:#f3f6fa;'
             + '  --p-accent:#2f83f2; --p-accent-ink:#1c5fbf; --p-accent-weak:rgba(47,131,242,0.12);'
             + '}'
-            + '@media (prefers-color-scheme:dark){ .aptx-dialog:not(.aptx-light):not(.aptx-dark) {' + dark + '} }'
-            + '.aptx-dialog.aptx-dark {' + dark + '}'
+            + '@media (prefers-color-scheme:dark){ .aptx-dialog:not(.aptx-light):not(.aptx-dark),'
+            + '  .aptx-busy:not(.aptx-light):not(.aptx-dark), .aptx-msa-nav:not(.aptx-light):not(.aptx-dark) {' + dark + '} }'
+            + '.aptx-dialog.aptx-dark, .aptx-busy.aptx-dark, .aptx-msa-nav.aptx-dark {' + dark + '}'
+            // The "working" card shown over the tree area while a big tree is
+            // drawn. It covers the whole container so nothing underneath --
+            // panel included -- can be clicked into a half-built view.
+            + '.aptx-busy { position:absolute; inset:0; z-index:1000; display:grid; place-items:center;'
+            + '  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;'
+            + '  font-size:12px; color:var(--p-ink); cursor:progress; }'
+            + '.aptx-busy-card { display:flex; align-items:center; gap:10px; padding:10px 16px 10px 13px;'
+            + '  border:1px solid var(--p-line-strong); border-radius:12px; background:var(--p-bg);'
+            + '  box-shadow:0 24px 48px -16px rgba(23,34,46,0.45),0 4px 12px -4px rgba(23,34,46,0.22); }'
+            + '.aptx-busy-dot { width:10px; height:10px; border-radius:50%; flex:none;'
+            + '  border:2px solid var(--p-accent-weak); border-top-color:var(--p-accent);'
+            + '  animation:aptx-busy-spin 0.8s linear infinite; }'
+            + '@keyframes aptx-busy-spin { to { transform:rotate(360deg); } }'
+            + '@media (prefers-reduced-motion:reduce){ .aptx-busy-dot { animation:none;'
+            + '  border-color:var(--p-accent); } }'
+            + '.aptx-busy-sub { color:var(--p-muted); }'
             + '.aptx-dialog { padding:0; border:1px solid var(--p-line-strong); border-radius:12px;'
             + '  background:var(--p-bg); color:var(--p-ink); max-width:92vw;'
             + '  box-shadow:0 24px 48px -16px rgba(23,34,46,0.45),0 4px 12px -4px rgba(23,34,46,0.22);'
@@ -7010,6 +7772,28 @@ function (root, d3, forester, phyloXml) {
             + '.aptx-dialog-close:hover { background:var(--p-accent-weak); color:var(--p-accent-ink);'
             + '  border-color:var(--p-accent); }'
             + '.aptx-dialog-body { padding:10px 13px 12px; overflow:auto; }'
+            + '.aptx-cp-sv { position:relative; width:100%; box-sizing:border-box; height:104px; border-radius:7px;'
+            + '  border:1px solid var(--p-line-strong); cursor:crosshair; touch-action:none; }'
+            + '.aptx-cp-hue { position:relative; width:100%; box-sizing:border-box; height:13px; margin-top:9px;'
+            + '  border-radius:7px; border:1px solid var(--p-line-strong); cursor:ew-resize;'
+            + '  touch-action:none; background:linear-gradient(to right,#f00 0%,#ff0 17%,#0f0 33%,'
+            + '  #0ff 50%,#00f 67%,#f0f 83%,#f00 100%); }'
+            + '.aptx-cp-knob { position:absolute; width:12px; height:12px; margin:-7px 0 0 -7px;'
+            + '  border-radius:50%; border:2px solid #fff; pointer-events:none;'
+            + '  box-shadow:0 0 0 1px rgba(0,0,0,0.45),0 1px 3px rgba(0,0,0,0.4); }'
+            + '.aptx-cp-row { display:flex; align-items:center; gap:7px; margin-top:9px; }'
+            + '.aptx-cp-prev { flex:none; width:26px; height:20px; border-radius:5px;'
+            + '  border:1px solid var(--p-line-strong); }'
+            + '.aptx-cp-hex { flex:1; min-width:0; padding:3px 6px; border-radius:5px;'
+            + '  border:1px solid var(--p-line-strong); background:var(--p-surface2);'
+            + '  color:var(--p-ink); font:inherit; font-variant-numeric:tabular-nums; }'
+            + '.aptx-cp-hex:focus { outline:none; border-color:var(--p-accent); }'
+            + '.aptx-cp-grid { display:grid; grid-template-columns:repeat(10,1fr); gap:3px; margin-top:9px; }'
+            + '.aptx-cp-sw { width:100%; aspect-ratio:1; padding:0; border-radius:4px; cursor:pointer;'
+            + '  border:1px solid rgba(128,128,128,0.45); }'
+            + '.aptx-cp-sw:hover { outline:2px solid var(--p-accent); outline-offset:1px; }'
+            + '.aptx-cp-note { margin-top:8px; color:var(--p-faint); }'
+            + '#color_picker_dialog .aptx-dialog-body { overflow:visible; }'
             + '.aptx-dialog-head { margin:10px 0 3px; font-size:9px; font-weight:700; letter-spacing:0.07em;'
             + '  text-transform:uppercase; color:var(--p-faint); }'
             + '.aptx-dialog-body > .aptx-dialog-head:first-child { margin-top:0; }'
@@ -7120,7 +7904,21 @@ function (root, d3, forester, phyloXml) {
             // drawn glyph. The glyph inherits the button's colour (currentColor)
             // and a disabled button fades the whole svg with the button chrome.
             + '.aptx-panel .aptx-gbtn { display:inline-flex; align-items:center; justify-content:center; min-width:32px; padding:0 7px; vertical-align:middle; }'
-            + '.aptx-msa-scroll { position:fixed; bottom:10px; left:55%; transform:translateX(-50%); width:260px; display:none; z-index:20; }'
+            + '.aptx-msa-nav { position:fixed; bottom:10px; left:55%; transform:translateX(-50%); z-index:20;'
+            + '  display:none; align-items:center; gap:6px; padding:6px 10px; border-radius:10px;'
+            + '  border:1px solid var(--p-line-strong); background:var(--p-bg); color:var(--p-ink);'
+            + '  box-shadow:0 8px 24px -10px rgba(23,34,46,0.35); font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;'
+            + '  font-size:11.5px; line-height:1; }'
+            + '.aptx-msa-scroll { width:260px; margin:0 2px; }'
+            + '.aptx-msa-nav-btn { width:24px; height:22px; padding:0; border-radius:6px; border:1px solid var(--p-line-strong);'
+            + '  background:var(--p-surface2); color:var(--p-ink); font-size:10px; line-height:1; cursor:pointer; }'
+            + '.aptx-msa-nav-btn:hover:not(:disabled) { border-color:var(--p-accent); color:var(--p-accent-ink); }'
+            + '.aptx-msa-nav-btn:disabled { opacity:0.35; cursor:default; }'
+            + '.aptx-msa-nav-read { display:inline-flex; align-items:center; gap:5px; margin-left:6px; color:var(--p-muted);'
+            + '  font-variant-numeric:tabular-nums; white-space:nowrap; }'
+            + '.aptx-msa-nav-jump { width:64px; padding:2px 5px; border-radius:5px; border:1px solid var(--p-line-strong);'
+            + '  background:var(--p-surface2); color:var(--p-ink); font:inherit; font-variant-numeric:tabular-nums; text-align:right; }'
+            + '.aptx-msa-nav-jump:focus { outline:none; border-color:var(--p-accent); }'
             + '.aptx-panel .aptx-seg:has(input:disabled) { opacity:0.4; }'
             + '.aptx-panel .aptx-seg:has(input:disabled) { cursor:default; }'
             + '.aptx-panel .aptx-slider-row { display:flex; align-items:center; gap:7px; margin:3px 0; }'
@@ -7368,6 +8166,161 @@ function (root, d3, forester, phyloXml) {
     // Content arrives as "Label: value" lines separated by <br>. Setting the
     // label part apart makes a wall of such lines scannable. Lines without a
     // label (a heading like "Taxonomy", or a FASTA sequence) are left alone.
+    // The node's data as the hover tooltip and the "Display Node Data" dialog
+    // both show it -- ONE builder, because they used to be two near-copies
+    // and carried the same two bugs twice (a bare "Date: " line whenever a
+    // date had no description, and "Distribution: " printed before its
+    // description was checked).
+    //
+    // Order, as the desktop lays it out: first the node itself -- Name,
+    // Distance to parent, Date, Distribution, Depth, Tips below -- then its
+    // confidences, then the headed sections. Every row is either in that
+    // leading block or under a heading, so nothing reads as a stray tail of
+    // the section above it. markUpDataLabels() renders the result: a line
+    // shaped "Key: value" is a row, anything else a heading, and a leading
+    // "- " marks a row as a section's sub-entry.
+    function nodeDataText(d) {
+        let text = '';
+        if (d.name) {
+            text += 'Name: ' + d.name + '<br>';
+        }
+        if (d.branch_length) {
+            text += 'Distance to parent: ' + d.branch_length + '<br>';
+        }
+        let date = dateText(d.date);
+        if (date) {
+            text += 'Date: ' + date + '<br>';
+        }
+        if (d.distributions) {
+            for (let i = 0; i < d.distributions.length; ++i) {
+                // only a distribution that has something to say gets a row
+                if (d.distributions[i].desc) {
+                    text += 'Distribution: ' + d.distributions[i].desc + '<br>';
+                }
+            }
+        }
+        text += 'Depth: ' + forester.calcDepth(d) + '<br>';
+        if (d.children) {
+            text += 'Tips below: ' + forester.calcSumOfAllExternalDescendants(d) + '<br>';
+        }
+        if (d.confidences) {
+            for (let i = 0; i < d.confidences.length; ++i) {
+                let c = d.confidences[i];
+                text += (c.type ? 'Confidence [' + c.type + ']: ' : 'Confidence: ') + c.value + '<br>';
+                if (c.stddev) {
+                    text += '- stdev: ' + c.stddev + '<br>';
+                }
+            }
+        }
+        if (d.taxonomies) {
+            for (let i = 0; i < d.taxonomies.length; ++i) {
+                let tx = d.taxonomies[i];
+                text += 'Taxonomy<br>';
+                if (tx.id) {
+                    text += (tx.id.provider ? '- Id [' + tx.id.provider + ']: ' : '- Id: ') + tx.id.value + '<br>';
+                }
+                if (tx.code) {
+                    text += '- Code: ' + tx.code + '<br>';
+                }
+                if (tx.scientific_name) {
+                    text += '- Scientific name: ' + tx.scientific_name + '<br>';
+                }
+                if (tx.common_name) {
+                    text += '- Common name: ' + tx.common_name + '<br>';
+                }
+                if (tx.rank) {
+                    text += '- Rank: ' + tx.rank + '<br>';
+                }
+            }
+        }
+        if (d.sequences) {
+            for (let i = 0; i < d.sequences.length; ++i) {
+                let s = d.sequences[i];
+                text += 'Sequence<br>';
+                if (s.accession) {
+                    text += (s.accession.source ? '- Accession [' + s.accession.source + ']: ' : '- Accession: ')
+                        + s.accession.value + '<br>';
+                    if (s.accession.comment) {
+                        text += '-- comment: ' + s.accession.comment + '<br>';
+                    }
+                }
+                if (s.symbol) {
+                    text += '- Symbol: ' + s.symbol + '<br>';
+                }
+                if (s.name) {
+                    text += '- Name: ' + s.name + '<br>';
+                }
+                if (s.gene_name) {
+                    text += '- Gene name: ' + s.gene_name + '<br>';
+                }
+                if (s.location) {
+                    text += '- Location: ' + s.location + '<br>';
+                }
+                if (s.type) {
+                    text += '- Type: ' + s.type + '<br>';
+                }
+            }
+        }
+        if (d.events) {
+            let ev = d.events;
+            text += 'Events<br>';
+            if (ev.type && ev.type.length > 0) {
+                text += '- Type: ' + ev.type + '<br>';
+            }
+            if (ev.duplications && ev.duplications > 0) {
+                text += '- Duplications: ' + ev.duplications + '<br>';
+            }
+            if (ev.speciations && ev.speciations > 0) {
+                text += '- Speciations: ' + ev.speciations + '<br>';
+            }
+            if (ev.losses && ev.losses > 0) {
+                text += '- Losses: ' + ev.losses + '<br>';
+            }
+        }
+        if (d.properties && d.properties.length > 0) {
+            // Named as the Color-by menu names them ("Host Group", not
+            // "BVBRC:host_group"). style:* refs are the desktop's visual-style
+            // namespace -- how a node is drawn, not what it is -- and are
+            // skipped, as the Color-by menu skips them.
+            let rows = '';
+            for (let i = 0; i < d.properties.length; ++i) {
+                let pr = d.properties[i];
+                if (pr.ref && pr.value && pr.ref.indexOf('style:') !== 0) {
+                    rows += '- ' + forester.propertyDisplayName(pr.ref) + ': '
+                        + pr.value + (pr.unit ? ' ' + pr.unit : '') + '<br>';
+                }
+            }
+            if (rows) {
+                text += 'Properties<br>' + rows;
+            }
+        }
+        return text;
+    }
+
+    // One line for a node's date, as the desktop writes it: the value, its
+    // range, its unit and its description folded together -- "6.5 [5 - 8]
+    // mya (split)" -- or just the description when that is all there is.
+    // Null when there is nothing to say, so no bare "Date: " ever appears.
+    function dateText(date) {
+        if (!date) {
+            return null;
+        }
+        let hasValue = typeof date.value === 'number';
+        let hasRange = typeof date.minimum === 'number' && typeof date.maximum === 'number';
+        let s = hasValue ? String(date.value) : '';
+        if (hasRange) {
+            s += ' [' + date.minimum + ' - ' + date.maximum + ']';
+        }
+        if ((hasValue || hasRange) && date.unit) {
+            s += ' ' + date.unit;
+        }
+        s = s.trim();
+        if (date.desc) {
+            s = s ? s + ' (' + date.desc + ')' : date.desc;
+        }
+        return s || null;
+    }
+
     function markUpDataLabels(escaped) {
         return escaped.split('<br>').map(function (line) {
             if (!line.trim()) {
@@ -7389,6 +8342,68 @@ function (root, d3, forester, phyloXml) {
     // The shell every modal shares: title bar with a close button, a body, the
     // panel's light/dark choice, and removal on close. Returns the body for the
     // caller to fill. Only one dialog of a given id exists at a time.
+    // A "working" card over the tree area. Shown while a big tree's first draw
+    // is deferred, so the user sees the program is busy rather than a page that
+    // has stopped responding -- which is what a 10-second synchronous draw
+    // looks like from the outside.
+    function showBusy(container, text, sub) {
+        container.querySelectorAll(':scope > .aptx-busy').forEach(function (b) {
+            b.remove();
+        });
+        let busy = document.createElement('div');
+        busy.className = 'aptx-busy';
+        if (_panelTheme) {
+            busy.classList.add('aptx-' + _panelTheme);
+        }
+        busy.setAttribute('role', 'status');
+        busy.setAttribute('aria-live', 'polite');
+        let card = document.createElement('div');
+        card.className = 'aptx-busy-card';
+        let dot = document.createElement('span');
+        dot.className = 'aptx-busy-dot';
+        let label = document.createElement('span');
+        label.textContent = text;
+        card.appendChild(dot);
+        card.appendChild(label);
+        if (sub) {
+            let s = document.createElement('span');
+            s.className = 'aptx-busy-sub';
+            s.textContent = sub;
+            card.appendChild(s);
+        }
+        busy.appendChild(card);
+        container.appendChild(busy);
+        return busy;
+    }
+
+    function hideBusy() {
+        if (_container) {
+            _container.querySelectorAll('.aptx-busy').forEach(function (b) {
+                b.remove();
+            });
+        }
+    }
+
+    // Run fn after the browser has had a chance to PAINT. A plain setTimeout
+    // does not promise that; rAF fires just before a paint, so a timeout queued
+    // from inside it lands just after one. A hidden tab may never fire rAF at
+    // all, so a fallback timer guarantees the work still happens.
+    function afterPaint(fn) {
+        let done = false;
+        function go() {
+            if (!done) {
+                done = true;
+                fn();
+            }
+        }
+        if (typeof requestAnimationFrame === 'function') {
+            requestAnimationFrame(function () {
+                setTimeout(go, 0);
+            });
+        }
+        setTimeout(go, 150);
+    }
+
     function makeDialogShell(id, title, width) {
         let existing = document.getElementById(id);
         if (existing) {
@@ -7568,7 +8583,7 @@ function (root, d3, forester, phyloXml) {
         }
         setFontSizes(base);
         setSliderValue(FONT_SIZE_SLIDER, _state.externalNodeFontSize);
-        update(null, 0, true);
+        scheduleUpdate(null, 0, true);
     }
 
 
@@ -7660,10 +8675,6 @@ function (root, d3, forester, phyloXml) {
 
             c0.insertAdjacentHTML('beforeend',makeSearchBoxes());
 
-            if (_settings.enableManualNodeSelection) {
-                //c0.append(makeSubmitSection()); //~~~
-            }
-
             if (_settings.enableDownloads) {
                 c0.insertAdjacentHTML('beforeend',makeDownloadSection());
             }
@@ -7706,14 +8717,6 @@ function (root, d3, forester, phyloXml) {
             });
         }
 
-        const submitSelectedButton = byId(SUBMIT_SELECTED_NODES_BUTTON);
-
-        if (submitSelectedButton) {
-            setStyles(submitSelectedButton, {
-                'width': '80px', 'margin-bottom': '3px'
-            });
-        }
-
 
         on(SEARCH_FIELD_0, 'keyup', search0);
 
@@ -7904,10 +8907,6 @@ function (root, d3, forester, phyloXml) {
             downloadButton.addEventListener('click', downloadButtonPressed);
         }
 
-        if (submitSelectedButton) {
-            submitSelectedButton.addEventListener('click', submitSelectedPressed);
-        }
-
         setStyles(byId(EXPORT_FORMAT_SELECT), {
             'font': 'inherit', 'color': 'inherit'
         });
@@ -8320,16 +9319,6 @@ function (root, d3, forester, phyloXml) {
             return h;
         }
 
-        function makeSubmitSection() {
-            let h = "";
-            h = h.concat('<fieldset>');
-            h = h.concat('<div class="submit_nodes">');
-            h = h.concat('<input type="button" value="Submit Selected" name="' + SUBMIT_SELECTED_NODES_BUTTON + '" title="to submit the selected nodes" id="' + SUBMIT_SELECTED_NODES_BUTTON + '">');
-            h = h.concat('</div>');
-            h = h.concat('</fieldset>');
-            return h;
-        }
-
         function makeSliders() {
             let h = "";
             h = h.concat('<fieldset>');
@@ -8627,7 +9616,9 @@ function (root, d3, forester, phyloXml) {
                     b.style.color = '';
                 } else {
                     b.style.background = _state.found0ColorDefault;
-                    b.style.color = WHITE;
+                    // black or white by luminance: the dark theme's sky blue
+                    // is too light for white text
+                    b.style.color = forester.msaLetterInk(hexToRgbTriple(_state.found0ColorDefault));
                 }
                 let nd0 = _foundNodes0.size === 1 ? 'node' : 'nodes';
                 b.title = 'found ' + _foundNodes0.size + ' ' + nd0 + ' [click to ' + RESET_SEARCH_A_BTN_TOOLTIP + ']';
@@ -8759,6 +9750,15 @@ function (root, d3, forester, phyloXml) {
             if (glow) {
                 glow.remove();
             }
+            // The floating strips re-anchor to the TREE for export: on screen
+            // a strip may be stuck at the viewport bottom, but a figure must
+            // not carry an artefact of where the user happened to be scrolled
+            // -- the axis belongs at the bottom of the tree. (As the desktop
+            // does for PDF and graphics export.)
+            let t = d3.zoomTransform(svg);
+            copy.querySelectorAll('.aptx-float > g').forEach(function (strip) {
+                strip.setAttribute('transform', 'translate(' + t.x + ',' + t.y + ') scale(' + t.k + ')');
+            });
             svgTree = toLightExport((new XMLSerializer()).serializeToString(copy));
         } else if (typeof svg.xml !== 'undefined') {
             svgTree = svg.xml;
@@ -8968,18 +9968,31 @@ function (root, d3, forester, phyloXml) {
     /**
      * Convenience method for loading tree on HTML page
      *
-     * @param location
-     * @param data
-     * @param newHamphshireConfidenceValuesInBrackets
-     * @param newHamphshireConfidenceValuesAsInternalNames
+     * @param location - file name (only its extension is used; the content is
+     *                    sniffed too, so a pasted tree with no name works)
+     * @param data - the file's content
+     * @param mode - 'auto' (default) | 'confidence' | 'label', how bare
+     *                    numeric internal labels are read. The retired
+     *                    nhConfidenceValuesInBrackets flag used to sit in this
+     *                    position and is still accepted (and ignored) there,
+     *                    with the mode following it.
+     * @param legacyMode - the mode, when the retired flag occupies `mode`
      * @returns {*}
      */
-    archaeopteryx.parseTree = function (location, data, newHamphshireConfidenceValuesInBrackets, newHamphshireConfidenceValuesAsInternalNames) {
-        if (newHamphshireConfidenceValuesInBrackets === undefined) {
-            newHamphshireConfidenceValuesInBrackets = true;
-        }
-        if (newHamphshireConfidenceValuesAsInternalNames === undefined) {
-            newHamphshireConfidenceValuesAsInternalNames = false;
+    archaeopteryx.parseTree = function (location, data, mode, legacyMode) {
+        // The retired brackets flag used to be the third argument, so a
+        // boolean there means the old four-argument shape and the mode is the
+        // fourth. A string is the mode itself.
+        let internalNumericLabels = (typeof mode === 'boolean' || mode === undefined) ? legacyMode : mode;
+        // PARSE_DEFAULTS, not literals -- initializeSettings applies the same
+        // object, and it runs at launch(), AFTER this has already parsed.
+        if (typeof internalNumericLabels === 'boolean') {
+            // the retired positional flag: true meant "every numeric internal
+            // label is a confidence", which is 'confidence'.
+            internalNumericLabels = internalNumericLabels
+                ? 'confidence' : PARSE_DEFAULTS.internalNumericLabels;
+        } else if (internalNumericLabels === undefined) {
+            internalNumericLabels = PARSE_DEFAULTS.internalNumericLabels;
         }
         let tree;
         let loc = location ? String(location).toLowerCase() : '';
@@ -8987,34 +10000,94 @@ function (root, d3, forester, phyloXml) {
         // content decides; the filename alone is enough too.
         if ((forester.isString(data) && /^\s*#nexus\b/i.test(data))
             || /\.(nex|nexus)$/.test(loc)) {
-            tree = archaeopteryx.parseNexus(data, newHamphshireConfidenceValuesInBrackets, newHamphshireConfidenceValuesAsInternalNames);
+            tree = archaeopteryx.parseNexus(data, internalNumericLabels);
         } else if ((forester.isString(data) && /^\s*\{/.test(data)) || /\.json$/.test(loc)) {
             tree = archaeopteryx.parseAuspiceJson(data);
-        } else if (loc.substr(-3, 3) === 'xml') {
+        } else if ((forester.isString(data) && /^\s*</.test(data))
+            || loc.substr(-3, 3) === 'xml') {
+            // No other supported format can start with '<', so content alone
+            // is enough -- pasted phyloXML has no filename to go by.
             tree = archaeopteryx.parsePhyloXML(data);
         } else {
-            tree = archaeopteryx.parseNewHampshire(data, newHamphshireConfidenceValuesInBrackets, newHamphshireConfidenceValuesAsInternalNames);
+            tree = archaeopteryx.parseNewHampshire(data, internalNumericLabels);
         }
         return tree;
     };
 
+    // Show the viewer's own "working" card in a container. For the part of a
+    // load the library cannot defer for you -- your own parse of a big file
+    // before launch(), or a fetch -- so the page shows the same card the
+    // viewer shows while it draws, rather than something foreign or nothing.
+    //
+    // With `work`: the card is painted, work() runs on the next frame, and
+    // the card is removed when it returns -- the browser gets a frame in
+    // between, which is the whole point, and a hidden tab still runs the
+    // work on a fallback timer. Without `work`: the card stays until the
+    // returned function is called; then it is on you to yield.
+    archaeopteryx.busy = function (container, text, sub, work) {
+        let el = (typeof container === 'string') ? document.querySelector(container) : container;
+        if (!el) {
+            throw new Error(ERROR + 'busy(): container not found');
+        }
+        injectPanelStyles();
+        let busy;
+        if (el === document.body) {
+            // whole-page: fixed, and never touch the body's own positioning
+            busy = showBusy(el, text, sub);
+            busy.style.position = 'fixed';
+        } else {
+            if (getComputedStyle(el).position === 'static') {
+                el.style.position = 'relative';
+            }
+            busy = showBusy(el, text, sub);
+        }
+        let remove = function () {
+            busy.remove();
+        };
+        if (typeof work === 'function') {
+            afterPaint(function () {
+                try {
+                    work();
+                } finally {
+                    remove();
+                }
+            });
+        }
+        return remove;
+    };
+
     // Parse-and-launch in one step: fetch the file's content yourself (the
     // library does no networking), hand the text here. fileName is used only
     // to pick the parser (its extension; the content is sniffed too).
     // Returns the same viewer handle launch() returns.
+    // launchArchaeopteryx parses BEFORE launch() runs readConfig, so the
+    // deprecated alias has to be resolved HERE as well -- translating it later
+    // would be translating it after the tree was already built. readConfig
+    // emits the warning; this only resolves the value, so it is not doubled.
+    function effectiveInternalLabelsMode(c) {
+        if (c.internalNumericLabels !== undefined) {
+            return c.internalNumericLabels;
+        }
+        if (c.nhConfidenceValuesAsInternalNames !== undefined) {
+            return DEPRECATED_CONFIG.nhConfidenceValuesAsInternalNames
+                .map(c.nhConfidenceValuesAsInternalNames);
+        }
+        return undefined;
+    }
+
     archaeopteryx.launchArchaeopteryx = function (container, fileName, data, config) {
         if (arguments.length > 4) {
             throw new Error(ERROR + 'launchArchaeopteryx() takes exactly (container, fileName,'
                 + ' data, config); the old trailing arguments were removed. The separate settings'
                 + ' bag and "nodeVisualizations" are gone (see launch()), and the two New Hampshire'
-                + ' parse options moved into the config as "nhConfidenceValuesInBrackets" /'
-                + ' "nhConfidenceValuesAsInternalNames".');
+                + ' parse option moved into the config as'
+                + ' "internalNumericLabels".');
         }
         let c = config || {};
         let tree;
         try {
             tree = archaeopteryx.parseTree(fileName, data,
-                c.nhConfidenceValuesInBrackets, c.nhConfidenceValuesAsInternalNames);
+                effectiveInternalLabelsMode(c));
         } catch (e) {
             // Worth catching only to say that it was the parse, not the launch,
             // that failed -- a malformed tree file rather than a bug in here.