archaeopteryx 3.17.0 → 3.18.0

package/archaeopteryx.js

@@ -20,7 +20,7 @@
  *
  */
 
-// v 3.17.0
+// v 3.18.0
 // 2026-09-17
 //
 // 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.17.0';
+    const VERSION = '3.18.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';
@@ -6449,11 +6449,11 @@ function (root, d3, forester, phyloXml) {
         // and a tree whose dates carry a unit is never touched. The desktop
         // converts at the same point, next to its internal-label policy
         // (their HeightDateConverter, 0.11.151).
-        // Each node's cumulative divergence is recorded from the branch
-        // lengths AS LOADED, before anything rewrites them, so the time <->
-        // divergence switch is reversible rather than one-way. Auspice states
-        // divergence outright (nextstrain:div) and is unaffected; every other
-        // tree states it as its branch lengths, which the time view overwrites.
+        // What the Time | Div switch needs to be lossless is kept from the
+        // branch lengths AS LOADED, before anything rewrites them: the
+        // lengths a tree arrived with in time, and on a BEAST clock-model
+        // tree its divergence, each length times its rate (see
+        // forester.captureDivergence).
         trees.forEach(function (t) {
             forester.captureDivergence(t);
         });
@@ -7217,6 +7217,7 @@ function (root, d3, forester, phyloXml) {
                     items.push({label: deleteLabel, danger: true, action: function () {
                         forester.deleteSubtree(tree, d);
                         _treeData = tree;
+                        branchScaleAfterEdit();
                         _basicTreeProperties = forester.collectBasicTreeProperties(_treeData);
                         refreshVisualizations(true);
                         search0();
@@ -10286,10 +10287,12 @@ function (root, d3, forester, phyloXml) {
 
     /**
      * Redraws the tree with its branch lengths taken from the chosen metric:
-     * TIME (the gaps between the nodes' dates) or DIVERGENCE (what the file's
-     * own branch lengths measured, recorded at load). Both metrics stay on the
-     * tree, so this is reversible and lossless -- a round trip restores the
-     * loaded branch lengths exactly.
+     * TIME (the lengths the tree arrived with, where it arrived in time; its
+     * date gaps otherwise) or DIVERGENCE (what its nodes record, or on a BEAST
+     * clock-model tree each branch's time times its clock rate). Both stay on
+     * the tree, so this is reversible and lossless -- a round trip restores
+     * the branch lengths exactly. Always the WHOLE tree, whatever is on view.
+     * The rules are forester.hasTimeAndDivergence's, shared with the desktop.
      *
      * @param scale 'time' or 'divergence'
      */
@@ -10304,13 +10307,53 @@ function (root, d3, forester, phyloXml) {
             forester.applyDivergenceBranchLengths(_treeData);
         }
         // the branch lengths ARE the layout, so everything measured from them
-        // has to be measured again
-        _basicTreeProperties = forester.collectBasicTreeProperties(_treeData);
-        setCheckboxValue(BRANCH_SCALE_TIME_BUTTON, scale === 'time');
-        setCheckboxValue(BRANCH_SCALE_DIV_BUTTON, scale !== 'time');
+        // has to be measured again -- for the tree ON VIEW, as switchToSubtree
+        // measures it: a clade's properties are not the whole tree's
+        _basicTreeProperties = forester.collectBasicTreeProperties(displayedRoot());
+        syncBranchScaleControls();
         zoomToFit();
     }
 
+    // The switch's two buttons and whether the pair is shown at all, from the
+    // state: most trees state only one thing, and a control offering a choice
+    // that does not exist is worse than no control.
+    function syncBranchScaleControls() {
+        setCheckboxValue(BRANCH_SCALE_TIME_BUTTON, _state.branchScale === 'time');
+        setCheckboxValue(BRANCH_SCALE_DIV_BUTTON, _state.branchScale !== 'time');
+        let scaleGroup = document.querySelector('.' + BRANCH_SCALE_CONTROLGROUP);
+        if (scaleGroup) {
+            scaleGroup.style.display = _branchScaleAvailable ? '' : 'none';
+        }
+    }
+
+    // The tree was EDITED (a node deleted). Whether it has two layouts is asked
+    // of the tree as it is now, and the layout on screen is laid out again
+    // from what the tree keeps and records: the branch that took the place of
+    // a removed node's is as long as both were, in either layout. A tree that
+    // was never offered the switch still has the branch lengths of its file,
+    // so what it keeps is taken afresh -- deleting the one tip without a
+    // clock rate leaves a tree with a rate on every branch.
+    function branchScaleAfterEdit() {
+        if (!_treeData) {
+            return;
+        }
+        let was = _branchScaleAvailable;
+        if (!was) {
+            forester.captureDivergence(_treeData);
+        }
+        _branchScaleAvailable = forester.hasTimeAndDivergence(_treeData);
+        if (was && _branchScaleAvailable && _state.branchScale === 'divergence') {
+            forester.applyDivergenceBranchLengths(_treeData);
+        } else if (was) {
+            // in time, or no longer a tree with two layouts: back in time
+            forester.applyTimeBranchLengths(_treeData);
+            _state.branchScale = 'time';
+        } else {
+            _state.branchScale = forester.branchLengthScale(_treeData);
+        }
+        syncBranchScaleControls();
+    }
+
     function branchScaleButtonClicked() {
         setBranchScale(getCheckboxValue(BRANCH_SCALE_TIME_BUTTON) ? 'time' : 'divergence');
     }
@@ -11523,23 +11566,37 @@ function (root, d3, forester, phyloXml) {
     // the tree's own branch scale, so the bands line up with the branches
     // even on a fossil-only tree whose youngest tip is far from the present.
 
+    // Whether the branch lengths on screen measure divergence: the switch says
+    // so where it is offered; the tree's own unit where it is not (a build
+    // that opened in divergence, a tree saved from Div).
+    function branchesShowDivergence() {
+        if (_branchScaleAvailable) {
+            return _state.branchScale === 'divergence';
+        }
+        return !!_treeData && typeof _treeData.branch_length_unit === 'string'
+            && _treeData.branch_length_unit.trim() === 'subs/site';
+    }
+
     function timeAxisShown() {
-        return _state.showTimeAxis === true && !radialDisplay()
+        return _state.showTimeAxis === true && !_state.unrootedDisplay
             && _state.phylogram === true
             && _timeInfo !== null && _timeInfo.type !== null
             && _basicTreeProperties.branchLengths === true
             // The axis is an overlay calibrated to the tree's own branch scale,
-            // so it must be hidden when the branches are showing DIVERGENCE
-            // and divergence is a different measure -- calendar years against
-            // substitutions reads as a confident lie. Only then: where the two
-            // metrics agree (a BEAST time tree, whose branch lengths ARE time)
-            // there is no switch and the axis is calibrated correctly, which
-            // is what makes a converted BEAST tree show its years at all.
-            && !(_branchScaleAvailable && _state.branchScale === 'divergence');
+            // so it must be hidden when the branches are showing DIVERGENCE --
+            // calendar years against substitutions reads as a confident lie.
+            // Whether the switch is offered is not the question: a Nextstrain
+            // build with one undated node opens in divergence, says so in its
+            // unit, and is refused the switch; its axis was drawn over
+            // substitutions until 2026-09-29. A tree in time shows its axis
+            // (a converted BEAST tree its years) whether or not it has a
+            // second layout.
+            && !branchesShowDivergence();
     }
 
     function timeAxisBottomReserve() {
-        if (!timeAxisShown()) {
+        // circular draws its ruler in the tree's own gap, not under it
+        if (!timeAxisShown() || _state.circularDisplay) {
             return 0;
         }
         return _timeInfo.type === 'geologic' ? TIME_GEO_RESERVE : TIME_CAL_RESERVE;
@@ -11699,6 +11756,48 @@ function (root, d3, forester, phyloXml) {
         }
 
         let sc = info.type === 'calendar' ? -corr : corr;
+        let circular = _state.circularDisplay;
+
+        // A bar spanning depths x0..x1 at node d: a band across the branch in
+        // rectangular, a segment along the node's spoke in circular.
+        function timeBar(d, x0, x1, thick, fill, cls) {    // bound to d, for probes
+            let el;
+            if (circular) {
+                // A bound older than the root's own estimate is a NEGATIVE
+                // radius, and the bar runs on through the centre onto the far
+                // side of its spoke's line, as the rectangular bar straddles
+                // the root's x. As on the desktop (hpdRadialRange).
+                let a = radialAngle(d.x);
+                let p0 = polarXY(a, radialRadius(x0));
+                let p1 = polarXY(a, radialRadius(x1));
+                el = g.append('line').attr('x1', p0[0]).attr('y1', p0[1])
+                    .attr('x2', p1[0]).attr('y2', p1[1])
+                    .attr('stroke', fill).attr('stroke-width', thick);
+            } else {
+                el = g.append('rect').attr('x', Math.min(x0, x1)).attr('y', d.x - (thick / 2))
+                    .attr('width', Math.max(1, Math.abs(x1 - x0))).attr('height', thick)
+                    .attr('fill', fill);
+            }
+            el.datum(d).attr('class', cls);
+        }
+        // a short stroke ACROSS the branch at depth x: a fossil range's end cap
+        function timeCap(d, x) {
+            let p;
+            let q;
+            if (circular) {
+                let a = radialAngle(d.x);
+                let r = radialRadius(x);    // negative past the centre, as the bar's end is
+                let half = 4 / Math.max(Math.abs(r), 4);    // 4px either side, as an angle
+                p = polarXY(a - half, r);
+                q = polarXY(a + half, r);
+            } else {
+                p = [x, d.x - 4];
+                q = [x, d.x + 4];
+            }
+            g.append('line').attr('x1', p[0]).attr('y1', p[1]).attr('x2', q[0]).attr('y2', q[1])
+                .attr('stroke', FOSSIL_BAR_COLOR).attr('stroke-width', 1)
+                .datum(d).attr('class', 'aptx-fossil-cap');
+        }
 
         // ---- HPD age bars (internal) + tip bars: fossil ranges, or sampling dates ----
         forEachDisplayed(function (d) {
@@ -11719,9 +11818,15 @@ function (root, d3, forester, phyloXml) {
             let s = sc;
             let xa = d.y - ((max - value) * s);
             let xb = d.y + ((value - min) * s);
-            let left = Math.min(xa, xb);
-            let w = Math.max(1, Math.abs(xb - xa));
-            let y = d.x;
+            if (circular && Math.abs(radialRadius(xb) - radialRadius(xa)) < 1) {
+                // the 1px floor, along the spoke: from the bar's inner end
+                // outward, as the rectangular bar is floored from its left
+                // end and as the desktop draws it (hpdRadialRange). It was
+                // centred on the interval until 2026-09-29.
+                let inner = Math.min(xa, xb);
+                xa = inner;
+                xb = inner + (_radial.maxY / _radial.maxRad);
+            }
             // What a TIP's interval means is the axis's to say. On geologic
             // time it is a fossil's observed range, FAD to LAD, and is drawn
             // as one below. On CALENDAR time it is the uncertainty of a
@@ -11734,27 +11839,24 @@ function (root, d3, forester, phyloXml) {
             // the desktop alike). The width test is the entry guard above.
             let sampledTip = !d.children && info.type === 'calendar';
             if (d.children) {
-                g.append('rect').attr('x', left).attr('y', y - 3.5)
-                    .attr('width', w).attr('height', 7)
-                    .attr('fill', HPD_BAR_COLOR);
+                timeBar(d, xa, xb, 7, HPD_BAR_COLOR, 'aptx-age-bar');
             } else if (sampledTip) {
-                g.append('rect').attr('class', 'aptx-sampling-bar')
-                    .attr('x', left).attr('y', y - 2.5)
-                    .attr('width', w).attr('height', 5)
-                    .attr('fill', HPD_BAR_COLOR);
+                timeBar(d, xa, xb, 5, HPD_BAR_COLOR, 'aptx-sampling-bar');
             } else {
-                g.append('rect').attr('x', left).attr('y', y - 2.5)
-                    .attr('width', w).attr('height', 5)
-                    .attr('fill', FOSSIL_BAR_COLOR);
+                timeBar(d, xa, xb, 5, FOSSIL_BAR_COLOR, 'aptx-fossil-bar');
                 // FAD/LAD end caps, so the range reads as a bracketed interval
-                [left, left + w].forEach(function (cx) {
-                    g.append('line').attr('x1', cx).attr('x2', cx)
-                        .attr('y1', y - 4).attr('y2', y + 4)
-                        .attr('stroke', FOSSIL_BAR_COLOR).attr('stroke-width', 1);
-                });
+                let lo = Math.min(xa, xb);
+                let hi = Math.max(xa, xb, lo + 1);
+                timeCap(d, lo);
+                timeCap(d, hi);
             }
         });
 
+        if (circular) {
+            drawCircularTimeRuler(info, anchor, maxTipX, corr, g, grid, ink);
+            return;
+        }
+
         // ---- the axis itself: a FLOATING strip (see floatStripGroup) ----
         let ax = floatStripGroup('aptx-time-axis', axisTop - 4, timeAxisBottomReserve() + 4);
         function axisBackdrop(x0, x1) {
@@ -11911,6 +12013,151 @@ function (root, d3, forester, phyloXml) {
         placeFloatingOverlays();
     }
 
+    // The circular layout's time axis. Its ruler runs along the gap between
+    // the last tip and the first -- the one ray no branch crosses -- from the
+    // root out to the tips, so it turns with the tree. "Time Grid" draws each
+    // tick as a full ring behind the tree; a geologic axis lays its intervals
+    // down as coloured rings, as the desktop does.
+    function drawCircularTimeRuler(info, anchor, maxTipX, corr, g, grid, ink) {
+        let depthOf;       // a date -> depth, the axis the radius is drawn from
+        let ticks = [];
+        let from;          // the root end and the tip end, as dates
+        let to;
+        let bands = [];
+        if (info.type === 'geologic') {
+            let rootAge = info.rootAge;
+            if (!(rootAge > 0)) {
+                return;
+            }
+            let anchorAge = anchor ? anchor.date.value : rootAge;
+            let anchorX = anchor ? anchor.y : _root.y;
+            depthOf = function (age) {
+                return anchorX + ((anchorAge - age) * corr);
+            };
+            from = rootAge;
+            to = Math.max(0, anchorAge - ((maxTipX - anchorX) / corr));
+            forester.maAxisTickValues(rootAge).forEach(function (v) {
+                if (v >= to - 1e-9 && v <= rootAge + 1e-9) {
+                    ticks.push({value: v, text: String(v)});
+                }
+            });
+            if (to > 0) {
+                ticks.push({value: to, text: String(Math.round(to * 100) / 100), first: true});
+            }
+            bands = forester.geoOverlapping(forester.geoBandRanks(to, rootAge)[1], to, rootAge);
+        } else {
+            let present = info.presentDate;
+            if (!(present > 0)) {
+                return;
+            }
+            let anchorYear = anchor ? anchor.date.value : present;
+            let anchorX = anchor ? anchor.y : maxTipX;
+            depthOf = function (yv) {
+                return anchorX - ((anchorYear - yv) * corr);
+            };
+            from = anchorYear - ((anchorX - _root.y) / corr);
+            to = present;
+            forester.calendarTickYears(from, to).forEach(function (yv) {
+                ticks.push({value: yv, text: String(Math.round(yv))});
+            });
+        }
+        let radiusOf = function (v) {
+            return Math.max(0, radialRadius(depthOf(v)));
+        };
+        let r0 = radiusOf(from);
+        let r1 = radiusOf(to);
+        if (!(r1 > r0)) {
+            return;
+        }
+        // behind the tree: the geologic rings, then the grid rings
+        let behind = null;
+        if (bands.length > 0 || grid) {
+            behind = grid || _svgGroup.insert('g', 'g').attr('class', 'aptx-timegrid')
+                .style('pointer-events', 'none');
+        }
+        let ring = d3.arc().startAngle(0).endAngle(2 * Math.PI);
+        let named = [];
+        bands.forEach(function (iv) {
+            let a = radiusOf(Math.min(iv.old, from));
+            let b = radiusOf(Math.max(iv.young, to));
+            if (b - a <= 0) {
+                return;
+            }
+            behind.append('path').attr('d', ring.innerRadius(a).outerRadius(b)())
+                .attr('fill', iv.color).attr('fill-opacity', 0.35);
+            named.push({r: (a + b) / 2, span: b - a, text: iv.name, color: iv.color});
+        });
+        if (grid) {
+            ticks.forEach(function (t) {
+                let r = radiusOf(t.value);
+                if (r > r0 + 0.5 && r < r1 - 0.5) {
+                    grid.append('circle').attr('r', r).attr('fill', 'none')
+                        .attr('stroke', ink).attr('stroke-opacity', 0.18).attr('stroke-width', 1);
+                }
+            });
+        }
+
+        // the ruler, on the gap's centre line
+        let gap = _radialRotation + _radial.angleSpan + ((2 * Math.PI - _radial.angleSpan) / 2);
+        let screen = gap - (Math.PI / 2);
+        let along = [Math.cos(screen), Math.sin(screen)];
+        let across = [-along[1], along[0]];
+        let flip = along[0] < -1e-9;       // keep every number upright
+        let deg = (screen * 180 / Math.PI) + (flip ? 180 : 0);
+        let at = function (r, off) {
+            return [(along[0] * r) + (across[0] * off), (along[1] * r) + (across[1] * off)];
+        };
+        let ax = g.append('g').attr('class', 'aptx-time-ruler');
+        let e0 = at(r0, 0);
+        let e1 = at(r1, 0);
+        ax.append('line').attr('x1', e0[0]).attr('y1', e0[1]).attr('x2', e1[0]).attr('y2', e1[1])
+            .attr('stroke', ink).attr('stroke-width', 1);
+        // numbers on one side of the ruler, interval names on the other; the
+        // headline value first, then the round ticks outward, none overlapping
+        function label(r, off, text, fill, backdrop) {
+            let p = at(r, off);
+            let t = ax.append('g')
+                .attr('transform', 'translate(' + p[0] + ',' + p[1] + ') rotate(' + deg + ')');
+            let w = text.length * 5.5;
+            if (backdrop) {
+                t.append('rect').attr('x', -(w / 2) - 2).attr('y', -6).attr('width', w + 4).attr('height', 12)
+                    .attr('rx', 2).attr('fill', _state.backgroundColorDefault).attr('fill-opacity', 0.85);
+            }
+            t.append('text').attr('text-anchor', 'middle').attr('dominant-baseline', 'central')
+                .style('font-size', '9px').style('fill', fill).text(text);
+        }
+        let side = flip ? -1 : 1;
+        let placed = [];
+        ticks.sort(function (p, q) {
+            return (q.first ? 1 : 0) - (p.first ? 1 : 0) || radiusOf(p.value) - radiusOf(q.value);
+        });
+        ticks.forEach(function (t) {
+            let r = radiusOf(t.value);
+            let c0 = at(r, -4);
+            let c1 = at(r, 4);
+            ax.append('line').attr('x1', c0[0]).attr('y1', c0[1]).attr('x2', c1[0]).attr('y2', c1[1])
+                .attr('stroke', ink).attr('stroke-width', 1);
+            let half = t.text.length * 2.8;
+            for (let i = 0; i < placed.length; ++i) {
+                if (Math.abs(placed[i] - r) < (half * 2) + 6) {
+                    if (!t.first) {
+                        return;
+                    }
+                }
+            }
+            label(r, side * 11, t.text, ink, true);
+            placed.push(r);
+        });
+        if (info.type === 'geologic') {
+            label(r1 + 14, 0, 'Ma', ink, false);
+            named.forEach(function (n) {
+                if ((n.text.length * 5.5) + 4 <= n.span) {
+                    label(n.r, -side * 11, n.text, ink, true);
+                }
+            });
+        }
+    }
+
     function timeAxisCbClicked() {
         _state.showTimeAxis = getCheckboxValue(TIME_AXIS_CB);
         scheduleUpdate(null, 0);
@@ -13067,12 +13314,13 @@ function (root, d3, forester, phyloXml) {
         syncHeatmapControls();
         let timeCb = byId(TIME_AXIS_CB);
         if (timeCb) {
-            timeCb.disabled = radialDisplay();
+            // circular draws it along the gap; only unrooted cannot
+            timeCb.disabled = _state.unrootedDisplay === true;
         }
         let timeGridCb = byId(TIME_GRID_CB);
         if (timeGridCb) {
             // grid lines hang off the time axis: no axis, nothing to grid
-            timeGridCb.disabled = radialDisplay() || _state.showTimeAxis !== true;
+            timeGridCb.disabled = _state.unrootedDisplay === true || _state.showTimeAxis !== true;
         }
         let minus = byId(ZOOM_OUT_X);
         let plus = byId(ZOOM_IN_X);
@@ -13743,7 +13991,7 @@ function (root, d3, forester, phyloXml) {
     const PANEL_SECTIONS_KEY = 'aptx-panel-sections';
     // Download too (Christian, 2026-09-28): four rows, and not something a
     // session uses often.
-    const PANEL_SECTIONS_CLOSED_BY_DEFAULT = ['Zoom', 'Sizes', 'Domain Architectures', 'Download'];
+    const PANEL_SECTIONS_CLOSED_BY_DEFAULT = ['View & Tools', 'Sizes', 'Domain Architectures', 'Download'];
 
     function loadPanelSections() {
         if (_panelSections) {
@@ -13758,6 +14006,11 @@ function (root, d3, forester, phyloXml) {
                         _panelSections[k] = saved[k];
                     }
                 });
+                // the section was called Zoom until 2026-09-30: a fold
+                // remembered under that name still counts
+                if (typeof saved.Zoom === 'boolean' && _panelSections['View & Tools'] === undefined) {
+                    _panelSections['View & Tools'] = saved.Zoom;
+                }
             }
         } catch {
             // no storage (private mode), or junk written by something else:
@@ -16362,14 +16615,14 @@ function (root, d3, forester, phyloXml) {
             h = h.concat(makeSegment(makeGlyph('aligned_phylogram'), PHYLOGRAM_ALIGNED_BUTTON, radioGroup, PHYLOGRAM_ALIGNED_WHAT));
             h = h.concat(makeSegment(makeGlyph('cladogram'), CLADOGRAM_BUTTON, radioGroup, CLADOGRAM_WHAT));
             h = h.concat('</div>');
-            // The branch SCALE, when the tree states two different things: its
-            // nodes' dates, and its branches' divergence. Hidden otherwise,
+            // The branch SCALE, when the tree can be laid out by time and by
+            // divergence (forester.hasTimeAndDivergence). Hidden otherwise,
             // which is most trees.
             h = h.concat('<div class="' + BRANCH_SCALE_CONTROLGROUP + ' aptx-segmented">');
             h = h.concat(makeSegment('Time', BRANCH_SCALE_TIME_BUTTON, 'branch_scale_radio',
-                'branch lengths measure TIME (the nodes\' dates)'));
+                'lay the tree out by TIME (each branch at its stated length in time; from the node dates where the tree arrived showing divergence)'));
             h = h.concat(makeSegment('Div', BRANCH_SCALE_DIV_BUTTON, 'branch_scale_radio',
-                'branch lengths measure DIVERGENCE (substitutions, as the file states them)'));
+                'lay the tree out by DIVERGENCE (substitutions per site: as the tree records it, or on a BEAST tree each branch\'s time x its clock rate)'));
             h = h.concat('</div>');
             h = h.concat('</div>');
             h = h.concat('</fieldset>');
@@ -16471,8 +16724,8 @@ function (root, d3, forester, phyloXml) {
             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')
-                    + ' and node-age bars (phylogram, rectangular layout only)'));
-                opts.push(makeCheckboxItem('Time Grid', TIME_GRID_CB, 'to show/hide vertical grid lines at the '
+                    + ' and node-age bars (phylogram; rectangular and circular layouts)'));
+                opts.push(makeCheckboxItem('Time Grid', TIME_GRID_CB, 'to show/hide grid lines (rings, in circular) at the '
                     + (_timeInfo.type === 'geologic' ? 'geologic interval boundaries' : 'calendar year ticks')));
             }
 
@@ -16491,7 +16744,7 @@ function (root, d3, forester, phyloXml) {
             // syncZoomRowButtons). The Y buttons span the whole row.
             let h = "";
             h = h.concat('<fieldset>');
-            h = h.concat('<legend>Zoom</legend>');
+            h = h.concat('<legend>View &amp; Tools</legend>');
             h = h.concat('<div class="aptx-zoomgrid">');
             h = h.concat(makeButton('Y+', ZOOM_IN_Y, 'zoom in vertically (or Shift+mousewheel)'));
             h = h.concat('<div class="aptx-zoomrow">');
@@ -16503,8 +16756,9 @@ function (root, d3, forester, phyloXml) {
             h = h.concat('</div>');
             h = h.concat(makeButton('Y-', ZOOM_OUT_Y, 'zoom out vertically (or Shift+mousewheel)'));
             h = h.concat('</div>');
-            // the tool buttons share the Zoom section rather than paying for
-            // a fieldset of their own
+            // the tool buttons share the section with the zoom row rather
+            // than paying for a fieldset of their own -- hence its name
+            // (Christian, 2026-09-30: "ZOOM" named only half of it)
             h = h.concat('<div class="aptx-toolrow">');
             h = h.concat(makeGlyphButton('ladderize_asc', LADDERIZE_BUTTON, 'ladderize all'));
             h = h.concat(makeGlyphButton('whole_tree', RETURN_TO_SUPERTREE_BUTTON, 'return all the way to the complete tree (if in a sub-tree)'));
@@ -16936,14 +17190,7 @@ function (root, d3, forester, phyloXml) {
             disableCheckbox('#' + PHYLOGRAM_BUTTON);
             disableCheckbox('#' + PHYLOGRAM_ALIGNED_BUTTON);
         }
-        setCheckboxValue(BRANCH_SCALE_TIME_BUTTON, _state.branchScale === 'time');
-        setCheckboxValue(BRANCH_SCALE_DIV_BUTTON, _state.branchScale !== 'time');
-        // most trees state only one thing, and a control offering a choice
-        // that does not exist is worse than no control
-        let scaleGroup = document.querySelector('.' + BRANCH_SCALE_CONTROLGROUP);
-        if (scaleGroup) {
-            scaleGroup.style.display = _branchScaleAvailable ? '' : 'none';
-        }
+        syncBranchScaleControls();
     }
 
 
@@ -17481,7 +17728,15 @@ function (root, d3, forester, phyloXml) {
             return _root;
         }
         let name = _root_const.name ? String(_root_const.name).trim() : '';
-        return Object.assign({}, _root, {name: name ? name + ' (subtree)' : undefined});
+        // what the phylogeny itself states goes with the part: without its
+        // branch_length_unit a subtree saved from Div opened again as time
+        let part = Object.assign({}, _root, {name: name ? name + ' (subtree)' : undefined});
+        ['rooted', 'rerootable', 'type', 'branch_length_unit'].forEach(function (k) {
+            if (_root_const[k] !== undefined && _root_const[k] !== null) {
+                part[k] = _root_const[k];
+            }
+        });
+        return part;
     }
 
     // "subtree, 19 of 50 tips" while a subtree is shown, else null: said in