react-msaview 1.3.1 → 2.0.0

package/bundle/components/MoreInfoDlg.js

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

package/bundle/components/ResizeHandles.d.ts

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

package/bundle/components/ResizeHandles.js

@@ -1,110 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { observer } from 'mobx-react';
-export var VerticalResizeHandle = observer(function (_a) {
-    var model = _a.model;
-    var resizeHandleWidth = model.resizeHandleWidth;
-    var _b = useState(false), mouseDragging = _b[0], setMouseDragging = _b[1];
-    var scheduled = useRef(false);
-    var prevX = useRef(0);
-    useEffect(function () {
-        function globalMouseMove(event) {
-            event.preventDefault();
-            var currX = event.clientX;
-            if (prevX.current === 0) {
-                prevX.current = event.clientX;
-            }
-            else {
-                var distance_1 = currX - prevX.current;
-                if (distance_1) {
-                    // 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.setTreeAreaWidth(model.treeAreaWidth + distance_1);
-                            scheduled.current = false;
-                            prevX.current = event.clientX;
-                        });
-                    }
-                }
-            }
-        }
-        function globalMouseUp() {
-            prevX.current = 0;
-            if (mouseDragging) {
-                setMouseDragging(false);
-            }
-        }
-        if (mouseDragging) {
-            document.addEventListener('mousemove', globalMouseMove, true);
-            document.addEventListener('mouseup', globalMouseUp, true);
-            return function () {
-                document.removeEventListener('mousemove', globalMouseMove, true);
-                document.removeEventListener('mouseup', globalMouseUp, true);
-            };
-        }
-        return function () { };
-    }, [mouseDragging, model]);
-    return (React.createElement("div", null,
-        React.createElement("div", { onMouseDown: function () { return setMouseDragging(true); }, style: {
-                cursor: 'ew-resize',
-                height: '100%',
-                width: resizeHandleWidth,
-                background: "rgba(200,200,200)",
-                position: 'relative',
-            } })));
-});
-export var HorizontalResizeHandle = observer(function (_a) {
-    var model = _a.model;
-    var resizeHandleWidth = model.resizeHandleWidth;
-    var _b = useState(false), mouseDragging = _b[0], setMouseDragging = _b[1];
-    var scheduled = useRef(false);
-    var prevY = useRef(0);
-    useEffect(function () {
-        function globalMouseMove(event) {
-            event.preventDefault();
-            var currY = event.clientY;
-            if (prevY.current === 0) {
-                prevY.current = event.clientY;
-            }
-            else {
-                var distance_2 = currY - prevY.current;
-                if (distance_2) {
-                    // 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.setHeight(model.height + distance_2);
-                            scheduled.current = false;
-                            prevY.current = event.clientY;
-                        });
-                    }
-                }
-            }
-        }
-        function globalMouseUp() {
-            prevY.current = 0;
-            if (mouseDragging) {
-                setMouseDragging(false);
-            }
-        }
-        if (mouseDragging) {
-            document.addEventListener('mousemove', globalMouseMove, true);
-            document.addEventListener('mouseup', globalMouseUp, true);
-            return function () {
-                document.removeEventListener('mousemove', globalMouseMove, true);
-                document.removeEventListener('mouseup', globalMouseUp, true);
-            };
-        }
-        return function () { };
-    }, [mouseDragging, model]);
-    return (React.createElement("div", null,
-        React.createElement("div", { onMouseDown: function () { return setMouseDragging(true); }, style: {
-                cursor: 'ns-resize',
-                width: '100%',
-                height: resizeHandleWidth,
-                background: "rgba(200,200,200)",
-                position: 'relative',
-            } })));
-});

package/bundle/components/Rubberband.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-declare function Rubberband({ model, ControlComponent, }: {
-    model: any;
-    ControlComponent?: React.ReactElement;
-}): JSX.Element;
-declare const _default: typeof Rubberband;
-export default _default;

package/bundle/components/Rubberband.js

@@ -1,196 +0,0 @@
-import React, { useRef, useEffect, useState } from 'react';
-import { observer } from 'mobx-react';
-// material ui
-import { Popover, Tooltip, Typography, makeStyles, alpha, } from '@material-ui/core';
-import AssignmentIcon from '@material-ui/icons/Assignment';
-// import { stringify } from '@jbrowse/core/util'
-import { Menu } from '@jbrowse/core/ui';
-var useStyles = makeStyles(function (theme) {
-    var background = theme.palette.tertiary
-        ? alpha(theme.palette.tertiary.main, 0.7)
-        : alpha(theme.palette.primary.main, 0.7);
-    return {
-        rubberband: {
-            height: '100%',
-            background: background,
-            position: 'absolute',
-            zIndex: 10,
-            textAlign: 'center',
-            overflow: 'hidden',
-        },
-        rubberbandControl: {
-            cursor: 'crosshair',
-            width: '100%',
-            minHeight: 8,
-        },
-        rubberbandText: {
-            color: theme.palette.tertiary
-                ? theme.palette.tertiary.contrastText
-                : theme.palette.primary.contrastText,
-        },
-        popover: {
-            mouseEvents: 'none',
-            cursor: 'crosshair',
-        },
-        paper: {
-            paddingLeft: theme.spacing(1),
-            paddingRight: theme.spacing(1),
-        },
-        guide: {
-            pointerEvents: 'none',
-            height: '100%',
-            width: 1,
-            position: 'absolute',
-            zIndex: 10,
-        },
-    };
-});
-var VerticalGuide = observer(function (_a) {
-    var model = _a.model, coordX = _a.coordX;
-    var treeAreaWidth = model.treeAreaWidth;
-    var classes = useStyles();
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Tooltip, { open: true, placement: "top", title: "" + (model.pxToBp(coordX) + 1), arrow: true },
-            React.createElement("div", { style: {
-                    left: coordX + treeAreaWidth,
-                    position: 'absolute',
-                    height: 1,
-                } })),
-        React.createElement("div", { className: classes.guide, style: {
-                left: coordX + treeAreaWidth,
-                background: 'red',
-            } })));
-});
-function Rubberband(_a) {
-    var model = _a.model, _b = _a.ControlComponent, ControlComponent = _b === void 0 ? React.createElement("div", null) : _b;
-    var treeAreaWidth = model.treeAreaWidth;
-    var _c = useState(), startX = _c[0], setStartX = _c[1];
-    var _d = useState(), currentX = _d[0], setCurrentX = _d[1];
-    // clientX and clientY used for anchorPosition for menu
-    // offsetX used for calculations about width of selection
-    var _e = useState(), anchorPosition = _e[0], setAnchorPosition = _e[1];
-    var _f = useState(), guideX = _f[0], setGuideX = _f[1];
-    var controlsRef = useRef(null);
-    var rubberbandRef = useRef(null);
-    var classes = useStyles();
-    var mouseDragging = startX !== undefined && anchorPosition === undefined;
-    useEffect(function () {
-        function globalMouseMove(event) {
-            if (controlsRef.current && mouseDragging) {
-                var relativeX = event.clientX - controlsRef.current.getBoundingClientRect().left;
-                setCurrentX(relativeX);
-            }
-        }
-        function globalMouseUp(event) {
-            if (startX !== undefined && controlsRef.current) {
-                var clientX = event.clientX, clientY = event.clientY;
-                var ref = controlsRef.current;
-                var offsetX = clientX - ref.getBoundingClientRect().left;
-                // as stated above, store both clientX/Y and offsetX for different
-                // purposes
-                setAnchorPosition({
-                    offsetX: offsetX,
-                    clientX: clientX,
-                    clientY: clientY,
-                });
-                setGuideX(undefined);
-            }
-        }
-        if (mouseDragging) {
-            window.addEventListener('mousemove', globalMouseMove);
-            window.addEventListener('mouseup', globalMouseUp);
-            return function () {
-                window.removeEventListener('mousemove', globalMouseMove);
-                window.removeEventListener('mouseup', globalMouseUp);
-            };
-        }
-        return function () { };
-    }, [startX, mouseDragging, anchorPosition]);
-    useEffect(function () {
-        if (!mouseDragging &&
-            currentX !== undefined &&
-            startX !== undefined &&
-            Math.abs(currentX - startX) <= 3) {
-            handleClose();
-        }
-    }, [mouseDragging, currentX, startX, model.colWidth]);
-    function mouseDown(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        var relativeX = event.clientX -
-            event.target.getBoundingClientRect().left;
-        setStartX(relativeX);
-        setCurrentX(relativeX);
-    }
-    function mouseMove(event) {
-        var target = event.target;
-        setGuideX(event.clientX - target.getBoundingClientRect().left);
-    }
-    function mouseOut() {
-        setGuideX(undefined);
-        model.clearAnnotPos();
-    }
-    function handleClose() {
-        setAnchorPosition(undefined);
-        setStartX(undefined);
-        setCurrentX(undefined);
-    }
-    //eslint-disable-next-line @typescript-eslint/ban-types
-    function handleMenuItemClick(_, callback) {
-        callback();
-        handleClose();
-    }
-    if (startX === undefined) {
-        return (React.createElement(React.Fragment, null,
-            guideX !== undefined ? (React.createElement(VerticalGuide, { model: model, coordX: guideX })) : null,
-            React.createElement("div", { "data-testid": "rubberband_controls", className: classes.rubberbandControl, role: "presentation", ref: controlsRef, onMouseDown: mouseDown, onMouseOut: mouseOut, onMouseMove: mouseMove }, ControlComponent)));
-    }
-    var right = anchorPosition ? anchorPosition.offsetX : currentX || 0;
-    var left = right < startX ? right : startX;
-    var width = Math.abs(right - startX);
-    var leftBpOffset = model.pxToBp(left);
-    var rightBpOffset = model.pxToBp(left + width);
-    var numOfBpSelected = Math.ceil(width / model.colWidth);
-    var menuItems = [
-        {
-            label: 'Create annotation',
-            icon: AssignmentIcon,
-            onClick: function () {
-                model.setOffsets(leftBpOffset, rightBpOffset);
-                handleClose();
-            },
-        },
-    ];
-    return (React.createElement(React.Fragment, null,
-        rubberbandRef.current ? (React.createElement(React.Fragment, null,
-            React.createElement(Popover, { className: classes.popover, classes: {
-                    paper: classes.paper,
-                }, open: true, anchorEl: rubberbandRef.current, anchorOrigin: {
-                    vertical: 'top',
-                    horizontal: 'left',
-                }, transformOrigin: {
-                    vertical: 'bottom',
-                    horizontal: 'right',
-                }, keepMounted: true, disableRestoreFocus: true },
-                React.createElement(Typography, null, leftBpOffset + 1)),
-            React.createElement(Popover, { className: classes.popover, classes: {
-                    paper: classes.paper,
-                }, open: true, anchorEl: rubberbandRef.current, anchorOrigin: {
-                    vertical: 'top',
-                    horizontal: 'right',
-                }, transformOrigin: {
-                    vertical: 'bottom',
-                    horizontal: 'left',
-                }, keepMounted: true, disableRestoreFocus: true },
-                React.createElement(Typography, null, rightBpOffset + 1)))) : null,
-        React.createElement("div", { ref: rubberbandRef, className: classes.rubberband, style: { left: left + treeAreaWidth, width: width } },
-            React.createElement(Typography, { variant: "h6", className: classes.rubberbandText },
-                numOfBpSelected.toLocaleString('en-US'),
-                " bp")),
-        React.createElement("div", { "data-testid": "rubberband_controls", className: classes.rubberbandControl, role: "presentation", ref: controlsRef, onMouseDown: mouseDown, onMouseOut: mouseOut, onMouseMove: mouseMove }, ControlComponent),
-        anchorPosition ? (React.createElement(Menu, { anchorReference: "anchorPosition", anchorPosition: {
-                left: anchorPosition.clientX,
-                top: anchorPosition.clientY,
-            }, onMenuItemClick: handleMenuItemClick, open: Boolean(anchorPosition), onClose: handleClose, menuItems: menuItems })) : null));
-}
-export default observer(Rubberband);

package/bundle/components/Ruler.js

@@ -1,121 +0,0 @@
-import React, { useRef } from 'react';
-import { makeStyles } from '@material-ui/core';
-import { observer } from 'mobx-react';
-/**
- * Given a scale ( bp/px ) and minimum distances (px) between major and minor
- * gridlines, return an object like `{ majorPitch: bp, minorPitch: bp }` giving
- * the gridline pitches to use.
- */
-export function chooseGridPitch(scale, minMajorPitchPx, minMinorPitchPx) {
-    scale = Math.abs(scale);
-    var minMajorPitchBp = minMajorPitchPx * scale;
-    var majorMagnitude = parseInt(Number(minMajorPitchBp).toExponential().split(/e/i)[1], 10);
-    var majorPitch = Math.pow(10, majorMagnitude);
-    while (majorPitch < minMajorPitchBp) {
-        majorPitch *= 2;
-        if (majorPitch >= minMajorPitchBp) {
-            break;
-        }
-        majorPitch *= 2.5;
-    }
-    majorPitch = Math.max(majorPitch, 5);
-    var majorPitchPx = majorPitch / scale;
-    var minorPitch = 0;
-    if (!(majorPitch % 10) && majorPitchPx / 10 >= minMinorPitchPx) {
-        minorPitch = majorPitch / 10;
-    }
-    else if (!(majorPitch % 5) && majorPitchPx / 5 >= minMinorPitchPx) {
-        minorPitch = majorPitch / 5;
-    }
-    else if (!(majorPitch % 2) && majorPitchPx / 2 >= minMinorPitchPx) {
-        minorPitch = majorPitch / 2;
-    }
-    return { majorPitch: majorPitch, minorPitch: minorPitch };
-}
-export function makeTicks(start, end, bpPerPx, emitMajor, emitMinor) {
-    var _a;
-    if (emitMajor === void 0) { emitMajor = true; }
-    if (emitMinor === void 0) { emitMinor = true; }
-    var gridPitch = chooseGridPitch(bpPerPx, 60, 15);
-    var minBase = start;
-    var maxBase = end;
-    if (minBase === null || maxBase === null) {
-        return [];
-    }
-    if (bpPerPx < 0) {
-        _a = [maxBase, minBase], minBase = _a[0], maxBase = _a[1];
-    }
-    // add 20px additional on the right and left to allow us to draw the ends of
-    // labels that lie a little outside our region
-    minBase -= Math.abs(20 * bpPerPx);
-    maxBase += Math.abs(20 * bpPerPx) + 1;
-    var iterPitch = gridPitch.minorPitch || gridPitch.majorPitch;
-    var index = 0;
-    var ticks = [];
-    for (var base = Math.ceil(minBase / iterPitch) * iterPitch; base < maxBase; base += iterPitch) {
-        if (emitMinor && base % (gridPitch.majorPitch * 2)) {
-            ticks.push({ type: 'minor', base: base - 1, index: index });
-            index += 1;
-        }
-        else if (emitMajor && !(base % (gridPitch.majorPitch * 2))) {
-            ticks.push({ type: 'major', base: base - 1, index: index });
-            index += 1;
-        }
-    }
-    return ticks;
-}
-function mathPower(num) {
-    if (num < 999) {
-        return String(num);
-    }
-    return mathPower(~~(num / 1000)) + "," + ("00" + ~~(num % 1000)).substr(-3, 3);
-}
-var useStyles = makeStyles(function ( /* theme */) { return ({
-    majorTickLabel: {
-        fontSize: '11px',
-    },
-    majorTick: {
-        stroke: '#555',
-    },
-    minorTick: {
-        stroke: '#999',
-    },
-}); });
-function RulerBlock(_a) {
-    var start = _a.start, end = _a.end, bpPerPx = _a.bpPerPx, reversed = _a.reversed, major = _a.major, minor = _a.minor;
-    var classes = useStyles();
-    var ticks = makeTicks(start, end, bpPerPx, major, minor);
-    return (React.createElement(React.Fragment, null,
-        ticks.map(function (tick) {
-            var x = (reversed ? end - tick.base : tick.base - start) / bpPerPx;
-            return (React.createElement("line", { key: tick.base, x1: x, x2: x, y1: 11, y2: tick.type === 'major' ? 11 + 6 : 11 + 4, strokeWidth: 1, stroke: tick.type === 'major' ? '#555' : '#999', className: tick.type === 'major' ? classes.majorTick : classes.minorTick, "data-bp": tick.base }));
-        }),
-        ticks
-            .filter(function (tick) { return tick.type === 'major'; })
-            .map(function (tick) {
-            var x = (reversed ? end - tick.base : tick.base - start) / bpPerPx;
-            return (React.createElement("text", { x: x, y: 10, key: "label-" + tick.base, textAnchor: "middle", style: { fontSize: '11px' }, className: classes.majorTickLabel }, mathPower(tick.base + 1)));
-        })));
-}
-var Ruler = observer(function (_a) {
-    var model = _a.model;
-    var MSA = model.MSA, colWidth = model.colWidth, msaAreaWidth = model.msaAreaWidth, resizeHandleWidth = model.resizeHandleWidth, scrollX = model.scrollX, blocksX = model.blocksX, blockSize = model.blockSize;
-    var ref = useRef(null);
-    var offsetX = blocksX[0];
-    return !MSA ? null : (React.createElement("div", { ref: ref, style: {
-            position: 'relative',
-            width: msaAreaWidth,
-            cursor: 'crosshair',
-            overflow: 'hidden',
-            height: 20,
-            background: '#ccc',
-        } },
-        React.createElement("svg", { style: {
-                width: blocksX.length * blockSize,
-                position: 'absolute',
-                left: scrollX + offsetX + resizeHandleWidth,
-                pointerEvents: 'none',
-            } },
-            React.createElement(RulerBlock, { key: offsetX, start: offsetX / colWidth, end: offsetX / colWidth + (blockSize * blocksX.length) / colWidth, bpPerPx: 1 / colWidth }))));
-});
-export default Ruler;

package/bundle/components/SettingsDlg.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/SettingsDlg.js

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

package/bundle/components/TextTrack.d.ts

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

package/bundle/components/TextTrack.js

@@ -1,72 +0,0 @@
-import React, { useRef, useMemo, useEffect } from 'react';
-import { useTheme } from '@material-ui/core';
-import { observer } from 'mobx-react';
-import { colorContrast } from '../util';
-var AnnotationBlock = observer(function (_a) {
-    var track = _a.track, model = _a.model, offsetX = _a.offsetX;
-    var blockSize = model.blockSize, scrollX = model.scrollX, bgColor = model.bgColor, modelColorScheme = model.colorScheme, colWidth = model.colWidth, rowHeight = model.rowHeight, highResScaleFactor = model.highResScaleFactor;
-    var _b = track.model, customColorScheme = _b.customColorScheme, data = _b.data;
-    var colorScheme = customColorScheme || modelColorScheme;
-    var theme = useTheme();
-    var ref = useRef(null);
-    var contrastScheme = useMemo(function () { return colorContrast(colorScheme, theme); }, [colorScheme, theme]);
-    useEffect(function () {
-        if (!ref.current) {
-            return;
-        }
-        var ctx = ref.current.getContext('2d');
-        if (!ctx) {
-            return;
-        }
-        // this logic is very similar to MSACanvas
-        ctx.resetTransform();
-        ctx.scale(highResScaleFactor, highResScaleFactor);
-        ctx.clearRect(0, 0, blockSize, rowHeight);
-        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));
-        var xEnd = Math.max(0, Math.ceil((offsetX + blockSize) / colWidth));
-        var str = data === null || data === void 0 ? void 0 : data.slice(xStart, xEnd);
-        for (var i = 0; str && i < str.length; i++) {
-            var letter = str[i];
-            var color = colorScheme[letter.toUpperCase()];
-            if (bgColor) {
-                var x = i * colWidth + offsetX - (offsetX % colWidth);
-                ctx.fillStyle = color || 'white';
-                ctx.fillRect(x, 0, colWidth, rowHeight);
-                if (rowHeight >= 10 && colWidth >= rowHeight / 2) {
-                    ctx.fillStyle = contrastScheme[letter.toUpperCase()] || 'black';
-                    ctx.fillText(letter, x + colWidth / 2, rowHeight / 2 + 1); //+1 to avoid cutoff at height:10
-                }
-            }
-        }
-    }, [
-        bgColor,
-        blockSize,
-        colWidth,
-        rowHeight,
-        offsetX,
-        contrastScheme,
-        colorScheme,
-        highResScaleFactor,
-        data,
-    ]);
-    return (React.createElement("canvas", { ref: ref, height: rowHeight * highResScaleFactor, width: blockSize * highResScaleFactor, style: {
-            position: 'absolute',
-            left: scrollX + offsetX,
-            width: blockSize,
-            height: rowHeight,
-        } }));
-});
-var AnnotationTrack = observer(function (_a) {
-    var track = _a.track, model = _a.model;
-    var blocksX = model.blocksX, msaAreaWidth = model.msaAreaWidth, rowHeight = model.rowHeight;
-    return (React.createElement("div", { style: {
-            position: 'relative',
-            height: rowHeight,
-            width: msaAreaWidth,
-            overflow: 'hidden',
-        } }, blocksX.map(function (bx) { return (React.createElement(AnnotationBlock, { key: bx, track: track, model: model, offsetX: bx })); })));
-});
-export default AnnotationTrack;

package/bundle/components/Track.d.ts

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