react-msaview 1.3.2 → 2.1.0

package/dist/components/MSACanvas.js

@@ -1,130 +1,31 @@
-import React, { useEffect, useState, useRef, useMemo } from 'react';
-import { Typography, CircularProgress, useTheme } from '@material-ui/core';
+import React, { useEffect, useState, useRef } from 'react';
+import { Typography, CircularProgress } from '@mui/material';
 import { observer } from 'mobx-react';
 import normalizeWheel from 'normalize-wheel';
-import { colorContrast } from '../util';
-import { getClustalXColor, getPercentIdentityColor } from '../colorSchemes';
-var MSABlock = observer(function (_a) {
-    var model = _a.model, offsetX = _a.offsetX, offsetY = _a.offsetY;
-    var MSA = model.MSA, colWidth = model.colWidth, bgColor = model.bgColor, columns = model.columns, rowHeight = model.rowHeight, scrollY = model.scrollY, scrollX = model.scrollX, hierarchy = model.hierarchy, colorScheme = model.colorScheme, colorSchemeName = model.colorSchemeName, blockSize = model.blockSize, highResScaleFactor = model.highResScaleFactor, colStats = model.colStats;
-    var theme = useTheme();
-    var contrastScheme = useMemo(function () { return colorContrast(colorScheme, theme); }, [colorScheme, theme]);
-    var ref = useRef(null);
-    useEffect(function () {
-        if (!ref.current) {
-            return;
-        }
-        var ctx = ref.current.getContext('2d');
-        if (!ctx) {
-            return;
-        }
-        ctx.resetTransform();
-        ctx.scale(highResScaleFactor, highResScaleFactor);
-        ctx.clearRect(0, 0, blockSize, blockSize);
-        ctx.translate(-offsetX, rowHeight / 2 - offsetY);
-        ctx.textAlign = 'center';
-        ctx.font = ctx.font.replace(/\d+px/, "".concat(Math.max(8, rowHeight - 8), "px"));
-        var leaves = hierarchy.leaves();
-        var b = blockSize;
-        // slice vertical rows, e.g. tree leaves, avoid negative slice
-        var yStart = Math.max(0, Math.floor((offsetY - rowHeight) / rowHeight));
-        var yEnd = Math.max(0, Math.ceil((offsetY + b + rowHeight) / rowHeight));
-        // slice horizontal visible letters, avoid negative slice
-        var xStart = Math.max(0, Math.floor(offsetX / colWidth));
-        var xEnd = Math.max(0, Math.ceil((offsetX + b) / colWidth));
-        var visibleLeaves = leaves.slice(yStart, yEnd);
-        visibleLeaves.forEach(function (node) {
-            var _a;
-            var 
-            //@ts-ignore
-            y = node.x, name = node.data.name;
-            var str = (_a = columns[name]) === null || _a === void 0 ? void 0 : _a.slice(xStart, xEnd);
-            for (var i = 0; i < (str === null || str === void 0 ? void 0 : str.length); i++) {
-                var letter = str[i];
-                var color = colorSchemeName === 'clustalx_protein_dynamic'
-                    ? getClustalXColor(colStats[xStart + i], model, name, xStart + i)
-                    : colorSchemeName === 'percent_identity_dynamic'
-                        ? getPercentIdentityColor(colStats[xStart + i], model, name, xStart + i)
-                        : colorScheme[letter.toUpperCase()];
-                if (bgColor) {
-                    var x = i * colWidth + offsetX - (offsetX % colWidth);
-                    ctx.fillStyle = color || 'white';
-                    ctx.fillRect(x, y - rowHeight, colWidth, rowHeight);
-                }
-            }
-        });
-        if (rowHeight >= 10 && colWidth >= rowHeight / 2) {
-            visibleLeaves.forEach(function (node) {
-                var _a;
-                var 
-                //@ts-ignore
-                y = node.x, name = node.data.name;
-                var str = (_a = columns[name]) === null || _a === void 0 ? void 0 : _a.slice(xStart, xEnd);
-                for (var i = 0; i < (str === null || str === void 0 ? void 0 : str.length); i++) {
-                    var letter = str[i];
-                    var color = colorScheme[letter.toUpperCase()];
-                    var contrast = contrastScheme[letter.toUpperCase()] || 'black';
-                    var x = i * colWidth + offsetX - (offsetX % colWidth);
-                    //note: -rowHeight/4 matches +rowHeight/4 in tree
-                    ctx.fillStyle = bgColor ? contrast : color || 'black';
-                    ctx.fillText(letter, x + colWidth / 2, y - rowHeight / 4);
-                }
-            });
-        }
-    }, [
-        MSA,
-        highResScaleFactor,
-        columns,
-        colorScheme,
-        contrastScheme,
-        bgColor,
-        rowHeight,
-        colWidth,
-        hierarchy,
-        offsetX,
-        offsetY,
-        blockSize,
-    ]);
-    return (React.createElement("canvas", { ref: ref, onMouseMove: function (event) {
-            if (!ref.current) {
-                return;
-            }
-            var _a = ref.current.getBoundingClientRect(), left = _a.left, top = _a.top;
-            var mouseX = event.clientX - left;
-            var mouseY = event.clientY - top;
-            model.setMousePos(Math.floor((mouseX + offsetX) / colWidth) + 1, Math.floor((mouseY + offsetY) / rowHeight));
-        }, onMouseLeave: function () { return model.setMousePos(); }, width: blockSize * highResScaleFactor, height: blockSize * highResScaleFactor, style: {
-            position: 'absolute',
-            top: scrollY + offsetY,
-            left: scrollX + offsetX,
-            width: blockSize,
-            height: blockSize,
-        } }));
-});
-var MSACanvas = observer(function (_a) {
-    var model = _a.model;
-    var MSA = model.MSA, msaFilehandle = model.msaFilehandle, height = model.height, msaAreaWidth = model.msaAreaWidth, blocks2d = model.blocks2d;
-    var ref = useRef(null);
+import MSABlock from './MSABlock';
+const MSACanvas = observer(function ({ model }) {
+    const { MSA, msaFilehandle, height, msaAreaWidth, blocks2d } = model;
+    const ref = useRef(null);
     // wheel
-    var scheduled = useRef(false);
-    var deltaX = useRef(0);
-    var deltaY = useRef(0);
+    const scheduled = useRef(false);
+    const deltaX = useRef(0);
+    const deltaY = useRef(0);
     // mouse click-and-drag scrolling
-    var prevX = useRef(0);
-    var prevY = useRef(0);
-    var _b = useState(false), mouseDragging = _b[0], setMouseDragging = _b[1];
-    useEffect(function () {
-        var curr = ref.current;
+    const prevX = useRef(0);
+    const prevY = useRef(0);
+    const [mouseDragging, setMouseDragging] = useState(false);
+    useEffect(() => {
+        const curr = ref.current;
         if (!curr) {
             return;
         }
         function onWheel(origEvent) {
-            var event = normalizeWheel(origEvent);
+            const event = normalizeWheel(origEvent);
             deltaX.current += event.pixelX;
             deltaY.current += event.pixelY;
             if (!scheduled.current) {
                 scheduled.current = true;
-                requestAnimationFrame(function () {
+                requestAnimationFrame(() => {
                     model.doScrollX(-deltaX.current);
                     model.doScrollY(-deltaY.current);
                     deltaX.current = 0;
@@ -135,24 +36,24 @@ var MSACanvas = observer(function (_a) {
             origEvent.preventDefault();
         }
         curr.addEventListener('wheel', onWheel);
-        return function () {
+        return () => {
             curr.removeEventListener('wheel', onWheel);
         };
     }, [model]);
-    useEffect(function () {
-        var cleanup = function () { };
+    useEffect(() => {
+        let cleanup = () => { };
         function globalMouseMove(event) {
             event.preventDefault();
-            var currX = event.clientX;
-            var currY = event.clientY;
-            var distanceX = currX - prevX.current;
-            var distanceY = currY - prevY.current;
+            const currX = event.clientX;
+            const currY = event.clientY;
+            const distanceX = currX - prevX.current;
+            const distanceY = currY - prevY.current;
             if (distanceX || distanceY) {
                 // use rAF to make it so multiple event handlers aren't fired per-frame
                 // see https://calendar.perfplanet.com/2013/the-runtime-performance-checklist/
                 if (!scheduled.current) {
                     scheduled.current = true;
-                    window.requestAnimationFrame(function () {
+                    window.requestAnimationFrame(() => {
                         model.doScrollX(distanceX);
                         model.doScrollY(distanceY);
                         scheduled.current = false;
@@ -171,16 +72,16 @@ var MSACanvas = observer(function (_a) {
         if (mouseDragging) {
             window.addEventListener('mousemove', globalMouseMove, true);
             window.addEventListener('mouseup', globalMouseUp, true);
-            cleanup = function () {
+            cleanup = () => {
                 window.removeEventListener('mousemove', globalMouseMove, true);
                 window.removeEventListener('mouseup', globalMouseUp, true);
             };
         }
         return cleanup;
     }, [model, mouseDragging]);
-    return (React.createElement("div", { ref: ref, onMouseDown: function (event) {
+    return (React.createElement("div", { ref: ref, onMouseDown: event => {
             // check if clicking a draggable element or a resize handle
-            var target = event.target;
+            const target = event.target;
             if (target.draggable || target.dataset.resizer) {
                 return;
             }
@@ -190,21 +91,19 @@ var MSACanvas = observer(function (_a) {
                 prevY.current = event.clientY;
                 setMouseDragging(true);
             }
-        }, onMouseUp: function (event) {
+        }, onMouseUp: event => {
             event.preventDefault();
             setMouseDragging(false);
-        }, onMouseLeave: function (event) {
+        }, onMouseLeave: event => {
             event.preventDefault();
         }, style: {
             position: 'relative',
-            height: height,
+            height,
             width: msaAreaWidth,
             overflow: 'hidden',
         } }, !MSA && !msaFilehandle ? null : !MSA ? (React.createElement("div", { style: { position: 'absolute', left: '50%', top: '50%' } },
         React.createElement(CircularProgress, null),
-        React.createElement(Typography, null, "Loading..."))) : (blocks2d.map(function (_a) {
-        var bx = _a[0], by = _a[1];
-        return (React.createElement(MSABlock, { key: "".concat(bx, "_").concat(by), model: model, offsetX: bx, offsetY: by }));
-    }))));
+        React.createElement(Typography, null, "Loading..."))) : (blocks2d.map(([bx, by]) => (React.createElement(MSABlock, { key: `${bx}_${by}`, model: model, offsetX: bx, offsetY: by }))))));
 });
 export default MSACanvas;
+//# sourceMappingURL=MSACanvas.js.map

package/dist/components/MSACanvas.js.map

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

package/dist/components/MSAMouseoverCanvas.d.ts

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

package/dist/components/MSAMouseoverCanvas.js

@@ -0,0 +1,52 @@
+import React, { useEffect, useRef } from 'react';
+import { observer } from 'mobx-react';
+import { sum } from '@jbrowse/core/util';
+const MSAMouseoverCanvas = observer(function ({ model, }) {
+    const ref = useRef(null);
+    const { height, width, treeAreaWidth, resizeHandleWidth, rulerHeight, turnedOnTracks, scrollX, scrollY, mouseCol, mouseRow, rowHeight, colWidth, } = model;
+    const totalTrackAreaHeight = sum(turnedOnTracks.map(r => r.model.height));
+    useEffect(() => {
+        if (!ref.current) {
+            return;
+        }
+        const ctx = ref.current.getContext('2d');
+        if (!ctx) {
+            return;
+        }
+        ctx.resetTransform();
+        ctx.clearRect(0, 0, width, height);
+        ctx.fillStyle = 'rgba(0,0,0,0.15)';
+        if (mouseCol !== undefined) {
+            const x = (mouseCol - 1) * colWidth + scrollX + treeAreaWidth + resizeHandleWidth;
+            ctx.fillRect(x, 0, colWidth, height);
+        }
+        if (mouseRow !== undefined) {
+            const y = mouseRow * rowHeight + scrollY + rulerHeight + totalTrackAreaHeight;
+            ctx.fillRect(treeAreaWidth + resizeHandleWidth, y, width, rowHeight);
+        }
+    }, [
+        mouseCol,
+        colWidth,
+        scrollY,
+        totalTrackAreaHeight,
+        mouseRow,
+        rowHeight,
+        rulerHeight,
+        scrollX,
+        height,
+        resizeHandleWidth,
+        treeAreaWidth,
+        width,
+    ]);
+    return (React.createElement("canvas", { ref: ref, width: width, height: height, style: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width,
+            height,
+            zIndex: 1000,
+            pointerEvents: 'none',
+        } }));
+});
+export default MSAMouseoverCanvas;
+//# sourceMappingURL=MSAMouseoverCanvas.js.map

package/dist/components/MSAMouseoverCanvas.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MSAMouseoverCanvas.js","sourceRoot":"","sources":["../../src/components/MSAMouseoverCanvas.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAIrC,OAAO,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAA;AAExC,MAAM,kBAAkB,GAAG,QAAQ,CAAC,UAAU,EAC5C,KAAK,GAGN;IACC,MAAM,GAAG,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAA;IAC3C,MAAM,EACJ,MAAM,EACN,KAAK,EACL,aAAa,EACb,iBAAiB,EACjB,WAAW,EACX,cAAc,EACd,OAAO,EACP,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,QAAQ,GACT,GAAG,KAAK,CAAA;IACT,MAAM,oBAAoB,GAAG,GAAG,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAA;IACzE,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE;YAChB,OAAM;SACP;QAED,MAAM,GAAG,GAAG,GAAG,CAAC,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC,CAAA;QACxC,IAAI,CAAC,GAAG,EAAE;YACR,OAAM;SACP;QAED,GAAG,CAAC,cAAc,EAAE,CAAA;QACpB,GAAG,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,CAAC,CAAA;QAElC,GAAG,CAAC,SAAS,GAAG,kBAAkB,CAAA;QAClC,IAAI,QAAQ,KAAK,SAAS,EAAE;YAC1B,MAAM,CAAC,GACL,CAAC,QAAQ,GAAG,CAAC,CAAC,GAAG,QAAQ,GAAG,OAAO,GAAG,aAAa,GAAG,iBAAiB,CAAA;YAEzE,GAAG,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAA;SACrC;QACD,IAAI,QAAQ,KAAK,SAAS,EAAE;YAC1B,MAAM,CAAC,GACL,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,WAAW,GAAG,oBAAoB,CAAA;YACrE,GAAG,CAAC,QAAQ,CAAC,aAAa,GAAG,iBAAiB,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,CAAC,CAAA;SACrE;IACH,CAAC,EAAE;QACD,QAAQ;QACR,QAAQ;QACR,OAAO;QACP,oBAAoB;QACpB,QAAQ;QACR,SAAS;QACT,WAAW;QACX,OAAO;QACP,MAAM;QACN,iBAAiB;QACjB,aAAa;QACb,KAAK;KACN,CAAC,CAAA;IAEF,OAAO,CACL,gCACE,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,KAAK,EAAE;YACL,QAAQ,EAAE,UAAU;YACpB,GAAG,EAAE,CAAC;YACN,IAAI,EAAE,CAAC;YACP,KAAK;YACL,MAAM;YACN,MAAM,EAAE,IAAI;YACZ,aAAa,EAAE,MAAM;SACtB,GACD,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,kBAAkB,CAAA"}

package/dist/components/MSAView.d.ts

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

package/dist/components/MSAView.js

@@ -1,17 +1,7 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import React, { useRef, useEffect } from 'react';
+import React, { lazy, Suspense } from 'react';
 import { observer } from 'mobx-react';
-import { Typography } from '@material-ui/core';
+import { Typography } from '@mui/material';
+// locals
 import ImportForm from './ImportForm';
 import Rubberband from './Rubberband';
 import TreeCanvas from './TreeCanvas';
@@ -20,52 +10,14 @@ import Ruler from './Ruler';
 import TreeRuler from './TreeRuler';
 import Header from './Header';
 import Track from './Track';
-import AnnotationDialog from './AnnotationDlg';
 import { HorizontalResizeHandle, VerticalResizeHandle } from './ResizeHandles';
-var MouseoverCanvas = observer(function (_a) {
-    var model = _a.model;
-    var ref = useRef(null);
-    var height = model.height, width = model.width, treeAreaWidth = model.treeAreaWidth, resizeHandleWidth = model.resizeHandleWidth, scrollX = model.scrollX, mouseCol = model.mouseCol, colWidth = model.colWidth;
-    useEffect(function () {
-        if (!ref.current) {
-            return;
-        }
-        var ctx = ref.current.getContext('2d');
-        if (!ctx) {
-            return;
-        }
-        ctx.resetTransform();
-        ctx.clearRect(0, 0, width, height);
-        if (mouseCol !== undefined) {
-            var x = (mouseCol - 1) * colWidth + scrollX + treeAreaWidth + resizeHandleWidth;
-            ctx.fillStyle = 'rgba(100,100,100,0.5)';
-            ctx.fillRect(x, 0, colWidth, height);
-        }
-    }, [
-        mouseCol,
-        colWidth,
-        scrollX,
-        height,
-        resizeHandleWidth,
-        treeAreaWidth,
-        width,
-    ]);
-    return (React.createElement("canvas", { ref: ref, width: width, height: height, style: {
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            width: width,
-            height: height,
-            zIndex: 1000,
-            pointerEvents: 'none',
-        } }));
-});
-export default observer(function (_a) {
-    var model = _a.model;
-    var done = model.done, initialized = model.initialized, treeAreaWidth = model.treeAreaWidth, height = model.height, resizeHandleWidth = model.resizeHandleWidth, turnedOnTracks = model.turnedOnTracks;
+import MSAMouseoverCanvas from './MSAMouseoverCanvas';
+const AnnotationDialog = lazy(() => import('./dialogs/AnnotationDlg'));
+export default observer(function ({ model }) {
+    const { done, initialized, treeAreaWidth, height, turnedOnTracks } = model;
     return (React.createElement("div", null,
         !initialized ? (React.createElement(ImportForm, { model: model })) : !done ? (React.createElement(Typography, { variant: "h4" }, "Loading...")) : (React.createElement("div", null,
-            React.createElement("div", { style: { height: height, overflow: 'hidden' } },
+            React.createElement("div", { style: { height, overflow: 'hidden' } },
                 React.createElement(Header, { model: model }),
                 React.createElement("div", null,
                     React.createElement("div", { style: { position: 'relative' } },
@@ -73,16 +25,19 @@ export default observer(function (_a) {
                             React.createElement("div", { style: { flexShrink: 0, width: treeAreaWidth } },
                                 React.createElement(TreeRuler, { model: model })),
                             React.createElement(Rubberband, { model: model, ControlComponent: React.createElement(Ruler, { model: model }) })), turnedOnTracks === null || turnedOnTracks === void 0 ? void 0 :
-                        turnedOnTracks.map(function (track) { return (React.createElement(Track, { key: track.model.id, model: model, track: track })); }),
+                        turnedOnTracks.map(track => (React.createElement(Track, { key: track.model.id, model: model, track: track }))),
                         React.createElement("div", { style: { display: 'flex' } },
                             React.createElement("div", { style: { flexShrink: 0, width: treeAreaWidth } },
                                 React.createElement(TreeCanvas, { model: model })),
                             React.createElement(VerticalResizeHandle, { model: model }),
                             React.createElement(MSACanvas, { model: model }),
-                            React.createElement(MouseoverCanvas, { model: model }))))),
+                            React.createElement(MSAMouseoverCanvas, { model: model }))))),
             React.createElement(HorizontalResizeHandle, { model: model }))),
-        model.DialogComponent ? (React.createElement(model.DialogComponent, __assign({}, (model.DialogProps || {}), { onClose: function () {
-                model.setDialogComponent(undefined, undefined);
-            } }))) : null,
-        model.annotPos ? (React.createElement(AnnotationDialog, { data: model.annotPos, model: model, onClose: function () { return model.clearAnnotPos(); } })) : null));
+        model.DialogComponent ? (React.createElement(Suspense, { fallback: null },
+            React.createElement(model.DialogComponent, { ...(model.DialogProps || {}), onClose: () => {
+                    model.setDialogComponent(undefined, undefined);
+                } }))) : null,
+        model.annotPos ? (React.createElement(Suspense, { fallback: null },
+            React.createElement(AnnotationDialog, { data: model.annotPos, model: model, onClose: () => model.clearAnnotPos() }))) : null));
 });
+//# sourceMappingURL=MSAView.js.map

package/dist/components/MSAView.js.map

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

package/dist/components/MultiAlignmentSelector.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { MsaViewModel } from '../model';
+declare const MultiAlignmentSelector: ({ model, }: {
+    model: MsaViewModel;
+}) => React.JSX.Element | null;
+export default MultiAlignmentSelector;

package/dist/components/MultiAlignmentSelector.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { observer } from 'mobx-react';
+import { Select } from '@mui/material';
+const MultiAlignmentSelector = observer(function ({ model, }) {
+    const { currentAlignment, alignmentNames } = model;
+    return alignmentNames.length > 0 ? (React.createElement(Select, { native: true, value: currentAlignment, size: "small", onChange: event => {
+            model.setCurrentAlignment(+event.target.value);
+            model.setScrollX(0);
+            model.setScrollY(0);
+        } }, alignmentNames.map((option, index) => (React.createElement("option", { key: `${option}-${index}`, value: index }, option))))) : null;
+});
+export default MultiAlignmentSelector;
+//# sourceMappingURL=MultiAlignmentSelector.js.map

package/dist/components/MultiAlignmentSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiAlignmentSelector.js","sourceRoot":"","sources":["../../src/components/MultiAlignmentSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAKtC,MAAM,sBAAsB,GAAG,QAAQ,CAAC,UAAU,EAChD,KAAK,GAGN;IACC,MAAM,EAAE,gBAAgB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAA;IAClD,OAAO,cAAc,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CACjC,oBAAC,MAAM,IACL,MAAM,QACN,KAAK,EAAE,gBAAgB,EACvB,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,KAAK,CAAC,EAAE;YAChB,KAAK,CAAC,mBAAmB,CAAC,CAAE,KAAK,CAAC,MAAM,CAAC,KAAgB,CAAC,CAAA;YAC1D,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAA;YACnB,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAA;QACrB,CAAC,IAEA,cAAc,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CACrC,gCAAQ,GAAG,EAAE,GAAG,MAAM,IAAI,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,IAC5C,MAAM,CACA,CACV,CAAC,CACK,CACV,CAAC,CAAC,CAAC,IAAI,CAAA;AACV,CAAC,CAAC,CAAA;AACF,eAAe,sBAAsB,CAAA"}

package/dist/components/ResizeHandles.d.ts

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

package/dist/components/ResizeHandles.js

@@ -1,27 +1,26 @@
 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 () {
+export const VerticalResizeHandle = observer(function ({ model, }) {
+    const { resizeHandleWidth } = model;
+    const [mouseDragging, setMouseDragging] = useState(false);
+    const scheduled = useRef(false);
+    const prevX = useRef(0);
+    useEffect(() => {
         function globalMouseMove(event) {
             event.preventDefault();
-            var currX = event.clientX;
+            const currX = event.clientX;
             if (prevX.current === 0) {
                 prevX.current = event.clientX;
             }
             else {
-                var distance_1 = currX - prevX.current;
-                if (distance_1) {
+                const distance = currX - prevX.current;
+                if (distance) {
                     // 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);
+                        window.requestAnimationFrame(() => {
+                            model.setTreeAreaWidth(model.treeAreaWidth + distance);
                             scheduled.current = false;
                             prevX.current = event.clientX;
                         });
@@ -38,44 +37,43 @@ export var VerticalResizeHandle = observer(function (_a) {
         if (mouseDragging) {
             document.addEventListener('mousemove', globalMouseMove, true);
             document.addEventListener('mouseup', globalMouseUp, true);
-            return function () {
+            return () => {
                 document.removeEventListener('mousemove', globalMouseMove, true);
                 document.removeEventListener('mouseup', globalMouseUp, true);
             };
         }
-        return function () { };
+        return () => { };
     }, [mouseDragging, model]);
     return (React.createElement("div", null,
-        React.createElement("div", { onMouseDown: function () { return setMouseDragging(true); }, style: {
+        React.createElement("div", { onMouseDown: () => setMouseDragging(true), style: {
                 cursor: 'ew-resize',
                 height: '100%',
                 width: resizeHandleWidth,
-                background: "rgba(200,200,200)",
+                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 () {
+export const HorizontalResizeHandle = observer(function ({ model, }) {
+    const { resizeHandleWidth } = model;
+    const [mouseDragging, setMouseDragging] = useState(false);
+    const scheduled = useRef(false);
+    const prevY = useRef(0);
+    useEffect(() => {
         function globalMouseMove(event) {
             event.preventDefault();
-            var currY = event.clientY;
+            const currY = event.clientY;
             if (prevY.current === 0) {
                 prevY.current = event.clientY;
             }
             else {
-                var distance_2 = currY - prevY.current;
-                if (distance_2) {
+                const distance = currY - prevY.current;
+                if (distance) {
                     // 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);
+                        window.requestAnimationFrame(() => {
+                            model.setHeight(model.height + distance);
                             scheduled.current = false;
                             prevY.current = event.clientY;
                         });
@@ -92,19 +90,20 @@ export var HorizontalResizeHandle = observer(function (_a) {
         if (mouseDragging) {
             document.addEventListener('mousemove', globalMouseMove, true);
             document.addEventListener('mouseup', globalMouseUp, true);
-            return function () {
+            return () => {
                 document.removeEventListener('mousemove', globalMouseMove, true);
                 document.removeEventListener('mouseup', globalMouseUp, true);
             };
         }
-        return function () { };
+        return () => { };
     }, [mouseDragging, model]);
     return (React.createElement("div", null,
-        React.createElement("div", { onMouseDown: function () { return setMouseDragging(true); }, style: {
+        React.createElement("div", { onMouseDown: () => setMouseDragging(true), style: {
                 cursor: 'ns-resize',
                 width: '100%',
                 height: resizeHandleWidth,
-                background: "rgba(200,200,200)",
+                background: `rgba(200,200,200)`,
                 position: 'relative',
             } })));
 });
+//# sourceMappingURL=ResizeHandles.js.map

package/dist/components/ResizeHandles.js.map

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

package/dist/components/Rubberband.d.ts

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