react-msaview 1.3.1 → 2.0.0

package/bundle/components/BoxTrack.js

@@ -1,143 +0,0 @@
-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

@@ -1,8 +0,0 @@
-/// <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

@@ -1,12 +0,0 @@
-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

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

package/bundle/components/Header.js

@@ -1,63 +0,0 @@
-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

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

package/bundle/components/ImportForm.js

@@ -1,89 +0,0 @@
-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

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

package/bundle/components/MSACanvas.js

@@ -1,210 +0,0 @@
-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

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

package/bundle/components/MSAView.js

@@ -1,88 +0,0 @@
-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

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