react-msaview 5.10.0 → 6.1.0

package/src/model.ts

@@ -6,7 +6,8 @@ import { colord } from 'colord'
 import { autorun, transaction } from 'mobx'
 import {
   generateNodeIds,
-  gffToInterProResults,
+  gffToAnnotations,
+  interProScanToAnnotations,
   parseEmfTree,
   parseGFF,
   parseMSA,
@@ -17,8 +18,7 @@ import { calculateBlocks } from './calculateBlocks.ts'
 import { clustalXColumnColors } from './clustalX.ts'
 import colorSchemes from './colorSchemes.ts'
 import { columnCountsFromRows, letterOfResidueSlot } from './columnCounts.ts'
-import ConservationTrack from './components/ConservationTrack.tsx'
-import TextTrack from './components/TextTrack.tsx'
+import TrackBlocks from './components/tracks/TrackBlocks.tsx'
 import {
   defaultAllowedGappyness,
   defaultColWidth,
@@ -34,8 +34,11 @@ import {
   defaultShowDomainLegend,
   defaultShowDomains,
   defaultSubFeatureRows,
+  labelReferenceFontSize,
   maxCellSize,
   minColWidth,
+  minLetterColWidth,
+  minLetterRowHeight,
   minRowHeight,
   segmentFeatureTypes,
   segmentShades,
@@ -47,7 +50,7 @@ import {
   calcDepthToLeaf,
   clusterLayout,
   collapse,
-  collapsedSubtreeLengthExtent,
+  collapsedSubtreeMaxLength,
   find,
   findMaxBranchLen,
   forEachDescendant,
@@ -71,15 +74,17 @@ import {
   globalColToVisibleCol,
   visibleColToGlobalCol,
   visibleColToSeqPosForRow,
+  visibleColsBefore,
 } from './rowCoordinateCalculations.ts'
 import { buildSeqPosIndex } from './seqPosToGlobalCol.ts'
+import { maxBitsFor } from './sequenceLogo.ts'
 import { stripDefault } from './stripDefault.ts'
 import { computeRowInsertions, len, skipBlanks, transform } from './util.ts'
 import { saveAs } from './vendor/fileSaver.ts'
 
 import type { HierarchyNode } from './hierarchy.ts'
-import type { InterProScanResults } from './launchInterProScan.ts'
 import type {
+  Annotation,
   BasicTrack,
   DomainBand,
   NodeWithIds,
@@ -88,6 +93,7 @@ import type {
 import type { FileLocation as FileLocationType } from '@jbrowse/core/util/types'
 import type { Instance } from '@jbrowse/mobx-state-tree'
 import type { Theme } from '@mui/material'
+import type { InterProScanResults } from 'msa-parsers'
 
 function parseTreeText(text: string) {
   if (text.startsWith('BioTreeContainer')) {
@@ -96,11 +102,27 @@ function parseTreeText(text: string) {
   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: { get: (id: string) => boolean | undefined },
+  id: string,
+) {
+  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
@@ -223,7 +245,7 @@ function stateModelFactory() {
 
         /**
          * #property
-         * filehandle object for InterProScan GFF file
+         * filehandle object for a GFF file of overlay annotations
          */
         gffFilehandle: types.maybe(FileLocation),
 
@@ -246,7 +268,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), {}),
 
@@ -372,6 +397,14 @@ function stateModelFactory() {
        */
       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
        */
@@ -385,10 +418,12 @@ function stateModelFactory() {
 
       /**
        * #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 as
-        | undefined
-        | Record<string, InterProScanResults>,
+      annotations: [] as Annotation[],
     }))
     .actions(self => ({
       /**
@@ -480,7 +515,7 @@ function stateModelFactory() {
       },
       /**
        * #action
-       * toggle the InterProScan protein-domain overlay on the alignment
+       * toggle the annotation overlay on the alignment
        */
       setShowDomains(arg: boolean) {
         self.showDomains = arg
@@ -523,14 +558,6 @@ function stateModelFactory() {
         self.colWidth = n
       },
 
-      /**
-       * #action
-       * set scroll Y-offset (px)
-       */
-      setScrollY(n: number) {
-        self.scrollY = n
-      },
-
       /**
        * #action
        *
@@ -638,7 +665,7 @@ function stateModelFactory() {
        * #getter
        */
       get actuallyShowDomains() {
-        return self.showDomains && !!self.interProAnnotations
+        return self.showDomains && self.annotations.length > 0
       },
       get viewInitialized() {
         return self.volatileWidth !== undefined
@@ -693,7 +720,7 @@ function stateModelFactory() {
         return !!this.tree.noTree
       },
       get noDomains() {
-        return !self.interProAnnotations
+        return self.annotations.length === 0
       },
       menuItems() {
         return []
@@ -883,12 +910,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
@@ -981,14 +1002,6 @@ function stateModelFactory() {
         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.
@@ -1053,27 +1066,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
@@ -1096,14 +1107,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 as HierarchyNode<NodeWithIdsAndLength>
@@ -1186,12 +1196,24 @@ 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 => ({
       /**
@@ -1218,15 +1240,10 @@ 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
@@ -1234,7 +1251,8 @@ function stateModelFactory() {
       get showMsaLetters() {
         return (
           self.drawMsaLetters &&
-          self.rowHeight >= 5 &&
+          self.rowHeight >= minLetterRowHeight &&
+          self.colWidth >= minLetterColWidth &&
           self.colWidth > self.rowHeight / 2
         )
       },
@@ -1242,7 +1260,7 @@ function stateModelFactory() {
        * #getter
        */
       get showTreeText() {
-        return self.drawLabels && self.rowHeight >= 5
+        return self.drawLabels && self.rowHeight >= minLetterRowHeight
       },
     }))
     .actions(self => ({
@@ -1265,17 +1283,24 @@ function stateModelFactory() {
        * set hovered tree node and its descendants
        */
       setHoveredTreeNode(nodeId?: string) {
-        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
-        } else {
+        // 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
+        }
+        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
       },
 
       /**
@@ -1394,23 +1419,40 @@ function stateModelFactory() {
        * #action
        */
       doScrollY(deltaY: number) {
-        self.scrollY = clamp(self.scrollY + deltaY, self.maxScrollY, 0)
+        this.setScrollY(self.scrollY + deltaY)
       },
 
       /**
        * #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 scroll Y-offset (px), clamped to keep the alignment in view
+       */
+      setScrollY(n: number) {
+        self.scrollY = clamp(n, self.maxScrollY, 0)
+      },
+
+      /**
+       * #action
+       * 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: Annotation[]) {
+        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?: Record<string, InterProScanResults>) {
-        self.interProAnnotations = data
-        self.setShowDomains(!!data)
+        this.setAnnotations(data ? interProScanToAnnotations(data) : [])
       },
 
       applyGFFText(gffText: string) {
-        const gffRecords = parseGFF(gffText)
-        this.setDomains(gffToInterProResults(gffRecords))
+        this.setAnnotations(gffToAnnotations(parseGFF(gffText)))
       },
 
       /**
@@ -1431,11 +1473,9 @@ function stateModelFactory() {
        * #action
        */
       toggleTrack(id: string) {
-        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
@@ -1449,19 +1489,37 @@ function stateModelFactory() {
        * #getter
        */
       get labelWidthMap() {
-        const { rowHeight, leaves, treeMetadata, fontSize } = self
-        return rowHeight <= 5
-          ? new Map<string, number>()
-          : new Map(
+        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)] as const
+                return [
+                  name,
+                  measureTextCanvas(displayName, labelReferenceFontSize),
+                ] as const
               }),
             )
+          : new Map<string, number>()
+      },
+
+      /**
+       * #getter
+       * factor turning a labelWidthMap entry into its width at the current
+       * font size
+       */
+      get labelWidthScale() {
+        return self.fontSize / labelReferenceFontSize
       },
 
       get labelsWidth() {
@@ -1476,7 +1534,7 @@ function stateModelFactory() {
             max = width
           }
         }
-        return max
+        return max * this.labelWidthScale
       },
 
       /**
@@ -1504,10 +1562,11 @@ function stateModelFactory() {
           .map(t => ({
             model: {
               ...t,
+              kind: 'text' as const,
               data: hideGapsEffective ? skipBlanks(blanks, t.data!) : t.data,
               height: rowHeight,
             },
-            ReactComponent: TextTrack,
+            ReactComponent: TrackBlocks,
           }))
       },
 
@@ -1515,28 +1574,35 @@ function stateModelFactory() {
        * #getter
        */
       get tracks(): BasicTrack[] {
-        const conservationTrack: BasicTrack = {
-          model: {
-            id: 'conservation',
-            name: 'Conservation',
-            height: self.conservationTrackHeight,
-            barColor: 'gray',
-          },
-          ReactComponent: ConservationTrack,
+        const conservationTrack = {
+          id: 'conservation',
+          name: 'Conservation',
+          kind: 'bar' as const,
+          height: self.conservationTrackHeight,
+          barColor: 'gray',
         }
-        const propertyConservationTrack: BasicTrack = {
-          model: {
-            id: 'property-conservation',
-            name: 'Property conservation',
-            height: self.conservationTrackHeight,
-            barColor: '#6a51a3',
-          },
-          ReactComponent: ConservationTrack,
+        const propertyConservationTrack = {
+          id: 'property-conservation',
+          name: 'Property conservation',
+          kind: 'bar' as const,
+          height: self.conservationTrackHeight,
+          barColor: '#6a51a3',
+        }
+        const sequenceLogoTrack = {
+          id: 'sequence-logo',
+          name: 'Sequence logo',
+          kind: 'logo' as const,
+          height: self.sequenceLogoTrackHeight,
         }
         return [
           ...this.adapterTrackModels,
-          conservationTrack,
-          ...(self.sequenceType === 'amino' ? [propertyConservationTrack] : []),
+          ...[
+            conservationTrack,
+            ...(self.sequenceType === 'amino'
+              ? [propertyConservationTrack]
+              : []),
+            sequenceLogoTrack,
+          ].map(model => ({ model, ReactComponent: TrackBlocks })),
         ]
       },
 
@@ -1544,7 +1610,9 @@ function stateModelFactory() {
        * #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),
+        )
       },
 
       /**
@@ -1674,41 +1742,29 @@ 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<string, Annotation>()
+        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 =>
+      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 => ({
@@ -1726,6 +1782,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
@@ -1733,7 +1798,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)
       },
@@ -1743,7 +1808,7 @@ function stateModelFactory() {
        * their own color and a legend entry
        */
       get categoricalDomainTypes() {
-        return [...self.tidyInterProAnnotationTypes.values()].filter(
+        return [...self.annotationTypes.values()].filter(
           d => !segmentFeatureTypes.has(d.featureType ?? ''),
         )
       },
@@ -1795,34 +1860,47 @@ 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<string, DomainBand[]>()
         for (const [name, annotations] of Object.entries(
-          self.tidyFilteredGatheredInterProAnnotations,
+          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,
+            .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 lastCol = self.seqPosToVisibleCol(name, annotation.end - 1)
-              return startCol !== undefined && lastCol !== undefined
-                ? { annotation, startCol, endCol: lastCol + 1, stackIndex }
+              const endCol = visibleColsBefore(
+                blanks,
+                self.seqPosToGlobalCol(name, annotation.end - 1) + 1,
+              )
+              return endCol > startCol
+                ? { annotation, startCol, endCol }
                 : undefined
             })
             .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)
           }
@@ -1923,8 +2001,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)
@@ -1969,6 +2050,12 @@ function stateModelFactory() {
       setConservationTrackHeight(arg: number) {
         self.conservationTrackHeight = arg
       },
+      /**
+       * #action
+       */
+      setSequenceLogoTrackHeight(arg: number) {
+        self.sequenceLogoTrackHeight = arg
+      },
       /**
        * #action
        */
@@ -1985,7 +2072,7 @@ function stateModelFactory() {
         self.setTreeFilehandle(undefined)
         self.setMSAFilehandle(undefined)
         self.setGFFFilehandle(undefined)
-        self.setDomains(undefined)
+        self.setAnnotations([])
       },
       /**
        * #action
@@ -2035,8 +2122,11 @@ function stateModelFactory() {
        */
       fitHorizontally() {
         if (self.numColumns > 0) {
+          // 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.msaAreaWidth / self.numColumns,
+            self.msaCanvasWidth / self.numColumns,
             minColWidth,
             maxCellSize,
           )
@@ -2055,7 +2145,7 @@ function stateModelFactory() {
         addDisposer(
           self,
           autorun(() => {
-            for (const key of self.tidyInterProAnnotationTypes.keys()) {
+            for (const key of self.annotationTypes.keys()) {
               this.initFilter(key)
             }
           }),
@@ -2195,7 +2285,7 @@ function stateModelFactory() {
           }),
         )
 
-        // gffFilehandle carries InterProScan domains
+        // gffFilehandle carries overlay annotations
         loadOnFilehandleChange({
           getFilehandle: () => self.gffFilehandle,
           onLoad: text => {