react-msaview 1.2.8 → 1.3.0

package/dist/components/AboutDlg.js

@@ -1,36 +1,50 @@
-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);
-};
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState } from 'react';
+import React, { useState } from 'react';
 import { Dialog, DialogTitle, DialogContent, Typography, Link, } from '@material-ui/core';
 import { version } from './package.json';
 function LicenseDialog(_a) {
     var onClose = _a.onClose, open = _a.open;
-    return (_jsxs(Dialog, __assign({ onClose: function () { return onClose(); }, open: open }, { children: [_jsx(DialogTitle, { children: "Biotite License" }, void 0),
-            _jsx(DialogContent, { children: _jsx("pre", __assign({ style: { height: 100, overflow: 'auto' } }, { children: "\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        " }), void 0) }, void 0)] }), void 0));
+    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 (_jsxs(_Fragment, { children: [_jsx(LicenseDialog, { onClose: function () { return setDlgOpen(false); }, open: dlgOpen }, void 0),
-            _jsxs(Dialog, __assign({ onClose: function () { return onClose(); }, open: open }, { children: [_jsx(DialogTitle, { children: "About this plugin" }, void 0),
-                    _jsxs(DialogContent, { children: [_jsxs(Typography, { children: ["JBrowse 2 MSAView plugin ", version, " (", _jsx(Link, __assign({ href: "https://github.com/gmod/jbrowse-plugin-msaview" }, { children: "Github" }), void 0), ")"] }, void 0),
-                            _jsxs("ul", { children: [_jsx("li", { children: _jsxs(Typography, { children: ["We use some color schemes from the", ' ',
-                                                _jsx(Link, __assign({ href: "https://github.com/biotite-dev/biotite" }, { children: "biotite" }), void 0), ' ', "project, and their license is reproduced", ' ',
-                                                _jsx(Link, __assign({ onClick: function () { return setDlgOpen(true); } }, { children: "here" }), void 0)] }, void 0) }, void 0),
-                                    _jsx("li", { children: _jsxs(Typography, { children: ["See this page for some information on jalview colorings", ' ',
-                                                _jsx(Link, __assign({ href: "https://www.jalview.org/help/html/colourSchemes/" }, { children: "here" }), void 0)] }, void 0) }, void 0),
-                                    _jsx("li", { children: _jsxs(Typography, { children: ["See this page for some info on the clustal, cinema, maeditor, and lesk color schemes", ' ',
-                                                _jsx(Link, __assign({ href: "http://www.bioinformatics.nl/~berndb/aacolour.html" }, { children: "here" }), void 0)] }, void 0) }, void 0),
-                                    _jsx("li", { children: _jsxs(Typography, { children: ["See this paper about the flower color scheme", ' ',
-                                                _jsx(Link, __assign({ href: "https://www.ncbi.nlm.nih.gov/pmc/articles/PMC7245768/" }, { children: "here" }), void 0)] }, void 0) }, void 0)] }, void 0)] }, void 0)] }), void 0)] }, void 0));
+    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 ",
+                    version,
+                    " (",
+                    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/dist/components/AddTrackDlg.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { MsaViewModel } from '../model';
 declare const _default: ({ model, onClose, open, }: {
     model: MsaViewModel;

package/dist/components/AddTrackDlg.js

@@ -1,16 +1,4 @@
-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);
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+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';
@@ -19,17 +7,20 @@ export default observer(function (_a) {
     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 (_jsxs(Dialog, __assign({ onClose: function () { return onClose(); }, open: open }, { children: [_jsx(DialogTitle, { children: "Add track" }, void 0),
-            _jsxs(DialogContent, { children: [_jsx(Typography, { children: "Open relevant per-alignment tracks e.g. protein domains" }, void 0),
-                    _jsx(TextField, __assign({ select: true, helperText: "Which row does this track apply to?", value: currentOption, onChange: function (event) {
-                            setCurrentOption(event.target.value);
-                        } }, { children: options.map(function (option, index) { return (_jsx(MenuItem, __assign({ value: option }, { children: option }), option + "-" + index)); }) }), void 0),
-                    _jsx(FileSelector, { location: trackFile, setLocation: setTrackFile }, void 0),
-                    _jsxs(DialogActions, { children: [_jsx(Button, __assign({ onClick: function () {
-                                    model.setError(undefined);
-                                    if (trackFile) {
-                                        model.setMSAFilehandle(trackFile);
-                                    }
-                                }, variant: "contained", color: "primary" }, { children: "Open" }), void 0),
-                            _jsx(Button, __assign({ color: "secondary", variant: "contained", onClick: function () { return onClose(); } }, { children: "Cancel" }), void 0)] }, void 0)] }, void 0)] }), void 0));
+    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/dist/components/AnnotationDlg.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { MsaViewModel } from '../model';
 declare const _default: ({ onClose, data, model, }: {
     model: MsaViewModel;

package/dist/components/AnnotationDlg.js

@@ -1,21 +1,13 @@
-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];
+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 t;
-    };
-    return __assign.apply(this, arguments);
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+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';
@@ -31,9 +23,11 @@ var specialFromEntries = function (val) {
 };
 var Row = observer(function (_a) {
     var name = _a.name, value = _a.value, setValue = _a.setValue, setName = _a.setName, onDelete = _a.onDelete;
-    return (_jsxs("div", { children: [_jsx(IconButton, __assign({ onClick: onDelete, style: { margin: 10 } }, { children: _jsx(DeleteIcon, {}, void 0) }), void 0),
-            _jsx(TextField, { value: name, onChange: function (event) { return setName(event.target.value); }, label: "Key" }, void 0),
-            _jsx(TextField, { value: value, onChange: function (event) { return setValue(event.target.value); }, label: "Value" }, void 0)] }, void 0));
+    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;
@@ -44,32 +38,40 @@ export default observer(function (_a) {
         ['ID', ''],
         ['Note', ''],
     ]), rows = _b[0], setRows = _b[1];
-    return (_jsxs(Dialog, __assign({ onClose: function () { return onClose(); }, open: true }, { children: [_jsx(DialogTitle, { children: "Create new region annotation" }, void 0),
-            _jsxs(DialogContent, { children: [_jsxs(Typography, { children: ["Do you want to add an annotation to the MSA at ", l, "..", r, ' ',
-                            blanks.length
-                                ? " (gapped " + model.getPos(l) + ".." + model.getPos(r)
-                                : ''] }, void 0),
-                    rows.map(function (_a, index) {
-                        var key = _a[0], val = _a[1];
-                        return (_jsx(Row, { name: key, value: val, setValue: function (newValue) {
-                                var newRows = __spreadArray([], rows);
-                                newRows[index][1] = newValue;
-                                setRows(newRows);
-                            }, setName: function (newName) {
-                                var newRows = __spreadArray([], rows);
-                                newRows[index][0] = newName;
-                                setRows(newRows);
-                            }, onDelete: function () {
-                                rows.splice(index, 1);
-                                setRows(__spreadArray([], rows));
-                            } }, index));
-                    }),
-                    _jsx(Button, __assign({ onClick: function () {
-                            setRows(__spreadArray(__spreadArray([], rows), [['', '']]));
-                        } }, { children: "Add row" }), void 0),
-                    _jsxs(DialogActions, { children: [_jsx(Button, __assign({ onClick: function () {
-                                    model.addAnnotation(l, r, specialFromEntries(rows));
-                                    onClose();
-                                }, variant: "contained", color: "primary" }, { children: "Submit" }), void 0),
-                            _jsx(Button, __assign({ variant: "contained", color: "secondary", onClick: function () { return onClose(); } }, { children: "Cancel" }), void 0)] }, void 0)] }, void 0)] }), void 0));
+    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/dist/components/BoxTrack.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { MsaViewModel } from '../model';
 declare const AnnotationTrack: ({ model, track }: {
     model: MsaViewModel;

package/dist/components/BoxTrack.js

@@ -1,16 +1,4 @@
-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);
-};
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, useMemo, useEffect } from 'react';
+import React, { useRef, useMemo, useEffect } from 'react';
 import { observer } from 'mobx-react';
 import { getSnapshot, isStateTreeNode } from 'mobx-state-tree';
 import Layout from '../layout';
@@ -121,34 +109,35 @@ var AnnotationBlock = observer(function (_a) {
         rowHeight,
         blanks,
     ]);
-    return !features ? null : (_jsxs(_Fragment, { children: [_jsx("canvas", { ref: ref, height: height * highResScaleFactor, width: blockSize * highResScaleFactor, style: {
-                    position: 'absolute',
-                    left: scrollX + offsetX,
-                    width: blockSize,
-                    height: height,
-                } }, void 0),
-            _jsx("canvas", { ref: labelRef, height: height * highResScaleFactor, width: blockSize * highResScaleFactor, style: {
-                    position: 'absolute',
-                    left: scrollX + offsetX,
-                    width: blockSize,
-                    height: height,
-                } }, void 0),
-            _jsx("canvas", { ref: mouseoverRef, height: height * highResScaleFactor, width: blockSize * highResScaleFactor, style: {
-                    position: 'absolute',
-                    left: scrollX + offsetX,
-                    width: blockSize,
-                    height: height,
-                } }, void 0)] }, void 0));
+    return !features ? null : (React.createElement(React.Fragment, null,
+        React.createElement("canvas", { ref: ref, height: height * highResScaleFactor, width: blockSize * highResScaleFactor, style: {
+                position: 'absolute',
+                left: scrollX + offsetX,
+                width: blockSize,
+                height: height,
+            } }),
+        React.createElement("canvas", { ref: labelRef, height: height * highResScaleFactor, width: blockSize * highResScaleFactor, style: {
+                position: 'absolute',
+                left: scrollX + offsetX,
+                width: blockSize,
+                height: height,
+            } }),
+        React.createElement("canvas", { ref: mouseoverRef, height: height * highResScaleFactor, width: blockSize * highResScaleFactor, style: {
+                position: 'absolute',
+                left: scrollX + offsetX,
+                width: blockSize,
+                height: height,
+            } })));
 });
 var AnnotationTrack = observer(function (_a) {
     var model = _a.model, track = _a.track;
     var blocksX = model.blocksX, msaAreaWidth = model.msaAreaWidth;
     var height = track.model.height;
-    return (_jsx("div", __assign({ style: {
+    return (React.createElement("div", { style: {
             position: 'relative',
             height: height,
             width: msaAreaWidth,
             overflow: 'hidden',
-        } }, { children: blocksX.map(function (bx) { return (_jsx(AnnotationBlock, { track: track, model: model, offsetX: bx }, bx)); }) }), void 0));
+        } }, blocksX.map(function (bx) { return (React.createElement(AnnotationBlock, { track: track, key: bx, model: model, offsetX: bx })); })));
 });
 export default AnnotationTrack;

package/dist/components/DetailsDlg.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { MsaViewModel } from '../model';
 declare const _default: ({ model, onClose, open, }: {
     model: MsaViewModel;

package/dist/components/DetailsDlg.js

@@ -1,21 +1,12 @@
-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);
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
 import { Dialog, DialogTitle, DialogContent } from '@material-ui/core';
 import { observer } from 'mobx-react';
 import { Attributes } from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail';
 export default observer(function (_a) {
     var model = _a.model, onClose = _a.onClose, open = _a.open;
     var alignmentDetails = model.alignmentDetails;
-    return (_jsxs(Dialog, __assign({ onClose: function () { return onClose(); }, open: open }, { children: [_jsx(DialogTitle, { children: "Metadata" }, void 0),
-            _jsx(DialogContent, { children: _jsx(Attributes, { attributes: alignmentDetails }, void 0) }, void 0)] }), void 0));
+    return (React.createElement(Dialog, { onClose: function () { return onClose(); }, open: open },
+        React.createElement(DialogTitle, null, "Metadata"),
+        React.createElement(DialogContent, null,
+            React.createElement(Attributes, { attributes: alignmentDetails }))));
 });

package/dist/components/Header.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { MsaViewModel } from '../model';
 declare const Header: ({ model }: {
     model: MsaViewModel;

package/dist/components/Header.js

@@ -1,16 +1,4 @@
-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);
-};
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { useState } from 'react';
+import React, { useState } from 'react';
 import { IconButton, Select, Typography } from '@material-ui/core';
 import { observer } from 'mobx-react';
 import SettingsDialog from './SettingsDlg';
@@ -26,9 +14,14 @@ import ListIcon from '@material-ui/icons/List';
 var InfoArea = observer(function (_a) {
     var model = _a.model;
     var mouseOverRowName = model.mouseOverRowName, mouseCol = model.mouseCol;
-    return (_jsxs("div", { children: [_jsxs(Typography, __assign({ display: "inline" }, { children: ["Row name: ", mouseOverRowName] }), void 0),
-            _jsx("span", { style: { marginLeft: 10 } }, void 0),
-            _jsxs(Typography, __assign({ display: "inline" }, { children: ["Position: ", mouseCol] }), void 0)] }, void 0));
+    return (React.createElement("div", null,
+        React.createElement(Typography, { display: "inline" },
+            "Row name: ",
+            mouseOverRowName),
+        React.createElement("span", { style: { marginLeft: 10 } }),
+        React.createElement(Typography, { display: "inline" },
+            "Position: ",
+            mouseCol)));
 });
 var Header = observer(function (_a) {
     var model = _a.model;
@@ -37,28 +30,34 @@ var Header = observer(function (_a) {
     var _d = useState(false), detailsDialogVisible = _d[0], setDetailsDialogVisible = _d[1];
     var _e = useState(false), tracklistDialogVisible = _e[0], setTracklistDialogVisible = _e[1];
     var currentAlignment = model.currentAlignment, alignmentNames = model.alignmentNames;
-    return (_jsxs("div", __assign({ style: { display: 'flex' } }, { children: [_jsx(IconButton, __assign({ onClick: function () {
-                    model.setData({ tree: '', msa: '' });
-                    model.setTreeFilehandle(undefined);
-                    model.setMSAFilehandle(undefined);
-                    model.setScrollY(0);
-                    model.setScrollX(0);
-                    model.setCurrentAlignment(0);
-                } }, { children: _jsx(FolderOpenIcon, {}, void 0) }), void 0),
-            _jsx(IconButton, __assign({ onClick: function () { return setSettingsDialogVisible(true); } }, { children: _jsx(SettingsIcon, {}, void 0) }), void 0),
-            _jsx(IconButton, __assign({ onClick: function () { return setDetailsDialogVisible(true); } }, { children: _jsx(AssignmentIcon, {}, void 0) }), void 0),
-            _jsx(IconButton, __assign({ onClick: function () { return setTracklistDialogVisible(true); } }, { children: _jsx(ListIcon, {}, void 0) }), void 0),
-            settingsDialogVisible ? (_jsx(SettingsDialog, { open: true, model: model, onClose: function () { return setSettingsDialogVisible(false); } }, void 0)) : null,
-            aboutDialogVisible ? (_jsx(AboutDialog, { open: true, onClose: function () { return setAboutDialogVisible(false); } }, void 0)) : null,
-            detailsDialogVisible ? (_jsx(DetailsDialog, { open: true, model: model, onClose: function () { return setDetailsDialogVisible(false); } }, void 0)) : null,
-            tracklistDialogVisible ? (_jsx(TracklistDialog, { open: true, model: model, onClose: function () { return setTracklistDialogVisible(false); } }, void 0)) : null,
-            alignmentNames.length > 0 ? (_jsx(Select, __assign({ native: true, value: currentAlignment, onChange: function (event) {
-                    model.setCurrentAlignment(+event.target.value);
-                    model.setScrollX(0);
-                    model.setScrollY(0);
-                } }, { children: alignmentNames.map(function (option, index) { return (_jsx("option", __assign({ value: index }, { children: option }), option + "-" + index)); }) }), void 0)) : null,
-            _jsx(InfoArea, { model: model }, void 0),
-            _jsx("div", { style: { flex: 1 } }, void 0),
-            _jsx(IconButton, __assign({ onClick: function () { return setAboutDialogVisible(true); } }, { children: _jsx(HelpIcon, {}, void 0) }), void 0)] }), void 0));
+    return (React.createElement("div", { style: { display: 'flex' } },
+        React.createElement(IconButton, { onClick: function () {
+                model.setData({ tree: '', msa: '' });
+                model.setTreeFilehandle(undefined);
+                model.setMSAFilehandle(undefined);
+                model.setScrollY(0);
+                model.setScrollX(0);
+                model.setCurrentAlignment(0);
+            } },
+            React.createElement(FolderOpenIcon, null)),
+        React.createElement(IconButton, { onClick: function () { return setSettingsDialogVisible(true); } },
+            React.createElement(SettingsIcon, null)),
+        React.createElement(IconButton, { onClick: function () { return setDetailsDialogVisible(true); } },
+            React.createElement(AssignmentIcon, null)),
+        React.createElement(IconButton, { onClick: function () { return setTracklistDialogVisible(true); } },
+            React.createElement(ListIcon, null)),
+        settingsDialogVisible ? (React.createElement(SettingsDialog, { open: true, model: model, onClose: function () { return setSettingsDialogVisible(false); } })) : null,
+        aboutDialogVisible ? (React.createElement(AboutDialog, { open: true, onClose: function () { return setAboutDialogVisible(false); } })) : null,
+        detailsDialogVisible ? (React.createElement(DetailsDialog, { open: true, model: model, onClose: function () { return setDetailsDialogVisible(false); } })) : null,
+        tracklistDialogVisible ? (React.createElement(TracklistDialog, { open: true, model: model, onClose: function () { return setTracklistDialogVisible(false); } })) : null,
+        alignmentNames.length > 0 ? (React.createElement(Select, { native: true, value: currentAlignment, onChange: function (event) {
+                model.setCurrentAlignment(+event.target.value);
+                model.setScrollX(0);
+                model.setScrollY(0);
+            } }, alignmentNames.map(function (option, index) { return (React.createElement("option", { key: option + "-" + index, value: index }, option)); }))) : null,
+        React.createElement(InfoArea, { model: model }),
+        React.createElement("div", { style: { flex: 1 } }),
+        React.createElement(IconButton, { onClick: function () { return setAboutDialogVisible(true); } },
+            React.createElement(HelpIcon, null))));
 });
 export default Header;

package/dist/components/ImportForm.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { MsaViewModel } from '../model';
 declare const _default: ({ model }: {
     model: MsaViewModel;