react-msaview 1.3.2 → 2.1.0

package/bundle/model.js

@@ -1,894 +0,0 @@
-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;