archaeopteryx 3.7.0 → 3.8.0

package/archaeopteryx.js

@@ -20,7 +20,7 @@
  *
  */
 
-// v 3.7.0
+// 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.7.0';
+    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';
@@ -517,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;
@@ -4864,6 +4869,7 @@ function (root, d3, forester, phyloXml) {
         'nhExportWriteConfidences',
         'nodeLabels',
         'onViewChange',
+        'panelDensity',
         'pngExportScale',
         'rootOffset',
         'supportDotMinimum',
@@ -4939,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
@@ -5283,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;
         }
@@ -5549,6 +5566,7 @@ function (root, d3, forester, phyloXml) {
         _trees = [];
         _treeIndex = 0;
         _launchConfig = null;
+        _treeViews = null;
         _lastViewEncoded = undefined;
         _viewOps = {order: null, root: null};
         _basicTreeProperties = null;
@@ -5632,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);
@@ -5818,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');
@@ -5832,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) {
@@ -7639,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
@@ -7793,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();
         }
@@ -8115,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();
@@ -8814,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 = '';
@@ -9009,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) {
@@ -9028,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)
@@ -9675,6 +9804,7 @@ function (root, d3, forester, phyloXml) {
     // 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;
@@ -9722,14 +9852,12 @@ function (root, d3, forester, phyloXml) {
             forester.stripShortExtension(parentName), result.tipCount);
         copy.description = copy.description ? copy.description + ' ' + provenance : provenance;
 
-        let display = _state.phylogram ? (_state.alignPhylogram ? 'aligned' : 'phylogram') : 'cladogram';
-        clearCollapsedFlags(_trees[_treeIndex]);
         _trees.push(copy);
-        let launchConfig = _launchConfig;
-        let cfg = Object.assign({}, launchConfig || {});
-        cfg.view = {display: display};
-        launchInto(_container, _trees, _trees.length - 1, cfg);
-        _launchConfig = launchConfig;   // later switches open each tree its own way
+        // 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() {
@@ -10794,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 /
@@ -11496,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;
@@ -11585,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];
@@ -11602,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();
@@ -12272,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,
@@ -12746,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');