react-msaview 5.9.0 → 6.0.0

package/dist/model.js

@@ -4,7 +4,7 @@ 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';
@@ -15,7 +15,7 @@ import { defaultAllowedGappyness, defaultColWidth, defaultColorSchemeName, defau
 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,7 +24,7 @@ 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 { stripDefault } from './stripDefault.js';
 import { computeRowInsertions, len, skipBlanks, transform } from './util.js';
@@ -39,7 +39,7 @@ function parseTreeText(text) {
  * #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 +145,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),
         /**
@@ -283,8 +283,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 +377,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 +417,6 @@ function stateModelFactory() {
         setColWidth(n) {
             self.colWidth = n;
         },
-        /**
-         * #action
-         * set scroll Y-offset (px)
-         */
-        setScrollY(n) {
-            self.scrollY = n;
-        },
         /**
          * #action
          *
@@ -511,7 +508,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 +559,7 @@ function stateModelFactory() {
             return !!this.tree.noTree;
         },
         get noDomains() {
-            return !self.interProAnnotations;
+            return self.annotations.length === 0;
         },
         menuItems() {
             return [];
@@ -742,12 +739,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 +819,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.
@@ -935,14 +919,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;
@@ -1089,18 +1072,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 +1185,36 @@ function stateModelFactory() {
          * #action
          */
         doScrollY(deltaY) {
-            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) {
+            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) {
+            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
@@ -1247,17 +1251,20 @@ 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, fontSize } = 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
+            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)];
-                }));
+                }))
+                : new Map();
         },
         get labelsWidth() {
             // a loop, not Math.max(...widths.values()): spreading a map of every
@@ -1419,8 +1426,8 @@ function stateModelFactory() {
                 return 0;
             }
             const col = self.seqPosGlobalColIndex.get(rowName)?.[seqPos];
-            // past the end of the ungapped sequence: 0 for the degenerate empty-row
-            // case, otherwise one past the last column, as the scan version returned
+            // past the end of the ungapped sequence: 0 for the degenerate all-gap
+            // row, otherwise one past the last column
             return col ?? (seqPos === 0 ? 0 : seq.length);
         },
         /**
@@ -1454,35 +1461,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 +1499,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 +1515,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 +1525,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 +1566,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 bands = new Map();
-            for (const [name, annotations] of Object.entries(self.tidyFilteredGatheredInterProAnnotations)) {
+            for (const [name, annotations] of Object.entries(self.annotationsByRow)) {
+                const { blanks } = self;
                 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);
                 }
@@ -1730,7 +1748,7 @@ function stateModelFactory() {
             self.setTreeFilehandle(undefined);
             self.setMSAFilehandle(undefined);
             self.setGFFFilehandle(undefined);
-            self.setDomains(undefined);
+            self.setAnnotations([]);
         },
         /**
          * #action
@@ -1770,7 +1788,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 +1803,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);
                 }
             }));
@@ -1805,37 +1826,51 @@ function stateModelFactory() {
                     mql.removeEventListener('change', onChange);
                 });
             }
-            // autorun opens treeFilehandle. generation guard: if the filehandle
-            // changes mid-fetch, a slower earlier request must not clobber the data
-            // (or loading flag) set by the newer one
-            let treeGeneration = 0;
-            addDisposer(self, autorun(async () => {
-                const { treeFilehandle } = self;
-                if (treeFilehandle) {
-                    const generation = ++treeGeneration;
+            /**
+             * Fetch a filehandle whenever it changes, and hand the text to
+             * `onLoad`.
+             *
+             * Every loader carries a generation guard: the filehandle can change
+             * mid-fetch (a second file picked while the first is still in flight),
+             * and the slower earlier request must not clobber the data, status, or
+             * loading flag belonging to the newer one.
+             *
+             * `clearFilehandle` serves two purposes for the loaders that pass it.
+             * A local file has no URL to refetch from, so the handle is dropped
+             * once its bytes are in the model; and a fetch the user cancels drops
+             * it too, returning the view to the import form rather than leaving a
+             * stuck spinner.
+             */
+            const loadOnFilehandleChange = ({ getFilehandle, onLoad, setLoading, clearFilehandle, }) => {
+                let generation = 0;
+                addDisposer(self, autorun(async () => {
+                    const filehandle = getFilehandle();
+                    if (!filehandle) {
+                        return;
+                    }
+                    const current = ++generation;
+                    const isCurrent = () => current === generation;
                     try {
-                        self.setLoadingTree(true);
-                        const text = await fetchTextWithProgress(openLocation(treeFilehandle), status => {
-                            if (generation === treeGeneration) {
+                        setLoading?.(true);
+                        self.setError(undefined);
+                        const text = await fetchTextWithProgress(openLocation(filehandle), status => {
+                            if (isCurrent()) {
                                 self.setStatus(status);
                             }
                         });
-                        if (generation === treeGeneration) {
+                        if (isCurrent()) {
                             transaction(() => {
-                                self.setTree(text);
-                                if (treeFilehandle.locationType === 'BlobLocation') {
-                                    // clear filehandle after loading if from a local file
-                                    self.setTreeFilehandle(undefined);
+                                onLoad(text);
+                                if (filehandle.locationType === 'BlobLocation') {
+                                    clearFilehandle?.();
                                 }
                             });
                         }
                     }
                     catch (e) {
-                        if (generation === treeGeneration) {
+                        if (isCurrent()) {
                             if (isAbortError(e)) {
-                                // cancelled by the user: drop the filehandle so the view
-                                // returns to the import form instead of a stuck spinner
-                                self.setTreeFilehandle(undefined);
+                                clearFilehandle?.();
                             }
                             else {
                                 console.error(e);
@@ -1844,30 +1879,32 @@ function stateModelFactory() {
                         }
                     }
                     finally {
-                        if (generation === treeGeneration) {
-                            self.setLoadingTree(false);
-                        }
-                    }
-                }
-            }));
-            // autorun opens treeMetadataFilehandle
-            addDisposer(self, autorun(async () => {
-                const { treeMetadataFilehandle } = self;
-                if (treeMetadataFilehandle) {
-                    try {
-                        self.setTreeMetadata(await fetchTextWithProgress(openLocation(treeMetadataFilehandle), status => {
-                            self.setStatus(status);
-                        }));
-                    }
-                    catch (e) {
-                        // ignore user cancel (isAbortError); treeMetadata is optional
-                        if (!isAbortError(e)) {
-                            console.error(e);
-                            self.setError(e);
+                        if (isCurrent()) {
+                            setLoading?.(false);
                         }
                     }
-                }
-            }));
+                }));
+            };
+            loadOnFilehandleChange({
+                getFilehandle: () => self.treeFilehandle,
+                onLoad: text => {
+                    self.setTree(text);
+                },
+                setLoading: arg => {
+                    self.setLoadingTree(arg);
+                },
+                clearFilehandle: () => {
+                    self.setTreeFilehandle(undefined);
+                },
+            });
+            // treeMetadata is decorative and has no import-form step of its own, so
+            // it keeps no loading flag and nothing to return to on cancel
+            loadOnFilehandleChange({
+                getFilehandle: () => self.treeMetadataFilehandle,
+                onLoad: text => {
+                    self.setTreeMetadata(text);
+                },
+            });
             // autorun parses inline gff text from data.gff
             addDisposer(self, autorun(() => {
                 const gffText = self.data.gff;
@@ -1881,75 +1918,28 @@ function stateModelFactory() {
                     }
                 }
             }));
-            // autorun opens gffFilehandle for InterProScan domains
-            addDisposer(self, autorun(async () => {
-                const { gffFilehandle } = self;
-                if (gffFilehandle) {
-                    try {
-                        const gffText = await fetchTextWithProgress(openLocation(gffFilehandle), status => {
-                            self.setStatus(status);
-                        });
-                        self.applyGFFText(gffText);
-                        if (gffFilehandle.locationType === 'BlobLocation') {
-                            self.setGFFFilehandle(undefined);
-                        }
-                    }
-                    catch (e) {
-                        // on user cancel (isAbortError) drop the filehandle
-                        if (isAbortError(e)) {
-                            self.setGFFFilehandle(undefined);
-                        }
-                        else {
-                            console.error(e);
-                            self.setError(e);
-                        }
-                    }
-                }
-            }));
-            // autorun opens msaFilehandle. generation guard: see treeFilehandle
-            let msaGeneration = 0;
-            addDisposer(self, autorun(async () => {
-                const { msaFilehandle } = self;
-                if (msaFilehandle) {
-                    const generation = ++msaGeneration;
-                    try {
-                        self.setLoadingMSA(true);
-                        self.setError(undefined);
-                        const txt = await fetchTextWithProgress(openLocation(msaFilehandle), status => {
-                            if (generation === msaGeneration) {
-                                self.setStatus(status);
-                            }
-                        });
-                        if (generation === msaGeneration) {
-                            transaction(() => {
-                                self.setMSA(txt);
-                                if (msaFilehandle.locationType === 'BlobLocation') {
-                                    // clear filehandle after loading if from a local file
-                                    self.setMSAFilehandle(undefined);
-                                }
-                            });
-                        }
-                    }
-                    catch (e) {
-                        if (generation === msaGeneration) {
-                            if (isAbortError(e)) {
-                                // cancelled by the user: drop the filehandle so the view
-                                // returns to the import form instead of a stuck spinner
-                                self.setMSAFilehandle(undefined);
-                            }
-                            else {
-                                console.error(e);
-                                self.setError(e);
-                            }
-                        }
-                    }
-                    finally {
-                        if (generation === msaGeneration) {
-                            self.setLoadingMSA(false);
-                        }
-                    }
-                }
-            }));
+            // gffFilehandle carries overlay annotations
+            loadOnFilehandleChange({
+                getFilehandle: () => self.gffFilehandle,
+                onLoad: text => {
+                    self.applyGFFText(text);
+                },
+                clearFilehandle: () => {
+                    self.setGFFFilehandle(undefined);
+                },
+            });
+            loadOnFilehandleChange({
+                getFilehandle: () => self.msaFilehandle,
+                onLoad: text => {
+                    self.setMSA(text);
+                },
+                setLoading: arg => {
+                    self.setLoadingMSA(arg);
+                },
+                clearFilehandle: () => {
+                    self.setMSAFilehandle(undefined);
+                },
+            });
             // Keep the parse chain warm: reading self.columns transitively holds
             // self.MSA (parseMSA) computed alive, so it is parsed once per data
             // change rather than re-parsed on every non-reactive access. Do not