react-msaview 1.3.2 → 2.1.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: "".concat(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,6 @@ function Rubberband(_a) {
         setStartX(undefined);
         setCurrentX(undefined);
     }
-    //eslint-disable-next-line @typescript-eslint/ban-types
     function handleMenuItemClick(_, callback) {
         callback();
         handleClose();
@@ -145,17 +121,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 +159,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 +170,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,20 +1,6 @@
-/// <reference types="react" />
+import React from '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;
+}) => React.JSX.Element | null;
 export default Ruler;

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 "".concat(mathPower(~~(num / 1000)), ",").concat("00".concat(~~(num % 1000)).substr(-3, 3));
-}
-var useStyles = makeStyles(function ( /* theme */) { return ({
+import { makeTicks, mathPower } from './util';
+const useStyles = makeStyles()({
     majorTickLabel: {
         fontSize: '11px',
     },
@@ -80,34 +12,32 @@ 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-".concat(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, rulerHeight, 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,
             cursor: 'crosshair',
             overflow: 'hidden',
-            height: 20,
+            height: rulerHeight,
             background: '#ccc',
         } },
         React.createElement("svg", { style: {
@@ -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/TextTrack.d.ts

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

package/dist/components/Track.js

@@ -1,65 +1,66 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef, useEffect, lazy, Suspense } from 'react';
 import normalizeWheel from 'normalize-wheel';
 import { observer } from 'mobx-react';
-import { IconButton, Menu, MenuItem, makeStyles } from '@material-ui/core';
-import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
-import TrackInfoDialog from './TrackInfoDlg';
-var useStyles = makeStyles(function () { return ({
+import { IconButton, Menu, MenuItem } from '@mui/material';
+import { makeStyles } from 'tss-react/mui';
+// icons
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+const TrackInfoDialog = lazy(() => import('./dialogs/TrackInfoDlg'));
+const useStyles = makeStyles()({
     button: {
         padding: 0,
     },
-}); });
-export var TrackLabel = observer(function (_a) {
-    var model = _a.model, track = _a.track;
-    var _b = useState(), anchorEl = _b[0], setAnchorEl = _b[1];
-    var _c = useState(false), trackInfoDlgOpen = _c[0], setTrackInfoDlgOpen = _c[1];
-    var rowHeight = model.rowHeight, width = model.treeAreaWidth;
-    var height = track.height, name = track.model.name;
-    var classes = useStyles();
-    var trackLabelHeight = Math.max(8, rowHeight - 8);
+});
+export const TrackLabel = observer(function ({ model, track, }) {
+    const [anchorEl, setAnchorEl] = useState();
+    const [trackInfoDlgOpen, setTrackInfoDlgOpen] = useState(false);
+    const { rowHeight, treeAreaWidth: width } = model;
+    const { height, model: { name }, } = track;
+    const { classes } = useStyles();
+    const trackLabelHeight = Math.max(8, rowHeight - 8);
     return (React.createElement("div", { style: {
-            width: width,
-            height: height,
+            width,
+            height,
             flexShrink: 0,
             textAlign: 'right',
             fontSize: trackLabelHeight,
         } },
         name,
-        React.createElement(IconButton, { className: classes.button, style: { width: trackLabelHeight, height: trackLabelHeight }, onClick: function (event) {
-                setAnchorEl(event.target);
-            } },
+        ' ',
+        React.createElement(IconButton, { className: classes.button, style: {
+                width: trackLabelHeight,
+                height: trackLabelHeight,
+            }, onClick: event => setAnchorEl(event.currentTarget) },
             React.createElement(ArrowDropDownIcon, null)),
-        anchorEl ? (React.createElement(Menu, { anchorEl: anchorEl, transitionDuration: 0, open: true, onClose: function () {
-                setAnchorEl(undefined);
-            } },
-            React.createElement(MenuItem, { dense: true, onClick: function () {
+        anchorEl ? (React.createElement(Menu, { anchorEl: anchorEl, transitionDuration: 0, open: true, onClose: () => setAnchorEl(undefined) },
+            React.createElement(MenuItem, { dense: true, onClick: () => {
                     model.toggleTrack(track.model.id);
                     setAnchorEl(undefined);
                 } }, "Close"),
-            React.createElement(MenuItem, { dense: true, onClick: function () {
+            React.createElement(MenuItem, { dense: true, onClick: () => {
                     setTrackInfoDlgOpen(true);
                     setAnchorEl(undefined);
                 } }, "Get info"))) : null,
-        trackInfoDlgOpen ? (React.createElement(TrackInfoDialog, { model: track.model, onClose: function () { return setTrackInfoDlgOpen(false); } })) : null));
+        trackInfoDlgOpen ? (React.createElement(Suspense, { fallback: null },
+            React.createElement(TrackInfoDialog, { model: track.model, onClose: () => setTrackInfoDlgOpen(false) }))) : null));
 });
-var Track = observer(function (_a) {
-    var model = _a.model, track = _a.track;
-    var resizeHandleWidth = model.resizeHandleWidth;
-    var height = track.model.height;
-    var ref = useRef(null);
-    var scheduled = useRef(false);
-    var deltaX = useRef(0);
-    useEffect(function () {
-        var curr = ref.current;
+const Track = observer(function ({ model, track, }) {
+    const { resizeHandleWidth } = model;
+    const { model: { height, error }, } = track;
+    const ref = useRef(null);
+    const scheduled = useRef(false);
+    const deltaX = useRef(0);
+    useEffect(() => {
+        const curr = ref.current;
         if (!curr) {
             return;
         }
         function onWheel(origEvent) {
-            var event = normalizeWheel(origEvent);
+            const event = normalizeWheel(origEvent);
             deltaX.current += event.pixelX;
             if (!scheduled.current) {
                 scheduled.current = true;
-                requestAnimationFrame(function () {
+                requestAnimationFrame(() => {
                     model.doScrollX(-deltaX.current);
                     deltaX.current = 0;
                     scheduled.current = false;
@@ -68,14 +69,14 @@ var Track = observer(function (_a) {
             origEvent.preventDefault();
         }
         curr.addEventListener('wheel', onWheel);
-        return function () {
+        return () => {
             curr.removeEventListener('wheel', onWheel);
         };
     }, [model]);
-    return (React.createElement("div", { key: track.id, style: { display: 'flex', height: height } },
+    return (React.createElement("div", { key: track.id, style: { display: 'flex', height } },
         React.createElement(TrackLabel, { model: model, track: track }),
         React.createElement("div", { style: { width: resizeHandleWidth, flexShrink: 0 } }),
-        React.createElement("div", { ref: ref },
-            React.createElement(track.ReactComponent, { model: model, track: track }))));
+        React.createElement("div", { ref: ref }, error ? (React.createElement("div", { style: { color: 'red', fontSize: 10 } }, `${error}`)) : (React.createElement(track.ReactComponent, { model: model, track: track })))));
 });
 export default Track;
+//# sourceMappingURL=Track.js.map

package/dist/components/Track.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Track.js","sourceRoot":"","sources":["../../src/components/Track.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC1E,OAAO,cAAc,MAAM,iBAAiB,CAAA;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAC1D,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAE1C,QAAQ;AACR,OAAO,iBAAiB,MAAM,mCAAmC,CAAA;AAKjE,MAAM,eAAe,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,wBAAwB,CAAC,CAAC,CAAA;AAEpE,MAAM,SAAS,GAAG,UAAU,EAAE,CAAC;IAC7B,MAAM,EAAE;QACN,OAAO,EAAE,CAAC;KACX;CACF,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC,UAAU,EAC3C,KAAK,EACL,KAAK,GAKN;IACC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,EAAqB,CAAA;IAC7D,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAC/D,MAAM,EAAE,SAAS,EAAE,aAAa,EAAE,KAAK,EAAE,GAAG,KAAK,CAAA;IACjD,MAAM,EACJ,MAAM,EACN,KAAK,EAAE,EAAE,IAAI,EAAE,GAChB,GAAG,KAAK,CAAA;IACT,MAAM,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,CAAA;IAC/B,MAAM,gBAAgB,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC,CAAA;IAEnD,OAAO,CACL,6BACE,KAAK,EAAE;YACL,KAAK;YACL,MAAM;YACN,UAAU,EAAE,CAAC;YACb,SAAS,EAAE,OAAO;YAClB,QAAQ,EAAE,gBAAgB;SAC3B;QAEA,IAAI;QAAE,GAAG;QACV,oBAAC,UAAU,IACT,SAAS,EAAE,OAAO,CAAC,MAAM,EACzB,KAAK,EAAE;gBACL,KAAK,EAAE,gBAAgB;gBACvB,MAAM,EAAE,gBAAgB;aACzB,EACD,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,aAAa,CAAC;YAElD,oBAAC,iBAAiB,OAAG,CACV;QACZ,QAAQ,CAAC,CAAC,CAAC,CACV,oBAAC,IAAI,IACH,QAAQ,EAAE,QAAQ,EAClB,kBAAkB,EAAE,CAAC,EACrB,IAAI,QACJ,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,SAAS,CAAC;YAErC,oBAAC,QAAQ,IACP,KAAK,QACL,OAAO,EAAE,GAAG,EAAE;oBACZ,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,CAAA;oBACjC,WAAW,CAAC,SAAS,CAAC,CAAA;gBACxB,CAAC,YAGQ;YACX,oBAAC,QAAQ,IACP,KAAK,QACL,OAAO,EAAE,GAAG,EAAE;oBACZ,mBAAmB,CAAC,IAAI,CAAC,CAAA;oBACzB,WAAW,CAAC,SAAS,CAAC,CAAA;gBACxB,CAAC,eAGQ,CACN,CACR,CAAC,CAAC,CAAC,IAAI;QACP,gBAAgB,CAAC,CAAC,CAAC,CAClB,oBAAC,QAAQ,IAAC,QAAQ,EAAE,IAAI;YACtB,oBAAC,eAAe,IACd,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,OAAO,EAAE,GAAG,EAAE,CAAC,mBAAmB,CAAC,KAAK,CAAC,GACzC,CACO,CACZ,CAAC,CAAC,CAAC,IAAI,CACJ,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,KAAK,GAAG,QAAQ,CAAC,UAAU,EAC/B,KAAK,EACL,KAAK,GAKN;IACC,MAAM,EAAE,iBAAiB,EAAE,GAAG,KAAK,CAAA;IACnC,MAAM,EACJ,KAAK,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,GACzB,GAAG,KAAK,CAAA;IACT,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IACxC,MAAM,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;IAC/B,MAAM,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC,CAAA;IACxB,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,IAAI,GAAG,GAAG,CAAC,OAAO,CAAA;QACxB,IAAI,CAAC,IAAI,EAAE;YACT,OAAM;SACP;QACD,SAAS,OAAO,CAAC,SAAqB;YACpC,MAAM,KAAK,GAAG,cAAc,CAAC,SAAS,CAAC,CAAA;YACvC,MAAM,CAAC,OAAO,IAAI,KAAK,CAAC,MAAM,CAAA;YAE9B,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE;gBACtB,SAAS,CAAC,OAAO,GAAG,IAAI,CAAA;gBACxB,qBAAqB,CAAC,GAAG,EAAE;oBACzB,KAAK,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;oBAChC,MAAM,CAAC,OAAO,GAAG,CAAC,CAAA;oBAClB,SAAS,CAAC,OAAO,GAAG,KAAK,CAAA;gBAC3B,CAAC,CAAC,CAAA;aACH;YACD,SAAS,CAAC,cAAc,EAAE,CAAA;QAC5B,CAAC;QACD,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAA;QACvC,OAAO,GAAG,EAAE;YACV,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAA;QAC5C,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IACX,OAAO,CACL,6BAAK,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE;QACpD,oBAAC,UAAU,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,GAAI;QAC1C,6BAAK,KAAK,EAAE,EAAE,KAAK,EAAE,iBAAiB,EAAE,UAAU,EAAE,CAAC,EAAE,GAAI;QAC3D,6BAAK,GAAG,EAAE,GAAG,IACV,KAAK,CAAC,CAAC,CAAC,CACP,6BAAK,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE,IAAG,GAAG,KAAK,EAAE,CAAO,CAC/D,CAAC,CAAC,CAAC,CACF,oBAAC,KAAK,CAAC,cAAc,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,GAAI,CACrD,CACG,CACF,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,KAAK,CAAA"}