archaeopteryx 3.11.0 → 3.13.0

package/archaeopteryx.js

@@ -20,7 +20,7 @@
  *
  */
 
-// v 3.11.0
+// v 3.13.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.11.0';
+    const VERSION = '3.13.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';
@@ -363,6 +363,7 @@ function (root, d3, forester, phyloXml) {
     const DOWNLOAD_BUTTON = 'dl_b';
     const DYNAHIDE_CB = 'dynahide_cb';
     const MSA_CB = 'msa_cb';
+    const MSA_LOGO_CB = 'msa_logo_cb';
     const HEATMAP_CB = 'heatmap_cb';
     const HEATMAP_CONTROLS = 'heatmap_controls';
     const HEATMAP_ORDER_SELECT = 'heatmap_order';
@@ -422,8 +423,6 @@ function (root, d3, forester, phyloXml) {
     const RETURN_TO_SUPERTREE_BUTTON_BY_ONE = 'ret1_b';
     const SEARCH_FIELD_0 = 'sf0';
     const SEARCH_FIELD_1 = 'sf1';
-    const SEARCH_B_WRAP = 'search_b_wrap';
-    const SEARCH_B_TOGGLE = 'search_b_tgl';
     const SEARCH_NAV_ROW = 'searchnavrow';
     const SEARCH_NAV_PREV = 'searchnavprev';
     const SEARCH_NAV_NEXT = 'searchnavnext';
@@ -547,7 +546,11 @@ function (root, d3, forester, phyloXml) {
     const MSA_MAX_VIEWPORT_FRACTION = 0.6;// nor grows past this share of the display
     const MSA_CONS_BAR_H = 22;            // conservation bar band height
     const MSA_CONS_TOP_GAP = 4;
-    const MSA_BOTTOM_RESERVE = 56;        // vertical room under the rows (conservation + ruler)
+    const MSA_CONS_ROW_H = 13;            // the consensus letter row
+    const MSA_RULER_H = 17;               // the column ruler under it
+    const MSA_LOGO_H = 46;                // the sequence logo's stack, full height
+    const MSA_LOGO_CAP_H = 11;            // ... and the caption line above it
+    const MSA_LOGO_FONT_PX = 24;          // the size logo glyphs are measured at, then scaled
     const MSA_NAV_RESERVE = 46;           // ... plus the navigation bar floating at the viewport bottom
     const MSA_MIN_TREE_PX = 220;          // the tree itself never shrinks below this
     let _msaColOffset = 0;                // first shown alignment column (0-based)
@@ -4083,8 +4086,15 @@ function (root, d3, forester, phyloXml) {
     };
 
 
+    // A branch length of ZERO is a length and gets a label. Testing the
+    // number for truthiness read 0 as "no branch length", so the one branch
+    // whose length is worth pointing out -- two identical sequences, a
+    // multifurcation written out as a run of zero-length branches -- was the
+    // one drawn bare. Same mistake the phyloXML writer was making until
+    // phyloxml 1.1.1; the desktop cannot make it at all, because it marks an
+    // absent length with a sentinel (-1024) rather than with zero.
     let makeBranchLengthLabel = function (phynode) {
-        if (phynode.branch_length) {
+        if (phynode.branch_length !== undefined && phynode.branch_length !== null) {
             if (_state.phylogram && _state.minBranchLengthValueToShow && phynode.branch_length < _state.minBranchLengthValueToShow) {
                 return;
             }
@@ -4112,7 +4122,9 @@ function (root, d3, forester, phyloXml) {
         if (_state.showConfidenceValues && support.length > 0
             && (!_state.minConfidenceValueToShow || support.some(function (c) { return c.value >= _state.minConfidenceValueToShow; }))) {
             support.forEach(function (c) {
-                if (c.value) {
+                // a support of 0 is a support value, and a telling one: the
+                // MAD branch above already tested it this way
+                if (typeof c.value === 'number' && isFinite(c.value)) {
                     parts.push(+c.value.toFixed(CONFIDENCE_VALUE_DIGITS_DEFAULT));
                 }
             });
@@ -4927,6 +4939,7 @@ function (root, d3, forester, phyloXml) {
     const STATE_KEYS = [
         'layout',
         'showMsa',
+        'showMsaLogo',
         'showHeatmap',
         'heatmapColumnOrder',
         'heatmapManualOrder',
@@ -5169,6 +5182,12 @@ function (root, d3, forester, phyloXml) {
         if (_state.showHeatmap === undefined) {
             _state.showHeatmap = false;
         }
+        // The logo is a summary of the alignment, not a second view of the
+        // tree, so it waits to be asked for: an alignment opens showing its
+        // residues, which is what a reader came for.
+        if (_state.showMsaLogo === undefined) {
+            _state.showMsaLogo = false;
+        }
         // The columns' order. Left unset it is resolved from the data on first
         // use (heatmapMode / forester.heatmapDefaultOrder): a clustered order,
         // because reading block structure is what a heat map beside a tree is
@@ -6824,6 +6843,64 @@ function (root, d3, forester, phyloXml) {
             && _basicTreeProperties.maxMolSeqLength > 0;
     }
 
+    // The logo replaces the conservation bar and the consensus row rather
+    // than joining them: a stack's height IS the column's conservation and its
+    // top letter IS the consensus, so drawing all three would say the same
+    // thing three times and take three times the room.
+    function msaLogoShown() {
+        return _state.showMsaLogo === true && msaShown();
+    }
+
+    // What the strip under the alignment needs. The conservation form is the
+    // 56 px this was a constant for; the logo form is taller and drops the
+    // consensus row it subsumes.
+    function msaBottomReserve() {
+        return MSA_CONS_TOP_GAP
+            + (msaLogoShown() ? MSA_LOGO_CAP_H + MSA_LOGO_H : MSA_CONS_BAR_H + MSA_CONS_ROW_H)
+            + MSA_RULER_H;
+    }
+
+    // Logo letters are drawn at a fixed size and then scaled to their cell and
+    // to their share of the stack, so what is needed is how much ink this face
+    // actually puts on the page for THIS letter -- measured, not assumed: a
+    // 0.6 advance and a 0.72 cap height are true of some monospace faces and
+    // not others, and a letter scaled by the wrong constant overflows its
+    // column.
+    //
+    // Per letter, because a logo's letters must each fill their slice exactly:
+    // measured off one glyph, Q and G hung their descenders through the
+    // baseline and across the ruler, and every letter without a descender sat
+    // a little short. What is scaled to the slice is the glyph's INK BOX
+    // (ascent + descent), and the baseline is then placed so that box lands
+    // inside the slice.
+    let _logoGlyphs = {};
+
+    function logoGlyphMetrics(ch) {
+        if (_logoGlyphs[ch]) {
+            return _logoGlyphs[ch];
+        }
+        if (!_legendMeasureCtx) {
+            _legendMeasureCtx = document.createElement('canvas').getContext('2d');
+        }
+        _legendMeasureCtx.font = MSA_LOGO_FONT_PX + 'px monospace';
+        let m = _legendMeasureCtx.measureText(ch);
+        let ascent = m.actualBoundingBoxAscent;
+        let descent = m.actualBoundingBoxDescent;
+        if (!(ascent > 0)) {
+            ascent = MSA_LOGO_FONT_PX * 0.72;   // a face that will not say
+            descent = 0;
+        }
+        if (!(descent > 0)) {
+            descent = 0;                        // no descender, or none reported
+        }
+        _logoGlyphs[ch] = {
+            width: m.width || (MSA_LOGO_FONT_PX * 0.6),
+            ascent: ascent,
+            descent: descent
+        };
+        return _logoGlyphs[ch];
+    }
+
     function msaRowSeq(d) {
         if (d.sequences && d.sequences.length > 0) {
             let s = d.sequences[0];
@@ -7014,12 +7091,15 @@ function (root, d3, forester, phyloXml) {
                 .attr('stroke', ink).attr('stroke-opacity', 0.7).attr('stroke-width', 1);
         }
 
-        // conservation band (consensus identity) + consensus letters
-        // scored over the visible WINDOW only -- the whole alignment would
-        // cost rows x total per redraw; indices below are window-relative
-        let cons = forester.msaConservation(tips.map(function (t) {
+        // Scored over the visible WINDOW only -- the whole alignment would
+        // cost rows x total per redraw; indices below are window-relative.
+        // The rows are the tips ON SCREEN: enter a clade and the summary is
+        // that clade's, which is the whole point of putting it next to a tree.
+        let windowRows = tips.map(function (t) {
             return msaRowSeq(t).slice(offset, offset + visible);
-        }), visible, 'identity', isNuc);
+        });
+        let logo = msaLogoShown() ? forester.msaLogo(windowRows, visible, isNuc) : null;
+        let cons = logo ? null : forester.msaConservation(windowRows, visible, 'identity', isNuc);
         // A faint dashed guide from each tip -- from the end of its label, or
         // from the node itself when the label is hidden -- across to its row
         // in the track, so a row can be read back to its sequence without
@@ -7055,34 +7135,91 @@ function (root, d3, forester, phyloXml) {
         }
 
         // ---- conservation, consensus, ruler: a FLOATING strip ----
-        let strip = floatStripGroup('aptx-msa-strip', _clusterH, MSA_BOTTOM_RESERVE);
+        let stripH = msaBottomReserve();
+        let strip = floatStripGroup('aptx-msa-strip', _clusterH, stripH);
         strip.append('rect').attr('x', Math.round(originX) - 2).attr('y', _clusterH)
-            .attr('width', trackW + 4).attr('height', MSA_BOTTOM_RESERVE)
+            .attr('width', trackW + 4).attr('height', stripH)
             .attr('fill', _state.backgroundColorDefault);
         let consTop = _clusterH + MSA_CONS_TOP_GAP;
-        strip.append('rect').attr('x', Math.round(originX)).attr('y', consTop)
-            .attr('width', trackW).attr('height', MSA_CONS_BAR_H)
-            .attr('fill', ink).attr('fill-opacity', 0.08);
-        for (let i = 0; i < visible; ++i) {
-            let score = cons.scores[i] || 0;
-            if (score <= 0) {
-                continue;
+        // A caption on the panel's own background, so it stays readable over
+        // whatever the band happens to draw underneath it.
+        let caption = function (txt, y) {
+            if (trackW <= 170) {
+                return;
             }
-            let bh = Math.max(1, Math.round(score * MSA_CONS_BAR_H));
-            let x0 = Math.round(originX + (i * cw));
-            let x1 = Math.round(originX + ((i + 1) * cw));
-            strip.append('rect').attr('x', x0).attr('y', (consTop + MSA_CONS_BAR_H) - bh)
-                .attr('width', Math.max(1, x1 - x0)).attr('height', bh)
-                .attr('fill', ink).attr('fill-opacity', 0.7);
-        }
-        if (trackW > 170) {
-            strip.append('text').attr('x', Math.round(originX) + trackW - 3).attr('y', consTop + 9)
+            let font = '8px ' + FONT_DEFAULTS;
+            let w = legendTextWidth(txt, font) + 6;
+            let xe = Math.round(originX) + trackW - 3;
+            strip.append('rect').attr('x', xe - w).attr('y', y - 8)
+                .attr('width', w).attr('height', 11)
+                .attr('fill', _state.backgroundColorDefault).attr('fill-opacity', 0.85);
+            strip.append('text').attr('x', xe - 3).attr('y', y)
                 .attr('text-anchor', 'end')
                 .style('font-size', '8px').style('fill', ink).style('fill-opacity', 0.9)
-                .text('Consensus identity (n = ' + n + ')');
-        }
-        let consensusRow = cw >= 7;
-        if (consensusRow) {
+                .text(txt);
+        };
+        if (logo) {
+            // Each column a stack of letters: total height the column's
+            // information content in bits, each letter's share its frequency.
+            // Least frequent at the BOTTOM, so the eye reads the consensus
+            // off the top of the stack.
+            //
+            // The caption gets a line of its own above the stacks (hence the
+            // CAP_H here). Laid over them it washed out the very letters it
+            // was labelling, which is a poor trade for eleven pixels.
+            let floor = consTop + MSA_LOGO_CAP_H + MSA_LOGO_H;
+            strip.append('line')
+                .attr('x1', Math.round(originX)).attr('x2', Math.round(originX) + trackW)
+                .attr('y1', floor).attr('y2', floor)
+                .attr('stroke', ink).attr('stroke-opacity', 0.5).attr('stroke-width', 1);
+            for (let i = 0; i < visible; ++i) {
+                let col = logo.columns[i];
+                if (!col || !(col.height > 0)) {
+                    continue;
+                }
+                let x0 = Math.round(originX + (i * cw));
+                let x1 = Math.round(originX + ((i + 1) * cw));
+                let y = floor;
+                for (let k = col.letters.length - 1; k >= 0; --k) {
+                    let letter = col.letters[k];
+                    let hpx = (letter.h / logo.maxBits) * MSA_LOGO_H;
+                    if (hpx < 0.5) {
+                        continue;   // under half a pixel of ink: nothing to draw
+                    }
+                    let glyph = logoGlyphMetrics(letter.ch);
+                    let sy = hpx / (glyph.ascent + glyph.descent);
+                    let rgb = forester.msaResidueRgb(letter.ch, isNuc);
+                    strip.append('text')
+                        .attr('transform', 'translate(' + (x0 + ((x1 - x0) / 2)) + ','
+                            + (y - (glyph.descent * sy)) + ')'
+                            + ' scale(' + (Math.max(1, x1 - x0) / glyph.width) + ',' + sy + ')')
+                        .attr('text-anchor', 'middle')
+                        .style('font-family', 'monospace')
+                        .style('font-size', MSA_LOGO_FONT_PX + 'px')
+                        .style('fill', rgb === null ? ink : 'rgb(' + rgb.join(',') + ')')
+                        .text(letter.ch);
+                    y -= hpx;
+                }
+            }
+            caption('Sequence logo \u2014 0 to ' + logo.maxBits.toFixed(1)
+                + ' bits (n = ' + n + ')', consTop + 8);
+        } else {
+            strip.append('rect').attr('x', Math.round(originX)).attr('y', consTop)
+                .attr('width', trackW).attr('height', MSA_CONS_BAR_H)
+                .attr('fill', ink).attr('fill-opacity', 0.08);
+            for (let i = 0; i < visible; ++i) {
+                let score = cons.scores[i] || 0;
+                if (score <= 0) {
+                    continue;
+                }
+                let bh = Math.max(1, Math.round(score * MSA_CONS_BAR_H));
+                let x0 = Math.round(originX + (i * cw));
+                let x1 = Math.round(originX + ((i + 1) * cw));
+                strip.append('rect').attr('x', x0).attr('y', (consTop + MSA_CONS_BAR_H) - bh)
+                    .attr('width', Math.max(1, x1 - x0)).attr('height', bh)
+                    .attr('fill', ink).attr('fill-opacity', 0.7);
+            }
+            caption('Consensus identity (n = ' + n + ')', consTop + 9);
             for (let i = 0; i < visible; ++i) {
                 let cc = cons.consensus[i];
                 if (!cc) {
@@ -7099,7 +7236,7 @@ function (root, d3, forester, phyloXml) {
 
         // the 1-based column ruler: absolute column numbers at nice steps,
         // and always the first and last column when their edge is in view
-        let rulerY = consTop + MSA_CONS_BAR_H + (consensusRow ? 13 : 3);
+        let rulerY = consTop + (logo ? MSA_LOGO_CAP_H + MSA_LOGO_H : MSA_CONS_BAR_H + MSA_CONS_ROW_H);
         strip.append('line').attr('x1', Math.round(originX)).attr('x2', Math.round(originX) + trackW)
             .attr('y1', rulerY).attr('y2', rulerY)
             .attr('stroke', ink).attr('stroke-opacity', 0.8).attr('stroke-width', 1);
@@ -7228,8 +7365,11 @@ function (root, d3, forester, phyloXml) {
                 msaScrollTo(Infinity);
             });
 
-            // "column [ 1234 ] - 1357 of 30,000": the box is the left edge of
-            // the window and takes a column to jump to; the rest reads back
+            // "column [ 1234 ] 1357 of 30,000": the box is the left edge of
+            // the window and takes a column to jump to; the rest reads back.
+            // No dash between them -- the box's own border already separates
+            // the two numbers, and a dash sitting against it read as a minus
+            // sign on the number after it.
             let read = document.createElement('span');
             read.className = 'aptx-msa-nav-read';
             let lbl = document.createElement('span');
@@ -7279,7 +7419,7 @@ function (root, d3, forester, phyloXml) {
                 _msaNav._jump.value = String(offset + 1);
             }
             _msaNav._jump.max = String(total);
-            _msaNav._tail.textContent = '\u2013 ' + (offset + visible).toLocaleString()
+            _msaNav._tail.textContent = (offset + visible).toLocaleString()
                 + ' of ' + total.toLocaleString();
             let atStart = offset <= 0;
             let atEnd = offset >= total - visible;
@@ -7357,6 +7497,11 @@ function (root, d3, forester, phyloXml) {
         scheduleUpdate(null, 0);
     }
 
+    function msaLogoCbClicked() {
+        _state.showMsaLogo = getCheckboxValue(MSA_LOGO_CB);
+        scheduleUpdate(null, 0);
+    }
+
     // ===================== Heat map =====================
     // The desktop's MATRIX annotation columns: one cell per (tip, numeric
     // per-tip property) to the right of the labels, every column painted on
@@ -8930,6 +9075,9 @@ function (root, d3, forester, phyloXml) {
         }
         if (_basicTreeProperties.alignedMolSeqs === true && _basicTreeProperties.maxMolSeqLength > 0) {
             s.msa = _state.showMsa === true;
+            if (_state.showMsaLogo === true) {
+                s.msaLogo = true;
+            }
         }
         if (heatmapAvailable()) {
             s.heatmap = _state.showHeatmap === true;
@@ -9058,6 +9206,9 @@ function (root, d3, forester, phyloXml) {
         if (typeof s.msa === 'boolean') {
             _state.showMsa = s.msa;
         }
+        if (typeof s.msaLogo === 'boolean') {
+            _state.showMsaLogo = s.msaLogo;
+        }
         if (typeof s.heatmap === 'boolean') {
             _state.showHeatmap = s.heatmap;
         }
@@ -9150,9 +9301,6 @@ function (root, d3, forester, phyloXml) {
         if (want.value) {
             openPanelSection('Search');   // a view carrying a search shows it
         }
-        if (idx === 1 && want.value) {
-            showSearchB();
-        }
     }
 
     // The panel's controls from the state, after applyViewState
@@ -9168,6 +9316,7 @@ function (root, d3, forester, phyloXml) {
             }
         });
         setCheckboxValue(MSA_CB, _state.showMsa === true);
+        setCheckboxValue(MSA_LOGO_CB, _state.showMsaLogo === true);
         setCheckboxValue(HEATMAP_CB, _state.showHeatmap === true);
         syncHeatmapControls();
         setCheckboxValue(TIME_AXIS_CB, _state.showTimeAxis === true);
@@ -9241,10 +9390,20 @@ function (root, d3, forester, phyloXml) {
     // Lists are comma-joined, booleans 1 / 0, the two searches flattened
     // to a / af / am / a2 and b / bf / bm / b2. Made for a URL hash, where
     // none of these characters needs escaping.
-    const VIEW_TEXT_KEYS = ['layout', 'display', 'order', 'root', 'colorBy', 'shapeBy', 'domainLabels', 'combine'];
+    // Every key getViewState writes has to be here, or a view survives
+    // getViewState/applyViewState (what an embedder uses) and is silently
+    // dropped from the URL hash (what "Copy link to this view" produces).
+    // 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'];
     const VIEW_INT_KEYS = ['tree', 'subtree', 'rotation', 'domainEvalue'];
     const VIEW_NUMBER_KEYS = ['font', 'node', 'branch'];
-    const VIEW_BOOL_KEYS = ['horizontalLabels', 'msa', 'domains', 'domainGlow', 'timeAxis', 'timeGrid', 'matchCase', 'inverse'];
+    const VIEW_BOOL_KEYS = ['horizontalLabels', 'msa', 'msaLogo', 'heatmap', 'domains', 'domainGlow',
+        'timeAxis', 'timeGrid', 'matchCase', 'inverse'];
+    // Lists of strings, comma-joined. A property ref carries ':' but never a
+    // comma, and encodeViewValue leaves both readable in a hash.
+    const VIEW_LIST_KEYS = ['heatmapManual'];
     const VIEW_SEARCH_KEYS = [['searchA', 'a'], ['searchB', 'b']];
 
     function encodeViewValue(v) {
@@ -9278,6 +9437,12 @@ function (root, d3, forester, phyloXml) {
         if (Array.isArray(state.collapsed) && state.collapsed.length > 0) {
             put('collapsed', state.collapsed.join(','));
         }
+        VIEW_LIST_KEYS.forEach(function (k) {
+            let v = state[k];
+            if (Array.isArray(v) && v.length > 0) {
+                parts.push(k + '=' + v.map(encodeViewValue).join(','));
+            }
+        });
         VIEW_BOOL_KEYS.forEach(function (k) {
             if (typeof state[k] === 'boolean') {
                 put(k, state[k] ? 1 : 0);
@@ -9344,6 +9509,16 @@ function (root, d3, forester, phyloXml) {
                 return parseInt(x, 10);
             });
         }
+        VIEW_LIST_KEYS.forEach(function (k) {
+            if (raw[k] !== undefined) {
+                let list = raw[k].split(',').filter(function (x) {
+                    return x.length > 0;
+                });
+                if (list.length > 0) {
+                    state[k] = list;
+                }
+            }
+        });
         VIEW_SEARCH_KEYS.forEach(function (sk) {
             let p = sk[1];
             if (raw[p]) {
@@ -10261,30 +10436,6 @@ function (root, d3, forester, phyloXml) {
         });
     }
 
-    // Search B starts hidden to keep the panel compact; one click (or a
-    // configured initial value) reveals it, and it stays revealed.
-    // 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 = '';
-        }
-        let tgl = byId(SEARCH_B_TOGGLE);
-        if (tgl) {
-            tgl.style.display = 'none';
-        }
-    }
-
-    function revealSearchB() {
-        showSearchB();
-        let f = byId(SEARCH_FIELD_1);
-        if (f) {
-            f.focus();
-        }
-    }
-
     // ===================== 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
@@ -10324,7 +10475,7 @@ function (root, d3, forester, phyloXml) {
         // own bottom rows (conservation, consensus, ruler) must end above it
         // or the bar covers them -- the old bare slider did exactly that.
         // The scale bar sits in the same band, under the tree's last row.
-        return Math.max(msaShown() ? MSA_BOTTOM_RESERVE + MSA_NAV_RESERVE : 0, timeAxisBottomReserve(),
+        return Math.max(msaShown() ? msaBottomReserve() + MSA_NAV_RESERVE : 0, timeAxisBottomReserve(),
             heatmapBottomReserve(),
             scaleBarShown() && !radialDisplay() ? SCALE_BAR_RESERVE : 0);
     }
@@ -11273,8 +11424,6 @@ function (root, d3, forester, phyloXml) {
         }
         if (_state.searchBinitialValue) {
             setValue(SEARCH_FIELD_1, _state.searchBinitialValue);
-            revealSearchB();
-
         } else {
             setValue(SEARCH_FIELD_1, '');
         }
@@ -11793,6 +11942,11 @@ function (root, d3, forester, phyloXml) {
         if (msaCb) {
             msaCb.disabled = radialDisplay();
         }
+        let msaLogoCb = byId(MSA_LOGO_CB);
+        if (msaLogoCb) {
+            // nothing to summarize while the alignment itself is not drawn
+            msaLogoCb.disabled = radialDisplay() || _state.showMsa !== true;
+        }
         let heatCb = byId(HEATMAP_CB);
         if (heatCb) {
             // circular draws the columns as rings; only unrooted cannot
@@ -12366,7 +12520,13 @@ function (root, d3, forester, phyloXml) {
             let open = panelSections(panel).filter(function (s) {
                 return !s.fieldset.classList.contains('aptx-collapsed') && s.name !== justOpened;
             });
-            if (open.length === 0) {
+            // Never the one just opened -- that is the one the user asked
+            // for -- and never the last one standing. Without the second
+            // clause a container dragged short enough empties the panel down
+            // to a stack of legends, taking away the section being worked in.
+            // (justOpened is itself open and excluded from this list, so when
+            // it is set the last one standing is already protected above.)
+            if (open.length === 0 || (!justOpened && open.length === 1)) {
                 return;
             }
             open.sort(function (a, b) {
@@ -13073,8 +13233,6 @@ function (root, d3, forester, phyloXml) {
             + '.aptx-panel .aptx-slider-row { display:flex; align-items:center; gap:7px; margin:3px 0; }'
             + '.aptx-panel .aptx-slider-row label { flex:0 0 42px; font-size:10px; color:var(--p-muted); }'
             + '.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; }'
             // 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; }'
@@ -13282,6 +13440,20 @@ function (root, d3, forester, phyloXml) {
         // spare, since the user opened none of them just now.
         fitPanelSections(panel, null);
 
+        // ... and again whenever the room changes. The panel is held to its
+        // container's height, so a window dragged shorter (or a host resizing
+        // the div around us) can push an arrangement that fitted a moment ago
+        // into a scrollbar. Watching the CONTAINER, not the panel: folding a
+        // section changes the panel's height and would re-enter the observer.
+        // One-way on purpose -- growing the window back does NOT reopen what
+        // was folded. What is open is the user's choice; only running out of
+        // room may overrule it, and then only far enough to fit.
+        if (typeof ResizeObserver !== 'undefined' && panel.parentElement) {
+            new ResizeObserver(function () {
+                fitPanelSections(panel, null);
+            }).observe(panel.parentElement);
+        }
+
         // Apply the current light/dark choice to this (and every) panel.
         applyPanelTheme();
     }
@@ -13426,7 +13598,8 @@ function (root, d3, forester, phyloXml) {
         if (d.name) {
             text += 'Name: ' + d.name + '<br>';
         }
-        if (d.branch_length && !(unrooted && d.children)) {
+        if (d.branch_length !== undefined && d.branch_length !== null
+            && !(unrooted && d.children)) {
             text += (unrooted ? 'Branch length: ' : 'Distance to parent: ') + d.branch_length + '<br>';
         }
         let date = dateText(d.date);
@@ -14068,7 +14241,6 @@ function (root, d3, forester, phyloXml) {
         on(CONFIDENCE_VALUES_CB, 'click', confidenceValuesCbClicked);
         on(SUPPORT_DOTS_CB, 'click', supportDotsCbClicked);
         on(MAD_VALUES_CB, 'click', madValuesCbClicked);
-        on(SEARCH_B_TOGGLE, 'click', revealSearchB);
         on(SEARCH_NAV_PREV, 'click', function () {
             stepToFoundNode(-1);
         });
@@ -14093,6 +14265,7 @@ function (root, d3, forester, phyloXml) {
 
         on(DYNAHIDE_CB, 'click', dynaHideCbClicked);
         on(MSA_CB, 'click', msaCbClicked);
+        on(MSA_LOGO_CB, 'click', msaLogoCbClicked);
         on(HEATMAP_CB, 'click', heatmapCbClicked);
         on(HEATMAP_ORDER_SELECT, 'change', heatmapOrderChanged);
         on(HEATMAP_REORDER_BUTTON, 'click', showHeatmapReorderDialog);
@@ -14637,6 +14810,7 @@ function (root, d3, forester, phyloXml) {
             // labels -- they live here
             if (_basicTreeProperties.alignedMolSeqs && _basicTreeProperties.maxMolSeqLength > 0) {
                 opts.push(makeCheckboxItem('Alignment', MSA_CB, 'to show/hide the sequence alignment beside the tree (rectangular layout only)'));
+                opts.push(makeCheckboxItem('Sequence Logo', MSA_LOGO_CB, 'to summarize the alignment under it as a sequence logo: each column a stack of letters, as tall as that column\'s information content and shared out by residue frequency. Over the tips currently on screen, so entering a clade summarizes that clade'));
             }
             if (_basicTreeProperties.domainArchitectures) {
                 opts.push(makeCheckboxItem('Domain Architectures', DOMAINS_CB, 'to show/hide the protein domain architectures beside the tips', true));
@@ -14810,14 +14984,14 @@ function (root, d3, forester, phyloXml) {
             h = h.concat('<fieldset>');
             h = h.concat('<legend>Search</legend>');
             h = h.concat(makeSearchBox('Search A', 0));
-            // Search B starts hidden, one click away: the second box (and the
-            // Combine control it brings) is rarely needed, and the panel is
-            // long enough without it
-            h = h.concat('<button type="button" class="aptx-linkbtn" id="' + SEARCH_B_TOGGLE
-                + '" title="add a second search box, combinable with the first">+ Search B</button>');
-            h = h.concat('<div id="' + SEARCH_B_WRAP + '" style="display:none">');
+            // Search B used to sit behind a '+ Search B' link, to keep 45px out
+            // of the panel. That link was a second, weaker disclosure mechanism
+            // nested inside the section fold: it was forgotten on every reload
+            // (the fold is remembered), it was one-way -- nothing put B back --
+            // and it defeated the fit rule, since revealing B grew a section
+            // that had just been fitted without it, leaving the panel to
+            // scroll. The fold IS the disclosure. B is simply here.
             h = h.concat(makeSearchBox('Search B', 1));
-            h = h.concat('</div>');
             h = h.concat('<div class="aptx-searchnav" id="' + SEARCH_NAV_ROW + '" style="display:none">');
             h = h.concat('<button type="button" class="aptx-gbtn" id="' + SEARCH_NAV_PREV
                 + '" title="center the previous search hit">&#9664;</button>');
@@ -14971,6 +15145,7 @@ function (root, d3, forester, phyloXml) {
         setCheckboxValue(VIS_CB, _state.showVisualizations);
         setCheckboxValue(DYNAHIDE_CB, _state.dynahide);
         setCheckboxValue(MSA_CB, _state.showMsa);
+        setCheckboxValue(MSA_LOGO_CB, _state.showMsaLogo === true);
         setCheckboxValue(HEATMAP_CB, _state.showHeatmap);
         syncDomainControls();
         syncHeatmapControls();
@@ -15031,7 +15206,6 @@ function (root, d3, forester, phyloXml) {
         }
         if (_state.searchBinitialValue) {
             setValue(SEARCH_FIELD_1, _state.searchBinitialValue);
-            revealSearchB();
         }
     }