react-msaview 8.2.0 → 8.4.0

package/dist/types.d.ts

@@ -12,6 +12,12 @@ export type TrackKind = 'text' | 'bar' | 'logo' | 'arc' | 'ruler';
  * graphics draws between a shape's interior and its own ink.
  */
 export type ResidueEncoding = 'fill' | 'color';
+/**
+ * The residue colors: a scheme name from the built-in table, or a scale's
+ * `{map}` of letter to color, which leaves every letter it does not list
+ * uncolored
+ */
+export type ColorScheme = string | Required<Pick<ScaleSpec, 'map'>>;
 export interface BasicTrackModel {
     id: string;
     name: string;
@@ -266,13 +272,49 @@ export interface Highlight {
     label?: string;
     color?: string;
 }
+/**
+ * A feature on one row as data, the JSON form of a GFF line: `start` and `end`
+ * are residues of `row`, 1-based and inclusive. `name` is the key the legend,
+ * the palette and the filter dialog group features by, `color` overrides the
+ * palette and any scale, and a `strand` draws the span as an arrow. Every other
+ * field is a column the `featureFill` and `featureLabel` encodings can read.
+ */
+export interface Feature {
+    row: string;
+    start: number;
+    end: number;
+    name?: string;
+    description?: string;
+    /** a GFF feature type; `exon`, `CDS` and the UTRs draw as numbered segments */
+    type?: string;
+    strand?: '+' | '-';
+    color?: string;
+    [field: string]: string | number | undefined;
+}
 /**
  * What the viewer draws over a clade. `highlight` fills the rows behind it,
  * across the tree and the alignment. `bracket` draws a bar and the clade's
- * `label` in the gutter right of the tip labels. `collapse` and `focus` seed
- * the collapsed list and the subtree in focus at load.
+ * `label` in the gutter right of the tip labels. `collapse`, `focus` and
+ * `rotate` seed the collapsed list, the subtree in focus and the rotated nodes
+ * at load.
+ */
+export type CladeMark = 'highlight' | 'bracket' | 'collapse' | 'focus' | 'rotate';
+/**
+ * The order each node's children draw in, top to bottom. `branchLength` puts
+ * the shortest branch first, `input` keeps the file's order, `ladderize` puts
+ * the clade with the fewest tips first, so the deep clades step down toward
+ * the bottom, and `ladderizeReverse` puts the one with the most tips first.
  */
-export type CladeMark = 'highlight' | 'bracket' | 'collapse' | 'focus';
+export type TreeOrder = 'branchLength' | 'input' | 'ladderize' | 'ladderizeReverse';
+/**
+ * Where the tree is rooted: `midpoint` halfway along the longest path between
+ * two tips, and `{outgroup}` on the branch above those tips' most recent common
+ * ancestor, or above the rest of the tips' where the outgroup straddles the
+ * root the file gives.
+ */
+export type TreeRoot = 'midpoint' | {
+    outgroup: string[];
+};
 /**
  * A clade of the tree and the mark drawn over it. `mrca` names tips whose most
  * recent common ancestor is the clade; `range` names the first and last tip of
@@ -313,11 +355,31 @@ export interface Region {
     start: number;
     end: number;
 }
+/**
+ * A block of the alignment the reader selected: columns `start` to `end` of the
+ * file, 1-based and inclusive like a Highlight without a row, across the rows
+ * `rows` names, or across every row where `rows` is absent.
+ */
+export interface MsaSelection {
+    start: number;
+    end: number;
+    rows?: string[];
+}
+/**
+ * An MsaSelection resolved to what is on screen: the visible columns it covers
+ * and its rows as runs of consecutive row indices, top to bottom
+ */
+export interface ResolvedSelection {
+    startCol: number;
+    endCol: number;
+    rowRuns: [number, number][];
+}
 /**
  * A cell of the alignment in the host's coordinates, 1-based like Highlight:
  * `column` counts every column of the file, hidden gappy ones included, and
- * `residue` counts the row's own letters, absent on a gap. A pointer over a
- * track has a column and no row.
+ * `residue` counts the row's own letters, absent on a gap. `letter` is the
+ * character in the cell, the gap character (`-` or `.`) on a gap. A pointer
+ * over a track has a column and no row.
  */
 export interface Cell {
     column: number;
@@ -330,6 +392,12 @@ export interface Viewport {
     startColumn: number;
     endColumn: number;
 }
+/**
+ * A row table as a host passes it: fields per row name. A number or a boolean
+ * reads as its string, the way a GFF value does, and the viewer leaves out any
+ * other value. See docs/layers.md
+ */
+export type RowDataInput = Record<string, Record<string, string | number | boolean | null>>;
 /**
  * A channel of a mark the viewer always draws. `tipLabel` colors each tip label
  * in the tree, `rowTint` washes the row across the tree gutter and the
@@ -369,10 +437,5 @@ export interface NodeWithIds {
     length?: number;
     noTree?: boolean;
 }
-export interface NodeWithIdsAndLength {
-    id: string;
-    name: string;
-    children: NodeWithIdsAndLength[];
-    noTree?: boolean;
-    length: number;
-}
+/** @deprecated the same type as `NodeWithIds` */
+export type NodeWithIdsAndLength = NodeWithIds;

package/dist/useMsaSvgFigure.d.ts

@@ -8,7 +8,8 @@ export interface MsaSvgFigure {
 /**
  * The viewer's SVG export of its viewport, as markup for the page to insert.
  * It redraws after the view settles: `delay` ms after the last scroll, zoom,
- * resize or change to the snapshot. A draw a later one overtakes is dropped.
+ * resize, highlight or change to the snapshot. A draw a later one overtakes is
+ * dropped.
  *
  * The figure's row names and letters are SVG text, so the browser's find
  * locates them, a reader can select them, and print stylesheets apply.

package/dist/useMsaSvgFigure.js

@@ -1,12 +1,13 @@
 import { useEffect, useState } from 'react';
 import { createJBrowseTheme } from '@jbrowse/core/ui/theme';
 import { getSnapshot } from '@jbrowse/mobx-state-tree';
-import { compareStructural, reaction } from 'mobx';
+import { compareShallow, reaction } from 'mobx';
 import { renderToSvg } from './renderToSvg.js';
 /**
  * The viewer's SVG export of its viewport, as markup for the page to insert.
  * It redraws after the view settles: `delay` ms after the last scroll, zoom,
- * resize or change to the snapshot. A draw a later one overtakes is dropped.
+ * resize, highlight or change to the snapshot. A draw a later one overtakes is
+ * dropped.
  *
  * The figure's row names and letters are SVG text, so the browser's find
  * locates them, a reader can select them, and print stylesheets apply.
@@ -16,7 +17,13 @@ export function useMsaSvgFigure(model, { theme, includeTracks = false, delay = 3
     useEffect(() => {
         let latest = 0;
         const dispose = reaction(() => model.viewInitialized && model.dataInitialized
-            ? [getSnapshot(model), model.width, model.height]
+            ? [
+                getSnapshot(model),
+                model.width,
+                model.height,
+                model.resolvedHighlights,
+                model.highlightedColumnRuns,
+            ]
             : undefined, key => {
             if (!key) {
                 return;
@@ -35,7 +42,7 @@ export function useMsaSvgFigure(model, { theme, includeTracks = false, delay = 3
                     setFigure({ error });
                 }
             });
-        }, { delay, fireImmediately: true, equals: compareStructural });
+        }, { delay, fireImmediately: true, equals: compareShallow });
         return () => {
             latest = -1;
             dispose();

package/dist/useMsaSvgFigure.js.map

@@ -1 +1 @@
-{"version":3,"file":"useMsaSvgFigure.js","sourceRoot":"","sources":["../src/useMsaSvgFigure.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAE3C,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAA;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,MAAM,CAAA;AAElD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAmB,CAAA;AAW/C;;;;;;;GAOG;AACH,MAAM,UAAU,eAAe,CAC7B,KAAmB,EACnB,EACE,KAAK,EACL,aAAa,GAAG,KAAK,EACrB,KAAK,GAAG,GAAG,GACZ,GAA+D,EAAE;IAElE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAe,EAAE,CAAC,CAAA;IACtD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,MAAM,GAAG,CAAC,CAAA;QACd,MAAM,OAAO,GAAG,QAAQ,CACtB,GAAG,EAAE,CACH,KAAK,CAAC,eAAe,IAAI,KAAK,CAAC,eAAe;YAC5C,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC;YACjD,CAAC,CAAC,SAAS,EACf,GAAG,CAAC,EAAE;YACJ,IAAI,CAAC,GAAG,EAAE,CAAC;gBACT,OAAM;YACR,CAAC;YACD,MAAM,IAAI,GAAG,EAAE,MAAM,CAAA;YACrB,WAAW,CAAC,KAAK,EAAE;gBACjB,KAAK,EAAE,KAAK,IAAI,kBAAkB,EAAE;gBACpC,UAAU,EAAE,UAAU;gBACtB,aAAa;aACd,CAAC,CAAC,IAAI,CACL,GAAG,CAAC,EAAE;gBACJ,IAAI,IAAI,KAAK,MAAM,EAAE,CAAC;oBACpB,SAAS,CAAC,EAAE,GAAG,EAAE,CAAC,CAAA;gBACpB,CAAC;YACH,CAAC,EACD,CAAC,KAAc,EAAE,EAAE;gBACjB,IAAI,IAAI,KAAK,MAAM,EAAE,CAAC;oBACpB,SAAS,CAAC,EAAE,KAAK,EAAE,CAAC,CAAA;gBACtB,CAAC;YACH,CAAC,CACF,CAAA;QACH,CAAC,EACD,EAAE,KAAK,EAAE,eAAe,EAAE,IAAI,EAAE,MAAM,EAAE,iBAAiB,EAAE,CAC5D,CAAA;QACD,OAAO,GAAG,EAAE;YACV,MAAM,GAAG,CAAC,CAAC,CAAA;YACX,OAAO,EAAE,CAAA;QACX,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,CAAC,CAAC,CAAA;IACxC,OAAO,MAAM,CAAA;AACf,CAAC"}
+{"version":3,"file":"useMsaSvgFigure.js","sourceRoot":"","sources":["../src/useMsaSvgFigure.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAE3C,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAA;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,MAAM,CAAA;AAE/C,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAmB,CAAA;AAW/C;;;;;;;;GAQG;AACH,MAAM,UAAU,eAAe,CAC7B,KAAmB,EACnB,EACE,KAAK,EACL,aAAa,GAAG,KAAK,EACrB,KAAK,GAAG,GAAG,GACZ,GAA+D,EAAE;IAElE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAe,EAAE,CAAC,CAAA;IACtD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,MAAM,GAAG,CAAC,CAAA;QACd,MAAM,OAAO,GAAG,QAAQ,CACtB,GAAG,EAAE,CACH,KAAK,CAAC,eAAe,IAAI,KAAK,CAAC,eAAe;YAC5C,CAAC,CAAC;gBACE,WAAW,CAAC,KAAK,CAAC;gBAClB,KAAK,CAAC,KAAK;gBACX,KAAK,CAAC,MAAM;gBACZ,KAAK,CAAC,kBAAkB;gBACxB,KAAK,CAAC,qBAAqB;aAC5B;YACH,CAAC,CAAC,SAAS,EACf,GAAG,CAAC,EAAE;YACJ,IAAI,CAAC,GAAG,EAAE,CAAC;gBACT,OAAM;YACR,CAAC;YACD,MAAM,IAAI,GAAG,EAAE,MAAM,CAAA;YACrB,WAAW,CAAC,KAAK,EAAE;gBACjB,KAAK,EAAE,KAAK,IAAI,kBAAkB,EAAE;gBACpC,UAAU,EAAE,UAAU;gBACtB,aAAa;aACd,CAAC,CAAC,IAAI,CACL,GAAG,CAAC,EAAE;gBACJ,IAAI,IAAI,KAAK,MAAM,EAAE,CAAC;oBACpB,SAAS,CAAC,EAAE,GAAG,EAAE,CAAC,CAAA;gBACpB,CAAC;YACH,CAAC,EACD,CAAC,KAAc,EAAE,EAAE;gBACjB,IAAI,IAAI,KAAK,MAAM,EAAE,CAAC;oBACpB,SAAS,CAAC,EAAE,KAAK,EAAE,CAAC,CAAA;gBACtB,CAAC;YACH,CAAC,CACF,CAAA;QACH,CAAC,EACD,EAAE,KAAK,EAAE,eAAe,EAAE,IAAI,EAAE,MAAM,EAAE,cAAc,EAAE,CACzD,CAAA;QACD,OAAO,GAAG,EAAE;YACV,MAAM,GAAG,CAAC,CAAC,CAAA;YACX,OAAO,EAAE,CAAA;QACX,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,CAAC,CAAC,CAAA;IACxC,OAAO,MAAM,CAAA;AACf,CAAC"}

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const version = "8.2.0";
+export declare const version = "8.4.0";

package/dist/version.js

@@ -1,2 +1,2 @@
-export const version = '8.2.0';
+export const version = '8.4.0';
 //# sourceMappingURL=version.js.map

package/dist/writeNewick.d.ts

@@ -0,0 +1,8 @@
+import type { HierarchyNode } from './hierarchy.ts';
+/**
+ * The tree as Newick, in the order it is drawn. An internal node whose name is
+ * only its generated id goes unnamed. Each subtree's string is dropped once its
+ * parent takes it in, since a caterpillar tree is as deep as it has tips and
+ * keeping every one is quadratic.
+ */
+export declare function writeNewick(root: HierarchyNode): string;

package/dist/writeNewick.js

@@ -0,0 +1,34 @@
+import { descendants } from './hierarchy.js';
+// a name holding any of these reads back as grammar unless it is quoted
+const needsQuotes = /[\s(),:;[\]']/;
+function quote(name) {
+    return needsQuotes.test(name) ? `'${name.replaceAll("'", "''")}'` : name;
+}
+/**
+ * The tree as Newick, in the order it is drawn. An internal node whose name is
+ * only its generated id goes unnamed. Each subtree's string is dropped once its
+ * parent takes it in, since a caterpillar tree is as deep as it has tips and
+ * keeping every one is quadratic.
+ */
+export function writeNewick(root) {
+    const written = new Map();
+    for (const node of descendants(root).reverse()) {
+        const { id, name, length } = node.data;
+        let text = '';
+        if (node.children) {
+            text = `(${node.children.map(c => written.get(c)).join(',')})`;
+            for (const child of node.children) {
+                written.delete(child);
+            }
+        }
+        if (!(node.children && name === id)) {
+            text += quote(name);
+        }
+        if (length !== undefined) {
+            text += `:${length}`;
+        }
+        written.set(node, text);
+    }
+    return `${written.get(root)};`;
+}
+//# sourceMappingURL=writeNewick.js.map

package/dist/writeNewick.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"writeNewick.js","sourceRoot":"","sources":["../src/writeNewick.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAI5C,wEAAwE;AACxE,MAAM,WAAW,GAAG,eAAe,CAAA;AAEnC,SAAS,KAAK,CAAC,IAAY;IACzB,OAAO,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,UAAU,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAA;AAC1E,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,WAAW,CAAC,IAAmB;IAC7C,MAAM,OAAO,GAAG,IAAI,GAAG,EAAyB,CAAA;IAChD,KAAK,MAAM,IAAI,IAAI,WAAW,CAAC,IAAI,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC;QAC/C,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,IAAI,CAAA;QACtC,IAAI,IAAI,GAAG,EAAE,CAAA;QACb,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,IAAI,GAAG,IAAI,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAA;YAC/D,KAAK,MAAM,KAAK,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClC,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;YACvB,CAAC;QACH,CAAC;QACD,IAAI,CAAC,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,KAAK,EAAE,CAAC,EAAE,CAAC;YACpC,IAAI,IAAI,KAAK,CAAC,IAAI,CAAC,CAAA;QACrB,CAAC;QACD,IAAI,MAAM,KAAK,SAAS,EAAE,CAAC;YACzB,IAAI,IAAI,IAAI,MAAM,EAAE,CAAA;QACtB,CAAC;QACD,OAAO,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,CAAA;IACzB,CAAC;IACD,OAAO,GAAG,OAAO,CAAC,GAAG,CAAC,IAAI,CAAE,GAAG,CAAA;AACjC,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-msaview",
   "author": "Colin",
-  "version": "8.2.0",
+  "version": "8.4.0",
   "license": "MIT",
   "type": "module",
   "repository": {
@@ -50,10 +50,10 @@
   },
   "dependencies": {
     "@gmod/newick": "^1.0.3",
-    "@jbrowse/svgcanvas": "8.2.0",
+    "@jbrowse/svgcanvas": "8.4.0",
     "colord": "^2.10.0",
     "flatbush": "^4.6.2",
-    "msa-parsers": "8.2.0"
+    "msa-parsers": "8.4.0"
   },
   "scripts": {
     "clean": "rimraf dist bundle",

package/src/blockFasta.ts

@@ -0,0 +1,18 @@
+/**
+ * FASTA for a block of the alignment: each row's letters from column `start`
+ * to `end`, 1-based and inclusive, under its name. Gaps stay in, and a row that
+ * ends before `end` is padded with gaps, so every record is the block's width.
+ */
+export function blockFasta(
+  rows: readonly (readonly [string, string])[],
+  start: number,
+  end: number,
+) {
+  const width = Math.max(0, end - start + 1)
+  return rows
+    .map(
+      ([name, seq]) =>
+        `>${name}\n${seq.slice(start - 1, end).padEnd(width, '-')}\n`,
+    )
+    .join('')
+}

package/src/colorSchemes.ts

@@ -359,3 +359,23 @@ export default transform(colorSchemes, ([key, val]) => [
   key,
   transform(val, ([letter, color]) => [letter, colord(color).toHex()]),
 ])
+
+const letterTables = new WeakMap<
+  Record<string, string>,
+  Record<string, string>
+>()
+
+/**
+ * A letter map as the renderer looks letters up. The model upper-cases every
+ * row before coloring it, so a table keys its letters in upper case and a map
+ * may key them in either. The table is cached per map, so its identity is
+ * stable enough for the raster cache to key on.
+ */
+export function letterColorTable(map: Record<string, string>) {
+  let table = letterTables.get(map)
+  if (!table) {
+    table = transform(map, ([letter, color]) => [letter.toUpperCase(), color])
+    letterTables.set(map, table)
+  }
+  return table
+}

package/src/columnCounts.ts

@@ -63,15 +63,21 @@ export class ColumnCounts {
     this.totals = new Uint32Array(numColumns)
   }
 
+  /** tallies a row, counting the columns past a short row's end as gaps */
   addRow(row: string) {
-    const { counts, totals, slotTotals } = this
-    const n = Math.min(row.length, this.numColumns)
+    const { counts, totals, slotTotals, numColumns } = this
+    const n = Math.min(row.length, numColumns)
     for (let col = 0; col < n; col++) {
       const slot = slotOf(row.charCodeAt(col))
       counts[col * SLOTS + slot]!++
       totals[col]!++
       slotTotals[slot]!++
     }
+    for (let col = n; col < numColumns; col++) {
+      counts[col * SLOTS + DASH]!++
+      totals[col]!++
+    }
+    slotTotals[DASH]! += numColumns - n
   }
 
   add(col: number, letter: string) {
@@ -161,11 +167,13 @@ export const numResidueSlots = SLOTS
 
 /**
  * Tally counts from alignment rows (gapped sequence strings, one per row). The
- * column count follows the longest row, matching what a per-column tally of
- * ragged input produces.
+ * column count defaults to the longest row, and a shorter row counts as gapped
+ * to the end.
  */
-export function columnCountsFromRows(rows: string[]) {
-  const numColumns = rows.reduce((max, row) => Math.max(max, row.length), 0)
+export function columnCountsFromRows(
+  rows: string[],
+  numColumns = rows.reduce((max, row) => Math.max(max, row.length), 0),
+) {
   const counts = new ColumnCounts(numColumns)
   for (const row of rows) {
     counts.addRow(row)

package/src/components/CopyButton.tsx

@@ -12,7 +12,7 @@ export default function CopyButton({
   text,
   label = 'Copy to clipboard',
 }: {
-  text: string
+  text: string | (() => string)
   label?: string
 }) {
   const [copied, setCopied] = useState(false)
@@ -30,7 +30,7 @@ export default function CopyButton({
       variant="contained"
       color="primary"
       onClick={() => {
-        copy(text)
+        copy(typeof text === 'string' ? text : text())
         setCopied(true)
         clearTimeout(timer.current)
         timer.current = setTimeout(() => {

package/src/components/DragHandle.tsx

@@ -8,6 +8,10 @@ import type { Theme } from '@mui/material'
 
 export const scrollbarThumbFill = 'rgba(66,119,127,0.3)'
 
+// the model's resizeHandleWidth feeds the layout, so a divider keeps its drawn
+// width and widens its target with this much invisible margin each side
+const hitSlop = 4
+
 // The scroll thumbs (minimap, vertical scrollbar) and the resize dividers are
 // one widget -- press, drag along an axis, report the pixel delta -- differing
 // only in the affordance they present, so the variant carries the whole
@@ -71,6 +75,10 @@ export default function DragHandle({
 
   return (
     <div
+      {...(variant === 'resizer' && {
+        role: 'separator',
+        'aria-orientation': axis === 'x' ? 'vertical' : 'horizontal',
+      })}
       onMouseEnter={() => {
         setHovered(true)
       }}
@@ -87,6 +95,18 @@ export default function DragHandle({
         background: hovered ? fillHovered(theme) : fill(theme),
         ...style,
       }}
-    />
+    >
+      {variant === 'resizer' ? (
+        <div
+          style={{
+            position: 'absolute',
+            zIndex: 101,
+            ...(axis === 'x'
+              ? { top: 0, bottom: 0, left: -hitSlop, right: -hitSlop }
+              : { left: 0, right: 0, top: -hitSlop, bottom: -hitSlop }),
+          }}
+        />
+      ) : null}
+    </div>
   )
 }

package/src/components/Loading.tsx

@@ -2,35 +2,15 @@ import React from 'react'
 
 import { ErrorMessage } from '@jbrowse/core/ui'
 import { ErrorBoundary } from '@jbrowse/core/ui/ErrorBoundary'
-import { Button, CircularProgress, Typography } from '@mui/material'
+import { Button } from '@mui/material'
 import { observer } from 'mobx-react'
 
 import MSAView from './MSAView.tsx'
+import StatusMessage from './StatusMessage.tsx'
 import ImportForm from './import/ImportForm.tsx'
 
 import type { MsaViewModel } from '../model.ts'
 
-const LoadingSpinner = observer(function ({ model }: { model: MsaViewModel }) {
-  const { status } = model
-  return (
-    <div
-      style={{ display: 'flex', alignItems: 'center', gap: 12, padding: 20 }}
-    >
-      <CircularProgress size={24} />
-      <Typography variant="h6">{status?.msg ?? 'Loading...'}</Typography>
-      {status?.onCancel ? (
-        <Button
-          variant="outlined"
-          size="small"
-          onClick={() => status.onCancel?.()}
-        >
-          Cancel
-        </Button>
-      ) : null}
-    </div>
-  )
-})
-
 const Reset = observer(function ({
   model,
   error,
@@ -58,12 +38,15 @@ const Loading = observer(function ({ model }: { model: MsaViewModel }) {
   const {
     isLoading,
     dataInitialized,
+    data,
     error,
     resetCount,
     msaFilehandle,
     treeFilehandle,
   } = model
-  const hasPendingFilehandle = !!(msaFilehandle || treeFilehandle)
+  const hasData = !!(data.msa || data.tree)
+  // a failed load keeps its filehandle, so the error outranks the spinner
+  const loading = !error && !!(msaFilehandle || treeFilehandle || isLoading)
 
   return (
     <div>
@@ -76,18 +59,19 @@ const Loading = observer(function ({ model }: { model: MsaViewModel }) {
       >
         {dataInitialized ? (
           isLoading ? (
-            <LoadingSpinner model={model} />
+            <StatusMessage model={model} variant="page" />
           ) : (
             <MSAView model={model} />
           )
-        ) : error ? (
-          // checked before the spinner: a failed load keeps its filehandle
-          // (only an abort clears it), so hasPendingFilehandle stays true
+        ) : hasData ? (
           <Reset model={model} error={error} />
-        ) : hasPendingFilehandle || isLoading ? (
-          <LoadingSpinner model={model} />
         ) : (
-          <ImportForm model={model} />
+          <>
+            {loading ? <StatusMessage model={model} variant="page" /> : null}
+            <div style={{ display: loading ? 'none' : undefined }}>
+              <ImportForm model={model} />
+            </div>
+          </>
         )}
       </ErrorBoundary>
     </div>

package/src/components/MSAView.tsx

@@ -11,7 +11,7 @@ import VerticalScrollbar from './VerticalScrollbar.tsx'
 import Header from './header/Header.tsx'
 import Minimap from './minimap/Minimap.tsx'
 import MSAPanel from './msa/MSAPanel.tsx'
-import { clickColor, hoverColor } from './overlayColors.ts'
+import { clickColor, hoverColor, selectionFill } from './overlayColors.ts'
 import RowPanelHeaders from './rowpanels/RowPanelHeaders.tsx'
 import RowPanels from './rowpanels/RowPanels.tsx'
 import TreeOverview from './tree/TreeOverview.tsx'
@@ -53,12 +53,19 @@ const TrackColumnIndicator = observer(function ({
     resizeHandleWidth,
     totalTrackAreaHeight,
     msaCanvasWidth,
+    resolvedSelection,
   } = model
 
-  // hovered column, then the pinned one, matching the alignment's own overlay
+  // the selected columns, the hovered column, then the pinned one, matching
+  // the alignment's own overlay
   const bands = [
-    { col: mouseCol, color: hoverColor },
-    { col: mouseClickCol, color: clickColor },
+    {
+      start: resolvedSelection?.startCol,
+      end: resolvedSelection?.endCol,
+      color: selectionFill,
+    },
+    { start: mouseCol, end: mouseCol, color: hoverColor },
+    { start: mouseClickCol, end: mouseClickCol, color: clickColor },
   ]
 
   return (
@@ -73,15 +80,15 @@ const TrackColumnIndicator = observer(function ({
         pointerEvents: 'none',
       }}
     >
-      {bands.map(({ col, color }) =>
-        col === undefined ? null : (
+      {bands.map(({ start, end, color }) =>
+        start === undefined || end === undefined ? null : (
           <div
             key={color}
             style={{
               position: 'absolute',
-              left: col * colWidth + scrollX,
+              left: start * colWidth + scrollX,
               top: 0,
-              width: colWidth,
+              width: (end - start + 1) * colWidth,
               height: totalTrackAreaHeight,
               backgroundColor: color,
               zIndex: 100,
@@ -140,7 +147,7 @@ const MSAView = observer(function ({ model }: { model: MsaViewModel }) {
     <div>
       {viewInitialized ? (
         <>
-          <div style={{ height, overflow: 'hidden' }}>
+          <div style={{ height, overflow: 'clip' }}>
             {hideHeader ? null : <Header model={model} />}
             <View model={model} />
           </div>