archaeopteryx 3.18.0 → 3.20.0

package/archaeopteryx.js

@@ -20,7 +20,7 @@
  *
  */
 
-// v 3.18.0
+// v 3.20.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.18.0';
+    const VERSION = '3.20.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';
@@ -456,6 +456,9 @@ function (root, d3, forester, phyloXml) {
     const SEARCH_COMBINE_SELECT = 'scmb';
     const SEARCH_COMBINE_ROW = 'scmb_row';
     const SEQUENCE_CB = 'seq_cb';
+    const PROPERTIES_CB = 'props_cb';
+    const LABEL_FIELDS_BUTTON = 'label_fields_b';
+    const LABEL_FIELDS_DIALOG = 'label_fields_dialog';
     const SHORTEN_NODE_NAME_CB = 'shortennodename_cb';
     const TAXONOMY_CB = 'tax_cb';
     const ZOOM_IN_X = 'zoomin_x';
@@ -630,17 +633,31 @@ function (root, d3, forester, phyloXml) {
     // within 1.2px of a ring boundary came out background-coloured.
     const HEATMAP_RING_BLEED = 1.2;
     const HEATMAP_BLANK = 'blank';        // the run-merger's stand-in for a cell nobody filled in
+    // Cell borders (Christian, 2026-09-30): each cell outlined in its own hue,
+    // darker, so a block of equal values still reads as a block while each
+    // cell can be counted. Only where a cell is big enough on SCREEN to carry
+    // one, and not on a matrix so large that a node per cell would drag.
+    const HEATMAP_BORDER_MIN_PX = 5;      // the cell's smaller side on screen
+    const HEATMAP_BORDER_MAX_CELLS = 60000;
+    const HEATMAP_BORDER_W = 0.75;        // screen px at any zoom (non-scaling stroke)
+    const HEATMAP_BORDER_DARKEN = 0.8;    // d3's darker(k): each step x0.7
+    const HEATMAP_SEAL_W = 0.6;           // a merged run's stroke in its own colour, over the seams
     const HEATMAP_DENDRO_GAP = 5;         // px between the dendrogram's leaves and the first row
     const HEATMAP_DENDRO_MIN_BAND = 24;   // the band it is drawn in, from the label font
     const HEATMAP_DENDRO_MAX_BAND = 72;
     let _heatmapReserve = 0;              // horizontal px reserved for the matrix, set with _w
     let _heatmapModel = null;             // forester.heatmapColumns of the WHOLE tree, cached per launch
+    let _heatmapCells = null;             // what was drawn: {cellMin (tree units), count, bordered}
+    let _heatmapBorderTimer = null;
+    let _figureMatrix = null;             // the MATRIX refs the file's aptx:figure names, when it draws a matrix
+    let _labelFields = null;              // forester.labelPropertyRefs of the tree, cached until an edit
     let _heatmapColor = null;             // the one scale every column is painted on
     let _heatmapColOffset = 0;            // first shown column, while the matrix is windowed
     let _heatmapGeom = null;              // the last draw's geometry, for the hover readout
     // ------ 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
@@ -1330,6 +1347,7 @@ function (root, d3, forester, phyloXml) {
         _svgGroup.attr('transform', event.transform);
         placeFloatingOverlays();
         updateOverviewViewport();
+        heatmapBordersFollowZoom();
     }
 
     // A strip in the floating layer. Drawn in TREE coordinates like everything
@@ -3390,7 +3408,7 @@ function (root, d3, forester, phyloXml) {
         _svgGroup.selectAll('g.aptx-align-ext').remove();
         let alignedRect = !radialDisplay() && _state.phylogram && _state.alignPhylogram;
         let tipGuides = alignedRect && _state.showExternalLabels
-            && (_state.showNodeName || _state.showTaxonomy || _state.showSequence);
+            && (_state.showNodeName || _state.showTaxonomy || _state.showSequence || _state.showProperties);
         // a collapsed clade's label always shows, so its guide does too: from
         // past the wedge's farthest tip to the label column
         let collapsedGuides = alignedRect ? nodes.filter(function (d) {
@@ -4660,6 +4678,10 @@ function (root, d3, forester, phyloXml) {
         }
 
 
+        if (_state.showProperties && phynode.properties) {
+            l = append(l, labelPropertiesOf(phynode));
+        }
+
         if (_nodeLabels && phynode.properties) {
             const props_length = phynode.properties.length;
             if (props_length > 0) {
@@ -5440,6 +5462,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'
         }
     };
 
@@ -5603,6 +5642,8 @@ function (root, d3, forester, phyloXml) {
         'layout',
         'showMsa',
         'showMsaLogo',
+        'showProperties',
+        'labelProperties',
         'showHeatmap',
         'heatmapColumnOrder',
         'heatmapManualOrder',
@@ -5610,8 +5651,8 @@ function (root, d3, forester, phyloXml) {
         'domainLabels',
         'domainGlow',
         'domainEvalueExponent',
-        'showTimeAxis',
-        'timeAxisGrid',
+        'showScaleAxis',
+        'showScaleGrid',
         'showSupportDots',
         'searchAinitialValue',
         'searchBinitialValue',
@@ -5842,8 +5883,18 @@ function (root, d3, forester, phyloXml) {
         // numeric per-tip fields, which is common enough that turning it on
         // by itself would be an opinion about the tree rather than a service
         // -- the alignment track, by contrast, is on when there IS one.
+        // The desktop's figure setting: its MATRIX columns open as the heat
+        // map, only those, in the file's order. Only the phylogeny's own
+        // aptx:figure counts; a copy on a clade (the old place) is dropped,
+        // so a tree saved from here carries none. Here and not in launchInto:
+        // telling whether the columns exist is a scan of every tip, which on
+        // a big tree belongs behind the working card, not in front of it.
+        if (_treeData) {
+            forester.dropCladeFigures(_treeData);
+        }
+        _figureMatrix = _treeData ? figureMatrixOf(_treeData) : null;
         if (_state.showHeatmap === undefined) {
-            _state.showHeatmap = false;
+            _state.showHeatmap = _figureMatrix !== null;
         }
         // The logo is a summary of the alignment, not a second view of the
         // tree, so it waits to be asked for: an alignment opens showing its
@@ -5858,7 +5909,7 @@ function (root, d3, forester, phyloXml) {
         // value always wins and is never re-derived -- including 'document',
         // which keeps the order the producer wrote the fields in.
         if (_state.heatmapColumnOrder === undefined) {
-            _state.heatmapColumnOrder = null;
+            _state.heatmapColumnOrder = _figureMatrix ? 'manual' : null;
         } else if (_state.heatmapColumnOrder !== null
             && forester.HEATMAP_ORDER_MODES.indexOf(_state.heatmapColumnOrder) < 0) {
             throw new Error(ERROR + '"heatmapColumnOrder" must be one of '
@@ -5869,7 +5920,7 @@ function (root, d3, forester, phyloXml) {
         // not got is ignored rather than fatal -- an order outliving one of
         // its columns is ordinary (see forester.heatmapManualOrder).
         if (_state.heatmapManualOrder === undefined) {
-            _state.heatmapManualOrder = null;
+            _state.heatmapManualOrder = _figureMatrix ? _figureMatrix.slice() : null;
         } else if (_state.heatmapManualOrder !== null
             && !(Array.isArray(_state.heatmapManualOrder)
                 && _state.heatmapManualOrder.every(function (r) {
@@ -5910,10 +5961,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 +5974,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;
@@ -6038,6 +6093,27 @@ function (root, d3, forester, phyloXml) {
                 + ' characters)');
         }
 
+        // Properties in the tip label: off unless asked for, as on the desktop,
+        // in every user-visible property's own order unless a list says which.
+        // The file's figure setting (aptx:figure) can say both, and whether
+        // the names show: labelprops, show.SHOW_PROPERTIES and
+        // show.SHOW_NODE_NAMES, the desktop's own keys. The config wins.
+        let figure = _treeData ? forester.readFigure(_treeData) : null;
+        if (_state.showProperties === undefined) {
+            _state.showProperties = !!(figure && figure.show.SHOW_PROPERTIES === true);
+        }
+        if (_state.labelProperties === undefined) {
+            _state.labelProperties = (figure && figure.labelProps) ? figure.labelProps.slice() : null;
+        } else if (_state.labelProperties !== null && !(Array.isArray(_state.labelProperties)
+            && _state.labelProperties.every(function (r) {
+                return typeof r === 'string';
+            }))) {
+            throw new Error(ERROR + '"labelProperties" must be an array of property refs');
+        }
+        if (figure && typeof figure.show.SHOW_NODE_NAMES === 'boolean' && _basicTreeProperties.nodeNames) {
+            _state.showNodeName = figure.show.SHOW_NODE_NAMES;
+        }
+
         // A small tree is drawn with a heavier stroke; hairlines are for trees
         // dense enough to need them.
         _state.branchWidthDefault = _basicTreeProperties.externalNodesCount <= SMALL_TREE_MAX_EXT_NODES
@@ -6496,6 +6572,8 @@ function (root, d3, forester, phyloXml) {
         _treeData = phylo;
         _trees = trees;
         _treeIndex = index;
+        _figureMatrix = null;   // read by initializeState, behind the working card
+        _labelFields = null;
         _launchConfig = config;
         _container = containerEl;
         assignViewIds(phylo);
@@ -7253,6 +7331,7 @@ function (root, d3, forester, phyloXml) {
             _domain.palette = null;   // the tree changed: the domain names are dealt their colours again
         }
         if (edited) {
+            _labelFields = null;      // the fields the labels can show, too
             _heatmapModel = null;     // ... and the heat map's columns and scale are derived from it again
             _heatmapColor = null;
         }
@@ -8170,11 +8249,28 @@ function (root, d3, forester, phyloXml) {
 
     function heatmapModel() {
         if (!_heatmapModel && _treeData) {
-            _heatmapModel = forester.heatmapColumns(_treeData);
+            _heatmapModel = forester.heatmapColumns(_treeData, _figureMatrix);
         }
         return _heatmapModel;
     }
 
+    // The file's MATRIX columns, when at least a heat map's worth of them are
+    // numeric fields this tree has; otherwise null, and the heat map offers
+    // every numeric field as it would without a figure.
+    // The model it builds is kept as the heat map's own, so the scan runs once.
+    function figureMatrixOf(tree) {
+        let refs = forester.figureMatrixRefs(tree);
+        if (refs.length < HEATMAP_MIN_COLUMNS) {
+            return null;
+        }
+        let model = forester.heatmapColumns(tree, refs);
+        if (model.refs.length < HEATMAP_MIN_COLUMNS) {
+            return null;
+        }
+        _heatmapModel = model;
+        return refs;
+    }
+
     // Offered when the tree holds at least two numeric per-tip refs that
     // actually carry values: one column is a stripe rather than a matrix,
     // and a scale needs something to span.
@@ -8382,7 +8478,53 @@ function (root, d3, forester, phyloXml) {
         return heatmapTopReserve();
     }
 
+    // Whether cells of this size (tree units) and number are drawn one by one
+    // with borders at zoom scale k, or merged into runs.
+    function heatmapBordered(cellMin, count, k) {
+        return count <= HEATMAP_BORDER_MAX_CELLS && (cellMin * k) >= HEATMAP_BORDER_MIN_PX;
+    }
+
+    function heatmapBorderColor(fill) {
+        let c = d3.color(fill);
+        return c ? c.darker(HEATMAP_BORDER_DARKEN).formatHex() : fill;
+    }
+
+    // A cell (or a merged run) of colour `fill`: bordered, its edge a darker
+    // shade of itself; or sealed, stroked in its own colour so that no seam of
+    // background shows between two runs at a fractional zoom -- the faint lines
+    // that came and went with the zoom level. Both strokes are a constant
+    // screen width, so a zoom neither fattens nor loses them.
+    function paintHeatmapCell(el, fill, bordered) {
+        el.attr('fill', fill)
+            .attr('stroke', bordered ? heatmapBorderColor(fill) : fill)
+            .attr('stroke-width', bordered ? HEATMAP_BORDER_W : HEATMAP_SEAL_W)
+            .attr('vector-effect', 'non-scaling-stroke');
+        return el;
+    }
+
+    // Called on every zoom event: when the zoom has carried the cells across
+    // the border threshold, the heat map alone is drawn again once the zoom
+    // settles.
+    function heatmapBordersFollowZoom() {
+        if (!_heatmapCells || !_baseSvg) {
+            return;
+        }
+        let want = heatmapBordered(_heatmapCells.cellMin, _heatmapCells.count, currentZoomScale());
+        if (want === _heatmapCells.bordered) {
+            return;
+        }
+        if (_heatmapBorderTimer) {
+            clearTimeout(_heatmapBorderTimer);
+        }
+        _heatmapBorderTimer = setTimeout(function () {
+            _heatmapBorderTimer = null;
+            drawHeatmapTrack();
+            placeFloatingOverlays();
+        }, 120);
+    }
+
     function drawHeatmapTrack() {
+        _heatmapCells = null;
         if (!_svgGroup) {
             return;
         }
@@ -8465,6 +8607,9 @@ function (root, d3, forester, phyloXml) {
         // a run of CELLS, or its top and bottom edges read as a drawn rule
         // across the matrix rather than as missing data.
         let mergeBlanks = cw < HEATMAP_LABEL_MIN_COL_W;
+        let cellMin = Math.min(cw, n > 1 ? 2 * pad : cw);
+        let bordered = heatmapBordered(cellMin, n * visible, currentZoomScale());
+        _heatmapCells = {cellMin: cellMin, count: n * visible, bordered: bordered};
         for (let r = 0; r < n; ++r) {
             let d = tips[r];
             let cy = Math.round(bounds[r]);
@@ -8486,7 +8631,7 @@ function (root, d3, forester, phyloXml) {
                     rect.attr('fill', _state.backgroundColorDefault)
                         .attr('stroke', ink).attr('stroke-opacity', 0.45).attr('stroke-width', 1);
                 } else {
-                    rect.attr('fill', runFill);
+                    paintHeatmapCell(rect, runFill, bordered);
                 }
                 runStart = -1;
                 runFill = null;
@@ -8497,7 +8642,8 @@ function (root, d3, forester, phyloXml) {
                 if (fill === HEATMAP_BLANK) {
                     blanks++;
                 }
-                if (runFill === fill && (mergeBlanks || fill !== HEATMAP_BLANK)) {
+                // bordered, every cell is its own: a run would hide the cells in it
+                if (!bordered && runFill === fill && (mergeBlanks || fill !== HEATMAP_BLANK)) {
                     continue;   // the run extends
                 }
                 flush(i);
@@ -8807,6 +8953,10 @@ function (root, d3, forester, phyloXml) {
         edge[n] = ang[n - 1] + pad;
 
         let blanks = 0;
+        // a cell's smaller side: its ring width, or its arc at the ring's inside
+        let cellMin = Math.min(ringW, n > 1 ? 2 * pad * start : ringW);
+        let bordered = heatmapBordered(cellMin, n * columns.length, currentZoomScale());
+        _heatmapCells = {cellMin: cellMin, count: n * columns.length, bordered: bordered};
         for (let c = 0; c < columns.length; ++c) {
             let r0 = start + (c * ringW);
             let r1 = r0 + ringW;
@@ -8825,15 +8975,19 @@ function (root, d3, forester, phyloXml) {
                 // A BLANK is not bled -- it is background-coloured, so a seam
                 // beside it shows nothing, and bleeding it would push its
                 // outward OUTLINE under the next ring and cost it an edge.
-                let bleed = (runFill === HEATMAP_BLANK) ? 0 : HEATMAP_RING_BLEED;
+                // (bordered, the border covers the seam and a bleed would push
+                // one cell's edge under its neighbour)
+                let bleed = (runFill === HEATMAP_BLANK || bordered) ? 0 : HEATMAP_RING_BLEED;
                 let a1 = edge[endI] + (bleed / Math.max(1, r1));
                 let path = g.append('path')
                     .attr('d', heatmapSector(edge[runStart], a1, r0, r1 + bleed));
                 if (runFill === HEATMAP_BLANK) {
                     path.attr('fill', _state.backgroundColorDefault)
                         .attr('stroke', ink).attr('stroke-opacity', 0.45).attr('stroke-width', 1);
+                } else if (bordered) {
+                    paintHeatmapCell(path, runFill, true);
                 } else {
-                    path.attr('fill', runFill);
+                    path.attr('fill', runFill);   // the bleed already closes the seams here
                 }
                 runStart = -1;
                 runFill = null;
@@ -8844,7 +8998,7 @@ function (root, d3, forester, phyloXml) {
                 if (fill === HEATMAP_BLANK) {
                     blanks++;
                 }
-                if (runFill === fill && (ringW < HEATMAP_LABEL_MIN_COL_W || fill !== HEATMAP_BLANK)) {
+                if (!bordered && runFill === fill && (ringW < HEATMAP_LABEL_MIN_COL_W || fill !== HEATMAP_BLANK)) {
                     continue;
                 }
                 flush(i);
@@ -9605,6 +9759,7 @@ function (root, d3, forester, phyloXml) {
         ['name', NODE_NAME_CB, 'showNodeName'],
         ['taxonomy', TAXONOMY_CB, 'showTaxonomy'],
         ['sequence', SEQUENCE_CB, 'showSequence'],
+        ['properties', PROPERTIES_CB, 'showProperties'],
         ['confidence', CONFIDENCE_VALUES_CB, 'showConfidenceValues'],
         ['madValues', MAD_VALUES_CB, 'showMadValues'],
         ['branchLength', BRANCH_LENGTH_VALUES_CB, 'showBranchLengthValues'],
@@ -9727,6 +9882,9 @@ function (root, d3, forester, phyloXml) {
         if (heatmapAvailable()) {
             s.heatmap = _state.showHeatmap === true;
             s.heatmapOrder = heatmapMode();
+            if (_state.labelProperties) {
+                s.labelFields = _state.labelProperties.slice();
+            }
             if (_state.heatmapManualOrder) {
                 s.heatmapManual = _state.heatmapManualOrder.slice();
             }
@@ -9737,9 +9895,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);
@@ -9810,6 +9971,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') {
@@ -9857,6 +10028,11 @@ function (root, d3, forester, phyloXml) {
         if (typeof s.heatmap === 'boolean') {
             _state.showHeatmap = s.heatmap;
         }
+        if (Array.isArray(s.labelFields) && s.labelFields.every(function (r) {
+            return typeof r === 'string';
+        })) {
+            _state.labelProperties = s.labelFields.slice();
+        }
         if (Array.isArray(s.heatmapManual) && s.heatmapManual.every(function (r) {
             return typeof r === 'string';
         })) {
@@ -9881,11 +10057,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;
@@ -9952,6 +10132,7 @@ function (root, d3, forester, phyloXml) {
     function syncViewControls() {
         setDisplayTypeButtons();
         syncZoomRowButtons();
+        syncBranchScaleControls();
         VIEW_SHOW_FLAGS.forEach(function (f) {
             setCheckboxValue(f[1], _state[f[2]] === true);
         });
@@ -9964,8 +10145,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();
@@ -10041,14 +10222,14 @@ 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'];
+    const VIEW_LIST_KEYS = ['heatmapManual', 'labelFields'];
     const VIEW_SEARCH_KEYS = [['searchA', 'a'], ['searchB', 'b']];
 
     function encodeViewValue(v) {
@@ -10212,7 +10393,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},
@@ -10359,19 +10540,19 @@ function (root, d3, forester, phyloXml) {
     }
 
     // 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() {
@@ -11577,11 +11758,24 @@ function (root, d3, forester, phyloXml) {
             && _treeData.branch_length_unit.trim() === 'subs/site';
     }
 
-    function timeAxisShown() {
-        return _state.showTimeAxis === true && !_state.unrootedDisplay
+    // 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
+            && _basicTreeProperties.branchLengths === true;
+    }
+
+    function distanceAxisShown() {
+        return scaleAxisShown() && !timeAxisShown();
+    }
+
+    function timeAxisShown() {
+        return scaleAxisShown()
             && _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 --
             // calendar years against substitutions reads as a confident lie.
@@ -11594,11 +11788,14 @@ function (root, d3, forester, phyloXml) {
             && !branchesShowDivergence();
     }
 
-    function timeAxisBottomReserve() {
+    function scaleAxisBottomReserve() {
         // circular draws its ruler in the tree's own gap, not under it
-        if (!timeAxisShown() || _state.circularDisplay) {
+        if (!scaleAxisShown() || _state.circularDisplay) {
             return 0;
         }
+        if (!timeAxisShown()) {
+            return DISTANCE_AXIS_RESERVE;
+        }
         return _timeInfo.type === 'geologic' ? TIME_GEO_RESERVE : TIME_CAL_RESERVE;
     }
 
@@ -11610,7 +11807,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);
     }
@@ -11620,14 +11817,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
@@ -11703,6 +11901,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;
         }
@@ -11744,7 +11951,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');
         }
@@ -11858,17 +12065,16 @@ function (root, d3, forester, phyloXml) {
         }
 
         // ---- 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;
@@ -12024,7 +12230,19 @@ function (root, d3, forester, phyloXml) {
         let from;          // the root end and the tip end, as dates
         let to;
         let bands = [];
-        if (info.type === 'geologic') {
+        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;
@@ -12045,6 +12263,7 @@ function (root, d3, forester, phyloXml) {
                 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)) {
@@ -12107,7 +12326,7 @@ function (root, d3, forester, phyloXml) {
         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 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])
@@ -12148,8 +12367,11 @@ function (root, d3, forester, phyloXml) {
             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') {
-            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);
@@ -12158,13 +12380,108 @@ function (root, d3, forester, phyloXml) {
         }
     }
 
-    function timeAxisCbClicked() {
-        _state.showTimeAxis = getCheckboxValue(TIME_AXIS_CB);
+    // 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);
     }
 
@@ -13312,15 +13629,17 @@ function (root, d3, forester, phyloXml) {
             heatCb.disabled = _state.unrootedDisplay === true;
         }
         syncHeatmapControls();
-        let timeCb = byId(TIME_AXIS_CB);
-        if (timeCb) {
-            // 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 = _state.unrootedDisplay === true || _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);
@@ -13415,6 +13734,182 @@ function (root, d3, forester, phyloXml) {
         scheduleUpdate();
     }
 
+    // ===================== Properties in the label =====================
+    // The desktop's "Properties" option and its Annotation Fields chooser:
+    // a node's property values in its label, values only, " | "-joined, in
+    // the order chosen (forester.labelPropertiesText). Nothing chosen means
+    // every user-visible property in the node's own order, less the heat
+    // map's columns while it is shown -- a field has one display role.
+
+    function labelFields() {
+        if (_labelFields === null && _treeData) {
+            _labelFields = forester.labelPropertyRefs(_treeData);
+        }
+        return _labelFields || [];
+    }
+
+    // the heat map's columns while it is shown: left out of the default label
+    function labelFieldsExcluded() {
+        let excluded = Object.create(null);
+        if (heatmapShown()) {
+            let m = heatmapModel();
+            (m ? m.refs : []).forEach(function (c) {
+                excluded[c.ref] = true;
+            });
+        }
+        return excluded;
+    }
+
+    function labelPropertiesOf(node) {
+        return forester.labelPropertiesText(node, _state.labelProperties,
+            _state.labelProperties ? null : labelFieldsExcluded());
+    }
+
+    function propertiesCbClicked() {
+        _state.showProperties = getCheckboxValue(PROPERTIES_CB);
+        if (_state.showProperties) {
+            _state.showExternalLabels = true;
+            setCheckboxValue(EXTERNAL_LABEL_CB, true);
+        }
+        search0();
+        search1();
+        scheduleUpdate();
+    }
+
+    // Which properties the label shows, and in what order: each field ticked
+    // or not, and moved with the arrows (or the arrow keys). Apply keeps the ticked
+    // ones in the order shown; picking a field that was not shown turns the
+    // Properties label on, as the desktop does, since otherwise choosing it
+    // would visibly do nothing. "All" goes back to every field.
+    function showLabelFieldsDialog() {
+        let all = labelFields();
+        if (all.length < 1) {
+            return;
+        }
+        let chosen = _state.labelProperties ? _state.labelProperties.filter(function (r) {
+            return all.indexOf(r) >= 0;
+        }) : null;
+        // the chosen fields first, in their order, then the rest as offered;
+        // with none chosen, ticked is what the label shows by default
+        let excluded = chosen ? null : labelFieldsExcluded();
+        let working = (chosen || []).concat(all.filter(function (r) {
+            return !chosen || chosen.indexOf(r) < 0;
+        })).map(function (ref) {
+            return {ref: ref, on: chosen ? chosen.indexOf(ref) >= 0 : !excluded[ref]};
+        });
+        if (!chosen) {
+            // the ticked ones first, so the list reads as the label does
+            working = working.filter(function (w) {
+                return w.on;
+            }).concat(working.filter(function (w) {
+                return !w.on;
+            }));
+        }
+        let before = working.filter(function (w) {
+            return w.on && (chosen !== null || _state.showProperties);
+        }).map(function (w) {
+            return w.ref;
+        });
+        let shell = makeDialogShell(LABEL_FIELDS_DIALOG, 'Label fields', 340);
+        let body = shell.body;
+        repsElement(body, 'div', 'aptx-reps-lead',
+            'Tick the properties the labels show, and set their order with the arrows.');
+        let list = repsElement(body, 'div', 'aptx-reorder');
+
+        function move(from, to) {
+            if (to < 0 || to >= working.length || from === to) {
+                return false;
+            }
+            working.splice(to, 0, working.splice(from, 1)[0]);
+            draw();
+            return true;
+        }
+
+        function draw() {
+            list.textContent = '';
+            working.forEach(function (w, i) {
+                let row = repsElement(list, 'div', 'aptx-reorder-row');
+                row.tabIndex = 0;
+                let box = repsElement(row, 'input', 'aptx-reorder-check');
+                box.type = 'checkbox';
+                box.checked = w.on;
+                box.addEventListener('change', function () {
+                    w.on = box.checked;
+                });
+                repsElement(row, 'span', 'aptx-reorder-name', forester.propertyDisplayName(w.ref)).title = w.ref;
+                let up = repsElement(row, 'button', 'aptx-reorder-move', '↑');
+                let down = repsElement(row, 'button', 'aptx-reorder-move', '↓');
+                up.type = 'button';
+                down.type = 'button';
+                up.title = 'Move up';
+                down.title = 'Move down';
+                up.disabled = (i === 0);
+                down.disabled = (i === working.length - 1);
+                up.addEventListener('click', function () {
+                    if (move(i, i - 1)) {
+                        list.children[i - 1].focus();
+                    }
+                });
+                down.addEventListener('click', function () {
+                    if (move(i, i + 1)) {
+                        list.children[i + 1].focus();
+                    }
+                });
+                row.addEventListener('keydown', function (event) {
+                    if (event.key === ' ' && event.target === row) {
+                        event.preventDefault();
+                        box.checked = !box.checked;
+                        w.on = box.checked;
+                        return;
+                    }
+                    let d = (event.key === 'ArrowUp') ? -1 : ((event.key === 'ArrowDown') ? 1 : 0);
+                    if (d === 0) {
+                        return;
+                    }
+                    event.preventDefault();
+                    if (move(i, i + d)) {
+                        list.children[i + d].focus();
+                    }
+                });
+            });
+        }
+        draw();
+
+        let actions = repsElement(body, 'div', 'aptx-reps-actions');
+        repsButton(actions, 'All', false, function () {
+            _state.labelProperties = null;
+            shell.dialog.close();
+            scheduleUpdate();
+        });
+        repsButton(actions, 'Cancel', false, function () {
+            shell.dialog.close();
+        });
+        repsButton(actions, 'Apply', true, function () {
+            _state.labelProperties = working.filter(function (w) {
+                return w.on;
+            }).map(function (w) {
+                return w.ref;
+            });
+            let added = _state.labelProperties.some(function (r) {
+                return before.indexOf(r) < 0;
+            });
+            if (added && !_state.showProperties) {
+                _state.showProperties = true;
+                _state.showExternalLabels = true;
+                setCheckboxValue(PROPERTIES_CB, true);
+                setCheckboxValue(EXTERNAL_LABEL_CB, true);
+            }
+            shell.dialog.close();
+            search0();
+            search1();
+            scheduleUpdate();
+        });
+        shell.dialog.showModal();
+        if (list.firstChild) {
+            list.firstChild.focus();
+        }
+    }
+
     function sequenceCbClicked() {
         _state.showSequence = getCheckboxValue(SEQUENCE_CB);
         if (_state.showSequence) {
@@ -16126,6 +16621,8 @@ function (root, d3, forester, phyloXml) {
         on(TAXONOMY_CB, 'click', taxonomyCbClicked);
 
         on(SEQUENCE_CB, 'click', sequenceCbClicked);
+        on(PROPERTIES_CB, 'click', propertiesCbClicked);
+        on(LABEL_FIELDS_BUTTON, 'click', showLabelFieldsDialog);
 
         on(CONFIDENCE_VALUES_CB, 'click', confidenceValuesCbClicked);
         on(SUPPORT_DOTS_CB, 'click', supportDotsCbClicked);
@@ -16175,8 +16672,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);
@@ -16654,6 +17151,10 @@ function (root, d3, forester, phyloXml) {
             if (_basicTreeProperties.sequences) {
                 labels.push(makeCheckboxItem('Sequence', SEQUENCE_CB, 'to show/hide node sequence information'));
             }
+            if (labelFields().length > 0) {
+                labels.push(makeCheckboxItem('Properties', PROPERTIES_CB, 'to show/hide the nodes\' property values'
+                    + ' (Label fields… chooses which, and in what order)'));
+            }
             if (_nodeLabels) {
                 for (const [key, value] of Object.entries(_nodeLabels)) {
                     if (value.label && value.propertyRef && value.description) {
@@ -16721,16 +17222,26 @@ 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 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')));
+            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>';
             h = h.concat(makeCheckboxGroup('Labels', labels));
+            if (labelFields().length > 0) {
+                h = h.concat('<div class="aptx-domrow"><span class="aptx-domlabel"></span>'
+                    + '<input type="button" class="aptx-widebtn" value="Label fields…" name="' + LABEL_FIELDS_BUTTON
+                    + '" id="' + LABEL_FIELDS_BUTTON + '" title="choose which properties the labels show, and in what'
+                    + ' order"></div>');
+            }
             h = h.concat(makeCheckboxGroup('Nodes', nodes));
             h = h.concat(makeCheckboxGroup('Options', opts));
             h = h.concat('</fieldset>');
@@ -17055,6 +17566,7 @@ function (root, d3, forester, phyloXml) {
         setCheckboxValue(NODE_NAME_CB, _state.showNodeName);
         setCheckboxValue(TAXONOMY_CB, _state.showTaxonomy);
         setCheckboxValue(SEQUENCE_CB, _state.showSequence)
+        setCheckboxValue(PROPERTIES_CB, _state.showProperties);
         setCheckboxValue(CONFIDENCE_VALUES_CB, _state.showConfidenceValues);
         setCheckboxValue(SUPPORT_DOTS_CB, _state.showSupportDots);
         syncMadValuesCheckbox();
@@ -17092,8 +17604,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();
@@ -17729,9 +18241,11 @@ function (root, d3, forester, phyloXml) {
         }
         let name = _root_const.name ? String(_root_const.name).trim() : '';
         // what the phylogeny itself states goes with the part: without its
-        // branch_length_unit a subtree saved from Div opened again as time
+        // branch_length_unit a subtree saved from Div opened again as time,
+        // and without its properties (the figure setting) the part opened
+        // without the heat map the whole tree opens with
         let part = Object.assign({}, _root, {name: name ? name + ' (subtree)' : undefined});
-        ['rooted', 'rerootable', 'type', 'branch_length_unit'].forEach(function (k) {
+        ['rooted', 'rerootable', 'type', 'branch_length_unit', 'properties'].forEach(function (k) {
             if (_root_const[k] !== undefined && _root_const[k] !== null) {
                 part[k] = _root_const[k];
             }