react-msaview 1.2.10 → 1.3.2

package/bundle/components/MoreInfoDlg.js

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

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

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

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

@@ -0,0 +1,196 @@
+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.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { MsaViewModel } from '../model';
+/**
+ * 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 declare function chooseGridPitch(scale: number, minMajorPitchPx: number, minMinorPitchPx: number): {
+    majorPitch: number;
+    minorPitch: number;
+};
+export declare function makeTicks(start: number, end: number, bpPerPx: number, emitMajor?: boolean, emitMinor?: boolean): {
+    type: string;
+    base: number;
+    index: number;
+}[];
+declare const Ruler: ({ model }: {
+    model: MsaViewModel;
+}) => JSX.Element | null;
+export default Ruler;

package/bundle/components/Ruler.js

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

@@ -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/SettingsDlg.js

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

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

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

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