archaeopteryx 3.17.0 → 3.19.0

package/archaeopteryx.js

@@ -20,7 +20,7 @@
  *
  */
 
-// v 3.17.0
+// v 3.19.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.19.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';
@@ -380,8 +380,8 @@ function (root, d3, forester, phyloXml) {
     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 SCALE_AXIS_CB = 'scaleaxis_cb';
+    const SCALE_GRID_CB = 'scalegrid_cb';
     const MSA_SCROLL_ID = 'aptxmsascroll';
     const FONT_SIZE_SLIDER = 'fs_sl';
     const EXTERNAL_LABEL_CB = 'extl_cb';
@@ -641,6 +641,7 @@ function (root, d3, forester, phyloXml) {
     // ------ 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
+    const DISTANCE_AXIS_RESERVE = 26;     // the distance ruler, one label row
     const TIME_BAND_ROW_H = 13;
     const HPD_BAR_COLOR = 'rgba(70,130,220,0.35)';    // translucent blue, the usual HPD tint
     const FOSSIL_BAR_COLOR = 'rgba(150,100,55,0.86)'; // opaque-ish sepia
@@ -5440,6 +5441,23 @@ function (root, d3, forester, phyloXml) {
                 return v === true ? 'confidence' : PARSE_DEFAULTS.internalNumericLabels;
             },
             note: 'use \'confidence\' for what this flag did (\'auto\' is the new default, and does not promote mixed trees)'
+        },
+        // Renamed in 3.19.0, when the axis stopped being time-only: a tree
+        // whose branches measure divergence gets a distance axis from the
+        // same switch. The meaning on a time tree is unchanged.
+        showTimeAxis: {
+            to: 'showScaleAxis',
+            map: function (v) {
+                return v;
+            },
+            note: 'the one switch now draws the time axis on a time tree and a distance axis on any other phylogram'
+        },
+        timeAxisGrid: {
+            to: 'showScaleGrid',
+            map: function (v) {
+                return v;
+            },
+            note: 'the grid follows the scale axis, time or distance'
         }
     };
 
@@ -5610,8 +5628,8 @@ function (root, d3, forester, phyloXml) {
         'domainLabels',
         'domainGlow',
         'domainEvalueExponent',
-        'showTimeAxis',
-        'timeAxisGrid',
+        'showScaleAxis',
+        'showScaleGrid',
         'showSupportDots',
         'searchAinitialValue',
         'searchBinitialValue',
@@ -5910,10 +5928,11 @@ function (root, d3, forester, phyloXml) {
                     + ' 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
-        // showTimeAxis explicitly.
+        // Likewise a dated tree draws its scale axis from the start -- a
+        // time axis of geologic ICS bands or calendar years, decided from the
+        // <date> elements by forester.timeAxisInfo -- again unless the caller
+        // set showScaleAxis explicitly. Any other tree opens without one, as
+        // on the desktop: its distance axis is asked for.
         _timeInfo = _treeData ? forester.timeAxisInfo(forester.getTreeRoot(_treeData)) : null;
         _timeTree = _treeData ? forester.isTimeTree(_treeData) : false;
         // Whether this tree says two different things -- when its nodes sit in
@@ -5922,10 +5941,13 @@ function (root, d3, forester, phyloXml) {
         // BEAST or Newick file arrives stating its own branch lengths.
         _branchScaleAvailable = _treeData ? forester.hasTimeAndDivergence(_treeData) : false;
         _state.branchScale = _treeData ? forester.branchLengthScale(_treeData) : 'divergence';
-        if (_state.showTimeAxis === undefined) {
-            _state.showTimeAxis = !!(_timeInfo && _timeInfo.type);
+        if (_state.showScaleAxis === undefined) {
+            // on for a tree SHOWN in time; a dated tree that opens in
+            // divergence (a build refused the switch) is a divergence tree
+            // on screen, and opens without its distance axis like any other
+            _state.showScaleAxis = !!(_timeInfo && _timeInfo.type) && !branchesShowDivergence();
         }
-        _state.timeAxisGrid = _state.timeAxisGrid === true; // desktop default: off
+        _state.showScaleGrid = _state.showScaleGrid === true; // desktop default: off
         _state.showSupportDots = _state.showSupportDots === true;
         _state.showNodeEvents = _basicTreeProperties.nodeEvents === true;
         _state.showBranchEvents = _basicTreeProperties.branchEvents === true;
@@ -6449,11 +6471,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 +7239,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();
@@ -9736,9 +9759,12 @@ function (root, d3, forester, phyloXml) {
             s.domainGlow = _state.domainGlow === true;
             s.domainEvalue = _state.domainEvalueExponent;
         }
-        if (_timeInfo && _timeInfo.type) {
-            s.timeAxis = _state.showTimeAxis === true;
-            s.timeGrid = _state.timeAxisGrid === true;
+        if (_basicTreeProperties.branchLengths === true) {
+            s.scaleAxis = _state.showScaleAxis === true;
+            s.scaleGrid = _state.showScaleGrid === true;
+        }
+        if (_branchScaleAvailable) {
+            s.scale = _state.branchScale;   // time or divergence: which layout the branches show
         }
         let a = searchStateOf(0);
         let b = searchStateOf(1);
@@ -9809,6 +9835,16 @@ function (root, d3, forester, phyloXml) {
                 }
             });
         }
+        // the branches' layout, time or divergence, on a tree that has both:
+        // laid out before the properties are measured, since the lengths are
+        // the layout. A tree with one layout ignores the key.
+        if (_branchScaleAvailable && (s.scale === 'time' || s.scale === 'divergence') && s.scale !== _state.branchScale) {
+            let laidOut = (s.scale === 'time') ? forester.applyTimeBranchLengths(_treeData)
+                : forester.applyDivergenceBranchLengths(_treeData);
+            if (laidOut) {
+                _state.branchScale = s.scale;
+            }
+        }
         _basicTreeProperties = forester.collectBasicTreeProperties(_root);
 
         if (s.layout === 'rectangular' || s.layout === 'circular' || s.layout === 'unrooted') {
@@ -9880,11 +9916,15 @@ function (root, d3, forester, phyloXml) {
                 _domain.palette = null;   // the drawn set changed: the palette is dealt again
             }
         }
-        if (typeof s.timeAxis === 'boolean') {
-            _state.showTimeAxis = s.timeAxis;
+        // timeAxis / timeGrid: the names before the axis also measured
+        // distance, still read so that older links keep their axis
+        let axis = typeof s.scaleAxis === 'boolean' ? s.scaleAxis : s.timeAxis;
+        if (typeof axis === 'boolean') {
+            _state.showScaleAxis = axis;
         }
-        if (typeof s.timeGrid === 'boolean') {
-            _state.timeAxisGrid = s.timeGrid;
+        let grid = typeof s.scaleGrid === 'boolean' ? s.scaleGrid : s.timeGrid;
+        if (typeof grid === 'boolean') {
+            _state.showScaleGrid = grid;
         }
         if (!radialDisplay()) {
             _radialLabelsHorizontal = false;
@@ -9951,6 +9991,7 @@ function (root, d3, forester, phyloXml) {
     function syncViewControls() {
         setDisplayTypeButtons();
         syncZoomRowButtons();
+        syncBranchScaleControls();
         VIEW_SHOW_FLAGS.forEach(function (f) {
             setCheckboxValue(f[1], _state[f[2]] === true);
         });
@@ -9963,8 +10004,8 @@ function (root, d3, forester, phyloXml) {
         setCheckboxValue(MSA_LOGO_CB, _state.showMsaLogo === true);
         setCheckboxValue(HEATMAP_CB, _state.showHeatmap === true);
         syncHeatmapControls();
-        setCheckboxValue(TIME_AXIS_CB, _state.showTimeAxis === true);
-        setCheckboxValue(TIME_GRID_CB, _state.timeAxisGrid === true);
+        setCheckboxValue(SCALE_AXIS_CB, _state.showScaleAxis === true);
+        setCheckboxValue(SCALE_GRID_CB, _state.showScaleGrid === true);
         setCheckboxValue(DOMAIN_GLOW_CB, _state.domainGlow === true);
         setValue(DOMAIN_LABELS_SELECT, _state.domainLabels);
         syncDomainControls();
@@ -10040,11 +10081,11 @@ function (root, d3, forester, phyloXml) {
     // The heat map's four keys and the alignment logo went in exactly that
     // way, while the README promised a link reproduced the figure.
     const VIEW_TEXT_KEYS = ['layout', 'display', 'order', 'root', 'colorBy', 'shapeBy', 'domainLabels', 'combine',
-        'heatmapOrder'];
+        'heatmapOrder', 'scale'];
     const VIEW_INT_KEYS = ['tree', 'subtree', 'rotation', 'domainEvalue'];
     const VIEW_NUMBER_KEYS = ['font', 'node', 'branch'];
     const VIEW_BOOL_KEYS = ['horizontalLabels', 'msa', 'msaLogo', 'heatmap', 'domains', 'domainGlow',
-        'timeAxis', 'timeGrid', 'matchCase', 'inverse'];
+        'scaleAxis', 'scaleGrid', 'timeAxis', 'timeGrid', 'matchCase', 'inverse'];
     // Lists of strings, comma-joined. A property ref carries ':' but never a
     // comma, and encodeViewValue leaves both readable in a hash.
     const VIEW_LIST_KEYS = ['heatmapManual'];
@@ -10211,7 +10252,7 @@ function (root, d3, forester, phyloXml) {
         {key: 'e', label: 'E', shift: true, what: 'Expand vertically until the labels fit', run: function () { zoomToExpandY(); }},
         {key: 'l', label: 'L', shift: true, what: 'Next layout: rectangular, circular, unrooted', run: cycleLayout},
         {key: 'd', label: 'D', shift: true, what: 'Next display type: phylogram, aligned, cladogram', run: cycleDisplayType},
-        {key: 'x', label: 'X', shift: true, what: 'Time / divergence scale, or the time axis', run: toggleTimeAxis},
+        {key: 'x', label: 'X', shift: true, what: 'Time / divergence scale, or the scale axis', run: toggleScaleAxis},
         {key: 'o', label: 'O', shift: true, what: 'Ladderize (order the tree)', run: function () { ladderizeButtonPressed(); }},
         {key: 'u', label: 'U', shift: true, what: 'Uncollapse every clade', run: function () { uncollapseAll(); }},
         {key: 'f', label: 'F', what: 'Go to the search box', run: focusSearch, typing: true},
@@ -10286,10 +10327,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,31 +10347,71 @@ 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');
     }
 
     // Shift+X. The switch takes this key over where the tree offers it, as was
-    // always intended; on every other tree it still works the Time Axis
+    // always intended; on every other tree it works the Scale Axis
     // checkbox, so the key never does nothing.
-    function toggleTimeAxis() {
+    function toggleScaleAxis() {
         if (_branchScaleAvailable) {
             setBranchScale(_state.branchScale === 'time' ? 'divergence' : 'time');
             return;
         }
-        let cb = byId(TIME_AXIS_CB);
+        let cb = byId(SCALE_AXIS_CB);
         if (!cb || cb.disabled) {
             return;
         }
         cb.checked = !cb.checked;
-        timeAxisCbClicked();
+        scaleAxisCbClicked();
     }
 
     function focusSearch() {
@@ -11523,25 +11606,55 @@ 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.
 
-    function timeAxisShown() {
-        return _state.showTimeAxis === true && !radialDisplay()
+    // 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';
+    }
+
+    // The Scale Axis switch, as on the desktop: an axis under a rectangular
+    // or circular phylogram. What it measures is the tree's to say -- time
+    // on a time tree whose branches show time, distance from the root on
+    // every other -- so flipping Time | Div changes what the axis reads,
+    // never whether there is one.
+    function scaleAxisShown() {
+        return _state.showScaleAxis === 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');
+            && _basicTreeProperties.branchLengths === true;
     }
 
-    function timeAxisBottomReserve() {
-        if (!timeAxisShown()) {
+    function distanceAxisShown() {
+        return scaleAxisShown() && !timeAxisShown();
+    }
+
+    function timeAxisShown() {
+        return scaleAxisShown()
+            && _timeInfo !== null && _timeInfo.type !== null
+            // The axis is an overlay calibrated to the tree's own branch scale,
+            // 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 scaleAxisBottomReserve() {
+        // circular draws its ruler in the tree's own gap, not under it
+        if (!scaleAxisShown() || _state.circularDisplay) {
             return 0;
         }
+        if (!timeAxisShown()) {
+            return DISTANCE_AXIS_RESERVE;
+        }
         return _timeInfo.type === 'geologic' ? TIME_GEO_RESERVE : TIME_CAL_RESERVE;
     }
 
@@ -11553,7 +11666,7 @@ function (root, d3, forester, phyloXml) {
         // own bottom rows (conservation, consensus, ruler) must end above it
         // or the bar covers them -- the old bare slider did exactly that.
         // The scale bar sits in the same band, under the tree's last row.
-        return Math.max(msaShown() ? msaBottomReserve() + MSA_NAV_RESERVE : 0, timeAxisBottomReserve(),
+        return Math.max(msaShown() ? msaBottomReserve() + MSA_NAV_RESERVE : 0, scaleAxisBottomReserve(),
             heatmapBottomReserve(),
             scaleBarShown() && !radialDisplay() ? SCALE_BAR_RESERVE : 0);
     }
@@ -11563,14 +11676,15 @@ function (root, d3, forester, phyloXml) {
     // round number of branch-length units (forester.scaleBarLength) with
     // end ticks and its length written above, drawn in the tree's own
     // coordinates so it zooms and exports with the tree and its label stays
-    // true. Not in a cladogram (nothing to measure) and not under a time
-    // axis (which is a scale already); in the radial layouts it sits below
-    // the fan at its left edge.
+    // true. Not in a cladogram (nothing to measure) and not under the scale
+    // axis (which says the same, and more); in the radial layouts it sits
+    // below the fan at its left edge. The desktop keeps its bar beside its
+    // axis; ours gives way (Christian, 2026-09-30).
     const SCALE_BAR_TARGET_PX = 100;
     const SCALE_BAR_RESERVE = 30;
 
     function scaleBarShown() {
-        return _state.phylogram === true && _basicTreeProperties.branchLengths === true && !timeAxisShown();
+        return _state.phylogram === true && _basicTreeProperties.branchLengths === true && !scaleAxisShown();
     }
 
     // pixels per branch-length unit in the current layout's own coordinates
@@ -11646,6 +11760,15 @@ function (root, d3, forester, phyloXml) {
             delete _floatStrips['aptx-time-axis'];
         }
         _svgGroup.selectAll('g.aptx-timegrid').remove();
+        _svgGroup.selectAll('g.aptx-distance, g.aptx-distance-grid').remove();
+        if (_floatGroup) {
+            _floatGroup.selectAll('g.aptx-distance-axis').remove();
+            delete _floatStrips['aptx-distance-axis'];
+        }
+        if (distanceAxisShown()) {
+            drawDistanceAxis();
+            return;
+        }
         if (!timeAxisShown() || !_root || !_yScale) {
             return;
         }
@@ -11687,7 +11810,7 @@ function (root, d3, forester, phyloXml) {
         // BEHIND the tree (inserted first in the group) at the fine geologic
         // boundaries / calendar year ticks; each axis branch below fills it
         let grid = null;
-        if (_state.timeAxisGrid) {
+        if (_state.showScaleGrid) {
             grid = _svgGroup.insert('g', 'g').attr('class', 'aptx-timegrid')
                 .style('pointer-events', 'none');
         }
@@ -11699,6 +11822,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 +11884,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,39 +11905,35 @@ 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);
+        // the viewer's sans-serif: an SVG text inherits the browser's serif
+        let ax = floatStripGroup('aptx-time-axis', axisTop - 4, scaleAxisBottomReserve() + 4)
+            .style('font-family', FONT_DEFAULTS);
         function axisBackdrop(x0, x1) {
             // opaque, in the background colour, so tips panned under the
             // strip do not show through between the bands and the ruler
             let left = Math.min(x0, x1);
             ax.append('rect').attr('x', left - 2).attr('y', axisTop - 4)
-                .attr('width', Math.abs(x1 - x0) + 4).attr('height', timeAxisBottomReserve() + 4)
+                .attr('width', Math.abs(x1 - x0) + 4).attr('height', scaleAxisBottomReserve() + 4)
                 .attr('fill', _state.backgroundColorDefault);
-            ax.append('line').attr('x1', left - 2).attr('x2', left - 2 + Math.abs(x1 - x0) + 4)
-                .attr('y1', axisTop - 4).attr('y2', axisTop - 4)
-                .attr('stroke', ink).attr('stroke-opacity', 0.25).attr('stroke-width', 1);
         }
         if (info.type === 'geologic') {
             let rootAge = info.rootAge;
@@ -11911,13 +12078,269 @@ function (root, d3, forester, phyloXml) {
         placeFloatingOverlays();
     }
 
-    function timeAxisCbClicked() {
-        _state.showTimeAxis = getCheckboxValue(TIME_AXIS_CB);
+    // 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 = [];
+        let unit = null;   // written once past the tip end
+        if (info.type === 'distance') {
+            // not a date: a distance from the displayed root, 0 at its centre
+            depthOf = function (v) {
+                return info.rootDepth + (v * corr);
+            };
+            from = 0;
+            to = info.maxDist;
+            ticks = info.ticks.map(function (v) {
+                return {value: v, text: String(v)};
+            });
+            unit = info.unit;
+        } else 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);
+            unit = 'Ma';
+        } 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').style('font-family', FONT_DEFAULTS);
+        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 (unit) {
+            // along the ruler past its end, so a long unit reads outward
+            label(r1 + 8 + (unit.length * 2.8), 0, unit, ink, false);
+        }
+        if (info.type === 'geologic') {
+            named.forEach(function (n) {
+                if ((n.text.length * 5.5) + 4 <= n.span) {
+                    label(n.r, -side * 11, n.text, ink, true);
+                }
+            });
+        }
+    }
+
+    // The distance axis, the desktop's "Scale Axis": a ruler from 0 at the
+    // displayed root out to the deepest tip, in branch-length units, with
+    // round ticks and the tree's unit at its end; "Scale Grid" draws each
+    // tick as a faint line (a ring, in circular) behind the tree. Measured
+    // per draw, so a subtree view's axis starts at ITS root.
+    function drawDistanceAxis() {
+        if (!_root || !_yScale) {
+            return;
+        }
+        let corr = Math.abs(_yScale(1) - _yScale(0));
+        if (!isFinite(corr) || corr <= 0) {
+            return;
+        }
+        let rootDepth = (topNode() || _root).y;
+        let maxTipX = rootDepth;
+        forEachDisplayed(function (n) {
+            if (!n.children && n.y > maxTipX) {
+                maxTipX = n.y;
+            }
+        });
+        let maxDist = (maxTipX - rootDepth) / corr;
+        let ticks = forester.distanceAxisTickValues(maxDist);
+        if (ticks.length === 0) {
+            return;
+        }
+        let unit = _treeData && typeof _treeData.branch_length_unit === 'string'
+            ? _treeData.branch_length_unit.trim() : '';
+        let ink = _state.branchColorDefault;
+        let grid = null;
+        if (_state.showScaleGrid) {
+            grid = _svgGroup.insert('g', 'g').attr('class', 'aptx-distance-grid')
+                .style('pointer-events', 'none');
+        }
+        if (_state.circularDisplay) {
+            let g = _svgGroup.append('g').attr('class', 'aptx-distance').style('pointer-events', 'none');
+            drawCircularTimeRuler({type: 'distance', rootDepth: rootDepth, maxDist: maxDist, ticks: ticks,
+                unit: unit || null}, null, maxTipX, corr, g, grid, ink);
+            return;
+        }
+        let xOf = function (v) {
+            return rootDepth + (v * corr);
+        };
+        let axisTop = _clusterH + 6;
+        if (grid) {
+            // the root and tip ends excluded: they would retrace the tree
+            ticks.forEach(function (v) {
+                if (v > 0 && v < maxDist - 1e-9) {
+                    grid.append('line').attr('x1', xOf(v)).attr('x2', xOf(v))
+                        .attr('y1', 0).attr('y2', axisTop)
+                        .attr('stroke', ink).attr('stroke-opacity', 0.18)
+                        .attr('stroke-width', 1);
+                }
+            });
+        }
+        let reserve = scaleAxisBottomReserve();
+        let ax = floatStripGroup('aptx-distance-axis', axisTop - 4, reserve + 4)
+            .style('font-family', FONT_DEFAULTS);
+        let x0 = xOf(0);
+        let x1 = xOf(maxDist);
+        // opaque, as the time axis's, so tips panned under it do not show
+        ax.append('rect').attr('x', x0 - 2).attr('y', axisTop - 4)
+            .attr('width', (x1 - x0) + 4).attr('height', reserve + 4)
+            .attr('fill', _state.backgroundColorDefault);
+        let rulerY = axisTop + 4;
+        ax.append('line').attr('x1', x0).attr('x2', x1)
+            .attr('y1', rulerY).attr('y2', rulerY)
+            .attr('stroke', ink).attr('stroke-width', 1);
+        // every tick drawn, its number only where it clears the last one
+        let lastRight = -Infinity;
+        ticks.forEach(function (v) {
+            let x = xOf(v);
+            ax.append('line').attr('x1', x).attr('x2', x)
+                .attr('y1', rulerY).attr('y2', rulerY + 4)
+                .attr('stroke', ink).attr('stroke-width', 1);
+            let text = String(v);
+            let half = text.length * 2.8;
+            if ((x - half) >= lastRight + 4) {
+                ax.append('text').attr('x', x).attr('y', rulerY + 14)
+                    .attr('text-anchor', 'middle')
+                    .style('font-size', '9px').style('fill', ink)
+                    .text(text);
+                lastRight = x + half;
+            }
+        });
+        if (unit) {
+            // past the ruler's end, and past the last number, which is
+            // centred on that end
+            ax.append('text').attr('x', Math.max(x1 + 8, lastRight + 6)).attr('y', rulerY + 14)
+                .attr('text-anchor', 'start')
+                .style('font-size', '9px').style('fill', ink)
+                .text(unit);
+        }
+        placeFloatingOverlays();
+    }
+
+    function scaleAxisCbClicked() {
+        _state.showScaleAxis = getCheckboxValue(SCALE_AXIS_CB);
         scheduleUpdate(null, 0);
     }
 
-    function timeGridCbClicked() {
-        _state.timeAxisGrid = getCheckboxValue(TIME_GRID_CB);
+    function scaleGridCbClicked() {
+        _state.showScaleGrid = getCheckboxValue(SCALE_GRID_CB);
         scheduleUpdate(null, 0);
     }
 
@@ -13065,14 +13488,17 @@ function (root, d3, forester, phyloXml) {
             heatCb.disabled = _state.unrootedDisplay === true;
         }
         syncHeatmapControls();
-        let timeCb = byId(TIME_AXIS_CB);
-        if (timeCb) {
-            timeCb.disabled = radialDisplay();
-        }
-        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;
+        let axisCb = byId(SCALE_AXIS_CB);
+        if (axisCb) {
+            // circular draws it along the gap; unrooted cannot, and a
+            // cladogram has nothing to measure
+            axisCb.disabled = _state.unrootedDisplay === true || _state.phylogram !== true;
+        }
+        let gridCb = byId(SCALE_GRID_CB);
+        if (gridCb) {
+            // grid lines hang off the scale axis: no axis, nothing to grid
+            gridCb.disabled = _state.unrootedDisplay === true || _state.phylogram !== true
+                || _state.showScaleAxis !== true;
         }
         let minus = byId(ZOOM_OUT_X);
         let plus = byId(ZOOM_IN_X);
@@ -13743,7 +14169,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 +14184,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:
@@ -15922,8 +16353,8 @@ function (root, d3, forester, phyloXml) {
         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);
+        on(SCALE_AXIS_CB, 'click', scaleAxisCbClicked);
+        on(SCALE_GRID_CB, 'click', scaleGridCbClicked);
 
         on(LAYOUT_RECT_BUTTON, 'click', layoutButtonClicked);
         on(BRANCH_SCALE_TIME_BUTTON, 'click', branchScaleButtonClicked);
@@ -16362,14 +16793,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>');
@@ -16468,12 +16899,16 @@ function (root, d3, forester, phyloXml) {
             if (heatmapAvailable()) {
                 opts.push(makeCheckboxItem('Heat Map', HEATMAP_CB, 'to show/hide a cell per tip and numeric field beside the tree, every column on one color scale; concentric rings in the circular layout (not in the unrooted one, where a column has no ring to be)'));
             }
-            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 '
-                    + (_timeInfo.type === 'geologic' ? 'geologic interval boundaries' : 'calendar year ticks')));
+            if (_basicTreeProperties.branchLengths === true) {
+                let timeAxis = _timeInfo && _timeInfo.type
+                    ? (_timeInfo.type === 'geologic' ? 'the geologic (ICS) time axis' : 'the calendar time axis')
+                    : null;
+                opts.push(makeCheckboxItem('Scale Axis', SCALE_AXIS_CB, 'to show/hide '
+                    + (timeAxis ? timeAxis + ' and node-age bars (a distance axis while the branches show divergence)'
+                        : 'a labeled distance axis from the root to the deepest tip')
+                    + ' (phylogram; rectangular and circular layouts)'));
+                opts.push(makeCheckboxItem('Scale Grid', SCALE_GRID_CB, 'to show/hide grid lines (rings, in circular) at the '
+                    + (timeAxis ? 'time axis\'s intervals or ticks' : 'scale axis ticks')));
             }
 
             let h = '<fieldset><legend>Display Data</legend>';
@@ -16491,7 +16926,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 +16938,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)'));
@@ -16838,8 +17274,8 @@ function (root, d3, forester, phyloXml) {
         setCheckboxValue(HEATMAP_CB, _state.showHeatmap);
         syncDomainControls();
         syncHeatmapControls();
-        setCheckboxValue(TIME_AXIS_CB, _state.showTimeAxis);
-        setCheckboxValue(TIME_GRID_CB, _state.timeAxisGrid);
+        setCheckboxValue(SCALE_AXIS_CB, _state.showScaleAxis);
+        setCheckboxValue(SCALE_GRID_CB, _state.showScaleGrid);
         setCheckboxValue(SHORTEN_NODE_NAME_CB, _state.shortenNodeNames);
         populateVisualizationMenus();
         initializeSearchOptions();
@@ -16936,14 +17372,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 +17910,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