react-msaview 1.2.7 → 1.2.11

package/dist/components/SettingsDlg.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 { observer } from 'mobx-react';
 import { Button, Checkbox, Dialog, DialogActions, DialogTitle, DialogContent, FormControlLabel, MenuItem, TextField, } from '@material-ui/core';
 import colorSchemes from '../colorSchemes';
@@ -26,24 +14,27 @@ export default observer(function (_a) {
     var rowHeightError = error(rowHeight);
     var colWidthError = error(colWidth);
     var treeWidthError = error(treeWidth);
-    return (_jsxs(Dialog, __assign({ onClose: function () { return onClose(); }, open: open }, { children: [_jsx(DialogTitle, { children: "Settings" }, void 0),
-            _jsxs(DialogContent, { children: [_jsx(FormControlLabel, { control: _jsx(Checkbox, { checked: model.showBranchLen, onChange: function () { return model.toggleBranchLen(); } }, void 0), label: "Show branch length" }, void 0),
-                    _jsx(FormControlLabel, { control: _jsx(Checkbox, { checked: model.bgColor, onChange: function () { return model.toggleBgColor(); } }, void 0), label: "Color background" }, void 0),
-                    _jsx(FormControlLabel, { control: _jsx(Checkbox, { checked: model.drawNodeBubbles, onChange: function () { return model.toggleNodeBubbles(); } }, void 0), label: "Draw node bubbles" }, void 0),
-                    _jsx(FormControlLabel, { control: _jsx(Checkbox, { checked: model.drawTree, onChange: function () { return model.toggleDrawTree(); } }, void 0), label: "Draw tree (if available)" }, void 0),
-                    _jsx(FormControlLabel, { control: _jsx(Checkbox, { checked: model.labelsAlignRight, onChange: function () { return model.toggleLabelsAlignRight(); } }, void 0), label: "Labels align right (note: labels may draw over tree, but can adjust tree width or tree area width in UI)" }, void 0),
-                    _jsx(TextField, { label: "Row height (px)", value: rowHeight, error: rowHeightError, onChange: function (event) { return setRowHeight(event.target.value); } }, void 0),
-                    _jsx(TextField, { label: "Column width (px)", value: colWidth, error: colWidthError, onChange: function (event) { return setColWidth(event.target.value); } }, void 0),
-                    _jsx("br", {}, void 0),
-                    !noTree ? (_jsx(TextField, { label: "Tree width (px)", value: treeWidth, error: treeWidthError, onChange: function (event) { return setTreeWidth(event.target.value); } }, void 0)) : null,
-                    _jsx("br", {}, void 0),
-                    _jsx(TextField, __assign({ select: true, label: "Color scheme", value: colorSchemeName, onChange: function (event) { return model.setColorSchemeName(event.target.value); } }, { children: Object.keys(colorSchemes).map(function (option) { return (_jsx(MenuItem, __assign({ value: option }, { children: option }), option)); }) }), void 0),
-                    _jsx(DialogActions, { children: _jsx(Button, __assign({ disabled: rowHeightError || colWidthError || treeWidthError, onClick: function () {
-                                model.setRowHeight(+rowHeight);
-                                model.setColWidth(+colWidth);
-                                if (!noTree) {
-                                    model.setTreeWidth(+treeWidth);
-                                }
-                                onClose();
-                            }, variant: "contained", color: "primary" }, { children: "Submit" }), void 0) }, void 0)] }, void 0)] }), void 0));
+    return (React.createElement(Dialog, { onClose: function () { return onClose(); }, open: open },
+        React.createElement(DialogTitle, null, "Settings"),
+        React.createElement(DialogContent, null,
+            React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { checked: model.showBranchLen, onChange: function () { return model.toggleBranchLen(); } }), label: "Show branch length" }),
+            React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { checked: model.bgColor, onChange: function () { return model.toggleBgColor(); } }), label: "Color background" }),
+            React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { checked: model.drawNodeBubbles, onChange: function () { return model.toggleNodeBubbles(); } }), label: "Draw node bubbles" }),
+            React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { checked: model.drawTree, onChange: function () { return model.toggleDrawTree(); } }), label: "Draw tree (if available)" }),
+            React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { checked: model.labelsAlignRight, onChange: function () { return model.toggleLabelsAlignRight(); } }), label: "Labels align right (note: labels may draw over tree, but can adjust tree width or tree area width in UI)" }),
+            React.createElement(TextField, { label: "Row height (px)", value: rowHeight, error: rowHeightError, onChange: function (event) { return setRowHeight(event.target.value); } }),
+            React.createElement(TextField, { label: "Column width (px)", value: colWidth, error: colWidthError, onChange: function (event) { return setColWidth(event.target.value); } }),
+            React.createElement("br", null),
+            !noTree ? (React.createElement(TextField, { label: "Tree width (px)", value: treeWidth, error: treeWidthError, onChange: function (event) { return setTreeWidth(event.target.value); } })) : null,
+            React.createElement("br", null),
+            React.createElement(TextField, { select: true, label: "Color scheme", value: colorSchemeName, onChange: function (event) { return model.setColorSchemeName(event.target.value); } }, Object.keys(colorSchemes).map(function (option) { return (React.createElement(MenuItem, { key: option, value: option }, option)); })),
+            React.createElement(DialogActions, null,
+                React.createElement(Button, { disabled: rowHeightError || colWidthError || treeWidthError, onClick: function () {
+                        model.setRowHeight(+rowHeight);
+                        model.setColWidth(+colWidth);
+                        if (!noTree) {
+                            model.setTreeWidth(+treeWidth);
+                        }
+                        onClose();
+                    }, variant: "contained", color: "primary" }, "Submit")))));
 });

package/dist/components/TextTrack.d.ts

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

package/dist/components/TextTrack.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 } from "react/jsx-runtime";
-import { useRef, useMemo, useEffect } from 'react';
+import React, { useRef, useMemo, useEffect } from 'react';
 import { useTheme } from '@material-ui/core';
 import { observer } from 'mobx-react';
 import { colorContrast } from '../util';
@@ -64,21 +52,21 @@ var AnnotationBlock = observer(function (_a) {
         highResScaleFactor,
         data,
     ]);
-    return (_jsx("canvas", { ref: ref, height: rowHeight * highResScaleFactor, width: blockSize * highResScaleFactor, style: {
+    return (React.createElement("canvas", { ref: ref, height: rowHeight * highResScaleFactor, width: blockSize * highResScaleFactor, style: {
             position: 'absolute',
             left: scrollX + offsetX,
             width: blockSize,
             height: rowHeight,
-        } }, void 0));
+        } }));
 });
 var AnnotationTrack = observer(function (_a) {
     var track = _a.track, model = _a.model;
     var blocksX = model.blocksX, msaAreaWidth = model.msaAreaWidth, rowHeight = model.rowHeight;
-    return (_jsx("div", __assign({ style: {
+    return (React.createElement("div", { style: {
             position: 'relative',
             height: rowHeight,
             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, { key: bx, track: track, model: model, offsetX: bx })); })));
 });
 export default AnnotationTrack;

package/dist/components/Track.d.ts

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

package/dist/components/Track.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, useRef, useEffect } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import normalizeWheel from 'normalize-wheel';
 import { observer } from 'mobx-react';
 import { IconButton, Menu, MenuItem, makeStyles } from '@material-ui/core';
@@ -29,27 +17,30 @@ export var TrackLabel = observer(function (_a) {
     var height = track.height, name = track.model.name;
     var classes = useStyles();
     var trackLabelHeight = Math.max(8, rowHeight - 8);
-    return (_jsxs("div", __assign({ style: {
+    return (React.createElement("div", { style: {
             width: width,
             height: height,
             flexShrink: 0,
             textAlign: 'right',
             fontSize: trackLabelHeight,
-        } }, { children: [name,
-            _jsx(IconButton, __assign({ className: classes.button, style: { width: trackLabelHeight, height: trackLabelHeight }, onClick: function (event) {
-                    setAnchorEl(event.target);
-                } }, { children: _jsx(ArrowDropDownIcon, {}, void 0) }), void 0),
-            anchorEl ? (_jsxs(Menu, __assign({ anchorEl: anchorEl, transitionDuration: 0, open: true, onClose: function () {
+        } },
+        name,
+        React.createElement(IconButton, { className: classes.button, style: { width: trackLabelHeight, height: trackLabelHeight }, onClick: function (event) {
+                setAnchorEl(event.target);
+            } },
+            React.createElement(ArrowDropDownIcon, null)),
+        anchorEl ? (React.createElement(Menu, { anchorEl: anchorEl, transitionDuration: 0, open: true, onClose: function () {
+                setAnchorEl(undefined);
+            } },
+            React.createElement(MenuItem, { dense: true, onClick: function () {
+                    model.toggleTrack(track.model.id);
+                    setAnchorEl(undefined);
+                } }, "Close"),
+            React.createElement(MenuItem, { dense: true, onClick: function () {
+                    setTrackInfoDlgOpen(true);
                     setAnchorEl(undefined);
-                } }, { children: [_jsx(MenuItem, __assign({ dense: true, onClick: function () {
-                            model.toggleTrack(track.model.id);
-                            setAnchorEl(undefined);
-                        } }, { children: "Close" }), void 0),
-                    _jsx(MenuItem, __assign({ dense: true, onClick: function () {
-                            setTrackInfoDlgOpen(true);
-                            setAnchorEl(undefined);
-                        } }, { children: "Get info" }), void 0)] }), void 0)) : null,
-            trackInfoDlgOpen ? (_jsx(TrackInfoDialog, { model: track.model, onClose: function () { return setTrackInfoDlgOpen(false); } }, void 0)) : null] }), void 0));
+                } }, "Get info"))) : null,
+        trackInfoDlgOpen ? (React.createElement(TrackInfoDialog, { model: track.model, onClose: function () { return setTrackInfoDlgOpen(false); } })) : null));
 });
 var Track = observer(function (_a) {
     var model = _a.model, track = _a.track;
@@ -81,8 +72,10 @@ var Track = observer(function (_a) {
             curr.removeEventListener('wheel', onWheel);
         };
     }, [model]);
-    return (_jsxs("div", __assign({ style: { display: 'flex', height: height } }, { children: [_jsx(TrackLabel, { model: model, track: track }, void 0),
-            _jsx("div", { style: { width: resizeHandleWidth, flexShrink: 0 } }, void 0),
-            _jsx("div", __assign({ ref: ref }, { children: _jsx(track.ReactComponent, { model: model, track: track }, void 0) }), void 0)] }), track.id));
+    return (React.createElement("div", { key: track.id, style: { display: 'flex', height: height } },
+        React.createElement(TrackLabel, { model: model, track: track }),
+        React.createElement("div", { style: { width: resizeHandleWidth, flexShrink: 0 } }),
+        React.createElement("div", { ref: ref },
+            React.createElement(track.ReactComponent, { model: model, track: track }))));
 });
 export default Track;

package/dist/components/TrackInfoDlg.d.ts

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

package/dist/components/TrackInfoDlg.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 copy from 'copy-to-clipboard';
 import { observer } from 'mobx-react';
 import { Button, Dialog, DialogActions, DialogTitle, DialogContent, makeStyles, } from '@material-ui/core';
@@ -26,15 +14,20 @@ var TrackInfoDialog = observer(function (_a) {
     var model = _a.model, onClose = _a.onClose;
     var _b = useState('Copy to clipboard'), label = _b[0], setLabel = _b[1];
     var classes = useStyles();
-    return (_jsxs(Dialog, __assign({ open: true, onClose: onClose, fullWidth: true, maxWidth: "lg" }, { children: [_jsxs(DialogTitle, { children: ["Track info - ", model.name] }, void 0),
-            _jsxs(DialogContent, { children: [_jsx(Button, __assign({ variant: "contained", color: "primary", onClick: function () {
-                            copy(model.data);
-                            setLabel('Copied!');
-                            setTimeout(function () {
-                                setLabel('Copy to clipboard');
-                            }, 300);
-                        } }, { children: label }), void 0),
-                    _jsx("pre", __assign({ className: classes.textArea }, { children: model.data }), void 0)] }, void 0),
-            _jsx(DialogActions, { children: _jsx(Button, __assign({ variant: "contained", onClick: onClose, color: "secondary" }, { children: "Close" }), void 0) }, void 0)] }), void 0));
+    return (React.createElement(Dialog, { open: true, onClose: onClose, fullWidth: true, maxWidth: "lg" },
+        React.createElement(DialogTitle, null,
+            "Track info - ",
+            model.name),
+        React.createElement(DialogContent, null,
+            React.createElement(Button, { variant: "contained", color: "primary", onClick: function () {
+                    copy(model.data);
+                    setLabel('Copied!');
+                    setTimeout(function () {
+                        setLabel('Copy to clipboard');
+                    }, 300);
+                } }, label),
+            React.createElement("pre", { className: classes.textArea }, model.data)),
+        React.createElement(DialogActions, null,
+            React.createElement(Button, { variant: "contained", onClick: onClose, color: "secondary" }, "Close"))));
 });
 export default TrackInfoDialog;

package/dist/components/TracklistDlg.d.ts

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

package/dist/components/TracklistDlg.js

@@ -1,26 +1,18 @@
-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, FormControlLabel, FormGroup, Checkbox, DialogActions, Button, Typography, } from '@material-ui/core';
 import { observer } from 'mobx-react';
 export default observer(function (_a) {
     var model = _a.model, onClose = _a.onClose, open = _a.open;
     var tracks = model.tracks;
-    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(FormGroup, { children: tracks.map(function (track) {
-                            return (_jsx(FormControlLabel, { control: _jsx(Checkbox, { checked: !model.turnedOffTracks.has(track.model.id), onChange: function () {
-                                        model.toggleTrack(track.model.id);
-                                    } }, void 0), label: track.model.name }, track.model.id));
-                        }) }, void 0),
-                    _jsx(DialogActions, { children: _jsx(Button, __assign({ onClick: function () { return onClose(); }, variant: "contained", color: "primary" }, { children: "Close" }), 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(FormGroup, null, tracks.map(function (track) {
+                return (React.createElement(FormControlLabel, { key: track.model.id, control: React.createElement(Checkbox, { checked: !model.turnedOffTracks.has(track.model.id), onChange: function () {
+                            model.toggleTrack(track.model.id);
+                        } }), label: track.model.name }));
+            })),
+            React.createElement(DialogActions, null,
+                React.createElement(Button, { onClick: function () { return onClose(); }, variant: "contained", color: "primary" }, "Close")))));
 });

package/dist/components/TreeCanvas.d.ts

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

package/dist/components/TreeCanvas.js

@@ -9,8 +9,7 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { Menu, MenuItem } from '@material-ui/core';
 import normalizeWheel from 'normalize-wheel';
 import { observer } from 'mobx-react';
@@ -25,56 +24,68 @@ var TreeMenu = observer(function (_a) {
     var node = _a.node, onClose = _a.onClose, model = _a.model;
     var structures = model.structures;
     var nodeDetails = node ? model.getRowDetails(node.name) : undefined;
-    return (_jsx(_Fragment, { children: _jsxs(Menu, __assign({ anchorReference: "anchorPosition", anchorPosition: {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Menu, { anchorReference: "anchorPosition", anchorPosition: {
                 top: node.y,
                 left: node.x,
-            }, transitionDuration: 0, keepMounted: true, open: Boolean(node), onClose: onClose }, { children: [_jsx(MenuItem, __assign({ dense: true, disabled: true }, { children: node.name }), void 0),
-                _jsx(MenuItem, __assign({ dense: true, onClick: function () {
-                        model.setDialogComponent(MoreInfoDlg, {
-                            info: model.getRowDetails(node.name),
+            }, transitionDuration: 0, keepMounted: true, open: Boolean(node), onClose: onClose },
+            React.createElement(MenuItem, { dense: true, disabled: true }, node.name),
+            React.createElement(MenuItem, { dense: true, onClick: function () {
+                    model.setDialogComponent(MoreInfoDlg, {
+                        info: model.getRowDetails(node.name),
+                    });
+                    onClose();
+                } }, "More info..."), (_b = structures[node.name]) === null || _b === void 0 ? void 0 :
+            _b.map(function (entry) {
+                return !model.selectedStructures.find(function (n) { return n.id === node.name; }) ? (React.createElement(MenuItem, { key: JSON.stringify(entry), dense: true, onClick: function () {
+                        model.addStructureToSelection({
+                            structure: entry,
+                            id: node.name,
                         });
                         onClose();
-                    } }, { children: "More info..." }), void 0),
-                (_b = structures[node.name]) === null || _b === void 0 ? void 0 : _b.map(function (entry) {
-                    return !model.selectedStructures.find(function (n) { return n.id === node.name; }) ? (_jsxs(MenuItem, __assign({ dense: true, onClick: function () {
-                            model.addStructureToSelection({
-                                structure: entry,
-                                id: node.name,
-                            });
-                            onClose();
-                        } }, { children: ["Add PDB to selection (", entry.pdb, ")"] }), JSON.stringify(entry))) : (_jsxs(MenuItem, __assign({ dense: true, onClick: function () {
-                            model.removeStructureFromSelection({
-                                structure: entry,
-                                id: node.name,
-                            });
-                            onClose();
-                        } }, { children: ["Remove PDB from selection (", entry.pdb, ")"] }), JSON.stringify(entry)));
-                }),
-                (_c = nodeDetails.accession) === null || _c === void 0 ? void 0 : _c.map(function (accession) { return (_jsxs(MenuItem, __assign({ dense: true, onClick: function () {
-                        model.addUniprotTrack({ name: nodeDetails.name, accession: accession });
+                    } },
+                    "Add PDB to selection (",
+                    entry.pdb,
+                    ")")) : (React.createElement(MenuItem, { key: JSON.stringify(entry), dense: true, onClick: function () {
+                        model.removeStructureFromSelection({
+                            structure: entry,
+                            id: node.name,
+                        });
                         onClose();
-                    } }, { children: ["Open UniProt track (", accession, ")"] }), accession)); })] }), void 0) }, void 0));
+                    } },
+                    "Remove PDB from selection (",
+                    entry.pdb,
+                    ")"));
+            }), (_c = nodeDetails.accession) === null || _c === void 0 ? void 0 :
+            _c.map(function (accession) { return (React.createElement(MenuItem, { dense: true, key: accession, onClick: function () {
+                    model.addUniprotTrack({ name: nodeDetails.name, accession: accession });
+                    onClose();
+                } },
+                "Open UniProt track (",
+                accession,
+                ")")); }))));
 });
 var TreeBranchMenu = observer(function (_a) {
     var node = _a.node, model = _a.model, onClose = _a.onClose;
-    return (_jsxs(Menu, __assign({ anchorReference: "anchorPosition", anchorPosition: {
+    return (React.createElement(Menu, { anchorReference: "anchorPosition", anchorPosition: {
             left: node.x,
             top: node.y,
-        }, transitionDuration: 0, keepMounted: true, open: Boolean(node), onClose: onClose }, { children: [_jsx(MenuItem, __assign({ dense: true, disabled: true }, { children: node.name }), void 0),
-            _jsx(MenuItem, __assign({ dense: true, onClick: function () {
-                    model.toggleCollapsed(node.id);
-                    onClose();
-                } }, { children: model.collapsed.includes(node.id)
-                    ? 'Expand this node'
-                    : 'Collapse this node' }), void 0),
-            _jsx(MenuItem, __assign({ dense: true, onClick: function () {
-                    model.showOnly === node.id
-                        ? model.setShowOnly(undefined)
-                        : model.setShowOnly(node.id);
-                    onClose();
-                } }, { children: model.showOnly === node.id
-                    ? 'Disable show only this node'
-                    : 'Show only this node' }), void 0)] }), void 0));
+        }, transitionDuration: 0, keepMounted: true, open: Boolean(node), onClose: onClose },
+        React.createElement(MenuItem, { dense: true, disabled: true }, node.name),
+        React.createElement(MenuItem, { dense: true, onClick: function () {
+                model.toggleCollapsed(node.id);
+                onClose();
+            } }, model.collapsed.includes(node.id)
+            ? 'Expand this node'
+            : 'Collapse this node'),
+        React.createElement(MenuItem, { dense: true, onClick: function () {
+                model.showOnly === node.id
+                    ? model.setShowOnly(undefined)
+                    : model.setShowOnly(node.id);
+                onClose();
+            } }, model.showOnly === node.id
+            ? 'Disable show only this node'
+            : 'Show only this node')));
 });
 var TreeBlock = observer(function (_a) {
     var model = _a.model, offsetY = _a.offsetY;
@@ -281,46 +292,47 @@ var TreeBlock = observer(function (_a) {
         return entry && !entry.branch
             ? __assign(__assign({}, entry), { x: event.clientX, y: event.clientY }) : undefined;
     }
-    return (_jsxs(_Fragment, { children: [(branchMenu === null || branchMenu === void 0 ? void 0 : branchMenu.id) ? (_jsx(TreeBranchMenu, { node: branchMenu, model: model, onClose: function () { return setBranchMenu(undefined); } }, void 0)) : null,
-            (toggleNodeMenu === null || toggleNodeMenu === void 0 ? void 0 : toggleNodeMenu.id) ? (_jsx(TreeMenu, { node: toggleNodeMenu, model: model, onClose: function () { return setToggleNodeMenu(undefined); } }, void 0)) : null,
-            _jsx("canvas", { width: (treeWidth + padding) * highResScaleFactor, height: blockSize * highResScaleFactor, style: {
-                    width: treeWidth + padding,
-                    height: blockSize,
-                    top: scrollY + offsetY,
-                    left: 0,
-                    position: 'absolute',
-                }, onMouseMove: function (event) {
-                    if (!ref.current) {
-                        return;
-                    }
-                    var ret = hoverNameClickMap(event) || hoverBranchClickMap(event);
-                    if (ret) {
-                        ref.current.style.cursor = 'pointer';
-                    }
-                    else {
-                        ref.current.style.cursor = 'default';
-                    }
-                    setHoverElt(hoverNameClickMap(event));
-                }, onClick: function (event) {
-                    var x = event.clientX, y = event.clientY;
-                    var data = hoverBranchClickMap(event);
-                    if (data === null || data === void 0 ? void 0 : data.id) {
-                        setBranchMenu(__assign(__assign({}, data), { x: x, y: y }));
-                    }
-                    var data2 = hoverNameClickMap(event);
-                    if (data2 === null || data2 === void 0 ? void 0 : data2.id) {
-                        setToggleNodeMenu(__assign(__assign({}, data2), { x: x, y: y }));
-                    }
-                }, ref: ref }, void 0),
-            _jsx("canvas", { style: {
-                    width: treeWidth + padding,
-                    height: blockSize,
-                    top: scrollY + offsetY,
-                    left: 0,
-                    position: 'absolute',
-                    pointerEvents: 'none',
-                    zIndex: 100,
-                }, width: treeWidth + padding, height: blockSize, ref: mouseoverRef }, void 0)] }, void 0));
+    return (React.createElement(React.Fragment, null,
+        (branchMenu === null || branchMenu === void 0 ? void 0 : branchMenu.id) ? (React.createElement(TreeBranchMenu, { node: branchMenu, model: model, onClose: function () { return setBranchMenu(undefined); } })) : null,
+        (toggleNodeMenu === null || toggleNodeMenu === void 0 ? void 0 : toggleNodeMenu.id) ? (React.createElement(TreeMenu, { node: toggleNodeMenu, model: model, onClose: function () { return setToggleNodeMenu(undefined); } })) : null,
+        React.createElement("canvas", { width: (treeWidth + padding) * highResScaleFactor, height: blockSize * highResScaleFactor, style: {
+                width: treeWidth + padding,
+                height: blockSize,
+                top: scrollY + offsetY,
+                left: 0,
+                position: 'absolute',
+            }, onMouseMove: function (event) {
+                if (!ref.current) {
+                    return;
+                }
+                var ret = hoverNameClickMap(event) || hoverBranchClickMap(event);
+                if (ret) {
+                    ref.current.style.cursor = 'pointer';
+                }
+                else {
+                    ref.current.style.cursor = 'default';
+                }
+                setHoverElt(hoverNameClickMap(event));
+            }, onClick: function (event) {
+                var x = event.clientX, y = event.clientY;
+                var data = hoverBranchClickMap(event);
+                if (data === null || data === void 0 ? void 0 : data.id) {
+                    setBranchMenu(__assign(__assign({}, data), { x: x, y: y }));
+                }
+                var data2 = hoverNameClickMap(event);
+                if (data2 === null || data2 === void 0 ? void 0 : data2.id) {
+                    setToggleNodeMenu(__assign(__assign({}, data2), { x: x, y: y }));
+                }
+            }, ref: ref }),
+        React.createElement("canvas", { style: {
+                width: treeWidth + padding,
+                height: blockSize,
+                top: scrollY + offsetY,
+                left: 0,
+                position: 'absolute',
+                pointerEvents: 'none',
+                zIndex: 100,
+            }, width: treeWidth + padding, height: blockSize, ref: mouseoverRef })));
 });
 var TreeCanvas = observer(function (_a) {
     var model = _a.model;
@@ -409,11 +421,11 @@ var TreeCanvas = observer(function (_a) {
     function mouseLeave(event) {
         event.preventDefault();
     }
-    return (_jsx("div", __assign({ ref: ref, onMouseDown: mouseDown, onMouseUp: mouseUp, onMouseLeave: mouseLeave, style: {
+    return (React.createElement("div", { ref: ref, onMouseDown: mouseDown, onMouseUp: mouseUp, onMouseLeave: mouseLeave, style: {
             height: height,
             position: 'relative',
             overflow: 'hidden',
             width: treeWidth + padding,
-        } }, { children: blocksY.map(function (block) { return (_jsx(TreeBlock, { model: model, offsetY: block }, block)); }) }), void 0));
+        } }, blocksY.map(function (block) { return (React.createElement(TreeBlock, { key: block, model: model, offsetY: block })); })));
 });
 export default TreeCanvas;

package/dist/components/TreeRuler.d.ts

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

package/dist/components/TreeRuler.js

@@ -1,8 +1,8 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
 import { observer } from 'mobx-react';
 var TreeRuler = observer(function (_a) {
     var model = _a.model;
     var treeWidth = model.treeWidth;
-    return _jsx("div", { style: { width: treeWidth } }, void 0);
+    return React.createElement("div", { style: { width: treeWidth } });
 });
 export default TreeRuler;

package/dist/components/package.json

@@ -1,5 +1,5 @@
 {
-    "version": "1.2.6",
+    "version": "1.2.10",
     "license": "MIT",
     "main": "dist/index.js",
     "typings": "dist/index.d.ts",
@@ -18,6 +18,7 @@
         "build": "yarn tsc",
         "size": "size-limit",
         "analyze": "size-limit --why",
+        "preversion": "npm run build",
         "postversion": "git push --follow-tags"
     },
     "peerDependencies": {
@@ -28,33 +29,20 @@
     },
     "name": "react-msaview",
     "author": "Colin",
-    "module": "dist/react-msaview.esm.js",
-    "size-limit": [
-        {
-            "path": "dist/react-msaview.cjs.production.min.js",
-            "limit": "10 KB"
-        },
-        {
-            "path": "dist/react-msaview.esm.js",
-            "limit": "10 KB"
-        }
-    ],
     "devDependencies": {
-        "@size-limit/preset-small-lib": "^4.10.1",
         "@types/color": "^3.0.1",
         "@types/d3": "^6.7.0",
+        "@types/lodash": "^4.14.170",
         "@types/react": "^17.0.3",
         "@types/react-dom": "^17.0.2",
+        "concurrently": "^6.2.0",
         "eslint-config-react-app": "^6.0.0",
-        "husky": "^5.1.3",
         "react": "^17.0.1",
         "react-dom": "^17.0.1",
-        "size-limit": "^4.10.1",
         "tslib": "^2.1.0",
         "typescript": "^4.2.3"
     },
     "dependencies": {
-        "@gmod/gff": "^1.1.2",
         "clustal-js": "^1.0.3",
         "color": "^3.1.3",
         "copy-to-clipboard": "^3.3.1",