react-msaview 5.10.0 → 6.1.0

package/dist/model.js

@@ -4,18 +4,17 @@ import { ElementId, FileLocation } from '@jbrowse/core/util/types/mst';
 import { addDisposer, cast, types } from '@jbrowse/mobx-state-tree';
 import { colord } from 'colord';
 import { autorun, transaction } from 'mobx';
-import { generateNodeIds, gffToInterProResults, parseEmfTree, parseGFF, parseMSA, parseNewick, } from 'msa-parsers';
+import { generateNodeIds, gffToAnnotations, interProScanToAnnotations, parseEmfTree, parseGFF, parseMSA, parseNewick, } from 'msa-parsers';
 import { calculateBlocks } from './calculateBlocks.js';
 import { clustalXColumnColors } from './clustalX.js';
 import colorSchemes from './colorSchemes.js';
 import { columnCountsFromRows, letterOfResidueSlot } from './columnCounts.js';
-import ConservationTrack from './components/ConservationTrack.js';
-import TextTrack from './components/TextTrack.js';
-import { defaultAllowedGappyness, defaultColWidth, defaultColorSchemeName, defaultCurrentAlignment, defaultDrawMsaLetters, defaultHeight, defaultHideGaps, defaultRowHeight, defaultScrollX, defaultScrollY, defaultScrollZoom, defaultShowDomainLegend, defaultShowDomains, defaultSubFeatureRows, maxCellSize, minColWidth, minRowHeight, segmentFeatureTypes, segmentShades, } from './constants.js';
+import TrackBlocks from './components/tracks/TrackBlocks.js';
+import { defaultAllowedGappyness, defaultColWidth, defaultColorSchemeName, defaultCurrentAlignment, defaultDrawMsaLetters, defaultHeight, defaultHideGaps, defaultRowHeight, defaultScrollX, defaultScrollY, defaultScrollZoom, defaultShowDomainLegend, defaultShowDomains, defaultSubFeatureRows, labelReferenceFontSize, maxCellSize, minColWidth, minLetterColWidth, minLetterRowHeight, minRowHeight, segmentFeatureTypes, segmentShades, } from './constants.js';
 import { createPaletteMap } from './createPaletteMap.js';
 import { fetchTextWithProgress, isAbortError } from './fetchUtils.js';
 import { flatToTree } from './flatToTree.js';
-import { calcDepthToLeaf, clusterLayout, collapse, collapsedSubtreeLengthExtent, find, findMaxBranchLen, forEachDescendant, hierarchy, leaves, links, maxLength, setBrLength, sort, sum as hierarchySum, } from './hierarchy.js';
+import { calcDepthToLeaf, clusterLayout, collapse, collapsedSubtreeMaxLength, find, findMaxBranchLen, forEachDescendant, hierarchy, leaves, links, maxLength, setBrLength, sort, sum as hierarchySum, } from './hierarchy.js';
 import { measureTextCanvas } from './measureTextCanvas.js';
 import { DataModelF } from './model/DataModel.js';
 import { DialogQueueSessionMixin } from './model/DialogQueue.js';
@@ -24,8 +23,9 @@ import { TreeModelF } from './model/treeModel.js';
 import { calculateNeighborJoiningTree } from './neighborJoining.js';
 import { parseAsn1 } from './parseAsn1.js';
 import { calculatePropertyConservation } from './propertyConservation.js';
-import { globalColToVisibleCol, visibleColToGlobalCol, visibleColToSeqPosForRow, } from './rowCoordinateCalculations.js';
+import { globalColToVisibleCol, visibleColToGlobalCol, visibleColToSeqPosForRow, visibleColsBefore, } from './rowCoordinateCalculations.js';
 import { buildSeqPosIndex } from './seqPosToGlobalCol.js';
+import { maxBitsFor } from './sequenceLogo.js';
 import { stripDefault } from './stripDefault.js';
 import { computeRowInsertions, len, skipBlanks, transform } from './util.js';
 import { saveAs } from './vendor/fileSaver.js';
@@ -35,11 +35,22 @@ function parseTreeText(text) {
     }
     return parseNewick(text.startsWith('SEQ') ? parseEmfTree(text).tree : text);
 }
+// Tracks that start hidden. The sequence logo answers a narrower question than
+// conservation does and costs three times the vertical space, so it waits to be
+// asked for.
+const defaultOffTracks = new Set(['sequence-logo']);
+// `turnedOffTracks` records the user's explicit choices only: an id is absent
+// until they touch that track, and then its value is whether the track is OFF.
+// Reading the default through this is what lets a track ship hidden without
+// writing an entry into every snapshot and shared URL.
+function trackIsOff(turnedOffTracks, id) {
+    return turnedOffTracks.get(id) ?? defaultOffTracks.has(id);
+}
 /**
  * #stateModel MsaView
  *
  * The main MSAView state model. Holds the loaded alignment, tree, and optional
- * InterProScan domain annotations, plus all display state (color scheme, zoom,
+ * overlay annotations, plus all display state (color scheme, zoom,
  * scroll, collapsed clades). It composes in members from `DialogQueueSessionMixin`,
  * `Tree`, and `MSAModel` (see Inherited members below). Data is loaded reactively
  * from the `msaFilehandle` / `treeFilehandle` / `gffFilehandle` properties, or set
@@ -145,7 +156,7 @@ function stateModelFactory() {
         treeMetadataFilehandle: types.maybe(FileLocation),
         /**
          * #property
-         * filehandle object for InterProScan GFF file
+         * filehandle object for a GFF file of overlay annotations
          */
         gffFilehandle: types.maybe(FileLocation),
         /**
@@ -165,7 +176,10 @@ function stateModelFactory() {
         showOnly: types.maybe(types.string),
         /**
          * #property
-         * turned off tracks
+         * the user's explicit show/hide choice per track id, keyed by id with
+         * the value meaning "off". A track the user has never touched is absent
+         * and falls back to its own default (see `defaultOffTracks`), so a
+         * hidden-by-default track adds nothing to the shared URL.
          */
         turnedOffTracks: stripDefault(types.map(types.boolean), {}),
         /**
@@ -272,6 +286,13 @@ function stateModelFactory() {
          * #volatile
          */
         conservationTrackHeight: 40,
+        /**
+         * #volatile
+         * taller than the conservation track by default: the logo spends its
+         * height on stacked glyphs, and a 40px stack of four residues leaves each
+         * one too short to identify
+         */
+        sequenceLogoTrackHeight: 80,
         /**
          * #volatile
          */
@@ -283,8 +304,12 @@ function stateModelFactory() {
         error: undefined,
         /**
          * #volatile
+         * overlay annotations drawn on the alignment, whatever their source.
+         * Every source -- InterProScan, GFF, a user upload -- converts to this
+         * flat list before it reaches the model, so nothing downstream of here
+         * knows which one it came from
          */
-        interProAnnotations: undefined,
+        annotations: [],
     }))
         .actions(self => ({
         /**
@@ -373,7 +398,7 @@ function stateModelFactory() {
         },
         /**
          * #action
-         * toggle the InterProScan protein-domain overlay on the alignment
+         * toggle the annotation overlay on the alignment
          */
         setShowDomains(arg) {
             self.showDomains = arg;
@@ -413,13 +438,6 @@ function stateModelFactory() {
         setColWidth(n) {
             self.colWidth = n;
         },
-        /**
-         * #action
-         * set scroll Y-offset (px)
-         */
-        setScrollY(n) {
-            self.scrollY = n;
-        },
         /**
          * #action
          *
@@ -511,7 +529,7 @@ function stateModelFactory() {
          * #getter
          */
         get actuallyShowDomains() {
-            return self.showDomains && !!self.interProAnnotations;
+            return self.showDomains && self.annotations.length > 0;
         },
         get viewInitialized() {
             return self.volatileWidth !== undefined;
@@ -562,7 +580,7 @@ function stateModelFactory() {
             return !!this.tree.noTree;
         },
         get noDomains() {
-            return !self.interProAnnotations;
+            return self.annotations.length === 0;
         },
         menuItems() {
             return [];
@@ -742,12 +760,6 @@ function stateModelFactory() {
             }
             return blanks;
         },
-        /**
-         * #getter
-         */
-        get blanksSet() {
-            return new Set(this.blanks);
-        },
         /**
          * #getter
          * Returns a map of row name to array of insertions with display position and letters
@@ -828,13 +840,6 @@ function stateModelFactory() {
         get colStats() {
             return columnCountsFromRows(this.columns2d);
         },
-        /**
-         * #getter
-         * per-column residue totals (gaps included)
-         */
-        get colStatsSums() {
-            return this.colStats.totals;
-        },
         /**
          * #getter
          * Detects sequence type based on letters present in the alignment.
@@ -893,26 +898,25 @@ function stateModelFactory() {
          * Returns values 0-1 where 1 = fully conserved, 0 = no conservation.
          */
         get conservation() {
-            const { colStats, sequenceType } = this;
-            const alphabetSize = sequenceType === 'amino' ? 20 : 4;
-            const maxEntropy = Math.log2(alphabetSize);
+            const { colStats, alphabetMaxBits } = this;
             return Array.from({ length: colStats.numColumns }, (_, col) => {
                 const total = colStats.total(col);
                 const gapCount = colStats.gapCount(col);
-                const nonGapTotal = total - gapCount;
-                let score = 0;
-                if (nonGapTotal > 0) {
-                    let entropy = 0;
-                    colStats.forEachResidue(col, (_slot, count) => {
-                        const freq = count / nonGapTotal;
-                        entropy -= freq * Math.log2(freq);
-                    });
-                    score =
-                        Math.max(0, 1 - entropy / maxEntropy) * (1 - gapCount / total);
-                }
-                return score;
+                return total > gapCount
+                    ? Math.max(0, 1 - colStats.entropy(col) / alphabetMaxBits) *
+                        (1 - gapCount / total)
+                    : 0;
             });
         },
+        /**
+         * #getter
+         * The information content of a fully conserved column, in bits, which
+         * depends on the alphabet. Both the entropy ceiling `conservation`
+         * normalizes against and the y-axis ceiling of the sequence logo track.
+         */
+        get alphabetMaxBits() {
+            return maxBitsFor(this.sequenceType);
+        },
         /**
          * #getter
          * Per-column conservation of physicochemical property class (amino acids
@@ -935,14 +939,13 @@ function stateModelFactory() {
             const max = maxLength(r);
             const k = max ? self.treeWidth / max : 0;
             setBrLength(r, 0, k);
-            // for each collapsed clade, record the pixel x-positions of its
-            // nearest/farthest tips so the renderer can draw a triangle that spans
-            // the branch-length extent of the hidden subtree
+            // for each collapsed clade, record the pixel x-position of its farthest
+            // tip so the renderer can draw a triangle spanning the branch-length
+            // extent of the hidden subtree
             forEachDescendant(r, node => {
                 if (node._children) {
-                    const { min, max: mx } = collapsedSubtreeLengthExtent(node);
-                    node.collapsedTipXNear = (node.len ?? 0) + min * k;
-                    node.collapsedTipXFar = (node.len ?? 0) + mx * k;
+                    node.collapsedTipXFar =
+                        (node.len ?? 0) + collapsedSubtreeMaxLength(node) * k;
                 }
             });
             return r;
@@ -1018,12 +1021,22 @@ function stateModelFactory() {
          */
         get blocksY() {
             return calculateBlocks({
-                viewportSize: self.height,
+                viewportSize: this.visibleMsaHeight,
                 viewportPos: -self.scrollY,
                 blockSize: self.blockSize,
                 mapSize: self.totalHeight,
             });
         },
+        /**
+         * #getter
+         * height of the alignment viewport, px. The same subtraction as
+         * msaAreaHeight, which is defined later in the views chain
+         */
+        get visibleMsaHeight() {
+            return (self.height -
+                self.headerHeight -
+                (self.msaAreaWidth < self.totalWidth ? self.minimapHeight : 0));
+        },
     }))
         .views(self => ({
         /**
@@ -1047,28 +1060,25 @@ function stateModelFactory() {
         /**
          * #getter
          * most-negative allowed scrollY, keeping the last row in view rather than
-         * letting the whole alignment scroll off the top. visible MSA height is
-         * computed inline here because msaAreaHeight is defined later in the chain.
+         * letting the whole alignment scroll off the top.
          */
         get maxScrollY() {
-            const visibleHeight = self.height -
-                self.headerHeight -
-                (self.msaAreaWidth < self.totalWidth ? self.minimapHeight : 0);
-            return Math.min(-self.totalHeight + visibleHeight, 0);
+            return Math.min(-self.totalHeight + self.visibleMsaHeight, 0);
         },
         /**
          * #getter
          */
         get showMsaLetters() {
             return (self.drawMsaLetters &&
-                self.rowHeight >= 5 &&
+                self.rowHeight >= minLetterRowHeight &&
+                self.colWidth >= minLetterColWidth &&
                 self.colWidth > self.rowHeight / 2);
         },
         /**
          * #getter
          */
         get showTreeText() {
-            return self.drawLabels && self.rowHeight >= 5;
+            return self.drawLabels && self.rowHeight >= minLetterRowHeight;
         },
     }))
         .actions(self => ({
@@ -1089,18 +1099,24 @@ function stateModelFactory() {
          * set hovered tree node and its descendants
          */
         setHoveredTreeNode(nodeId) {
-            if (nodeId) {
-                const node = find(self.hierarchy, n => n.data.id === nodeId);
-                self.hoveredTreeNode = node
-                    ? {
-                        nodeId,
-                        descendantNames: leaves(node).map(leaf => leaf.data.name),
-                    }
-                    : undefined;
+            // the tree's mousemove handler calls this on every event, and both the
+            // lookup and the write are expensive: `find` walks the whole hierarchy,
+            // and a fresh object here invalidates hoveredRowIndices and redraws the
+            // tree and MSA overlays. Re-hovering the same node is the common case
+            if (nodeId === self.hoveredTreeNode?.nodeId) {
+                return;
             }
-            else {
+            if (!nodeId) {
                 self.hoveredTreeNode = undefined;
+                return;
             }
+            const node = find(self.hierarchy, n => n.data.id === nodeId);
+            self.hoveredTreeNode = node
+                ? {
+                    nodeId,
+                    descendantNames: leaves(node).map(leaf => leaf.data.name),
+                }
+                : undefined;
         },
         /**
          * #action
@@ -1196,21 +1212,36 @@ function stateModelFactory() {
          * #action
          */
         doScrollY(deltaY) {
-            self.scrollY = clamp(self.scrollY + deltaY, self.maxScrollY, 0);
+            this.setScrollY(self.scrollY + deltaY);
+        },
+        /**
+         * #action
+         * set scroll Y-offset (px), clamped to keep the alignment in view
+         */
+        setScrollY(n) {
+            self.scrollY = clamp(n, self.maxScrollY, 0);
         },
         /**
          * #action
-         * Set domain annotations and reveal the overlay in a single step (or clear
-         * both when passed undefined). Shared by every domain source: InterProScan,
-         * GFF, user-provided uploads, and NCBI CDD.
+         * Set the overlay annotations and reveal the overlay in a single step (an
+         * empty list clears both). Every source funnels through here after its
+         * own adapter has flattened it: InterProScan, GFF, user uploads, NCBI CDD.
+         */
+        setAnnotations(annotations) {
+            self.annotations = annotations;
+            self.setShowDomains(annotations.length > 0);
+        },
+        /**
+         * #action
+         * set the overlay from raw InterProScan results keyed by row name. Kept
+         * for downstream plugins that hold the EBI wire format; new code should
+         * adapt to Annotation[] and call setAnnotations.
          */
         setDomains(data) {
-            self.interProAnnotations = data;
-            self.setShowDomains(!!data);
+            this.setAnnotations(data ? interProScanToAnnotations(data) : []);
         },
         applyGFFText(gffText) {
-            const gffRecords = parseGFF(gffText);
-            this.setDomains(gffToInterProResults(gffRecords));
+            this.setAnnotations(gffToAnnotations(parseGFF(gffText)));
         },
         /**
          * #action
@@ -1228,12 +1259,9 @@ function stateModelFactory() {
          * #action
          */
         toggleTrack(id) {
-            if (self.turnedOffTracks.has(id)) {
-                self.turnedOffTracks.delete(id);
-            }
-            else {
-                self.turnedOffTracks.set(id, true);
-            }
+            // the stored value is "is off", so the current shown state is exactly
+            // what the flipped entry should hold
+            self.turnedOffTracks.set(id, !trackIsOff(self.turnedOffTracks, id));
         },
         /**
          * #action
@@ -1247,17 +1275,34 @@ function stateModelFactory() {
          * #getter
          */
         get labelWidthMap() {
-            const { rowHeight, leaves, treeMetadata, fontSize } = self;
-            return rowHeight <= 5
-                ? new Map()
-                : new Map(leaves.map(node => {
+            const { showTreeText, leaves, treeMetadata } = self;
+            // gated on the same condition the renderer draws labels under, so the
+            // gutter labelsWidth reserves and the labels actually drawn cannot
+            // disagree -- and so turning labels off hands their space to the tree.
+            // Measured at a fixed reference size and scaled by labelWidthScale:
+            // re-measuring every leaf on every vertical-zoom frame cost ~200ms on a
+            // 50k-leaf tree
+            return showTreeText
+                ? new Map(leaves.map(node => {
                     const { name } = node.data;
                     // `||`, matching renderTreeLabels: an empty genome falls back
                     // to the row name, and measuring '' would size the gutter (and
                     // the label's click target) to nothing
                     const displayName = treeMetadata[name]?.genome || name;
-                    return [name, measureTextCanvas(displayName, fontSize)];
-                }));
+                    return [
+                        name,
+                        measureTextCanvas(displayName, labelReferenceFontSize),
+                    ];
+                }))
+                : new Map();
+        },
+        /**
+         * #getter
+         * factor turning a labelWidthMap entry into its width at the current
+         * font size
+         */
+        get labelWidthScale() {
+            return self.fontSize / labelReferenceFontSize;
         },
         get labelsWidth() {
             // a loop, not Math.max(...widths.values()): spreading a map of every
@@ -1271,7 +1316,7 @@ function stateModelFactory() {
                     max = width;
                 }
             }
-            return max;
+            return max * this.labelWidthScale;
         },
         /**
          * #getter
@@ -1296,10 +1341,11 @@ function stateModelFactory() {
                 .map(t => ({
                 model: {
                     ...t,
+                    kind: 'text',
                     data: hideGapsEffective ? skipBlanks(blanks, t.data) : t.data,
                     height: rowHeight,
                 },
-                ReactComponent: TextTrack,
+                ReactComponent: TrackBlocks,
             }));
         },
         /**
@@ -1307,34 +1353,41 @@ function stateModelFactory() {
          */
         get tracks() {
             const conservationTrack = {
-                model: {
-                    id: 'conservation',
-                    name: 'Conservation',
-                    height: self.conservationTrackHeight,
-                    barColor: 'gray',
-                },
-                ReactComponent: ConservationTrack,
+                id: 'conservation',
+                name: 'Conservation',
+                kind: 'bar',
+                height: self.conservationTrackHeight,
+                barColor: 'gray',
             };
             const propertyConservationTrack = {
-                model: {
-                    id: 'property-conservation',
-                    name: 'Property conservation',
-                    height: self.conservationTrackHeight,
-                    barColor: '#6a51a3',
-                },
-                ReactComponent: ConservationTrack,
+                id: 'property-conservation',
+                name: 'Property conservation',
+                kind: 'bar',
+                height: self.conservationTrackHeight,
+                barColor: '#6a51a3',
+            };
+            const sequenceLogoTrack = {
+                id: 'sequence-logo',
+                name: 'Sequence logo',
+                kind: 'logo',
+                height: self.sequenceLogoTrackHeight,
             };
             return [
                 ...this.adapterTrackModels,
-                conservationTrack,
-                ...(self.sequenceType === 'amino' ? [propertyConservationTrack] : []),
+                ...[
+                    conservationTrack,
+                    ...(self.sequenceType === 'amino'
+                        ? [propertyConservationTrack]
+                        : []),
+                    sequenceLogoTrack,
+                ].map(model => ({ model, ReactComponent: TrackBlocks })),
             ];
         },
         /**
          * #getter
          */
         get turnedOnTracks() {
-            return this.tracks.filter(f => !self.turnedOffTracks.has(f.model.id));
+            return this.tracks.filter(f => !trackIsOff(self.turnedOffTracks, f.model.id));
         },
         /**
          * #getter
@@ -1454,35 +1507,27 @@ function stateModelFactory() {
         get totalTrackAreaHeight() {
             return sum(self.turnedOnTracks.map(r => r.model.height));
         },
-        get tidyInterProAnnotationTypes() {
-            return new Map(this.tidyInterProAnnotations.map(annot => [annot.accession, annot]));
-        },
-        get tidyInterProAnnotations() {
-            return self.interProAnnotations
-                ? Object.entries(self.interProAnnotations)
-                    .flatMap(([id, val]) => val.matches.flatMap(({ signature, locations }) => {
-                    const { entry } = signature;
-                    return entry
-                        ? locations.map(({ start, end, strand }) => ({
-                            id,
-                            name: entry.name,
-                            accession: entry.accession,
-                            description: entry.description,
-                            featureType: entry.featureType,
-                            start,
-                            end,
-                            strand,
-                        }))
-                        : [];
-                }))
-                    .toSorted((a, b) => len(b) - len(a))
-                : [];
+        /**
+         * one representative annotation per accession, which is what the legend,
+         * the filter dialog and the palettes key off
+         */
+        get annotationTypes() {
+            // first occurrence wins. The representative supplies only the name,
+            // description and -- for ordinal segments -- the start that orders
+            // them, and those agree across an accession's instances
+            const types = new Map();
+            for (const annot of self.annotations) {
+                if (!types.has(annot.accession)) {
+                    types.set(annot.accession, annot);
+                }
+            }
+            return types;
         },
-        get tidyFilteredInterProAnnotations() {
-            return this.tidyInterProAnnotations.filter(r => self.featureFilters.get(r.accession));
+        get filteredAnnotations() {
+            return self.annotations.filter(r => self.featureFilters.get(r.accession));
         },
-        get tidyFilteredGatheredInterProAnnotations() {
-            return groupBy(this.tidyFilteredInterProAnnotations, r => r.id);
+        get annotationsByRow() {
+            return groupBy(this.filteredAnnotations, r => r.id);
         },
     }))
         .views(self => ({
@@ -1500,6 +1545,15 @@ function stateModelFactory() {
         get verticalScrollbarWidth() {
             return self.showVerticalScrollbar ? 20 : 0;
         },
+        /**
+         * #getter
+         * width of the alignment canvas itself: the msa area less the vertical
+         * scrollbar sitting in it. Not usable from showHorizontalScrollbar, which
+         * feeds msaAreaHeight -> showVerticalScrollbar and would close a cycle
+         */
+        get msaCanvasWidth() {
+            return self.msaAreaWidth - this.verticalScrollbarWidth;
+        },
         /**
          * #getter
          * ordinal segment types (exons etc.), ordered by sequence position so
@@ -1507,7 +1561,7 @@ function stateModelFactory() {
          * labeled by number rather than each getting a distinct hue + legend row
          */
         get segmentDomainTypes() {
-            return [...self.tidyInterProAnnotationTypes.values()]
+            return [...self.annotationTypes.values()]
                 .filter(d => segmentFeatureTypes.has(d.featureType ?? ''))
                 .toSorted((a, b) => a.start - b.start);
         },
@@ -1517,7 +1571,7 @@ function stateModelFactory() {
          * their own color and a legend entry
          */
         get categoricalDomainTypes() {
-            return [...self.tidyInterProAnnotationTypes.values()].filter(d => !segmentFeatureTypes.has(d.featureType ?? ''));
+            return [...self.annotationTypes.values()].filter(d => !segmentFeatureTypes.has(d.featureType ?? ''));
         },
         get fillPalette() {
             const segments = Object.fromEntries(this.segmentDomainTypes.map((d, i) => [
@@ -1558,29 +1612,39 @@ function stateModelFactory() {
         },
         /**
          * #getter
-         * every filtered-on domain annotation resolved to the visible column span
-         * it is drawn across, keyed by row name and in draw order (largest first,
-         * as tidyInterProAnnotations orders them). Resolving these once here rather
-         * than inside each canvas block removes a per-feature, per-block sequence
-         * position conversion from every redraw, and gives the letter renderer the
-         * band colors it needs to keep residues readable on top of the boxes.
+         * every filtered-on annotation resolved to the visible column span it is
+         * drawn across, keyed by row name. Each row is ordered longest-first so a
+         * short domain nested inside a long one draws on top of it rather than
+         * under it. Resolving these once here rather than inside each canvas
+         * block removes a per-feature, per-block sequence position conversion
+         * from every redraw, and gives the letter renderer the band colors it
+         * needs to keep residues readable on top of the boxes.
          */
         get domainBands() {
+            const { blanks } = self;
             const bands = new Map();
-            for (const [name, annotations] of Object.entries(self.tidyFilteredGatheredInterProAnnotations)) {
+            for (const [name, annotations] of Object.entries(self.annotationsByRow)) {
                 const rowBands = annotations
-                    .map((annotation, stackIndex) => {
-                    // InterPro positions are 1-based and inclusive; endCol is the
-                    // exclusive column *after* the last residue, taken from that
-                    // residue rather than from the next one, so a band stops at its own
-                    // last residue instead of stretching across a following gap run
-                    const startCol = self.seqPosToVisibleCol(name, annotation.start - 1);
-                    const lastCol = self.seqPosToVisibleCol(name, annotation.end - 1);
-                    return startCol !== undefined && lastCol !== undefined
-                        ? { annotation, startCol, endCol: lastCol + 1, stackIndex }
+                    .toSorted((a, b) => len(b) - len(a))
+                    .map(annotation => {
+                    // annotation positions are 1-based and inclusive. Both ends count
+                    // the visible columns in front of a global column, so endCol is
+                    // the exclusive column after the last residue's own column --
+                    // the band stops there rather than stretching across a following
+                    // gap run -- and a residue whose column is itself hidden
+                    // collapses onto the neighbouring boundary instead of dropping
+                    // the band. A band whose every column is hidden spans nothing
+                    // and is left out.
+                    const startCol = visibleColsBefore(blanks, self.seqPosToGlobalCol(name, annotation.start - 1));
+                    const endCol = visibleColsBefore(blanks, self.seqPosToGlobalCol(name, annotation.end - 1) + 1);
+                    return endCol > startCol
+                        ? { annotation, startCol, endCol }
                         : undefined;
                 })
-                    .filter(notEmpty);
+                    .filter(notEmpty)
+                    // numbered after the drop, so a band that resolved to nothing does
+                    // not leave an empty sub-row behind it
+                    .map((band, stackIndex) => ({ ...band, stackIndex }));
                 if (rowBands.length > 0) {
                     bands.set(name, rowBands);
                 }
@@ -1669,8 +1733,11 @@ function stateModelFactory() {
                 return undefined;
             }
             const { colStats } = self;
+            if (mouseCol >= colStats.numColumns) {
+                return undefined;
+            }
             const total = colStats.total(mouseCol);
-            if (mouseCol >= colStats.numColumns || !total) {
+            if (!total) {
                 return undefined;
             }
             const gaps = colStats.gapCount(mouseCol);
@@ -1714,6 +1781,12 @@ function stateModelFactory() {
         setConservationTrackHeight(arg) {
             self.conservationTrackHeight = arg;
         },
+        /**
+         * #action
+         */
+        setSequenceLogoTrackHeight(arg) {
+            self.sequenceLogoTrackHeight = arg;
+        },
         /**
          * #action
          */
@@ -1730,7 +1803,7 @@ function stateModelFactory() {
             self.setTreeFilehandle(undefined);
             self.setMSAFilehandle(undefined);
             self.setGFFFilehandle(undefined);
-            self.setDomains(undefined);
+            self.setAnnotations([]);
         },
         /**
          * #action
@@ -1770,7 +1843,10 @@ function stateModelFactory() {
          */
         fitHorizontally() {
             if (self.numColumns > 0) {
-                self.colWidth = clamp(self.msaAreaWidth / self.numColumns, minColWidth, maxCellSize);
+                // fitting to msaAreaWidth instead left the last ~20px of columns off
+                // the right edge -- and short of the width that shows a minimap, so
+                // nothing on screen said they were there
+                self.colWidth = clamp(self.msaCanvasWidth / self.numColumns, minColWidth, maxCellSize);
             }
             self.scrollX = 0;
         },
@@ -1782,7 +1858,7 @@ function stateModelFactory() {
                 self.setHighlightedColumns(self.highlightColumns);
             }
             addDisposer(self, autorun(() => {
-                for (const key of self.tidyInterProAnnotationTypes.keys()) {
+                for (const key of self.annotationTypes.keys()) {
                     this.initFilter(key);
                 }
             }));
@@ -1897,7 +1973,7 @@ function stateModelFactory() {
                     }
                 }
             }));
-            // gffFilehandle carries InterProScan domains
+            // gffFilehandle carries overlay annotations
             loadOnFilehandleChange({
                 getFilehandle: () => self.gffFilehandle,
                 onLoad: text => {