archaeopteryx 3.6.1 → 3.8.0

package/archaeopteryx.js

@@ -20,7 +20,7 @@
  *
  */
 
-// v 3.6.1
+// v 3.8.0
 // 2026-09-10
 //
 // Archaeopteryx.js is a software tool for the visualization and
@@ -103,7 +103,7 @@ function (root, d3, forester, phyloXml) {
     // IIFE's own function name -- a plain object says what it is.)
     let archaeopteryx = {};
 
-    const VERSION = '3.6.1';
+    const VERSION = '3.8.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';
@@ -277,6 +277,7 @@ function (root, d3, forester, phyloXml) {
     const PANEL_STYLE_ID = 'aptx-panel-styles';
     // How wide a legend row is treated as, for grabbing it with the mouse.
     const PANEL_WIDTH = 214; // fixed control-panel width; shared by the .aptx-panel CSS and leftPanelClearance() so the two can't drift
+    const PANEL_WIDTH_COMPACT = 196; // the same, at panelDensity 'compact'; panelWidth() picks between them
     const SLIDER_CLASS = 'aptx-slider';
     const SLIDER_STEP = 0.5;
     const SPECIATION_COLOR = '#009E73';
@@ -380,6 +381,8 @@ function (root, d3, forester, phyloXml) {
     const INTERNAL_LABEL_CB = 'intl_cb';
     const LABEL_COLOR_SELECT_MENU = 'lcs_menu';
     const MIDPOINT_ROOT_BUTTON = 'midpointr_b';
+    const REPRESENTATIVES_BUTTON = 'reps_b';
+    const REPRESENTATIVES_DIALOG = 'reps_dialog';
     const MAD_CITATION = 'Tria F, Landan G, Dagan T. Phylogenetic rooting using minimal ancestor deviation. Nature Ecology and Evolution. 2017;1:0193';
     const UNCOLLAPSE_ALL_BUTTON = 'uncollapse_all_b';
     const TREE_PREV_BUTTON = 'tree_prev_b';
@@ -515,6 +518,10 @@ function (root, d3, forester, phyloXml) {
     let _trees = [];              // every tree of the launch (one, or all a file held); _treeData is _trees[_treeIndex]
     let _treeIndex = 0;
     let _launchConfig = null;     // the config as launch() received it, for showTree()
+    let _treeViews = null;        // tree object -> the view it was last left in (see viewForTree)
+    let _panelSections = null;    // panel section name -> true when folded; the user's furniture, remembered (see loadPanelSections)
+    let _panelOpenOrder = new Map();  // section name -> when it was opened, so the fit rule folds the oldest first
+    let _panelOpenSeq = 0;
     let _viewOps = {order: null, root: null};   // the tree operations a shared view replays: ladderize direction, midpoint rooting
     let _lastViewEncoded;                        // the view last reported to onViewChange; undefined = not settled yet
     let _viewNotifyPending = false;
@@ -4862,6 +4869,7 @@ function (root, d3, forester, phyloXml) {
         'nhExportWriteConfidences',
         'nodeLabels',
         'onViewChange',
+        'panelDensity',
         'pngExportScale',
         'rootOffset',
         'supportDotMinimum',
@@ -4937,8 +4945,14 @@ function (root, d3, forester, phyloXml) {
     // the visualizations legend need this, and neither may hard-code it: the
     // panel's own geometry is the only honest source, or the two drift apart --
     // which is exactly how the root ended up drawn behind the panel once.
+    // The panel's width for the density in force. The CSS and this function
+    // must agree, or the tree's left margin and the panel drift apart.
+    function panelWidth() {
+        return (_settings && _settings.panelDensity === 'compact') ? PANEL_WIDTH_COMPACT : PANEL_WIDTH;
+    }
+
     function leftPanelClearance() {
-        return CONTROLS_0_LEFT_DEFAULT + PANEL_WIDTH + ROOT_CLEARANCE;
+        return CONTROLS_0_LEFT_DEFAULT + panelWidth() + ROOT_CLEARANCE;
     }
 
     // The only validation initializeState() performs. Hoisted so launch() can
@@ -5281,6 +5295,11 @@ function (root, d3, forester, phyloXml) {
         if (_settings.collapseControlPanel === undefined) {
             _settings.collapseControlPanel = false;
         }
+        if (_settings.panelDensity === undefined) {
+            _settings.panelDensity = 'comfortable';
+        } else if (_settings.panelDensity !== 'comfortable' && _settings.panelDensity !== 'compact') {
+            throw new Error(ERROR + '"panelDensity" must be "comfortable" or "compact"');
+        }
         if (_settings.enableDynamicSizing === undefined) {
             _settings.enableDynamicSizing = true;
         }
@@ -5547,6 +5566,7 @@ function (root, d3, forester, phyloXml) {
         _trees = [];
         _treeIndex = 0;
         _launchConfig = null;
+        _treeViews = null;
         _lastViewEncoded = undefined;
         _viewOps = {order: null, root: null};
         _basicTreeProperties = null;
@@ -5630,9 +5650,18 @@ function (root, d3, forester, phyloXml) {
         if (config && config.onViewChange !== undefined && config.onViewChange !== null && typeof config.onViewChange !== 'function') {
             throw new Error(ERROR + '"onViewChange" must be a function (state, encoded) or null');
         }
+        // checked up here with the others so an embedder's typo fails at the
+        // call rather than three frames deep, and so Node can test it
+        if (config && config.panelDensity !== undefined
+            && config.panelDensity !== 'comfortable' && config.panelDensity !== 'compact') {
+            throw new Error(ERROR + '"panelDensity" must be "comfortable" or "compact"');
+        }
         // a view names the tree it was made on; a fresh launch reports no
         // view until one changes (settleViewNotification)
         _lastViewEncoded = undefined;
+        // each tree's own view is remembered for the life of this launch,
+        // and only for it: a new launch starts everything fresh
+        _treeViews = new Map();
         let view = config && config.view;
         let start = (view && Number.isInteger(view.tree) && view.tree > 0 && view.tree < trees.length) ? view.tree : 0;
         return launchInto(container, trees, start, config);
@@ -5816,10 +5845,91 @@ function (root, d3, forester, phyloXml) {
         return makeViewerHandle();
     }
 
+    // ================= each tree keeps its own view =====================
+    // In a file holding several trees, every tree is its own workspace: you
+    // leave one as you had it -- layout, display type, labels, colours,
+    // sizes, tracks, both searches, the clade you switched to and the ones
+    // you collapsed -- and it comes back that way (Christian, 2026-09-16).
+    // This replaces "every tree opens fresh", and with it the rule that a
+    // switch cleared collapsing (Christian, 2026-09-14, made when a switch
+    // discarded everything else too).
+    //
+    // The memory IS the view state, so a remembered tree opens down exactly
+    // the path a shared link opens: launchInto with cfg.view. Nothing here
+    // knows about layouts or checkboxes; whatever getViewState covers is
+    // remembered, and what it leaves out (zoom and pan, the legend's
+    // position, the selection) stays out here too.
+    //
+    // A tree you have NOT opened yet is not handed the whole view -- what a
+    // tree shows and colours by is read from its own content, and imposing
+    // another tree's answer would waste that. It inherits the geometry
+    // alone: the settings that say nothing about what is in the tree. So
+    // stepping through ten trees of one file in the circular layout keeps
+    // the circular layout, while each tree still labels itself its own way.
+    const VIEW_CARRY_KEYS = ['layout', 'display', 'font', 'node', 'branch', 'rotation', 'horizontalLabels'];
+
+    // The tree on screen, as it stands, filed under the tree OBJECT: indices
+    // shift when a tree is appended (representative tips), objects do not.
+    // The `tree` key goes: it names the index this view came from, and
+    // applying it back would read as a switch to itself.
+    function rememberTreeView() {
+        if (!_treeViews || !_trees[_treeIndex] || !_root_const) {
+            return;
+        }
+        let state = getViewState();
+        delete state.tree;
+        _treeViews.set(_trees[_treeIndex], state);
+    }
+
+    // What to open a tree with: the view it was left in, or -- a tree not
+    // opened yet -- the current tree's geometry alone.
+    function viewForTree(tree) {
+        let remembered = _treeViews && _treeViews.get(tree);
+        if (remembered) {
+            return remembered;
+        }
+        let current = _root_const ? getViewState() : {};
+        let carried = {};
+        VIEW_CARRY_KEYS.forEach(function (k) {
+            if (current[k] !== undefined) {
+                carried[k] = current[k];
+            }
+        });
+        return carried;
+    }
+
+    // The one way from one tree of the list to another: the tree being left
+    // is remembered first, and the launch config's own view (a shared link's)
+    // never leaks onto the next tree -- _launchConfig is put back afterwards,
+    // so every later switch still opens each tree its own way. `view` is for
+    // a caller that already has one (a hash naming another tree).
+    function switchToTree(index, view) {
+        rememberTreeView();
+        // The tree being left goes back to the way it was PARSED: its collapsed
+        // clades live in the view just recorded, not on its nodes. Leaving the
+        // flags on the object would change the COLOURS it comes back with --
+        // the palette is dealt once per launch, over the values summarizeView
+        // can see, and a tree whose nodes still carried collapse would deal it
+        // over the reduced set and hand every value a different colour. A
+        // shared link into a collapsed view never does that: it opens a freshly
+        // parsed tree, deals over all of it, and collapses afterwards. A tree
+        // coming back must not either. (Measured on the flavivirus demo: the
+        // legend came back re-coloured until this line went in.)
+        if (_trees[_treeIndex]) {
+            clearCollapsedFlags(_trees[_treeIndex]);
+        }
+        let launchConfig = _launchConfig;
+        let cfg = Object.assign({}, launchConfig || {});
+        cfg.view = view || viewForTree(_trees[index]);
+        let handle = launchInto(_container, _trees, index, cfg);
+        _launchConfig = launchConfig;
+        return handle;
+    }
+
     // Shows another tree of the launched list in the same container under
-    // the same config. The tree opens fresh -- its own presets, a clean
-    // view -- the way a new tab does on the desktop. The panel's picker and
-    // previous / next buttons come here, as does the handle's showTree().
+    // the same config: as you left it, or -- never opened -- on its own
+    // presets in the current geometry. The panel's picker and previous /
+    // next buttons come here, as does the handle's showTree().
     function showTree(index) {
         if (!_container) {
             throw new Error(ERROR + 'showTree(): nothing is launched');
@@ -5830,11 +5940,11 @@ function (root, d3, forester, phyloXml) {
         if (index === _treeIndex) {
             return makeViewerHandle();
         }
-        // collapsing is part of the view, and a switched-to tree opens fresh:
-        // nothing collapsed, now or when you come back (Christian, 2026-09-14)
-        clearCollapsedFlags(_trees[_treeIndex]);
-        clearCollapsedFlags(_trees[index]);
-        return launchInto(_container, _trees, index, _launchConfig);
+        // Neither tree's collapsed flags are carried on the nodes: the tree
+        // being left has them recorded in its view and then cleared
+        // (switchToTree), and the one arriving has applyViewState clear and
+        // re-apply its own -- a view is always passed, so that always runs.
+        return switchToTree(index, null);
     }
 
     archaeopteryx.parsePhyloXML = function (data) {
@@ -7637,9 +7747,7 @@ function (root, d3, forester, phyloXml) {
             return;
         }
         if (!initial && Number.isInteger(s.tree) && s.tree !== _treeIndex && s.tree >= 0 && s.tree < _trees.length) {
-            let cfg = Object.assign({}, _launchConfig || {});
-            cfg.view = s;
-            launchInto(_container, _trees, s.tree, cfg);
+            switchToTree(s.tree, s);   // the view given names another tree: it wins over what that tree remembers
             return;
         }
         if ((s.root === 'midpoint' || s.root === 'mad') && _viewOps.root !== s.root
@@ -7791,6 +7899,9 @@ function (root, d3, forester, phyloXml) {
         setValue(idx === 0 ? SEARCH_VALUE2_0 : SEARCH_VALUE2_1, want.value2 ? String(want.value2) : '');
         updateSearchValue2Visibility(idx);
         updateSearchAutocomplete(idx);
+        if (want.value) {
+            openPanelSection('Search');   // a view carrying a search shows it
+        }
         if (idx === 1 && want.value) {
             showSearchB();
         }
@@ -8113,6 +8224,7 @@ function (root, d3, forester, phyloXml) {
     }
 
     function focusSearch() {
+        openPanelSection('Search');   // jumping to a box inside a folded section has to open it
         let f = byId(SEARCH_FIELD_0);
         if (f) {
             f.focus();
@@ -8812,6 +8924,7 @@ function (root, d3, forester, phyloXml) {
     // Search B is folded away until wanted: the '+ Search B' link (which
     // focuses it) or a view that carries a second search.
     function showSearchB() {
+        openPanelSection('Search');
         let wrap = byId(SEARCH_B_WRAP);
         if (wrap) {
             wrap.style.display = '';
@@ -9007,7 +9120,7 @@ function (root, d3, forester, phyloXml) {
 
         let sc = info.type === 'calendar' ? -corr : corr;
 
-        // ---- HPD age bars (internal) + fossil range bars (tips) ----
+        // ---- HPD age bars (internal) + tip bars: fossil ranges, or sampling dates ----
         forEachDisplayed(function (d) {
             if (!d.date || typeof d.date.minimum !== 'number' || typeof d.date.maximum !== 'number'
                 || d.y === undefined) {
@@ -9026,10 +9139,28 @@ function (root, d3, forester, phyloXml) {
             let left = Math.min(xa, xb);
             let w = Math.max(1, Math.abs(xb - xa));
             let y = d.x;
+            // What a TIP's interval means is the axis's to say. On geologic
+            // time it is a fossil's observed range, FAD to LAD, and is drawn
+            // as one below. On CALENDAR time it is the uncertainty of a
+            // sampling date -- a virus sample dated only to its month or year
+            // -- which is the same kind of thing as an internal node's age
+            // interval and is drawn the same way, slimmer, and only when it
+            // HAS a width: a tip dated to the day states {d,d}, and a capped
+            // tick on every such tip is what made the readers throw tip
+            // intervals away until 2026-09-17 (Christian; the desktop alike).
+            let sampledTip = !d.children && info.type === 'calendar';
+            if (sampledTip && !(max > min)) {
+                return;
+            }
             if (d.children) {
                 g.append('rect').attr('x', left).attr('y', y - 3.5)
                     .attr('width', w).attr('height', 7)
                     .attr('fill', HPD_BAR_COLOR);
+            } else if (sampledTip) {
+                g.append('rect').attr('class', 'aptx-sampling-bar')
+                    .attr('x', left).attr('y', y - 2.5)
+                    .attr('width', w).attr('height', 5)
+                    .attr('fill', HPD_BAR_COLOR);
             } else {
                 g.append('rect').attr('x', left).attr('y', y - 2.5)
                     .attr('width', w).attr('height', 5)
@@ -9439,6 +9570,296 @@ function (root, d3, forester, phyloXml) {
         }
     }
 
+    // ---- representative tips ------------------------------------------------
+    //
+    // The desktop's Tools > Select Representative Tips, from the tool row: a
+    // dialog takes a distance cutoff or a target count, the representative to
+    // keep and whether the selected and found tips stay; the tips kept show
+    // as search A's hits, and can be cut out into a new tree in the tree
+    // picker (the desktop's new tab). The choosing is
+    // forester.selectRepresentativeTips, held to the desktop's own results by
+    // test/fixtures/rep-contract.tsv.
+
+    // the dialog's inputs, remembered while the page is open (the desktop
+    // remembers them for its session)
+    let _repsInputs = {byCutoff: true, cutoff: '0.05', target: '100', pickIndex: 0};
+
+    // what the viewer writes onto a tree's nodes, left off a tree cut out of it
+    const VIEW_NODE_FIELDS = ['viewId', 'collapsed', 'x', 'y', 'x0', 'y0', 'id', 'hide', 'hasVis', 'distToRoot',
+        'ux', 'uy', 'uangle', '_style', '_suppDot', '_extLabelText', '_eventText', '_confText', '_blText'];
+
+    // the whole tree's tip count, counted again only when the tree changes
+    // (every change makes new _basicTreeProperties)
+    let _repsTipCount = {properties: null, count: 0};
+
+    function wholeTreeTipCount() {
+        if (_repsTipCount.properties !== _basicTreeProperties) {
+            _repsTipCount = {
+                properties: _basicTreeProperties,
+                count: _root_const ? forester.getAllExternalNodes(_root_const).length : 0
+            };
+        }
+        return _repsTipCount.count;
+    }
+
+    // why representative tips cannot be selected now, or null
+    function representativesBlockedReason() {
+        if (_in_subtree) {
+            return 'return to the whole tree to select representative tips';
+        }
+        if (!_root_const || wholeTreeTipCount() < 3) {
+            return 'the tree needs at least three tips to select representatives';
+        }
+        return null;
+    }
+
+    function repsElement(parent, tag, className, text) {
+        let e = document.createElement(tag);
+        if (className) {
+            e.className = className;
+        }
+        if (text !== undefined) {
+            e.textContent = text;
+        }
+        parent.appendChild(e);
+        return e;
+    }
+
+    function repsButton(parent, label, primary, action) {
+        let b = repsElement(parent, 'button', 'aptx-reps-button' + (primary ? ' aptx-reps-primary' : ''), label);
+        b.type = 'button';
+        b.addEventListener('click', action);
+        return b;
+    }
+
+    // Java's Double.parseDouble and Integer.parseInt, which read the desktop's
+    // fields: null for what they refuse
+    function javaParseDouble(s) {
+        let m = /^([+-]?(?:\d+\.?\d*|\.\d+)(?:[eE][+-]?\d+)?)[fFdD]?$/.exec(s);
+        if (m) {
+            return Number(m[1]);
+        }
+        return /^[+-]?(?:Infinity|NaN)$/.test(s) ? Number(s) : null;
+    }
+
+    function javaParseInt(s) {
+        if (!/^[+-]?\d+$/.test(s)) {
+            return null;
+        }
+        let v = Number(s);
+        return (v < -2147483648 || v > 2147483647) ? null : v;
+    }
+
+    function representativesButtonPressed() {
+        if (representativesBlockedReason()) {
+            return;
+        }
+        // the selected and found tips can be kept; taken now, before the
+        // result replaces search A's hits
+        let protectable = [];
+        let seen = new Set();
+        [_selectedNodes, _foundNodes0, _foundNodes1].forEach(function (nodes) {
+            (nodes || []).forEach(function (n) {
+                if ((!n.children || n.children.length === 0) && !seen.has(n)) {
+                    seen.add(n);
+                    protectable.push(n);
+                }
+            });
+        });
+        showRepresentativesDialog(_treeData, forester.hasUsableBranchLengths(_treeData), protectable);
+    }
+
+    // The desktop's input dialog, its texts and checks included; a distance
+    // cutoff needs branch lengths.
+    function showRepresentativesDialog(phy, hasLengths, protectable) {
+        let shell = makeDialogShell(REPRESENTATIVES_DIALOG, 'Select representative tips', 330);
+        let body = shell.body;
+        body.classList.add('aptx-reps');
+        let startByCutoff = hasLengths && _repsInputs.byCutoff;
+
+        repsElement(body, 'div', 'aptx-reps-lead', 'Select one representative per group of similar tips:');
+        let choice = function (type, label, checked, disabled) {
+            let row = repsElement(body, 'label', 'aptx-reps-choice' + (disabled ? ' aptx-reps-disabled' : ''));
+            let input = repsElement(row, 'input');
+            input.type = type;
+            input.name = REPRESENTATIVES_DIALOG + '_' + type;
+            input.checked = checked;
+            input.disabled = disabled;
+            repsElement(row, 'span', null, label);
+            return input;
+        };
+        let byCutoff = choice('radio', 'By distance cutoff', startByCutoff, !hasLengths);
+        let byTarget = choice('radio', 'By target number of representatives', !startByCutoff, false);
+        if (!hasLengths) {
+            repsElement(body, 'div', 'aptx-reps-note',
+                'This tree has no branch lengths, so only "target number" is available.');
+        }
+
+        repsElement(body, 'div', 'aptx-dialog-head', 'Value');
+        let value = repsElement(body, 'input', 'aptx-reps-input');
+        value.type = 'text';
+        value.spellcheck = false;
+        value.autocomplete = 'off';
+        value.value = startByCutoff ? _repsInputs.cutoff : _repsInputs.target;
+        let hint = repsElement(body, 'div', 'aptx-reps-note');
+
+        repsElement(body, 'div', 'aptx-dialog-head', 'Representative');
+        let pick = repsElement(body, 'select', 'aptx-reps-input');
+        ['Most central (medoid)', 'Most divergent (longest branch)'].forEach(function (label) {
+            repsElement(pick, 'option', null, label);
+        });
+        pick.selectedIndex = _repsInputs.pickIndex;
+
+        let n = protectable.length;
+        let protect = choice('checkbox', n > 0
+            ? 'Keep the ' + n + ' selected/found ' + (n === 1 ? 'tip' : 'tips') + ' (never drop them)'
+            : 'Keep selected/found tips (none are selected)', n > 0, n === 0);
+        protect.parentNode.classList.add('aptx-reps-protect');
+
+        let error = repsElement(body, 'div', 'aptx-reps-error');
+        let sync = function () {
+            hint.textContent = byCutoff.checked
+                ? 'Maximum distance between any two tips kept in the same group.'
+                : 'Approximate number of representative tips to keep.';
+            error.textContent = '';
+        };
+        byCutoff.addEventListener('change', function () {
+            value.value = _repsInputs.cutoff;
+            sync();
+        });
+        byTarget.addEventListener('change', function () {
+            value.value = _repsInputs.target;
+            sync();
+        });
+        sync();
+
+        let submit = function () {
+            let text = value.value.trim();
+            let cutoff = 0;
+            let target = 0;
+            if (byCutoff.checked) {
+                cutoff = javaParseDouble(text);
+                if (cutoff === null) {
+                    error.textContent = 'Please enter a numeric distance cutoff (for example 0.05).';
+                    return;
+                }
+                if (!isFinite(cutoff) || cutoff <= 0) {
+                    error.textContent = 'The distance cutoff must be a positive number.';
+                    return;
+                }
+            } else {
+                target = javaParseInt(text);
+                if (target === null) {
+                    error.textContent = 'Please enter a whole number of representatives (for example 100).';
+                    return;
+                }
+                if (target < 1) {
+                    error.textContent = 'The target number of representatives must be at least 1.';
+                    return;
+                }
+            }
+            // a tree without branch lengths forced the target: that is not a preference
+            if (hasLengths) {
+                _repsInputs.byCutoff = byCutoff.checked;
+            }
+            if (byCutoff.checked) {
+                _repsInputs.cutoff = text;
+            } else {
+                _repsInputs.target = text;
+            }
+            _repsInputs.pickIndex = pick.selectedIndex;
+            shell.dialog.close();
+
+            let options = {
+                pick: pick.selectedIndex === 1 ? forester.REPRESENTATIVE_LONGEST_BRANCH : forester.REPRESENTATIVE_MEDOID,
+                protectedTips: protect.checked ? protectable : []
+            };
+            if (byCutoff.checked) {
+                options.cutoff = cutoff;
+            } else {
+                options.target = target;
+            }
+            let result = forester.selectRepresentativeTips(phy, options);
+            showRepresentativesAsHits(result);
+            showRepresentativesResult(phy, result, byCutoff.checked, cutoff, target, options.pick);
+        };
+        value.addEventListener('keydown', function (event) {
+            if (event.key === 'Enter') {
+                event.preventDefault();
+                submit();
+            }
+        });
+
+        let actions = repsElement(body, 'div', 'aptx-reps-actions');
+        repsButton(actions, 'Cancel', false, function () {
+            shell.dialog.close();
+        });
+        repsButton(actions, 'Select', true, submit);
+        shell.dialog.showModal();
+        value.focus();
+        value.select();
+    }
+
+    // The tips kept, as search A's hits -- the desktop shows them as its
+    // found nodes: A's colour, the hit count, the step-through. The next
+    // search replaces them, and resetting search A clears them.
+    function showRepresentativesAsHits(result) {
+        openPanelSection('Search');   // the tips kept are search A's hits: its navigator has to be visible
+        _foundNodes0 = new Set(result.keptTips);
+        _searchBox0Empty = false;
+        _searchHitIndex = -1;
+        scheduleUpdate(null, 0, true);
+        updateSearchHitNavigation();
+    }
+
+    // The desktop's summary, and its offer of a new tree of the tips kept.
+    function showRepresentativesResult(phy, result, byCutoff, cutoff, target, pick) {
+        let shell = makeDialogShell(REPRESENTATIVES_DIALOG, 'Representative tips selected', 360);
+        shell.body.classList.add('aptx-reps');
+        result.summary.split('\n').forEach(function (line) {
+            repsElement(shell.body, 'div', 'aptx-reps-line', line);
+        });
+        let n = result.keptCount;
+        repsElement(shell.body, 'div', 'aptx-reps-question',
+            'Create a new tree containing only these ' + n + (n === 1 ? ' tip?' : ' tips?'));
+        let actions = repsElement(shell.body, 'div', 'aptx-reps-actions');
+        repsButton(actions, 'Close', false, function () {
+            shell.dialog.close();
+        });
+        let create = repsButton(actions, 'Create tree', true, function () {
+            shell.dialog.close();
+            openRepresentativeTree(phy, result, byCutoff, cutoff, target, pick);
+        });
+        shell.dialog.showModal();
+        create.focus();
+    }
+
+    // The tips kept, cut out into a new tree at the end of the tree picker,
+    // which opens at once: named <parent>_Nreps, its description saying how
+    // it was made, drawn as this tree is (phylogram, aligned or cladogram),
+    // as the desktop's derived tab. This tree is left as it is.
+    function openRepresentativeTree(phy, result, byCutoff, cutoff, target, pick) {
+        let copy = forester.copyTreeKeepingTips(phy, result.keptTips);
+        forester.preOrderTraversalAll(copy, function (n) {
+            VIEW_NODE_FIELDS.forEach(function (f) {
+                delete n[f];
+            });
+        });
+        forester.addParents(copy);
+        let parentName = (typeof phy.name === 'string' && phy.name.length > 0) ? phy.name : null;
+        copy.name = forester.representativeTreeName(parentName, result.keptCount);
+        let provenance = forester.representativeTreeDescription(byCutoff, cutoff, target, pick, result.keptCount,
+            forester.stripShortExtension(parentName), result.tipCount);
+        copy.description = copy.description ? copy.description + ' ' + provenance : provenance;
+
+        _trees.push(copy);
+        // a tree nobody has opened: switchToTree gives it this tree's
+        // geometry, which is what "drawn as the tree was" amounts to --
+        // the display type (phylogram, aligned or cladogram) and the
+        // layout. The tree it came from is remembered as it stands.
+        switchToTree(_trees.length - 1, null);
+    }
+
     function escPressed() {
         if (_in_subtree) {
             _root = _root_const;
@@ -10501,6 +10922,120 @@ function (root, d3, forester, phyloXml) {
         }
     }
 
+    // ============ the panel's sections: what is open, and what fits ========
+    // Three rules, deliberately separate, for hosts with little room to give
+    // (BV-BRC embeds the viewer in a page that already has its own chrome):
+    //
+    //  - DEFAULTS. A tree arrives with the sections that DESCRIBE it open --
+    //    what it can be coloured by, what it shows -- plus Search, which is
+    //    reached for constantly (Christian, 2026-09-16). Folded are the ones
+    //    that are adjustments for later: zoom, sizes, the domain controls.
+    //    Measured on the 13-property BV-BRC demo in a 700px window: 766px of
+    //    panel content becomes 621px, with nothing behind a scroll.
+    //  - MEMORY. What the user opens and closes is theirs, and it outlives
+    //    the tree: kept for the page and in localStorage, like the light/dark
+    //    choice. It is NOT part of a tree's view -- the panel is the user's
+    //    furniture, not a property of the tree -- which is why it is not in
+    //    getViewState, and why a tree switch no longer reopens everything.
+    //  - FIT. Opening a section in a short window folds the section opened
+    //    longest ago, and ONLY while the panel would not otherwise fit. On a
+    //    tall screen it never fires. It is bounded by PIXELS, not by a count
+    //    of open sections: three open sections measure anywhere from 215px to
+    //    562px, so a count would not have bounded the height at all.
+    const PANEL_SECTIONS_KEY = 'aptx-panel-sections';
+    const PANEL_SECTIONS_CLOSED_BY_DEFAULT = ['Zoom', 'Sizes', 'Domain Architectures'];
+
+    function loadPanelSections() {
+        if (_panelSections) {
+            return _panelSections;
+        }
+        _panelSections = {};
+        try {
+            let saved = JSON.parse(localStorage.getItem(PANEL_SECTIONS_KEY));
+            if (saved && typeof saved === 'object') {
+                Object.keys(saved).forEach(function (k) {
+                    if (typeof saved[k] === 'boolean') {
+                        _panelSections[k] = saved[k];
+                    }
+                });
+            }
+        } catch {
+            // no storage (private mode), or junk written by something else:
+            // the defaults are a complete answer on their own
+        }
+        return _panelSections;
+    }
+
+    function savePanelSections() {
+        try {
+            localStorage.setItem(PANEL_SECTIONS_KEY, JSON.stringify(_panelSections || {}));
+        } catch {
+            // the choice just won't survive a reload
+        }
+    }
+
+    // Every collapsible section of a panel, in the order they are drawn.
+    function panelSections(panel) {
+        let out = [];
+        panel.querySelectorAll('fieldset').forEach(function (f) {
+            let lg = f.querySelector(':scope > legend.aptx-legend-toggle');
+            if (lg) {
+                out.push({name: lg.textContent.trim(), fieldset: f});
+            }
+        });
+        return out;
+    }
+
+    function sectionFoldedInitially(name) {
+        let remembered = loadPanelSections()[name];
+        return (typeof remembered === 'boolean')
+            ? remembered : PANEL_SECTIONS_CLOSED_BY_DEFAULT.indexOf(name) >= 0;
+    }
+
+    // By how many pixels the panel's body overflows the room it has.
+    function panelOverflow(panel) {
+        let body = panel.querySelector(':scope > .aptx-body');
+        return body ? (body.scrollHeight - body.clientHeight) : 0;
+    }
+
+    // Keeps the panel to one screen: while it overflows, fold the section
+    // opened longest ago. Never the one just opened -- that is the one the
+    // user asked for -- and never the last one standing.
+    function fitPanelSections(panel, justOpened) {
+        let guard = 0;
+        while (panelOverflow(panel) > 0 && ++guard < 20) {
+            let open = panelSections(panel).filter(function (s) {
+                return !s.fieldset.classList.contains('aptx-collapsed') && s.name !== justOpened;
+            });
+            if (open.length === 0) {
+                return;
+            }
+            open.sort(function (a, b) {
+                return (_panelOpenOrder.get(a.name) || 0) - (_panelOpenOrder.get(b.name) || 0);
+            });
+            open[0].fieldset.classList.add('aptx-collapsed');
+            loadPanelSections()[open[0].name] = true;
+        }
+    }
+
+    // Unfolds a section because something the user just did has to be SEEN
+    // inside it: the search box they jumped to, the hits a tool marked.
+    function openPanelSection(name) {
+        let panel = _container && _container.querySelector(':scope > .aptx-panel');
+        if (!panel) {
+            return;
+        }
+        panelSections(panel).forEach(function (s) {
+            if (s.name === name && s.fieldset.classList.contains('aptx-collapsed')) {
+                s.fieldset.classList.remove('aptx-collapsed');
+                loadPanelSections()[name] = false;
+                _panelOpenOrder.set(name, ++_panelOpenSeq);
+                savePanelSections();
+                fitPanelSections(panel, name);
+            }
+        });
+    }
+
     // ===================== Control-panel glyphs =====================
     // Vector glyphs ported from the desktop Archaeopteryx control panel (its
     // DisplayTypeIcon / ControlButtonIcon / LayoutIcon / ThemeToggleIcon /
@@ -10770,6 +11305,16 @@ function (root, d3, forester, phyloXml) {
             + glyphDot(50, 50, 11);
     }
 
+    // Representative tips: two clades of two tips, one tip of each kept --
+    // the dot. The desktop has it only as a menu item, so it is drawn to
+    // match the midpoint glyph's weight.
+    function glyphRepresentatives() {
+        return '<path d="M10,30 V70 M10,30 H38 M10,70 H38 M38,16 V44 M38,56 V84'
+            + ' M38,16 H66 M38,44 H66 M38,56 H66 M38,84 H66"/>'
+            + glyphDot(84, 16, 10)
+            + glyphDot(84, 84, 10);
+    }
+
     // Build one glyph as an inline <svg>. Stroke weight, caps and joins follow
     // the desktop class each glyph came from.
     function makeGlyph(kind) {
@@ -10794,6 +11339,7 @@ function (root, d3, forester, phyloXml) {
             case 'ladderize_asc': sw = 8; cap = 'round'; body = glyphLadderize(true); break;
             case 'ladderize_desc': sw = 8; cap = 'round'; body = glyphLadderize(false); break;
             case 'midpoint': sw = 8; cap = 'round'; body = glyphMidpoint(); break;
+            case 'representatives': sw = 8; cap = 'round'; body = glyphRepresentatives(); break;
             case 'uncollapse_all': sw = 8.5; cap = 'round'; body = glyphUncollapseAll(); break;
             case 'tree_prev': sw = 9; cap = 'round'; body = glyphChevron(false); break;
             case 'tree_next': sw = 9; cap = 'round'; body = glyphChevron(true); break;
@@ -10985,6 +11531,29 @@ function (root, d3, forester, phyloXml) {
             + '.aptx-keys { display:inline-flex; gap:3px; flex-wrap:wrap; }'
             + '.aptx-kbd { font-family:inherit; font-size:10.5px; line-height:1; padding:3px 5px; min-width:18px; text-align:center; color:var(--p-ink); background:var(--p-surface2); border:1px solid var(--p-line-strong); border-bottom-width:2px; border-radius:4px; }'
             + '.aptx-shortcuts-note { margin:8px 0 0; font-size:10.5px; line-height:1.4; color:var(--p-muted); }'
+            // representative tips: the input dialog and its result
+            + '.aptx-reps { line-height:1.35; }'
+            + '.aptx-reps-lead { margin:0 0 4px; }'
+            + '.aptx-reps-choice { display:flex; align-items:center; gap:6px; padding:2px 0; cursor:pointer; }'
+            + '.aptx-reps-choice input { accent-color:var(--p-accent); width:13px; height:13px; margin:0; flex:none; }'
+            + '.aptx-reps-disabled { color:var(--p-faint); cursor:default; }'
+            + '.aptx-reps-input { display:block; box-sizing:border-box; width:100%; font:inherit; color:var(--p-ink);'
+            + '  background:var(--p-surface2); border:1px solid var(--p-line-strong); border-radius:6px; padding:4px 7px; }'
+            + '.aptx-reps-input:focus { outline:none; border-color:var(--p-accent); box-shadow:0 0 0 3px var(--p-accent-weak); }'
+            + '.aptx-reps-note { margin-top:3px; font-size:10.5px; color:var(--p-muted); }'
+            + '.aptx-reps-protect { margin-top:10px; }'
+            + '.aptx-reps-error { margin-top:6px; font-size:10.5px; color:#e5484d; }'
+            + '.aptx-reps-error:empty { display:none; }'
+            + '.aptx-reps-line { padding:1px 0; }'
+            + '.aptx-reps-question { margin-top:9px; font-weight:600; }'
+            + '.aptx-reps-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:12px; }'
+            + '.aptx-reps-button { font:inherit; font-size:11px; height:26px; padding:0 12px; color:var(--p-ink);'
+            + '  background:var(--p-surface2); border:1px solid var(--p-line-strong); border-radius:6px; cursor:pointer;'
+            + '  transition:background .12s,border-color .12s,color .12s; }'
+            + '.aptx-reps-button:hover,.aptx-reps-primary { background:var(--p-accent-weak); border-color:var(--p-accent);'
+            + '  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-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.
@@ -11123,7 +11692,9 @@ function (root, d3, forester, phyloXml) {
             + '.aptx-panel .aptx-slider-row input[type=range] { flex:1 1 auto; min-width:0; margin:0; }'
             + '.aptx-panel .aptx-linkbtn { background:none; border:0; padding:1px 0 2px; margin:0; font:inherit; font-size:10px; color:var(--p-accent); cursor:pointer; display:block; }'
             + '.aptx-panel .aptx-linkbtn:hover { text-decoration:underline; }'
-            + '.aptx-panel .aptx-toolrow { margin-top:5px; }'
+            // one row, its buttons sharing it evenly, its edges on the zoom rows'
+            + '.aptx-panel .aptx-toolrow { margin-top:5px; display:flex; gap:3px; }'
+            + '.aptx-panel .aptx-toolrow .aptx-gbtn { flex:1 1 0; min-width:0; padding:0; margin:2px 0; }'
             + '.aptx-panel .aptx-searchnav { align-items:center; gap:4px; margin:2px 0 4px; }'
             + '.aptx-panel .aptx-searchnav span { flex:1 1 auto; text-align:center; font-weight:600; font-size:11px; color:var(--p-ink); }'
             + '.aptx-panel .aptx-searchnav .aptx-gbtn:last-child { margin-right:0; }'
@@ -11167,7 +11738,28 @@ function (root, d3, forester, phyloXml) {
             + '.aptx-panel .aptx-hide-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:15px; line-height:1; }'
             + '.aptx-panel .aptx-hide-btn:hover { background:var(--p-accent-weak); color:var(--p-accent-ink); border-color:var(--p-accent); }'
             + '.aptx-panel.aptx-hidden > .aptx-body { display:none; }'
-            + '.aptx-panel.aptx-hidden > .' + PROG_NAME + ' { border-bottom:0; }';
+            + '.aptx-panel.aptx-hidden > .' + PROG_NAME + ' { border-bottom:0; }'
+            // --- compact density (the panelDensity config key) ---------------
+            // Nothing is removed and nothing is hidden: the same controls,
+            // tighter, for a host with little room to give. The width lives
+            // here as well, and panelWidth() returns the same number so the
+            // tree's left margin follows it (leftPanelClearance).
+            + '.aptx-panel.aptx-compact { width:' + PANEL_WIDTH_COMPACT + 'px; font-size:10.5px; }'
+            + '.aptx-panel.aptx-compact fieldset { padding:4px 9px; }'
+            + '.aptx-panel.aptx-compact legend { margin:0 0 3px; }'
+            + '.aptx-panel.aptx-compact .' + PROG_NAME + ' { padding:6px 9px; }'
+            // the title is a fixed 12px, which wrapped onto a second line once
+            // the panel narrowed: it comes down with everything else
+            + '.aptx-panel.aptx-compact .' + PROGNAMELINK + ' { font-size:10.5px; }'
+            + '.aptx-panel.aptx-compact .aptx-checkgrid { gap:2px 8px; }'
+            + '.aptx-panel.aptx-compact .aptx-field-label { margin:5px 0 2px; }'
+            + '.aptx-panel.aptx-compact .aptx-subhead { margin:4px 0 2px; }'
+            + '.aptx-panel.aptx-compact input[type=range] { margin:1px 0 6px; }'
+            + '.aptx-panel.aptx-compact .aptx-slider-row { margin:2px 0; }'
+            + '.aptx-panel.aptx-compact input[type=button], .aptx-panel.aptx-compact .aptx-gbtn { height:22px; margin:1px 2px 1px 0; }'
+            + '.aptx-panel.aptx-compact .aptx-search-row input[type=text], .aptx-panel.aptx-compact .aptx-search-row input[type=button] { height:24px; }'
+            + '.aptx-panel.aptx-compact .aptx-search-menus select { height:22px; }'
+            + '.aptx-panel.aptx-compact .aptx-toolrow { margin-top:3px; }';
         let style = document.createElement('style');
         style.id = PANEL_STYLE_ID;
         style.textContent = css;
@@ -11256,6 +11848,7 @@ function (root, d3, forester, phyloXml) {
         // Collapsible sections: wrap each titled fieldset's content in a body
         // element (so collapsing hides everything under the legend, including
         // bare text labels like the slider captions) and toggle it via the legend.
+        let initiallyOpen = [];
         let fieldsets = body.querySelectorAll('fieldset');
         for (let i = 0; i < fieldsets.length; ++i) {
             let fieldset = fieldsets[i];
@@ -11273,10 +11866,34 @@ function (root, d3, forester, phyloXml) {
             }
             fieldset.appendChild(fsBody);
             legend.classList.add('aptx-legend-toggle');
+            let name = legend.textContent.trim();
+            if (sectionFoldedInitially(name)) {
+                fieldset.classList.add('aptx-collapsed');
+            } else {
+                initiallyOpen.push(name);
+            }
             legend.addEventListener('click', function () {
-                fieldset.classList.toggle('aptx-collapsed');
+                let opened = !fieldset.classList.toggle('aptx-collapsed');
+                loadPanelSections()[name] = !opened;
+                if (opened) {
+                    _panelOpenOrder.set(name, ++_panelOpenSeq);
+                    fitPanelSections(panel, name);
+                }
+                savePanelSections();
             });
         }
+        // What arrived open counts as opened, oldest at the BOTTOM: a panel is
+        // read top-down, so when a short window forces something to fold on
+        // arrival it should be the last section rather than the one describing
+        // the tree at the top. Anything the user opens later is newer than all
+        // of these, and folds after them.
+        for (let i = initiallyOpen.length - 1; i >= 0; --i) {
+            _panelOpenOrder.set(initiallyOpen[i], ++_panelOpenSeq);
+        }
+        // A remembered set of open sections can be taller than this window,
+        // so the fit rule runs once on arrival too -- with no section to
+        // spare, since the user opened none of them just now.
+        fitPanelSections(panel, null);
 
         // Apply the current light/dark choice to this (and every) panel.
         applyPanelTheme();
@@ -11943,6 +12560,9 @@ function (root, d3, forester, phyloXml) {
 
         if (c0) {
             c0.classList.add('aptx-panel');
+            if (_settings.panelDensity === 'compact') {
+                c0.classList.add('aptx-compact');
+            }
             setStyles(c0, {
                 'position': 'absolute',
                 'left': CONTROLS_0_LEFT_DEFAULT,
@@ -12208,6 +12828,8 @@ function (root, d3, forester, phyloXml) {
 
         on(MIDPOINT_ROOT_BUTTON, 'click', midpointRootButtonPressed);
 
+        on(REPRESENTATIVES_BUTTON, 'click', representativesButtonPressed);
+
         // Search Controls
         // ---------------
 
@@ -12415,9 +13037,9 @@ function (root, d3, forester, phyloXml) {
 
         // A file with several trees: previous / picker / next in one row,
         // the picker listing every tree by its name (or its number). Each
-        // opens fresh in the same container (showTree). The end buttons are
-        // disabled at the ends: the panel is rebuilt per tree, so the
-        // state set here is always current.
+        // opens in the same container as you left it (showTree). The end
+        // buttons are disabled at the ends: the panel is rebuilt per tree,
+        // so the state set here is always current.
         function makeTreePicker() {
             let n = _trees.length;
             let row = document.createElement('div');
@@ -12656,6 +13278,7 @@ function (root, d3, forester, phyloXml) {
             h = h.concat(makeGlyphButton('up_one_level', RETURN_TO_SUPERTREE_BUTTON_BY_ONE, 'move up by one level towards the complete tree (if in a sub-tree)'));
             h = h.concat(makeGlyphButton('uncollapse_all', UNCOLLAPSE_ALL_BUTTON, 'uncollapse all'));
             h = h.concat(makeGlyphButton('midpoint', MIDPOINT_ROOT_BUTTON, 're-root the tree: MAD or midpoint'));
+            h = h.concat(makeGlyphButton('representatives', REPRESENTATIVES_BUTTON, 'select representative tips: one per group of close tips'));
             h = h.concat('</div>');
             h = h.concat('</fieldset>');
             return h;
@@ -13020,6 +13643,16 @@ function (root, d3, forester, phyloXml) {
             rerootButton.title = blocked
                 || (_in_subtree ? 'return to the whole tree to re-root it' : 're-root the tree: MAD or midpoint');
         }
+        let repsButton = byId(REPRESENTATIVES_BUTTON);
+        if (repsButton) {
+            let repsBlocked = representativesBlockedReason();
+            if (repsBlocked) {
+                disableButton(repsButton);
+            } else {
+                enableButton(repsButton);
+            }
+            repsButton.title = repsBlocked || 'select representative tips: one per group of close tips';
+        }
         let b;
         if (_foundNodes0 && !_searchBox0Empty) {
             b = byId(RESET_SEARCH_A_BTN);