react-msaview 1.2.10 → 1.3.2

package/bundle/colorSchemes.d.ts

@@ -0,0 +1,16 @@
+declare const _default: {
+    [k: string]: {
+        [key: string]: string;
+    };
+};
+export default _default;
+export declare function getClustalXColor(stats: {
+    [key: string]: number;
+}, model: {
+    columns: Record<string, string>;
+}, row: number, col: number): "rgb(128,179,230)" | "#d88" | "rgb(192, 72, 192)" | "rgb(204, 77, 204)" | "#8f8" | "rgb(26,204,26)" | "rgb(240, 128, 128)" | "rgb(240, 144, 72)" | "rgb(204, 204, 0)" | "rgb(26, 179, 179)" | undefined;
+export declare function getPercentIdentityColor(stats: {
+    [key: string]: number;
+}, model: {
+    columns: Record<string, string>;
+}, row: number, col: number): string | undefined;

package/bundle/colorSchemes.js

@@ -0,0 +1,455 @@
+import Color from 'color';
+import { transform } from './util';
+var colorSchemes = {
+    clustal: {
+        G: 'orange',
+        P: 'orange',
+        S: 'orange',
+        T: 'orange',
+        H: 'red',
+        K: 'red',
+        R: 'red',
+        F: 'blue',
+        W: 'blue',
+        Y: 'blue',
+        I: 'green',
+        L: 'green',
+        M: 'green',
+        V: 'green',
+    },
+    lesk: {
+        G: 'orange',
+        A: 'orange',
+        S: 'orange',
+        T: 'orange',
+        C: 'green',
+        V: 'green',
+        I: 'green',
+        L: 'green',
+        P: 'green',
+        F: 'green',
+        Y: 'green',
+        M: 'green',
+        W: 'green',
+        N: 'magenta',
+        Q: 'magenta',
+        H: 'magenta',
+        D: 'red',
+        E: 'red',
+        K: 'blue',
+        R: 'blue',
+    },
+    maeditor: {
+        A: 'lightgreen',
+        G: 'lightgreen',
+        C: 'green',
+        D: 'darkgreen',
+        E: 'darkgreen',
+        N: 'darkgreen',
+        Q: 'darkgreen',
+        I: 'blue',
+        L: 'blue',
+        M: 'blue',
+        V: 'blue',
+        F: '#c8a2c8',
+        W: '#c8a2c8',
+        Y: '#c8a2c8',
+        H: 'darkblue',
+        K: 'orange',
+        R: 'orange',
+        P: 'pink',
+        S: 'red',
+        T: 'red',
+    },
+    percent_identity_dynamic: {},
+    //https://github.com/biotite-dev/biotite/blob/8c460972f8ab904312f130dfb80f3efc8c9bd7c5/src/biotite/sequence/graphics/color_schemes/flower.json
+    flower: {
+        A: '#b18a51',
+        C: '#ff5701',
+        D: '#01a578',
+        E: '#2da0a1',
+        F: '#fa559d',
+        G: '#b1c23c',
+        H: '#0194f9',
+        I: '#f27663',
+        K: '#7fc3d7',
+        L: '#df6e75',
+        M: '#fe9daf',
+        N: '#0bcec6',
+        P: '#4fa32a',
+        Q: '#7295ae',
+        R: '#83bff1',
+        S: '#b4bd9b',
+        T: '#d2b576',
+        V: '#fd997b',
+        W: '#ff2ded',
+        Y: '#c96ecf',
+    },
+    rainbow_dna: {
+        A: '#3737f5',
+        C: '#37f537',
+        G: '#f5f537',
+        T: '#f53737',
+        U: '#f53737',
+    },
+    //https://github.com/biotite-dev/biotite/blob/8c460972f8ab904312f130dfb80f3efc8c9bd7c5/src/biotite/sequence/graphics/color_schemes/clustalx_protein.json
+    clustalx_protein: {
+        A: '#197fe5',
+        C: '#e57f7f',
+        D: '#cc4ccc',
+        E: '#cc4ccc',
+        F: '#197fe5',
+        G: '#e5994c',
+        H: '#19b2b2',
+        I: '#197fe5',
+        K: '#e53319',
+        L: '#197fe5',
+        M: '#197fe5',
+        N: '#19cc19',
+        P: '#cccc00',
+        Q: '#19cc19',
+        R: '#e53319',
+        S: '#19cc19',
+        T: '#19cc19',
+        V: '#197fe5',
+        W: '#197fe5',
+        Y: '#19b2b2',
+    },
+    // this has special handling
+    clustalx_protein_dynamic: {},
+    clustalx_dna: {
+        A: '#e53319',
+        C: '#197fe5',
+        G: '#e5994c',
+        T: '#19cc19',
+        U: '#19cc19',
+    },
+    jalview_buried: {
+        A: '#00a35c',
+        R: '#00fc03',
+        N: '#00eb14',
+        D: '#00eb14',
+        C: '#0000ff',
+        Q: '#00f10e',
+        E: '#00f10e',
+        G: '#009d62',
+        H: '#00d52a',
+        I: '#0054ab',
+        L: '#007b84',
+        K: '#00ff00',
+        M: '#009768',
+        F: '#008778',
+        P: '#00e01f',
+        S: '#00d52a',
+        T: '#00db24',
+        W: '#00a857',
+        Y: '#00e619',
+        V: '#005fa0',
+        B: '#00eb14',
+        X: '#00b649',
+        Z: '#00f10e',
+    },
+    jalview_hydrophobicity: {
+        A: '#ad0052',
+        R: '#0000ff',
+        N: '#0c00f3',
+        D: '#0c00f3',
+        C: '#c2003d',
+        Q: '#0c00f3',
+        E: '#0c00f3',
+        G: '#6a0095',
+        H: '#1500ea',
+        I: '#ff0000',
+        L: '#ea0015',
+        K: '#0000ff',
+        M: '#b0004f',
+        F: '#cb0034',
+        P: '#4600b9',
+        S: '#5e00a1',
+        T: '#61009e',
+        W: '#5b00a4',
+        Y: '#4f00b0',
+        V: '#f60009',
+        B: '#0c00f3',
+        X: '#680097',
+        Z: '#0c00f3',
+    },
+    jalview_prophelix: {
+        A: '#e718e7',
+        R: '#6f906f',
+        N: '#1be41b',
+        D: '#778877',
+        C: '#23dc23',
+        Q: '#926d92',
+        E: '#ff00ff',
+        G: '#00ff00',
+        H: '#758a75',
+        I: '#8a758a',
+        L: '#ae51ae',
+        K: '#a05fa0',
+        M: '#ef10ef',
+        F: '#986798',
+        P: '#00ff00',
+        S: '#36c936',
+        T: '#47b847',
+        W: '#8a758a',
+        Y: '#21de21',
+        V: '#857a85',
+        B: '#49b649',
+        X: '#758a75',
+        Z: '#c936c9',
+    },
+    jalview_propstrand: {
+        A: '#5858a7',
+        R: '#6b6b94',
+        N: '#64649b',
+        D: '#2121de',
+        C: '#9d9d62',
+        Q: '#8c8c73',
+        E: '#0000ff',
+        G: '#4949b6',
+        H: '#60609f',
+        I: '#ecec13',
+        L: '#b2b24d',
+        K: '#4747b8',
+        M: '#82827d',
+        F: '#c2c23d',
+        P: '#2323dc',
+        S: '#4949b6',
+        T: '#9d9d62',
+        W: '#c0c03f',
+        Y: '#d3d32c',
+        V: '#ffff00',
+        B: '#4343bc',
+        X: '#797986',
+        Z: '#4747b8',
+    },
+    jalview_propturn: {
+        A: '#2cd3d3',
+        R: '#708f8f',
+        N: '#ff0000',
+        D: '#e81717',
+        C: '#a85757',
+        Q: '#3fc0c0',
+        E: '#778888',
+        G: '#ff0000',
+        H: '#708f8f',
+        I: '#00ffff',
+        L: '#1ce3e3',
+        K: '#7e8181',
+        M: '#1ee1e1',
+        F: '#1ee1e1',
+        P: '#f60909',
+        S: '#e11e1e',
+        T: '#738c8c',
+        W: '#738c8c',
+        Y: '#9d6262',
+        V: '#07f8f8',
+        B: '#f30c0c',
+        X: '#7c8383',
+        Z: '#5ba4a4',
+    },
+    jalview_taylor: {
+        A: '#ccff00',
+        R: '#0000ff',
+        N: '#cc00ff',
+        D: '#ff0000',
+        C: '#ffff00',
+        Q: '#ff00cc',
+        E: '#ff0066',
+        G: '#ff9900',
+        H: '#0066ff',
+        I: '#66ff00',
+        L: '#33ff00',
+        K: '#6600ff',
+        M: '#00ff00',
+        F: '#00ff66',
+        P: '#ffcc00',
+        S: '#ff3300',
+        T: '#ff6600',
+        W: '#00ccff',
+        Y: '#00ffcc',
+        V: '#99ff00',
+    },
+    jalview_zappo: {
+        A: '#ffafaf',
+        R: '#6464ff',
+        N: '#00ff00',
+        D: '#ff0000',
+        C: '#ffff00',
+        Q: '#00ff00',
+        E: '#ff0000',
+        G: '#ff00ff',
+        H: '#6464ff',
+        I: '#ffafaf',
+        L: '#ffafaf',
+        K: '#6464ff',
+        M: '#ffafaf',
+        F: '#ffc800',
+        P: '#ff00ff',
+        S: '#00ff00',
+        T: '#00ff00',
+        W: '#ffc800',
+        Y: '#ffc800',
+        V: '#ffafaf',
+    },
+    cinema: {
+        H: 'blue',
+        K: 'blue',
+        R: 'blue',
+        D: 'red',
+        E: 'red',
+        S: 'green',
+        T: 'green',
+        N: 'green',
+        Q: 'green',
+        A: 'white',
+        V: 'white',
+        L: 'white',
+        I: 'white',
+        M: 'white',
+        F: 'magenta',
+        W: 'magenta',
+        Y: 'magenta',
+        P: 'brown',
+        G: 'brown',
+        C: 'yellow',
+        B: 'gray',
+        Z: 'gray',
+        X: 'gray',
+        '-': 'gray',
+        '.': 'gray',
+    },
+};
+// turn all supplied colors to hex colors which getContrastText from mui
+// requires
+export default transform(colorSchemes, function (_a) {
+    var key = _a[0], val = _a[1];
+    return [
+        key,
+        transform(val, function (_a) {
+            var letter = _a[0], color = _a[1];
+            return [letter, Color(color).hex()];
+        }),
+    ];
+});
+// info http://www.jalview.org/help/html/colourSchemes/clustal.html
+// modifications:
+// reference to clustalX source code scheme modifies what the jalview.org
+// scheme says there the jalview.org colorscheme says WLVIMAFCHP but it
+// should be WLVIMAFCHPY, colprot.xml says e.g. %#ACFHILMVWYPp" which has Y
+export function getClustalXColor(stats, model, row, col) {
+    var total = Object.values(stats).reduce(function (a, b) { return a + b; }, 0);
+    var l = model.columns[row][col];
+    var _a = stats.W, W = _a === void 0 ? 0 : _a, _b = stats.L, L = _b === void 0 ? 0 : _b, _c = stats.V, V = _c === void 0 ? 0 : _c, _d = stats.I, I = _d === void 0 ? 0 : _d, _e = stats.M, M = _e === void 0 ? 0 : _e, _f = stats.A, A = _f === void 0 ? 0 : _f, _g = stats.F, F = _g === void 0 ? 0 : _g, _h = stats.C, C = _h === void 0 ? 0 : _h, _j = stats.H, H = _j === void 0 ? 0 : _j, _k = stats.P, P = _k === void 0 ? 0 : _k, _l = stats.R, R = _l === void 0 ? 0 : _l, _m = stats.K, K = _m === void 0 ? 0 : _m, _o = stats.Q, Q = _o === void 0 ? 0 : _o, _p = stats.E, E = _p === void 0 ? 0 : _p, _q = stats.D, D = _q === void 0 ? 0 : _q, _r = stats.T, T = _r === void 0 ? 0 : _r, _s = stats.S, S = _s === void 0 ? 0 : _s, _t = stats.G, G = _t === void 0 ? 0 : _t, _u = stats.Y, Y = _u === void 0 ? 0 : _u, _v = stats.N, N = _v === void 0 ? 0 : _v;
+    var WLVIMAFCHP = W + L + V + I + M + A + F + C + H + P + Y;
+    var KR = K + R;
+    var QE = Q + E;
+    var ED = E + D;
+    var TS = T + S;
+    if (WLVIMAFCHP / total > 0.6) {
+        if (l === 'W' ||
+            l === 'L' ||
+            l === 'V' ||
+            l === 'A' ||
+            l === 'I' ||
+            l === 'M' ||
+            l === 'F' ||
+            l === 'C') {
+            // blue from jalview.org docs
+            return 'rgb(128,179,230)';
+        }
+    }
+    if ((l === 'K' || l === 'R') &&
+        (KR / total > 0.6 || K / total > 0.8 || R / total > 0.8 || Q / total > 0.8)) {
+        return '#d88';
+    }
+    if (l === 'E' &&
+        (KR / total > 0.6 ||
+            QE / total > 0.5 ||
+            E / total > 0.8 ||
+            Q / total > 0.8 ||
+            D / total > 0.8)) {
+        return 'rgb(192, 72, 192)';
+    }
+    if (l === 'D' &&
+        (KR / total > 0.6 ||
+            ED / total > 0.5 ||
+            K / total > 0.8 ||
+            R / total > 0.8 ||
+            Q / total > 0.8)) {
+        return 'rgb(204, 77, 204)';
+    }
+    if (l === 'N' && (N / total > 0.5 || Y / total > 0.85)) {
+        return '#8f8';
+    }
+    if (l === 'Q' &&
+        (KR / total > 0.6 ||
+            QE / total > 0.6 ||
+            Q / total > 0.85 ||
+            E / total > 0.85 ||
+            K / total > 0.85 ||
+            R / total > 0.85)) {
+        return '#8f8';
+    }
+    if ((l === 'S' || l === 'T') &&
+        // WLVIMAFCHP modified from 0.6 to 0.55 on page to match what i see in jalview
+        (WLVIMAFCHP / total > 0.6 ||
+            TS / total > 0.5 ||
+            S / total > 0.85 ||
+            T / total > 0.85)) {
+        return 'rgb(26,204,26)';
+    }
+    if (l === 'C' && C / total > 0.85) {
+        return 'rgb(240, 128, 128)';
+    }
+    if (l === 'G' && G / total > 0) {
+        return 'rgb(240, 144, 72)';
+    }
+    if (l === 'P' && P / total > 0) {
+        return 'rgb(204, 204, 0)';
+    }
+    if ((l === 'H' || l === 'Y') &&
+        (WLVIMAFCHP / total > 0.6 ||
+            W > 0.85 ||
+            Y > 0.85 ||
+            A > 0.85 ||
+            C > 0.85 ||
+            P > 0.85 ||
+            Q > 0.85 ||
+            F > 0.85 ||
+            H > 0.85 ||
+            I > 0.85 ||
+            L > 0.85 ||
+            M > 0.85 ||
+            V > 0.85)) {
+        // cyan from jalview.org docs
+        return 'rgb(26, 179, 179)';
+    }
+    return undefined;
+}
+// info http://www.jalview.org/help/html/colourSchemes/clustal.html
+// modifications:
+// reference to clustalX source code scheme modifies what the jalview.org
+// scheme says there the jalview.org colorscheme says WLVIMAFCHP but it
+// should be WLVIMAFCHPY, colprot.xml says e.g. %#ACFHILMVWYPp" which has Y
+export function getPercentIdentityColor(stats, model, row, col) {
+    var total = Object.values(stats).reduce(function (a, b) { return a + b; }, 0);
+    var l = model.columns[row][col];
+    var entries = Object.entries(stats);
+    var ent = 0;
+    var letter = '';
+    for (var i = 0; i < entries.length; i++) {
+        if (entries[i][1] > ent && entries[i][0] !== '-') {
+            letter = entries[i][0];
+            ent = entries[i][1];
+        }
+    }
+    var proportion = ent / total;
+    var thresh = "hsl(240, 30%, " + 100 * Math.max(1 - ent / total / 3, 0.3) + "%)";
+    if (proportion > 0.4) {
+        if (l === letter) {
+            return thresh;
+        }
+    }
+}

package/bundle/components/AboutDlg.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export default function AboutDialog({ onClose, open, }: {
+    onClose: () => void;
+    open: boolean;
+}): JSX.Element;

package/bundle/components/AboutDlg.js

@@ -0,0 +1,47 @@
+import React, { useState } from 'react';
+import { Dialog, DialogTitle, DialogContent, Typography, Link, } from '@material-ui/core';
+function LicenseDialog(_a) {
+    var onClose = _a.onClose, open = _a.open;
+    return (React.createElement(Dialog, { onClose: function () { return onClose(); }, open: open },
+        React.createElement(DialogTitle, null, "Biotite License"),
+        React.createElement(DialogContent, null,
+            React.createElement("pre", { style: { height: 100, overflow: 'auto' } }, "\nCopyright 2017 - 2020, The Biotite contributors\nAll rights reserved.\n\nRedistribution and use in source and binary forms, with or without modification,\nare permitted provided that the following conditions are met:\n\n1. Redistributions of source code must retain the above copyright notice, this\nlist of conditions and the following disclaimer.\n\n2. Redistributions in binary form must reproduce the above copyright notice,\nthis list of conditions and the following disclaimer in the documentation and/or\nother materials provided with the distribution.\n\n3. Neither the name of the copyright holder nor the names of its contributors\nmay be used to endorse or promote products derived from this software without\nspecific prior written permission.\n\nTHIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS \"AS IS\" AND\nANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED\nWARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE\nDISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR\nANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES\n(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;\nLOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON\nANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT\n(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS\nSOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.\n        "))));
+}
+export default function AboutDialog(_a) {
+    var onClose = _a.onClose, open = _a.open;
+    var _b = useState(false), dlgOpen = _b[0], setDlgOpen = _b[1];
+    return (React.createElement(React.Fragment, null,
+        React.createElement(LicenseDialog, { onClose: function () { return setDlgOpen(false); }, open: dlgOpen }),
+        React.createElement(Dialog, { onClose: function () { return onClose(); }, open: open },
+            React.createElement(DialogTitle, null, "About this plugin"),
+            React.createElement(DialogContent, null,
+                React.createElement(Typography, null,
+                    "MSAView 1.2.12 (",
+                    React.createElement(Link, { href: "https://github.com/gmod/jbrowse-plugin-msaview" }, "Github"),
+                    ")"),
+                React.createElement("ul", null,
+                    React.createElement("li", null,
+                        React.createElement(Typography, null,
+                            "We use some color schemes from the",
+                            ' ',
+                            React.createElement(Link, { href: "https://github.com/biotite-dev/biotite" }, "biotite"),
+                            ' ',
+                            "project, and their license is reproduced",
+                            ' ',
+                            React.createElement(Link, { onClick: function () { return setDlgOpen(true); } }, "here"))),
+                    React.createElement("li", null,
+                        React.createElement(Typography, null,
+                            "See this page for some information on jalview colorings",
+                            ' ',
+                            React.createElement(Link, { href: "https://www.jalview.org/help/html/colourSchemes/" }, "here"))),
+                    React.createElement("li", null,
+                        React.createElement(Typography, null,
+                            "See this page for some info on the clustal, cinema, maeditor, and lesk color schemes",
+                            ' ',
+                            React.createElement(Link, { href: "http://www.bioinformatics.nl/~berndb/aacolour.html" }, "here"))),
+                    React.createElement("li", null,
+                        React.createElement(Typography, null,
+                            "See this paper about the flower color scheme",
+                            ' ',
+                            React.createElement(Link, { href: "https://www.ncbi.nlm.nih.gov/pmc/articles/PMC7245768/" }, "here"))))))));
+}

package/bundle/components/AddTrackDlg.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { MsaViewModel } from '../model';
+declare const _default: ({ model, onClose, open, }: {
+    model: MsaViewModel;
+    onClose: () => void;
+    open: boolean;
+}) => JSX.Element;
+export default _default;

package/bundle/components/AddTrackDlg.js

@@ -0,0 +1,26 @@
+import React, { useState } from 'react';
+import { Dialog, DialogTitle, DialogContent, DialogActions, Button, TextField, MenuItem, Typography, } from '@material-ui/core';
+import { FileSelector } from '@jbrowse/core/ui';
+import { observer } from 'mobx-react';
+export default observer(function (_a) {
+    var model = _a.model, onClose = _a.onClose, open = _a.open;
+    var options = model.rows.map(function (r) { return r[0]; });
+    var _b = useState(), trackFile = _b[0], setTrackFile = _b[1];
+    var _c = useState(''), currentOption = _c[0], setCurrentOption = _c[1];
+    return (React.createElement(Dialog, { onClose: function () { return onClose(); }, open: open },
+        React.createElement(DialogTitle, null, "Add track"),
+        React.createElement(DialogContent, null,
+            React.createElement(Typography, null, "Open relevant per-alignment tracks e.g. protein domains"),
+            React.createElement(TextField, { select: true, helperText: "Which row does this track apply to?", value: currentOption, onChange: function (event) {
+                    setCurrentOption(event.target.value);
+                } }, options.map(function (option, index) { return (React.createElement(MenuItem, { key: option + "-" + index, value: option }, option)); })),
+            React.createElement(FileSelector, { location: trackFile, setLocation: setTrackFile }),
+            React.createElement(DialogActions, null,
+                React.createElement(Button, { onClick: function () {
+                        model.setError(undefined);
+                        if (trackFile) {
+                            model.setMSAFilehandle(trackFile);
+                        }
+                    }, variant: "contained", color: "primary" }, "Open"),
+                React.createElement(Button, { color: "secondary", variant: "contained", onClick: function () { return onClose(); } }, "Cancel")))));
+});

package/bundle/components/AnnotationDlg.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { MsaViewModel } from '../model';
+declare const _default: ({ onClose, data, model, }: {
+    model: MsaViewModel;
+    onClose: () => void;
+    data: {
+        left: number;
+        right: number;
+    };
+}) => JSX.Element;
+export default _default;

package/bundle/components/AnnotationDlg.js

@@ -0,0 +1,77 @@
+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 React, { useState } from 'react';
+import { observer } from 'mobx-react';
+import { Button, Dialog, DialogActions, DialogTitle, DialogContent, IconButton, TextField, Typography, } from '@material-ui/core';
+import DeleteIcon from '@material-ui/icons/Delete';
+var specialFromEntries = function (val) {
+    var ret = {};
+    val.forEach(function (_a) {
+        var key = _a[0], val = _a[1];
+        if (!ret[key])
+            ret[key] = [];
+        ret[key].push(val);
+    });
+    return ret;
+};
+var Row = observer(function (_a) {
+    var name = _a.name, value = _a.value, setValue = _a.setValue, setName = _a.setName, onDelete = _a.onDelete;
+    return (React.createElement("div", null,
+        React.createElement(IconButton, { onClick: onDelete, style: { margin: 10 } },
+            React.createElement(DeleteIcon, null)),
+        React.createElement(TextField, { value: name, onChange: function (event) { return setName(event.target.value); }, label: "Key" }),
+        React.createElement(TextField, { value: value, onChange: function (event) { return setValue(event.target.value); }, label: "Value" })));
+});
+export default observer(function (_a) {
+    var onClose = _a.onClose, data = _a.data, model = _a.model;
+    var blanks = model.blanks;
+    var l = data.left, r = data.right;
+    var _b = useState([
+        ['Name', ''],
+        ['ID', ''],
+        ['Note', ''],
+    ]), rows = _b[0], setRows = _b[1];
+    return (React.createElement(Dialog, { onClose: function () { return onClose(); }, open: true },
+        React.createElement(DialogTitle, null, "Create new region annotation"),
+        React.createElement(DialogContent, null,
+            React.createElement(Typography, null,
+                "Do you want to add an annotation to the MSA at ",
+                l,
+                "..",
+                r,
+                ' ',
+                blanks.length
+                    ? " (gapped " + model.getPos(l) + ".." + model.getPos(r)
+                    : ''),
+            rows.map(function (_a, index) {
+                var key = _a[0], val = _a[1];
+                return (React.createElement(Row, { key: index, name: key, value: val, setValue: function (newValue) {
+                        var newRows = __spreadArray([], rows, true);
+                        newRows[index][1] = newValue;
+                        setRows(newRows);
+                    }, setName: function (newName) {
+                        var newRows = __spreadArray([], rows, true);
+                        newRows[index][0] = newName;
+                        setRows(newRows);
+                    }, onDelete: function () {
+                        rows.splice(index, 1);
+                        setRows(__spreadArray([], rows, true));
+                    } }));
+            }),
+            React.createElement(Button, { onClick: function () {
+                    setRows(__spreadArray(__spreadArray([], rows, true), [['', '']], false));
+                } }, "Add row"),
+            React.createElement(DialogActions, null,
+                React.createElement(Button, { onClick: function () {
+                        model.addAnnotation(l, r, specialFromEntries(rows));
+                        onClose();
+                    }, variant: "contained", color: "primary" }, "Submit"),
+                React.createElement(Button, { variant: "contained", color: "secondary", onClick: function () { return onClose(); } }, "Cancel")))));
+});

package/bundle/components/BoxTrack.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { MsaViewModel } from '../model';
+declare const AnnotationTrack: ({ model, track }: {
+    model: MsaViewModel;
+    track: any;
+}) => JSX.Element;
+export default AnnotationTrack;