archaeopteryx 3.2.0 → 3.3.0

package/archaeopteryx.js

@@ -20,7 +20,7 @@
  *
  */
 
-// v 3.2.0
+// v 3.3.0
 // 2026-09-10
 //
 // Archaeopteryx.js is a software tool for the visualization and
@@ -103,7 +103,7 @@ function (root, d3, forester, phyloXml) {
     // IIFE's own function name -- a plain object says what it is.)
     let archaeopteryx = {};
 
-    const VERSION = '3.1.0';
+    const VERSION = '3.3.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';
@@ -251,6 +251,7 @@ function (root, d3, forester, phyloXml) {
     const LABEL_SIZE_CALC_FACTOR = 0.5;
     const LEGEND_LABEL_COLOR = 'legendLabelColor';
     const LEGEND_NODE_SHAPE = 'legendNodeShape';
+    const LEGEND_DOMAINS = 'legendDomains';
     const NH_EXPORT_FORMAT = 'Newick';
     const NEXUS_EXPORT_FORMAT = 'Nexus';
     const NODE_SIZE_MAX = 9;
@@ -283,10 +284,15 @@ function (root, d3, forester, phyloXml) {
     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;
+    // "working" card, so the page shows it is busy instead of appearing frozen,
+    // and later redraws coalesce instead of running synchronously. Below it
+    // everything stays synchronous exactly as before -- the deferral buys
+    // nothing on a tree that draws in a few hundred milliseconds.
+    //
+    // Raised from 2000 to 3000 on 2026-09-11: a redraw of the 18,512-node tree
+    // went from ~4.2 s to ~1.9 s that day, so the size at which a draw is slow
+    // enough to need announcing moved up with it.
+    const BIG_TREE_NODES = 3000;
     const WARNING = 'ArchaeopteryxJS: WARNING';
     const MESSAGE = 'ArchaeopteryxJS: ';
     const ERROR = 'ArchaeopteryxJS: ERROR: ';
@@ -347,6 +353,15 @@ function (root, d3, forester, phyloXml) {
     const DOWNLOAD_BUTTON = 'dl_b';
     const DYNAHIDE_CB = 'dynahide_cb';
     const MSA_CB = 'msa_cb';
+    const DOMAINS_CB = 'domains_cb';
+    const DOMAIN_CONTROLS = 'domain_controls';
+    const DOMAIN_WIDTH_DEC = 'domain_width_dec';
+    const DOMAIN_WIDTH_INC = 'domain_width_inc';
+    const DOMAIN_EVALUE_DEC = 'domain_evalue_dec';
+    const DOMAIN_EVALUE_INC = 'domain_evalue_inc';
+    const DOMAIN_EVALUE_READOUT = 'domain_evalue';
+    const DOMAIN_LABELS_SELECT = 'domain_labels';
+    const DOMAIN_GLOW_CB = 'domain_glow_cb';
     const TIME_AXIS_CB = 'timeaxis_cb';
     const TIME_GRID_CB = 'timegrid_cb';
     const MSA_SCROLL_ID = 'aptxmsascroll';
@@ -507,6 +522,28 @@ function (root, d3, forester, phyloXml) {
     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
+    // ------ protein domain architectures (the desktop's domain display) ------
+    const DOMAIN_TRACK_START_GAP = 20;    // px from the aligned label column to the backbone's start
+    const DOMAIN_TRACK_END_GAP = 10;      // px kept free past the widest track
+    const DOMAIN_RADIAL_GAP = 4;          // px from the label ring / the tip's label to the backbone, radial layouts
+    const DOMAIN_WIDTH_MIN = 20;          // the track width stops growing / shrinking at these
+    const DOMAIN_WIDTH_MAX = 2000;
+    const DOMAIN_WIDTH_GROW = 1.2;        // one d+ press
+    const DOMAIN_WIDTH_SHRINK = 0.8;      // one d- press
+    const DOMAIN_WIDTH_VIEWPORT_FRACTION = 0.25;   // the initial track width
+    const DOMAIN_RADIAL_WIDTH_FRACTION = 0.2;      // ... capped at this share of the radius in radial layouts
+    const DOMAIN_SCALE_HEADROOM = 0.9;    // drawn length over reserved length
+    const DOMAIN_BOX_MIN_H = 6;
+    const DOMAIN_BOX_MAX_H = 16;
+    const DOMAIN_BACKBONE_COLOR = 'rgb(100,100,100)';   // the same in both themes and in exports
+    const DOMAIN_SHADOW_COLOR = 'rgb(8,18,21)';
+    const DOMAIN_SHADOWS = [[0.4, 0.7, 40], [0.9, 1.5, 28], [1.6, 2.5, 17]];   // dx, dy, alpha of 255, in drawing order
+    const DOMAIN_GLOWS = [[3.2, 20], [1.6, 34]];                              // grown by, alpha of 255
+    const DOMAIN_LEGEND_INSET = 10;       // px from the bottom-right corner, the legend's home
+    const DOMAIN_LEGEND_ROW_MAX_PX = 240; // a legend row is clipped to this
+    const DOMAIN_LABEL_MODES = ['none', 'domains', 'legend'];
+    let _domain = null;                   // {width, palette, next, legendFrac}, set per launch
+    let _domainReserve = 0;               // horizontal px reserved for the tracks, set with _w
     // ------ time axis (the desktop's geologic / calendar overlays) ------
     const TIME_GEO_RESERVE = 52;          // two ICS band rows + the Ma ruler
     const TIME_CAL_RESERVE = 26;          // the calendar year ruler
@@ -613,6 +650,14 @@ function (root, d3, forester, phyloXml) {
     const OVERVIEW_HEIGHT = 111;
     const OVERVIEW_MARGIN = 12;
     const OVERVIEW_PAD = 5;
+    // Smallest the "you are here" rectangle is allowed to get, in overview
+    // pixels. Zoom vertically into a 13,000-tip tree and the visible slice is
+    // a fraction of one percent of it: the rectangle is then accurate,
+    // sub-pixel and useless. Below this it stops being a measurement and
+    // becomes a marker -- it still says WHERE you are, it just stops claiming
+    // to say exactly how much you can see. The inner frame is 132 x 101, so
+    // this is small enough never to mislead about position.
+    const OVERVIEW_VIEWPORT_MIN = 7;
 
     let _overviewGroup = null;   // the whole overview, appended above the tree
     let _overviewContent = null; // the scaled miniature inside it
@@ -913,17 +958,90 @@ function (root, d3, forester, phyloXml) {
     // Rebuild the miniature. Called when the tree itself changes: the branch
     // paths are copied straight from what was just rendered, so the overview
     // matches the real display in either layout without redoing any geometry.
+    // The links of the CURRENT layout. The overview is built from these --
+    // from the MODEL -- never by reading back what was drawn.
+    //
+    // Reading the drawn tree is what broke it: update() animates the links
+    // with a transition, and the overview was rebuilt from inside update(),
+    // so every attribute it read was the frame BEFORE the one being drawn.
+    // Logging from inside the function showed all 215 links degenerate on
+    // EVERY rebuild, in every display mode -- the tree had not been drawn
+    // yet. The desktop has never had this bug because its miniature is
+    // likewise computed from the model.
+    let _overviewLinks = null;
+
+    // The tree's extent for the overview, in un-zoomed tree coordinates:
+    // branches as the layout placed them, plus the space the layout reserved
+    // for external labels.
+    //
+    // ONE extent, used for BOTH the miniature's placement and the "is the
+    // overview needed at all" test. That is the property that matters, and
+    // getting it wrong is what made the first attempt at this worse than the
+    // bug: the miniature was fitted to the branches while the visibility test
+    // measured branches PLUS labels, so the "you are here" rectangle was
+    // drawn against a different extent than the picture under it. The two may
+    // live in different spaces -- the desktop deliberately keeps the
+    // rectangle in frame space -- but they must derive from one extent.
+    //
+    // Labels count, by Christian's decision and as the desktop does it: the
+    // question is whether what the user can SEE fits, and a cut-off label is
+    // not visible.
+    function overviewExtent() {
+        if (_state.circularDisplay || _state.unrootedDisplay) {
+            // maxRad already reaches the outer label ring -- fitCircular()
+            // fits the display to exactly this.
+            let r = _state.circularDisplay
+                ? (_radial ? _radial.maxRad : null)
+                : (_unroot ? _unroot.maxRad : null);
+            if (!r || r <= 0) {
+                return null;
+            }
+            return {x: -r, y: -r, width: 2 * r, height: 2 * r};
+        }
+        if (!_overviewLinks || _overviewLinks.length === 0) {
+            return null;
+        }
+        // elbow() writes 'M source.y,source.x V target.x H target.y', so the
+        // horizontal axis is .y and the vertical axis is .x.
+        let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
+        for (let i = 0, len = _overviewLinks.length; i !== len; ++i) {
+            let l = _overviewLinks[i];
+            let sx = l.source.y, tx = l.target.y;
+            let sy = l.source.x, ty = l.target.x;
+            if (sx < minX) { minX = sx; }
+            if (tx < minX) { minX = tx; }
+            if (sx > maxX) { maxX = sx; }
+            if (tx > maxX) { maxX = tx; }
+            if (sy < minY) { minY = sy; }
+            if (ty < minY) { minY = ty; }
+            if (sy > maxY) { maxY = sy; }
+            if (ty > maxY) { maxY = ty; }
+        }
+        if (!isFinite(minX) || !isFinite(minY) || maxX <= minX) {
+            return null;
+        }
+        // The label reservation the layout was sized against, MINUS the root
+        // offset. calcMaxTreeLengthForDisplay() bundles both: the space kept
+        // to the LEFT of the root and the space kept to the RIGHT for
+        // external labels. Only the label half belongs on this edge.
+        //
+        // Including the root offset made the box exactly rootOffset too wide,
+        // and since centerNode() shifts the view left by that same amount to
+        // seat the root, the right edge of the box always fell just outside
+        // the viewport: measured box=[0,13 1497x755] against
+        // view=[-254,-10 1497x800] with rootOffset=254, so "does it fit" said
+        // no by precisely 254px and the overview appeared after every Fit.
+        maxX += calcMaxTreeLengthForDisplay() - _settings.rootOffset + _domainReserve;
+        let h = maxY - minY;
+        return {x: minX, y: minY, width: maxX - minX, height: h > 0 ? h : 1};
+    }
+
     function rebuildOverview() {
         if (!_overviewGroup) {
             return;
         }
         let size = svgSize();
-        let box = null;
-        try {
-            box = _svgGroup.node().getBBox(); // in un-zoomed tree coordinates
-        } catch {
-            box = null;
-        }
+        let box = overviewExtent();   // from the MODEL: see overviewExtent()
         if (!size || !box || box.width <= 0 || box.height <= 0) {
             _overviewGroup.style('display', 'none');
             _overviewMap = null;
@@ -942,15 +1060,32 @@ function (root, d3, forester, phyloXml) {
         _overviewContent.attr('transform', 'translate(' + _overviewMap.tx + ',' + _overviewMap.ty + ') scale(' + scale + ')');
 
         let paths = [];
-        _svgGroup.selectAll('path.link').each(function () {
-            let d = this.getAttribute('d');
-            if (d) {
-                paths.push(d);
+        if (_overviewLinks) {
+            for (let i = 0, len = _overviewLinks.length; i !== len; ++i) {
+                let d = elbow(_overviewLinks[i]);   // the SAME routine the tree is drawn with
+                if (d) {
+                    paths.push(d);
+                }
             }
-        });
-        let sel = _overviewContent.selectAll('path').data(paths);
+        }
+        // ONE path for the whole miniature, not one per link. Every elbow()
+        // string starts with an absolute moveto, so concatenating them yields
+        // a single path of many subpaths that renders identically -- they
+        // already share one stroke, width and vector-effect, so nothing
+        // per-link was being expressed by separate elements.
+        //
+        // It is worth doing because the alternative keeps a SECOND copy of
+        // every link in the document: 18,512 extra elements on the big demo
+        // tree, rewritten on every redraw. Measured on that tree, same data:
+        // writing 18,512 paths 222 ms, writing the one concatenated path
+        // 9 ms. Verified equivalent before adopting -- node ordering, the
+        // index of the first node group, and the datum order of the inserted
+        // paths all match, and the union bounding box is unchanged.
+        let sel = _overviewContent.selectAll('path.aptx-overview-links')
+            .data(paths.length > 0 ? [paths.join(' ')] : []);
         sel.exit().remove();
         sel.enter().append('path')
+            .attr('class', 'aptx-overview-links')
             .merge(sel)
             .attr('d', function (d) {
                 return d;
@@ -1023,10 +1158,32 @@ function (root, d3, forester, phyloXml) {
         let y0 = Math.max(OVERVIEW_PAD, _overviewMap.ty + (visY * _overviewMap.scale));
         let x1 = Math.min(OVERVIEW_WIDTH - OVERVIEW_PAD, _overviewMap.tx + ((visX + visW) * _overviewMap.scale));
         let y1 = Math.min(OVERVIEW_HEIGHT - OVERVIEW_PAD, _overviewMap.ty + ((visY + visH) * _overviewMap.scale));
+        // Keep the rectangle visible when the visible slice is tiny. Grown
+        // about its own centre, so the marker stays over the part of the tree
+        // you are actually looking at, then pushed back inside the frame if
+        // that growth would take it out.
+        let floorSpan = function (a, b, lo, hi) {
+            if ((b - a) >= OVERVIEW_VIEWPORT_MIN || (hi - lo) <= OVERVIEW_VIEWPORT_MIN) {
+                return [a, b];
+            }
+            let mid = (a + b) / 2;
+            let start = mid - (OVERVIEW_VIEWPORT_MIN / 2);
+            let end = start + OVERVIEW_VIEWPORT_MIN;
+            if (start < lo) {
+                start = lo;
+                end = lo + OVERVIEW_VIEWPORT_MIN;
+            } else if (end > hi) {
+                end = hi;
+                start = hi - OVERVIEW_VIEWPORT_MIN;
+            }
+            return [start, end];
+        };
+        let xs = floorSpan(x0, x1, OVERVIEW_PAD, OVERVIEW_WIDTH - OVERVIEW_PAD);
+        let ys = floorSpan(y0, y1, OVERVIEW_PAD, OVERVIEW_HEIGHT - OVERVIEW_PAD);
         _overviewViewport
-            .attr('x', x0).attr('y', y0)
-            .attr('width', Math.max(0, x1 - x0))
-            .attr('height', Math.max(0, y1 - y0));
+            .attr('x', xs[0]).attr('y', ys[0])
+            .attr('width', Math.max(0, xs[1] - xs[0]))
+            .attr('height', Math.max(0, ys[1] - ys[0]));
     }
 
     function zoom(event) {
@@ -1311,6 +1468,79 @@ function (root, d3, forester, phyloXml) {
         document.addEventListener('keydown', onKey);
     }
 
+    // One set of listeners on the tree group instead of five on every node.
+    //
+    // These used to be attached in the node enter: click and contextmenu on
+    // each g.node, and mouseover/mousemove/mouseout on each
+    // circle.nodeCircleOptions. On an 18,512-node tree that is 92,560
+    // registrations on the first draw, and it measured 300-450 ms of one.
+    // Mouse events bubble, so one listener per type on the group does the same
+    // work -- find which node the event came from, and hand the handler its
+    // datum. The handlers never used `this`, which is what makes this a
+    // straight substitution rather than a rewrite.
+    //
+    // Note it is mouseover/mouseout, NOT mouseenter/mouseleave: only the
+    // former pair bubbles, so only the former pair can be delegated.
+    function attachNodeEventDelegation(group) {
+
+        // d3 stores a node's datum on the element as __data__, which is all
+        // selection.datum() reads. Going straight to it avoids allocating a
+        // selection on every mousemove.
+        function datumOf(el) {
+            return el ? el.__data__ : null;
+        }
+
+        // The hover target stays the invisible 5px circle rather than the whole
+        // node, or the tooltip would follow the labels too.
+        function hoverDatum(event) {
+            let t = event.target;
+            if (!t || !t.classList || !t.classList.contains('nodeCircleOptions')) {
+                return null;
+            }
+            return datumOf(t.parentNode);
+        }
+
+        // Click and the context menu take the whole node group, so the node's
+        // LABEL works as a target too -- a much easier thing to aim at than a
+        // 5px circle.
+        function nodeDatum(event) {
+            let t = event.target;
+            return datumOf(t && t.closest ? t.closest('g.node') : null);
+        }
+
+        group
+            .on('click', function (event) {
+                let d = nodeDatum(event);
+                if (d && _treeFn.clickEvent) {
+                    _treeFn.clickEvent(event, d);
+                }
+            })
+            .on('contextmenu', function (event) {
+                let d = nodeDatum(event);
+                if (d && _treeFn.clickEvent) {
+                    event.preventDefault(); // ours instead of the browser's menu
+                    _treeFn.clickEvent(event, d);
+                }
+            })
+            .on('mouseover', function (event) {
+                let d = hoverDatum(event);
+                if (d) {
+                    mouseover(event, d);
+                }
+            })
+            .on('mousemove', function (event) {
+                let d = hoverDatum(event);
+                if (d) {
+                    mousemove(event, d);
+                }
+            })
+            .on('mouseout', function (event) {
+                if (hoverDatum(event)) {
+                    mouseout();
+                }
+            });
+    }
+
     function mouseout() {
         hideHoverGlow();
         // Fade only. Emptying the tooltip here collapsed it to nothing but its
@@ -1330,9 +1560,16 @@ function (root, d3, forester, phyloXml) {
     // the next launch).
     //
     // The candidates come from forester.visualizationCandidates: the tree is
-    // the only input. Each candidate carries its scales, built once per
-    // launch from the COMPLETE tree -- so a value keeps its colour inside a
-    // subtree view even when the subtree does not contain it.
+    // the only input, and candidacy is decided on the TREE -- at launch, and
+    // again only after a permanent edit (a deletion). A VIEW -- the subtree
+    // the user switched into -- never changes what is offered or chosen; it
+    // only re-summarizes each candidate over the tips on screen (legend rows
+    // and counts, the "no value" row, a numeric field's band and gradient
+    // range) through forester.visualizationSummary. Colour and shape
+    // identities live in the memory maps below and so survive every view.
+    // Until 2026-09-12 the classifier was re-run per view and its refusals
+    // applied to the chosen field, which dropped the colouring in 61% of the
+    // corpus's clades and did not bring it back on return.
     // The tree as displayed right now: the subtree the user switched into,
     // otherwise the (possibly edited) full tree.
     function displayedRoot() {
@@ -1379,7 +1616,8 @@ function (root, d3, forester, phyloXml) {
         if (!_settings.enableVisualizations) {
             return;
         }
-        computeVisualizationCandidates(_treeData);
+        installCandidates(forester.visualizationCandidates(_treeData));
+        summarizeView(_treeData);
         // The embedder may name the visualization to open with (the
         // initialVisualization setting, matched case-insensitively against
         // the Color-menu label or the internal id). A name this tree cannot
@@ -1406,14 +1644,20 @@ function (root, d3, forester, phyloXml) {
             _vis.autoColorId = requested.id;
             _vis.colorId = requested.id;
             _state.showVisualizations = true;
-        } else if (_vis.candidates.length > 0 && !_vis.candidates[0].wide) {
-            // Auto-apply the best candidate: the classifier returns them best
-            // first, so a tree opens already coloured by its most informative
-            // field instead of grey with a menu to discover. A wide field
-            // (21+ values, legend capped) is offered but never imposed.
-            _vis.autoColorId = _vis.candidates[0].id;
-            _vis.colorId = _vis.autoColorId;
-            _state.showVisualizations = true;
+        } else {
+            // Auto-apply the best candidate that is not WIDE: the classifier
+            // returns them best first, so a tree opens already coloured by
+            // its most informative field instead of grey with a menu to
+            // discover. A wide field (21+ values, legend capped) is offered
+            // but never imposed -- and it does not block what sits below it
+            // either: a tree carrying a wide field and an In-Group opens by
+            // the In-Group, not uncoloured.
+            let first = forester.openingVisualization(_vis.candidates);
+            if (first) {
+                _vis.autoColorId = first.id;
+                _vis.colorId = _vis.autoColorId;
+                _state.showVisualizations = true;
+            }
         }
     }
 
@@ -1743,49 +1987,72 @@ function (root, d3, forester, phyloXml) {
         buildCategoryScale(vis);
     }
 
-    function computeVisualizationCandidates(viewRoot) {
-        _vis.candidates = [];
+    // The tree's candidates become THE candidates: the menu, the tiers, the
+    // ids the memory maps are keyed by. Their scales come from summarizeView.
+    function installCandidates(list) {
+        _vis.candidates = list;
         _vis.byId = {};
-        forester.visualizationCandidates(viewRoot).forEach(function (c) {
-            if (c.numeric) {
-                // ramps are POSITION in the view's range, not identity: a
-                // subtree spanning six years gets a full-width gradient
-                let nums = c.values.map(Number);
-                let mean = nums.reduce(function (a, b) {
-                    return a + b;
-                }, 0) / nums.length;
-                c.rangeScale = d3.scaleLinear()
-                    .range(VIS_COLOR_RAMP)
-                    .domain([nums[0], mean, nums[nums.length - 1]]);
-            }
-            function memoryKey(v) {
-                return visMemoryKey(c, v);
-            }
-            // a switchable candidate needs both scales standing by
-            if (c.colorMode === 'category' || c.switchable) {
-                buildCategoryScale(c);
-            }
-            if (c.shape) {
-                let mem = _vis.shapeMemory[c.id] || (_vis.shapeMemory[c.id] = {});
-                let next = _vis.shapeNext[c.id] || 0;
-                c.values.forEach(function (v) {
-                    let k = memoryKey(v);
-                    if (!(k in mem)) {
-                        mem[k] = VIS_SHAPES[next++ % VIS_SHAPES.length];
-                    }
-                });
-                _vis.shapeNext[c.id] = next;
-                c.shapeScale = d3.scaleOrdinal()
-                    .domain(c.values)
-                    .range(c.values.map(function (v) {
-                        return mem[memoryKey(v)];
-                    }));
-            }
-            _vis.candidates.push(c);
+        list.forEach(function (c) {
             _vis.byId[c.id] = c;
         });
     }
 
+    // Re-summarizes every candidate over the tips under `root` and rebuilds
+    // its scales from that: the whole tree at launch and after an edit, the
+    // displayed subtree on every view change.
+    function summarizeView(root) {
+        _vis.candidates.forEach(function (c) {
+            let s = forester.visualizationSummary(c, root);
+            c.values = s.values;
+            c.counts = s.counts;
+            c.coverage = s.coverage;
+            c.total = s.total;
+            if (c.numeric) {
+                c.colorMode = s.colorMode;
+                c.switchable = s.switchable;
+            }
+            buildScales(c);
+        });
+    }
+
+    function buildScales(c) {
+        c.rangeScale = null;
+        if (c.numeric && c.values.length > 0) {
+            // ramps are POSITION in the view's range, not identity: a
+            // subtree spanning six years gets a full-width gradient
+            let nums = c.values.map(Number);
+            let mean = nums.reduce(function (a, b) {
+                return a + b;
+            }, 0) / nums.length;
+            c.rangeScale = d3.scaleLinear()
+                .range(VIS_COLOR_RAMP)
+                .domain([nums[0], mean, nums[nums.length - 1]]);
+        }
+        function memoryKey(v) {
+            return visMemoryKey(c, v);
+        }
+        // a switchable candidate needs both scales standing by
+        if (c.colorMode === 'category' || c.switchable) {
+            buildCategoryScale(c);
+        }
+        if (c.shape) {
+            let mem = _vis.shapeMemory[c.id] || (_vis.shapeMemory[c.id] = {});
+            let next = _vis.shapeNext[c.id] || 0;
+            c.values.forEach(function (v) {
+                let k = memoryKey(v);
+                if (!(k in mem)) {
+                    mem[k] = VIS_SHAPES[next++ % VIS_SHAPES.length];
+                }
+            });
+            _vis.shapeNext[c.id] = next;
+            c.shapeScale = d3.scaleOrdinal()
+                .domain(c.values)
+                .range(c.values.map(function (v) {
+                    return mem[memoryKey(v)];
+                }));
+        }
+    }
+
     function currentColorVis() {
         return ((_vis && _vis.colorId) ? _vis.byId[_vis.colorId] : null) || null;
     }
@@ -1797,7 +2064,10 @@ function (root, d3, forester, phyloXml) {
     // A candidate's colour mode, honouring the legend's [colors] / [gradient]
     // switch, and the scale that mode wants.
     function colorModeOf(vis) {
-        return _vis.colorModeById[vis.id] || vis.colorMode;
+        // the legend's [colors]/[gradient] choice holds only while the field
+        // is switchable in THIS view (as on the desktop): above 20 distinct
+        // values it is a gradient, whatever was chosen inside a smaller clade
+        return (vis.switchable && _vis.colorModeById[vis.id]) || vis.colorMode;
     }
 
     // Legend row order: numbers list in numeric order by default, words by
@@ -1847,9 +2117,10 @@ function (root, d3, forester, phyloXml) {
     // a titled, bordered panel; value rows with counts; a [by count] / [A-Z]
     // sort toggle in the title row (count-first is the desktop's default);
     // and for numeric ranges a horizontal gradient bar with the min and max
-    // beneath it. Unlike the desktop there is no "+N more" cap machinery:
-    // the classifier already refuses fields above 20 values, so a legend
-    // can never overflow.
+    // beneath it. A long legend shows its 20 most frequent rows and a
+    // [+N more] chip, like the desktop's. Rows, counts and the "no value"
+    // row describe the tips on SCREEN (the view's summary); the colours are
+    // launch-lifetime identities from the memory maps.
     //
     // The cards live in the tree's own svg, so they ride along into the PNG
     // and SVG exports, and their colours are the four theme colours the
@@ -1915,7 +2186,9 @@ function (root, d3, forester, phyloXml) {
         const titleFont = '600 ' + (FS + 1) + 'px ' + FONT_DEFAULTS;
         const ink = _state.labelColorDefault;
         const frame = _state.branchColorDefault;
-        const isRange = kind === 'color' && colorModeOf(vis) === 'range';
+        // a field with no value in this view has no range to draw: the card
+        // is then just its "no value" row
+        const isRange = kind === 'color' && colorModeOf(vis) === 'range' && vis.values.length > 0;
 
         const LEGEND_MAX_ROWS = 20;
         let rows = [];
@@ -2283,6 +2556,28 @@ function (root, d3, forester, phyloXml) {
         });
     }
 
+    // Animate when there is something to animate; otherwise set the values
+    // straight onto the selection.
+    //
+    // d3 builds a schedule for every element a transition touches, whether or
+    // not that transition will animate anything -- and a duration of 0 animates
+    // nothing. Nearly every redraw here asks for 0: all 39 call sites that pass
+    // a duration pass 0, and only the 15 that omit the argument animate. So the
+    // common path was paying for machinery it never used. On the 18,512-node
+    // tree, ONE `transition.select('path')` measured ~190-235 ms against ~15 ms
+    // for the same select on a plain selection -- and the node update does six
+    // such selects, plus the node and link roots.
+    //
+    // interrupt() first: a transition still running from an earlier redraw would
+    // otherwise finish afterwards and overwrite what we just set. The transition
+    // this replaces cancelled that animation implicitly, by taking over the same
+    // schedule; a plain selection has to say so.
+    function animateOrSet(selection, duration) {
+        return duration > 0
+            ? selection.transition().duration(duration)
+            : selection.interrupt();
+    }
+
     function update(source, transitionDuration, doNotRecalculateWidth) {
 
         if (!source) {
@@ -2300,6 +2595,8 @@ function (root, d3, forester, phyloXml) {
             // the alignment track reserves its window on the right, so the
             // tree and labels compress to make room rather than overlapping
             _msaReserve = 0;
+            // and the domain tracks reserve their column past the labels
+            _domainReserve = domainReserve();
             if (msaShown()) {
                 let fullPx = _basicTreeProperties.maxMolSeqLength * MSA_COL_WIDTH;
                 // budgeted from the VIEWPORT: sizing it from the zoomed layout
@@ -2310,11 +2607,11 @@ function (root, d3, forester, phyloXml) {
                 let band = Math.max(MSA_MIN_BAND_PX, Math.round(vw * MSA_MAX_VIEWPORT_FRACTION));
                 // a wide alignment must not squeeze the tree itself away: the
                 // band yields until the tree keeps its minimum share
-                let maxBand = _displayWidth - calcMaxTreeLengthForDisplay() - MSA_TRACK_GAP - MSA_MIN_TREE_PX;
+                let maxBand = _displayWidth - calcMaxTreeLengthForDisplay() - _domainReserve - MSA_TRACK_GAP - MSA_MIN_TREE_PX;
                 band = Math.max(MSA_MIN_BAND_PX, Math.min(band, maxBand));
                 _msaReserve = MSA_TRACK_GAP + Math.min(fullPx, band);
             }
-            _w = _displayWidth - calcMaxTreeLengthForDisplay() - _msaReserve;
+            _w = _displayWidth - calcMaxTreeLengthForDisplay() - _msaReserve - _domainReserve;
             if (_w < 1) {
                 _w = 1;
             }
@@ -2365,6 +2662,7 @@ function (root, d3, forester, phyloXml) {
         let links = hierarchy.links().map(function (link) {
             return {source: link.source.data, target: link.target.data};
         });
+        _overviewLinks = links;   // the overview is built from these, not from the DOM
         let gap = _state.nodeLabelGap;
 
         if (_state.phylogram === true) {
@@ -2446,21 +2744,14 @@ function (root, d3, forester, phyloXml) {
                 return d.id || (d.id = ++_i);
             });
 
+        // No listeners here: click, contextmenu and the hover trio are
+        // delegated once to the tree group -- see attachNodeEventDelegation().
         let nodeEnter = node.enter().append('g')
             .attr('class', 'node')
             .attr('transform', function () {
                 return 'translate(' + source.y0 + ',' + source.x0 + ')';
             })
-            .style('cursor', 'default')
-            .on('click', _treeFn.clickEvent)
-            // Right-click opens the same menu. The left-click target is an
-            // invisible 5px circle on the node itself, which is hard to hit; this
-            // handler sits on the whole node group, so the node's LABEL works as
-            // the target too -- a much easier thing to aim at.
-            .on('contextmenu', function (event, d) {
-                event.preventDefault(); // ours instead of the browser's menu
-                _treeFn.clickEvent.call(this, event, d);
-            });
+            .style('cursor', 'default');
 
 
         // Only the three elements EVERY node needs are created here. The other
@@ -2483,11 +2774,6 @@ function (root, d3, forester, phyloXml) {
             .attr('r', 0);
 
         nodeEnter.append('circle')
-            .on("mouseover", mouseover)
-            .on("mousemove", function (event, d) {
-                mousemove(event, d);
-            })
-            .on("mouseout", mouseout)
             .style('cursor', 'pointer')
             .style('opacity', '0')
             .attr('class', 'nodeCircleOptions')
@@ -2708,20 +2994,29 @@ function (root, d3, forester, phyloXml) {
             });
         }
 
-        node.select('circle.nodeCircle')
-            .attr('r', function (d) {
-                if (((_state.showVisualizations && !_state.showNodeEvents) && (makeNodeFillColor(d) === _state.backgroundColorDefault))) {
-                    return 0;
-                }
-                return makeNodeSize(d);
-            })
-            .style('stroke', function (d) {
-                return makeNodeStrokeColor(d);
-            })
-            .style('stroke-width', _state.branchWidthDefault)
-            .style('fill', function (d) {
-                return (_state.showVisualizations || _state.showNodeEvents || isNodeFound(d) || isNodeSelected(d)) ? makeNodeFillColor(d) : _state.backgroundColorDefault;
-            });
+        // One pass, and the fill colour computed once.
+        //
+        // This was four chained .attr/.style calls, so d3 walked all 18.5k
+        // circles four times; and makeNodeFillColor() was called TWICE per
+        // node -- once to decide whether the dot collapses to r=0, once for
+        // the fill itself -- which is not a cheap accessor: it checks the
+        // search hits, the node events, the visualization colour and the
+        // node's own style.
+        //
+        // The union of the two conditions that need the colour is just the
+        // fill condition, since (showVisualizations && !showNodeEvents)
+        // implies showVisualizations. So it is computed once when needed and
+        // reused, and left null when neither branch wants it.
+        node.select('circle.nodeCircle').each(function (d) {
+            let fill = (_state.showVisualizations || _state.showNodeEvents
+                || isNodeFound(d) || isNodeSelected(d)) ? makeNodeFillColor(d) : null;
+            let r = ((_state.showVisualizations && !_state.showNodeEvents)
+                && (fill === _state.backgroundColorDefault)) ? 0 : makeNodeSize(d);
+            this.setAttribute('r', r);
+            this.style.stroke = makeNodeStrokeColor(d);
+            this.style.strokeWidth = _state.branchWidthDefault;
+            this.style.fill = (fill === null) ? _state.backgroundColorDefault : fill;
+        });
 
 
         // Dim Non-Matches: one opacity on the node GROUP dims its labels, dot,
@@ -2732,16 +3027,24 @@ function (root, d3, forester, phyloXml) {
             return (_dimNonMatches && !getFoundColor(d)) ? DIM_NON_MATCH_OPACITY : null;
         });
 
-        let nodeUpdate = node.transition()
-            .duration(transitionDuration)
+        let nodeUpdate = animateOrSet(node, transitionDuration)
             .attr('transform', function (d) {
                 return nodeTransform(d);
             });
 
-        nodeUpdate.select('text')
+        // The same rule for a node's CHILD elements: derive from the transition
+        // when animating, else select straight off the node and interrupt any
+        // animation still on that child.
+        function nodeChild(selector) {
+            return transitionDuration > 0
+                ? nodeUpdate.select(selector)
+                : node.select(selector).interrupt();
+        }
+
+        nodeChild('text')
             .style('fill-opacity', 1);
 
-        nodeUpdate.select('text.extlabel')
+        nodeChild('text.extlabel')
             .text(function (d) {
                 return d._extLabelText;   // computed in syncOptionalNodeChildren
             });
@@ -2750,17 +3053,17 @@ function (root, d3, forester, phyloXml) {
         // 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);
+            nodeChild('text.bllabel').text(makeBranchLengthLabel);
         }
         if (_state.showConfidenceValues) {
-            nodeUpdate.select('text.conflabel').text(makeConfidenceValuesLabel);
+            nodeChild('text.conflabel').text(makeConfidenceValuesLabel);
         }
         if (_state.showBranchEvents) {
-            nodeUpdate.select('text.brancheventlabel').text(makeBranchEventsLabel);
+            nodeChild('text.brancheventlabel').text(makeBranchEventsLabel);
         }
 
         let drawShapes = _state.showVisualizations || stylesActive();
-        nodeUpdate.select('path')
+        nodeChild('path')
             .style('stroke', drawShapes ? makeNodeStrokeColor : null)
             .style('stroke-width', _state.branchWidthDefault)
             .style('fill', drawShapes ? makeNodeFillColor : null)
@@ -2772,9 +3075,9 @@ function (root, d3, forester, phyloXml) {
         // 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) {
+            animateOrSet(node.filter(function (d) {
                 return d.children && makeNodeVisShape(d) === null;
-            }).select('path').transition().duration(transitionDuration)
+            }).select('path'), transitionDuration)
                 .attr('d', 'M0,0');
         }
 
@@ -2798,7 +3101,26 @@ function (root, d3, forester, phyloXml) {
                 return d.target.id;
             });
 
-        let linkEnter = link.enter().insert('path', 'g')
+        // The reference node for the insert below, resolved ONCE.
+        //
+        // d3's insert(name, before) takes `before` as a SELECTOR STRING and
+        // then runs parent.querySelector(before) for EVERY element it
+        // inserts. With 18.5k links going into a group that already holds
+        // 18.5k node <g>s, that is 18.5k full-subtree queries and it
+        // dominated the first draw: measured 1,883 ms against 66 ms for the
+        // same inserts with the lookup hoisted -- 28x, and about a third of
+        // the time to open the biggest demo tree.
+        //
+        // Passing a function instead makes d3 use its return value as-is. The
+        // result is identical: every link still lands before the first node
+        // group, in the same order, so links stay painted behind nodes. It
+        // must be re-resolved each update because the node join above may
+        // have just created or removed those groups.
+        let linkBefore = _svgGroup.node().querySelector('g');
+
+        let linkEnter = link.enter().insert('path', function () {
+            return linkBefore;
+        })
             .attr('class', 'link')
             .attr('fill', 'none')
             .attr('stroke-width', makeBranchWidth)
@@ -2819,8 +3141,7 @@ function (root, d3, forester, phyloXml) {
 
         link.attr('stroke-width', makeBranchWidth);
 
-        link.transition()
-            .duration(transitionDuration)
+        animateOrSet(link, transitionDuration)
             .attr('stroke', makeBranchColor)
             .attr('d', elbow);
 
@@ -2897,6 +3218,8 @@ function (root, d3, forester, phyloXml) {
         }
 
         hideHoverGlow(); // the hovered node may have moved; the next mouseover re-shows it
+        drawDomainArchitectures();
+        drawDomainLegend();
         drawMsaTrack();
         drawTimeOverlays();
         rebuildOverview(); // measured AFTER the overlays, so the bbox is this frame's
@@ -3090,7 +3413,10 @@ function (root, d3, forester, phyloXml) {
         if (value === null) {
             return null;
         }
-        return colorModeOf(vis) === 'range' ? vis.rangeScale(Number(value)) : vis.categoryScale(value);
+        if (colorModeOf(vis) === 'range') {
+            return vis.rangeScale ? vis.rangeScale(Number(value)) : null;
+        }
+        return vis.categoryScale(value);
     }
 
     let makeVisNodeFillColor = function (node) {
@@ -3211,7 +3537,7 @@ function (root, d3, forester, phyloXml) {
         if (_vis && _vis.labelRef && !phynode.children && phynode.properties) {
             for (let i = 0; i < phynode.properties.length; ++i) {
                 let p = phynode.properties[i];
-                if (p.ref === _vis.labelRef && p.applies_to === 'node' && p.value) {
+                if (p.ref === _vis.labelRef && forester.isNodeScopedProperty(p) && p.value) {
                     return String(p.value);
                 }
             }
@@ -3293,25 +3619,38 @@ function (root, d3, forester, phyloXml) {
         let wantEvent = _state.showBranchEvents === true;
         let wantDot = _state.showSupportDots === true;
 
-        // whole-class removals first: one pass, no per-node callback
+        // Whole-class removals first: ONE query over the tree group, not one
+        // per node. `node.selectAll(...)` runs querySelectorAll on every one of
+        // the 18,512 node groups, and five of those is 92,560 queries made
+        // largely to discover there is nothing to remove -- measured at 82-92 ms
+        // per redraw on the big tree, against 40-50 ms for the whole per-node
+        // loop below it. Each of these classes is created only in this function,
+        // on a g.node inside _svgGroup, so one query over the group finds
+        // exactly the same elements. (The overview's miniature is out of reach
+        // either way: it hangs off _baseSvg, not _svgGroup.)
+        let dropAll = function (selector) {
+            if (_svgGroup) {
+                _svgGroup.selectAll(selector).remove();
+            }
+        };
         if (!wantBl) {
-            node.selectAll('text.bllabel').remove();
+            dropAll('text.bllabel');
         }
         if (!wantConf) {
-            node.selectAll('text.conflabel').remove();
+            dropAll('text.conflabel');
         }
         if (!wantEvent) {
-            node.selectAll('text.brancheventlabel').remove();
+            dropAll('text.brancheventlabel');
         }
         if (!wantDot) {
-            node.selectAll('circle.suppdot').remove();
+            dropAll('circle.suppdot');
         }
 
         // No search running means no halo anywhere -- one pass instead of
         // 18,512 set lookups plus 18,512 DOM queries.
         let anyFound = anySearchHits();
         if (!anyFound) {
-            node.selectAll('circle.foundHalo').remove();
+            dropAll('circle.foundHalo');
         }
 
         // Raw DOM inside the loop, not d3 selections: this runs once per node
@@ -3471,7 +3810,7 @@ function (root, d3, forester, phyloXml) {
                     if (value.selected === true && value.propertyRef) {
                         let prop_text = '';
                         for (let pm = 0; pm < props_length; ++pm) {
-                            if (phynode.properties[pm].ref === value.propertyRef && phynode.properties[pm].datatype === 'xsd:string' && phynode.properties[pm].applies_to === 'node') {
+                            if (phynode.properties[pm].ref === value.propertyRef && phynode.properties[pm].datatype === 'xsd:string' && forester.isNodeScopedProperty(phynode.properties[pm])) {
                                 if (prop_text.length > 0) {
                                     prop_text += ', '
                                 }
@@ -3962,6 +4301,10 @@ function (root, d3, forester, phyloXml) {
     const STATE_KEYS = [
         'layout',
         'showMsa',
+        'showDomainArchitectures',
+        'domainLabels',
+        'domainGlow',
+        'domainEvalueExponent',
         'showTimeAxis',
         'timeAxisGrid',
         'showSupportDots',
@@ -4081,12 +4424,8 @@ function (root, d3, forester, phyloXml) {
         // explicitly is derived from what the loaded tree actually contains
         // (an explicit caller option always wins). Field presence comes from
         // the same per-tree discovery that drives the search Field menu.
-        let presentFields = new Set();
-        if (_treeData) {
-            forester.availableSearchFields(_treeData).forEach(function (f) {
-                presentFields.add(f.key);
-            });
-        }
+        let presentFields = new Set(_treeData ? forester.availableSearchFields(_treeData) : []);
+        let F = forester.searchFields;
 
         // Branch lengths are worth drawing to scale only when MOST of the
         // branches that CARRY THE SCALE have one. Two corrections to the
@@ -4185,6 +4524,39 @@ function (root, d3, forester, phyloXml) {
             _state.showMsa = _basicTreeProperties.alignedMolSeqs === true
                 && _basicTreeProperties.maxMolSeqLength > 0;
         }
+        // A tree with protein domain architectures on its tips draws them
+        // from the start (the desktop switches its toggle on at load), again
+        // unless the caller decided. The track width is set at the first
+        // draw from the viewport; threshold, label mode and glow come from
+        // the config or the desktop's defaults.
+        if (_state.showDomainArchitectures === undefined) {
+            _state.showDomainArchitectures = _basicTreeProperties.domainArchitectures === true;
+        }
+        if (_state.domainLabels === undefined) {
+            _state.domainLabels = 'domains';
+        } else if (DOMAIN_LABEL_MODES.indexOf(_state.domainLabels) < 0) {
+            throw new Error(ERROR + '"domainLabels" must be "none", "domains" or "legend"');
+        }
+        if (_state.domainGlow === undefined) {
+            _state.domainGlow = false;
+        }
+        if (_state.domainEvalueExponent === undefined) {
+            _state.domainEvalueExponent = forester.DOMAIN_EVALUE_EXPONENT_DEFAULT;
+        } else if (!Number.isInteger(_state.domainEvalueExponent)
+            || _state.domainEvalueExponent < forester.DOMAIN_EVALUE_EXPONENT_MIN
+            || _state.domainEvalueExponent > forester.DOMAIN_EVALUE_EXPONENT_MAX) {
+            throw new Error(ERROR + '"domainEvalueExponent" must be an integer from '
+                + forester.DOMAIN_EVALUE_EXPONENT_MIN + ' to ' + forester.DOMAIN_EVALUE_EXPONENT_MAX);
+        }
+        _domain = {width: null, palette: null, next: 0, legendFrac: null};
+        if (_basicTreeProperties.domainArchitectures) {
+            // malformed domains are skipped, never fatal -- said once, here
+            let ignored = forester.domainArchitectureStats(_treeData).ignored;
+            if (ignored > 0) {
+                console.warn(MESSAGE + ignored + ' protein domain' + (ignored === 1 ? '' : 's')
+                    + ' with a missing or impossible from / to / E-value ignored');
+            }
+        }
         // Likewise a dated tree draws its time axis from the start --
         // geologic ICS bands or calendar years, decided from the <date>
         // elements by forester.timeAxisInfo -- again unless the caller set
@@ -4209,18 +4581,18 @@ function (root, d3, forester, phyloXml) {
         // Which taxonomy fields to label with is decided from the tree, not
         // configured: show the scientific name and code when present, and fall
         // back to the common name only when there is no scientific name.
-        _state.showTaxonomyCode = presentFields.has('TC');
-        _state.showTaxonomyScientificName = presentFields.has('TS');
-        _state.showTaxonomyCommonName = presentFields.has('TN') && !presentFields.has('TS');
+        _state.showTaxonomyCode = presentFields.has(F.taxonomyCode);
+        _state.showTaxonomyScientificName = presentFields.has(F.taxonomyScientificName);
+        _state.showTaxonomyCommonName = presentFields.has(F.taxonomyCommonName) && !presentFields.has(F.taxonomyScientificName);
         _state.showTaxonomyRank = false;
         _state.showTaxonomySynonyms = false;
         // Likewise ONE good sequence identifier rather than all of them, in
         // order of preference: sequence name, gene name, symbol, accession.
-        _state.showSequenceName = presentFields.has('SN');
-        _state.showSequenceGeneSymbol = presentFields.has('GN') && !presentFields.has('SN');
-        _state.showSequenceSymbol = presentFields.has('SS') && !presentFields.has('SN') && !presentFields.has('GN');
-        _state.showSequenceAccession = presentFields.has('SA') && !presentFields.has('SN')
-            && !presentFields.has('GN') && !presentFields.has('SS');
+        _state.showSequenceName = presentFields.has(F.sequenceName);
+        _state.showSequenceGeneSymbol = presentFields.has(F.geneName) && !presentFields.has(F.sequenceName);
+        _state.showSequenceSymbol = presentFields.has(F.sequenceSymbol) && !presentFields.has(F.sequenceName) && !presentFields.has(F.geneName);
+        _state.showSequenceAccession = presentFields.has(F.sequenceAccession) && !presentFields.has(F.sequenceName)
+            && !presentFields.has(F.geneName) && !presentFields.has(F.sequenceSymbol);
 
         // Which of the three groups start CHECKED is then decided from the
         // label text itself (forester.suggestLabelFields): a field whose text
@@ -4243,7 +4615,7 @@ function (root, d3, forester, phyloXml) {
                     if (labelRef && n.properties) {
                         for (let pi = 0; pi < n.properties.length; ++pi) {
                             let p = n.properties[pi];
-                            if (p.ref === labelRef && p.applies_to === 'node' && p.value) {
+                            if (p.ref === labelRef && forester.isNodeScopedProperty(p) && p.value) {
                                 return String(p.value);
                             }
                         }
@@ -4510,6 +4882,7 @@ function (root, d3, forester, phyloXml) {
         populateSearchMenus();
 
         _svgGroup = _baseSvg.append('g');
+        attachNodeEventDelegation(_svgGroup);
         // the floating strips paint over the tree and under the overview
         _floatGroup = _baseSvg.append('g').attr('class', 'aptx-float')
             .style('pointer-events', 'none');
@@ -4581,6 +4954,13 @@ function (root, d3, forester, phyloXml) {
             _node_mouseover_div.remove(); // the body-level tooltip div (d3 selection)
             _node_mouseover_div = null;
         }
+        // A redraw still waiting for its frame belongs to the viewer being torn
+        // down. Left set, its callback would read the NEXT viewer's pending
+        // update, null it, then find its own sequence number stale and return
+        // -- having already discarded work that was not its own. I could not
+        // construct that ordering from the UI, and one line means nobody has to
+        // reason about it again.
+        _pendingUpdate = null;
         clearInterval(_intervalId); // a zoom button held down at destroy time
         d3.select(window).on('resize.archaeopteryx', null);
         _docListeners.forEach(function (l) {
@@ -4598,6 +4978,7 @@ function (root, d3, forester, phyloXml) {
         _baseSvg = null;
         _svgGroup = null;
         _overviewGroup = null;
+        _overviewLinks = null;
         _overviewContent = null;
         _overviewViewport = null;
         _overviewMap = null;
@@ -4724,7 +5105,13 @@ function (root, d3, forester, phyloXml) {
             _baseSvg = d3.select(containerEl).append('svg')
                 .attr('width', _displayWidth)
                 .attr('height', _displayHeight)
-                .call(_zoomListener);
+                .call(_zoomListener)
+                // d3.zoom binds its own double-click-to-zoom, which scales the
+                // picture -- fonts and all -- and so behaves like the wheel
+                // zoom this program deliberately replaced with a re-layout.
+                // It is also easy to hit by accident: a double click that
+                // misses a node is a miss, not a request to magnify the tree.
+                .on('dblclick.zoom', null);
 
             if (_settings.enableDynamicSizing) {
                 d3.select(window)
@@ -4989,7 +5376,7 @@ function (root, d3, forester, phyloXml) {
                         let properties_text = '';
                         let prev_property_ref = null;
                         for (let pl = 0; pl < l; ++pl) {
-                            if (sorted_properties[pl].applies_to === 'node') {
+                            if (forester.isNodeScopedProperty(sorted_properties[pl])) {
                                 if (sorted_properties[pl].ref === prev_property_ref) {
                                     properties_text = addSepSame(properties_text);
                                 } else {
@@ -5222,7 +5609,7 @@ function (root, d3, forester, phyloXml) {
                         fakeNode.y0 = 0;
                         _root = fakeNode;
                         _basicTreeProperties = forester.collectBasicTreeProperties(_root);
-                        refreshVisualizations();
+                        refreshVisualizations(false);
                         search0();
                         search1();
                         zoomToFit();
@@ -5335,7 +5722,7 @@ function (root, d3, forester, phyloXml) {
                         forester.deleteSubtree(tree, d);
                         _treeData = tree;
                         _basicTreeProperties = forester.collectBasicTreeProperties(_treeData);
-                        refreshVisualizations();
+                        refreshVisualizations(true);
                         search0();
                         search1();
                         zoomToFit();
@@ -5350,27 +5737,39 @@ function (root, d3, forester, phyloXml) {
     }
 
 
-    // After a permanent tree edit (subtree deletion), the candidates are
-    // re-derived from what is left; the user's choices survive when their
-    // fields do. Plain subtree NAVIGATION does not come through here -- a
-    // subtree keeps its parent tree's visualizations, so colours stay
-    // stable diving in and out.
-    // The view changed -- into or out of a subtree, or the tree was edited.
-    // Candidates, menus and legends are recomputed for what is displayed; the
-    // user's choices survive when their fields do (otherwise the menu goes
-    // back to default and the tree to plain ink -- honest, not a silent
-    // switch); colour/shape identities persist via the memory maps; and no
-    // checkbox moves, because a view change is not a user choice.
-    function refreshVisualizations() {
+    // The view changed (into or out of a subtree), or the tree was EDITED.
+    //
+    // A view never changes what is offered or chosen: the menu stands, the
+    // colour and shape stand, and only the summaries move -- legend rows and
+    // counts, the "no value" row, a numeric band -- to describe the tips on
+    // screen. Diving into a one-value clade coloured by Genus shows a
+    // one-row legend, not a grey tree.
+    //
+    // An edit re-derives the candidates from what is left, because it is a
+    // different tree now. The chosen fields are kept as long as they still
+    // carry a value on any remaining tip (visualizationCandidatesKeeping):
+    // the refusal rules decide what is OFFERED, never what is already
+    // chosen. Only a field with no value left anywhere falls back to default.
+    // No checkbox moves either way, because a view change is not a user choice.
+    function refreshVisualizations(edited) {
+        if (edited && _domain) {
+            _domain.palette = null;   // the tree changed: the domain names are dealt their colours again
+        }
         if (!_vis) {
             return;
         }
-        let colorId = _vis.colorId;
-        let shapeId = _vis.shapeId;
-        computeVisualizationCandidates(displayedRoot());
-        _vis.colorId = (colorId && _vis.byId[colorId]) ? colorId : null;
-        _vis.shapeId = (shapeId && _vis.byId[shapeId] && _vis.byId[shapeId].shape) ? shapeId : null;
-        populateVisualizationMenus();
+        if (edited) {
+            let colorId = _vis.colorId;
+            let shapeId = _vis.shapeId;
+            installCandidates(forester.visualizationCandidatesKeeping(_treeData,
+                [currentColorVis(), currentShapeVis()]));
+            _vis.colorId = (colorId && _vis.byId[colorId]) ? colorId : null;
+            _vis.shapeId = (shapeId && _vis.byId[shapeId] && _vis.byId[shapeId].shape) ? shapeId : null;
+        }
+        summarizeView(displayedRoot());
+        if (edited) {
+            populateVisualizationMenus();
+        }
         removeColorLegend(LEGEND_LABEL_COLOR);
         removeShapeLegend(LEGEND_NODE_SHAPE);
     }
@@ -5394,7 +5793,7 @@ function (root, d3, forester, phyloXml) {
         // part of the real spans (an anchor ratio taken from anything else
         // once flung the whole tree off-screen after three X+ presses).
         return {
-            horizontal: Math.max(1, _displayWidth - calcMaxTreeLengthForDisplay() - _msaReserve),
+            horizontal: Math.max(1, _displayWidth - calcMaxTreeLengthForDisplay() - _msaReserve - _domainReserve),
             vertical: Math.max(40, _displayHeight - (2 * TOP_AND_BOTTOM_BORDER_HEIGHT) - bottomOverlayReserve())
         };
     }
@@ -6126,6 +6525,448 @@ function (root, d3, forester, phyloXml) {
         scheduleUpdate(null, 0);
     }
 
+    // ===================== Protein domain architectures =====================
+    // The desktop's domain display, ported from its RenderableDomainArchitecture
+    // and TreePanel (the spec is section D1 of the repo's TODO.md). Each tip's
+    // architecture is a grey backbone of L residues with a rounded box per
+    // domain the E-value threshold admits: in one aligned column past the
+    // labels in the rectangular layout, riding the tip's spoke in the radial
+    // ones. One scale for the whole tree -- f px per residue, from the track
+    // width and the longest architecture -- so lengths compare across tips.
+    // Which domains, where, which colour and which legend rows are forester's
+    // (tested against the desktop's numbers); this is the SVG, the legend
+    // card and the controls. The boxes take no pointer events: nothing to
+    // hover or click, as on the desktop.
+
+    function domainsShown() {
+        return _state.showDomainArchitectures === true
+            && _basicTreeProperties.domainArchitectures === true
+            && _basicTreeProperties.maxDomainArchitectureLength > 0
+            && _state.showExternalLabels
+            // in a radial layout the boxes ride the spokes, so only radial
+            // labels go with them
+            && (!radialDisplay() || !_radialLabelsHorizontal);
+    }
+
+    // The track width W: a quarter of the viewport at first use (the
+    // layout's width, if smaller); d+ / d- scale it by 1.2 / 0.8 and stop
+    // at 2000 / 20.
+    function domainTrackWidth() {
+        if (!_domain.width) {
+            let vp = svgSize();
+            let vw = Math.min(_displayWidth, (vp && vp.w) ? vp.w : _displayWidth);
+            _domain.width = Math.max(DOMAIN_WIDTH_MIN, Math.round(vw * DOMAIN_WIDTH_VIEWPORT_FRACTION));
+        }
+        return _domain.width;
+    }
+
+    // In a radial layout the track is capped at a share of the radius, or a
+    // long architecture would run off the circle.
+    function domainEffectiveWidth() {
+        let w = domainTrackWidth();
+        if (radialDisplay()) {
+            let r = _state.circularDisplay ? (_radial ? _radial.maxRad : 0) : (_unroot ? _unroot.maxRad : 0);
+            if (r > 0) {
+                w = Math.min(w, DOMAIN_RADIAL_WIDTH_FRACTION * r);
+            }
+        }
+        return w;
+    }
+
+    // px per residue, one factor for every architecture on the tree; Lmax
+    // counts every domain whatever its E-value, so the threshold never
+    // rescales the tracks
+    function domainScale() {
+        return (domainEffectiveWidth() / _basicTreeProperties.maxDomainArchitectureLength) * DOMAIN_SCALE_HEADROOM;
+    }
+
+    // The room the longest tip label takes: the same estimate the layout is
+    // sized against (there are no font metrics in the model).
+    function domainLabelSpace() {
+        return (_maxLabelLength * _state.externalNodeFontSize * LABEL_SIZE_CALC_FACTOR) + LABEL_SIZE_CALC_ADDITION;
+    }
+
+    // The rectangular layout reserves the tracks' column so the tree and
+    // labels compress to make room, as the alignment track does; the radial
+    // layouts fit the tracks into the ring instead (fitRadialExtent).
+    function domainReserve() {
+        if (!domainsShown() || radialDisplay()) {
+            return 0;
+        }
+        return DOMAIN_TRACK_START_GAP + domainTrackWidth() + DOMAIN_TRACK_END_GAP;
+    }
+
+    function domainRadialExtent() {
+        if (!domainsShown() || !radialDisplay()) {
+            return 0;
+        }
+        return DOMAIN_RADIAL_GAP + domainEffectiveWidth() + DOMAIN_TRACK_END_GAP;
+    }
+
+    // Colours: the names the threshold admits over the WHOLE tree, sorted by
+    // code unit, take the palette in order. Dealt at load, after an edit and
+    // whenever the threshold changes (the drawn set changes then, so colours
+    // can shift); a name met later takes the next unused colour and keeps
+    // it. Never derived from the name's characters -- that let SH2 and SH3
+    // collide on the desktop.
+    function domainPalette() {
+        if (!_domain.palette) {
+            let names = forester.domainSummary(forester.getTreeRoot(_treeData), _state.domainEvalueExponent).names;
+            _domain.palette = Object.create(null);
+            names.forEach(function (name, i) {
+                _domain.palette[name] = i;
+            });
+            _domain.next = names.length;
+        }
+        return _domain.palette;
+    }
+
+    function domainColor(name) {
+        if (!name) {
+            return forester.DOMAIN_UNNAMED_COLOR;
+        }
+        let palette = domainPalette();
+        if (palette[name] === undefined) {
+            palette[name] = _domain.next++;
+        }
+        return forester.domainQualitativeColor(palette[name]);
+    }
+
+    function domainBoxHeight(pitch) {
+        return Math.max(DOMAIN_BOX_MIN_H, Math.min(DOMAIN_BOX_MAX_H, Math.round(pitch)));
+    }
+
+    function drawDomainArchitectures() {
+        if (!_svgGroup) {
+            return;
+        }
+        _svgGroup.selectAll('g.aptx-domains').remove();
+        if (!domainsShown() || !_root) {
+            return;
+        }
+        let tips = forester.getAllExternalNodes(_root).filter(function (d) {
+            return _state.unrootedDisplay ? (d.ux !== undefined) : (d.x !== undefined);
+        });
+        let f = domainScale();
+        if (tips.length === 0 || !(f > 0) || !isFinite(f)) {
+            return;
+        }
+        let g = _svgGroup.append('g').attr('class', 'aptx-domains').style('pointer-events', 'none');
+        // one vertical gradient per base colour, lighter at the top; the
+        // defs ride into the SVG / PDF / PNG exports with the boxes
+        let defs = g.append('defs');
+        let made = Object.create(null);
+        function gradientFor(base) {
+            let id = 'aptx-dom-' + base.substring(1);
+            if (!made[id]) {
+                made[id] = true;
+                let grad = defs.append('linearGradient').attr('id', id)
+                    .attr('x1', 0).attr('y1', 0).attr('x2', 0).attr('y2', 1);
+                grad.append('stop').attr('offset', '0%').attr('stop-color', forester.domainLighten(base, 0.12));
+                grad.append('stop').attr('offset', '100%').attr('stop-color', forester.domainDarken(base, 0.10));
+            }
+            return 'url(#' + id + ')';
+        }
+        let labelSpace = domainLabelSpace();
+        if (_state.circularDisplay) {
+            // every bar starts on one ring past the labels and rides its
+            // tip's spoke outward
+            let r0 = _radial.maxRad + labelSpace + DOMAIN_RADIAL_GAP;
+            let h = domainBoxHeight((r0 * 2 * Math.PI) / tips.length);
+            tips.forEach(function (d) {
+                let t = g.append('g').attr('transform', 'rotate(' + labelAngleDeg(d) + ')');
+                drawOneArchitecture(t, forester.domainArchitectureOf(d), r0, -h / 2, h, f, false, gradientFor);
+            });
+        } else if (_state.unrootedDisplay) {
+            // no common ring: each bar starts past its own tip's label
+            let h = domainBoxHeight((Math.PI * 2 * _unroot.maxRad) / tips.length);
+            let start = labelSpace + DOMAIN_RADIAL_GAP;
+            tips.forEach(function (d) {
+                let t = g.append('g').attr('transform', 'translate(' + d.ux + ',' + d.uy + ') rotate(' + labelAngleDeg(d) + ')');
+                drawOneArchitecture(t, forester.domainArchitectureOf(d), start, -h / 2, h, f, false, gradientFor);
+            });
+        } else {
+            // one aligned column: past the deepest tip and the longest label.
+            // The box height follows the tip pitch (half of it), 6 to 16 px.
+            tips.sort(function (p, q) {
+                return p.x - q.x;
+            });
+            let n = tips.length;
+            let pitch = n > 1 ? (tips[n - 1].x - tips[0].x) / (n - 1) : _state.externalNodeFontSize;
+            let h = domainBoxHeight(pitch / 2);
+            let start = _w + _state.nodeLabelGap + labelSpace + DOMAIN_TRACK_START_GAP;
+            let labelsOn = _state.domainLabels === 'domains';
+            tips.forEach(function (d) {
+                drawOneArchitecture(g, forester.domainArchitectureOf(d), start, d.x - (h / 2), h, f, labelsOn, gradientFor);
+            });
+        }
+    }
+
+    function domainRect(g, x, y, w, h, r) {
+        return g.append('rect')
+            .attr('x', x).attr('y', y).attr('width', w).attr('height', h)
+            .attr('rx', r).attr('ry', r);
+    }
+
+    // One architecture, in the desktop's order: the backbone, then per
+    // admitted domain its stepped drop shadow, the optional glow, the
+    // gradient body with its border, and -- rectangular only -- the name,
+    // when it fits the box.
+    function drawOneArchitecture(g, da, start, y1, h, f, labelsOn, gradientFor) {
+        if (!da) {
+            return;
+        }
+        let geo = forester.domainBoxes(da, start, f, _state.domainEvalueExponent);
+        g.append('rect')
+            .attr('x', geo.backbone.x).attr('y', y1 + (h / 2) - 0.5)
+            .attr('width', geo.backbone.w).attr('height', 1)
+            .style('fill', DOMAIN_BACKBONE_COLOR);
+        let fs = Math.min(_state.externalNodeFontSize, h - 2);
+        let font = fs + 'px ' + FONT_DEFAULTS;
+        geo.boxes.forEach(function (b) {
+            let base = domainColor(b.name);
+            let r = Math.min(2, Math.min(b.w, h) / 2);
+            DOMAIN_SHADOWS.forEach(function (s) {
+                domainRect(g, b.x + s[0], y1 + s[1], b.w, h, r)
+                    .style('fill', DOMAIN_SHADOW_COLOR)
+                    .style('fill-opacity', s[2] / 255);
+            });
+            if (_state.domainGlow) {
+                DOMAIN_GLOWS.forEach(function (gl) {
+                    let o = gl[0];
+                    domainRect(g, b.x - o, y1 - o, b.w + (2 * o), h + (2 * o), r + o)
+                        .style('fill', base)
+                        .style('fill-opacity', gl[1] / 255);
+                });
+            }
+            domainRect(g, b.x, y1, b.w, h, r)
+                .style('fill', gradientFor(base))
+                .style('stroke', forester.domainDarken(base, 0.24))
+                .style('stroke-width', 1);
+            if (labelsOn && b.name && fs > 4 && legendTextWidth(b.name, font) <= b.w - 4) {
+                g.append('text')
+                    .attr('x', b.x + (b.w / 2)).attr('y', y1 + (h / 2))
+                    .attr('dy', '0.35em')
+                    .attr('text-anchor', 'middle')
+                    .style('font', font)
+                    .style('fill', forester.domainLabelInk(base))
+                    .text(b.name);
+            }
+        });
+    }
+
+    function clipTextToWidth(text, font, maxPx) {
+        if (legendTextWidth(text, font) <= maxPx) {
+            return text;
+        }
+        let s = text;
+        while (s.length > 1 && legendTextWidth(s + '…', font) > maxPx) {
+            s = s.substring(0, s.length - 1);
+        }
+        return s + '…';
+    }
+
+    // The domain legend, in "Legend" mode only: the names drawn in the view,
+    // in first-appearance order, each with its box count; a flat swatch per
+    // row. Its home is the bottom-right corner; a drag keeps its place as a
+    // fraction of the view, a double-click sends it home. Its own card, so
+    // it neither follows nor crowds the Color-by legend.
+    function drawDomainLegend() {
+        if (!_baseSvg) {
+            return;
+        }
+        _baseSvg.selectAll('g.' + LEGEND_DOMAINS).remove();
+        if (!_root || !domainsShown() || _state.domainLabels !== 'legend') {
+            return;
+        }
+        // rows in the order the tips are on screen -- top to bottom, or
+        // clockwise -- not the data's order, which a ladderized display
+        // does not follow
+        let tips = forester.getAllExternalNodes(_root).filter(function (d) {
+            return d.x !== undefined;
+        }).sort(function (p, q) {
+            return p.x - q.x;
+        });
+        let summary = forester.domainSummary(tips, _state.domainEvalueExponent);
+        let size = svgSize();
+        if (summary.legend.length === 0 || !size) {
+            return;
+        }
+        const FS = Math.max(11, _state.externalNodeFontSize || 11);
+        const PAD = 9;
+        const ROW = FS + 6;
+        const SWATCH = 10;
+        const GAP = 6;
+        const rowFont = FS + 'px ' + FONT_DEFAULTS;
+        const titleFont = '600 ' + (FS + 1) + 'px ' + FONT_DEFAULTS;
+        const ink = _state.labelColorDefault;
+        const frame = _state.branchColorDefault;
+        let title = 'Protein domains (E ≤ 1e' + _state.domainEvalueExponent + ')';
+        let rows = summary.legend.map(function (r) {
+            return {
+                text: clipTextToWidth(r.name + ' (' + r.count + ')', rowFont, DOMAIN_LEGEND_ROW_MAX_PX),
+                color: domainColor(r.name)
+            };
+        });
+        let width = legendTextWidth(title, titleFont);
+        rows.forEach(function (r) {
+            width = Math.max(width, SWATCH + GAP + legendTextWidth(r.text, rowFont));
+        });
+        width += 2 * PAD;
+        let height = PAD + ROW + (rows.length * ROW) + PAD - 2;
+        let x, y;
+        if (_domain.legendFrac) {
+            x = _domain.legendFrac.fx * size.w;
+            y = _domain.legendFrac.fy * size.h;
+        } else {
+            x = size.w - width - DOMAIN_LEGEND_INSET;
+            y = size.h - height - DOMAIN_LEGEND_INSET;
+        }
+        x = Math.max(0, Math.min(size.w - 20, x));
+        y = Math.max(0, Math.min(size.h - 20, y));
+
+        let g = _baseSvg.append('g').attr('class', LEGEND_DOMAINS)
+            .style('cursor', 'move')
+            .call(d3.drag()
+                .on('start', function (event) {
+                    if (event.sourceEvent) {
+                        event.sourceEvent.stopPropagation();   // not a pan of the tree
+                    }
+                })
+                .on('drag', function (event) {
+                    x += event.dx;
+                    y += event.dy;
+                    _domain.legendFrac = {fx: x / size.w, fy: y / size.h};
+                    drawDomainLegend();
+                }))
+            .on('dblclick', function (event) {
+                event.stopPropagation();
+                _domain.legendFrac = null;
+                drawDomainLegend();
+            });
+        g.append('title').text('drag to move; double-click to send it back to the corner');
+        g.append('rect')
+            .attr('x', x).attr('y', y)
+            .attr('width', width).attr('height', height)
+            .attr('rx', 5)
+            .style('fill', _state.backgroundColorDefault)
+            .style('fill-opacity', 0.92)
+            .style('stroke', frame)
+            .style('stroke-opacity', 0.5);
+        let baseline = y + PAD + FS;
+        g.append('text')
+            .attr('x', x + PAD).attr('y', baseline)
+            .style('font', titleFont)
+            .style('fill', ink)
+            .text(title);
+        rows.forEach(function (r) {
+            baseline += ROW;
+            g.append('rect')
+                .attr('x', x + PAD).attr('y', baseline - SWATCH + 1)
+                .attr('width', SWATCH).attr('height', SWATCH)
+                .attr('rx', 2)
+                .style('fill', r.color);
+            g.append('text')
+                .attr('x', x + PAD + SWATCH + GAP).attr('y', baseline)
+                .style('font', rowFont)
+                .style('fill', ink)
+                .text(r.text);
+        });
+    }
+
+    // The controls follow the toggle: hidden without it, and while shown
+    // the readout, the select, the glow box and the four step buttons say
+    // where things stand (a button at its limit is disabled, not a no-op).
+    function syncDomainControls() {
+        let fs = byId(DOMAIN_CONTROLS);
+        if (!fs) {
+            return;
+        }
+        let on = _state.showDomainArchitectures === true && _basicTreeProperties.domainArchitectures === true;
+        setCheckboxValue(DOMAINS_CB, _state.showDomainArchitectures === true);
+        fs.style.display = on ? '' : 'none';
+        if (!on) {
+            return;
+        }
+        let readout = byId(DOMAIN_EVALUE_READOUT);
+        if (readout) {
+            readout.textContent = forester.domainEvalueLabel(_state.domainEvalueExponent);
+        }
+        let w = domainTrackWidth();
+        (w > DOMAIN_WIDTH_MIN ? enableButton : disableButton)(byId(DOMAIN_WIDTH_DEC));
+        (w < DOMAIN_WIDTH_MAX ? enableButton : disableButton)(byId(DOMAIN_WIDTH_INC));
+        (_state.domainEvalueExponent > forester.DOMAIN_EVALUE_EXPONENT_MIN ? enableButton : disableButton)(byId(DOMAIN_EVALUE_DEC));
+        (_state.domainEvalueExponent < forester.DOMAIN_EVALUE_EXPONENT_MAX ? enableButton : disableButton)(byId(DOMAIN_EVALUE_INC));
+        setValue(DOMAIN_LABELS_SELECT, _state.domainLabels);
+        setCheckboxValue(DOMAIN_GLOW_CB, _state.domainGlow === true);
+    }
+
+    function domainsCbClicked() {
+        _state.showDomainArchitectures = getCheckboxValue(DOMAINS_CB);
+        if (_state.showDomainArchitectures && radialDisplay()) {
+            _radialLabelsHorizontal = false;   // the boxes ride the spokes, so the labels must too
+            syncZoomRowButtons();
+        }
+        syncDomainControls();
+        scheduleUpdate(null, 0);
+    }
+
+    // d+ / d-: the width grows by 1.2 while under 2000, shrinks by 0.8 while
+    // over 20 (so one press can carry it past a limit; the next is refused)
+    function domainWidthStep(grow) {
+        let w = domainTrackWidth();
+        if (grow ? w >= DOMAIN_WIDTH_MAX : w <= DOMAIN_WIDTH_MIN) {
+            return;
+        }
+        _domain.width = w * (grow ? DOMAIN_WIDTH_GROW : DOMAIN_WIDTH_SHRINK);
+        syncDomainControls();
+        scheduleUpdate(null, 0);
+    }
+
+    function domainEvalueStep(delta) {
+        let e = _state.domainEvalueExponent + delta;
+        if (e < forester.DOMAIN_EVALUE_EXPONENT_MIN || e > forester.DOMAIN_EVALUE_EXPONENT_MAX) {
+            return;
+        }
+        _state.domainEvalueExponent = e;
+        _domain.palette = null;   // the drawn set changed: the palette is dealt again
+        syncDomainControls();
+        scheduleUpdate(null, 0, true);
+    }
+
+    function domainLabelsChanged() {
+        _state.domainLabels = getValue(DOMAIN_LABELS_SELECT);
+        scheduleUpdate(null, 0, true);
+    }
+
+    function domainGlowCbClicked() {
+        _state.domainGlow = getCheckboxValue(DOMAIN_GLOW_CB);
+        scheduleUpdate(null, 0, true);
+    }
+
+    // A step button that repeats while held: one step on press, then after
+    // a pause one every 90 ms until release (the desktop's auto-repeat on
+    // d- / d+). A keyboard press steps once.
+    function onHoldRepeat(id, step) {
+        let delay = null;
+        let repeat = null;
+        onHold(id, function () {
+            step();
+            delay = setTimeout(function () {
+                repeat = setInterval(step, 90);
+            }, 400);
+        }, function () {
+            if (delay) {
+                clearTimeout(delay);
+                delay = null;
+            }
+            if (repeat) {
+                clearInterval(repeat);
+                repeat = null;
+            }
+        });
+    }
+
     // Search B starts hidden to keep the panel compact; one click (or a
     // configured initial value) reveals it, and it stays revealed.
     function revealSearchB() {
@@ -6465,7 +7306,7 @@ function (root, d3, forester, phyloXml) {
             return;
         }
         let labelSpace = (_maxLabelLength * _state.externalNodeFontSize * LABEL_SIZE_CALC_FACTOR) + LABEL_SIZE_CALC_ADDITION;
-        let outer = maxRad + labelSpace;
+        let outer = maxRad + labelSpace + domainRadialExtent();
         let W = +_baseSvg.attr('width'), H = +_baseSvg.attr('height');
         let scale = 0.9 * (Math.min(W, H) / (2 * outer));
         if (!isFinite(scale) || scale <= 0) {
@@ -6496,7 +7337,7 @@ function (root, d3, forester, phyloXml) {
             _root = _root_const;
             _in_subtree = false;
             _basicTreeProperties = forester.collectBasicTreeProperties(_root);
-            refreshVisualizations();
+            refreshVisualizations(false);
             search0();
             search1();
             zoomToFit();
@@ -6535,7 +7376,7 @@ function (root, d3, forester, phyloXml) {
                 }
 
                 _basicTreeProperties = forester.collectBasicTreeProperties(_root);
-                refreshVisualizations();
+                refreshVisualizations(false);
                 search0();
                 search1();
                 zoomToFit();
@@ -6608,7 +7449,7 @@ function (root, d3, forester, phyloXml) {
         _radialLabelsHorizontal = false;
         _msaColOffset = 0;
         syncZoomRowButtons();
-        refreshVisualizations();
+        refreshVisualizations(false);
         // Esc resets to the launch state -- the auto-applied colour, when its
         // field still exists in what remains of the tree.
         if (_vis) {
@@ -6763,12 +7604,10 @@ function (root, d3, forester, phyloXml) {
 
     // Read a search box's current field / mode / value(s) into a spec.
     function currentSearchSpec(idx) {
-        let key = getValue(idx === 0 ? SEARCH_FIELD_SELECT_0 : SEARCH_FIELD_SELECT_1);
-        let field = null;
-        for (let i = 0; i < _searchFields.length; ++i) {
-            if (_searchFields[i].key === key) { field = _searchFields[i]; break; }
-        }
-        if (!field) field = _searchFields[0] || { key: 'ANY', label: 'Any Text', numeric: false };
+        // the field menu's option values index _searchFields; before a tree
+        // is loaded there is only Any Text
+        let field = _searchFields[Number(getValue(idx === 0 ? SEARCH_FIELD_SELECT_0 : SEARCH_FIELD_SELECT_1))]
+            || _searchFields[0] || forester.availableSearchFields(null)[0];
         let mode = getValue(idx === 0 ? SEARCH_MODE_SELECT_0 : SEARCH_MODE_SELECT_1);
         if (!mode) mode = field.numeric ? 'eq' : 'contains';
         return {
@@ -6793,20 +7632,23 @@ function (root, d3, forester, phyloXml) {
     // Fill both search-field dropdowns from the loaded tree's available fields,
     // then set up each box's mode menu. Called when a tree is (re)loaded.
     function populateSearchMenus() {
+        let before = _searchFields;
         _searchFields = forester.availableSearchFields(_root);
         [SEARCH_FIELD_SELECT_0, SEARCH_FIELD_SELECT_1].forEach(function (selId) {
             let sel = byId(selId);
             if (!sel) return;
-            let prev = sel.value;
+            // a box keeps its field when the new tree still offers it (labels
+            // are unique: a property's label is its ref, which has a colon)
+            let prev = before[Number(sel.value)];
+            let keep = prev ? _searchFields.findIndex(f => f.label === prev.label) : -1;
             sel.innerHTML = '';
             for (let i = 0; i < _searchFields.length; ++i) {
                 let opt = document.createElement('option');
-                opt.value = _searchFields[i].key;
+                opt.value = String(i);
                 opt.textContent = _searchFields[i].label;
                 sel.appendChild(opt);
             }
-            if (prev && _searchFields.some(f => f.key === prev)) sel.value = prev;
-            else sel.value = 'ANY';
+            sel.value = String(keep >= 0 ? keep : 0);
         });
         populateSearchModeMenu(0);
         populateSearchModeMenu(1);
@@ -6861,7 +7703,7 @@ function (root, d3, forester, phyloXml) {
         let input = byId(idx === 0 ? SEARCH_FIELD_0 : SEARCH_FIELD_1);
         if (!dl || !input) return;
         let spec = currentSearchSpec(idx);
-        let enable = !spec.field.numeric && spec.field.key !== 'ANY' && spec.field.key !== 'MS' && spec.mode !== 'regex';
+        let enable = !spec.field.numeric && spec.field.suggest !== false && spec.mode !== 'regex';
         dl.innerHTML = '';
         if (!enable) { input.removeAttribute('list'); return; }
         let vals = forester.distinctSearchValues(_root, spec.field, SEARCH_AUTOCOMPLETE_CAP);
@@ -6898,6 +7740,10 @@ function (root, d3, forester, phyloXml) {
     function layoutButtonClicked() {
         _state.circularDisplay = getCheckboxValue(LAYOUT_CIRC_BUTTON);
         _state.unrootedDisplay = getCheckboxValue(LAYOUT_UNROOTED_BUTTON);
+        if (radialDisplay() && _state.showDomainArchitectures && _basicTreeProperties.domainArchitectures) {
+            // the domain boxes ride the tips' spokes, so the labels must too
+            _radialLabelsHorizontal = false;
+        }
         syncZoomRowButtons();
         zoomToFit();
     }
@@ -7744,9 +8590,13 @@ function (root, d3, forester, phyloXml) {
             // 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.
+            // cursor stays default on purpose: `progress` draws the macOS
+            // beach ball next to the pointer, which reads as "the program has
+            // hung" when the card is already saying exactly what is happening
+            // and for how many nodes. One clear signal, not two.
             + '.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; }'
+            + '  font-size:12px; color:var(--p-ink); cursor:default; }'
             + '.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); }'
@@ -7938,6 +8788,11 @@ function (root, d3, forester, phyloXml) {
             + '.aptx-panel .aptx-zoomrow { display:flex; }'
             + '.aptx-panel .aptx-zoomrow .aptx-gbtn { flex:1 1 0; padding:0; }'
             + '.aptx-panel .aptx-zoomrow .aptx-gbtn:last-child { margin-right:0; }'
+            + '.aptx-panel .aptx-domrow { display:flex; align-items:center; gap:4px; margin:3px 0; }'
+            + '.aptx-panel .aptx-domrow .aptx-domlabel { flex:0 0 64px; font-size:10px; color:var(--p-muted); }'
+            + '.aptx-panel .aptx-domrow input[type=button] { width:30px; padding:0; margin:0; }'
+            + '.aptx-panel .aptx-domrow select { flex:1 1 auto; min-width:0; }'
+            + '.aptx-panel .aptx-domreadout { flex:1 1 auto; text-align:center; font-size:12px; font-variant-numeric:tabular-nums; color:var(--p-ink); }'
             + '.aptx-panel .aptx-glyph { height:14px; width:auto; display:block; overflow:visible; }'
             + '.aptx-panel .aptx-seg .aptx-glyph { height:13px; }'
             + '.aptx-panel input[type=text],.aptx-panel select { font-family:inherit; font-size:11px; color:var(--p-ink); background:var(--p-surface2); border:1px solid var(--p-line-strong); border-radius:6px; max-width:100%; padding:3px 6px; }'
@@ -8259,6 +9114,32 @@ function (root, d3, forester, phyloXml) {
                 if (s.type) {
                     text += '- Type: ' + s.type + '<br>';
                 }
+                // The domain architecture, which phyloXML has always carried
+                // and this dialog has never shown: a reader could find a node
+                // by searching for one of its domains -- forester indexes them
+                // as the "Domain" search field -- and then see nothing about it
+                // here. Listed in POSITION order rather than file order, since
+                // an architecture is a line along the protein and reading it
+                // out of order tells you nothing.
+                let da = s.domain_architecture;
+                if (da && da.domains && da.domains.length > 0) {
+                    text += '- Domain architecture: '
+                        + (da.length ? da.length + ' aa, ' : '')
+                        + da.domains.length + (da.domains.length === 1 ? ' domain' : ' domains')
+                        + '<br>';
+                    da.domains.slice().sort(function (a, b) {
+                        return (a.from - b.from) || (a.to - b.to);
+                    }).forEach(function (dom) {
+                        let name = dom.name || '(unnamed)';
+                        let span = (dom.from !== undefined && dom.to !== undefined)
+                            ? dom.from + '-' + dom.to : '';
+                        // the confidence on a domain is its e-value; an
+                        // explicit 0 is a real score, so test for undefined
+                        let ev = (dom.confidence !== undefined && dom.confidence !== null)
+                            ? ' (E=' + dom.confidence + ')' : '';
+                        text += '-- ' + name + ': ' + span + ev + '<br>';
+                    });
+                }
             }
         }
         if (d.events) {
@@ -8668,6 +9549,8 @@ function (root, d3, forester, phyloXml) {
 
             c0.insertAdjacentHTML('beforeend',makeDisplayControl());
 
+            c0.insertAdjacentHTML('beforeend',makeDomainControls());
+
             c0.insertAdjacentHTML('beforeend',makeZoomControl());
 
 
@@ -8775,6 +9658,13 @@ function (root, d3, forester, phyloXml) {
 
         on(DYNAHIDE_CB, 'click', dynaHideCbClicked);
         on(MSA_CB, 'click', msaCbClicked);
+        on(DOMAINS_CB, 'click', domainsCbClicked);
+        onHoldRepeat(DOMAIN_WIDTH_DEC, function () { domainWidthStep(false); });
+        onHoldRepeat(DOMAIN_WIDTH_INC, function () { domainWidthStep(true); });
+        on(DOMAIN_EVALUE_DEC, 'click', function () { domainEvalueStep(-1); });
+        on(DOMAIN_EVALUE_INC, 'click', function () { domainEvalueStep(1); });
+        on(DOMAIN_LABELS_SELECT, 'change', domainLabelsChanged);
+        on(DOMAIN_GLOW_CB, 'click', domainGlowCbClicked);
         on(TIME_AXIS_CB, 'click', timeAxisCbClicked);
         on(TIME_GRID_CB, 'click', timeGridCbClicked);
 
@@ -9242,6 +10132,9 @@ function (root, d3, forester, phyloXml) {
             if (_basicTreeProperties.alignedMolSeqs && _basicTreeProperties.maxMolSeqLength > 0) {
                 opts.push(makeCheckboxItem('Alignment', MSA_CB, 'to show/hide the sequence alignment beside the tree (rectangular layout only)'));
             }
+            if (_basicTreeProperties.domainArchitectures) {
+                opts.push(makeCheckboxItem('Domain Architectures', DOMAINS_CB, 'to show/hide the protein domain architectures beside the tips', true));
+            }
             if (_timeInfo && _timeInfo.type) {
                 opts.push(makeCheckboxItem('Time Axis', TIME_AXIS_CB, 'to show/hide the '
                     + (_timeInfo.type === 'geologic' ? 'geologic (ICS) time axis' : 'calendar time axis')
@@ -9319,6 +10212,35 @@ function (root, d3, forester, phyloXml) {
             return h;
         }
 
+        // The desktop's domain controls, shown only while the Domain
+        // Architectures toggle is on (syncDomainControls): the track width,
+        // the E-value threshold with its readout, the label mode, the glow.
+        function makeDomainControls() {
+            let h = '<fieldset id="' + DOMAIN_CONTROLS + '" style="display:none">';
+            h = h.concat('<legend>Domain Architectures</legend>');
+            h = h.concat('<div class="aptx-domrow"><span class="aptx-domlabel">Track width</span>');
+            h = h.concat(makeButton('−', DOMAIN_WIDTH_DEC, 'narrow the domain tracks (hold to repeat)'));
+            h = h.concat(makeButton('+', DOMAIN_WIDTH_INC, 'widen the domain tracks (hold to repeat)'));
+            h = h.concat('</div>');
+            h = h.concat('<div class="aptx-domrow"><span class="aptx-domlabel">E-value ≤</span>');
+            h = h.concat(makeButton('−', DOMAIN_EVALUE_DEC, 'Decrease the E-value threshold by a factor of 10'));
+            h = h.concat('<span class="aptx-domreadout" id="' + DOMAIN_EVALUE_READOUT
+                + '" title="domains with an E-value up to this are drawn"></span>');
+            h = h.concat(makeButton('+', DOMAIN_EVALUE_INC, 'Increase the E-value threshold by a factor of 10'));
+            h = h.concat('</div>');
+            h = h.concat('<div class="aptx-domrow"><label class="aptx-domlabel" for="' + DOMAIN_LABELS_SELECT + '">Labels</label>');
+            h = h.concat('<select name="' + DOMAIN_LABELS_SELECT + '" id="' + DOMAIN_LABELS_SELECT
+                + '" title="where the domain names go: on the boxes (rectangular layout only), in a legend, or nowhere">');
+            h = h.concat('<option value="domains">On domains</option>');
+            h = h.concat('<option value="legend">Legend</option>');
+            h = h.concat('<option value="none">None</option>');
+            h = h.concat('</select></div>');
+            h = h.concat('<div class="aptx-checkgrid">'
+                + makeCheckboxItem('Glow', DOMAIN_GLOW_CB, 'a soft glow in each domain\'s own colour around its box') + '</div>');
+            h = h.concat('</fieldset>');
+            return h;
+        }
+
         function makeSliders() {
             let h = "";
             h = h.concat('<fieldset>');
@@ -9500,6 +10422,7 @@ function (root, d3, forester, phyloXml) {
         setCheckboxValue(VIS_CB, _state.showVisualizations);
         setCheckboxValue(DYNAHIDE_CB, _state.dynahide);
         setCheckboxValue(MSA_CB, _state.showMsa);
+        syncDomainControls();
         setCheckboxValue(TIME_AXIS_CB, _state.showTimeAxis);
         setCheckboxValue(TIME_GRID_CB, _state.timeAxisGrid);
         setCheckboxValue(SHORTEN_NODE_NAME_CB, _state.shortenNodeNames);