react-msaview 8.3.0 → 8.4.0

package/dist/svgTestUtil.d.ts

@@ -14,12 +14,13 @@ export declare function createTestModel(snapshot: Omit<Snapshot, 'type'>, width?
     showTreeOverview: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<boolean>, [undefined]>;
     overviewHeight: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<number>, [undefined]>;
     autoTreeAreaWidth: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<boolean>, [undefined]>;
-}, "bgColor" | "colorSchemeName" | "msaFormat" | "showColumnStats"> & {
+}, "bgColor" | "colorSchemeName" | "customColorScheme" | "msaFormat" | "showColumnStats"> & {
     bgColor: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<boolean>, [undefined]>;
     colorSchemeName: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<string>, [undefined]>;
+    customColorScheme: import("@jbrowse/mobx-state-tree").IType<Record<string, string> | undefined, Record<string, string> | undefined, Record<string, string> | undefined>;
     showColumnStats: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<boolean>, [undefined]>;
     msaFormat: import("@jbrowse/mobx-state-tree").IMaybe<import("@jbrowse/mobx-state-tree").ISimpleType<import("msa-parsers").MSAFormat>>;
-}, "allowedGappyness" | "clades" | "colWidth" | "collapsed" | "columnTracks" | "currentAlignment" | "data" | "drawMsaLetters" | "encodings" | "gffFilehandle" | "height" | "hideGaps" | "highlightColumns" | "highlights" | "id" | "msaFilehandle" | "region" | "relativeTo" | "residueMappings" | "rotated" | "rowHeight" | "rowPanels" | "scrollX" | "scrollY" | "scrollZoom" | "scrollZoomAxis" | "showDomainLegend" | "showDomains" | "showOnly" | "subFeatureRows" | "trackHeights" | "treeFilehandle" | "treeMetadataFilehandle" | "treeRoot" | "turnedOffFeatures" | "turnedOffTracks" | "type"> & {
+}, "allowedGappyness" | "clades" | "colWidth" | "collapsed" | "columnTracks" | "currentAlignment" | "data" | "drawMsaLetters" | "encodings" | "features" | "gffFilehandle" | "height" | "hideGaps" | "highlightColumns" | "highlights" | "id" | "msaFilehandle" | "region" | "relativeTo" | "residueMappings" | "rotated" | "rowHeight" | "rowPanels" | "scrollX" | "scrollY" | "scrollZoom" | "scrollZoomAxis" | "selection" | "showDomainLegend" | "showDomains" | "showOnly" | "subFeatureRows" | "trackHeights" | "treeFilehandle" | "treeMetadataFilehandle" | "treeRoot" | "turnedOffFeatures" | "turnedOffTracks" | "type"> & {
     id: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<string>, [undefined]>;
     showDomains: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<boolean>, [undefined]>;
     showDomainLegend: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<boolean>, [undefined]>;
@@ -437,6 +438,8 @@ export declare function createTestModel(snapshot: Omit<Snapshot, 'type'>, width?
     relativeTo: import("@jbrowse/mobx-state-tree").IMaybe<import("@jbrowse/mobx-state-tree").ISimpleType<string>>;
     highlightColumns: import("@jbrowse/mobx-state-tree").IType<number[] | undefined, number[] | undefined, number[] | undefined>;
     highlights: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").IArrayType<import("@jbrowse/mobx-state-tree").IType<import("./types.ts").Highlight, import("./types.ts").Highlight, import("./types.ts").Highlight>>, [undefined]>;
+    features: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").IArrayType<import("@jbrowse/mobx-state-tree").IType<import("./types.ts").Feature, import("./types.ts").Feature, import("./types.ts").Feature>>, [undefined]>;
+    selection: import("@jbrowse/mobx-state-tree").IType<import("./types.ts").MsaSelection | undefined, import("./types.ts").MsaSelection | undefined, import("./types.ts").MsaSelection | undefined>;
     region: import("@jbrowse/mobx-state-tree").IType<import("./types.ts").Region | undefined, import("./types.ts").Region | undefined, import("./types.ts").Region | undefined>;
     clades: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").IArrayType<import("@jbrowse/mobx-state-tree").IType<import("./types.ts").Clade, import("./types.ts").Clade, import("./types.ts").Clade>>, [undefined]>;
     encodings: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").IArrayType<import("@jbrowse/mobx-state-tree").IType<import("./types.ts").Encoding, import("./types.ts").Encoding, import("./types.ts").Encoding>>, [undefined]>;
@@ -464,6 +467,7 @@ export declare function createTestModel(snapshot: Omit<Snapshot, 'type'>, width?
     setDrawLabels(arg: boolean): void;
 } & {
     setColorSchemeName(name: string): void;
+    setCustomColorScheme(map?: Record<string, string>): void;
     setBgColor(arg: boolean): void;
     setShowColumnStats(arg: boolean): void;
     setMSAFormat(arg?: import("msa-parsers").MSAFormat): void;
@@ -514,6 +518,9 @@ export declare function createTestModel(snapshot: Omit<Snapshot, 'type'>, width?
     setHighlightedColumns(columns?: number[]): void;
     setRegion(region?: import("./types.ts").Region): void;
     setHighlights(highlights: import("./types.ts").Highlight[]): void;
+    setFeatures(features: import("./types.ts").Feature[]): void;
+    setSelection(selection?: import("./types.ts").MsaSelection): void;
+    clearSelection(): void;
     setClades(clades: import("./types.ts").Clade[]): void;
     applyHighlight(owner: string, highlights: import("./types.ts").Highlight[]): void;
     clearHighlight(owner: string): void;
@@ -542,16 +549,18 @@ export declare function createTestModel(snapshot: Omit<Snapshot, 'type'>, width?
     setMSA(result: string): void;
     setTree(result: string): void;
     setTreeMetadata(result: string): void;
-    setGFF(result: string): void;
+    setGFF(result?: string): void;
 } & {
     readonly hideGapsEffective: boolean;
     readonly realAllowedGappyness: number;
+    readonly allAnnotations: import("msa-parsers").Annotation[];
     readonly actuallyShowDomains: boolean;
     readonly hostRestoresData: boolean;
     readonly viewInitialized: boolean;
     readonly width: number;
 } & {
     readonly colorScheme: Record<string, string>;
+    readonly dynamicColorSchemeName: string | undefined;
     readonly header: Record<string, unknown> | {
         info: string;
         version: string | undefined;
@@ -741,7 +750,7 @@ export declare function createTestModel(snapshot: Omit<Snapshot, 'type'>, width?
     doScrollX(deltaX: number): void;
     setScrollX(n: number): void;
     setColumnTracks(tracks: import("./types.ts").ColumnTrackSpec[]): void;
-    setRowData(rowData: Record<string, Record<string, string>>): void;
+    setRowData(rowData: import("./types.ts").RowDataInput): void;
     setEncodings(encodings: import("./types.ts").Encoding[]): void;
     setRowPanels(panels: import("./types.ts").RowPanelSpec[]): void;
     setResidueMappings(mappings: import("./types.ts").ResidueMapping[]): void;
@@ -781,6 +790,16 @@ export declare function createTestModel(snapshot: Omit<Snapshot, 'type'>, width?
     }[];
     fillHighlightLabel(label: string, row?: string, start?: number): string;
     readonly resolvedHighlights: import("./types.ts").ResolvedHighlight[];
+    readonly resolvedSelection: import("./types.ts").ResolvedSelection | undefined;
+    readonly selectionSize: {
+        columns: number;
+        rows: number;
+    } | undefined;
+    readonly selectionFileSpan: {
+        start: number;
+        end: number;
+    } | undefined;
+    readonly selectionFasta: string;
     columnStatsAt(col: number): import("./columnStats.ts").ColumnStats | undefined;
     getRowData(name: string): {
         data: {
@@ -828,6 +847,14 @@ export declare function createTestModel(snapshot: Omit<Snapshot, 'type'>, width?
     fit(): void;
     fitVertically(): void;
     zoomToRegion(region: import("./types.ts").Region): void;
+    zoomToSelection(): void;
+    selectBlock(anchor: {
+        col: number;
+        row?: number;
+    }, head: {
+        col: number;
+        row?: number;
+    }): void;
     fitHorizontally(): void;
     afterCreate(): void;
 } & import("@jbrowse/mobx-state-tree").IStateTreeNode<import("@jbrowse/mobx-state-tree").IModelType<Omit<Omit<Omit<{}, "autoTreeAreaWidth" | "drawLabels" | "drawNodeBubbles" | "drawNodeLabels" | "drawTree" | "labelsAlignRight" | "overviewHeight" | "showBranchLen" | "showTreeOverview" | "treeAreaWidth" | "treeOrder" | "treeWidth"> & {
@@ -843,12 +870,13 @@ export declare function createTestModel(snapshot: Omit<Snapshot, 'type'>, width?
     showTreeOverview: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<boolean>, [undefined]>;
     overviewHeight: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<number>, [undefined]>;
     autoTreeAreaWidth: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<boolean>, [undefined]>;
-}, "bgColor" | "colorSchemeName" | "msaFormat" | "showColumnStats"> & {
+}, "bgColor" | "colorSchemeName" | "customColorScheme" | "msaFormat" | "showColumnStats"> & {
     bgColor: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<boolean>, [undefined]>;
     colorSchemeName: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<string>, [undefined]>;
+    customColorScheme: import("@jbrowse/mobx-state-tree").IType<Record<string, string> | undefined, Record<string, string> | undefined, Record<string, string> | undefined>;
     showColumnStats: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<boolean>, [undefined]>;
     msaFormat: import("@jbrowse/mobx-state-tree").IMaybe<import("@jbrowse/mobx-state-tree").ISimpleType<import("msa-parsers").MSAFormat>>;
-}, "allowedGappyness" | "clades" | "colWidth" | "collapsed" | "columnTracks" | "currentAlignment" | "data" | "drawMsaLetters" | "encodings" | "gffFilehandle" | "height" | "hideGaps" | "highlightColumns" | "highlights" | "id" | "msaFilehandle" | "region" | "relativeTo" | "residueMappings" | "rotated" | "rowHeight" | "rowPanels" | "scrollX" | "scrollY" | "scrollZoom" | "scrollZoomAxis" | "showDomainLegend" | "showDomains" | "showOnly" | "subFeatureRows" | "trackHeights" | "treeFilehandle" | "treeMetadataFilehandle" | "treeRoot" | "turnedOffFeatures" | "turnedOffTracks" | "type"> & {
+}, "allowedGappyness" | "clades" | "colWidth" | "collapsed" | "columnTracks" | "currentAlignment" | "data" | "drawMsaLetters" | "encodings" | "features" | "gffFilehandle" | "height" | "hideGaps" | "highlightColumns" | "highlights" | "id" | "msaFilehandle" | "region" | "relativeTo" | "residueMappings" | "rotated" | "rowHeight" | "rowPanels" | "scrollX" | "scrollY" | "scrollZoom" | "scrollZoomAxis" | "selection" | "showDomainLegend" | "showDomains" | "showOnly" | "subFeatureRows" | "trackHeights" | "treeFilehandle" | "treeMetadataFilehandle" | "treeRoot" | "turnedOffFeatures" | "turnedOffTracks" | "type"> & {
     id: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<string>, [undefined]>;
     showDomains: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<boolean>, [undefined]>;
     showDomainLegend: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<boolean>, [undefined]>;
@@ -1266,6 +1294,8 @@ export declare function createTestModel(snapshot: Omit<Snapshot, 'type'>, width?
     relativeTo: import("@jbrowse/mobx-state-tree").IMaybe<import("@jbrowse/mobx-state-tree").ISimpleType<string>>;
     highlightColumns: import("@jbrowse/mobx-state-tree").IType<number[] | undefined, number[] | undefined, number[] | undefined>;
     highlights: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").IArrayType<import("@jbrowse/mobx-state-tree").IType<import("./types.ts").Highlight, import("./types.ts").Highlight, import("./types.ts").Highlight>>, [undefined]>;
+    features: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").IArrayType<import("@jbrowse/mobx-state-tree").IType<import("./types.ts").Feature, import("./types.ts").Feature, import("./types.ts").Feature>>, [undefined]>;
+    selection: import("@jbrowse/mobx-state-tree").IType<import("./types.ts").MsaSelection | undefined, import("./types.ts").MsaSelection | undefined, import("./types.ts").MsaSelection | undefined>;
     region: import("@jbrowse/mobx-state-tree").IType<import("./types.ts").Region | undefined, import("./types.ts").Region | undefined, import("./types.ts").Region | undefined>;
     clades: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").IArrayType<import("@jbrowse/mobx-state-tree").IType<import("./types.ts").Clade, import("./types.ts").Clade, import("./types.ts").Clade>>, [undefined]>;
     encodings: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").IArrayType<import("@jbrowse/mobx-state-tree").IType<import("./types.ts").Encoding, import("./types.ts").Encoding, import("./types.ts").Encoding>>, [undefined]>;
@@ -1293,6 +1323,7 @@ export declare function createTestModel(snapshot: Omit<Snapshot, 'type'>, width?
     setDrawLabels(arg: boolean): void;
 } & {
     setColorSchemeName(name: string): void;
+    setCustomColorScheme(map?: Record<string, string>): void;
     setBgColor(arg: boolean): void;
     setShowColumnStats(arg: boolean): void;
     setMSAFormat(arg?: import("msa-parsers").MSAFormat): void;
@@ -1343,6 +1374,9 @@ export declare function createTestModel(snapshot: Omit<Snapshot, 'type'>, width?
     setHighlightedColumns(columns?: number[]): void;
     setRegion(region?: import("./types.ts").Region): void;
     setHighlights(highlights: import("./types.ts").Highlight[]): void;
+    setFeatures(features: import("./types.ts").Feature[]): void;
+    setSelection(selection?: import("./types.ts").MsaSelection): void;
+    clearSelection(): void;
     setClades(clades: import("./types.ts").Clade[]): void;
     applyHighlight(owner: string, highlights: import("./types.ts").Highlight[]): void;
     clearHighlight(owner: string): void;
@@ -1371,16 +1405,18 @@ export declare function createTestModel(snapshot: Omit<Snapshot, 'type'>, width?
     setMSA(result: string): void;
     setTree(result: string): void;
     setTreeMetadata(result: string): void;
-    setGFF(result: string): void;
+    setGFF(result?: string): void;
 } & {
     readonly hideGapsEffective: boolean;
     readonly realAllowedGappyness: number;
+    readonly allAnnotations: import("msa-parsers").Annotation[];
     readonly actuallyShowDomains: boolean;
     readonly hostRestoresData: boolean;
     readonly viewInitialized: boolean;
     readonly width: number;
 } & {
     readonly colorScheme: Record<string, string>;
+    readonly dynamicColorSchemeName: string | undefined;
     readonly header: Record<string, unknown> | {
         info: string;
         version: string | undefined;
@@ -1570,7 +1606,7 @@ export declare function createTestModel(snapshot: Omit<Snapshot, 'type'>, width?
     doScrollX(deltaX: number): void;
     setScrollX(n: number): void;
     setColumnTracks(tracks: import("./types.ts").ColumnTrackSpec[]): void;
-    setRowData(rowData: Record<string, Record<string, string>>): void;
+    setRowData(rowData: import("./types.ts").RowDataInput): void;
     setEncodings(encodings: import("./types.ts").Encoding[]): void;
     setRowPanels(panels: import("./types.ts").RowPanelSpec[]): void;
     setResidueMappings(mappings: import("./types.ts").ResidueMapping[]): void;
@@ -1610,6 +1646,16 @@ export declare function createTestModel(snapshot: Omit<Snapshot, 'type'>, width?
     }[];
     fillHighlightLabel(label: string, row?: string, start?: number): string;
     readonly resolvedHighlights: import("./types.ts").ResolvedHighlight[];
+    readonly resolvedSelection: import("./types.ts").ResolvedSelection | undefined;
+    readonly selectionSize: {
+        columns: number;
+        rows: number;
+    } | undefined;
+    readonly selectionFileSpan: {
+        start: number;
+        end: number;
+    } | undefined;
+    readonly selectionFasta: string;
     columnStatsAt(col: number): import("./columnStats.ts").ColumnStats | undefined;
     getRowData(name: string): {
         data: {
@@ -1657,11 +1703,20 @@ export declare function createTestModel(snapshot: Omit<Snapshot, 'type'>, width?
     fit(): void;
     fitVertically(): void;
     zoomToRegion(region: import("./types.ts").Region): void;
+    zoomToSelection(): void;
+    selectBlock(anchor: {
+        col: number;
+        row?: number;
+    }, head: {
+        col: number;
+        row?: number;
+    }): void;
     fitHorizontally(): void;
     afterCreate(): void;
 }, import("@jbrowse/mobx-state-tree")._NotCustomized, {
     bgColor: boolean;
     colorSchemeName: string;
+    customColorScheme: Record<string, string> | undefined;
     showColumnStats: boolean;
     msaFormat: import("msa-parsers").MSAFormat | undefined;
     drawLabels: boolean;
@@ -1784,6 +1839,8 @@ export declare function createTestModel(snapshot: Omit<Snapshot, 'type'>, width?
     relativeTo: string | undefined;
     highlightColumns: number[] | undefined;
     highlights: import("./types.ts").Highlight[];
+    features: import("./types.ts").Feature[];
+    selection: import("./types.ts").MsaSelection | undefined;
     region: import("./types.ts").Region | undefined;
     clades: import("./types.ts").Clade[];
     encodings: import("./types.ts").Encoding[];
@@ -1797,6 +1854,7 @@ export declare function createTestModel(snapshot: Omit<Snapshot, 'type'>, width?
 } | {
     bgColor: boolean;
     colorSchemeName: string;
+    customColorScheme: Record<string, string> | undefined;
     showColumnStats: boolean;
     msaFormat: import("msa-parsers").MSAFormat | undefined;
     drawLabels: boolean;
@@ -1919,6 +1977,8 @@ export declare function createTestModel(snapshot: Omit<Snapshot, 'type'>, width?
     relativeTo: string | undefined;
     highlightColumns: number[] | undefined;
     highlights: import("./types.ts").Highlight[];
+    features: import("./types.ts").Feature[];
+    selection: import("./types.ts").MsaSelection | undefined;
     region: import("./types.ts").Region | undefined;
     clades: import("./types.ts").Clade[];
     encodings: import("./types.ts").Encoding[];

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,6 +272,25 @@ 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
@@ -330,6 +355,25 @@ 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
@@ -348,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

package/dist/version.d.ts

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

package/dist/version.js

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-msaview",
   "author": "Colin",
-  "version": "8.3.0",
+  "version": "8.4.0",
   "license": "MIT",
   "type": "module",
   "repository": {
@@ -50,10 +50,10 @@
   },
   "dependencies": {
     "@gmod/newick": "^1.0.3",
-    "@jbrowse/svgcanvas": "8.3.0",
+    "@jbrowse/svgcanvas": "8.4.0",
     "colord": "^2.10.0",
     "flatbush": "^4.6.2",
-    "msa-parsers": "8.3.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/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>