react-msaview 1.3.2 → 2.1.0

package/dist/components/Header.js

@@ -1,19 +1,20 @@
-import React, { useState } from 'react';
-import { IconButton, Select, Typography } from '@material-ui/core';
+import React, { Suspense, lazy, useState } from 'react';
+import { IconButton, Typography } from '@mui/material';
 import { observer } from 'mobx-react';
-import SettingsDialog from './SettingsDlg';
-import AboutDialog from './AboutDlg';
-import DetailsDialog from './DetailsDlg';
-import TracklistDialog from './TracklistDlg';
-//icons
-import FolderOpenIcon from '@material-ui/icons/FolderOpen';
-import SettingsIcon from '@material-ui/icons/Settings';
-import HelpIcon from '@material-ui/icons/Help';
-import AssignmentIcon from '@material-ui/icons/Assignment';
-import ListIcon from '@material-ui/icons/List';
-var InfoArea = observer(function (_a) {
-    var model = _a.model;
-    var mouseOverRowName = model.mouseOverRowName, mouseCol = model.mouseCol;
+// icons
+import FolderOpen from '@mui/icons-material/FolderOpen';
+import Settings from '@mui/icons-material/Settings';
+import Help from '@mui/icons-material/Help';
+import Assignment from '@mui/icons-material/Assignment';
+import List from '@mui/icons-material/List';
+import ZoomControls from './ZoomControls';
+import MultiAlignmentSelector from './MultiAlignmentSelector';
+const SettingsDialog = lazy(() => import('./dialogs/SettingsDlg'));
+const AboutDialog = lazy(() => import('./dialogs/AboutDlg'));
+const DetailsDialog = lazy(() => import('./dialogs/DetailsDlg'));
+const TracklistDialog = lazy(() => import('./dialogs/TracklistDlg'));
+const InfoArea = observer(({ model }) => {
+    const { mouseOverRowName, mouseCol } = model;
     return (React.createElement("div", null,
         React.createElement(Typography, { display: "inline" },
             "Row name: ",
@@ -23,41 +24,47 @@ var InfoArea = observer(function (_a) {
             "Position: ",
             mouseCol)));
 });
-var Header = observer(function (_a) {
-    var model = _a.model;
-    var _b = useState(false), settingsDialogVisible = _b[0], setSettingsDialogVisible = _b[1];
-    var _c = useState(false), aboutDialogVisible = _c[0], setAboutDialogVisible = _c[1];
-    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;
+const Header = observer(({ model }) => {
+    const [settingsDialogViz, setSettingsDialogViz] = useState(false);
+    const [aboutDialogViz, setAboutDialogViz] = useState(false);
+    const [detailsDialogViz, setDetailsDialogViz] = useState(false);
+    const [tracklistDialogViz, setTracklistDialogViz] = useState(false);
     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(IconButton, { onClick: async () => {
+                try {
+                    model.setData({ tree: '', msa: '' });
+                    await model.setTreeFilehandle(undefined);
+                    await model.setMSAFilehandle(undefined);
+                    model.setScrollY(0);
+                    model.setScrollX(0);
+                    model.setCurrentAlignment(0);
+                }
+                catch (e) {
+                    console.error(e);
+                    model.setError(e);
+                }
             } },
-            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: "".concat(option, "-").concat(index), value: index }, option)); }))) : null,
+            React.createElement(FolderOpen, null)),
+        React.createElement(IconButton, { onClick: () => setSettingsDialogViz(true) },
+            React.createElement(Settings, null)),
+        React.createElement(IconButton, { onClick: () => setDetailsDialogViz(true) },
+            React.createElement(Assignment, null)),
+        React.createElement(IconButton, { onClick: () => setTracklistDialogViz(true) },
+            React.createElement(List, null)),
+        React.createElement(Suspense, { fallback: null },
+            settingsDialogViz ? (React.createElement(SettingsDialog, { model: model, onClose: () => setSettingsDialogViz(false) })) : null,
+            aboutDialogViz ? (React.createElement(AboutDialog, { onClose: () => setAboutDialogViz(false) })) : null,
+            detailsDialogViz ? (React.createElement(DetailsDialog, { model: model, onClose: () => setDetailsDialogViz(false) })) : null,
+            tracklistDialogViz ? (React.createElement(TracklistDialog, { model: model, onClose: () => setTracklistDialogViz(false) })) : null),
+        React.createElement(MultiAlignmentSelector, { model: model }),
+        React.createElement(ZoomControls, { model: model }),
         React.createElement(InfoArea, { model: model }),
-        React.createElement("div", { style: { flex: 1 } }),
-        React.createElement(IconButton, { onClick: function () { return setAboutDialogVisible(true); } },
-            React.createElement(HelpIcon, null))));
+        React.createElement(Spacer, null),
+        React.createElement(IconButton, { onClick: () => setAboutDialogViz(true) },
+            React.createElement(Help, null))));
 });
+function Spacer() {
+    return React.createElement("div", { style: { flex: 1 } });
+}
 export default Header;
+//# sourceMappingURL=Header.js.map

package/dist/components/Header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../src/components/Header.tsx"],"names":[],"mappings":"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"}

package/dist/components/ImportForm.d.ts

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

package/dist/components/ImportForm.js

@@ -1,29 +1,39 @@
 import React, { useState } from 'react';
-import { Button, Container, Grid, Typography, Link } from '@material-ui/core';
+import { Button, Container, Grid, Typography, Link } from '@mui/material';
 import { observer } from 'mobx-react';
-import { transaction } from 'mobx';
 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 (React.createElement("li", null,
-        React.createElement(Link, { onClick: function (event) {
-                model.setError(undefined);
-                event.preventDefault();
-                onClick();
-            }, 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;
+async function load(model, msaFile, treeFile) {
+    model.setError(undefined);
+    try {
+        if (msaFile) {
+            await model.setMSAFilehandle(msaFile);
+        }
+        if (treeFile) {
+            await model.setTreeFilehandle(treeFile);
+        }
+    }
+    catch (e) {
+        model.setError(e);
+    }
+}
+const ListItem = ({ onClick, model, children, }) => (React.createElement("li", null,
+    React.createElement(Link, { onClick: event => {
+            model.setError(undefined);
+            event.preventDefault();
+            onClick();
+        }, href: "#" },
+        React.createElement(Typography, { display: "inline" }, children))));
+export default observer(({ model }) => {
+    const [msaFile, setMsaFile] = useState();
+    const [treeFile, setTreeFile] = useState();
+    const { error } = model;
     return (React.createElement(Container, null,
         React.createElement("div", { style: { width: '50%' } },
             error ? (React.createElement("div", { style: { padding: 20 } },
                 React.createElement(Typography, { color: "error" },
-                    "Error: ", "".concat(error)))) : null,
+                    "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" },
@@ -33,64 +43,42 @@ export default observer(function (_a) {
                 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(Button, { onClick: () => load(model, msaFile, 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 () {
+                    React.createElement(ListItem, { model: model, onClick: () => load(model, undefined, {
+                            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: () => {
                             model.setData({ msa: smallMSA, tree: smallTree });
                         } }, "Small protein MSA+tree"),
-                    React.createElement(ListItem, { model: model, onClick: function () {
+                    React.createElement(ListItem, { model: model, onClick: () => {
                             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)"))))));
+                    React.createElement(ListItem, { model: model, onClick: () => load(model, {
+                            uri: 'https://ihh.github.io/abrowse/build/pfam-cov2.stock',
+                            locationType: 'UriLocation',
+                        }) }, "PFAM SARS-CoV2 multi-stockholm"),
+                    React.createElement(ListItem, { model: model, onClick: () => load(model, {
+                            uri: 'https://jbrowse.org/genomes/multiple_sequence_alignments/Lysine.stock',
+                            locationType: 'UriLocation',
+                        }) }, "Lysine stockholm file"),
+                    React.createElement(ListItem, { model: model, onClick: () => load(model, {
+                            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: () => load(model, {
+                            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: () => load(model, {
+                            uri: 'https://jbrowse.org/genomes/multiple_sequence_alignments/rhv_test-only.aligned_with_mafft_auto.fa',
+                            locationType: 'UriLocation',
+                        }, {
+                            uri: 'https://jbrowse.org/genomes/multiple_sequence_alignments/rhv_test-only.aligned_with_mafft_auto.nh',
+                            locationType: 'UriLocation',
+                        }) }, "MAFFT+VeryFastTree(17.9k samples)"))))));
 });
+//# sourceMappingURL=ImportForm.js.map

package/dist/components/ImportForm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImportForm.js","sourceRoot":"","sources":["../../src/components/ImportForm.tsx"],"names":[],"mappings":"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"}

package/dist/components/MSABlock.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { MsaViewModel } from '../model';
+declare const MSABlock: ({ model, offsetX, offsetY, }: {
+    model: MsaViewModel;
+    offsetX: number;
+    offsetY: number;
+}) => React.JSX.Element;
+export default MSABlock;

package/dist/components/MSABlock.js

@@ -0,0 +1,103 @@
+import React, { useEffect, useRef, useMemo } from 'react';
+import { useTheme } from '@mui/material';
+import { observer } from 'mobx-react';
+import { colorContrast } from '../util';
+import { getClustalXColor, getPercentIdentityColor } from '../colorSchemes';
+const MSABlock = observer(function ({ model, offsetX, offsetY, }) {
+    const { MSA, colWidth, bgColor, columns, rowHeight, scrollY, scrollX, hierarchy, colorScheme, colorSchemeName, blockSize, highResScaleFactor, colStats, } = model;
+    const theme = useTheme();
+    const contrastScheme = useMemo(() => colorContrast(colorScheme, theme), [colorScheme, theme]);
+    const ref = useRef(null);
+    useEffect(() => {
+        var _a, _b;
+        if (!ref.current) {
+            return;
+        }
+        const ctx = ref.current.getContext('2d');
+        if (!ctx) {
+            return;
+        }
+        ctx.resetTransform();
+        ctx.scale(highResScaleFactor, highResScaleFactor);
+        ctx.clearRect(0, 0, blockSize, blockSize);
+        ctx.translate(-offsetX, rowHeight / 2 - offsetY);
+        ctx.textAlign = 'center';
+        ctx.font = ctx.font.replace(/\d+px/, `${Math.max(8, rowHeight - 8)}px`);
+        const leaves = hierarchy.leaves();
+        const b = blockSize;
+        // slice vertical rows, e.g. tree leaves, avoid negative slice
+        const yStart = Math.max(0, Math.floor((offsetY - rowHeight) / rowHeight));
+        const yEnd = Math.max(0, Math.ceil((offsetY + b + rowHeight) / rowHeight));
+        // slice horizontal visible letters, avoid negative slice
+        const xStart = Math.max(0, Math.floor(offsetX / colWidth));
+        const xEnd = Math.max(0, Math.ceil((offsetX + b) / colWidth));
+        const visibleLeaves = leaves.slice(yStart, yEnd);
+        for (const node of visibleLeaves) {
+            const { 
+            // @ts-expect-error
+            x: y, data: { name }, } = node;
+            const str = (_a = columns[name]) === null || _a === void 0 ? void 0 : _a.slice(xStart, xEnd);
+            for (let i = 0; i < (str === null || str === void 0 ? void 0 : str.length); i++) {
+                const letter = str[i];
+                const color = colorSchemeName === 'clustalx_protein_dynamic'
+                    ? getClustalXColor(colStats[xStart + i], model, name, xStart + i)
+                    : colorSchemeName === 'percent_identity_dynamic'
+                        ? getPercentIdentityColor(colStats[xStart + i], model, name, xStart + i)
+                        : colorScheme[letter.toUpperCase()];
+                if (bgColor) {
+                    const x = i * colWidth + offsetX - (offsetX % colWidth);
+                    ctx.fillStyle = color || 'white';
+                    ctx.fillRect(x, y - rowHeight, colWidth, rowHeight);
+                }
+            }
+        }
+        if (rowHeight >= 5 && colWidth > rowHeight / 2) {
+            for (const node of visibleLeaves) {
+                const { 
+                // @ts-expect-error
+                x: y, data: { name }, } = node;
+                const str = (_b = columns[name]) === null || _b === void 0 ? void 0 : _b.slice(xStart, xEnd);
+                for (let i = 0; i < (str === null || str === void 0 ? void 0 : str.length); i++) {
+                    const letter = str[i];
+                    const color = colorScheme[letter.toUpperCase()];
+                    const contrast = contrastScheme[letter.toUpperCase()] || 'black';
+                    const x = i * colWidth + offsetX - (offsetX % colWidth);
+                    // note: -rowHeight/4 matches +rowHeight/4 in tree
+                    ctx.fillStyle = bgColor ? contrast : color || 'black';
+                    ctx.fillText(letter, x + colWidth / 2, y - rowHeight / 4);
+                }
+            }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        MSA,
+        highResScaleFactor,
+        columns,
+        colorScheme,
+        contrastScheme,
+        bgColor,
+        rowHeight,
+        colWidth,
+        hierarchy,
+        offsetX,
+        offsetY,
+        blockSize,
+    ]);
+    return (React.createElement("canvas", { ref: ref, onMouseMove: event => {
+            if (!ref.current) {
+                return;
+            }
+            const { left, top } = ref.current.getBoundingClientRect();
+            const mouseX = event.clientX - left + offsetX;
+            const mouseY = event.clientY - top + offsetY;
+            model.setMousePos(Math.floor(mouseX / colWidth) + 1, Math.floor(mouseY / rowHeight));
+        }, onMouseLeave: () => model.setMousePos(), width: blockSize * highResScaleFactor, height: blockSize * highResScaleFactor, style: {
+            position: 'absolute',
+            top: scrollY + offsetY,
+            left: scrollX + offsetX,
+            width: blockSize,
+            height: blockSize,
+        } }));
+});
+export default MSABlock;
+//# sourceMappingURL=MSABlock.js.map

package/dist/components/MSABlock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MSABlock.js","sourceRoot":"","sources":["../../src/components/MSABlock.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAIrC,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AACvC,OAAO,EAAE,gBAAgB,EAAE,uBAAuB,EAAE,MAAM,iBAAiB,CAAA;AAE3E,MAAM,QAAQ,GAAG,QAAQ,CAAC,UAAU,EAClC,KAAK,EACL,OAAO,EACP,OAAO,GAKR;IACC,MAAM,EACJ,GAAG,EACH,QAAQ,EACR,OAAO,EACP,OAAO,EACP,SAAS,EACT,OAAO,EACP,OAAO,EACP,SAAS,EACT,WAAW,EACX,eAAe,EACf,SAAS,EACT,kBAAkB,EAClB,QAAQ,GACT,GAAG,KAAK,CAAA;IACT,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IAExB,MAAM,cAAc,GAAG,OAAO,CAC5B,GAAG,EAAE,CAAC,aAAa,CAAC,WAAW,EAAE,KAAK,CAAC,EACvC,CAAC,WAAW,EAAE,KAAK,CAAC,CACrB,CAAA;IAED,MAAM,GAAG,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAA;IAC3C,SAAS,CAAC,GAAG,EAAE;;QACb,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE;YAChB,OAAM;SACP;QAED,MAAM,GAAG,GAAG,GAAG,CAAC,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC,CAAA;QACxC,IAAI,CAAC,GAAG,EAAE;YACR,OAAM;SACP;QAED,GAAG,CAAC,cAAc,EAAE,CAAA;QACpB,GAAG,CAAC,KAAK,CAAC,kBAAkB,EAAE,kBAAkB,CAAC,CAAA;QACjD,GAAG,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,EAAE,SAAS,EAAE,SAAS,CAAC,CAAA;QACzC,GAAG,CAAC,SAAS,CAAC,CAAC,OAAO,EAAE,SAAS,GAAG,CAAC,GAAG,OAAO,CAAC,CAAA;QAChD,GAAG,CAAC,SAAS,GAAG,QAAQ,CAAA;QACxB,GAAG,CAAC,IAAI,GAAG,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC,IAAI,CAAC,CAAA;QAEvE,MAAM,MAAM,GAAG,SAAS,CAAC,MAAM,EAAE,CAAA;QACjC,MAAM,CAAC,GAAG,SAAS,CAAA;QAEnB,8DAA8D;QAC9D,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,GAAG,SAAS,CAAC,GAAG,SAAS,CAAC,CAAC,CAAA;QACzE,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,OAAO,GAAG,CAAC,GAAG,SAAS,CAAC,GAAG,SAAS,CAAC,CAAC,CAAA;QAE1E,yDAAyD;QACzD,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,QAAQ,CAAC,CAAC,CAAA;QAC1D,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,OAAO,GAAG,CAAC,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAA;QAC7D,MAAM,aAAa,GAAG,MAAM,CAAC,KAAK,CAAC,MAAM,EAAE,IAAI,CAAC,CAAA;QAChD,KAAK,MAAM,IAAI,IAAI,aAAa,EAAE;YAChC,MAAM;YACJ,mBAAmB;YACnB,CAAC,EAAE,CAAC,EACJ,IAAI,EAAE,EAAE,IAAI,EAAE,GACf,GAAG,IAAI,CAAA;YAER,MAAM,GAAG,GAAG,MAAA,OAAO,CAAC,IAAI,CAAC,0CAAE,KAAK,CAAC,MAAM,EAAE,IAAI,CAAC,CAAA;YAC9C,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,IAAG,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,MAAM,CAAA,EAAE,CAAC,EAAE,EAAE;gBACpC,MAAM,MAAM,GAAG,GAAG,CAAC,CAAC,CAAC,CAAA;gBACrB,MAAM,KAAK,GACT,eAAe,KAAK,0BAA0B;oBAC5C,CAAC,CAAC,gBAAgB,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,GAAG,CAAC,CAAC;oBACjE,CAAC,CAAC,eAAe,KAAK,0BAA0B;wBAChD,CAAC,CAAC,uBAAuB,CACrB,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,EACpB,KAAK,EACL,IAAI,EACJ,MAAM,GAAG,CAAC,CACX;wBACH,CAAC,CAAC,WAAW,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,CAAA;gBACvC,IAAI,OAAO,EAAE;oBACX,MAAM,CAAC,GAAG,CAAC,GAAG,QAAQ,GAAG,OAAO,GAAG,CAAC,OAAO,GAAG,QAAQ,CAAC,CAAA;oBACvD,GAAG,CAAC,SAAS,GAAG,KAAK,IAAI,OAAO,CAAA;oBAChC,GAAG,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,GAAG,SAAS,EAAE,QAAQ,EAAE,SAAS,CAAC,CAAA;iBACpD;aACF;SACF;QAED,IAAI,SAAS,IAAI,CAAC,IAAI,QAAQ,GAAG,SAAS,GAAG,CAAC,EAAE;YAC9C,KAAK,MAAM,IAAI,IAAI,aAAa,EAAE;gBAChC,MAAM;gBACJ,mBAAmB;gBACnB,CAAC,EAAE,CAAC,EACJ,IAAI,EAAE,EAAE,IAAI,EAAE,GACf,GAAG,IAAI,CAAA;gBAER,MAAM,GAAG,GAAG,MAAA,OAAO,CAAC,IAAI,CAAC,0CAAE,KAAK,CAAC,MAAM,EAAE,IAAI,CAAC,CAAA;gBAC9C,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,IAAG,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,MAAM,CAAA,EAAE,CAAC,EAAE,EAAE;oBACpC,MAAM,MAAM,GAAG,GAAG,CAAC,CAAC,CAAC,CAAA;oBACrB,MAAM,KAAK,GAAG,WAAW,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,CAAA;oBAC/C,MAAM,QAAQ,GAAG,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,IAAI,OAAO,CAAA;oBAChE,MAAM,CAAC,GAAG,CAAC,GAAG,QAAQ,GAAG,OAAO,GAAG,CAAC,OAAO,GAAG,QAAQ,CAAC,CAAA;oBAEvD,kDAAkD;oBAClD,GAAG,CAAC,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,IAAI,OAAO,CAAA;oBACrD,GAAG,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC,GAAG,QAAQ,GAAG,CAAC,EAAE,CAAC,GAAG,SAAS,GAAG,CAAC,CAAC,CAAA;iBAC1D;aACF;SACF;QACD,uDAAuD;IACzD,CAAC,EAAE;QACD,GAAG;QACH,kBAAkB;QAClB,OAAO;QACP,WAAW;QACX,cAAc;QACd,OAAO;QACP,SAAS;QACT,QAAQ;QACR,SAAS;QACT,OAAO;QACP,OAAO;QACP,SAAS;KACV,CAAC,CAAA;IACF,OAAO,CACL,gCACE,GAAG,EAAE,GAAG,EACR,WAAW,EAAE,KAAK,CAAC,EAAE;YACnB,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE;gBAChB,OAAM;aACP;YACD,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,GAAG,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAA;YACzD,MAAM,MAAM,GAAG,KAAK,CAAC,OAAO,GAAG,IAAI,GAAG,OAAO,CAAA;YAC7C,MAAM,MAAM,GAAG,KAAK,CAAC,OAAO,GAAG,GAAG,GAAG,OAAO,CAAA;YAC5C,KAAK,CAAC,WAAW,CACf,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,QAAQ,CAAC,GAAG,CAAC,EACjC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,SAAS,CAAC,CAC/B,CAAA;QACH,CAAC,EACD,YAAY,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,WAAW,EAAE,EACvC,KAAK,EAAE,SAAS,GAAG,kBAAkB,EACrC,MAAM,EAAE,SAAS,GAAG,kBAAkB,EACtC,KAAK,EAAE;YACL,QAAQ,EAAE,UAAU;YACpB,GAAG,EAAE,OAAO,GAAG,OAAO;YACtB,IAAI,EAAE,OAAO,GAAG,OAAO;YACvB,KAAK,EAAE,SAAS;YAChB,MAAM,EAAE,SAAS;SAClB,GACD,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,QAAQ,CAAA"}

package/dist/components/MSACanvas.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import React from 'react';
 import { MsaViewModel } from '../model';
 declare const MSACanvas: ({ model }: {
     model: MsaViewModel;
-}) => JSX.Element;
+}) => React.JSX.Element;
 export default MSACanvas;