react-msaview 1.3.1 → 2.0.0

package/dist/components/Rubberband.js

@@ -1,18 +1,19 @@
 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 { makeStyles } from 'tss-react/mui';
+import { Popover, Typography, alpha } from '@mui/material';
 import { Menu } from '@jbrowse/core/ui';
-var useStyles = makeStyles(function (theme) {
-    var background = theme.palette.tertiary
+// icons
+import AssignmentIcon from '@mui/icons-material/Assignment';
+import VerticalGuide from './VerticalGuide';
+const useStyles = makeStyles()(theme => {
+    const background = 'tertiary' in theme.palette && theme.palette.tertiary
         ? alpha(theme.palette.tertiary.main, 0.7)
         : alpha(theme.palette.primary.main, 0.7);
     return {
         rubberband: {
             height: '100%',
-            background: background,
+            background,
             position: 'absolute',
             zIndex: 10,
             textAlign: 'center',
@@ -36,62 +37,38 @@ var useStyles = makeStyles(function (theme) {
             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];
+function Rubberband({ model, ControlComponent = React.createElement("div", null), }) {
+    const { treeAreaWidth } = model;
+    const [startX, setStartX] = useState();
+    const [currentX, setCurrentX] = useState();
     // 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 () {
+    const [anchorPosition, setAnchorPosition] = useState();
+    const [guideX, setGuideX] = useState();
+    const controlsRef = useRef(null);
+    const rubberbandRef = useRef(null);
+    const { classes } = useStyles();
+    const mouseDragging = startX !== undefined && anchorPosition === undefined;
+    useEffect(() => {
         function globalMouseMove(event) {
             if (controlsRef.current && mouseDragging) {
-                var relativeX = event.clientX - controlsRef.current.getBoundingClientRect().left;
+                const 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;
+                const { clientX, clientY } = event;
+                const ref = controlsRef.current;
+                const offsetX = clientX - ref.getBoundingClientRect().left;
                 // as stated above, store both clientX/Y and offsetX for different
                 // purposes
                 setAnchorPosition({
-                    offsetX: offsetX,
-                    clientX: clientX,
-                    clientY: clientY,
+                    offsetX,
+                    clientX,
+                    clientY,
                 });
                 setGuideX(undefined);
             }
@@ -99,14 +76,14 @@ function Rubberband(_a) {
         if (mouseDragging) {
             window.addEventListener('mousemove', globalMouseMove);
             window.addEventListener('mouseup', globalMouseUp);
-            return function () {
+            return () => {
                 window.removeEventListener('mousemove', globalMouseMove);
                 window.removeEventListener('mouseup', globalMouseUp);
             };
         }
-        return function () { };
+        return () => { };
     }, [startX, mouseDragging, anchorPosition]);
-    useEffect(function () {
+    useEffect(() => {
         if (!mouseDragging &&
             currentX !== undefined &&
             startX !== undefined &&
@@ -117,13 +94,13 @@ function Rubberband(_a) {
     function mouseDown(event) {
         event.preventDefault();
         event.stopPropagation();
-        var relativeX = event.clientX -
+        const relativeX = event.clientX -
             event.target.getBoundingClientRect().left;
         setStartX(relativeX);
         setCurrentX(relativeX);
     }
     function mouseMove(event) {
-        var target = event.target;
+        const target = event.target;
         setGuideX(event.clientX - target.getBoundingClientRect().left);
     }
     function mouseOut() {
@@ -135,7 +112,7 @@ function Rubberband(_a) {
         setStartX(undefined);
         setCurrentX(undefined);
     }
-    //eslint-disable-next-line @typescript-eslint/ban-types
+    // eslint-disable-next-line @typescript-eslint/ban-types
     function handleMenuItemClick(_, callback) {
         callback();
         handleClose();
@@ -145,17 +122,17 @@ function Rubberband(_a) {
             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 = [
+    const right = anchorPosition ? anchorPosition.offsetX : currentX || 0;
+    const left = right < startX ? right : startX;
+    const width = Math.abs(right - startX);
+    const leftBpOffset = model.pxToBp(left);
+    const rightBpOffset = model.pxToBp(left + width);
+    const numOfBpSelected = Math.ceil(width / model.colWidth);
+    const menuItems = [
         {
             label: 'Create annotation',
             icon: AssignmentIcon,
-            onClick: function () {
+            onClick: () => {
                 model.setOffsets(leftBpOffset, rightBpOffset);
                 handleClose();
             },
@@ -183,7 +160,7 @@ function Rubberband(_a) {
                     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("div", { ref: rubberbandRef, className: classes.rubberband, style: { left: left + treeAreaWidth, width } },
             React.createElement(Typography, { variant: "h6", className: classes.rubberbandText },
                 numOfBpSelected.toLocaleString('en-US'),
                 " bp")),
@@ -194,3 +171,4 @@ function Rubberband(_a) {
             }, onMenuItemClick: handleMenuItemClick, open: Boolean(anchorPosition), onClose: handleClose, menuItems: menuItems })) : null));
 }
 export default observer(Rubberband);
+//# sourceMappingURL=Rubberband.js.map

package/dist/components/Rubberband.js.map

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

package/dist/components/Ruler.d.ts

@@ -1,19 +1,4 @@
-/// <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;

package/dist/components/Ruler.js

@@ -1,76 +1,8 @@
 import React, { useRef } from 'react';
-import { makeStyles } from '@material-ui/core';
+import { makeStyles } from 'tss-react/mui';
 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 ({
+import { makeTicks, mathPower } from './util';
+const useStyles = makeStyles()({
     majorTickLabel: {
         fontSize: '11px',
     },
@@ -80,28 +12,26 @@ var useStyles = makeStyles(function ( /* theme */) { return ({
     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);
+});
+function RulerBlock({ start, end, bpPerPx, reversed, major, minor, }) {
+    const { classes } = useStyles();
+    const 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;
+        ticks.map(tick => {
+            const 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)));
+            .filter(tick => tick.type === 'major')
+            .map(tick => {
+            const 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];
+const Ruler = observer(function ({ model }) {
+    const { MSA, colWidth, msaAreaWidth, resizeHandleWidth, scrollX, blocksX, blockSize, } = model;
+    const ref = useRef(null);
+    const offsetX = blocksX[0];
     return !MSA ? null : (React.createElement("div", { ref: ref, style: {
             position: 'relative',
             width: msaAreaWidth,
@@ -119,3 +49,4 @@ var Ruler = observer(function (_a) {
             React.createElement(RulerBlock, { key: offsetX, start: offsetX / colWidth, end: offsetX / colWidth + (blockSize * blocksX.length) / colWidth, bpPerPx: 1 / colWidth }))));
 });
 export default Ruler;
+//# sourceMappingURL=Ruler.js.map

package/dist/components/Ruler.js.map

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

package/dist/components/SettingsDlg.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { MsaViewModel } from '../model';
 declare const _default: ({ model, onClose, open, }: {
     model: MsaViewModel;

package/dist/components/SettingsDlg.js

@@ -1,35 +1,41 @@
 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 { makeStyles } from 'tss-react/mui';
+import { Dialog } from '@jbrowse/core/ui';
+import { Button, Checkbox, DialogActions, DialogContent, FormControlLabel, MenuItem, TextField, } from '@mui/material';
 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];
+const useStyles = makeStyles()(theme => ({
+    field: {
+        margin: theme.spacing(4),
+    },
+}));
+export default observer(function ({ model, onClose, open, }) {
+    const { classes } = useStyles();
+    const { colorSchemeName, noTree } = model;
+    const [rowHeight, setRowHeight] = useState(`${model.rowHeight}`);
+    const [colWidth, setColWidth] = useState(`${model.colWidth}`);
+    const [treeWidth, setTreeWidth] = useState(`${model.treeWidth}`);
     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"),
+    const rowHeightError = error(rowHeight);
+    const colWidthError = error(colWidth);
+    const treeWidthError = error(treeWidth);
+    return (React.createElement(Dialog, { onClose: () => onClose(), open: open, title: "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(FormControlLabel, { control: React.createElement(Checkbox, { checked: model.showBranchLen, onChange: () => model.toggleBranchLen() }), label: "Show branch length" }),
+            React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { checked: model.bgColor, onChange: () => model.toggleBgColor() }), label: "Color background" }),
+            React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { checked: model.drawNodeBubbles, onChange: () => model.toggleNodeBubbles() }), label: "Draw node bubbles" }),
+            React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { checked: model.drawTree, onChange: () => model.toggleDrawTree() }), label: "Draw tree (if available)" }),
+            React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { checked: model.labelsAlignRight, onChange: () => 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, { className: classes.field, label: "Row height (px)", value: rowHeight, error: rowHeightError, onChange: event => setRowHeight(event.target.value) }),
+            React.createElement(TextField, { className: classes.field, label: "Column width (px)", value: colWidth, error: colWidthError, onChange: event => 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,
+            !noTree ? (React.createElement(TextField, { className: classes.field, label: "Tree width (px)", value: treeWidth, error: treeWidthError, onChange: event => 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(TextField, { select: true, label: "Color scheme", value: colorSchemeName, onChange: event => model.setColorSchemeName(event.target.value) }, Object.keys(colorSchemes).map(option => (React.createElement(MenuItem, { key: option, value: option }, option)))),
             React.createElement(DialogActions, null,
-                React.createElement(Button, { disabled: rowHeightError || colWidthError || treeWidthError, onClick: function () {
+                React.createElement(Button, { disabled: rowHeightError || colWidthError || treeWidthError, onClick: () => {
                         model.setRowHeight(+rowHeight);
                         model.setColWidth(+colWidth);
                         if (!noTree) {
@@ -38,3 +44,4 @@ export default observer(function (_a) {
                         onClose();
                     }, variant: "contained", color: "primary" }, "Submit")))));
 });
+//# sourceMappingURL=SettingsDlg.js.map

package/dist/components/SettingsDlg.js.map

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

package/dist/components/TextTrack.d.ts

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

package/dist/components/TextTrack.js

@@ -1,20 +1,19 @@
 import React, { useRef, useMemo, useEffect } from 'react';
-import { useTheme } from '@material-ui/core';
+import { useTheme } from '@mui/material';
 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 () {
+const AnnotationBlock = observer(function ({ track, model, offsetX, }) {
+    const { blockSize, scrollX, bgColor, colorScheme: modelColorScheme, colWidth, rowHeight, highResScaleFactor, } = model;
+    const { model: { customColorScheme, data }, } = track;
+    const colorScheme = customColorScheme || modelColorScheme;
+    const theme = useTheme();
+    const ref = useRef(null);
+    const contrastScheme = useMemo(() => colorContrast(colorScheme, theme), [colorScheme, theme]);
+    useEffect(() => {
         if (!ref.current) {
             return;
         }
-        var ctx = ref.current.getContext('2d');
+        const ctx = ref.current.getContext('2d');
         if (!ctx) {
             return;
         }
@@ -24,20 +23,20 @@ var AnnotationBlock = observer(function (_a) {
         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()];
+        ctx.font = ctx.font.replace(/\d+px/, `${Math.max(8, rowHeight - 8)}px`);
+        const xStart = Math.max(0, Math.floor(offsetX / colWidth));
+        const xEnd = Math.max(0, Math.ceil((offsetX + blockSize) / colWidth));
+        const str = data === null || data === void 0 ? void 0 : data.slice(xStart, xEnd);
+        for (let i = 0; str && i < str.length; i++) {
+            const letter = str[i];
+            const color = colorScheme[letter.toUpperCase()];
             if (bgColor) {
-                var x = i * colWidth + offsetX - (offsetX % colWidth);
+                const 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
+                    ctx.fillText(letter, x + colWidth / 2, rowHeight / 2 + 1); // +1 to avoid cutoff at height:10
                 }
             }
         }
@@ -59,14 +58,14 @@ var AnnotationBlock = observer(function (_a) {
             height: rowHeight,
         } }));
 });
-var AnnotationTrack = observer(function (_a) {
-    var track = _a.track, model = _a.model;
-    var blocksX = model.blocksX, msaAreaWidth = model.msaAreaWidth, rowHeight = model.rowHeight;
+const AnnotationTrack = observer(function ({ track, model, }) {
+    const { blocksX, msaAreaWidth, rowHeight } = model;
     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 })); })));
+        } }, blocksX.map(bx => (React.createElement(AnnotationBlock, { key: bx, track: track, model: model, offsetX: bx })))));
 });
 export default AnnotationTrack;
+//# sourceMappingURL=TextTrack.js.map

package/dist/components/TextTrack.js.map

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

package/dist/components/Track.d.ts

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