archaeopteryx 3.21.0 → 3.23.0

package/archaeopteryx.js

@@ -20,7 +20,7 @@
  *
  */
 
-// v 3.21.0
+// v 3.23.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.21.0';
+    const VERSION = '3.23.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';
@@ -248,6 +248,7 @@ function (root, d3, forester, phyloXml) {
     const LEGEND_LABEL_COLOR = 'legendLabelColor';
     const LEGEND_NODE_SHAPE = 'legendNodeShape';
     const LEGEND_DOMAINS = 'legendDomains';
+    const LEGEND_GENES = 'legendGenes';
     const NH_EXPORT_FORMAT = 'Newick';
     const NEXUS_EXPORT_FORMAT = 'Nexus';
     const NODE_SIZE_MAX = 9;
@@ -380,6 +381,13 @@ 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 GENES_CB = 'genes_cb';
+    const GENE_CONTROLS = 'gene_controls';
+    const GENE_WIDTH_DEC = 'gene_width_dec';
+    const GENE_WIDTH_INC = 'gene_width_inc';
+    const GENE_ANCHOR_SELECT = 'gene_anchor';
+    const GENE_FAMILY_SELECT = 'gene_family';
+    const GENE_LABELS_SELECT = 'gene_labels';
     const SCALE_AXIS_CB = 'scaleaxis_cb';
     const SCALE_GRID_CB = 'scalegrid_cb';
     const MSA_SCROLL_ID = 'aptxmsascroll';
@@ -428,6 +436,8 @@ function (root, d3, forester, phyloXml) {
     const BRANCH_SCALE_CONTROLGROUP = 'branch_scale_g';
     const BRANCH_SCALE_TIME_BUTTON = 'branch_scale_time_b';
     const BRANCH_SCALE_DIV_BUTTON = 'branch_scale_div_b';
+    const CLOCK_PLOT_BUTTON = 'clock_plot_b';
+    const CLOCK_PLOT_DIALOG = 'aptx_clock_plot';
     const ABOUT_DIALOG = 'aptx_about';
     const TREE_PROPERTIES_DIALOG = 'aptx_tree_props';
     const PROG_NAME = 'progname';
@@ -605,6 +615,15 @@ function (root, d3, forester, phyloXml) {
     const DOMAIN_LABEL_MODES = ['none', 'domains', 'legend'];
     let _domain = null;                   // {width, palette, next, legendFrac}, set per launch
     let _domainReserve = 0;               // horizontal px reserved for the tracks, set with _w
+    // The gene track (genome regions) shares the domain track's widths, box
+    // heights, backbone colour and legend geometry: the two are the same
+    // kind of thing, a backbone with boxes beside each tip.
+    const GENE_LABEL_MODES = ['none', 'genes', 'legend'];
+    const GENE_KB_BAR_TARGET_PX = 80;     // the track's own scale bar aims at this length
+    const GENE_CAP_W = 1.5;               // px: the bar that marks a contig end
+    const GENE_LANE_MIN_H = 3;            // px: a lane of two is never thinner
+    let _gene = null;                     // {width, radialWidth, palette, legendFrac, cache}, set per launch
+    let _geneReserve = 0;                 // horizontal px reserved for the gene track, set with _w
     // ------ heat map (the desktop's MATRIX annotation columns) ------
     const HEATMAP_TRACK_GAP = 8;          // px between what is left of the tree and the matrix
     const HEATMAP_PREF_COL_W = 14;        // a column never grows past this
@@ -664,6 +683,7 @@ function (root, d3, forester, phyloXml) {
     let _timeInfo = null;                 // forester.timeAxisInfo, recomputed per render
     let _timeTree = false;                // forester.isTimeTree: never re-rooted
     let _branchScaleAvailable = false;    // the tree states time AND divergence, so the switch is offered
+    let _clockPlotKind = null;            // forester.clockPlotKind: which clock plot the tree has, if any
     let _clusterH = 0;                    // the cluster layout's vertical extent, set per render
     let _docListenersBound = false;       // page-level key/wheel handlers bind once, not per launch
     let _docListeners = [];               // ...and destroy() can take every one of them down again
@@ -1184,7 +1204,7 @@ function (root, d3, forester, phyloXml) {
         // the viewport: measured box=[0,13 1497x755] against
         // view=[-254,-10 1497x800] with rootOffset=254, so "does it fit" said
         // no by precisely 254px and the overview appeared after every Fit.
-        maxX += calcMaxTreeLengthForDisplay() - _settings.rootOffset + _domainReserve;
+        maxX += calcMaxTreeLengthForDisplay() - _settings.rootOffset + _domainReserve + _geneReserve;
         minY -= heatmapTopReserve();   // the dendrogram band stands above the first row
         if (scaleBarShown()) {
             maxY += SCALE_BAR_RESERVE;   // the bar sits under the last row
@@ -1466,7 +1486,24 @@ function (root, d3, forester, phyloXml) {
         return hsvToHex({h: hsv.h, s: Math.max(hsv.s, HOVER_GLOW_SAT_FLOOR), v: Math.max(hsv.v, HOVER_GLOW_VAL_FLOOR)});
     }
 
-    function showHoverGlow(d) {
+    // The glow's three discs, in `g`, in the colour of node d.
+    function paintHoverGlow(g, d) {
+        let dia = Math.max(HOVER_GLOW_MIN_DIA, (_state.nodeSizeDefault || 0) * 3);
+        let fill = hoverGlowColor(d);
+        HOVER_GLOW_RADII.forEach(function (radius, i) {
+            g.append('circle')
+                .attr('fill-opacity', HOVER_GLOW_ALPHAS[i])
+                .attr('stroke', 'none')
+                .attr('fill', fill)
+                .attr('r', (dia * radius) / 2);
+        });
+    }
+
+    // Lights node d. `also` lights more nodes with it: one point of the clock
+    // plot can stand for several tips. They are drawn INSIDE the one glow
+    // group, placed from d, so whatever hides, moves or strips the glow
+    // (hideHoverGlow, an export) takes all of them.
+    function showHoverGlow(d, also) {
         if (!_svgGroup || !d || d.x === undefined) {
             return;
         }
@@ -1474,23 +1511,21 @@ function (root, d3, forester, phyloXml) {
         if (g.empty()) {
             g = _svgGroup.append('g').attr('class', 'aptx-hoverglow')
                 .style('pointer-events', 'none');
-            HOVER_GLOW_RADII.forEach(function (unused, i) {
-                g.append('circle')
-                    .attr('fill-opacity', HOVER_GLOW_ALPHAS[i])
-                    .attr('stroke', 'none');
-            });
         }
-        let dia = Math.max(HOVER_GLOW_MIN_DIA, (_state.nodeSizeDefault || 0) * 3);
+        g.selectAll('*').remove();
         let p = layoutPointXY(d);
-        let fill = hoverGlowColor(d);
         g.attr('transform', 'translate(' + p[0] + ',' + p[1] + ')')
             .style('display', null)
             .raise();
-        g.selectAll('circle')
-            .attr('fill', fill)
-            .attr('r', function (unused, i) {
-                return (dia * HOVER_GLOW_RADII[i]) / 2;
-            });
+        paintHoverGlow(g, d);
+        (also || []).forEach(function (n) {
+            if (!n || n === d || n.x === undefined) {
+                return;
+            }
+            let q = layoutPointXY(n);
+            paintHoverGlow(g.append('g').attr('class', 'aptx-hoverglow-also')
+                .attr('transform', 'translate(' + (q[0] - p[0]) + ',' + (q[1] - p[1]) + ')'), n);
+        });
     }
 
     function hideHoverGlow() {
@@ -1501,6 +1536,7 @@ function (root, d3, forester, phyloXml) {
 
     function mouseover(event, d) {
         showHoverGlow(d);
+        markClockPlot(d);
         // Start empty so the previous node's text cannot flash while this one
         // fades in; mousemove fills it in immediately after. Clearing here
         // rather than on the way out is what keeps the tooltip from collapsing
@@ -1814,6 +1850,7 @@ function (root, d3, forester, phyloXml) {
 
     function mouseout() {
         hideHoverGlow();
+        markClockPlot(null);
         // Fade only. Emptying the tooltip here collapsed it to nothing but its
         // padding and border -- a small rounded pill -- and THAT is what sat
         // there fading out afterwards. The content is cleared on the next
@@ -2900,8 +2937,10 @@ function (root, d3, forester, phyloXml) {
             // the alignment track reserves its window on the right, so the
             // tree and labels compress to make room rather than overlapping
             _msaReserve = 0;
-            // and the domain tracks reserve their column past the labels
+            // and the domain tracks reserve their column past the labels,
+            // the gene track its own past theirs
             _domainReserve = domainReserve();
+            _geneReserve = geneReserve();
             // The heat map is budgeted FIRST of the two right-hand tracks: it
             // wants a fixed, finite width (its columns at their preferred size
             // and no more), while the alignment's band is a WINDOW that scrolls
@@ -2913,7 +2952,7 @@ function (root, d3, forester, phyloXml) {
                 let vp0 = svgSize();
                 let vw0 = Math.min(_displayWidth, (vp0 && vp0.w) ? vp0.w : _displayWidth);
                 let hband = Math.max(HEATMAP_MIN_BAND_PX, Math.round(vw0 * HEATMAP_MAX_VIEWPORT_FRACTION));
-                let hmax = _displayWidth - calcMaxTreeLengthForDisplay() - _domainReserve
+                let hmax = _displayWidth - calcMaxTreeLengthForDisplay() - _domainReserve - _geneReserve
                     - HEATMAP_TRACK_GAP - HEATMAP_MIN_TREE_PX;
                 hband = Math.max(HEATMAP_MIN_BAND_PX, Math.min(hband, hmax));
                 _heatmapReserve = HEATMAP_TRACK_GAP + Math.min(cols * HEATMAP_PREF_COL_W, hband);
@@ -2928,12 +2967,13 @@ function (root, d3, forester, phyloXml) {
                 let band = Math.max(MSA_MIN_BAND_PX, Math.round(vw * MSA_MAX_VIEWPORT_FRACTION));
                 // a wide alignment must not squeeze the tree itself away: the
                 // band yields until the tree keeps its minimum share
-                let maxBand = _displayWidth - calcMaxTreeLengthForDisplay() - _domainReserve
+                let maxBand = _displayWidth - calcMaxTreeLengthForDisplay() - _domainReserve - _geneReserve
                     - _heatmapReserve - MSA_TRACK_GAP - MSA_MIN_TREE_PX;
                 band = Math.max(MSA_MIN_BAND_PX, Math.min(band, maxBand));
                 _msaReserve = MSA_TRACK_GAP + Math.min(fullPx, band);
             }
-            _w = _displayWidth - calcMaxTreeLengthForDisplay() - _msaReserve - _domainReserve - _heatmapReserve;
+            _w = _displayWidth - calcMaxTreeLengthForDisplay() - _msaReserve - _domainReserve - _geneReserve
+                - _heatmapReserve;
             if (_w < 1) {
                 _w = 1;
             }
@@ -3487,11 +3527,14 @@ function (root, d3, forester, phyloXml) {
         drawScaleBar();
         drawDomainArchitectures();
         drawDomainLegend();
+        drawGeneTrack();
+        drawGeneLegend();
         drawMsaTrack();
         drawHeatmapTrack();
         drawTimeOverlays();
         rebuildOverview(); // measured AFTER the overlays, so the bbox is this frame's
         updateSearchHitNavigation();
+        renderClockPlot(false); // an open clock plot follows the view, the colours and the selection
         noteViewChange();
     }
 
@@ -5651,6 +5694,10 @@ function (root, d3, forester, phyloXml) {
         'domainLabels',
         'domainGlow',
         'domainEvalueExponent',
+        'showGenes',
+        'geneAnchor',
+        'geneFamily',
+        'geneLabels',
         'showScaleAxis',
         'showScaleGrid',
         'showSupportDots',
@@ -5961,6 +6008,43 @@ function (root, d3, forester, phyloXml) {
                     + ' with a missing or impossible from / to / E-value ignored');
             }
         }
+        // Likewise a tree whose tips carry genome regions -- genes as located
+        // sequences -- draws its gene track from the start, unless the caller
+        // decided. The anchor family and the family namespace are chosen from
+        // the tree ('auto') unless named; the label mode is the domain
+        // track's.
+        if (_state.showGenes === undefined) {
+            _state.showGenes = _basicTreeProperties.geneRegions === true;
+        }
+        if (_state.geneLabels === undefined) {
+            _state.geneLabels = 'genes';
+        } else if (GENE_LABEL_MODES.indexOf(_state.geneLabels) < 0) {
+            throw new Error(ERROR + '"geneLabels" must be "none", "genes" or "legend"');
+        }
+        if (_state.geneAnchor === undefined) {
+            _state.geneAnchor = 'auto';
+        } else if (typeof _state.geneAnchor !== 'string' || _state.geneAnchor.length === 0) {
+            throw new Error(ERROR + '"geneAnchor" must be a family ref such as "pgfam:PGF_00019355", "auto" or "none"');
+        }
+        if (_state.geneFamily === undefined) {
+            _state.geneFamily = 'auto';
+        } else if (typeof _state.geneFamily !== 'string' || _state.geneFamily.length === 0) {
+            throw new Error(ERROR + '"geneFamily" must be an annotation namespace such as "pgfam", or "auto"');
+        }
+        _gene = {width: null, radialWidth: null, palette: null, legendFrac: null, cache: new WeakMap()};
+        if (_basicTreeProperties.geneRegions) {
+            // a location outside the grammar and a gene on a second contig
+            // are left out, never fatal -- said once, here
+            let gs = forester.geneRegionStats(_treeData);
+            if (gs.ignored > 0) {
+                console.warn(MESSAGE + gs.ignored + ' sequence location' + (gs.ignored === 1 ? '' : 's')
+                    + ' not in the form contig:start-end(+) ignored');
+            }
+            if (gs.otherContigs > 0) {
+                console.warn(MESSAGE + gs.otherContigs + ' gene' + (gs.otherContigs === 1 ? '' : 's')
+                    + ' on a genome\'s other contigs not drawn: the gene track shows one contig per genome');
+            }
+        }
         // 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
@@ -5973,6 +6057,7 @@ function (root, d3, forester, phyloXml) {
         // it arrived showing. An Auspice build arrives in the time view; a
         // BEAST or Newick file arrives stating its own branch lengths.
         _branchScaleAvailable = _treeData ? forester.hasTimeAndDivergence(_treeData) : false;
+        _clockPlotKind = _treeData ? forester.clockPlotKind(_treeData) : null;
         _state.branchScale = _treeData ? forester.branchLengthScale(_treeData) : 'divergence';
         if (_state.showScaleAxis === undefined) {
             // on for a tree SHOWN in time; a dated tree that opens in
@@ -6059,6 +6144,14 @@ function (root, d3, forester, phyloXml) {
                         return null;
                     }
                     let s = n.sequences[0];
+                    // On a tree of genomes a tip's located sequences -- its
+                    // contig record and its genes -- describe the region drawn
+                    // beside it, not the tip: "S01 chromosome" is no name for
+                    // S01, and a gene's product even less so. They are no
+                    // label, so the node name stands.
+                    if (_basicTreeProperties.geneRegions && forester.parseSequenceLocation(s.location)) {
+                        return null;
+                    }
                     let l = '';
                     if (_state.showSequenceSymbol) {
                         l = joinFrag(l, s.symbol);
@@ -6408,6 +6501,8 @@ function (root, d3, forester, phyloXml) {
         document.querySelectorAll('dialog.aptx-dialog').forEach(function (dlg) {
             dlg.remove();
         });
+        _clockPlot = null;
+        _clockPlotKind = null;
         if (_msaNav) {
             _msaNav.remove();
             _msaNav = null;
@@ -7374,7 +7469,7 @@ function (root, d3, forester, phyloXml) {
         // once flung the whole tree off-screen after three X+ presses).
         return {
             horizontal: Math.max(1, _displayWidth - calcMaxTreeLengthForDisplay() - _msaReserve
-                - _domainReserve - _heatmapReserve),
+                - _domainReserve - _geneReserve - _heatmapReserve),
             vertical: Math.max(40, _displayHeight - (2 * TOP_AND_BOTTOM_BORDER_HEIGHT)
                 - bottomOverlayReserve() - topOverlayReserve())
         };
@@ -8722,9 +8817,9 @@ function (root, d3, forester, phyloXml) {
         }
 
         // A faint dashed guide from each tip across to its row, as the
-        // alignment track draws -- skipped when the domain tracks are in
-        // between, where it would run straight through their boxes.
-        if (_domainReserve === 0) {
+        // alignment track draws -- skipped when the domain or gene tracks are
+        // in between, where it would run straight through their boxes.
+        if (_domainReserve === 0 && _geneReserve === 0) {
             let guideFont = _state.externalNodeFontSize + 'px ' + _state.defaultFont;
             let guideGap = _state.nodeLabelGap;
             let guideEnd = originX - 3;
@@ -9899,6 +9994,14 @@ function (root, d3, forester, phyloXml) {
             s.domainGlow = _state.domainGlow === true;
             s.domainEvalue = _state.domainEvalueExponent;
         }
+        if (_basicTreeProperties.geneRegions === true) {
+            s.genes = _state.showGenes === true;
+            s.geneLabels = _state.geneLabels;
+            // the EFFECTIVE choices, so that a link reproduces the figure
+            // even where an automatic choice would have moved
+            s.geneAnchor = geneAnchor() || 'none';
+            s.geneFamily = geneFamilyNamespace() || 'auto';
+        }
         if (_basicTreeProperties.branchLengths === true) {
             s.scaleAxis = _state.showScaleAxis === true;
             s.scaleGrid = _state.showScaleGrid === true;
@@ -10061,6 +10164,21 @@ function (root, d3, forester, phyloXml) {
                 _domain.palette = null;   // the drawn set changed: the palette is dealt again
             }
         }
+        if (typeof s.genes === 'boolean') {
+            _state.showGenes = s.genes;
+        }
+        if (GENE_LABEL_MODES.indexOf(s.geneLabels) >= 0) {
+            _state.geneLabels = s.geneLabels;
+        }
+        if (typeof s.geneFamily === 'string' && s.geneFamily.length > 0 && s.geneFamily !== _state.geneFamily) {
+            _state.geneFamily = s.geneFamily;
+            if (_gene) {
+                _gene.palette = null;   // the families change with the namespace
+            }
+        }
+        if (typeof s.geneAnchor === 'string' && s.geneAnchor.length > 0) {
+            _state.geneAnchor = s.geneAnchor;
+        }
         // 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;
@@ -10073,8 +10191,9 @@ function (root, d3, forester, phyloXml) {
         }
         if (!radialDisplay()) {
             _radialLabelsHorizontal = false;
-        } else if (_state.showDomainArchitectures && _basicTreeProperties.domainArchitectures) {
-            _radialLabelsHorizontal = false;   // the domain boxes ride the spokes, so the labels must too
+        } else if ((_state.showDomainArchitectures && _basicTreeProperties.domainArchitectures)
+            || (_state.showGenes && _basicTreeProperties.geneRegions)) {
+            _radialLabelsHorizontal = false;   // the domain boxes and gene arrows ride the spokes, so the labels must too
         }
         if (_vis) {
             if (s.colorBy === 'none') {
@@ -10154,6 +10273,7 @@ function (root, d3, forester, phyloXml) {
         setCheckboxValue(DOMAIN_GLOW_CB, _state.domainGlow === true);
         setValue(DOMAIN_LABELS_SELECT, _state.domainLabels);
         syncDomainControls();
+        syncGeneControls();
         setSliderValue(FONT_SIZE_SLIDER, _state.externalNodeFontSize);
         setSliderValue(NODE_SIZE_SLIDER, _state.nodeSizeDefault);
         setSliderValue(BRANCH_WIDTH_SLIDER, _state.branchWidthDefault);
@@ -10226,10 +10346,10 @@ 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', 'scale'];
+        'heatmapOrder', 'scale', 'geneAnchor', 'geneFamily', 'geneLabels'];
     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',
+    const VIEW_BOOL_KEYS = ['horizontalLabels', 'msa', 'msaLogo', 'heatmap', 'domains', 'domainGlow', 'genes',
         '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.
@@ -10509,6 +10629,7 @@ function (root, d3, forester, phyloXml) {
         if (scaleGroup) {
             scaleGroup.style.display = _branchScaleAvailable ? '' : 'none';
         }
+        syncClockPlotControl();
     }
 
     // The tree was EDITED (a node deleted). Whether it has two layouts is asked
@@ -10527,6 +10648,7 @@ function (root, d3, forester, phyloXml) {
             forester.captureDivergence(_treeData);
         }
         _branchScaleAvailable = forester.hasTimeAndDivergence(_treeData);
+        _clockPlotKind = forester.clockPlotKind(_treeData);
         if (was && _branchScaleAvailable && _state.branchScale === 'divergence') {
             forester.applyDivergenceBranchLengths(_treeData);
         } else if (was) {
@@ -10904,6 +11026,833 @@ function (root, d3, forester, phyloXml) {
         shell.dialog.showModal();
     }
 
+    // ===================== Clock plot =====================
+    // The tips of the tree on view as points, each one's date against its
+    // divergence from the root, with a least-squares line through them (and
+    // the ancestors' points too, when asked for): the picture TempEst,
+    // TreeTime and Auspice's clock view draw, here as a
+    // panel beside the tree rather than a layout of it, so an outlier is seen
+    // on the plot and in the tree at once (Christian, 2026-10-02). What is
+    // plotted, which trees have a plot and what the line is fitted to are
+    // forester.clockPlotData's; this is the drawing and the link:
+    //
+    // - a point wears its node's colour in the tree (found, selected, the
+    //   Color visualization, the file's own styles);
+    // - pointing at one lights its node in the tree, and pointing at a node
+    //   in the tree rings its point;
+    // - a click selects or deselects the node, a drag selects the tips in
+    //   the box -- the tree's own selection, so everything that reads it
+    //   (the labels, the downloads, the host page) sees it;
+    // - tips drawn on one spot are one dot, and the dot answers for all of
+    //   them: named together, lit together, selected together.
+    //
+    // The plot follows the view: in a subtree it is the clade's, with the
+    // clade's own line. Modeless, and it can be dragged by its title: the
+    // point is to work in the tree with it open.
+    const CLOCK_PLOT_WHAT = 'clock plot: each tip\'s date against its divergence from the root, with a'
+        + ' line through the tips (its slope is the rate); a panel linked to the tree';
+    const CLOCK_PLOT_W = 440;
+    const CLOCK_PLOT_H = 300;
+    const CLOCK_PLOT_PAD = {top: 10, right: 14, bottom: 38, left: 58};
+    const CLOCK_PLOT_HIT_PX = 7;     // how near the pointer has to be to a point
+    const CLOCK_PLOT_SAME_PX = 1;    // points nearer each other than this are one dot on the screen
+    const CLOCK_PLOT_NAMES_MAX = 5;  // how many of a dot's tips the readout names
+    const CLOCK_PLOT_DRAG_PX = 4;    // a press that moves further than this is a box, not a click
+    const CLOCK_PLOT_MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+    const SVG_NS = 'http://www.w3.org/2000/svg';
+    let _clockPlot = null;           // the open panel, or null
+    // What the two checkboxes said last, kept while the page lives. Tips only
+    // to begin with (Christian, 2026-10-02): the line is theirs, and a deep
+    // root crowds them into a corner (dengue: a root in 1319, tips from 1944).
+    let _clockPlotOptions = {line: true, internal: false};
+
+    // The button is shown where the tree has a plot, and lit while the panel
+    // is open. (A tree that loses its plot -- the tip that made it deleted --
+    // loses the panel at its next render: see renderClockPlot.)
+    function syncClockPlotControl() {
+        let button = byId(CLOCK_PLOT_BUTTON);
+        if (button) {
+            button.style.display = _clockPlotKind ? '' : 'none';
+            button.classList.toggle('aptx-lit', !!_clockPlot);
+        }
+    }
+
+    function toggleClockPlot() {
+        if (_clockPlot) {
+            closeClockPlot();
+        } else {
+            showClockPlot();
+        }
+    }
+
+    // Closes the panel NOW. A dialog's own `close` event arrives in a later
+    // task -- much later in a tab the browser is throttling -- and while the
+    // viewer still believed the panel open, a press of the button "closed"
+    // the closed panel again and did nothing (seen on the live demo,
+    // 2026-10-02). So nothing here waits for the event.
+    function closeClockPlot() {
+        let cp = _clockPlot;
+        if (!cp) {
+            return;
+        }
+        _clockPlot = null;
+        hideHoverGlow();
+        if (cp.dialog.open) {
+            cp.dialog.close();
+        }
+        cp.dialog.remove();
+        syncClockPlotControl();
+    }
+
+    function clockSvg(parent, tag, cls) {
+        let el = document.createElementNS(SVG_NS, tag);
+        if (cls) {
+            el.setAttribute('class', cls);
+        }
+        parent.appendChild(el);
+        return el;
+    }
+
+    function showClockPlot() {
+        if (!_clockPlotKind || !_treeData) {
+            return;
+        }
+        let shell = makeDialogShell(CLOCK_PLOT_DIALOG, 'Clock plot', CLOCK_PLOT_W + 26);
+        let body = shell.body;
+        body.classList.add('aptx-clock');
+
+        let svg = clockSvg(body, 'svg', 'aptx-clock-svg');
+        svg.setAttribute('width', CLOCK_PLOT_W);
+        svg.setAttribute('height', CLOCK_PLOT_H);
+        svg.setAttribute('viewBox', '0 0 ' + CLOCK_PLOT_W + ' ' + CLOCK_PLOT_H);
+        svg.setAttribute('role', 'img');
+        svg.setAttribute('aria-label', 'Clock plot: each tip\'s date against its divergence from the root');
+        let clip = clockSvg(clockSvg(svg, 'defs'), 'clipPath');
+        clip.id = CLOCK_PLOT_DIALOG + '_clip';
+        let clipRect = clockSvg(clip, 'rect');
+        clipRect.setAttribute('x', CLOCK_PLOT_PAD.left);
+        clipRect.setAttribute('y', CLOCK_PLOT_PAD.top);
+        clipRect.setAttribute('width', CLOCK_PLOT_W - CLOCK_PLOT_PAD.left - CLOCK_PLOT_PAD.right);
+        clipRect.setAttribute('height', CLOCK_PLOT_H - CLOCK_PLOT_PAD.top - CLOCK_PLOT_PAD.bottom);
+        // an opaque ground under the points: the dialog is frosted glass, and
+        // the tree's colours showing through would read as data
+        let ground = clockSvg(svg, 'rect', 'aptx-clock-ground');
+        ['x', 'y', 'width', 'height'].forEach(function (a) {
+            ground.setAttribute(a, clipRect.getAttribute(a));
+        });
+        let axes = clockSvg(svg, 'g', 'aptx-clock-axes');
+        let inside = clockSvg(svg, 'g');
+        inside.setAttribute('clip-path', 'url(#' + clip.id + ')');
+        let internal = clockSvg(inside, 'g', 'aptx-clock-internal');
+        let line = clockSvg(inside, 'line', 'aptx-clock-line');
+        let tips = clockSvg(inside, 'g', 'aptx-clock-tips');
+        let ring = clockSvg(svg, 'circle', 'aptx-clock-ring');
+        ring.setAttribute('r', 6.5);
+        ring.style.display = 'none';
+        let box = clockSvg(svg, 'rect', 'aptx-clock-box');
+        box.style.display = 'none';
+
+        let options = document.createElement('div');
+        options.className = 'aptx-clock-options';
+        body.appendChild(options);
+        let check = function (label, key, title) {
+            let row = document.createElement('label');
+            row.className = 'aptx-reps-choice';
+            row.title = title;
+            let input = document.createElement('input');
+            input.type = 'checkbox';
+            input.checked = _clockPlotOptions[key];
+            input.addEventListener('change', function () {
+                _clockPlotOptions[key] = input.checked;
+                renderClockPlot(true);
+            });
+            let span = document.createElement('span');
+            span.textContent = label;
+            row.appendChild(input);
+            row.appendChild(span);
+            options.appendChild(row);
+            return input;
+        };
+        check('Regression line', 'line', 'to show/hide the least-squares line through the tips');
+        check('Internal nodes', 'internal', 'to show/hide the internal nodes: their dates were inferred,'
+            + ' and they take no part in the line');
+        let deselect = document.createElement('button');
+        deselect.type = 'button';
+        deselect.className = 'aptx-reps-button aptx-clock-deselect';
+        deselect.textContent = 'Deselect all';
+        deselect.title = 'deselect every selected node of the tree';
+        deselect.addEventListener('click', function () {
+            if (_selectedNodes.size > 0) {
+                _selectedNodes = new Set();
+                selectionChangedByClockPlot();
+            }
+        });
+        options.appendChild(deselect);
+
+        let stats = document.createElement('div');
+        stats.className = 'aptx-clock-stats';
+        body.appendChild(stats);
+        let note = document.createElement('p');
+        note.className = 'aptx-shortcuts-note aptx-clock-note';
+        body.appendChild(note);
+
+        _clockPlot = {dialog: shell.dialog, svg: svg, axes: axes, internal: internal, line: line, tips: tips,
+            ring: ring, box: box, stats: stats, note: note, deselect: deselect,
+            data: null, marks: [], seen: null, hover: null, lays: 0, x: null, y: null};
+        // the shell's close control, and anything else that closes the dialog
+        let closed = function () {
+            if (_clockPlot && _clockPlot.dialog === shell.dialog) {
+                closeClockPlot();
+            }
+        };
+        shell.dialog.querySelector('.aptx-dialog-close').addEventListener('click', closed);
+        shell.dialog.addEventListener('close', closed);
+        bindClockPlotPointer(_clockPlot);
+        // modeless, as the cheat sheet is: the tree stays in reach
+        shell.dialog.show();
+        renderClockPlot(true);
+        placeClockPlot(shell.dialog);
+        makeDialogDraggable(shell.dialog);
+        syncClockPlotControl();
+    }
+
+    // In the tree area's top right corner, clear of the control panel where
+    // there is room, and inside the window.
+    //
+    // The page around the viewer may keep something of its own in that corner,
+    // above everything -- the demo page's tree chooser sits there -- and the
+    // panel opened under it, its close control out of reach (seen on the live
+    // demo, 2026-10-02; no harness has a host page). So the panel's top edge is
+    // asked what is on it, and the panel goes below whatever is not ours.
+    function placeClockPlot(dialog) {
+        let area = _container ? _container.getBoundingClientRect() : null;
+        let w = dialog.offsetWidth;
+        let h = dialog.offsetHeight;
+        let right = area ? Math.min(area.right, window.innerWidth) : window.innerWidth;
+        let top = area ? Math.max(area.top, 0) : 0;
+        let lowest = Math.max(6, window.innerHeight - h - 6);
+        let put = function (y) {
+            setStyles(dialog, {
+                'position': 'fixed',
+                'margin': '0',
+                'left': Math.max(6, right - w - 14) + 'px',
+                'top': Math.max(6, Math.min(lowest, y)) + 'px'
+            });
+        };
+        put(top + 14);
+        let box = dialog.getBoundingClientRect();
+        let under = 0;
+        [box.left + 12, (box.left + box.right) / 2, box.right - 14].forEach(function (px) {
+            let over = document.elementFromPoint(px, box.top + 14);
+            if (!over || dialog.contains(over) || (_container && _container.contains(over))) {
+                return;
+            }
+            // the whole of what is in the way, not the link or label inside it
+            while (over.parentElement && over.parentElement !== document.body
+                && !over.parentElement.contains(dialog)) {
+                over = over.parentElement;
+            }
+            under = Math.max(under, over.getBoundingClientRect().bottom);
+        });
+        if (under > 0) {
+            put(under + 8);
+        }
+    }
+
+    // A modeless dialog moved by its title bar, kept inside the window.
+    function makeDialogDraggable(dialog) {
+        let bar = dialog.querySelector('.aptx-dialog-title');
+        if (!bar) {
+            return;
+        }
+        bar.classList.add('aptx-dialog-drag');
+        bar.addEventListener('pointerdown', function (e) {
+            if (e.button !== 0 || (e.target.closest && e.target.closest('button'))) {
+                return;
+            }
+            let start = dialog.getBoundingClientRect();
+            let dx = e.clientX - start.left;
+            let dy = e.clientY - start.top;
+            let move = function (ev) {
+                setStyles(dialog, {
+                    'position': 'fixed',
+                    'margin': '0',
+                    'left': Math.max(0, Math.min(window.innerWidth - 40, ev.clientX - dx)) + 'px',
+                    'top': Math.max(0, Math.min(window.innerHeight - 30, ev.clientY - dy)) + 'px'
+                });
+            };
+            let up = function () {
+                document.removeEventListener('pointermove', move);
+                document.removeEventListener('pointerup', up);
+                document.removeEventListener('pointercancel', up);
+            };
+            document.addEventListener('pointermove', move);
+            document.addEventListener('pointerup', up);
+            document.addEventListener('pointercancel', up);
+            e.preventDefault();
+        });
+    }
+
+    // A number of the plot at three significant digits; very small or very
+    // large in exponent form, which is how a rate is usually written.
+    function clockNumber(v, digits) {
+        if (typeof v !== 'number' || !isFinite(v)) {
+            return '';
+        }
+        let sig = digits || 3;
+        let a = Math.abs(v);
+        if (a !== 0 && (a < 1e-4 || a >= 1e7)) {
+            return v.toExponential(sig - 1);
+        }
+        return String(Number(v.toPrecision(sig)));
+    }
+
+    // A date of the plot: a calendar year to two decimals (about four days),
+    // anything else as a number.
+    function clockDate(v, calendar) {
+        return calendar ? String(forester.roundNumber(v, 2)) : clockNumber(v, 5);
+    }
+
+    function clockTicksX(from, to, calendar) {
+        if (calendar) {
+            if ((to - from) >= 3) {
+                return forester.calendarTickYears(from, to).map(function (y) {
+                    return {value: y, label: String(y)};
+                });
+            }
+            let months = forester.calendarTickMonths(from, to);
+            if (months.length >= 2) {
+                return months.map(function (m) {
+                    return {value: m.value, label: CLOCK_PLOT_MONTHS[m.month - 1] + ' ' + m.year};
+                });
+            }
+        }
+        return d3.ticks(from, to, 6).map(function (v) {
+            return {value: v, label: String(Number(v.toPrecision(12)))};
+        });
+    }
+
+    // The colour a node wears in the tree, for its point; null where it wears
+    // none, and the point takes the panel's ink.
+    function clockPointColor(node, tip) {
+        let found = getFoundColor(node);
+        if (found || !tip) {
+            return found;
+        }
+        let vis = _state.showVisualizations ? visualizationColorFor(node) : null;
+        if (vis) {
+            return vis;
+        }
+        let style = nodeStyle(node);
+        if (style && (style.nodeColor || style.fontColor)) {
+            return style.nodeColor || style.fontColor;
+        }
+        if (_state.useVisualStyles && node.color) {
+            return 'rgb(' + node.color.red + ',' + node.color.green + ',' + node.color.blue + ')';
+        }
+        return null;
+    }
+
+    /**
+     * Draws the open clock plot for the tree on view. Called at the end of
+     * every render, so it has to cost next to nothing when what it shows has
+     * not changed. The points are worked out and laid down again only for
+     * another tree, another clade, a tree on view with a different number of
+     * nodes (one deleted) or a checkbox; any other render -- a zoom step, a
+     * selection -- costs a count of the nodes and one pass over the points
+     * for their colours, with a DOM write only where one changed.
+     *
+     * Until review (2026-10-02) the points were worked out afresh on every
+     * render and only the DRAWING was skipped, while this comment claimed
+     * the opposite: 5 ms a render on a 7,199-node build, where the count
+     * takes 0.2.
+     *
+     * @param force work everything out and lay it down again
+     */
+    function renderClockPlot(force) {
+        let cp = _clockPlot;
+        if (!cp) {
+            return;
+        }
+        if (!cp.dialog.isConnected) {     // the viewer was torn down under it
+            _clockPlot = null;
+            return;
+        }
+        let top = _treeData ? (topNode() || forester.getTreeRoot(_treeData)) : null;
+        let count = 0;
+        if (top) {
+            forester.preOrderTraversalAll(top, function () {
+                ++count;
+            });
+        }
+        let seen = cp.seen;    // (another tree is another top: no need to ask for both)
+        if (force || !seen || seen.top !== top || seen.count !== count) {
+            let data = top ? forester.clockPlotData(_treeData, top) : null;
+            if (!data) {
+                closeClockPlot();    // the tree no longer has a plot (a tip deleted)
+                return;
+            }
+            cp.seen = {top: top, count: count};
+            cp.data = data;
+            layClockPlot(cp, data);
+        }
+        colorClockPlot(cp);
+        // The render that brought us here put the tree's glow out (the node
+        // may have moved). The pointer is still on its point, so the node is
+        // lit again where it now is: a click on a point redraws the tree, and
+        // left the point ringed and its node dark until the pointer moved to
+        // another point and back.
+        if (cp.hover) {
+            lightClockNodes(cp.hover);
+        }
+    }
+
+    function layClockPlot(cp, data) {
+        let calendar = data.forward && !!_timeInfo && _timeInfo.type === 'calendar';
+        let shown = data.points.filter(function (p) {
+            return p.tip || _clockPlotOptions.internal;
+        });
+        let x0 = Infinity, x1 = -Infinity, y0 = Infinity, y1 = -Infinity;
+        shown.forEach(function (p) {
+            x0 = Math.min(x0, p.date);
+            x1 = Math.max(x1, p.date);
+            y0 = Math.min(y0, p.div);
+            y1 = Math.max(y1, p.div);
+        });
+        let padX = ((x1 - x0) * 0.04) || 0.5;
+        let padY = ((y1 - y0) * 0.06) || (Math.abs(y1) * 0.06) || 1e-6;
+        let left = CLOCK_PLOT_PAD.left;
+        let right = CLOCK_PLOT_W - CLOCK_PLOT_PAD.right;
+        let top = CLOCK_PLOT_PAD.top;
+        let bottom = CLOCK_PLOT_H - CLOCK_PLOT_PAD.bottom;
+        // time runs left to right, whichever way its numbers do
+        let x = d3.scaleLinear().domain([x0 - padX, x1 + padX]).range(data.forward ? [left, right] : [right, left]);
+        let y = d3.scaleLinear().domain([y0 - padY, y1 + padY]).range([bottom, top]);
+        cp.x = x;
+        cp.y = y;
+
+        // --- the frame, the ticks and what each axis measures
+        while (cp.axes.firstChild) {
+            cp.axes.removeChild(cp.axes.firstChild);
+        }
+        let seg = function (cls, xa, ya, xb, yb) {
+            let l = clockSvg(cp.axes, 'line', cls);
+            l.setAttribute('x1', xa);
+            l.setAttribute('y1', ya);
+            l.setAttribute('x2', xb);
+            l.setAttribute('y2', yb);
+        };
+        let text = function (cls, s, tx, ty, anchor) {
+            let t = clockSvg(cp.axes, 'text', cls);
+            t.setAttribute('x', tx);
+            t.setAttribute('y', ty);
+            t.setAttribute('text-anchor', anchor);
+            t.textContent = s;
+            return t;
+        };
+        clockTicksX(x.domain()[0], x.domain()[1], calendar).forEach(function (tick) {
+            let px = x(tick.value);
+            seg('aptx-clock-grid', px, top, px, bottom);
+            text('aptx-clock-tick', tick.label, px, bottom + 13, 'middle');
+        });
+        d3.ticks(y.domain()[0], y.domain()[1], 5).forEach(function (v) {
+            let py = y(v);
+            seg('aptx-clock-grid', left, py, right, py);
+            text('aptx-clock-tick', String(Number(v.toPrecision(12))), left - 6, py + 3.5, 'end');
+        });
+        seg('aptx-clock-frame', left, bottom, right, bottom);
+        seg('aptx-clock-frame', left, top, left, bottom);
+        let unit = data.unit && !calendar ? ' (' + data.unit + ')' : '';
+        text('aptx-clock-title', (data.forward ? 'Date' : 'Age') + unit, (left + right) / 2, CLOCK_PLOT_H - 6, 'middle');
+        let yt = text('aptx-clock-title', 'Divergence (subs/site)', 0, 0, 'middle');
+        yt.setAttribute('transform', 'translate(12,' + ((top + bottom) / 2) + ') rotate(-90)');
+
+        // --- the points: ancestors under the line, tips over it
+        cp.marks = [];
+        [cp.internal, cp.tips].forEach(function (g) {
+            while (g.firstChild) {
+                g.removeChild(g.firstChild);
+            }
+        });
+        shown.forEach(function (p) {
+            let c = clockSvg(p.tip ? cp.tips : cp.internal, 'circle');
+            c.setAttribute('cx', x(p.date));
+            c.setAttribute('cy', y(p.div));
+            c.setAttribute('r', p.tip ? 3 : 2);
+            cp.marks.push({p: p, el: c, px: x(p.date), py: y(p.div), key: ''});
+        });
+
+        // --- the line, across the frame (clipped to it)
+        let fit = data.fit;
+        if (fit && _clockPlotOptions.line) {
+            let d = x.domain();
+            cp.line.setAttribute('x1', x(d[0]));
+            cp.line.setAttribute('y1', y(fit.intercept + (fit.slope * d[0])));
+            cp.line.setAttribute('x2', x(d[1]));
+            cp.line.setAttribute('y2', y(fit.intercept + (fit.slope * d[1])));
+            cp.line.style.display = '';
+        } else {
+            cp.line.style.display = 'none';
+        }
+        // every point may have moved from under the pointer: what it is on
+        // now is known at its next move
+        cp.hover = null;
+        clockRing(cp, null);
+
+        // --- what the line says
+        while (cp.stats.firstChild) {
+            cp.stats.removeChild(cp.stats.firstChild);
+        }
+        let tipCount = data.points.reduce(function (n, p) {
+            return n + (p.tip ? 1 : 0);
+        }, 0);
+        let per = ' subs/site per ' + (calendar ? 'year' : (data.unit || 'unit of time'));
+        if (fit) {
+            treePropRow(cp.stats, 'Rate', clockNumber(fit.rate) + per);
+            treePropRow(cp.stats, 'Root date, by the line', fit.rootDate === null
+                ? 'none: divergence does not rise with time' : clockDate(fit.rootDate, calendar));
+            treePropRow(cp.stats, 'Root date, in the tree', clockDate(data.root.date, calendar));
+            treePropRow(cp.stats, 'R²', fit.r2 === null ? 'none: every tip has one divergence' : clockNumber(fit.r2));
+        } else {
+            treePropRow(cp.stats, 'Line', 'none: it takes three tips, not all on one date');
+        }
+        treePropRow(cp.stats, 'Tips', countNumber(tipCount) + (_in_subtree ? ' (the clade on view)' : ''));
+        cp.note.textContent = (data.fromRates
+            ? 'Divergence here is each branch’s time × its clock rate: the points show the model’s rates, not a measurement of their own. '
+            : '')
+            + 'The line is fitted to the tips only. Tips share ancestry, so R² describes the fit and is no test.'
+            + ' Click a point to select its node; drag to select the tips in a box.';
+        // what was laid down, for the browser harness: read here, where it is
+        // computed, not off the DOM
+        cp.dialog._aptxClockPlot = {data: data, shown: shown.length, calendar: calendar, lays: ++cp.lays};
+    }
+
+    // One pass: a point whose colour or highlight differs from what it wears
+    // is repainted, and a highlighted one is lifted over its neighbours.
+    function colorClockPlot(cp) {
+        for (let i = 0; i < cp.marks.length; ++i) {
+            let m = cp.marks[i];
+            let hit = getFoundColor(m.p.node) !== null;
+            let color = clockPointColor(m.p.node, m.p.tip);
+            let key = (color || '') + (hit ? '*' : '');
+            if (key === m.key) {
+                continue;
+            }
+            m.key = key;
+            m.el.style.fill = color || '';
+            m.el.style.stroke = hit ? makeFoundOutlineColor(m.p.node) : '';
+            m.el.setAttribute('r', hit ? 4 : (m.p.tip ? 3 : 2));
+            m.el.setAttribute('class', hit ? 'aptx-clock-hit' : '');
+            if (hit) {
+                m.el.parentNode.appendChild(m.el);
+            }
+        }
+        cp.deselect.disabled = _selectedNodes.size === 0;
+    }
+
+    // The node a point's node is seen AS in the tree: itself, or the
+    // collapsed clade that holds it (the highest one, which is the one drawn).
+    function clockTreeNode(node) {
+        let seen = node;
+        let top = topNode();
+        for (let n = node.parent; n && n !== _root; n = n.parent) {
+            if (isCollapsed(n)) {
+                seen = n;
+            }
+            if (n === top) {
+                break;
+            }
+        }
+        return seen;
+    }
+
+    /**
+     * The points under the pointer: the nearest one within reach, and every
+     * other of its kind drawn on the same spot. Tips with one date and one
+     * divergence -- identical sequences sampled on one day -- are one dot on
+     * the screen (778 of the 2,985 tips of a measles build share theirs with
+     * another), and a dot that answered for only the first of them left the
+     * rest beyond pointing, naming or deselecting (code review; Christian,
+     * 2026-10-02: the dot stands for all of them). The SAME SPOT, not
+     * everything within reach: in a dense cloud that is hundreds of tips,
+     * and a click meant for one dot would take them all.
+     *
+     * @returns {Array} the marks, in the tree's own order, top to bottom;
+     *          empty where the pointer is on none
+     */
+    function clockMarksAt(cp, px, py) {
+        let best = null;
+        let bestD = CLOCK_PLOT_HIT_PX * CLOCK_PLOT_HIT_PX;
+        for (let i = 0; i < cp.marks.length; ++i) {
+            let m = cp.marks[i];
+            let dx = m.px - px;
+            let dy = m.py - py;
+            let d = (dx * dx) + (dy * dy);
+            // a tip wins over an ancestor at the same distance: it is the datum
+            if (d < bestD || (d === bestD && best && m.p.tip && !best.p.tip)) {
+                best = m;
+                bestD = d;
+            }
+        }
+        if (!best) {
+            return [];
+        }
+        // (the points were laid down from a walk that takes the last child
+        // first, so the tree's order is theirs backwards)
+        return cp.marks.filter(function (m) {
+            return m.p.tip === best.p.tip && Math.abs(m.px - best.px) < CLOCK_PLOT_SAME_PX
+                && Math.abs(m.py - best.py) < CLOCK_PLOT_SAME_PX;
+        }).reverse();
+    }
+
+    function sameClockMarks(a, b) {
+        if (!a || !b || a.length !== b.length) {
+            return a === b;
+        }
+        return a.every(function (m, i) {
+            return m === b[i];
+        });
+    }
+
+    // Lights, in the tree, the nodes of the points under the pointer: each as
+    // the tree shows it (clockTreeNode), each once.
+    function lightClockNodes(marks) {
+        let nodes = [];
+        marks.forEach(function (m) {
+            let n = clockTreeNode(m.p.node);
+            if (nodes.indexOf(n) < 0) {
+                nodes.push(n);
+            }
+        });
+        showHoverGlow(nodes[0], nodes.slice(1));
+    }
+
+    function clockRing(cp, mark) {
+        if (!mark) {
+            cp.ring.style.display = 'none';
+            return;
+        }
+        cp.ring.setAttribute('cx', mark.px);
+        cp.ring.setAttribute('cy', mark.py);
+        cp.ring.style.display = '';
+    }
+
+    // A node pointed at IN THE TREE rings its point, where it has one.
+    function markClockPlot(node) {
+        let cp = _clockPlot;
+        if (!cp) {
+            return;
+        }
+        let mark = null;
+        if (node) {
+            for (let i = 0; i < cp.marks.length; ++i) {
+                if (cp.marks[i].p.node === node) {
+                    mark = cp.marks[i];
+                    break;
+                }
+            }
+        }
+        clockRing(cp, mark);
+    }
+
+    function clockSigned(v) {
+        return (v > 0 ? '+' : '') + clockNumber(v, 3);
+    }
+
+    // One value where the points agree, "least - greatest" where they do not
+    // (points a fraction of a pixel apart are one dot and may differ a hair).
+    function clockSpan(values, format) {
+        let lo = Math.min.apply(null, values);
+        let hi = Math.max.apply(null, values);
+        return lo === hi ? format(lo) : (format(lo) + ' \u2013 ' + format(hi));
+    }
+
+    // What the readout says of the points under the pointer: of one, what it
+    // is; of several on one spot, how many, the names of the first few, and
+    // what they share.
+    function clockPointText(marks) {
+        let p = marks[0].p;
+        if (marks.length === 1) {
+            let text = (p.node.name ? 'Name: ' + p.node.name : (p.tip ? 'Tip' : 'Internal node')) + '<br>';
+            let date = dateText(p.node.date);
+            if (date) {
+                text += 'Date: ' + date + '<br>';
+            }
+            text += 'Divergence: ' + clockNumber(p.div, 4) + '<br>';
+            if (typeof p.residual === 'number') {
+                text += 'Off the line: ' + clockSigned(p.residual) + '<br>';
+            }
+            if (!p.tip) {
+                text += 'Tips below: ' + forester.getAllExternalNodes(p.node).length + '<br>';
+            }
+            return text;
+        }
+        let text = marks.length + (p.tip ? ' tips here' : ' internal nodes here') + '<br>';
+        let named = marks.filter(function (m) {
+            return !!m.p.node.name;
+        });
+        named.slice(0, CLOCK_PLOT_NAMES_MAX).forEach(function (m) {
+            text += 'Name: ' + m.p.node.name + '<br>';
+        });
+        if (named.length > CLOCK_PLOT_NAMES_MAX) {
+            text += 'Name: \u2026 and ' + (named.length - CLOCK_PLOT_NAMES_MAX) + ' more<br>';
+        }
+        let unit = (p.node.date && p.node.date.unit) ? ' ' + p.node.date.unit : '';
+        text += 'Date: ' + clockSpan(marks.map(function (m) { return m.p.date; }), String) + unit + '<br>';
+        text += 'Divergence: ' + clockSpan(marks.map(function (m) { return m.p.div; }), function (v) {
+            return clockNumber(v, 4);
+        }) + '<br>';
+        if (marks.every(function (m) { return typeof m.p.residual === 'number'; })) {
+            text += 'Off the line: ' + clockSpan(marks.map(function (m) { return m.p.residual; }), clockSigned) + '<br>';
+        }
+        return text;
+    }
+
+    function selectionChangedByClockPlot() {
+        update(null, 0, true);
+        document.dispatchEvent(new Event('selected_nodes_changed_event'));
+    }
+
+    function bindClockPlotPointer(cp) {
+        let svg = cp.svg;
+        let press = null;      // {x, y, boxed} while the button is down
+        let at = function (e) {
+            let r = svg.getBoundingClientRect();
+            return [(e.clientX - r.left) * (CLOCK_PLOT_W / (r.width || CLOCK_PLOT_W)),
+                (e.clientY - r.top) * (CLOCK_PLOT_H / (r.height || CLOCK_PLOT_H))];
+        };
+        let readout = function (e, marks) {
+            if (!_node_mouseover_div) {
+                return;
+            }
+            if (!marks) {
+                _node_mouseover_div.interrupt().style('opacity', 1e-6);
+                return;
+            }
+            let tip = _node_mouseover_div.node();
+            tip.classList.remove('aptx-light', 'aptx-dark');
+            if (_panelTheme) {
+                tip.classList.add('aptx-' + _panelTheme);
+            }
+            _node_mouseover_div.html(markUpDataLabels(escapeHtmlKeepBreaks(clockPointText(marks))));
+            _node_mouseover_div.interrupt().style('opacity', 0.95);
+            placeHoverReadout(tip, e);
+        };
+        // cp.hover: the points the pointer is on (null for none), kept for the
+        // renders in between
+        let point = function (e) {
+            let xy = at(e);
+            let found = clockMarksAt(cp, xy[0], xy[1]);
+            let marks = found.length > 0 ? found : null;
+            if (!sameClockMarks(marks, cp.hover)) {
+                cp.hover = marks;
+                clockRing(cp, marks ? marks[0] : null);
+                if (marks) {
+                    lightClockNodes(marks);
+                } else {
+                    hideHoverGlow();
+                }
+                svg.style.cursor = marks ? 'pointer' : '';
+            }
+            readout(e, marks);
+        };
+        svg.addEventListener('pointerdown', function (e) {
+            if (e.button !== 0) {
+                return;
+            }
+            let xy = at(e);
+            press = {x: xy[0], y: xy[1], boxed: false};
+            try {
+                svg.setPointerCapture(e.pointerId);   // the box follows the pointer out of the drawing
+            } catch {
+                // no pointer capture available; a release outside is then missed
+            }
+            e.preventDefault();
+        });
+        svg.addEventListener('pointermove', function (e) {
+            if (!press) {
+                point(e);
+                return;
+            }
+            let xy = at(e);
+            if (!press.boxed && Math.hypot(xy[0] - press.x, xy[1] - press.y) > CLOCK_PLOT_DRAG_PX) {
+                press.boxed = true;
+                readout(e, null);
+                clockRing(cp, null);
+                hideHoverGlow();
+                cp.hover = null;
+            }
+            if (press.boxed) {
+                cp.box.setAttribute('x', Math.min(press.x, xy[0]));
+                cp.box.setAttribute('y', Math.min(press.y, xy[1]));
+                cp.box.setAttribute('width', Math.abs(xy[0] - press.x));
+                cp.box.setAttribute('height', Math.abs(xy[1] - press.y));
+                cp.box.style.display = '';
+            }
+        });
+        let release = function (e, cancelled) {
+            if (!press) {
+                return;
+            }
+            let was = press;
+            press = null;
+            cp.box.style.display = 'none';
+            if (cancelled) {
+                return;
+            }
+            let xy = at(e);
+            if (was.boxed) {
+                // the tips in the box join the selection; an ancestor is
+                // selected by a click, where it is one node and meant
+                let xa = Math.min(was.x, xy[0]), xb = Math.max(was.x, xy[0]);
+                let ya = Math.min(was.y, xy[1]), yb = Math.max(was.y, xy[1]);
+                let added = 0;
+                cp.marks.forEach(function (m) {
+                    if (m.p.tip && m.px >= xa && m.px <= xb && m.py >= ya && m.py <= yb
+                        && !_selectedNodes.has(m.p.node)) {
+                        _selectedNodes.add(m.p.node);
+                        ++added;
+                    }
+                });
+                if (added > 0) {
+                    selectionChangedByClockPlot();
+                }
+                return;
+            }
+            // a click selects every node of the dot; where all of them are
+            // selected already, it deselects them
+            let marks = clockMarksAt(cp, xy[0], xy[1]);
+            if (marks.length > 0) {
+                let all = marks.every(function (m) {
+                    return _selectedNodes.has(m.p.node);
+                });
+                marks.forEach(function (m) {
+                    if (all) {
+                        _selectedNodes.delete(m.p.node);
+                    } else {
+                        _selectedNodes.add(m.p.node);
+                    }
+                });
+                selectionChangedByClockPlot();
+            }
+        };
+        svg.addEventListener('pointerup', function (e) {
+            release(e, false);
+        });
+        svg.addEventListener('pointercancel', function (e) {
+            release(e, true);
+        });
+        svg.addEventListener('pointerleave', function (e) {
+            if (!press) {
+                cp.hover = null;
+                clockRing(cp, null);
+                hideHoverGlow();
+                readout(e, null);
+                svg.style.cursor = '';
+            }
+        });
+    }
+
     // ===================== Protein domain architectures =====================
     // The desktop's domain display, ported from its RenderableDomainArchitecture
     // and TreePanel (the spec is section D1 of the repo's TODO.md). Each tip's
@@ -11742,11 +12691,715 @@ function (root, d3, forester, phyloXml) {
         });
     }
 
-    // ===================== Time axis =====================
-    // The desktop's time overlays, drawn beneath a rectangular PHYLOGRAM of
-    // a dated tree: the two-band ICS geologic axis with a "Ma before
-    // present" ruler (or a calendar-year ruler), HPD age bars on dated
-    // internal nodes and sepia fossil-range (FAD/LAD) bars on dated tips.
+    // ===================== Genome regions (the gene track) =====================
+    // A tip that is a genome can carry a region of it: its genes as located
+    // sequences with their families, one per gene, plus the contig's record
+    // (forester's gene model, test/gene_test.js). Drawn as the domain track
+    // is drawn -- a backbone per tip in one aligned column past the labels in
+    // the rectangular layout, riding the tip's spoke in the radial ones --
+    // but each gene is an ARROW pointing by strand, coloured by family, and
+    // the rows are ANCHORED: the anchor family's gene sits at the same x in
+    // every row, pointing right, the neighbours following, so gene order
+    // compares across genomes (Christian, 2026-10-01). One scale for the
+    // whole tree -- f px per base pair, from the track width and the extent
+    // the rows share -- so distances compare too. A bar at the end of a
+    // backbone is a contig end; the track's own kb bar sits under the rows.
+
+    function genesShown() {
+        return _gene !== null
+            && _state.showGenes === true
+            && _basicTreeProperties.geneRegions === true
+            && _state.showExternalLabels
+            // in a radial layout the arrows ride the spokes, so only radial
+            // labels go with them
+            && (!radialDisplay() || !_radialLabelsHorizontal);
+    }
+
+    // The region a tip carries, computed once per node: its sequences never
+    // change after load, and a subtree view shows the same nodes.
+    function geneRegion(d) {
+        if (_gene.cache.has(d)) {
+            return _gene.cache.get(d);
+        }
+        let r = forester.geneRegionOf(d);
+        _gene.cache.set(d, r);
+        return r;
+    }
+
+    // Every region of the WHOLE tree, in its order. The anchor, the family
+    // namespace and the palette are decided on the tree, never on the view,
+    // so that entering a subtree moves nothing under the reader.
+    function geneTreeRegions() {
+        let out = [];
+        if (!_treeData) {
+            return out;
+        }
+        forester.preOrderTraversalAll(forester.getTreeRoot(_treeData), function (n) {
+            if (!n.children) {
+                let r = geneRegion(n);
+                if (r) {
+                    out.push(r);
+                }
+            }
+        });
+        return out;
+    }
+
+    // The namespace the colours and the anchor follow: the one named in the
+    // config or the view, else the one most of the genes carry.
+    function geneFamilyNamespace() {
+        if (_state.geneFamily && _state.geneFamily !== 'auto') {
+            return _state.geneFamily;
+        }
+        let all = forester.geneFamilyNamespaces(geneTreeRegions());
+        return all.length > 0 ? all[0].ns : null;
+    }
+
+    // The anchor family: 'none' is none, 'auto' the tree's best (single-copy
+    // in the most genomes, at least half of them), a ref is itself.
+    function geneAnchor() {
+        let a = _state.geneAnchor;
+        if (a === 'none') {
+            return null;
+        }
+        if (!a || a === 'auto') {
+            return forester.geneDefaultAnchor(geneTreeRegions(), geneFamilyNamespace());
+        }
+        return a;
+    }
+
+    // The track width: the domain track's rules (a quarter of the viewport
+    // at first use in the rectangular layouts, a width of the radial
+    // layouts' own, the same step buttons), kept apart from the domain
+    // track's so each is sized for what it draws.
+    function geneRectangularWidth() {
+        if (!_gene.width) {
+            let vp = svgSize();
+            let vw = Math.min(_displayWidth, (vp && vp.w) ? vp.w : _displayWidth);
+            _gene.width = Math.max(DOMAIN_WIDTH_MIN, Math.round(vw * DOMAIN_WIDTH_VIEWPORT_FRACTION));
+        }
+        return _gene.width;
+    }
+
+    function geneTrackWidth() {
+        if (!radialDisplay()) {
+            return geneRectangularWidth();
+        }
+        if (!_gene.radialWidth) {
+            let r = _state.circularDisplay ? (_radial ? _radial.maxRad : 0) : (_unroot ? _unroot.maxRad : 0);
+            if (!(r > 0)) {
+                return geneRectangularWidth();   // no radius yet (before the first radial draw)
+            }
+            _gene.radialWidth = Math.max(DOMAIN_WIDTH_MIN, Math.min(geneRectangularWidth(), DOMAIN_RADIAL_WIDTH_FRACTION * r));
+        }
+        return _gene.radialWidth;
+    }
+
+    function setGeneTrackWidth(w) {
+        if (radialDisplay()) {
+            _gene.radialWidth = w;
+        } else {
+            _gene.width = w;
+        }
+    }
+
+    // The rectangular layout reserves the track's column past the domain
+    // tracks' (both counted wherever _w is); the radial layouts fit it into
+    // the ring (fitRadialExtent).
+    function geneReserve() {
+        if (!genesShown() || radialDisplay()) {
+            return 0;
+        }
+        return DOMAIN_TRACK_START_GAP + geneTrackWidth() + DOMAIN_TRACK_END_GAP;
+    }
+
+    function geneRadialExtent() {
+        if (!genesShown() || !radialDisplay()) {
+            return 0;
+        }
+        return DOMAIN_RADIAL_GAP + geneTrackWidth() + DOMAIN_TRACK_END_GAP;
+    }
+
+    // Colours: the families SHARED over the whole tree (in two genomes or
+    // more), sorted by code unit, take the palette in order -- dealt at load
+    // and when the namespace changes. A family met in one genome only is
+    // grey, so conserved order stands out; a gene with no family is lighter
+    // grey.
+    function genePalette() {
+        if (!_gene.palette) {
+            let names = forester.geneFamilySummary(geneTreeRegions(), geneFamilyNamespace()).names;
+            _gene.palette = Object.create(null);
+            names.forEach(function (name, i) {
+                _gene.palette[name] = i;
+            });
+        }
+        return _gene.palette;
+    }
+
+    function geneColor(family) {
+        if (!family) {
+            return forester.GENE_NO_FAMILY_COLOR;
+        }
+        let palette = genePalette();
+        if (palette[family] === undefined) {
+            return forester.GENE_SINGLETON_COLOR;
+        }
+        return forester.domainQualitativeColor(palette[family]);
+    }
+
+    // What a gene is called where there is room for one word: its symbol,
+    // else its gene name.
+    function geneLabel(g) {
+        return g.symbol || g.geneName || '';
+    }
+
+    // ---- hover and click: the readout the domains, heat map and alignment use
+    function geneInfoAt(event) {
+        let t = event.target;
+        return (t && t.__aptxGene) ? t.__aptxGene : null;
+    }
+
+    let _geneHovered = null;
+
+    function geneHover(event) {
+        let info = geneInfoAt(event);
+        if (!info) {
+            geneHoverOut();
+            return;
+        }
+        let tip_el = _node_mouseover_div.node();
+        if (info === _geneHovered) {
+            placeHoverReadout(tip_el, event);   // follows the pointer; the text is unchanged
+            return;
+        }
+        _geneHovered = info;
+        let g = info.gene;
+        let title = geneLabel(g) || g.product || '(unnamed)';
+        let txt = 'Gene: ' + title + '<br>';
+        if (g.product && g.product !== title) {
+            txt += 'Product: ' + g.product + '<br>';
+        }
+        if (info.family) {
+            txt += 'Family: ' + info.family + '<br>';
+        }
+        txt += 'Location: ' + forester.geneLocationText(g) + (info.flipped ? ' (the row is mirrored)' : '') + '<br>';
+        txt += 'Length: ' + countNumber(g.length) + ' bp<br>';
+        if (info.tip) {
+            txt += 'Tip: ' + info.tip + '<br>';
+        }
+        if (g.accession) {
+            txt += 'Accession' + (g.accession.source ? ' [' + g.accession.source + ']' : '') + ': ' + g.accession.value + '<br>';
+        }
+        let ref = forester.geneReference(g);
+        if (ref) {
+            // the readout follows the pointer, so the ARROW is the link and
+            // the readout says so (a "label: value" row, as the domains do it)
+            txt += 'Click: the ' + ref.site + ' entry';
+        }
+        tip_el.classList.remove('aptx-light', 'aptx-dark');
+        if (_panelTheme) {
+            tip_el.classList.add('aptx-' + _panelTheme);
+        }
+        _node_mouseover_div.html(markUpDataLabels(escapeHtmlKeepBreaks(txt)));
+        placeHoverReadout(tip_el, event);
+        _node_mouseover_div.transition().duration(100).style('opacity', 0.95);
+    }
+
+    function geneHoverOut() {
+        _geneHovered = null;
+        _node_mouseover_div.transition().duration(300).style('opacity', 1e-6);
+    }
+
+    let _geneOpenedAt = 0;
+
+    function geneClicked(event) {
+        let info = geneInfoAt(event);
+        if (!info) {
+            return;
+        }
+        event.stopPropagation();   // the arrow's click, linked or not: never the node menu behind it
+        let ref = forester.geneReference(info.gene);
+        if (!ref) {
+            return;
+        }
+        let now = Date.now();
+        if ((now - _geneOpenedAt) < 500) {   // a double click arrives as two clicks
+            return;
+        }
+        _geneOpenedAt = now;
+        openExternal(ref.url);
+    }
+
+    function geneDblClicked(event) {
+        if (geneInfoAt(event)) {
+            event.stopPropagation();
+            event.preventDefault();
+        }
+    }
+
+    // ---- the track
+    function drawGeneTrack() {
+        if (!_svgGroup) {
+            return;
+        }
+        let existing = _svgGroup.select('g.aptx-genes');
+        // A region goes WITH ITS NAME, and is left out when the crowding rule
+        // took the name (the domain track's rule, for the same reason)
+        let tips = (genesShown() && _root) ? displayedTips().filter(function (d) {
+            if (d._labelDropped) {
+                return false;
+            }
+            return _state.unrootedDisplay ? (d.ux !== undefined) : (d.x !== undefined);
+        }) : [];
+        if (tips.length > 0 && !radialDisplay()) {
+            tips.sort(function (p, q) {
+                return p.x - q.x;
+            });
+        }
+        let regions = tips.map(geneRegion);
+        let ns = tips.length > 0 ? geneFamilyNamespace() : null;
+        let anchor = tips.length > 0 ? geneAnchor() : null;
+        let laid = tips.length > 0 ? forester.geneTrackRows(regions, anchor, ns) : null;
+        let W = tips.length > 0 ? geneTrackWidth() : 0;
+        let f = (laid && laid.extent && laid.extent.max > laid.extent.min)
+            ? (W / (laid.extent.max - laid.extent.min)) * DOMAIN_SCALE_HEADROOM : 0;
+        if (!laid || !(f > 0) || !isFinite(f)) {
+            existing.remove();
+            geneHoverOut();   // the arrow under the pointer just stopped existing
+            return;
+        }
+        // [the backbones and caps, the arrows, the symbols, the kb bar], kept
+        // between redraws and moved to the end of the tree group
+        let g = existing.node();
+        if (!g) {
+            g = document.createElementNS(d3.namespaces.svg, 'g');
+            g.setAttribute('class', 'aptx-genes');
+            g.style.pointerEvents = 'none';
+            ['g', 'g', 'g', 'g'].forEach(function (tag) {
+                g.appendChild(document.createElementNS(d3.namespaces.svg, tag));
+            });
+        }
+        _svgGroup.node().appendChild(g);
+        let underLayer = g.children[0];
+        let bodyLayer = g.children[1];
+        let labelLayer = g.children[2];
+        let rulerLayer = g.children[3];
+        // the group ignores the mouse so the tree underneath stays clickable;
+        // the ARROWS alone take it back
+        bodyLayer.style.pointerEvents = 'auto';
+        if (!bodyLayer.__aptxWired) {
+            bodyLayer.__aptxWired = true;
+            bodyLayer.addEventListener('mousemove', geneHover);
+            bodyLayer.addEventListener('mouseout', geneHoverOut);
+            bodyLayer.addEventListener('click', geneClicked);
+            bodyLayer.addEventListener('dblclick', geneDblClicked);
+        }
+
+        // Where each tip's region goes: the start of the track along the
+        // row, the top and height of its arrows, and in the radial layouts
+        // the transform that turns it onto its spoke. Past the domain tracks
+        // when those are shown.
+        let labelSpace = tipLabelSpace();
+        let rows = [];
+        let columnStart = null;
+        if (_state.circularDisplay) {
+            let r0 = _radial.maxRad + labelSpace + domainRadialExtent() + DOMAIN_RADIAL_GAP;
+            let h = domainBoxHeight((r0 * 2 * Math.PI) / tips.length);
+            tips.forEach(function (d) {
+                rows.push({d: d, start: r0, y1: -h / 2, h: h,
+                    transform: 'rotate(' + labelAngleDeg(d) + ')', labelsOn: false});
+            });
+        } else if (_state.unrootedDisplay) {
+            let h = domainBoxHeight((Math.PI * 2 * _unroot.maxRad) / tips.length);
+            let start = labelSpace + domainRadialExtent() + DOMAIN_RADIAL_GAP;
+            tips.forEach(function (d) {
+                rows.push({d: d, start: start, y1: -h / 2, h: h,
+                    transform: 'translate(' + d.ux + ',' + d.uy + ') rotate(' + labelAngleDeg(d) + ')', labelsOn: false});
+            });
+        } else {
+            let n = tips.length;
+            let pitch = n > 1 ? (tips[n - 1].x - tips[0].x) / (n - 1) : _state.externalNodeFontSize;
+            let h = domainBoxHeight(pitch / 2);
+            columnStart = _w + _state.nodeLabelGap + labelSpace + _domainReserve + DOMAIN_TRACK_START_GAP;
+            let labelsOn = _state.geneLabels === 'genes';
+            tips.forEach(function (d) {
+                rows.push({d: d, start: columnStart, y1: d.x - (h / 2), h: h, transform: null, labelsOn: labelsOn});
+            });
+        }
+
+        // ---- collect: the backbones and caps as path data (one path for the
+        // whole track in the rectangular layout, one per row in the radial
+        // ones, each in its row's turned frame -- the domain track's lesson
+        // about turned coordinates and PDF size), one path element per
+        // arrow (it is what the mouse finds), the symbols that fit
+        let under = [];   // {d, transform}
+        let trackParts = [];
+        let bodies = [];  // {d, fill, stroke, transform, info, link}
+        let names = [];
+        let lowest = -Infinity;
+        rows.forEach(function (row, i) {
+            let lr = laid.rows[i];
+            if (!lr) {
+                return;
+            }
+            let geo = forester.geneRowGeometry(lr, row.start, f, laid.extent.min);
+            let h = row.h;
+            let y1 = row.y1;
+            let parts = row.transform ? [] : trackParts;
+            parts.push(roundRectPath(geo.backbone.x, y1 + (h / 2) - 0.5, geo.backbone.w, 1, 0));
+            if (geo.capLeft) {
+                parts.push(roundRectPath(geo.backbone.x - (GENE_CAP_W / 2), y1, GENE_CAP_W, h, 0));
+            }
+            if (geo.capRight) {
+                parts.push(roundRectPath(geo.backbone.x + geo.backbone.w - (GENE_CAP_W / 2), y1, GENE_CAP_W, h, 0));
+            }
+            if (row.transform) {
+                under.push({d: parts.join(''), transform: row.transform});
+            }
+            if (y1 + h > lowest) {
+                lowest = y1 + h;
+            }
+            // once per ROW: displayNodeName walks the node's properties when
+            // a label-ref visualization is on
+            let rowTip = displayNodeName(row.d) || '';
+            // two lanes share the height where genes overlap
+            let laneH = lr.lanes > 1 ? Math.max(GENE_LANE_MIN_H, h / 2) : h;
+            let fs = Math.min(_state.externalNodeFontSize, laneH - 2);
+            let font = fs + 'px ' + FONT_DEFAULTS;
+            geo.genes.forEach(function (b) {
+                let fam = forester.geneFamilyOf(b.gene, ns);
+                let base = geneColor(fam);
+                let y = (lr.lanes > 1 && b.lane === 1) ? (y1 + h - laneH) : y1;
+                let d = forester.geneArrowPath(b.x, y, b.w, laneH, b.dir);
+                if (d === '') {
+                    return;
+                }
+                let info = {gene: b.gene, family: fam, tip: rowTip, flipped: lr.flip};
+                bodies.push({d: d, fill: base, stroke: forester.domainDarken(base, 0.3), transform: row.transform,
+                    info: info, link: !!forester.geneReference(b.gene)});
+                let label = geneLabel(b.gene);
+                let head = Math.min(laneH / 2, b.w);
+                if (row.labelsOn && label && fs > 4 && legendTextWidth(label, font) <= b.w - head - 4) {
+                    // centred on the body, which the head is not part of
+                    names.push({x: b.x + ((b.dir > 0 ? 0 : head) + ((b.w - head) / 2)), y: y + (laneH / 2), font: font,
+                        fill: forester.domainLabelInk(base), text: label});
+                }
+            });
+        });
+        if (trackParts.length > 0) {
+            under.push({d: trackParts.join(''), transform: null});
+        }
+
+        // ---- draw: bottom to top, reusing the elements already there
+        let paths = sizeLayer(underLayer, 'path', under.length);
+        under.forEach(function (u, k) {
+            paths[k].setAttribute('d', u.d);
+            if (u.transform) {
+                paths[k].setAttribute('transform', u.transform);
+            } else {
+                paths[k].removeAttribute('transform');
+            }
+            paths[k].style.fill = DOMAIN_BACKBONE_COLOR;
+        });
+        geneHoverOut();   // a redraw can take the hovered arrow away without a mouseout
+        let arrows = sizeLayer(bodyLayer, 'path', bodies.length);
+        bodies.forEach(function (b, k) {
+            let el = arrows[k];
+            el.setAttribute('d', b.d);
+            if (b.transform) {
+                el.setAttribute('transform', b.transform);
+            } else {
+                el.removeAttribute('transform');
+            }
+            el.style.fill = b.fill;
+            el.style.stroke = b.stroke;
+            el.style.strokeWidth = 1;
+            el.style.strokeLinejoin = 'round';
+            el.__aptxGene = b.info;
+            el.style.cursor = b.link ? 'pointer' : 'default';   // a hand only where the click goes somewhere
+        });
+        let texts = sizeLayer(labelLayer, 'text', names.length);
+        names.forEach(function (t, k) {
+            let el = texts[k];
+            el.setAttribute('x', t.x);
+            el.setAttribute('y', t.y);
+            el.setAttribute('dy', '0.35em');
+            el.setAttribute('text-anchor', 'middle');
+            el.style.font = t.font;
+            el.style.fill = t.fill;
+            el.textContent = t.text;
+        });
+
+        // the kb bar under the rows, rectangular only: a round number of base
+        // pairs at this scale, with end ticks, the label after it
+        let ruler = d3.select(rulerLayer);
+        ruler.selectAll('*').remove();
+        let bar = (columnStart !== null && isFinite(lowest)) ? forester.geneScaleBar(f, GENE_KB_BAR_TARGET_PX) : null;
+        if (bar) {
+            let ink = _state.labelColorDefault;
+            let y = lowest + 12;
+            let x0 = columnStart;
+            let x1 = columnStart + bar.px;
+            let fs = Math.max(9, Math.min(_state.externalNodeFontSize, 12));
+            ruler.append('path')
+                .attr('d', 'M' + x0 + ',' + (y - 3) + 'v6M' + x0 + ',' + y + 'H' + x1 + 'M' + x1 + ',' + (y - 3) + 'v6')
+                .style('fill', 'none').style('stroke', ink).style('stroke-width', 1);
+            ruler.append('text')
+                .attr('x', x1 + 5).attr('y', y).attr('dy', '0.35em')
+                .style('font', fs + 'px ' + FONT_DEFAULTS).style('fill', ink)
+                .text(bar.label);
+        }
+    }
+
+    // The gene legend, in "Legend" mode only: the shared families drawn in
+    // the view, in first-appearance order, each with its commonest product
+    // and the number of genomes carrying it; then, when there are any, the
+    // grey rows for the families unique to one genome and the genes without
+    // a family. Its own card with the domain legend's manners: home
+    // bottom-right, a drag keeps its place, a double-click sends it home.
+    function drawGeneLegend() {
+        if (!_baseSvg) {
+            return;
+        }
+        _baseSvg.selectAll('g.' + LEGEND_GENES).remove();
+        if (!_root || !genesShown() || _state.geneLabels !== 'legend') {
+            return;
+        }
+        let tips = displayedTips().filter(function (d) {
+            return d.x !== undefined;
+        }).sort(function (p, q) {
+            return p.x - q.x;
+        });
+        let ns = geneFamilyNamespace();
+        let summary = forester.geneFamilySummary(tips.map(geneRegion), ns, new Set(Object.keys(genePalette())));
+        let size = svgSize();
+        if ((summary.legend.length === 0 && summary.singletons === 0 && summary.unfamilied === 0) || !size) {
+            return;
+        }
+        const FS = Math.max(11, _state.externalNodeFontSize || 11);
+        const PAD = 9;
+        const ROW = FS + 6;
+        const SWATCH = 10;
+        const GAP = 6;
+        const rowFont = FS + 'px ' + FONT_DEFAULTS;
+        const titleFont = '600 ' + (FS + 1) + 'px ' + FONT_DEFAULTS;
+        const ink = _state.labelColorDefault;
+        const frame = _state.branchColorDefault;
+        let title = 'Gene families' + (ns ? ' (' + ns + ')' : '');
+        let rows = summary.legend.map(function (r) {
+            let what = r.product || r.symbol || r.family;
+            return {
+                text: clipTextToWidth(what + ' (' + r.tips + ')', rowFont, DOMAIN_LEGEND_ROW_MAX_PX),
+                color: geneColor(r.family)
+            };
+        });
+        if (summary.singletons > 0) {
+            rows.push({text: 'unique to one genome (' + summary.singletons + ')', color: forester.GENE_SINGLETON_COLOR});
+        }
+        if (summary.unfamilied > 0) {
+            rows.push({text: 'no family (' + summary.unfamilied + ')', color: forester.GENE_NO_FAMILY_COLOR});
+        }
+        let width = legendTextWidth(title, titleFont);
+        rows.forEach(function (r) {
+            width = Math.max(width, SWATCH + GAP + legendTextWidth(r.text, rowFont));
+        });
+        width += 2 * PAD;
+        let height = PAD + ROW + (rows.length * ROW) + PAD - 2;
+        let x, y;
+        if (_gene.legendFrac) {
+            x = _gene.legendFrac.fx * size.w;
+            y = _gene.legendFrac.fy * size.h;
+        } else {
+            x = size.w - width - DOMAIN_LEGEND_INSET;
+            y = size.h - height - DOMAIN_LEGEND_INSET;
+        }
+        x = Math.max(0, Math.min(size.w - 20, x));
+        y = Math.max(0, Math.min(size.h - 20, y));
+
+        let g = _baseSvg.append('g').attr('class', LEGEND_GENES)
+            .style('cursor', 'move')
+            .call(d3.drag()
+                .on('start', function (event) {
+                    if (event.sourceEvent) {
+                        event.sourceEvent.stopPropagation();   // not a pan of the tree
+                    }
+                })
+                .on('drag', function (event) {
+                    x += event.dx;
+                    y += event.dy;
+                    _gene.legendFrac = {fx: x / size.w, fy: y / size.h};
+                    drawGeneLegend();
+                }))
+            .on('dblclick', function (event) {
+                event.stopPropagation();
+                _gene.legendFrac = null;
+                drawGeneLegend();
+            });
+        g.append('title').text('drag to move; double-click to send it back to the corner');
+        g.append('rect')
+            .attr('x', x).attr('y', y)
+            .attr('width', width).attr('height', height)
+            .attr('rx', 5)
+            .style('fill', _state.backgroundColorDefault)
+            .style('fill-opacity', 0.92)
+            .style('stroke', frame)
+            .style('stroke-opacity', 0.5);
+        let baseline = y + PAD + FS;
+        g.append('text')
+            .attr('x', x + PAD).attr('y', baseline)
+            .style('font', titleFont)
+            .style('fill', ink)
+            .text(title);
+        rows.forEach(function (r) {
+            baseline += ROW;
+            g.append('rect')
+                .attr('x', x + PAD).attr('y', baseline - SWATCH + 1)
+                .attr('width', SWATCH).attr('height', SWATCH)
+                .attr('rx', 2)
+                .style('fill', r.color);
+            g.append('text')
+                .attr('x', x + PAD + SWATCH + GAP).attr('y', baseline)
+                .style('font', rowFont)
+                .style('fill', ink)
+                .text(r.text);
+        });
+    }
+
+    // ---- the controls follow the toggle: hidden without it; while shown the
+    // step buttons, the two selects and the label mode say where things stand
+    function fillSelect(sel, options, value) {
+        sel.textContent = '';
+        options.forEach(function (o) {
+            let opt = document.createElement('option');
+            opt.value = o.value;
+            opt.textContent = o.text;
+            if (o.title) {
+                opt.title = o.title;
+            }
+            sel.appendChild(opt);
+        });
+        sel.value = value;
+    }
+
+    function geneFamilyShortName(c) {
+        return c.symbol || c.product || c.family;
+    }
+
+    function syncGeneControls() {
+        let fs = byId(GENE_CONTROLS);
+        if (!fs) {
+            return;
+        }
+        let on = _state.showGenes === true && _basicTreeProperties.geneRegions === true && _gene !== null;
+        setCheckboxValue(GENES_CB, _state.showGenes === true);
+        fs.style.display = on ? '' : 'none';
+        if (!on) {
+            return;
+        }
+        let w = geneTrackWidth();
+        (w > DOMAIN_WIDTH_MIN ? enableButton : disableButton)(byId(GENE_WIDTH_DEC));
+        (w < DOMAIN_WIDTH_MAX ? enableButton : disableButton)(byId(GENE_WIDTH_INC));
+        let regions = geneTreeRegions();
+        let ns = geneFamilyNamespace();
+        // the anchor: Auto (naming its pick), every family that can anchor
+        // two genomes or more -- most first -- and None
+        let sel = byId(GENE_ANCHOR_SELECT);
+        if (sel) {
+            let auto = forester.geneDefaultAnchor(regions, ns);
+            let cands = forester.geneAnchorCandidates(regions, ns);
+            let byFamily = Object.create(null);
+            cands.forEach(function (c) {
+                byFamily[c.family] = c;
+            });
+            let options = [{value: 'auto', text: 'Auto' + (auto ? ' (' + geneFamilyShortName(byFamily[auto]) + ')' : ' (none)'),
+                title: auto ? auto : 'no family is single-copy in half the genomes'}];
+            cands.forEach(function (c) {
+                if (c.single >= 2 || c.family === _state.geneAnchor) {
+                    options.push({value: c.family, text: geneFamilyShortName(c) + ' (' + c.single + '/' + regions.length + ')',
+                        title: c.family + (c.product && c.symbol ? ' — ' + c.product : '')});
+                }
+            });
+            if (_state.geneAnchor !== 'auto' && _state.geneAnchor !== 'none' && !byFamily[_state.geneAnchor]) {
+                options.push({value: _state.geneAnchor, text: _state.geneAnchor + ' (not in this tree)', title: _state.geneAnchor});
+            }
+            options.push({value: 'none', text: 'None (left-aligned)', title: 'no anchor: every row starts at its left end'});
+            fillSelect(sel, options, _state.geneAnchor);
+        }
+        // the namespace: offered when the genes carry more than one
+        let nss = forester.geneFamilyNamespaces(regions);
+        let row = byId(GENE_FAMILY_SELECT + '_row');
+        let fsel = byId(GENE_FAMILY_SELECT);
+        if (fsel && row) {
+            let options = nss.map(function (x) {
+                return {value: x.ns, text: x.ns + ' (' + countNumber(x.genes) + ' genes)', title: 'annotations with the prefix ' + x.ns + ':'};
+            });
+            if (ns && !nss.some(function (x) {
+                return x.ns === ns;
+            })) {
+                options.push({value: ns, text: ns + ' (not in this tree)', title: ns});
+            }
+            fillSelect(fsel, options, ns || '');
+            row.style.display = options.length > 1 ? '' : 'none';
+        }
+        setValue(GENE_LABELS_SELECT, _state.geneLabels);
+    }
+
+    function genesCbClicked() {
+        _state.showGenes = getCheckboxValue(GENES_CB);
+        if (_state.showGenes && radialDisplay()) {
+            _radialLabelsHorizontal = false;   // the arrows ride the spokes, so the labels must too
+            syncZoomRowButtons();
+        }
+        syncGeneControls();
+        scheduleUpdate(null, 0);
+    }
+
+    function geneWidthStep(grow) {
+        let w = geneTrackWidth();
+        if (grow ? w >= DOMAIN_WIDTH_MAX : w <= DOMAIN_WIDTH_MIN) {
+            return;
+        }
+        setGeneTrackWidth(w * (grow ? DOMAIN_WIDTH_GROW : DOMAIN_WIDTH_SHRINK));
+        syncGeneControls();
+        if (radialDisplay()) {
+            scheduleUpdate(null, 0, true);
+            afterUpdate(zoomToFit);
+        } else {
+            scheduleUpdate(null, 0);
+        }
+    }
+
+    function geneAnchorChanged() {
+        let v = getValue(GENE_ANCHOR_SELECT);
+        if (!v || v === _state.geneAnchor) {
+            return;
+        }
+        _state.geneAnchor = v;
+        scheduleUpdate(null, 0, true);
+    }
+
+    function geneFamilyChanged() {
+        let v = getValue(GENE_FAMILY_SELECT);
+        if (!v || v === geneFamilyNamespace()) {
+            return;
+        }
+        _state.geneFamily = v;
+        _state.geneAnchor = 'auto';   // the old anchor was a family of the old namespace
+        _gene.palette = null;         // the families change with the namespace
+        syncGeneControls();
+        scheduleUpdate(null, 0, true);
+    }
+
+    function geneLabelsChanged() {
+        _state.geneLabels = getValue(GENE_LABELS_SELECT);
+        scheduleUpdate(null, 0, true);
+    }
+
+    // ===================== Time axis =====================
+    // The desktop's time overlays, drawn beneath a rectangular PHYLOGRAM of
+    // a dated tree: the two-band ICS geologic axis with a "Ma before
+    // present" ruler (or a calendar-year ruler), HPD age bars on dated
+    // internal nodes and sepia fossil-range (FAD/LAD) bars on dated tips.
     // The tree layout itself never changes -- time is an overlay anchored to
     // 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.
@@ -12506,7 +14159,7 @@ function (root, d3, forester, phyloXml) {
             return;
         }
         let labelSpace = (_maxLabelLength * _state.externalNodeFontSize * LABEL_SIZE_CALC_FACTOR) + LABEL_SIZE_CALC_ADDITION;
-        let outer = maxRad + labelSpace + domainRadialExtent() + heatmapRadialExtent();
+        let outer = maxRad + labelSpace + domainRadialExtent() + geneRadialExtent() + heatmapRadialExtent();
         let W = +_baseSvg.attr('width'), H = +_baseSvg.attr('height');
         let scale = 0.9 * (Math.min(W, H) / (2 * outer));
         if (!isFinite(scale) || scale <= 0) {
@@ -13565,12 +15218,14 @@ function (root, d3, forester, phyloXml) {
             search0();
             search1();
         }
-        if (radialDisplay() && _state.showDomainArchitectures && _basicTreeProperties.domainArchitectures) {
-            // the domain boxes ride the tips' spokes, so the labels must too
+        if (radialDisplay() && ((_state.showDomainArchitectures && _basicTreeProperties.domainArchitectures)
+            || (_state.showGenes && _basicTreeProperties.geneRegions))) {
+            // the domain boxes and gene arrows ride the tips' spokes, so the labels must too
             _radialLabelsHorizontal = false;
         }
         syncZoomRowButtons();
         afterUpdate(syncDomainControls);   // the track width buttons follow the layout's own width
+        afterUpdate(syncGeneControls);
         zoomToFit();
     }
 
@@ -14454,6 +16109,14 @@ function (root, d3, forester, phyloXml) {
         for (let i = 0; i < btns.length; ++i) {
             btns[i].innerHTML = panelThemeIcon(); // a drawn glyph, not a text character
         }
+        // a modeless dialog (the cheat sheet, the clock plot) stays open across
+        // the switch, and took the theme only when it was made
+        document.querySelectorAll('dialog.aptx-dialog').forEach(function (dlg) {
+            dlg.classList.remove('aptx-light', 'aptx-dark');
+            if (_panelTheme === 'light' || _panelTheme === 'dark') {
+                dlg.classList.add('aptx-' + _panelTheme);
+            }
+        });
         applyTreeTheme();
     }
 
@@ -14502,7 +16165,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 = ['View & Tools', 'Sizes', 'Domain Architectures', 'Download'];
+    const PANEL_SECTIONS_CLOSED_BY_DEFAULT = ['View & Tools', 'Sizes', 'Domain Architectures', 'Genome regions', 'Download'];
 
     function loadPanelSections() {
         if (_panelSections) {
@@ -15200,6 +16863,29 @@ function (root, d3, forester, phyloXml) {
             + '  color:var(--p-accent-ink); }'
             + '.aptx-reps-primary { font-weight:600; }'
             + '.aptx-reps-button:focus-visible { outline:none; box-shadow:0 0 0 3px var(--p-accent-weak); }'
+            + '.aptx-reps-button:disabled { opacity:0.4; cursor:default; pointer-events:none; }'
+            // the clock plot: a drawing in the panel's own inks, so it turns
+            // with the theme; a point's colour, where it has one, is the
+            // node's in the tree and is set on the point itself
+            + '.aptx-dialog-drag { cursor:move; touch-action:none; user-select:none; -webkit-user-select:none; }'
+            + '.aptx-clock.aptx-dialog-body { overflow:visible; }'
+            + '.aptx-clock-svg { display:block; touch-action:none; user-select:none; -webkit-user-select:none; }'
+            + '.aptx-clock-svg text { font-size:10px; fill:var(--p-muted); font-variant-numeric:tabular-nums; }'
+            + '.aptx-clock-svg text.aptx-clock-title { font-size:10.5px; fill:var(--p-ink); }'
+            + '.aptx-clock-ground { fill:var(--p-surface2); }'
+            + '.aptx-clock-grid { stroke:var(--p-line); stroke-width:1; shape-rendering:crispEdges; }'
+            + '.aptx-clock-frame { stroke:var(--p-line-strong); stroke-width:1; shape-rendering:crispEdges; }'
+            + '.aptx-clock-line { stroke:var(--p-accent); stroke-width:1.6; }'
+            + '.aptx-clock-internal circle { fill:var(--p-faint); fill-opacity:0.55; }'
+            + '.aptx-clock-tips circle { fill:var(--p-ink); fill-opacity:0.8; }'
+            + '.aptx-clock-svg circle.aptx-clock-hit { fill-opacity:1; stroke-width:1.2; }'
+            + '.aptx-clock-ring { fill:none; stroke:var(--p-accent); stroke-width:1.8; pointer-events:none; }'
+            + '.aptx-clock-box { fill:var(--p-accent-weak); stroke:var(--p-accent); stroke-width:1;'
+            + '  shape-rendering:crispEdges; pointer-events:none; }'
+            + '.aptx-clock-options { display:flex; align-items:center; gap:14px; margin:6px 0 8px; }'
+            + '.aptx-clock-options .aptx-clock-deselect { margin-left:auto; height:22px; padding:0 9px; }'
+            + '.aptx-clock-stats .aptx-dialog-key { flex-basis:38%; }'
+            + '.aptx-clock-note { margin-top:8px; }'
             + '.aptx-dialog-mono { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Courier New",monospace;'
             + '  font-size:11px; white-space:pre-wrap; overflow-wrap:anywhere; }'
             // The hover tooltip, on the same palette.
@@ -15309,6 +16995,12 @@ function (root, d3, forester, phyloXml) {
             + '.aptx-panel .aptx-seg:hover { color:var(--p-accent-ink); background:var(--p-accent-weak); }'
             + '.aptx-panel .aptx-seg:has(> input:checked) { background:var(--p-accent); color:#fff; }'
             + '.aptx-panel .aptx-seg:has(> input:disabled) { opacity:0.4; cursor:default; }'
+            // the Clock plot button sits in the mode bar beside the segments
+            // and matches their height; lit while its panel is open
+            + '.aptx-panel .aptx-modebar input[type=button].aptx-clockbtn { height:auto; margin:0; padding:3px 8px;'
+            + '  font-weight:600; color:var(--p-muted); border-radius:7px; }'
+            + '.aptx-panel .aptx-modebar input[type=button].aptx-clockbtn.aptx-lit { background:var(--p-accent);'
+            + '  border-color:var(--p-accent); color:#fff; }'
             + '.aptx-panel .aptx-actions { margin-left:auto; display:flex; align-items:center; gap:5px; }'
             + '.aptx-panel .aptx-theme-btn, .aptx-panel .aptx-info-btn { flex:none; width:20px; height:20px; display:grid; place-items:center; padding:0; border:1px solid var(--p-line-strong); border-radius:6px; background:var(--p-surface2); color:var(--p-muted); cursor:pointer; font-size:12px; line-height:1; }'
             + '.aptx-panel .aptx-theme-btn:hover { background:var(--p-accent-weak); color:var(--p-accent-ink); border-color:var(--p-accent); }'
@@ -15832,6 +17524,15 @@ function (root, d3, forester, phyloXml) {
                 if (s.type) {
                     text += '- Type: ' + s.type + '<br>';
                 }
+                // The annotations, which this dialog never listed and which a
+                // gene's family lives in (<annotation ref="pgfam:...">): the
+                // ref, with the description when there is one.
+                (s.annotations || []).forEach(function (an) {
+                    if (!an || (!an.ref && !an.desc)) {
+                        return;
+                    }
+                    text += '- Annotation: ' + (an.ref ? an.ref + (an.desc ? ' (' + an.desc + ')' : '') : an.desc) + '<br>';
+                });
                 // The domain architecture, which phyloXML has always carried
                 // and this dialog has never shown: a reader could find a node
                 // by searching for one of its domains -- forester indexes them
@@ -16287,6 +17988,10 @@ function (root, d3, forester, phyloXml) {
             statOf(st.tipsWithDomains, st.tips, 'tips')
             + (bp.maxDomainArchitectureLength > 0
                 ? (', up to ' + countNumber(bp.maxDomainArchitectureLength) + ' residues') : ''));
+        carries('Genome regions', st.tipsWithGenes > 0,
+            statOf(st.tipsWithGenes, st.tips, 'tips')
+            + (bp.maxGeneRegionLength > 0
+                ? (', up to ' + countNumber(bp.maxGeneRegionLength) + ' bp') : ''));
         carries('Dates', st.nodesWithDate > 0, statOf(st.nodesWithDate, st.nodes, 'nodes'));
         carries('Distributions', st.tipsWithDistribution > 0,
             statOf(st.tipsWithDistribution, st.tips, 'tips'));
@@ -16559,6 +18264,8 @@ function (root, d3, forester, phyloXml) {
 
             c0.insertAdjacentHTML('beforeend',makeDomainControls());
 
+            c0.insertAdjacentHTML('beforeend',makeGeneControls());
+
             c0.insertAdjacentHTML('beforeend',makeHeatmapControls());
 
             c0.insertAdjacentHTML('beforeend',makeZoomControl());
@@ -16688,12 +18395,19 @@ 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(GENES_CB, 'click', genesCbClicked);
+        onHoldRepeat(GENE_WIDTH_DEC, function () { geneWidthStep(false); });
+        onHoldRepeat(GENE_WIDTH_INC, function () { geneWidthStep(true); });
+        on(GENE_ANCHOR_SELECT, 'change', geneAnchorChanged);
+        on(GENE_FAMILY_SELECT, 'change', geneFamilyChanged);
+        on(GENE_LABELS_SELECT, 'change', geneLabelsChanged);
         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);
         on(BRANCH_SCALE_DIV_BUTTON, 'click', branchScaleButtonClicked);
+        on(CLOCK_PLOT_BUTTON, 'click', toggleClockPlot);
 
         on(LAYOUT_CIRC_BUTTON, 'click', layoutButtonClicked);
         on(LAYOUT_UNROOTED_BUTTON, 'click', layoutButtonClicked);
@@ -17137,6 +18851,12 @@ function (root, d3, forester, phyloXml) {
             h = h.concat(makeSegment('Div', BRANCH_SCALE_DIV_BUTTON, 'branch_scale_radio',
                 '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>');
+            // The clock plot, where the tree has one (forester.clockPlotKind).
+            // Beside the switch because it draws the same two quantities
+            // against each other; a button of its own because it opens a
+            // panel and leaves the layout alone.
+            h = h.concat('<input type="button" class="aptx-clockbtn" value="Clock plot" name="' + CLOCK_PLOT_BUTTON
+                + '" id="' + CLOCK_PLOT_BUTTON + '" title="' + CLOCK_PLOT_WHAT + '">');
             h = h.concat('</div>');
             h = h.concat('</fieldset>');
             return h;
@@ -17237,6 +18957,9 @@ function (root, d3, forester, phyloXml) {
             if (_basicTreeProperties.domainArchitectures) {
                 opts.push(makeCheckboxItem('Domain Architectures', DOMAINS_CB, 'to show/hide the protein domain architectures beside the tips', true));
             }
+            if (_basicTreeProperties.geneRegions) {
+                opts.push(makeCheckboxItem('Genes', GENES_CB, 'to show/hide the genome regions beside the tips: each gene an arrow on a backbone, coloured by family, the rows lined up on one family'));
+            }
             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)'));
             }
@@ -17375,6 +19098,40 @@ function (root, d3, forester, phyloXml) {
             return h;
         }
 
+        // The gene track's controls, shown only while the Genes toggle is on
+        // (syncGeneControls): the track width, the anchor family, the family
+        // namespace the colours follow (shown when the genes carry more than
+        // one), and the label mode. The two selects are filled per tree by
+        // syncGeneControls, since their options come from the genes.
+        function makeGeneControls() {
+            let h = '<fieldset id="' + GENE_CONTROLS + '" style="display:none">';
+            h = h.concat('<legend>Genome regions</legend>');
+            h = h.concat('<div class="aptx-domrow"><span class="aptx-domlabel">Track width</span>');
+            h = h.concat(makeButton('−', GENE_WIDTH_DEC, 'narrow the gene track (hold to repeat)'));
+            h = h.concat(makeButton('+', GENE_WIDTH_INC, 'widen the gene track (hold to repeat)'));
+            h = h.concat('</div>');
+            h = h.concat('<div class="aptx-domrow"><label class="aptx-domlabel" for="' + GENE_ANCHOR_SELECT + '">Anchor</label>');
+            h = h.concat('<select name="' + GENE_ANCHOR_SELECT + '" id="' + GENE_ANCHOR_SELECT
+                + '" title="the family the rows line up on: its gene sits at the same place in every genome, pointing'
+                + ' right, and the neighbours follow (a genome with it on the other strand is mirrored). Auto picks the'
+                + ' family single-copy in the most genomes; None left-aligns the rows"></select></div>');
+            h = h.concat('<div class="aptx-domrow" id="' + GENE_FAMILY_SELECT + '_row"><label class="aptx-domlabel" for="'
+                + GENE_FAMILY_SELECT + '">Family</label>');
+            h = h.concat('<select name="' + GENE_FAMILY_SELECT + '" id="' + GENE_FAMILY_SELECT
+                + '" title="which family annotation colours the genes and anchors the rows (a BV-BRC export carries'
+                + ' both PGfams and PLfams)"></select></div>');
+            h = h.concat('<div class="aptx-domrow"><label class="aptx-domlabel" for="' + GENE_LABELS_SELECT + '">Labels</label>');
+            h = h.concat('<select name="' + GENE_LABELS_SELECT + '" id="' + GENE_LABELS_SELECT
+                + '" title="where the gene symbols go: on the arrows (rectangular layout only), in a legend of the'
+                + ' families, or nowhere">');
+            h = h.concat('<option value="genes">On genes</option>');
+            h = h.concat('<option value="legend">Legend</option>');
+            h = h.concat('<option value="none">None</option>');
+            h = h.concat('</select></div>');
+            h = h.concat('</fieldset>');
+            return h;
+        }
+
         // Shown only while the Heat Map toggle is on (syncHeatmapControls).
         // The desktop's View > Order Matrix Columns, minus its Manual mode --
         // that one means "the order you dragged the rows into", and there is
@@ -17621,6 +19378,7 @@ function (root, d3, forester, phyloXml) {
         setCheckboxValue(MSA_LOGO_CB, _state.showMsaLogo === true);
         setCheckboxValue(HEATMAP_CB, _state.showHeatmap);
         syncDomainControls();
+        syncGeneControls();
         syncHeatmapControls();
         setCheckboxValue(SCALE_AXIS_CB, _state.showScaleAxis);
         setCheckboxValue(SCALE_GRID_CB, _state.showScaleGrid);
@@ -18083,7 +19841,8 @@ function (root, d3, forester, phyloXml) {
     // colour and shape legends, the domain legend, the heat-map ring's scale.
     // On screen they sit where the window has room; in a full-size figure the
     // window is gone, so they are stacked beside the tree instead.
-    const WINDOW_LEGEND_CLASSES = [LEGEND_LABEL_COLOR, LEGEND_NODE_SHAPE, LEGEND_DOMAINS, 'aptx-heatmap-ringlegend'];
+    const WINDOW_LEGEND_CLASSES = [LEGEND_LABEL_COLOR, LEGEND_NODE_SHAPE, LEGEND_DOMAINS, LEGEND_GENES,
+        'aptx-heatmap-ringlegend'];
     const FULL_SIZE_LEGEND_STACK_GAP = 12;
 
     // The enlarged drawing, cropped to what is actually drawn: the tree