react-msaview 1.2.11 → 1.3.0

package/bundle/model.js

@@ -0,0 +1,894 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { cast, types, addDisposer } from 'mobx-state-tree';
+import { hierarchy, cluster } from 'd3-hierarchy';
+import { ascending, max } from 'd3-array';
+import { FileLocation, ElementId } from '@jbrowse/core/util/types/mst';
+import { openLocation } from '@jbrowse/core/util/io';
+import { autorun } from 'mobx';
+import BaseViewModel from '@jbrowse/core/pluggableElementTypes/models/BaseViewModel';
+import Stockholm from 'stockholm-js';
+import ClustalMSA from './parsers/ClustalMSA';
+import StockholmMSA from './parsers/StockholmMSA';
+import FastaMSA from './parsers/FastaMSA';
+import parseNewick from './parseNewick';
+import colorSchemes from './colorSchemes';
+import { generateNodeIds } from './util';
+import TextTrack from './components/TextTrack';
+import BoxTrack from './components/BoxTrack';
+function skipBlanks(blanks, arg) {
+    var s = '';
+    var b = 0;
+    for (var j = 0; j < arg.length; j++) {
+        if (j === blanks[b]) {
+            b++;
+        }
+        else {
+            s += arg[j];
+        }
+    }
+    return s;
+}
+function setBrLength(d, y0, k) {
+    var _a;
+    //@ts-ignore
+    d.len = (y0 += Math.max(d.data.length || 0, 0)) * k;
+    (_a = d.children) === null || _a === void 0 ? void 0 : _a.forEach(function (d) {
+        setBrLength(d, y0, k);
+    });
+}
+function maxLength(d) {
+    return (d.data.length || 1) + (d.children ? max(d.children, maxLength) : 0);
+}
+// Collapse the node and all it's children, from
+// https://bl.ocks.org/d3noob/43a860bc0024792f8803bba8ca0d5ecd
+function collapse(d) {
+    if (d.children) {
+        //@ts-ignore
+        d._children = d.children;
+        //@ts-ignore
+        d._children.forEach(collapse);
+        //@ts-ignore
+        d.children = null;
+    }
+}
+function clamp(min, num, max) {
+    return Math.min(Math.max(num, min), max);
+}
+var StructureModel = types.model({
+    id: types.identifier,
+    structure: types.model({
+        pdb: types.string,
+        startPos: types.number,
+        endPos: types.number,
+    }),
+    range: types.maybe(types.string),
+});
+var UniprotTrack = types
+    .model({
+    id: types.string,
+    accession: types.string,
+    name: types.string,
+    associatedRowName: types.string,
+    height: types.optional(types.number, 100),
+})
+    .volatile(function () { return ({
+    error: undefined,
+    data: undefined,
+}); })
+    .actions(function (self) { return ({
+    setError: function (error) {
+        self.error = error;
+    },
+    setData: function (data) {
+        self.data = data;
+    },
+}); })
+    .actions(function (self) { return ({
+    afterCreate: function () {
+        var _this = this;
+        addDisposer(self, autorun(function () { return __awaiter(_this, void 0, void 0, function () {
+            var accession, url, response, text, e_1;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        _a.trys.push([0, 3, , 4]);
+                        accession = self.accession;
+                        url = "https://www.uniprot.org/uniprot/" + accession + ".gff";
+                        return [4 /*yield*/, fetch(url)];
+                    case 1:
+                        response = _a.sent();
+                        if (!response.ok) {
+                            throw new Error("HTTP " + response.status + " " + response.statusText + " fetching " + url);
+                        }
+                        return [4 /*yield*/, response.text()];
+                    case 2:
+                        text = _a.sent();
+                        self.setData(text);
+                        return [3 /*break*/, 4];
+                    case 3:
+                        e_1 = _a.sent();
+                        self.setError(e_1);
+                        return [3 /*break*/, 4];
+                    case 4: return [2 /*return*/];
+                }
+            });
+        }); }));
+    },
+}); })
+    .views(function (self) { return ({
+    get loading() {
+        return !self.data;
+    },
+    get features() {
+        var _a;
+        return (_a = self.data) === null || _a === void 0 ? void 0 : _a.split('\n').map(function (f) { return f.trim(); }).filter(function (f) { return !!f; }).filter(function (f) { return !f.startsWith('#'); }).map(function (f) {
+            var _a = f.split('\t'), seq_id = _a[0], source = _a[1], type = _a[2], start = _a[3], end = _a[4], score = _a[5], strand = _a[6], phase = _a[7], col9 = _a[8];
+            return __assign({ seq_id: seq_id, source: source, type: type, start: +start, end: +end, score: +score, strand: strand, phase: phase }, Object.fromEntries(col9
+                .split(';')
+                .map(function (f) { return f.trim(); })
+                .filter(function (f) { return !!f; })
+                .map(function (f) { return f.split('='); })
+                .map(function (_a) {
+                var key = _a[0], val = _a[1];
+                return [
+                    key.trim(),
+                    decodeURIComponent(val).trim().split(',').join(' '),
+                ];
+            })));
+        });
+    },
+}); });
+var MSAModel = types
+    .model('MsaView', {
+    id: ElementId,
+    type: types.literal('MsaView'),
+    height: types.optional(types.number, 550),
+    treeAreaWidth: types.optional(types.number, 400),
+    treeWidth: types.optional(types.number, 300),
+    rowHeight: 20,
+    scrollY: 0,
+    scrollX: 0,
+    resizeHandleWidth: 5,
+    blockSize: 1000,
+    mouseRow: types.maybe(types.number),
+    mouseCol: types.maybe(types.number),
+    selectedStructures: types.array(StructureModel),
+    labelsAlignRight: false,
+    colWidth: 16,
+    showBranchLen: true,
+    bgColor: true,
+    drawTree: true,
+    drawNodeBubbles: true,
+    highResScaleFactor: 2,
+    colorSchemeName: 'maeditor',
+    treeFilehandle: types.maybe(FileLocation),
+    msaFilehandle: types.maybe(FileLocation),
+    currentAlignment: 0,
+    collapsed: types.array(types.string),
+    showOnly: types.maybe(types.string),
+    boxTracks: types.array(UniprotTrack),
+    turnedOffTracks: types.map(types.boolean),
+    annotatedRegions: types.array(types.model({
+        start: types.number,
+        end: types.number,
+        attributes: types.frozen(),
+    })),
+    data: types.optional(types
+        .model({
+        tree: types.maybe(types.string),
+        msa: types.maybe(types.string),
+    })
+        .actions(function (self) { return ({
+        setTree: function (tree) {
+            self.tree = tree;
+        },
+        setMSA: function (msa) {
+            self.msa = msa;
+        },
+    }); }), { tree: '', msa: '' }),
+})
+    .volatile(function () { return ({
+    error: undefined,
+    margin: { left: 20, top: 20 },
+    //eslint-disable-next-line @typescript-eslint/no-explicit-any
+    DialogComponent: undefined,
+    //eslint-disable-next-line @typescript-eslint/no-explicit-any
+    DialogProps: undefined,
+    // annotations
+    annotPos: undefined,
+}); })
+    .actions(function (self) { return ({
+    //eslint-disable-next-line @typescript-eslint/no-explicit-any
+    setDialogComponent: function (dlg, props) {
+        self.DialogComponent = dlg;
+        self.DialogProps = props;
+    },
+    setHeight: function (height) {
+        self.height = height;
+    },
+    addStructureToSelection: function (elt) {
+        self.selectedStructures.push(elt);
+    },
+    removeStructureFromSelection: function (elt) {
+        var r = self.selectedStructures.find(function (node) { return node.id === elt.id; });
+        if (r) {
+            self.selectedStructures.remove(r);
+        }
+    },
+    toggleStructureSelection: function (elt) {
+        var r = self.selectedStructures.find(function (node) { return node.id === elt.id; });
+        if (r) {
+            self.selectedStructures.remove(r);
+        }
+        else {
+            self.selectedStructures.push(elt);
+        }
+    },
+    clearSelectedStructures: function () {
+        //@ts-ignore
+        self.selectedStructures = [];
+    },
+    setError: function (error) {
+        console.error(error);
+        self.error = error;
+    },
+    setMousePos: function (col, row) {
+        self.mouseCol = col;
+        self.mouseRow = row;
+    },
+    setRowHeight: function (n) {
+        self.rowHeight = n;
+    },
+    setColWidth: function (n) {
+        self.colWidth = n;
+    },
+    setColorSchemeName: function (name) {
+        self.colorSchemeName = name;
+    },
+    setScrollY: function (n) {
+        self.scrollY = n;
+    },
+    setScrollX: function (n) {
+        self.scrollX = n;
+    },
+    setTreeAreaWidth: function (n) {
+        self.treeAreaWidth = n;
+    },
+    setTreeWidth: function (n) {
+        self.treeWidth = n;
+    },
+    setCurrentAlignment: function (n) {
+        self.currentAlignment = n;
+    },
+    toggleLabelsAlignRight: function () {
+        self.labelsAlignRight = !self.labelsAlignRight;
+    },
+    toggleDrawTree: function () {
+        self.drawTree = !self.drawTree;
+    },
+    toggleCollapsed: function (node) {
+        if (self.collapsed.includes(node)) {
+            self.collapsed.remove(node);
+        }
+        else {
+            self.collapsed.push(node);
+        }
+    },
+    setShowOnly: function (node) {
+        self.showOnly = node;
+    },
+    toggleBranchLen: function () {
+        self.showBranchLen = !self.showBranchLen;
+    },
+    toggleBgColor: function () {
+        self.bgColor = !self.bgColor;
+    },
+    toggleNodeBubbles: function () {
+        self.drawNodeBubbles = !self.drawNodeBubbles;
+    },
+    setData: function (data) {
+        self.data = cast(data);
+    },
+    setMSAFilehandle: function (msaFilehandle) {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                self.msaFilehandle = msaFilehandle;
+                return [2 /*return*/];
+            });
+        });
+    },
+    setTreeFilehandle: function (treeFilehandle) {
+        return __awaiter(this, void 0, void 0, function () {
+            var r;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!(treeFilehandle && 'blobId' in treeFilehandle)) return [3 /*break*/, 2];
+                        return [4 /*yield*/, openLocation(treeFilehandle).readFile('utf8')];
+                    case 1:
+                        r = (_a.sent());
+                        this.setTree(r);
+                        return [3 /*break*/, 3];
+                    case 2:
+                        self.treeFilehandle = treeFilehandle;
+                        _a.label = 3;
+                    case 3: return [2 /*return*/];
+                }
+            });
+        });
+    },
+    setMSA: function (result) {
+        self.data.setMSA(result);
+    },
+    setTree: function (result) {
+        self.data.setTree(result);
+    },
+    afterCreate: function () {
+        var _this = this;
+        addDisposer(self, autorun(function () { return __awaiter(_this, void 0, void 0, function () {
+            var treeFilehandle, _a, e_2;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        treeFilehandle = self.treeFilehandle;
+                        if (!treeFilehandle) return [3 /*break*/, 4];
+                        _b.label = 1;
+                    case 1:
+                        _b.trys.push([1, 3, , 4]);
+                        _a = this.setTree;
+                        return [4 /*yield*/, openLocation(treeFilehandle).readFile('utf8')];
+                    case 2:
+                        _a.apply(this, [(_b.sent())]);
+                        return [3 /*break*/, 4];
+                    case 3:
+                        e_2 = _b.sent();
+                        this.setError(e_2);
+                        return [3 /*break*/, 4];
+                    case 4: return [2 /*return*/];
+                }
+            });
+        }); }));
+        addDisposer(self, autorun(function () { return __awaiter(_this, void 0, void 0, function () {
+            var msaFilehandle, _a, e_3;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        msaFilehandle = self.msaFilehandle;
+                        if (!msaFilehandle) return [3 /*break*/, 4];
+                        _b.label = 1;
+                    case 1:
+                        _b.trys.push([1, 3, , 4]);
+                        _a = this.setMSA;
+                        return [4 /*yield*/, openLocation(msaFilehandle).readFile('utf8')];
+                    case 2:
+                        _a.apply(this, [(_b.sent())]);
+                        return [3 /*break*/, 4];
+                    case 3:
+                        e_3 = _b.sent();
+                        this.setError(e_3);
+                        return [3 /*break*/, 4];
+                    case 4: return [2 /*return*/];
+                }
+            });
+        }); }));
+    },
+}); })
+    .views(function (self) {
+    var oldBlocksX = [];
+    var oldBlocksY = [];
+    var oldValX = 0;
+    var oldValY = 0;
+    return {
+        get initialized() {
+            return ((self.data.msa ||
+                self.data.tree ||
+                self.msaFilehandle ||
+                self.treeFilehandle) &&
+                !self.error);
+        },
+        get blocksX() {
+            var scrollX = self.scrollX, size = self.blockSize, colWidth = self.colWidth;
+            var ret = -(size * Math.floor(scrollX / size)) - size;
+            var b = [];
+            for (var i = ret; i < ret + size * 3; i += size) {
+                if (i + size > 0) {
+                    b.push(i);
+                }
+            }
+            if (JSON.stringify(b) !== JSON.stringify(oldBlocksX) ||
+                colWidth !== oldValX) {
+                oldBlocksX = b;
+                oldValX = colWidth;
+            }
+            return oldBlocksX;
+        },
+        get blocksY() {
+            var scrollY = self.scrollY, size = self.blockSize, rowHeight = self.rowHeight;
+            var ret = -(size * Math.floor(scrollY / size)) - 2 * size;
+            var b = [];
+            for (var i = ret; i < ret + size * 3; i += size) {
+                if (i + size > 0) {
+                    b.push(i);
+                }
+            }
+            if (JSON.stringify(b) !== JSON.stringify(oldBlocksY) ||
+                rowHeight !== oldValY) {
+                oldBlocksY = b;
+                oldValY = rowHeight;
+            }
+            return oldBlocksY;
+        },
+    };
+})
+    .views(function (self) { return ({
+    get blocks2d() {
+        return self.blocksY.map(function (by) { return self.blocksX.map(function (bx) { return [bx, by]; }); }).flat();
+    },
+    get done() {
+        return self.initialized && (self.data.msa || self.data.tree);
+    },
+    get colorScheme() {
+        return colorSchemes[self.colorSchemeName];
+    },
+    get alignmentDetails() {
+        var _a;
+        return ((_a = this.MSA) === null || _a === void 0 ? void 0 : _a.getDetails()) || {};
+    },
+    getRowDetails: function (name) {
+        var _a;
+        //@ts-ignore
+        var details = (_a = this.MSA) === null || _a === void 0 ? void 0 : _a.getRowDetails(name);
+        var matches = name.match(/\S+\/(\d+)-(\d+)/);
+        return __assign(__assign({}, details), (matches && { range: { start: +matches[1], end: +matches[2] } }));
+    },
+    get currentAlignmentName() {
+        return this.alignmentNames[self.currentAlignment];
+    },
+    get alignmentNames() {
+        var _a;
+        return ((_a = this.MSA) === null || _a === void 0 ? void 0 : _a.alignmentNames) || [];
+    },
+    get noTree() {
+        return !!this.tree.noTree;
+    },
+    get menuItems() {
+        return [];
+    },
+    get MSA() {
+        var 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;
+    },
+    get numColumns() {
+        var _a;
+        return ((((_a = this.MSA) === null || _a === void 0 ? void 0 : _a.getWidth()) || 0) - this.blanks.length) * self.colWidth;
+    },
+    get tree() {
+        var _a;
+        return self.data.tree
+            ? generateNodeIds(parseNewick(self.data.tree))
+            : ((_a = this.MSA) === null || _a === void 0 ? void 0 : _a.getTree()) || { noTree: true };
+    },
+    get rowNames() {
+        return this.hierarchy.leaves().map(function (node) { return node.data.name; });
+    },
+    get mouseOverRowName() {
+        return self.mouseRow !== undefined
+            ? this.rowNames[self.mouseRow]
+            : undefined;
+    },
+    getMouseOverResidue: function (rowName) {
+        return this.columns[rowName];
+    },
+    get root() {
+        var hier = hierarchy(this.tree, function (d) { return d.branchset; })
+            .sum(function (d) { return (d.branchset ? 0 : 1); })
+            .sort(function (a, b) {
+            return ascending(a.data.length || 1, b.data.length || 1);
+        });
+        if (self.showOnly) {
+            var res = hier.find(function (node) { return node.data.id === self.showOnly; });
+            if (res) {
+                hier = res;
+            }
+        }
+        if (self.collapsed.length) {
+            self.collapsed
+                .map(function (collapsedId) {
+                return hier.find(function (node) { return node.data.id === collapsedId; });
+            })
+                .filter(function (f) { return !!f; })
+                .map(function (node) { return collapse(node); });
+        }
+        return hier;
+    },
+    get structures() {
+        var _a;
+        return ((_a = this.MSA) === null || _a === void 0 ? void 0 : _a.getStructures()) || {};
+    },
+    get inverseStructures() {
+        var map = Object.entries(this.structures)
+            .map(function (_a) {
+            var key = _a[0], val = _a[1];
+            return val.map(function (pdbEntry) { return [pdbEntry.pdb, { id: key }]; });
+        })
+            .flat();
+        return Object.fromEntries(map);
+    },
+    get msaAreaWidth() {
+        //@ts-ignore
+        return self.width - self.treeAreaWidth;
+    },
+    get blanks() {
+        var _this = this;
+        var _a;
+        var blanks = [];
+        var strs = this.hierarchy
+            .leaves()
+            .map(function (_a) {
+            var _b;
+            var data = _a.data;
+            return (_b = _this.MSA) === null || _b === void 0 ? void 0 : _b.getRow(data.name);
+        })
+            .filter(function (item) { return !!item; });
+        for (var i = 0; i < ((_a = strs[0]) === null || _a === void 0 ? void 0 : _a.length); i++) {
+            var counter = 0;
+            for (var j = 0; j < strs.length; j++) {
+                if (strs[j][i] === '-') {
+                    counter++;
+                }
+            }
+            if (counter === strs.length) {
+                blanks.push(i);
+            }
+        }
+        return blanks;
+    },
+    get rows() {
+        var _this = this;
+        return this.hierarchy
+            .leaves()
+            .map(function (_a) {
+            var _b;
+            var data = _a.data;
+            return [data.name, (_b = _this.MSA) === null || _b === void 0 ? void 0 : _b.getRow(data.name)];
+        })
+            .filter(function (f) { return !!f[1]; });
+    },
+    get columns() {
+        var rows = this.rows;
+        var cols = this.columns2d;
+        return Object.fromEntries(rows.map(function (row, index) { return [row[0], cols[index]]; }));
+    },
+    get columns2d() {
+        var strs = this.rows.map(function (r) { return r[1]; });
+        var ret = [];
+        for (var i = 0; i < strs.length; i++) {
+            ret.push(skipBlanks(this.blanks, strs[i]));
+        }
+        return ret;
+    },
+    get colStats() {
+        var r = [];
+        var m = this.columns2d;
+        for (var i = 0; i < m.length; i++) {
+            for (var j = 0; j < m[i].length; j++) {
+                var l = r[j] || {};
+                if (!l[m[i][j]]) {
+                    l[m[i][j]] = 0;
+                }
+                l[m[i][j]]++;
+                r[j] = l;
+            }
+        }
+        return r;
+    },
+    // generates a new tree that is clustered with x,y positions
+    get hierarchy() {
+        var root = this.root;
+        var clust = cluster()
+            .size([this.totalHeight, self.treeWidth])
+            .separation(function () { return 1; });
+        clust(root);
+        setBrLength(root, 
+        //@ts-ignore
+        (root.data.length = 0), self.treeWidth / maxLength(root));
+        return root;
+    },
+    get totalHeight() {
+        return this.root.leaves().length * self.rowHeight;
+    },
+}); })
+    .actions(function (self) { return ({
+    addUniprotTrack: function (node) {
+        if (self.boxTracks.find(function (t) { return t.name === node.name; })) {
+            if (self.turnedOffTracks.has(node.name)) {
+                this.toggleTrack(node.name);
+            }
+        }
+        else {
+            self.boxTracks.push(__assign(__assign({}, node), { id: node.name, associatedRowName: node.name }));
+        }
+    },
+    doScrollY: function (deltaY) {
+        self.scrollY = clamp(-self.totalHeight + 10, self.scrollY + deltaY, 0);
+    },
+    doScrollX: function (deltaX) {
+        self.scrollX = clamp(-self.numColumns + (self.msaAreaWidth - 100), self.scrollX + deltaX, 0);
+    },
+    setMouseoveredColumn: function (n, chain, file) {
+        var _a;
+        var j = 0;
+        var i = 0;
+        var id = (self.inverseStructures[file.slice(0, -4)] || {}).id;
+        var row = (_a = self.MSA) === null || _a === void 0 ? void 0 : _a.getRow(id);
+        if (row) {
+            for (i = 0; i < row.length && j < n; i++) {
+                if (row[i] !== '-') {
+                    j++;
+                }
+            }
+            self.mouseCol = j + 1;
+        }
+        else {
+            self.mouseCol = undefined;
+        }
+    },
+    toggleTrack: function (id) {
+        if (self.turnedOffTracks.has(id)) {
+            self.turnedOffTracks.delete(id);
+        }
+        else {
+            self.turnedOffTracks.set(id, true);
+        }
+    },
+}); })
+    .views(function (self) { return ({
+    get secondaryStructureConsensus() {
+        var _a;
+        return (_a = self.MSA) === null || _a === void 0 ? void 0 : _a.secondaryStructureConsensus;
+    },
+    get seqConsensus() {
+        var _a;
+        return (_a = self.MSA) === null || _a === void 0 ? void 0 : _a.seqConsensus;
+    },
+    get conservation() {
+        var m = self.columns2d;
+        if (m.length) {
+            for (var i = 0; i < m[0].length; i++) {
+                var col = [];
+                for (var j = 0; j < m.length; j++) {
+                    col.push(m[j][i]);
+                }
+            }
+        }
+        return ['a'];
+    },
+    get tracks() {
+        var blanks = self.blanks;
+        var adapterTracks = self.MSA
+            ? self.MSA.tracks.map(function (track) {
+                var data = track.data;
+                return {
+                    model: __assign(__assign({}, track), { data: data ? skipBlanks(blanks, data) : undefined, height: self.rowHeight }),
+                    ReactComponent: TextTrack,
+                };
+            })
+            : [];
+        var boxTracks = self.boxTracks
+            // filter out tracks that are associated with hidden rows
+            .filter(function (track) { return !!self.rows.find(function (row) { return row[0] === track.name; }); })
+            .map(function (track) { return ({
+            model: track,
+            ReactComponent: BoxTrack,
+        }); });
+        var annotationTracks = self.annotatedRegions.length > 0
+            ? [
+                {
+                    model: {
+                        features: self.annotatedRegions,
+                        height: 100,
+                        id: 'annotations',
+                        name: 'User-created annotations',
+                        data: self.annotatedRegions
+                            .map(function (region) {
+                            var attrs = region.attributes
+                                ? Object.entries(region.attributes)
+                                    .map(function (_a) {
+                                    var k = _a[0], v = _a[1];
+                                    return k + "=" + v.join(',');
+                                })
+                                    .join(';')
+                                : '.';
+                            return [
+                                'MSA_refcoord',
+                                '.',
+                                '.',
+                                region.start,
+                                region.end,
+                                '.',
+                                '.',
+                                '.',
+                                attrs,
+                            ].join('\t');
+                        })
+                            .join('\n'),
+                    },
+                    ReactComponent: BoxTrack,
+                },
+            ]
+            : [];
+        return __spreadArray(__spreadArray(__spreadArray([], adapterTracks, true), boxTracks, true), annotationTracks, true);
+    },
+    get turnedOnTracks() {
+        return this.tracks.filter(function (f) { return !self.turnedOffTracks.has(f.model.id); });
+    },
+    // returns coordinate in the current relative coordinate scheme
+    pxToBp: function (coord) {
+        return Math.floor((coord - self.scrollX) / self.colWidth);
+    },
+    rowSpecificBpToPx: function (rowName, position) {
+        var _a;
+        var rowNames = self.rowNames, rows = self.rows, blanks = self.blanks;
+        var index = rowNames.indexOf(rowName);
+        var row = rows[index][1];
+        var details = self.getRowDetails(rowName);
+        var offset = ((_a = details.range) === null || _a === void 0 ? void 0 : _a.start) || 0;
+        var current = position - offset;
+        if (current < 0) {
+            return 0;
+        }
+        var j = 0;
+        var i = 0;
+        for (; i < row.length; i++) {
+            if (row[i] !== '-' && j++ === current) {
+                break;
+            }
+        }
+        var count = 0;
+        for (var k = 0; k < row.length; k++) {
+            if (blanks.indexOf(k) !== -1 && k < i + 1) {
+                count++;
+            }
+        }
+        return i - count;
+    },
+    globalBpToPx: function (position) {
+        var _a;
+        var count = 0;
+        for (var k = 0; k < ((_a = self.rows[0]) === null || _a === void 0 ? void 0 : _a[1].length); k++) {
+            if (self.blanks.indexOf(k) !== -1 && k < position + 1) {
+                count++;
+            }
+        }
+        return position - count;
+    },
+    relativePxToBp: function (rowName, position) {
+        var rowNames = self.rowNames, rows = self.rows;
+        var index = rowNames.indexOf(rowName);
+        var row = rows[index][1];
+        var k = 0;
+        for (var i = 0; i < position; i++) {
+            if (row[i] !== '-') {
+                k++;
+            }
+            else if (k >= position) {
+                break;
+            }
+        }
+        return k;
+    },
+    getPos: function (pos) {
+        var j = 0;
+        for (var i = 0, k = 0; i < pos; i++, j++) {
+            while (j === self.blanks[k]) {
+                k++;
+                j++;
+            }
+        }
+        return j;
+    },
+}); })
+    .actions(function (self) { return ({
+    addAnnotation: function (start, end, attributes) {
+        self.annotatedRegions.push({
+            start: self.getPos(start),
+            end: self.getPos(end),
+            attributes: attributes,
+        });
+    },
+    setOffsets: function (left, right) {
+        self.annotPos = { left: left, right: right };
+    },
+    clearAnnotPos: function () {
+        self.annotPos = undefined;
+    },
+}); });
+var model = types.snapshotProcessor(types.compose(BaseViewModel, MSAModel), {
+    postProcessor: function (result) {
+        var _a = result.data, tree = _a.tree, msa = _a.msa, rest = __rest(result
+        // remove the MSA/tree data from the tree if the filehandle available in
+        // which case it can be reloaded on refresh
+        , ["data"]);
+        // remove the MSA/tree data from the tree if the filehandle available in
+        // which case it can be reloaded on refresh
+        return __assign({ data: __assign(__assign({}, (!result.treeFilehandle && { tree: tree })), (!result.msaFilehandle && { msa: msa })) }, rest);
+    },
+});
+export default model;