react-msaview 3.1.7 → 3.1.8

package/dist/model.js

@@ -1,4 +1,4 @@
-import { autorun } from 'mobx';
+import { autorun, transaction } from 'mobx';
 import { cast, types, addDisposer } from 'mobx-state-tree';
 import { hierarchy, cluster } from 'd3-hierarchy';
 import { ascending } from 'd3-array';
@@ -7,15 +7,16 @@ import { saveAs } from 'file-saver';
 // jbrowse
 import { FileLocation, ElementId } from '@jbrowse/core/util/types/mst';
 import { openLocation } from '@jbrowse/core/util/io';
-import { notEmpty, sum } from '@jbrowse/core/util';
-import BaseViewModel from '@jbrowse/core/pluggableElementTypes/models/BaseViewModel';
+import { groupBy, localStorageGetItem, localStorageSetItem, notEmpty, sum, } from '@jbrowse/core/util';
 // locals
-import { clamp, collapse, generateNodeIds, maxLength, setBrLength, skipBlanks, } from './util';
+import { clamp, collapse, generateNodeIds, maxLength, setBrLength, skipBlanks, len, } from './util';
+import { colord } from 'colord';
+import { reparseTree } from './reparseTree';
 import { blocksX, blocksY } from './calculateBlocks';
 import { measureTextCanvas } from './measureTextCanvas';
+import palettes from './ggplotPalettes';
 // components
 import TextTrack from './components/TextTrack';
-import BoxTrack from './components/BoxTrack';
 // parsers
 import ClustalMSA from './parsers/ClustalMSA';
 import StockholmMSA from './parsers/StockholmMSA';
@@ -23,1069 +24,1082 @@ import FastaMSA from './parsers/FastaMSA';
 import parseNewick from './parseNewick';
 import colorSchemes from './colorSchemes';
 // models
-import { UniprotTrack } from './UniprotTrack';
-import { DataModelF } from './DataModel';
-import { DialogQueueSessionMixin } from './DialogQueue';
-import { SelectedStructuresMixin } from './SelectedStructuresMixin';
+import { DataModelF } from './model/DataModel';
+import { DialogQueueSessionMixin } from './model/DialogQueue';
+import { TreeF } from './model/treeModel';
+import { MSAModelF } from './model/msaModel';
+import { launchInterProScan, loadInterProScanResults, } from './launchInterProScan';
 /**
  * #stateModel MsaView
  * extends
- * - BaseViewModel
  * - DialogQueueSessionMixin
- * - SelectedStructuresMixin
+ * - MSAModel
+ * - Tree
  */
-function x() { } // eslint-disable-line @typescript-eslint/no-unused-vars
-function reparseTree(tree) {
-    return {
-        ...tree,
-        branchset: tree.branchset.map(r => r.branchset.length
-            ? reparseTree(r)
-            : {
-                branchset: [r],
-                id: `${r.id}-leafnode`,
-                name: `${r.name}-hidden`,
-            }),
-    };
-}
-const model = types
-    .compose(BaseViewModel, DialogQueueSessionMixin(), SelectedStructuresMixin(), types.model('MsaView', {
-    /**
-     * #property
-     * id of view, randomly generated if not provided
-     */
-    id: ElementId,
-    /**
-     * #property
-     * hardcoded view type
-     */
-    type: types.literal('MsaView'),
-    /**
-     * #property
-     * height of the div containing the view, px
-     */
-    height: types.optional(types.number, 550),
-    /**
-     * #property
-     * width of the area the tree is drawn in, px
-     */
-    treeAreaWidth: types.optional(types.number, 400),
-    /**
-     * #property
-     * width of the tree within the treeArea, px
-     */
-    treeWidth: types.optional(types.number, 300),
-    /**
-     * #getter
-     * synchronization that matches treeWidth to treeAreaWidth
-     */
-    treeWidthMatchesArea: true,
-    /**
-     * #property
-     * height of each row, px
-     */
-    rowHeight: 20,
-    /**
-     * #property
-     * scroll position, Y-offset, px
-     */
-    scrollY: 0,
-    /**
-     * #property
-     * scroll position, X-offset, px
-     */
-    scrollX: 0,
-    /**
-     * #property
-     * right-align the labels
-     */
-    labelsAlignRight: false,
-    /**
-     * #property
-     * width of columns, px
-     */
-    colWidth: 16,
-    /**
-     * #property
-     * use "branch length" e.g. evolutionary distance to draw tree branch
-     * lengths. if false, the layout is a "cladogram" that does not take into
-     * account evolutionary distances
-     */
-    showBranchLen: true,
-    /**
-     * #property
-     * draw MSA tiles with a background color
-     */
-    bgColor: true,
-    /**
-     * #property
-     * draw tree, boolean
-     */
-    drawTree: true,
-    /**
-     * #property
-     * draw clickable node bubbles on the tree
-     */
-    drawNodeBubbles: true,
-    /**
-     * #property
-     * high resolution scale factor, helps make canvas look better on hi-dpi
-     * screens
-     */
-    highResScaleFactor: 2,
-    /**
-     * #property
-     * default color scheme name
-     */
-    colorSchemeName: 'maeditor',
-    /**
-     * #property
-     * filehandle object for the tree
-     */
-    treeFilehandle: types.maybe(FileLocation),
-    /**
-     * #property
-     * filehandle object for the MSA (which could contain a tree e.g. with
-     * stockholm files)
-     */
-    msaFilehandle: types.maybe(FileLocation),
-    /**
-     * #property
-     * filehandle object for tree metadata
-     */
-    treeMetadataFilehandle: types.maybe(FileLocation),
-    /**
-     * #property
-     *
-     */
-    currentAlignment: 0,
-    /**
-     * #property
-     * array of tree nodes that are 'collapsed'
-     */
-    collapsed: types.array(types.string),
-    collapsed2: types.array(types.string),
-    /**
-     * #property
-     * focus on particular subtree
-     */
-    showOnly: types.maybe(types.string),
-    /**
-     * #property
-     * a list of "tracks" to display, as box-like glyphs (e.g. protein
-     * domains)
-     */
-    boxTracks: types.array(UniprotTrack),
-    /**
-     * #property
-     * turned off tracks
-     */
-    turnedOffTracks: types.map(types.boolean),
-    /**
-     * #property
-     * data from the loaded tree/msa/treeMetadata, generally loaded by
-     * autorun
-     */
-    data: types.optional(DataModelF(), { tree: '', msa: '' }),
-}))
-    .volatile(() => ({
-    /**
-     * #volatile
-     * resize handle width between tree and msa area, px
-     */
-    resizeHandleWidth: 5,
-    /**
-     * #volatile
-     * size of blocks of content to be drawn, px
-     */
-    blockSize: 1000,
-    /**
-     * #volatile
-     * the currently mouse-hovered row
-     */
-    mouseRow: undefined,
-    /**
-     * #volatile
-     * the currently mouse-hovered column
-     */
-    mouseCol: undefined,
-    /**
-     * #volatile
-     * the currently mouse-click row
-     */
-    mouseClickRow: undefined,
-    /**
-     * #volatile
-     * the currently mouse-click column
-     */
-    mouseClickCol: undefined,
-    /**
-     * #volatile
-     * a dummy variable that is incremented when ref changes so autorun for
-     * drawing canvas commands will run
-     */
-    nref: 0,
-    /**
-     * #volatile
-     */
-    minimapHeight: 56,
-    /**
-     * #volatile
-     */
-    marginLeft: 20,
-    /**
-     * #volatile
-     */
-    error: undefined,
-    /**
-     * #volatile
-     */
-    annotPos: undefined,
-}))
-    .actions(self => ({
-    /**
-     * #action
-     * set the height of the view in px
-     */
-    setHeight(height) {
-        self.height = height;
-    },
-    /**
-     * #action
-     * set error state
-     */
-    setError(error) {
-        self.error = error;
-    },
-    /**
-     * #action
-     * set mouse position (row, column) in the MSA
-     */
-    setMousePos(col, row) {
-        self.mouseCol = col;
-        self.mouseRow = row;
-    },
-    /**
-     * #action
-     * set mouse click position (row, column) in the MSA
-     */
-    setMouseClickPos(col, row) {
-        self.mouseClickCol = col;
-        self.mouseClickRow = row;
-    },
-    /**
-     * #action
-     * set row height (px)
-     */
-    setRowHeight(n) {
-        self.rowHeight = n;
-    },
-    /**
-     * #action
-     * set col width (px)
-     */
-    setColWidth(n) {
-        self.colWidth = n;
-    },
-    /**
-     * #action
-     * set color scheme name
-     */
-    setColorSchemeName(name) {
-        self.colorSchemeName = name;
-    },
-    /**
-     * #action
-     * synchronize the treewidth and treeareawidth
-     */
-    setTreeWidthMatchesArea(arg) {
-        self.treeWidthMatchesArea = arg;
-    },
-    /**
-     * #action
-     * set scroll Y-offset (px)
-     */
-    setScrollY(n) {
-        self.scrollY = n;
-    },
-    /**
-     * #action
-     * set tree area width (px)
-     */
-    setTreeAreaWidth(n) {
-        self.treeAreaWidth = n;
-    },
-    /**
-     * #action
-     * set tree width (px)
-     */
-    setTreeWidth(n) {
-        self.treeWidth = n;
-    },
-    /**
-     * #action
-     *
-     */
-    setCurrentAlignment(n) {
-        self.currentAlignment = n;
-    },
-    /**
-     * #action
-     */
-    setLabelsAlignRight(arg) {
-        self.labelsAlignRight = arg;
-    },
-    /**
-     * #action
-     */
-    setDrawTree(arg) {
-        self.drawTree = arg;
-    },
-    /**
-     * #action
-     */
-    toggleCollapsed(node) {
-        if (self.collapsed.includes(node)) {
-            self.collapsed.remove(node);
-        }
-        else {
-            self.collapsed.push(node);
-        }
-    },
-    /**
-     * #action
-     */
-    toggleCollapsed2(node) {
-        if (self.collapsed2.includes(node)) {
-            self.collapsed2.remove(node);
-        }
-        else {
-            self.collapsed2.push(node);
-        }
-    },
-    /**
-     * #action
-     */
-    setShowOnly(node) {
-        self.showOnly = node;
-    },
-    /**
-     * #action
-     */
-    setShowBranchLen(arg) {
-        self.showBranchLen = arg;
-    },
-    /**
-     * #action
-     */
-    setBgColor(arg) {
-        self.bgColor = arg;
-    },
-    /**
-     * #action
-     */
-    setDrawNodeBubbles(arg) {
-        self.drawNodeBubbles = arg;
-    },
-    /**
-     * #action
-     */
-    setData(data) {
-        self.data = cast(data);
-    },
-    /**
-     * #action
-     */
-    async setMSAFilehandle(msaFilehandle) {
-        self.msaFilehandle = msaFilehandle;
-    },
-    /**
-     * #action
-     */
-    async setTreeFilehandle(treeFilehandle) {
-        if (treeFilehandle && 'blobId' in treeFilehandle) {
-            const r = await openLocation(treeFilehandle).readFile('utf8');
-            this.setTree(r);
-        }
-        else {
-            self.treeFilehandle = treeFilehandle;
-        }
-    },
-    /**
-     * #action
-     */
-    setMSA(result) {
-        self.data.setMSA(result);
-    },
-    /**
-     * #action
-     */
-    setTree(result) {
-        self.data.setTree(result);
-    },
-    /**
-     * #action
-     */
-    setTreeMetadata(result) {
-        self.data.setTreeMetadata(result);
-    },
-}))
-    .views(self => ({
-    /**
-     * #getter
-     */
-    get colorScheme() {
-        return colorSchemes[self.colorSchemeName];
-    },
-    /**
-     * #getter
-     */
-    get header() {
-        return this.MSA?.getHeader() || {};
-    },
-    /**
-     * #method
-     */
-    getRowData(name) {
-        const matches = name.match(/\S+\/(\d+)-(\d+)/);
-        return {
-            data: this.MSA?.getRowData(name) || {},
-            ...(matches && {
-                range: {
-                    start: +matches[1],
-                    end: +matches[2],
-                },
-            }),
-        };
-    },
-    /**
-     * #getter
-     */
-    get currentAlignmentName() {
-        return this.alignmentNames[self.currentAlignment];
-    },
-    /**
-     * #getter
-     */
-    get alignmentNames() {
-        return this.MSA?.alignmentNames || [];
-    },
-    /**
-     * #getter
-     */
-    get noTree() {
-        return !!this._tree.noTree;
-    },
-    /**
-     * #getter
-     */
-    get menuItems() {
-        return [];
-    },
-    /**
-     * #getter
-     */
-    get treeMetadata() {
-        return self.data.treeMetadata ? JSON.parse(self.data.treeMetadata) : {};
-    },
-    /**
-     * #getter
-     */
-    get MSA() {
-        const text = self.data.msa;
-        if (text) {
-            if (Stockholm.sniff(text)) {
-                return new StockholmMSA(text, self.currentAlignment);
+function stateModelFactory() {
+    return types
+        .compose(DialogQueueSessionMixin(), TreeF(), MSAModelF(), types.model('MsaView', {
+        /**
+         * #property
+         * id of view, randomly generated if not provided
+         */
+        id: ElementId,
+        /**
+         * #property
+         */
+        featureMode: false,
+        /**
+         * #property
+         */
+        subFeatureRows: false,
+        /**
+         * #property
+         * hardcoded view type
+         */
+        type: types.literal('MsaView'),
+        /**
+         * #property
+         * height of the div containing the view, px
+         */
+        height: types.optional(types.number, 550),
+        /**
+         * #property
+         * height of each row, px
+         */
+        rowHeight: 20,
+        /**
+         * #property
+         * scroll position, Y-offset, px
+         */
+        scrollY: 0,
+        /**
+         * #property
+         * scroll position, X-offset, px
+         */
+        scrollX: 0,
+        /**
+         * #property
+         * width of columns, px
+         */
+        colWidth: 16,
+        /**
+         * #property
+         * filehandle object for the tree
+         */
+        treeFilehandle: types.maybe(FileLocation),
+        /**
+         * #property
+         * filehandle object for the MSA (which could contain a tree e.g. with
+         * stockholm files)
+         */
+        msaFilehandle: types.maybe(FileLocation),
+        /**
+         * #property
+         * filehandle object for tree metadata
+         */
+        treeMetadataFilehandle: types.maybe(FileLocation),
+        /**
+         * #property
+         *
+         */
+        currentAlignment: 0,
+        /**
+         * #property
+         * array of tree parent nodes that are 'collapsed'
+         */
+        collapsed: types.array(types.string),
+        /**
+         * #property
+         * array of tree leaf nodes that are 'collapsed'
+         */
+        collapsed2: types.array(types.string),
+        /**
+         * #property
+         * focus on particular subtree
+         */
+        showOnly: types.maybe(types.string),
+        /**
+         * #property
+         * turned off tracks
+         */
+        turnedOffTracks: types.map(types.boolean),
+        /**
+         * #property
+         * data from the loaded tree/msa/treeMetadata, generally loaded by
+         * autorun
+         */
+        data: types.optional(DataModelF(), { tree: '', msa: '' }),
+        /**
+         * #property
+         */
+        featureFilters: types.map(types.boolean),
+    }))
+        .volatile(() => ({
+        status: undefined,
+        /**
+         * #volatile
+         * high resolution scale factor, helps make canvas look better on hi-dpi
+         * screens
+         */
+        highResScaleFactor: 1,
+        /**
+         * #volatile
+         */
+        loadingMSA: false,
+        /**
+         * #volatile
+         */
+        loadingTree: false,
+        /**
+         * #volatile
+         */
+        width: 800,
+        /**
+         * #volatile
+         * resize handle width between tree and msa area, px
+         */
+        resizeHandleWidth: 5,
+        /**
+         * #volatile
+         * size of blocks of content to be drawn, px
+         */
+        blockSize: 1000,
+        /**
+         * #volatile
+         * the currently mouse-hovered row
+         */
+        mouseRow: undefined,
+        /**
+         * #volatile
+         * the currently mouse-hovered column
+         */
+        mouseCol: undefined,
+        /**
+         * #volatile
+         * the currently mouse-click row
+         */
+        mouseClickRow: undefined,
+        /**
+         * #volatile
+         * the currently mouse-click column
+         */
+        mouseClickCol: undefined,
+        /**
+         * #volatile
+         * a dummy variable that is incremented when ref changes so autorun for
+         * drawing canvas commands will run
+         */
+        nref: 0,
+        /**
+         * #volatile
+         */
+        minimapHeight: 56,
+        /**
+         * #volatile
+         */
+        marginLeft: 20,
+        /**
+         * #volatile
+         */
+        error: undefined,
+        /**
+         * #volatile
+         */
+        annotPos: undefined,
+        /**
+         * #volatile
+         *
+         */
+        loadedInterProAnnotations: undefined,
+        /**
+         * #volatile
+         */
+        interProScanJobIds: JSON.parse(localStorageGetItem('msaview-interproscanqueries') || '[]'),
+    }))
+        .actions(self => ({
+        /**
+         * #action
+         */
+        setLoadingMSA(arg) {
+            self.loadingMSA = arg;
+        },
+        /**
+         * #action
+         */
+        setLoadingTree(arg) {
+            self.loadingTree = arg;
+        },
+        /**
+         * #action
+         */
+        setWidth(arg) {
+            self.width = arg;
+        },
+        /**
+         * #action
+         * set the height of the view in px
+         */
+        setHeight(height) {
+            self.height = height;
+        },
+        /**
+         * #action
+         * set error state
+         */
+        setError(error) {
+            self.error = error;
+        },
+        /**
+         * #action
+         * set mouse position (row, column) in the MSA
+         */
+        setMousePos(col, row) {
+            self.mouseCol = col;
+            self.mouseRow = row;
+        },
+        /**
+         * #action
+         */
+        setFeatureMode(arg) {
+            self.featureMode = arg;
+        },
+        /**
+         * #action
+         */
+        setSubFeatureRows(arg) {
+            self.subFeatureRows = arg;
+        },
+        /**
+         * #action
+         * set mouse click position (row, column) in the MSA
+         */
+        setMouseClickPos(col, row) {
+            self.mouseClickCol = col;
+            self.mouseClickRow = row;
+        },
+        /**
+         * #action
+         * set row height (px)
+         */
+        setRowHeight(n) {
+            self.rowHeight = n;
+        },
+        /**
+         * #action
+         * set col width (px)
+         */
+        setColWidth(n) {
+            self.colWidth = n;
+        },
+        /**
+         * #action
+         * set scroll Y-offset (px)
+         */
+        setScrollY(n) {
+            self.scrollY = n;
+        },
+        /**
+         * #action
+         *
+         */
+        setCurrentAlignment(n) {
+            self.currentAlignment = n;
+        },
+        /**
+         * #action
+         */
+        toggleCollapsed(node) {
+            if (self.collapsed.includes(node)) {
+                self.collapsed.remove(node);
+            }
+            else {
+                self.collapsed.push(node);
             }
-            else if (text.startsWith('>')) {
-                return new FastaMSA(text);
+        },
+        /**
+         * #action
+         */
+        toggleCollapsed2(node) {
+            if (self.collapsed2.includes(node)) {
+                self.collapsed2.remove(node);
             }
             else {
-                return new ClustalMSA(text);
+                self.collapsed2.push(node);
             }
-        }
-        return null;
-    },
-    /**
-     * #getter
-     */
-    get numColumns() {
-        return (this.MSA?.getWidth() || 0) - this.blanks.length;
-    },
-    /**
-     * #getter
-     */
-    get _tree() {
-        const ret = self.data.tree
-            ? generateNodeIds(parseNewick(self.data.tree))
-            : this.MSA?.getTree() || {
-                noTree: true,
-                branchset: [],
-                id: 'empty',
-                name: 'empty',
+        },
+        /**
+         * #action
+         */
+        setShowOnly(node) {
+            self.showOnly = node;
+        },
+        /**
+         * #action
+         */
+        setData(data) {
+            self.data = cast(data);
+        },
+        /**
+         * #action
+         */
+        setMSAFilehandle(msaFilehandle) {
+            self.msaFilehandle = msaFilehandle;
+        },
+        /**
+         * #action
+         */
+        setTreeFilehandle(treeFilehandle) {
+            self.treeFilehandle = treeFilehandle;
+        },
+        /**
+         * #action
+         */
+        setMSA(result) {
+            self.data.setMSA(result);
+        },
+        /**
+         * #action
+         */
+        setTree(result) {
+            self.data.setTree(result);
+        },
+        /**
+         * #action
+         */
+        setTreeMetadata(result) {
+            self.data.setTreeMetadata(result);
+        },
+    }))
+        .views(self => ({
+        /**
+         * #method
+         * unused here, but can be used by derived classes to add extra items
+         */
+        extraViewMenuItems() {
+            return [];
+        },
+        /**
+         * #getter
+         */
+        get colorScheme() {
+            return colorSchemes[self.colorSchemeName];
+        },
+        /**
+         * #getter
+         */
+        get header() {
+            return this.MSA?.getHeader() || {};
+        },
+        /**
+         * #method
+         */
+        getRowData(name) {
+            return {
+                data: this.MSA?.getRowData(name),
             };
-        return reparseTree(ret);
-    },
-    /**
-     * #getter
-     */
-    get rowNames() {
-        return this.hierarchy.leaves().map(node => node.data.name);
-    },
-    /**
-     * #getter
-     */
-    get mouseOverRowName() {
-        return self.mouseRow !== undefined
-            ? this.rowNames[self.mouseRow]
-            : undefined;
-    },
-    /**
-     * #method
-     */
-    getMouseOverResidue(rowName) {
-        return this.columns[rowName];
-    },
-    /**
-     * #getter
-     */
-    get root() {
-        let hier = hierarchy(this._tree, d => d.branchset)
-            .sum(d => (d.branchset ? 0 : 1))
-            .sort((a, b) => ascending(a.data.length || 1, b.data.length || 1));
-        if (self.showOnly) {
-            const res = hier.find(node => node.data.id === self.showOnly);
-            if (res) {
-                hier = res;
+        },
+        /**
+         * #getter
+         */
+        get alignmentNames() {
+            return this.MSA?.alignmentNames || [];
+        },
+        /**
+         * #getter
+         */
+        get noTree() {
+            return !!this._tree.noTree;
+        },
+        /**
+         * #getter
+         */
+        get noAnnotations() {
+            return !self.loadedInterProAnnotations;
+        },
+        /**
+         * #getter
+         */
+        get menuItems() {
+            return [];
+        },
+        /**
+         * #getter
+         */
+        get treeMetadata() {
+            return self.data.treeMetadata ? JSON.parse(self.data.treeMetadata) : {};
+        },
+        /**
+         * #getter
+         */
+        get MSA() {
+            const text = self.data.msa;
+            if (text) {
+                if (Stockholm.sniff(text)) {
+                    return new StockholmMSA(text, self.currentAlignment);
+                }
+                else if (text.startsWith('>')) {
+                    return new FastaMSA(text);
+                }
+                else {
+                    return new ClustalMSA(text);
+                }
+            }
+            return null;
+        },
+        /**
+         * #getter
+         */
+        get numColumns() {
+            return (this.MSA?.getWidth() || 0) - this.blanks.length;
+        },
+        /**
+         * #getter
+         */
+        get _tree() {
+            const ret = self.data.tree
+                ? generateNodeIds(parseNewick(self.data.tree))
+                : this.MSA?.getTree() || {
+                    noTree: true,
+                    branchset: [],
+                    id: 'empty',
+                    name: 'empty',
+                };
+            return reparseTree(ret);
+        },
+        /**
+         * #getter
+         */
+        get rowNames() {
+            return this.hierarchy.leaves().map(n => n.data.name);
+        },
+        /**
+         * #getter
+         */
+        get mouseOverRowName() {
+            const { mouseRow } = self;
+            return mouseRow !== undefined ? this.rowNames[mouseRow] : undefined;
+        },
+        /**
+         * #getter
+         */
+        get root() {
+            let hier = hierarchy(this._tree, d => d.branchset)
+                .sum(d => (d.branchset ? 0 : 1))
+                .sort((a, b) => ascending(a.data.length || 1, b.data.length || 1));
+            if (self.showOnly) {
+                const res = hier.find(n => n.data.id === self.showOnly);
+                if (res) {
+                    hier = res;
+                }
             }
-        }
-        if (self.collapsed.length || self.collapsed2.length) {
             ;
             [...self.collapsed, ...self.collapsed2]
                 .map(collapsedId => hier.find(node => node.data.id === collapsedId))
                 .filter(notEmpty)
                 .map(node => collapse(node));
-        }
-        return hier;
-    },
-    /**
-     * #getter
-     */
-    get structures() {
-        return this.MSA?.getStructures() || {};
-    },
-    /**
-     * #getter
-     */
-    get inverseStructures() {
-        return Object.fromEntries(Object.entries(this.structures).flatMap(([key, val]) => val.map(pdbEntry => [pdbEntry.pdb, { id: key }])));
-    },
-    /**
-     * #getter
-     * widget width minus the tree area gives the space for the MSA
-     */
-    get msaAreaWidth() {
-        return self.width - self.treeAreaWidth;
-    },
-    /**
-     * #getter
-     */
-    get treeAreaWidthMinusMargin() {
-        return self.treeAreaWidth - self.marginLeft;
-    },
-    /**
-     * #getter
-     */
-    get blanks() {
-        const blanks = [];
-        const strs = this.hierarchy
-            .leaves()
-            .map(leaf => this.MSA?.getRow(leaf.data.name))
-            .filter((item) => !!item);
-        for (let i = 0; i < strs[0]?.length; i++) {
-            let counter = 0;
-            for (const str of strs) {
-                if (str[i] === '-') {
-                    counter++;
+            return hier;
+        },
+        /**
+         * #getter
+         * widget width minus the tree area gives the space for the MSA
+         */
+        get msaAreaWidth() {
+            return self.width - self.treeAreaWidth;
+        },
+        /**
+         * #getter
+         */
+        get treeAreaWidthMinusMargin() {
+            return self.treeAreaWidth - self.marginLeft;
+        },
+        /**
+         * #getter
+         */
+        get blanks() {
+            const blanks = [];
+            const strs = this.hierarchy
+                .leaves()
+                .map(leaf => this.MSA?.getRow(leaf.data.name))
+                .filter((item) => !!item);
+            for (let i = 0; i < strs[0]?.length; i++) {
+                let counter = 0;
+                for (const str of strs) {
+                    if (str[i] === '-') {
+                        counter++;
+                    }
+                }
+                if (counter === strs.length) {
+                    blanks.push(i);
                 }
             }
-            if (counter === strs.length) {
-                blanks.push(i);
+            return blanks;
+        },
+        /**
+         * #getter
+         */
+        get rows() {
+            const MSA = this.MSA;
+            return this.hierarchy
+                .leaves()
+                .map(leaf => [leaf.data.name, MSA?.getRow(leaf.data.name)])
+                .filter((f) => !!f[1]);
+        },
+        /**
+         * #getter
+         */
+        get columns() {
+            return Object.fromEntries(this.rows.map((row, index) => [row[0], this.columns2d[index]]));
+        },
+        /**
+         * #getter
+         */
+        get columns2d() {
+            return this.rows.map(r => r[1]).map(str => skipBlanks(this.blanks, str));
+        },
+        /**
+         * #getter
+         */
+        get fontSize() {
+            return Math.min(Math.max(6, self.rowHeight - 8), 18);
+        },
+        /**
+         * #getter
+         */
+        get colStats() {
+            const r = [];
+            const columns = this.columns2d;
+            for (const column of columns) {
+                for (let j = 0; j < column.length; j++) {
+                    const l = r[j] || {};
+                    if (!l[column[j]]) {
+                        l[column[j]] = 0;
+                    }
+                    l[column[j]]++;
+                    r[j] = l;
+                }
             }
-        }
-        return blanks;
-    },
-    /**
-     * #getter
-     */
-    get rows() {
-        const MSA = this.MSA;
-        return this.hierarchy
-            .leaves()
-            .map(leaf => [leaf.data.name, MSA?.getRow(leaf.data.name)])
-            .filter((f) => !!f[1]);
-    },
-    /**
-     * #getter
-     */
-    get columns() {
-        return Object.fromEntries(this.rows.map((row, index) => [row[0], this.columns2d[index]]));
-    },
-    /**
-     * #getter
-     */
-    get columns2d() {
-        return this.rows.map(r => r[1]).map(str => skipBlanks(this.blanks, str));
-    },
-    /**
-     * #getter
-     */
-    get fontSize() {
-        return Math.max(8, self.rowHeight - 8);
-    },
-    /**
-     * #getter
-     */
-    get colStats() {
-        const r = [];
-        const columns = this.columns2d;
-        for (const column of columns) {
-            for (let j = 0; j < column.length; j++) {
-                const l = r[j] || {};
-                if (!l[column[j]]) {
-                    l[column[j]] = 0;
+            return r;
+        },
+        /**
+         * #getter
+         * generates a new tree that is clustered with x,y positions
+         */
+        get hierarchy() {
+            const r = this.root;
+            const clust = cluster()
+                .size([this.totalHeight, self.treeWidth])
+                .separation(() => 1);
+            clust(r);
+            setBrLength(r, (r.data.length = 0), self.treeWidth / maxLength(r));
+            return r;
+        },
+        /**
+         * #getter
+         */
+        get totalHeight() {
+            return this.root.leaves().length * self.rowHeight;
+        },
+    }))
+        .views(self => ({
+        /**
+         * #getter
+         */
+        get totalWidth() {
+            return self.numColumns * self.colWidth;
+        },
+    }))
+        .views(self => ({
+        /**
+         * #getter
+         */
+        get initialized() {
+            return (self.data.msa || self.data.tree) && !self.error;
+        },
+        /**
+         * #getter
+         */
+        get blocksX() {
+            return blocksX({
+                viewportWidth: self.msaAreaWidth,
+                viewportX: -self.scrollX,
+                blockSize: self.blockSize,
+                mapWidth: self.totalWidth,
+            });
+        },
+        /**
+         * #getter
+         */
+        get blocksY() {
+            return blocksY({
+                viewportHeight: self.height,
+                viewportY: -self.scrollY,
+                blockSize: self.blockSize,
+                mapHeight: self.totalHeight,
+            });
+        },
+    }))
+        .views(self => ({
+        /**
+         * #getter
+         */
+        get blocks2d() {
+            const ret = [];
+            for (const by of self.blocksY) {
+                for (const bx of self.blocksX) {
+                    ret.push([bx, by]);
                 }
-                l[column[j]]++;
-                r[j] = l;
             }
-        }
-        return r;
-    },
-    /**
-     * #getter
-     * generates a new tree that is clustered with x,y positions
-     */
-    get hierarchy() {
-        const r = this.root;
-        const clust = cluster()
-            .size([this.totalHeight, self.treeWidth])
-            .separation(() => 1);
-        clust(r);
-        setBrLength(r, (r.data.length = 0), self.treeWidth / maxLength(r));
-        return r;
-    },
-    /**
-     * #getter
-     */
-    get totalHeight() {
-        return this.root.leaves().length * self.rowHeight;
-    },
-}))
-    .views(self => ({
-    /**
-     * #getter
-     */
-    get totalWidth() {
-        return self.numColumns * self.colWidth;
-    },
-}))
-    .views(self => ({
-    /**
-     * #getter
-     */
-    get initialized() {
-        return ((self.data.msa ||
-            self.data.tree ||
-            self.msaFilehandle ||
-            self.treeFilehandle) &&
-            !self.error);
-    },
-    /**
-     * #getter
-     */
-    get blocksX() {
-        return blocksX({
-            viewportWidth: self.msaAreaWidth,
-            viewportX: -self.scrollX,
-            blockSize: self.blockSize,
-            mapWidth: self.totalWidth,
-        });
-    },
-    /**
-     * #getter
-     */
-    get blocksY() {
-        return blocksY({
-            viewportHeight: self.height,
-            viewportY: -self.scrollY,
-            blockSize: self.blockSize,
-            mapHeight: self.totalHeight,
-        });
-    },
-}))
-    .views(self => ({
-    /**
-     * #getter
-     */
-    get blocks2d() {
-        const ret = [];
-        for (const by of self.blocksY) {
-            for (const bx of self.blocksX) {
-                ret.push([bx, by]);
+            return ret;
+        },
+        /**
+         * #getter
+         */
+        get isLoading() {
+            return self.loadingMSA || self.loadingTree;
+        },
+        /**
+         * #getter
+         */
+        get maxScrollX() {
+            return -self.totalWidth + (self.msaAreaWidth - 100);
+        },
+    }))
+        .actions(self => ({
+        /**
+         * #action
+         */
+        zoomIn() {
+            self.colWidth = Math.ceil(self.colWidth * 1.5);
+            self.rowHeight = Math.ceil(self.rowHeight * 1.5);
+            self.scrollX = clamp(self.maxScrollX, self.scrollX, 0);
+        },
+        /**
+         * #action
+         */
+        zoomOut() {
+            self.colWidth = Math.max(1, Math.floor(self.colWidth * 0.75));
+            self.rowHeight = Math.max(1.5, Math.floor(self.rowHeight * 0.75));
+            self.scrollX = clamp(self.maxScrollX, self.scrollX, 0);
+        },
+        /**
+         * #action
+         */
+        setLoadedInterProAnnotations(data) {
+            self.loadedInterProAnnotations = data;
+        },
+        /**
+         * #action
+         */
+        doScrollY(deltaY) {
+            self.scrollY = clamp(-self.totalHeight + 10, self.scrollY + deltaY, 0);
+        },
+        /**
+         * #action
+         */
+        doScrollX(deltaX) {
+            self.scrollX = clamp(self.maxScrollX, self.scrollX + deltaX, 0);
+        },
+        /**
+         * #action
+         */
+        setScrollX(n) {
+            self.scrollX = clamp(self.maxScrollX, n, 0);
+        },
+        /**
+         * #action
+         */
+        toggleTrack(id) {
+            if (self.turnedOffTracks.has(id)) {
+                self.turnedOffTracks.delete(id);
             }
-        }
-        return ret;
-    },
-    /**
-     * #getter
-     */
-    get done() {
-        return self.initialized && (self.data.msa || self.data.tree);
-    },
-    /**
-     * #getter
-     */
-    get maxScrollX() {
-        return -self.totalWidth + (self.msaAreaWidth - 100);
-    },
-}))
-    .actions(self => ({
-    /**
-     * #action
-     */
-    addUniprotTrack(node) {
-        if (self.boxTracks.some(t => t.name === node.name)) {
-            if (self.turnedOffTracks.has(node.name)) {
-                this.toggleTrack(node.name);
+            else {
+                self.turnedOffTracks.set(id, true);
             }
-        }
-        else {
-            self.boxTracks.push({
-                ...node,
-                id: node.name,
-                associatedRowName: node.name,
-            });
-        }
-    },
-    /**
-     * #action
-     */
-    doScrollY(deltaY) {
-        self.scrollY = clamp(-self.totalHeight + 10, self.scrollY + deltaY, 0);
-    },
-    /**
-     * #action
-     */
-    doScrollX(deltaX) {
-        self.scrollX = clamp(self.maxScrollX, self.scrollX + deltaX, 0);
-    },
-    /**
-     * #action
-     */
-    setScrollX(n) {
-        self.scrollX = clamp(self.maxScrollX, n, 0);
-    },
-    /**
-     * #action
-     */
-    setMouseoveredColumn(n, chain, file) {
-        let j = 0;
-        let i = 0;
-        const { id } = self.inverseStructures[file.slice(0, -4)] || {};
-        const row = self.MSA?.getRow(id);
-        if (row) {
-            for (i = 0; i < row.length && j < n; i++) {
-                if (row[i] !== '-') {
-                    j++;
+        },
+        /**
+         * #action
+         */
+        addInterProScanJobId(arg) {
+            self.interProScanJobIds = [
+                ...self.interProScanJobIds,
+                { jobId: arg, date: +Date.now() },
+            ];
+        },
+        /**
+         * #action
+         */
+        setStatus(status) {
+            self.status = status;
+        },
+    }))
+        .views(self => ({
+        /**
+         * #getter
+         */
+        get labelsWidth() {
+            let x = 0;
+            const { rowHeight, hierarchy, treeMetadata, fontSize } = self;
+            if (rowHeight > 5) {
+                for (const node of hierarchy.leaves()) {
+                    x = Math.max(measureTextCanvas(treeMetadata[node.data.name]?.genome || node.data.name, fontSize), x);
                 }
             }
-            self.mouseCol = j + 1;
-        }
-        else {
-            self.mouseCol = undefined;
-        }
-    },
-    /**
-     * #action
-     */
-    toggleTrack(id) {
-        if (self.turnedOffTracks.has(id)) {
-            self.turnedOffTracks.delete(id);
-        }
-        else {
-            self.turnedOffTracks.set(id, true);
-        }
-    },
-}))
-    .views(self => ({
-    /**
-     * #getter
-     */
-    get labelsWidth() {
-        let x = 0;
-        const { rowHeight, hierarchy, treeMetadata, fontSize } = self;
-        if (rowHeight > 5) {
-            for (const node of hierarchy.leaves()) {
-                x = Math.max(measureTextCanvas(treeMetadata[node.data.name]?.genome || node.data.name, fontSize), x);
+            return x;
+        },
+        /**
+         * #getter
+         */
+        get secondaryStructureConsensus() {
+            return self.MSA?.secondaryStructureConsensus;
+        },
+        /**
+         * #getter
+         */
+        get seqConsensus() {
+            return self.MSA?.seqConsensus;
+        },
+        /**
+         * #getter
+         */
+        get conservation() {
+            if (self.columns2d.length) {
+                for (let i = 0; i < self.columns2d[0].length; i++) {
+                    const col = [];
+                    for (const column of self.columns2d) {
+                        col.push(column[i]);
+                    }
+                }
             }
-        }
-        return x;
-    },
-    /**
-     * #getter
-     */
-    get secondaryStructureConsensus() {
-        return self.MSA?.secondaryStructureConsensus;
-    },
-    /**
-     * #getter
-     */
-    get seqConsensus() {
-        return self.MSA?.seqConsensus;
-    },
-    /**
-     * #getter
-     */
-    get conservation() {
-        if (self.columns2d.length) {
-            for (let i = 0; i < self.columns2d[0].length; i++) {
-                const col = [];
-                for (const column of self.columns2d) {
-                    col.push(column[i]);
+            return ['a'];
+        },
+        /**
+         * #getter
+         */
+        get adapterTrackModels() {
+            return (self.MSA?.tracks.map(t => ({
+                model: {
+                    ...t,
+                    data: t.data ? skipBlanks(self.blanks, t.data) : undefined,
+                    height: self.rowHeight,
+                },
+                ReactComponent: TextTrack,
+            })) || []);
+        },
+        /**
+         * #getter
+         */
+        get tracks() {
+            return this.adapterTrackModels;
+        },
+        /**
+         * #getter
+         */
+        get turnedOnTracks() {
+            return this.tracks.filter(f => !self.turnedOffTracks.has(f.model.id));
+        },
+        /**
+         * #method
+         * return a row-specific sequence coordinate, skipping gaps, given a global
+         * coordinate
+         */
+        globalCoordToRowSpecificSeqCoord(rowName, position) {
+            const { rowNames, rows } = self;
+            const index = rowNames.indexOf(rowName);
+            if (index !== -1 && rows[index]) {
+                const row = rows[index][1];
+                let k = 0;
+                for (let i = 0; i < position; i++) {
+                    if (row[i] !== '-') {
+                        k++;
+                    }
+                    else if (k >= position) {
+                        break;
+                    }
                 }
+                return k;
             }
-        }
-        return ['a'];
-    },
-    /**
-     * #getter
-     */
-    get adapterTrackModels() {
-        return (self.MSA?.tracks.map(t => ({
-            model: {
-                ...t,
-                data: t.data ? skipBlanks(self.blanks, t.data) : undefined,
-                height: self.rowHeight,
-            },
-            ReactComponent: TextTrack,
-        })) || []);
-    },
-    /**
-     * #getter
-     */
-    get boxTrackModels() {
-        return self.boxTracks
-            .filter(track => self.rows.some(row => row[0] === track.name))
-            .map(track => ({
-            model: track,
-            ReactComponent: BoxTrack,
-        }));
-    },
-    /**
-     * #getter
-     */
-    get tracks() {
-        return [...this.adapterTrackModels, ...this.boxTrackModels];
-    },
-    /**
-     * #getter
-     */
-    get turnedOnTracks() {
-        return this.tracks.filter(f => !self.turnedOffTracks.has(f.model.id));
-    },
-    /**
-     * #method
-     * returns coordinate in the current relative coordinate scheme
-     */
-    pxToBp(coord) {
-        return Math.floor((coord - self.scrollX) / self.colWidth);
-    },
-    /**
-     * #method
-     */
-    rowSpecificBpToPx(rowName, position) {
-        const { rowNames, rows } = self;
-        const index = rowNames.indexOf(rowName);
-        const row = rows[index][1];
-        const details = self.getRowData(rowName);
-        const offset = details.range?.start || 0;
-        const current = position - offset;
-        const s = new Set(self.blanks);
-        if (current < 0) {
             return 0;
-        }
-        let j = 0;
-        let i = 0;
-        for (; i < row.length; i++) {
-            if (row[i] !== '-' && j++ === current) {
-                break;
-            }
-        }
-        let count = 0;
-        for (let k = 0; k < row.length; k++) {
-            if (s.has(k) && k < i + 1) {
-                count++;
-            }
-        }
-        return i - count;
-    },
-    /**
-     * #method
-     */
-    globalBpToPx(position) {
-        let count = 0;
-        const s = new Set(self.blanks);
-        for (let k = 0; k < self.rows[0]?.[1].length; k++) {
-            if (s.has(k) && k < position + 1) {
-                count++;
+        },
+        /**
+         * #method
+         * return a global coordinate given a row-specific sequence coordinate
+         * which does not not include gaps
+         */
+        seqCoordToRowSpecificGlobalCoord(rowName, position) {
+            const { rowNames, rows } = self;
+            const index = rowNames.indexOf(rowName);
+            if (index !== -1 && rows[index]) {
+                const row = rows[index][1];
+                let k = 0;
+                let i = 0;
+                for (; k < position; i++) {
+                    if (row[i] !== '-') {
+                        k++;
+                    }
+                    else if (k >= position) {
+                        break;
+                    }
+                }
+                return i;
             }
-        }
-        return position - count;
-    },
-    /**
-     * #method
-     */
-    relativePxToBp(rowName, position) {
-        const { rowNames, rows } = self;
-        const index = rowNames.indexOf(rowName);
-        if (index !== -1 && rows[index]) {
-            const row = rows[index][1];
-            let k = 0;
-            for (let i = 0; i < position; i++) {
-                if (row[i] !== '-') {
-                    k++;
+            return 0;
+        },
+    }))
+        .views(self => ({
+        /**
+         * #getter
+         * total height of track area (px)
+         */
+        get totalTrackAreaHeight() {
+            return sum(self.turnedOnTracks.map(r => r.model.height));
+        },
+        /**
+         * #getter
+         */
+        get tidyTypes() {
+            const types = new Map();
+            if (this.tidyAnnotations) {
+                for (const { name, accession, description } of this.tidyAnnotations) {
+                    types.set(accession, { name, accession, description });
                 }
-                else if (k >= position) {
-                    break;
+            }
+            return types;
+        },
+        get tidyAnnotations() {
+            const ret = [];
+            const { loadedInterProAnnotations } = self;
+            if (loadedInterProAnnotations) {
+                for (const [id, val] of Object.entries(loadedInterProAnnotations)) {
+                    for (const { signature, locations } of val.matches) {
+                        const { entry } = signature;
+                        if (entry) {
+                            const { name, accession, description } = entry;
+                            for (const { start, end } of locations) {
+                                ret.push({
+                                    id,
+                                    name,
+                                    accession,
+                                    description,
+                                    start,
+                                    end,
+                                });
+                            }
+                        }
+                    }
                 }
             }
-            return k;
-        }
-        return 0;
-    },
-    /**
-     * #method
-     */
-    relativePxToBp2(rowName, position) {
-        const { rowNames, rows } = self;
-        const index = rowNames.indexOf(rowName);
-        if (index !== -1 && rows[index]) {
-            const row = rows[index][1];
-            let k = 0;
+            return ret.sort((a, b) => len(b) - len(a));
+        },
+        /**
+         * #getter
+         */
+        get tidyFilteredAnnotations() {
+            return this.tidyAnnotations.filter(r => self.featureFilters.get(r.accession));
+        },
+        /**
+         * #getter
+         */
+        get tidyFilteredGatheredAnnotations() {
+            return groupBy(this.tidyFilteredAnnotations, r => r.id);
+        },
+    }))
+        .views(self => ({
+        get fillPalette() {
+            const arr = [...self.tidyTypes.keys()];
             let i = 0;
-            for (; k < position; i++) {
-                if (row[i] !== '-') {
-                    k++;
-                }
-                else if (k >= position) {
-                    break;
-                }
+            const map = {};
+            for (const key of arr) {
+                const k = Math.min(arr.length - 1, palettes.length - 1);
+                map[key] = palettes[k][i];
+                i++;
             }
-            return i;
-        }
-        return 0;
-    },
-    /**
-     * #method
-     */
-    getPos(pos) {
-        let j = 0;
-        for (let i = 0, k = 0; i < pos; i++, j++) {
-            while (j === self.blanks[k]) {
-                k++;
-                j++;
+            return map;
+        },
+        get strokePalette() {
+            return Object.fromEntries(Object.entries(this.fillPalette).map(([key, val]) => [
+                key,
+                colord(val).darken(0.1).toHex(),
+            ]));
+        },
+    }))
+        .actions(self => ({
+        /**
+         * #action
+         */
+        async loadInterProScanResults(jobId) {
+            self.setStatus({ msg: 'Loading ' + jobId });
+            const ret = await loadInterProScanResults(jobId);
+            self.setStatus();
+            self.setLoadedInterProAnnotations(Object.fromEntries(ret.results.map(r => [r.xref[0].id, r])));
+        },
+        /**
+         * #action
+         */
+        async queryInterProScan(programs) {
+            const { rows } = self;
+            if (rows.length > 140) {
+                throw new Error('Too many sequences, please run InterProScan offline');
             }
-        }
-        return j;
-    },
-}))
-    .views(self => ({
-    /**
-     * #getter
-     * total height of track area (px)
-     */
-    get totalTrackAreaHeight() {
-        return sum(self.turnedOnTracks.map(r => r.model.height));
-    },
-}))
-    .actions(self => ({
-    /**
-     * #action
-     */
-    async exportSVG(opts) {
-        const { renderToSvg } = await import('./renderToSvg');
-        const html = await renderToSvg(self, opts);
-        const blob = new Blob([html], { type: 'image/svg+xml' });
-        saveAs(blob, 'image.svg');
-    },
-    /**
-     * #action
-     * internal, used for drawing to canvas
-     */
-    incrementRef() {
-        self.nref++;
-    },
-    afterCreate() {
-        // autorun opens treeFilehandle
-        addDisposer(self, autorun(async () => {
-            const { treeFilehandle } = self;
-            if (treeFilehandle) {
-                try {
-                    self.setTree(await openLocation(treeFilehandle).readFile('utf8'));
-                }
-                catch (e) {
-                    console.error(e);
-                    self.setError(e);
-                }
+            const ret = await launchInterProScan({
+                algorithm: 'interproscan',
+                programs: programs,
+                seq: rows
+                    .map(row => `>${row[0]}\n${row[1].replaceAll('-', '')}`)
+                    .join('\n'),
+                onProgress: arg => self.setStatus(arg),
+                onJobId: jobId => self.addInterProScanJobId(jobId),
+            });
+            self.setLoadedInterProAnnotations(Object.fromEntries(ret.results.map(r => [r.xref[0].id, r])));
+        },
+        /**
+         * #action
+         */
+        reset() {
+            transaction(() => {
+                self.setData({ tree: '', msa: '' });
+                self.setScrollY(0);
+                self.setScrollX(0);
+                self.setCurrentAlignment(0);
+                self.setTreeFilehandle(undefined);
+                self.setMSAFilehandle(undefined);
+            });
+        },
+        /**
+         * #action
+         */
+        async exportSVG(opts) {
+            const { renderToSvg } = await import('./renderToSvg');
+            const html = await renderToSvg(self, opts);
+            const blob = new Blob([html], { type: 'image/svg+xml' });
+            saveAs(blob, 'image.svg');
+        },
+        /**
+         * #action
+         * internal, used for drawing to canvas
+         */
+        incrementRef() {
+            self.nref++;
+        },
+        /**
+         * #action
+         */
+        initFilter(arg) {
+            const ret = self.featureFilters.get(arg);
+            if (ret === undefined) {
+                self.featureFilters.set(arg, true);
             }
-        }));
-        // autorun opens treeMetadataFilehandle
-        addDisposer(self, autorun(async () => {
-            const { treeMetadataFilehandle } = self;
-            if (treeMetadataFilehandle) {
-                try {
-                    self.setTreeMetadata(await openLocation(treeMetadataFilehandle).readFile('utf8'));
+        },
+        /**
+         * #action
+         */
+        setFilter(arg, flag) {
+            self.featureFilters.set(arg, flag);
+        },
+        afterCreate() {
+            addDisposer(self, autorun(() => {
+                for (const key of self.tidyTypes.keys()) {
+                    this.initFilter(key);
                 }
-                catch (e) {
-                    console.error(e);
-                    self.setError(e);
+            }));
+            addDisposer(self, autorun(async () => {
+                // const res = Object.fromEntries(
+                //   await Promise.all(
+                //     self.annotationTracks.map(async f => {
+                //       const d = await jsonfetch(
+                //         `https://jbrowse.org/demos/interproscan/json/${encodeURIComponent(f)}`,
+                //       )
+                //       return [
+                //         decodeURIComponent(f).replace('.json', ''),
+                //         d.result.results[0],
+                //       ] as const
+                //     }),
+                //   ),
+                // )
+                // self.setLoadedInterProAnnotations(res)
+            }));
+            // autorun opens treeFilehandle
+            addDisposer(self, autorun(async () => {
+                const { treeFilehandle } = self;
+                if (treeFilehandle) {
+                    try {
+                        self.setLoadingTree(true);
+                        self.setTree(await openLocation(treeFilehandle).readFile('utf8'));
+                        if (treeFilehandle.locationType === 'BlobLocation') {
+                            // clear filehandle after loading if from a local file
+                            self.setTreeFilehandle(undefined);
+                        }
+                    }
+                    catch (e) {
+                        console.error(e);
+                        self.setError(e);
+                    }
+                    finally {
+                        self.setLoadingTree(false);
+                    }
                 }
-            }
-        }));
-        // autorun opens msaFilehandle
-        addDisposer(self, autorun(async () => {
-            const { msaFilehandle } = self;
-            if (msaFilehandle) {
-                try {
-                    self.setMSA(await openLocation(msaFilehandle).readFile('utf8'));
+            }));
+            // autorun opens treeMetadataFilehandle
+            addDisposer(self, autorun(async () => {
+                const { treeMetadataFilehandle } = self;
+                if (treeMetadataFilehandle) {
+                    try {
+                        self.setTreeMetadata(await openLocation(treeMetadataFilehandle).readFile('utf8'));
+                    }
+                    catch (e) {
+                        console.error(e);
+                        self.setError(e);
+                    }
                 }
-                catch (e) {
-                    console.error(e);
-                    self.setError(e);
+            }));
+            // autorun opens msaFilehandle
+            addDisposer(self, autorun(async () => {
+                const { msaFilehandle } = self;
+                if (msaFilehandle) {
+                    try {
+                        self.setLoadingMSA(true);
+                        const res = await openLocation(msaFilehandle).readFile('utf8');
+                        transaction(() => {
+                            self.setMSA(res);
+                            if (msaFilehandle.locationType === 'BlobLocation') {
+                                // clear filehandle after loading if from a local file
+                                self.setMSAFilehandle(undefined);
+                            }
+                        });
+                    }
+                    catch (e) {
+                        console.error(e);
+                        self.setError(e);
+                    }
+                    finally {
+                        self.setLoadingMSA(false);
+                    }
                 }
-            }
-        }));
-        // autorun synchronizes treeWidth with treeAreaWidth
-        addDisposer(self, autorun(async () => {
-            if (self.treeWidthMatchesArea) {
-                self.setTreeWidth(Math.max(50, self.treeAreaWidth - self.labelsWidth - 10 - self.marginLeft));
-            }
-        }));
-    },
-}))
-    .postProcessSnapshot(result => {
-    const snap = result;
-    const { data: { tree, msa, treeMetadata }, ...rest } = snap;
-    // remove the MSA/tree data from the tree if the filehandle available in
-    // which case it can be reloaded on refresh
-    return {
-        data: {
-            // https://andreasimonecosta.dev/posts/the-shortest-way-to-conditionally-insert-properties-into-an-object-literal/
-            ...(!result.treeFilehandle && { tree }),
-            ...(!result.msaFilehandle && { msa }),
-            ...(!result.treeMetadataFilehandle && { treeMetadata }),
-        },
-        ...rest,
-    };
-});
-export default model;
+            }));
+            // autorun synchronizes treeWidth with treeAreaWidth
+            addDisposer(self, autorun(async () => {
+                if (self.treeWidthMatchesArea) {
+                    self.setTreeWidth(Math.max(50, self.treeAreaWidth - self.labelsWidth - 10 - self.marginLeft));
+                }
+            }));
+            addDisposer(self, autorun(() => {
+                localStorageSetItem('msaview-interproscanqueries', JSON.stringify(self.interProScanJobIds));
+            }));
+        },
+    }))
+        .postProcessSnapshot(result => {
+        const snap = result;
+        const { data: { tree, msa, treeMetadata }, ...rest } = snap;
+        // remove the MSA/tree data from the tree if the filehandle available in
+        // which case it can be reloaded on refresh
+        return {
+            data: {
+                ...(result.treeFilehandle ? {} : { tree }),
+                ...(result.msaFilehandle ? {} : { msa }),
+                ...(result.treeMetadataFilehandle ? {} : { treeMetadata }),
+            },
+            ...rest,
+        };
+    });
+}
+export default stateModelFactory;
 //# sourceMappingURL=model.js.map