react-msaview 1.2.8 → 1.3.0

package/dist/components/ImportForm.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 { Button, Container, Grid, Typography, Link } from '@material-ui/core';
 import { observer } from 'mobx-react';
 import { transaction } from 'mobx';
@@ -18,72 +6,91 @@ import { FileSelector } from '@jbrowse/core/ui';
 import { smallTree, smallMSA, smallMSAOnly } from './data/seq2';
 var ListItem = function (_a) {
     var onClick = _a.onClick, model = _a.model, children = _a.children;
-    return (_jsx("li", { children: _jsx(Link, __assign({ onClick: function () {
+    return (React.createElement("li", null,
+        React.createElement(Link, { onClick: function (event) {
                 model.setError(undefined);
+                event.preventDefault();
                 onClick();
-            }, href: "#" }, { children: _jsx(Typography, { children: children }, void 0) }), void 0) }, void 0));
+            }, href: "#" },
+            React.createElement(Typography, null, children))));
 };
 export default observer(function (_a) {
     var model = _a.model;
     var _b = useState(), msaFile = _b[0], setMsaFile = _b[1];
     var _c = useState(), treeFile = _c[0], setTreeFile = _c[1];
     var error = model.error;
-    return (_jsxs(Container, { children: [_jsxs("div", __assign({ style: { width: '50%' } }, { children: [error ? (_jsx("div", __assign({ style: { padding: 20 } }, { children: _jsxs(Typography, __assign({ color: "error" }, { children: ["Error: ", "" + error] }), void 0) }), void 0)) : null,
-                    _jsx(Typography, { children: "Open an MSA file (stockholm or clustal format) and/or a tree file (newick format)." }, void 0),
-                    _jsx(Typography, __assign({ color: "error" }, { children: "Note: you can open up just an MSA or just a tree, both are not required. Some MSA files e.g. stockholm format have an embedded tree also and this is fine, and opening a separate tree file is not required." }), void 0)] }), void 0),
-            _jsxs(Grid, __assign({ container: true, spacing: 10, justifyContent: "center", alignItems: "center" }, { children: [_jsxs(Grid, __assign({ item: true }, { children: [_jsx(Typography, { children: "MSA file or URL" }, void 0),
-                            _jsx(FileSelector, { location: msaFile, setLocation: setMsaFile }, void 0),
-                            _jsx(Typography, { children: "Tree file or URL" }, void 0),
-                            _jsx(FileSelector, { location: treeFile, setLocation: setTreeFile }, void 0)] }), void 0),
-                    _jsx(Grid, __assign({ item: true }, { children: _jsx(Button, __assign({ onClick: function () {
-                                model.setError(undefined);
-                                if (msaFile) {
-                                    model.setMSAFilehandle(msaFile);
-                                }
-                                if (treeFile) {
-                                    model.setTreeFilehandle(treeFile);
-                                }
-                            }, variant: "contained", color: "primary", disabled: !msaFile && !treeFile }, { children: "Open" }), void 0) }), void 0),
-                    _jsxs(Grid, __assign({ item: true }, { children: [_jsx(Typography, { children: "Examples" }, void 0),
-                            _jsxs("ul", { children: [_jsx(ListItem, __assign({ model: model, onClick: function () {
-                                            model.setTreeFilehandle({
-                                                uri: 'https://jbrowse.org/genomes/newick_trees/sarscov2phylo.pub.ft.nh',
-                                            });
-                                        } }, { children: "230k COVID-19 samples (tree only)" }), void 0),
-                                    _jsx(ListItem, __assign({ model: model, onClick: function () {
-                                            model.setData({ msa: smallMSA, tree: smallTree });
-                                        } }, { children: "Small protein MSA+tree" }), void 0),
-                                    _jsx(ListItem, __assign({ model: model, onClick: function () {
-                                            model.setData({ msa: smallMSAOnly });
-                                        } }, { children: "Small MSA only" }), void 0),
-                                    _jsx(ListItem, __assign({ model: model, onClick: function () {
-                                            model.setMSAFilehandle({
-                                                uri: 'https://ihh.github.io/abrowse/build/pfam-cov2.stock',
-                                            });
-                                        } }, { children: "PFAM SARS-CoV2 multi-stockholm" }), void 0),
-                                    _jsx(ListItem, __assign({ model: model, onClick: function () {
-                                            model.setMSAFilehandle({
-                                                uri: 'https://jbrowse.org/genomes/multiple_sequence_alignments/Lysine.stock',
-                                            });
-                                        } }, { children: "Lysine stockholm file" }), void 0),
-                                    _jsx(ListItem, __assign({ model: model, onClick: function () {
-                                            model.setMSAFilehandle({
-                                                uri: 'https://jbrowse.org/genomes/multiple_sequence_alignments/PF01601_full.txt',
-                                            });
-                                        } }, { children: "PF01601 stockholm file (SARS-CoV2 spike protein)" }), void 0),
-                                    _jsx(ListItem, __assign({ model: model, onClick: function () {
-                                            model.setMSAFilehandle({
-                                                uri: 'https://jbrowse.org/genomes/multiple_sequence_alignments/europe_covid.fa',
-                                            });
-                                        } }, { children: "Europe COVID full genomes (LR883044.1 and 199 other sequences)" }), void 0),
-                                    _jsx(ListItem, __assign({ model: model, onClick: function () {
-                                            transaction(function () {
-                                                model.setMSAFilehandle({
-                                                    uri: 'https://jbrowse.org/genomes/multiple_sequence_alignments/rhv_test-only.aligned_with_mafft_auto.fa',
-                                                });
-                                                model.setTreeFilehandle({
-                                                    uri: 'https://jbrowse.org/genomes/multiple_sequence_alignments/rhv_test-only.aligned_with_mafft_auto.nh',
-                                                });
-                                            });
-                                        } }, { children: "MAFFT+VeryFastTree(17.9k samples)" }), void 0)] }, void 0)] }), void 0)] }), void 0)] }, void 0));
+    return (React.createElement(Container, null,
+        React.createElement("div", { style: { width: '50%' } },
+            error ? (React.createElement("div", { style: { padding: 20 } },
+                React.createElement(Typography, { color: "error" },
+                    "Error: ", "" + error))) : null,
+            React.createElement(Typography, null, "Open an MSA file (stockholm or clustal format) and/or a tree file (newick format)."),
+            React.createElement(Typography, { color: "error" }, "Note: you can open up just an MSA or just a tree, both are not required. Some MSA files e.g. stockholm format have an embedded tree also and this is fine, and opening a separate tree file is not required.")),
+        React.createElement(Grid, { container: true, spacing: 10, justifyContent: "center", alignItems: "center" },
+            React.createElement(Grid, { item: true },
+                React.createElement(Typography, null, "MSA file or URL"),
+                React.createElement(FileSelector, { location: msaFile, setLocation: setMsaFile }),
+                React.createElement(Typography, null, "Tree file or URL"),
+                React.createElement(FileSelector, { location: treeFile, setLocation: setTreeFile })),
+            React.createElement(Grid, { item: true },
+                React.createElement(Button, { onClick: function () {
+                        model.setError(undefined);
+                        if (msaFile) {
+                            model.setMSAFilehandle(msaFile);
+                        }
+                        if (treeFile) {
+                            model.setTreeFilehandle(treeFile);
+                        }
+                    }, variant: "contained", color: "primary", disabled: !msaFile && !treeFile }, "Open")),
+            React.createElement(Grid, { item: true },
+                React.createElement(Typography, null, "Examples"),
+                React.createElement("ul", null,
+                    React.createElement(ListItem, { model: model, onClick: function () {
+                            model.setTreeFilehandle({
+                                uri: 'https://jbrowse.org/genomes/newick_trees/sarscov2phylo.pub.ft.nh',
+                                locationType: 'UriLocation',
+                            });
+                        } }, "230k COVID-19 samples (tree only)"),
+                    React.createElement(ListItem, { model: model, onClick: function () {
+                            model.setData({ msa: smallMSA, tree: smallTree });
+                        } }, "Small protein MSA+tree"),
+                    React.createElement(ListItem, { model: model, onClick: function () {
+                            model.setData({ msa: smallMSAOnly });
+                        } }, "Small MSA only"),
+                    React.createElement(ListItem, { model: model, onClick: function () {
+                            model.setMSAFilehandle({
+                                uri: 'https://ihh.github.io/abrowse/build/pfam-cov2.stock',
+                                locationType: 'UriLocation',
+                            });
+                        } }, "PFAM SARS-CoV2 multi-stockholm"),
+                    React.createElement(ListItem, { model: model, onClick: function () {
+                            model.setMSAFilehandle({
+                                uri: 'https://jbrowse.org/genomes/multiple_sequence_alignments/Lysine.stock',
+                                locationType: 'UriLocation',
+                            });
+                        } }, "Lysine stockholm file"),
+                    React.createElement(ListItem, { model: model, onClick: function () {
+                            model.setMSAFilehandle({
+                                uri: 'https://jbrowse.org/genomes/multiple_sequence_alignments/PF01601_full.txt',
+                                locationType: 'UriLocation',
+                            });
+                        } }, "PF01601 stockholm file (SARS-CoV2 spike protein)"),
+                    React.createElement(ListItem, { model: model, onClick: function () {
+                            model.setMSAFilehandle({
+                                uri: 'https://jbrowse.org/genomes/multiple_sequence_alignments/europe_covid.fa',
+                                locationType: 'UriLocation',
+                            });
+                        } }, "Europe COVID full genomes (LR883044.1 and 199 other sequences)"),
+                    React.createElement(ListItem, { model: model, onClick: function () {
+                            transaction(function () {
+                                model.setMSAFilehandle({
+                                    uri: 'https://jbrowse.org/genomes/multiple_sequence_alignments/rhv_test-only.aligned_with_mafft_auto.fa',
+                                    locationType: 'UriLocation',
+                                });
+                                model.setTreeFilehandle({
+                                    uri: 'https://jbrowse.org/genomes/multiple_sequence_alignments/rhv_test-only.aligned_with_mafft_auto.nh',
+                                    locationType: 'UriLocation',
+                                });
+                            });
+                        } }, "MAFFT+VeryFastTree(17.9k samples)"))))));
 });

package/dist/components/MSACanvas.d.ts

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

package/dist/components/MSACanvas.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 { useEffect, useState, useRef, useMemo } from 'react';
+import React, { useEffect, useState, useRef, useMemo } from 'react';
 import { Typography, CircularProgress, useTheme } from '@material-ui/core';
 import { observer } from 'mobx-react';
 import normalizeWheel from 'normalize-wheel';
@@ -97,7 +85,7 @@ var MSABlock = observer(function (_a) {
         offsetY,
         blockSize,
     ]);
-    return (_jsx("canvas", { ref: ref, onMouseMove: function (event) {
+    return (React.createElement("canvas", { ref: ref, onMouseMove: function (event) {
             if (!ref.current) {
                 return;
             }
@@ -111,7 +99,7 @@ var MSABlock = observer(function (_a) {
             left: scrollX + offsetX,
             width: blockSize,
             height: blockSize,
-        } }, void 0));
+        } }));
 });
 var MSACanvas = observer(function (_a) {
     var model = _a.model;
@@ -190,7 +178,7 @@ var MSACanvas = observer(function (_a) {
         }
         return cleanup;
     }, [model, mouseDragging]);
-    return (_jsx("div", __assign({ ref: ref, onMouseDown: function (event) {
+    return (React.createElement("div", { ref: ref, onMouseDown: function (event) {
             // check if clicking a draggable element or a resize handle
             var target = event.target;
             if (target.draggable || target.dataset.resizer) {
@@ -212,10 +200,11 @@ var MSACanvas = observer(function (_a) {
             height: height,
             width: msaAreaWidth,
             overflow: 'hidden',
-        } }, { children: !MSA && !msaFilehandle ? null : !MSA ? (_jsxs("div", __assign({ style: { position: 'absolute', left: '50%', top: '50%' } }, { children: [_jsx(CircularProgress, {}, void 0),
-                _jsx(Typography, { children: "Loading..." }, void 0)] }), void 0)) : (blocks2d.map(function (_a) {
-            var bx = _a[0], by = _a[1];
-            return (_jsx(MSABlock, { model: model, offsetX: bx, offsetY: by }, bx + "_" + by));
-        })) }), void 0));
+        } }, !MSA && !msaFilehandle ? null : !MSA ? (React.createElement("div", { style: { position: 'absolute', left: '50%', top: '50%' } },
+        React.createElement(CircularProgress, null),
+        React.createElement(Typography, null, "Loading..."))) : (blocks2d.map(function (_a) {
+        var bx = _a[0], by = _a[1];
+        return (React.createElement(MSABlock, { key: bx + "_" + by, model: model, offsetX: bx, offsetY: by }));
+    }))));
 });
 export default MSACanvas;

package/dist/components/MSAView.d.ts

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

package/dist/components/MSAView.js

@@ -9,8 +9,7 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, useEffect } from 'react';
+import React, { useRef, useEffect } from 'react';
 import { observer } from 'mobx-react';
 import { Typography } from '@material-ui/core';
 import ImportForm from './ImportForm';
@@ -51,7 +50,7 @@ var MouseoverCanvas = observer(function (_a) {
         treeAreaWidth,
         width,
     ]);
-    return (_jsx("canvas", { ref: ref, width: width, height: height, style: {
+    return (React.createElement("canvas", { ref: ref, width: width, height: height, style: {
             position: 'absolute',
             top: 0,
             left: 0,
@@ -59,22 +58,31 @@ var MouseoverCanvas = observer(function (_a) {
             height: height,
             zIndex: 1000,
             pointerEvents: 'none',
-        } }, void 0));
+        } }));
 });
 export default observer(function (_a) {
     var model = _a.model;
     var done = model.done, initialized = model.initialized, treeAreaWidth = model.treeAreaWidth, height = model.height, resizeHandleWidth = model.resizeHandleWidth, turnedOnTracks = model.turnedOnTracks;
-    return (_jsxs("div", { children: [!initialized ? (_jsx(ImportForm, { model: model }, void 0)) : !done ? (_jsx(Typography, __assign({ variant: "h4" }, { children: "Loading..." }), void 0)) : (_jsxs("div", { children: [_jsxs("div", __assign({ style: { height: height, overflow: 'hidden' } }, { children: [_jsx(Header, { model: model }, void 0),
-                            _jsx("div", { children: _jsxs("div", __assign({ style: { position: 'relative' } }, { children: [_jsxs("div", __assign({ style: { display: 'flex' } }, { children: [_jsx("div", __assign({ style: { flexShrink: 0, width: treeAreaWidth } }, { children: _jsx(TreeRuler, { model: model }, void 0) }), void 0),
-                                                _jsx(Rubberband, { model: model, ControlComponent: _jsx(Ruler, { model: model }, void 0) }, void 0)] }), void 0),
-                                        turnedOnTracks === null || turnedOnTracks === void 0 ? void 0 : turnedOnTracks.map(function (track) { return (_jsx(Track, { model: model, track: track }, track.model.id)); }),
-                                        _jsxs("div", __assign({ style: { display: 'flex' } }, { children: [_jsx("div", __assign({ style: { flexShrink: 0, width: treeAreaWidth } }, { children: _jsx(TreeCanvas, { model: model }, void 0) }), void 0),
-                                                _jsx(VerticalResizeHandle, { model: model }, void 0),
-                                                _jsx(MSACanvas, { model: model }, void 0),
-                                                _jsx(MouseoverCanvas, { model: model }, void 0)] }), void 0)] }), void 0) }, void 0)] }), void 0),
-                    _jsx(HorizontalResizeHandle, { model: model }, void 0)] }, void 0)),
-            model.DialogComponent ? (_jsx(model.DialogComponent, __assign({}, (model.DialogProps || {}), { onClose: function () {
-                    model.setDialogComponent(undefined, undefined);
-                } }), void 0)) : null,
-            model.annotPos ? (_jsx(AnnotationDialog, { data: model.annotPos, model: model, onClose: function () { return model.clearAnnotPos(); } }, void 0)) : null] }, void 0));
+    return (React.createElement("div", null,
+        !initialized ? (React.createElement(ImportForm, { model: model })) : !done ? (React.createElement(Typography, { variant: "h4" }, "Loading...")) : (React.createElement("div", null,
+            React.createElement("div", { style: { height: height, overflow: 'hidden' } },
+                React.createElement(Header, { model: model }),
+                React.createElement("div", null,
+                    React.createElement("div", { style: { position: 'relative' } },
+                        React.createElement("div", { style: { display: 'flex' } },
+                            React.createElement("div", { style: { flexShrink: 0, width: treeAreaWidth } },
+                                React.createElement(TreeRuler, { model: model })),
+                            React.createElement(Rubberband, { model: model, ControlComponent: React.createElement(Ruler, { model: model }) })), turnedOnTracks === null || turnedOnTracks === void 0 ? void 0 :
+                        turnedOnTracks.map(function (track) { return (React.createElement(Track, { key: track.model.id, model: model, track: track })); }),
+                        React.createElement("div", { style: { display: 'flex' } },
+                            React.createElement("div", { style: { flexShrink: 0, width: treeAreaWidth } },
+                                React.createElement(TreeCanvas, { model: model })),
+                            React.createElement(VerticalResizeHandle, { model: model }),
+                            React.createElement(MSACanvas, { model: model }),
+                            React.createElement(MouseoverCanvas, { model: model }))))),
+            React.createElement(HorizontalResizeHandle, { model: model }))),
+        model.DialogComponent ? (React.createElement(model.DialogComponent, __assign({}, (model.DialogProps || {}), { onClose: function () {
+                model.setDialogComponent(undefined, undefined);
+            } }))) : null,
+        model.annotPos ? (React.createElement(AnnotationDialog, { data: model.annotPos, model: model, onClose: function () { return model.clearAnnotPos(); } })) : null));
 });

package/dist/components/MoreInfoDlg.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 declare const _default: ({ info, onClose }: {
     info: any;
     onClose: () => void;

package/dist/components/MoreInfoDlg.js

@@ -1,20 +1,11 @@
-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 info = _a.info, onClose = _a.onClose;
-    return (_jsxs(Dialog, __assign({ onClose: function () { return onClose(); }, open: true }, { children: [_jsx(DialogTitle, { children: "Metadata" }, void 0),
-            _jsx(DialogContent, { children: _jsx(Attributes, { attributes: info }, void 0) }, void 0)] }), void 0));
+    return (React.createElement(Dialog, { onClose: function () { return onClose(); }, open: true },
+        React.createElement(DialogTitle, null, "Metadata"),
+        React.createElement(DialogContent, null,
+            React.createElement(Attributes, { attributes: info }))));
 });

package/dist/components/ResizeHandles.d.ts

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

package/dist/components/ResizeHandles.js

@@ -1,5 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { observer } from 'mobx-react';
 export var VerticalResizeHandle = observer(function (_a) {
     var model = _a.model;
@@ -46,13 +45,14 @@ export var VerticalResizeHandle = observer(function (_a) {
         }
         return function () { };
     }, [mouseDragging, model]);
-    return (_jsx("div", { children: _jsx("div", { onMouseDown: function () { return setMouseDragging(true); }, style: {
+    return (React.createElement("div", null,
+        React.createElement("div", { onMouseDown: function () { return setMouseDragging(true); }, style: {
                 cursor: 'ew-resize',
                 height: '100%',
                 width: resizeHandleWidth,
                 background: "rgba(200,200,200)",
                 position: 'relative',
-            } }, void 0) }, void 0));
+            } })));
 });
 export var HorizontalResizeHandle = observer(function (_a) {
     var model = _a.model;
@@ -99,11 +99,12 @@ export var HorizontalResizeHandle = observer(function (_a) {
         }
         return function () { };
     }, [mouseDragging, model]);
-    return (_jsx("div", { children: _jsx("div", { onMouseDown: function () { return setMouseDragging(true); }, style: {
+    return (React.createElement("div", null,
+        React.createElement("div", { onMouseDown: function () { return setMouseDragging(true); }, style: {
                 cursor: 'ns-resize',
                 width: '100%',
                 height: resizeHandleWidth,
                 background: "rgba(200,200,200)",
                 position: 'relative',
-            } }, void 0) }, void 0));
+            } })));
 });

package/dist/components/Rubberband.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, useEffect, useState } from 'react';
+import React, { useRef, useEffect, useState } from 'react';
 import { observer } from 'mobx-react';
 // material ui
 import { Popover, Tooltip, Typography, makeStyles, alpha, } from '@material-ui/core';
@@ -61,18 +49,20 @@ var VerticalGuide = observer(function (_a) {
     var model = _a.model, coordX = _a.coordX;
     var treeAreaWidth = model.treeAreaWidth;
     var classes = useStyles();
-    return (_jsxs(_Fragment, { children: [_jsx(Tooltip, __assign({ open: true, placement: "top", title: "" + (model.pxToBp(coordX) + 1), arrow: true }, { children: _jsx("div", { style: {
-                        left: coordX + treeAreaWidth,
-                        position: 'absolute',
-                        height: 1,
-                    } }, void 0) }), void 0),
-            _jsx("div", { className: classes.guide, style: {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Tooltip, { open: true, placement: "top", title: "" + (model.pxToBp(coordX) + 1), arrow: true },
+            React.createElement("div", { style: {
                     left: coordX + treeAreaWidth,
-                    background: 'red',
-                } }, void 0)] }, void 0));
+                    position: 'absolute',
+                    height: 1,
+                } })),
+        React.createElement("div", { className: classes.guide, style: {
+                left: coordX + treeAreaWidth,
+                background: 'red',
+            } })));
 });
 function Rubberband(_a) {
-    var model = _a.model, _b = _a.ControlComponent, ControlComponent = _b === void 0 ? _jsx("div", {}, void 0) : _b;
+    var model = _a.model, _b = _a.ControlComponent, ControlComponent = _b === void 0 ? React.createElement("div", null) : _b;
     var treeAreaWidth = model.treeAreaWidth;
     var _c = useState(), startX = _c[0], setStartX = _c[1];
     var _d = useState(), currentX = _d[0], setCurrentX = _d[1];
@@ -151,8 +141,9 @@ function Rubberband(_a) {
         handleClose();
     }
     if (startX === undefined) {
-        return (_jsxs(_Fragment, { children: [guideX !== undefined ? (_jsx(VerticalGuide, { model: model, coordX: guideX }, void 0)) : null,
-                _jsx("div", __assign({ "data-testid": "rubberband_controls", className: classes.rubberbandControl, role: "presentation", ref: controlsRef, onMouseDown: mouseDown, onMouseOut: mouseOut, onMouseMove: mouseMove }, { children: ControlComponent }), void 0)] }, void 0));
+        return (React.createElement(React.Fragment, null,
+            guideX !== undefined ? (React.createElement(VerticalGuide, { model: model, coordX: guideX })) : null,
+            React.createElement("div", { "data-testid": "rubberband_controls", className: classes.rubberbandControl, role: "presentation", ref: controlsRef, onMouseDown: mouseDown, onMouseOut: mouseOut, onMouseMove: mouseMove }, ControlComponent)));
     }
     var right = anchorPosition ? anchorPosition.offsetX : currentX || 0;
     var left = right < startX ? right : startX;
@@ -170,29 +161,36 @@ function Rubberband(_a) {
             },
         },
     ];
-    return (_jsxs(_Fragment, { children: [rubberbandRef.current ? (_jsxs(_Fragment, { children: [_jsx(Popover, __assign({ className: classes.popover, classes: {
-                            paper: classes.paper,
-                        }, open: true, anchorEl: rubberbandRef.current, anchorOrigin: {
-                            vertical: 'top',
-                            horizontal: 'left',
-                        }, transformOrigin: {
-                            vertical: 'bottom',
-                            horizontal: 'right',
-                        }, keepMounted: true, disableRestoreFocus: true }, { children: _jsx(Typography, { children: leftBpOffset + 1 }, void 0) }), void 0),
-                    _jsx(Popover, __assign({ className: classes.popover, classes: {
-                            paper: classes.paper,
-                        }, open: true, anchorEl: rubberbandRef.current, anchorOrigin: {
-                            vertical: 'top',
-                            horizontal: 'right',
-                        }, transformOrigin: {
-                            vertical: 'bottom',
-                            horizontal: 'left',
-                        }, keepMounted: true, disableRestoreFocus: true }, { children: _jsx(Typography, { children: rightBpOffset + 1 }, void 0) }), void 0)] }, void 0)) : null,
-            _jsx("div", __assign({ ref: rubberbandRef, className: classes.rubberband, style: { left: left + treeAreaWidth, width: width } }, { children: _jsxs(Typography, __assign({ variant: "h6", className: classes.rubberbandText }, { children: [numOfBpSelected.toLocaleString('en-US'), " bp"] }), void 0) }), void 0),
-            _jsx("div", __assign({ "data-testid": "rubberband_controls", className: classes.rubberbandControl, role: "presentation", ref: controlsRef, onMouseDown: mouseDown, onMouseOut: mouseOut, onMouseMove: mouseMove }, { children: ControlComponent }), void 0),
-            anchorPosition ? (_jsx(Menu, { anchorReference: "anchorPosition", anchorPosition: {
-                    left: anchorPosition.clientX,
-                    top: anchorPosition.clientY,
-                }, onMenuItemClick: handleMenuItemClick, open: Boolean(anchorPosition), onClose: handleClose, menuItems: menuItems }, void 0)) : null] }, void 0));
+    return (React.createElement(React.Fragment, null,
+        rubberbandRef.current ? (React.createElement(React.Fragment, null,
+            React.createElement(Popover, { className: classes.popover, classes: {
+                    paper: classes.paper,
+                }, open: true, anchorEl: rubberbandRef.current, anchorOrigin: {
+                    vertical: 'top',
+                    horizontal: 'left',
+                }, transformOrigin: {
+                    vertical: 'bottom',
+                    horizontal: 'right',
+                }, keepMounted: true, disableRestoreFocus: true },
+                React.createElement(Typography, null, leftBpOffset + 1)),
+            React.createElement(Popover, { className: classes.popover, classes: {
+                    paper: classes.paper,
+                }, open: true, anchorEl: rubberbandRef.current, anchorOrigin: {
+                    vertical: 'top',
+                    horizontal: 'right',
+                }, transformOrigin: {
+                    vertical: 'bottom',
+                    horizontal: 'left',
+                }, keepMounted: true, disableRestoreFocus: true },
+                React.createElement(Typography, null, rightBpOffset + 1)))) : null,
+        React.createElement("div", { ref: rubberbandRef, className: classes.rubberband, style: { left: left + treeAreaWidth, width: width } },
+            React.createElement(Typography, { variant: "h6", className: classes.rubberbandText },
+                numOfBpSelected.toLocaleString('en-US'),
+                " bp")),
+        React.createElement("div", { "data-testid": "rubberband_controls", className: classes.rubberbandControl, role: "presentation", ref: controlsRef, onMouseDown: mouseDown, onMouseOut: mouseOut, onMouseMove: mouseMove }, ControlComponent),
+        anchorPosition ? (React.createElement(Menu, { anchorReference: "anchorPosition", anchorPosition: {
+                left: anchorPosition.clientX,
+                top: anchorPosition.clientY,
+            }, onMenuItemClick: handleMenuItemClick, open: Boolean(anchorPosition), onClose: handleClose, menuItems: menuItems })) : null));
 }
 export default observer(Rubberband);

package/dist/components/Ruler.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { MsaViewModel } from '../model';
 /**
  * Given a scale ( bp/px ) and minimum distances (px) between major and minor

package/dist/components/Ruler.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 } from 'react';
+import React, { useRef } from 'react';
 import { makeStyles } from '@material-ui/core';
 import { observer } from 'mobx-react';
 /**
@@ -97,34 +85,37 @@ function RulerBlock(_a) {
     var start = _a.start, end = _a.end, bpPerPx = _a.bpPerPx, reversed = _a.reversed, major = _a.major, minor = _a.minor;
     var classes = useStyles();
     var ticks = makeTicks(start, end, bpPerPx, major, minor);
-    return (_jsxs(_Fragment, { children: [ticks.map(function (tick) {
-                var x = (reversed ? end - tick.base : tick.base - start) / bpPerPx;
-                return (_jsx("line", { x1: x, x2: x, y1: 11, y2: tick.type === 'major' ? 11 + 6 : 11 + 4, strokeWidth: 1, stroke: tick.type === 'major' ? '#555' : '#999', className: tick.type === 'major' ? classes.majorTick : classes.minorTick, "data-bp": tick.base }, tick.base));
-            }),
-            ticks
-                .filter(function (tick) { return tick.type === 'major'; })
-                .map(function (tick) {
-                var x = (reversed ? end - tick.base : tick.base - start) / bpPerPx;
-                return (_jsx("text", __assign({ x: x, y: 10, textAnchor: "middle", style: { fontSize: '11px' }, className: classes.majorTickLabel }, { children: mathPower(tick.base + 1) }), "label-" + tick.base));
-            })] }, void 0));
+    return (React.createElement(React.Fragment, null,
+        ticks.map(function (tick) {
+            var x = (reversed ? end - tick.base : tick.base - start) / bpPerPx;
+            return (React.createElement("line", { key: tick.base, x1: x, x2: x, y1: 11, y2: tick.type === 'major' ? 11 + 6 : 11 + 4, strokeWidth: 1, stroke: tick.type === 'major' ? '#555' : '#999', className: tick.type === 'major' ? classes.majorTick : classes.minorTick, "data-bp": tick.base }));
+        }),
+        ticks
+            .filter(function (tick) { return tick.type === 'major'; })
+            .map(function (tick) {
+            var x = (reversed ? end - tick.base : tick.base - start) / bpPerPx;
+            return (React.createElement("text", { x: x, y: 10, key: "label-" + tick.base, textAnchor: "middle", style: { fontSize: '11px' }, className: classes.majorTickLabel }, mathPower(tick.base + 1)));
+        })));
 }
 var Ruler = observer(function (_a) {
     var model = _a.model;
     var MSA = model.MSA, colWidth = model.colWidth, msaAreaWidth = model.msaAreaWidth, resizeHandleWidth = model.resizeHandleWidth, scrollX = model.scrollX, blocksX = model.blocksX, blockSize = model.blockSize;
     var ref = useRef(null);
     var offsetX = blocksX[0];
-    return !MSA ? null : (_jsx("div", __assign({ ref: ref, style: {
+    return !MSA ? null : (React.createElement("div", { ref: ref, style: {
             position: 'relative',
             width: msaAreaWidth,
             cursor: 'crosshair',
             overflow: 'hidden',
             height: 20,
             background: '#ccc',
-        } }, { children: _jsx("svg", __assign({ style: {
+        } },
+        React.createElement("svg", { style: {
                 width: blocksX.length * blockSize,
                 position: 'absolute',
                 left: scrollX + offsetX + resizeHandleWidth,
                 pointerEvents: 'none',
-            } }, { children: _jsx(RulerBlock, { start: offsetX / colWidth, end: offsetX / colWidth + (blockSize * blocksX.length) / colWidth, bpPerPx: 1 / colWidth }, offsetX) }), void 0) }), void 0));
+            } },
+            React.createElement(RulerBlock, { key: offsetX, start: offsetX / colWidth, end: offsetX / colWidth + (blockSize * blocksX.length) / colWidth, bpPerPx: 1 / colWidth }))));
 });
 export default Ruler;

package/dist/components/SettingsDlg.d.ts

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