react-msaview 1.2.10 → 1.3.2

package/bundle/components/BoxTrack.js

@@ -0,0 +1,143 @@
+import React, { useRef, useMemo, useEffect } from 'react';
+import { observer } from 'mobx-react';
+import { getSnapshot, isStateTreeNode } from 'mobx-state-tree';
+import Layout from '../layout';
+var AnnotationBlock = observer(function (_a) {
+    var track = _a.track, model = _a.model, offsetX = _a.offsetX;
+    var blockSize = model.blockSize, colWidth = model.colWidth, blanks = model.blanks, rowHeight = model.rowHeight, highResScaleFactor = model.highResScaleFactor, scrollX = model.scrollX;
+    var _b = track.model, height = _b.height, features = _b.features, associatedRowName = _b.associatedRowName;
+    var feats = isStateTreeNode(features)
+        ? getSnapshot(features)
+        : features;
+    var layout = useMemo(function () {
+        var temp = new Layout();
+        feats === null || feats === void 0 ? void 0 : feats.forEach(function (feature, index) {
+            var start = feature.start, end = feature.end;
+            if (associatedRowName) {
+                var s = model.rowSpecificBpToPx(associatedRowName, start - 1);
+                var e = model.rowSpecificBpToPx(associatedRowName, end);
+                temp.addRect("" + index, s, e, rowHeight, feature);
+            }
+            else {
+                var s = model.globalBpToPx(start - 1);
+                var e = model.globalBpToPx(end);
+                temp.addRect("" + index, s, e, rowHeight, feature);
+            }
+        });
+        return temp;
+    }, [rowHeight, feats, associatedRowName, model, blanks]);
+    var ref = useRef(null);
+    var labelRef = useRef(null);
+    var mouseoverRef = useRef(null);
+    useEffect(function () {
+        if (!ref.current) {
+            return;
+        }
+        var ctx = ref.current.getContext('2d');
+        if (!ctx) {
+            return;
+        }
+        ctx.resetTransform();
+        ctx.scale(highResScaleFactor, highResScaleFactor);
+        ctx.clearRect(0, 0, blockSize, height);
+        ctx.translate(-offsetX, 0);
+        ctx.textAlign = 'center';
+        ctx.font = ctx.font.replace(/\d+px/, Math.max(8, rowHeight - 8) + "px");
+        var xStart = Math.max(0, Math.floor(offsetX / colWidth));
+        ctx.fillStyle = 'goldenrod';
+        layout.rectangles.forEach(function (value) {
+            var minX = value.minX, maxX = value.maxX, minY = value.minY, maxY = value.maxY;
+            var x1 = (minX - xStart) * colWidth + offsetX - (offsetX % colWidth);
+            var x2 = (maxX - xStart) * colWidth + offsetX - (offsetX % colWidth);
+            if (x2 - x1 > 0) {
+                ctx.fillRect(x1, minY, x2 - x1, (maxY - minY) / 2);
+            }
+        });
+    }, [
+        associatedRowName,
+        blockSize,
+        colWidth,
+        layout.rectangles,
+        model,
+        rowHeight,
+        height,
+        offsetX,
+        highResScaleFactor,
+        features,
+        blanks,
+    ]);
+    useEffect(function () {
+        if (!labelRef.current) {
+            return;
+        }
+        var ctx = labelRef.current.getContext('2d');
+        if (!ctx) {
+            return;
+        }
+        // this logic is very similar to MSACanvas
+        ctx.resetTransform();
+        ctx.scale(highResScaleFactor, highResScaleFactor);
+        ctx.clearRect(0, 0, blockSize, height);
+        ctx.translate(-offsetX, 0);
+        ctx.textAlign = 'center';
+        ctx.font = ctx.font.replace(/\d+px/, Math.max(8, rowHeight - 8) + "px");
+        ctx.fillStyle = 'black';
+        ctx.textAlign = 'left';
+        layout.rectangles.forEach(function (value) {
+            var _a, _b, _c, _d;
+            var minX = value.minX, maxX = value.maxX, maxY = value.maxY, minY = value.minY;
+            var feature = value.data;
+            var x1 = minX * colWidth;
+            var x2 = maxX * colWidth;
+            if (x2 - x1 > 0) {
+                var note = (_b = (_a = feature.attributes) === null || _a === void 0 ? void 0 : _a.Note) === null || _b === void 0 ? void 0 : _b[0];
+                var name_1 = (_d = (_c = feature.attributes) === null || _c === void 0 ? void 0 : _c.Name) === null || _d === void 0 ? void 0 : _d[0];
+                var type = feature.type;
+                ctx.fillText([type, name_1, note].filter(function (f) { return !!f; }).join(' - '), Math.max(Math.min(-scrollX, x2), x1), minY + (maxY - minY));
+            }
+        });
+    }, [
+        blockSize,
+        colWidth,
+        scrollX,
+        highResScaleFactor,
+        height,
+        layout.rectangles,
+        offsetX,
+        features,
+        model,
+        rowHeight,
+        blanks,
+    ]);
+    return !features ? null : (React.createElement(React.Fragment, null,
+        React.createElement("canvas", { ref: ref, height: height * highResScaleFactor, width: blockSize * highResScaleFactor, style: {
+                position: 'absolute',
+                left: scrollX + offsetX,
+                width: blockSize,
+                height: height,
+            } }),
+        React.createElement("canvas", { ref: labelRef, height: height * highResScaleFactor, width: blockSize * highResScaleFactor, style: {
+                position: 'absolute',
+                left: scrollX + offsetX,
+                width: blockSize,
+                height: height,
+            } }),
+        React.createElement("canvas", { ref: mouseoverRef, height: height * highResScaleFactor, width: blockSize * highResScaleFactor, style: {
+                position: 'absolute',
+                left: scrollX + offsetX,
+                width: blockSize,
+                height: height,
+            } })));
+});
+var AnnotationTrack = observer(function (_a) {
+    var model = _a.model, track = _a.track;
+    var blocksX = model.blocksX, msaAreaWidth = model.msaAreaWidth;
+    var height = track.model.height;
+    return (React.createElement("div", { style: {
+            position: 'relative',
+            height: height,
+            width: msaAreaWidth,
+            overflow: 'hidden',
+        } }, blocksX.map(function (bx) { return (React.createElement(AnnotationBlock, { track: track, key: bx, model: model, offsetX: bx })); })));
+});
+export default AnnotationTrack;

package/bundle/components/DetailsDlg.d.ts

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

package/bundle/components/DetailsDlg.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Dialog, DialogTitle, DialogContent } from '@material-ui/core';
+import { observer } from 'mobx-react';
+import { Attributes } from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail';
+export default observer(function (_a) {
+    var model = _a.model, onClose = _a.onClose, open = _a.open;
+    var alignmentDetails = model.alignmentDetails;
+    return (React.createElement(Dialog, { onClose: function () { return onClose(); }, open: open },
+        React.createElement(DialogTitle, null, "Metadata"),
+        React.createElement(DialogContent, null,
+            React.createElement(Attributes, { attributes: alignmentDetails }))));
+});

package/bundle/components/Header.d.ts

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

package/bundle/components/Header.js

@@ -0,0 +1,63 @@
+import React, { useState } from 'react';
+import { IconButton, Select, Typography } from '@material-ui/core';
+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;
+    return (React.createElement("div", null,
+        React.createElement(Typography, { display: "inline" },
+            "Row name: ",
+            mouseOverRowName),
+        React.createElement("span", { style: { marginLeft: 10 } }),
+        React.createElement(Typography, { display: "inline" },
+            "Position: ",
+            mouseCol)));
+});
+var Header = observer(function (_a) {
+    var model = _a.model;
+    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;
+    return (React.createElement("div", { style: { display: 'flex' } },
+        React.createElement(IconButton, { onClick: function () {
+                model.setData({ tree: '', msa: '' });
+                model.setTreeFilehandle(undefined);
+                model.setMSAFilehandle(undefined);
+                model.setScrollY(0);
+                model.setScrollX(0);
+                model.setCurrentAlignment(0);
+            } },
+            React.createElement(FolderOpenIcon, null)),
+        React.createElement(IconButton, { onClick: function () { return setSettingsDialogVisible(true); } },
+            React.createElement(SettingsIcon, null)),
+        React.createElement(IconButton, { onClick: function () { return setDetailsDialogVisible(true); } },
+            React.createElement(AssignmentIcon, null)),
+        React.createElement(IconButton, { onClick: function () { return setTracklistDialogVisible(true); } },
+            React.createElement(ListIcon, null)),
+        settingsDialogVisible ? (React.createElement(SettingsDialog, { open: true, model: model, onClose: function () { return setSettingsDialogVisible(false); } })) : null,
+        aboutDialogVisible ? (React.createElement(AboutDialog, { open: true, onClose: function () { return setAboutDialogVisible(false); } })) : null,
+        detailsDialogVisible ? (React.createElement(DetailsDialog, { open: true, model: model, onClose: function () { return setDetailsDialogVisible(false); } })) : null,
+        tracklistDialogVisible ? (React.createElement(TracklistDialog, { open: true, model: model, onClose: function () { return setTracklistDialogVisible(false); } })) : null,
+        alignmentNames.length > 0 ? (React.createElement(Select, { native: true, value: currentAlignment, onChange: function (event) {
+                model.setCurrentAlignment(+event.target.value);
+                model.setScrollX(0);
+                model.setScrollY(0);
+            } }, alignmentNames.map(function (option, index) { return (React.createElement("option", { key: option + "-" + index, value: index }, option)); }))) : null,
+        React.createElement(InfoArea, { model: model }),
+        React.createElement("div", { style: { flex: 1 } }),
+        React.createElement(IconButton, { onClick: function () { return setAboutDialogVisible(true); } },
+            React.createElement(HelpIcon, null))));
+});
+export default Header;

package/bundle/components/ImportForm.d.ts

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

package/bundle/components/ImportForm.js

@@ -0,0 +1,89 @@
+import React, { useState } from 'react';
+import { Button, Container, Grid, Typography, Link } from '@material-ui/core';
+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;
+    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',
+                            });
+                        } }, "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',
+                            });
+                        } }, "PFAM SARS-CoV2 multi-stockholm"),
+                    React.createElement(ListItem, { model: model, onClick: function () {
+                            model.setMSAFilehandle({
+                                uri: 'https://jbrowse.org/genomes/multiple_sequence_alignments/Lysine.stock',
+                            });
+                        } }, "Lysine stockholm file"),
+                    React.createElement(ListItem, { model: model, onClick: function () {
+                            model.setMSAFilehandle({
+                                uri: 'https://jbrowse.org/genomes/multiple_sequence_alignments/PF01601_full.txt',
+                            });
+                        } }, "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',
+                            });
+                        } }, "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',
+                                });
+                                model.setTreeFilehandle({
+                                    uri: 'https://jbrowse.org/genomes/multiple_sequence_alignments/rhv_test-only.aligned_with_mafft_auto.nh',
+                                });
+                            });
+                        } }, "MAFFT+VeryFastTree(17.9k samples)"))))));
+});

package/bundle/components/MSACanvas.d.ts

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

package/bundle/components/MSACanvas.js

@@ -0,0 +1,210 @@
+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';
+import { colorContrast } from '../util';
+import { getClustalXColor, getPercentIdentityColor } from '../colorSchemes';
+var MSABlock = observer(function (_a) {
+    var model = _a.model, offsetX = _a.offsetX, offsetY = _a.offsetY;
+    var MSA = model.MSA, colWidth = model.colWidth, bgColor = model.bgColor, columns = model.columns, rowHeight = model.rowHeight, scrollY = model.scrollY, scrollX = model.scrollX, hierarchy = model.hierarchy, colorScheme = model.colorScheme, colorSchemeName = model.colorSchemeName, blockSize = model.blockSize, highResScaleFactor = model.highResScaleFactor, colStats = model.colStats;
+    var theme = useTheme();
+    var contrastScheme = useMemo(function () { return colorContrast(colorScheme, theme); }, [colorScheme, theme]);
+    var ref = useRef(null);
+    useEffect(function () {
+        if (!ref.current) {
+            return;
+        }
+        var 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");
+        var leaves = hierarchy.leaves();
+        var b = blockSize;
+        // slice vertical rows, e.g. tree leaves, avoid negative slice
+        var yStart = Math.max(0, Math.floor((offsetY - rowHeight) / rowHeight));
+        var yEnd = Math.max(0, Math.ceil((offsetY + b + rowHeight) / rowHeight));
+        // slice horizontal visible letters, avoid negative slice
+        var xStart = Math.max(0, Math.floor(offsetX / colWidth));
+        var xEnd = Math.max(0, Math.ceil((offsetX + b) / colWidth));
+        var visibleLeaves = leaves.slice(yStart, yEnd);
+        visibleLeaves.forEach(function (node) {
+            var _a;
+            var 
+            //@ts-ignore
+            y = node.x, name = node.data.name;
+            var str = (_a = columns[name]) === null || _a === void 0 ? void 0 : _a.slice(xStart, xEnd);
+            for (var i = 0; i < (str === null || str === void 0 ? void 0 : str.length); i++) {
+                var letter = str[i];
+                var 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) {
+                    var x = i * colWidth + offsetX - (offsetX % colWidth);
+                    ctx.fillStyle = color || 'white';
+                    ctx.fillRect(x, y - rowHeight, colWidth, rowHeight);
+                }
+            }
+        });
+        if (rowHeight >= 10 && colWidth >= rowHeight / 2) {
+            visibleLeaves.forEach(function (node) {
+                var _a;
+                var 
+                //@ts-ignore
+                y = node.x, name = node.data.name;
+                var str = (_a = columns[name]) === null || _a === void 0 ? void 0 : _a.slice(xStart, xEnd);
+                for (var i = 0; i < (str === null || str === void 0 ? void 0 : str.length); i++) {
+                    var letter = str[i];
+                    var color = colorScheme[letter.toUpperCase()];
+                    var contrast = contrastScheme[letter.toUpperCase()] || 'black';
+                    var 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);
+                }
+            });
+        }
+    }, [
+        MSA,
+        highResScaleFactor,
+        columns,
+        colorScheme,
+        contrastScheme,
+        bgColor,
+        rowHeight,
+        colWidth,
+        hierarchy,
+        offsetX,
+        offsetY,
+        blockSize,
+    ]);
+    return (React.createElement("canvas", { ref: ref, onMouseMove: function (event) {
+            if (!ref.current) {
+                return;
+            }
+            var _a = ref.current.getBoundingClientRect(), left = _a.left, top = _a.top;
+            var mouseX = event.clientX - left;
+            var mouseY = event.clientY - top;
+            model.setMousePos(Math.floor((mouseX + offsetX) / colWidth) + 1, Math.floor((mouseY + offsetY) / rowHeight));
+        }, onMouseLeave: function () { return model.setMousePos(); }, width: blockSize * highResScaleFactor, height: blockSize * highResScaleFactor, style: {
+            position: 'absolute',
+            top: scrollY + offsetY,
+            left: scrollX + offsetX,
+            width: blockSize,
+            height: blockSize,
+        } }));
+});
+var MSACanvas = observer(function (_a) {
+    var model = _a.model;
+    var MSA = model.MSA, msaFilehandle = model.msaFilehandle, height = model.height, msaAreaWidth = model.msaAreaWidth, blocks2d = model.blocks2d;
+    var ref = useRef(null);
+    // wheel
+    var scheduled = useRef(false);
+    var deltaX = useRef(0);
+    var deltaY = useRef(0);
+    // mouse click-and-drag scrolling
+    var prevX = useRef(0);
+    var prevY = useRef(0);
+    var _b = useState(false), mouseDragging = _b[0], setMouseDragging = _b[1];
+    useEffect(function () {
+        var curr = ref.current;
+        if (!curr) {
+            return;
+        }
+        function onWheel(origEvent) {
+            var event = normalizeWheel(origEvent);
+            deltaX.current += event.pixelX;
+            deltaY.current += event.pixelY;
+            if (!scheduled.current) {
+                scheduled.current = true;
+                requestAnimationFrame(function () {
+                    model.doScrollX(-deltaX.current);
+                    model.doScrollY(-deltaY.current);
+                    deltaX.current = 0;
+                    deltaY.current = 0;
+                    scheduled.current = false;
+                });
+            }
+            origEvent.preventDefault();
+        }
+        curr.addEventListener('wheel', onWheel);
+        return function () {
+            curr.removeEventListener('wheel', onWheel);
+        };
+    }, [model]);
+    useEffect(function () {
+        var cleanup = function () { };
+        function globalMouseMove(event) {
+            event.preventDefault();
+            var currX = event.clientX;
+            var currY = event.clientY;
+            var distanceX = currX - prevX.current;
+            var distanceY = currY - prevY.current;
+            if (distanceX || distanceY) {
+                // use rAF to make it so multiple event handlers aren't fired per-frame
+                // see https://calendar.perfplanet.com/2013/the-runtime-performance-checklist/
+                if (!scheduled.current) {
+                    scheduled.current = true;
+                    window.requestAnimationFrame(function () {
+                        model.doScrollX(distanceX);
+                        model.doScrollY(distanceY);
+                        scheduled.current = false;
+                        prevX.current = event.clientX;
+                        prevY.current = event.clientY;
+                    });
+                }
+            }
+        }
+        function globalMouseUp() {
+            prevX.current = 0;
+            if (mouseDragging) {
+                setMouseDragging(false);
+            }
+        }
+        if (mouseDragging) {
+            window.addEventListener('mousemove', globalMouseMove, true);
+            window.addEventListener('mouseup', globalMouseUp, true);
+            cleanup = function () {
+                window.removeEventListener('mousemove', globalMouseMove, true);
+                window.removeEventListener('mouseup', globalMouseUp, true);
+            };
+        }
+        return cleanup;
+    }, [model, mouseDragging]);
+    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) {
+                return;
+            }
+            // otherwise do click and drag scroll
+            if (event.button === 0) {
+                prevX.current = event.clientX;
+                prevY.current = event.clientY;
+                setMouseDragging(true);
+            }
+        }, onMouseUp: function (event) {
+            event.preventDefault();
+            setMouseDragging(false);
+        }, onMouseLeave: function (event) {
+            event.preventDefault();
+        }, style: {
+            position: 'relative',
+            height: height,
+            width: msaAreaWidth,
+            overflow: 'hidden',
+        } }, !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/bundle/components/MSAView.d.ts

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

package/bundle/components/MSAView.js

@@ -0,0 +1,88 @@
+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 React, { useRef, useEffect } from 'react';
+import { observer } from 'mobx-react';
+import { Typography } from '@material-ui/core';
+import ImportForm from './ImportForm';
+import Rubberband from './Rubberband';
+import TreeCanvas from './TreeCanvas';
+import MSACanvas from './MSACanvas';
+import Ruler from './Ruler';
+import TreeRuler from './TreeRuler';
+import Header from './Header';
+import Track from './Track';
+import AnnotationDialog from './AnnotationDlg';
+import { HorizontalResizeHandle, VerticalResizeHandle } from './ResizeHandles';
+var MouseoverCanvas = observer(function (_a) {
+    var model = _a.model;
+    var ref = useRef(null);
+    var height = model.height, width = model.width, treeAreaWidth = model.treeAreaWidth, resizeHandleWidth = model.resizeHandleWidth, scrollX = model.scrollX, mouseCol = model.mouseCol, colWidth = model.colWidth;
+    useEffect(function () {
+        if (!ref.current) {
+            return;
+        }
+        var ctx = ref.current.getContext('2d');
+        if (!ctx) {
+            return;
+        }
+        ctx.resetTransform();
+        ctx.clearRect(0, 0, width, height);
+        if (mouseCol !== undefined) {
+            var x = (mouseCol - 1) * colWidth + scrollX + treeAreaWidth + resizeHandleWidth;
+            ctx.fillStyle = 'rgba(100,100,100,0.5)';
+            ctx.fillRect(x, 0, colWidth, height);
+        }
+    }, [
+        mouseCol,
+        colWidth,
+        scrollX,
+        height,
+        resizeHandleWidth,
+        treeAreaWidth,
+        width,
+    ]);
+    return (React.createElement("canvas", { ref: ref, width: width, height: height, style: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: width,
+            height: height,
+            zIndex: 1000,
+            pointerEvents: 'none',
+        } }));
+});
+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 (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/bundle/components/MoreInfoDlg.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare const _default: ({ info, onClose }: {
+    info: any;
+    onClose: () => void;
+}) => JSX.Element;
+export default _default;