@jbrowse/plugin-dotplot-view 2.17.0 → 3.0.0

package/dist/DotplotView/components/CursorIcon.js

@@ -5,13 +5,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CursorMove = CursorMove;
 exports.CursorMouse = CursorMouse;
+const jsx_runtime_1 = require("react/jsx-runtime");
 const SvgIcon_1 = __importDefault(require("@mui/material/SvgIcon"));
-const react_1 = __importDefault(require("react"));
 function CursorMove(props) {
-    return (react_1.default.createElement(SvgIcon_1.default, { ...props },
-        react_1.default.createElement("path", { fill: "currentColor", d: "M13,6V11H18V7.75L22.25,12L18,16.25V13H13V18H16.25L12,22.25L7.75,18H11V13H6V16.25L1.75,12L6,7.75V11H11V6H7.75L12,1.75L16.25,6H13Z" })));
+    return ((0, jsx_runtime_1.jsx)(SvgIcon_1.default, { ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M13,6V11H18V7.75L22.25,12L18,16.25V13H13V18H16.25L12,22.25L7.75,18H11V13H6V16.25L1.75,12L6,7.75V11H11V6H7.75L12,1.75L16.25,6H13Z" }) }));
 }
 function CursorMouse(props) {
-    return (react_1.default.createElement(SvgIcon_1.default, { ...props },
-        react_1.default.createElement("path", { fill: "currentColor", d: "M10.07,14.27C10.57,14.03 11.16,14.25 11.4,14.75L13.7,19.74L15.5,18.89L13.19,13.91C12.95,13.41 13.17,12.81 13.67,12.58L13.95,12.5L16.25,12.05L8,5.12V15.9L9.82,14.43L10.07,14.27M13.64,21.97C13.14,22.21 12.54,22 12.31,21.5L10.13,16.76L7.62,18.78C7.45,18.92 7.24,19 7,19A1,1 0 0,1 6,18V3A1,1 0 0,1 7,2C7.24,2 7.47,2.09 7.64,2.23L7.65,2.22L19.14,11.86C19.57,12.22 19.62,12.85 19.27,13.27C19.12,13.45 18.91,13.57 18.7,13.61L15.54,14.23L17.74,18.96C18,19.46 17.76,20.05 17.26,20.28L13.64,21.97Z" })));
+    return ((0, jsx_runtime_1.jsx)(SvgIcon_1.default, { ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M10.07,14.27C10.57,14.03 11.16,14.25 11.4,14.75L13.7,19.74L15.5,18.89L13.19,13.91C12.95,13.41 13.17,12.81 13.67,12.58L13.95,12.5L16.25,12.05L8,5.12V15.9L9.82,14.43L10.07,14.27M13.64,21.97C13.14,22.21 12.54,22 12.31,21.5L10.13,16.76L7.62,18.78C7.45,18.92 7.24,19 7,19A1,1 0 0,1 6,18V3A1,1 0 0,1 7,2C7.24,2 7.47,2.09 7.64,2.23L7.65,2.22L19.14,11.86C19.57,12.22 19.62,12.85 19.27,13.27C19.12,13.45 18.91,13.57 18.7,13.61L15.54,14.23L17.74,18.96C18,19.46 17.76,20.05 17.26,20.28L13.64,21.97Z" }) }));
 }

package/dist/DotplotView/components/DotplotControls.d.ts

@@ -1,6 +1,5 @@
-import React from 'react';
-import { DotplotViewModel } from '../model';
+import type { DotplotViewModel } from '../model';
 declare const DotplotControls: ({ model, }: {
     model: DotplotViewModel;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default DotplotControls;

package/dist/DotplotView/components/DotplotControls.js

@@ -3,116 +3,113 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const material_1 = require("@mui/material");
-const mobx_react_1 = require("mobx-react");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const CascadingMenuButton_1 = __importDefault(require("@jbrowse/core/ui/CascadingMenuButton"));
-// icons
-const ZoomOut_1 = __importDefault(require("@mui/icons-material/ZoomOut"));
-const ZoomIn_1 = __importDefault(require("@mui/icons-material/ZoomIn"));
+const Icons_1 = require("@jbrowse/core/ui/Icons");
+const CropDin_1 = __importDefault(require("@mui/icons-material/CropDin"));
+const CropLandscape_1 = __importDefault(require("@mui/icons-material/CropLandscape"));
 const MoreVert_1 = __importDefault(require("@mui/icons-material/MoreVert"));
+const SettingsOverscan_1 = __importDefault(require("@mui/icons-material/SettingsOverscan"));
+const ZoomIn_1 = __importDefault(require("@mui/icons-material/ZoomIn"));
+const ZoomOut_1 = __importDefault(require("@mui/icons-material/ZoomOut"));
+const material_1 = require("@mui/material");
+const mobx_react_1 = require("mobx-react");
 const CursorIcon_1 = require("./CursorIcon");
-const Icons_1 = require("@jbrowse/core/ui/Icons");
 const DotplotControls = (0, mobx_react_1.observer)(function ({ model, }) {
-    return (react_1.default.createElement("div", null,
-        react_1.default.createElement(material_1.IconButton, { onClick: () => {
-                model.zoomOut();
-            } },
-            react_1.default.createElement(ZoomOut_1.default, null)),
-        react_1.default.createElement(material_1.IconButton, { onClick: () => {
-                model.zoomIn();
-            } },
-            react_1.default.createElement(ZoomIn_1.default, null)),
-        react_1.default.createElement(material_1.IconButton, { onClick: () => model.activateTrackSelector(), title: "Open track selector" },
-            react_1.default.createElement(Icons_1.TrackSelector, null)),
-        react_1.default.createElement(CascadingMenuButton_1.default, { menuItems: [
-                {
-                    onClick: () => {
-                        model.squareView();
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: () => {
+                    model.zoomOut();
+                }, children: (0, jsx_runtime_1.jsx)(ZoomOut_1.default, {}) }), (0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: () => {
+                    model.zoomIn();
+                }, children: (0, jsx_runtime_1.jsx)(ZoomIn_1.default, {}) }), (0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: () => model.activateTrackSelector(), title: "Open track selector", children: (0, jsx_runtime_1.jsx)(Icons_1.TrackSelector, {}) }), (0, jsx_runtime_1.jsx)(CascadingMenuButton_1.default, { menuItems: [
+                    {
+                        label: 'Square view - same bp per pixel',
+                        icon: CropDin_1.default,
+                        onClick: () => {
+                            model.squareView();
+                        },
                     },
-                    label: 'Square view - same base pairs per pixel',
-                },
-                {
-                    onClick: () => {
-                        model.squareViewProportional();
+                    {
+                        label: 'Rectangular view - same total bp',
+                        icon: CropLandscape_1.default,
+                        onClick: () => {
+                            model.squareViewProportional();
+                        },
                     },
-                    label: 'Rectanglularize view - same total bp',
-                },
-                {
-                    onClick: () => {
-                        model.showAllRegions();
+                    {
+                        label: 'Show all regions',
+                        icon: SettingsOverscan_1.default,
+                        onClick: () => {
+                            model.showAllRegions();
+                        },
                     },
-                    label: 'Show all regions',
-                },
-                {
-                    onClick: () => {
-                        model.setDrawCigar(!model.drawCigar);
+                    {
+                        type: 'checkbox',
+                        label: 'Draw CIGAR',
+                        checked: model.drawCigar,
+                        onClick: () => {
+                            model.setDrawCigar(!model.drawCigar);
+                        },
                     },
-                    type: 'checkbox',
-                    label: 'Draw CIGAR',
-                    checked: model.drawCigar,
-                },
-                {
-                    onClick: () => {
-                        model.setShowPanButtons(!model.showPanButtons);
+                    {
+                        label: 'Show pan buttons',
+                        type: 'checkbox',
+                        checked: model.showPanButtons,
+                        onClick: () => {
+                            model.setShowPanButtons(!model.showPanButtons);
+                        },
                     },
-                    label: 'Show pan buttons',
-                    type: 'checkbox',
-                    checked: model.showPanButtons,
-                },
-                {
-                    label: 'Click and drag mode',
-                    subMenu: [
-                        {
-                            onClick: () => {
-                                model.setCursorMode('move');
+                    {
+                        label: 'Click and drag mode',
+                        subMenu: [
+                            {
+                                label: 'Pan by default, select region when ctrl/cmd key is held',
+                                icon: CursorIcon_1.CursorMove,
+                                type: 'radio',
+                                checked: model.cursorMode === 'move',
+                                onClick: () => {
+                                    model.setCursorMode('move');
+                                },
                             },
-                            label: 'Pan by default, select region when ctrl/cmd key is held',
-                            icon: CursorIcon_1.CursorMove,
-                            type: 'radio',
-                            checked: model.cursorMode === 'move',
-                        },
-                        {
-                            onClick: () => {
-                                model.setCursorMode('crosshair');
+                            {
+                                label: 'Select region by default, pan when ctrl/cmd key is held',
+                                icon: CursorIcon_1.CursorMouse,
+                                type: 'radio',
+                                checked: model.cursorMode === 'crosshair',
+                                onClick: () => {
+                                    model.setCursorMode('crosshair');
+                                },
                             },
-                            label: 'Select region by default, pan when ctrl/cmd key is held',
-                            icon: CursorIcon_1.CursorMouse,
-                            type: 'radio',
-                            checked: model.cursorMode === 'crosshair',
-                        },
-                    ],
-                },
-                {
-                    label: 'Wheel scroll mode',
-                    subMenu: [
-                        {
-                            onClick: () => {
-                                model.setWheelMode('pan');
+                        ],
+                    },
+                    {
+                        label: 'Wheel scroll mode',
+                        subMenu: [
+                            {
+                                label: 'Pans view',
+                                type: 'radio',
+                                checked: model.wheelMode === 'pan',
+                                onClick: () => {
+                                    model.setWheelMode('pan');
+                                },
                             },
-                            label: 'Pans view',
-                            type: 'radio',
-                            checked: model.wheelMode === 'pan',
-                        },
-                        {
-                            onClick: () => {
-                                model.setWheelMode('zoom');
+                            {
+                                label: 'Zooms view',
+                                type: 'radio',
+                                checked: model.wheelMode === 'zoom',
+                                onClick: () => {
+                                    model.setWheelMode('zoom');
+                                },
                             },
-                            label: 'Zooms view',
-                            type: 'radio',
-                            checked: model.wheelMode === 'zoom',
-                        },
-                        {
-                            onClick: () => {
-                                model.setWheelMode('none');
+                            {
+                                label: 'Disable',
+                                type: 'radio',
+                                checked: model.wheelMode === 'none',
+                                onClick: () => {
+                                    model.setWheelMode('none');
+                                },
                             },
-                            label: 'Disable',
-                            type: 'radio',
-                            checked: model.wheelMode === 'none',
-                        },
-                    ],
-                },
-            ] },
-            react_1.default.createElement(MoreVert_1.default, null))));
+                        ],
+                    },
+                ], children: (0, jsx_runtime_1.jsx)(MoreVert_1.default, {}) })] }));
 });
 exports.default = DotplotControls;

package/dist/DotplotView/components/DotplotTooltipClick.d.ts

@@ -1,5 +1,4 @@
-import React from 'react';
-import { DotplotViewModel } from '../model';
+import type { DotplotViewModel } from '../model';
 type Coord = [number, number] | undefined;
 export declare const DotplotTooltipClick: ({ model, mousedown, mousedownClient, xdistance, ydistance, }: {
     model: DotplotViewModel;
@@ -7,5 +6,5 @@ export declare const DotplotTooltipClick: ({ model, mousedown, mousedownClient,
     mousedownClient: Coord;
     xdistance: number;
     ydistance: number;
-}) => React.JSX.Element | null;
+}) => import("react/jsx-runtime").JSX.Element | null;
 export default DotplotTooltipClick;

package/dist/DotplotView/components/DotplotTooltipClick.js

@@ -4,18 +4,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DotplotTooltipClick = void 0;
-const react_1 = __importDefault(require("react"));
-const mobx_react_1 = require("mobx-react");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const BaseTooltip_1 = __importDefault(require("@jbrowse/core/ui/BaseTooltip"));
+const mobx_react_1 = require("mobx-react");
 const util_1 = require("./util");
 exports.DotplotTooltipClick = (0, mobx_react_1.observer)(function ({ model, mousedown, mousedownClient, xdistance, ydistance, }) {
     const { hview, vview, viewHeight } = model;
     const x = ((mousedownClient === null || mousedownClient === void 0 ? void 0 : mousedownClient[0]) || 0) - (xdistance < 0 ? 0 : 0);
     const y = ((mousedownClient === null || mousedownClient === void 0 ? void 0 : mousedownClient[1]) || 0) - (ydistance < 0 ? 0 : 0);
-    return mousedown && Math.abs(xdistance) > 3 && Math.abs(ydistance) > 3 ? (react_1.default.createElement(BaseTooltip_1.default, { placement: xdistance < 0 ? 'right' : 'left', clientPoint: { x, y } },
-        `x - ${(0, util_1.locstr)(mousedown[0], hview)}`,
-        react_1.default.createElement("br", null),
-        `y - ${(0, util_1.locstr)(viewHeight - mousedown[1], vview)}`,
-        react_1.default.createElement("br", null))) : null;
+    return mousedown && Math.abs(xdistance) > 3 && Math.abs(ydistance) > 3 ? ((0, jsx_runtime_1.jsxs)(BaseTooltip_1.default, { placement: xdistance < 0 ? 'right' : 'left', clientPoint: { x, y }, children: [`x - ${(0, util_1.locstr)(mousedown[0], hview)}`, (0, jsx_runtime_1.jsx)("br", {}), `y - ${(0, util_1.locstr)(viewHeight - mousedown[1], vview)}`, (0, jsx_runtime_1.jsx)("br", {})] })) : null;
 });
 exports.default = exports.DotplotTooltipClick;

package/dist/DotplotView/components/DotplotTooltipMouseover.d.ts

@@ -1,10 +1,9 @@
-import React from 'react';
-import { DotplotViewModel } from '../model';
+import type { DotplotViewModel } from '../model';
 type Coord = [number, number] | undefined;
 declare const DotplotTooltipMouseover: ({ model, mouserect, mouserectClient, xdistance, }: {
     model: DotplotViewModel;
     mouserect: Coord;
     mouserectClient: Coord;
     xdistance: number;
-}) => React.JSX.Element | null;
+}) => import("react/jsx-runtime").JSX.Element | null;
 export default DotplotTooltipMouseover;

package/dist/DotplotView/components/DotplotTooltipMouseover.js

@@ -3,18 +3,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const mobx_react_1 = require("mobx-react");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const BaseTooltip_1 = __importDefault(require("@jbrowse/core/ui/BaseTooltip"));
+const mobx_react_1 = require("mobx-react");
 const util_1 = require("./util");
 const DotplotTooltipMouseover = (0, mobx_react_1.observer)(function ({ model, mouserect, mouserectClient, xdistance, }) {
     const { hview, vview, viewHeight } = model;
-    return mouserect ? (react_1.default.createElement(BaseTooltip_1.default, { placement: xdistance < 0 ? 'left' : 'right', clientPoint: mouserectClient
+    return mouserect ? ((0, jsx_runtime_1.jsxs)(BaseTooltip_1.default, { placement: xdistance < 0 ? 'left' : 'right', clientPoint: mouserectClient
             ? { x: mouserectClient[0], y: mouserectClient[1] }
-            : undefined },
-        `x - ${(0, util_1.locstr)(mouserect[0], hview)}`,
-        react_1.default.createElement("br", null),
-        `y - ${(0, util_1.locstr)(viewHeight - mouserect[1], vview)}`,
-        react_1.default.createElement("br", null))) : null;
+            : undefined, children: [`x - ${(0, util_1.locstr)(mouserect[0], hview)}`, (0, jsx_runtime_1.jsx)("br", {}), `y - ${(0, util_1.locstr)(viewHeight - mouserect[1], vview)}`, (0, jsx_runtime_1.jsx)("br", {})] })) : null;
 });
 exports.default = DotplotTooltipMouseover;

package/dist/DotplotView/components/DotplotView.d.ts

@@ -1,6 +1,5 @@
-import React from 'react';
-import { DotplotViewModel } from '../model';
+import type { DotplotViewModel } from '../model';
 declare const DotplotView: ({ model }: {
     model: DotplotViewModel;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default DotplotView;

package/dist/DotplotView/components/DotplotView.js

@@ -15,26 +15,37 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const ui_1 = require("@jbrowse/core/ui");
-const mobx_react_1 = require("mobx-react");
 const mobx_1 = require("mobx");
+const mobx_react_1 = require("mobx-react");
 const mui_1 = require("tss-react/mui");
-const ImportForm_1 = __importDefault(require("./ImportForm"));
-const Header_1 = __importDefault(require("./Header"));
-const Grid_1 = __importDefault(require("./Grid"));
 const Axes_1 = require("./Axes");
+const Grid_1 = __importDefault(require("./Grid"));
+const Header_1 = __importDefault(require("./Header"));
+const ImportForm_1 = __importDefault(require("./ImportForm"));
 const TooltipWhereClicked = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./DotplotTooltipClick'))));
 const TooltipWhereMouseovered = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./DotplotTooltipMouseover'))));
 const blank = { left: 0, top: 0, width: 0, height: 0 };
@@ -60,7 +71,7 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
         width: '100%',
         gridRow: '1/2',
         gridColumn: '2/2',
-        zIndex: 100, // needs to be below controls
+        zIndex: 100,
         '& path': {
             cursor: 'crosshair',
             fill: 'none',
@@ -78,18 +89,16 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
         borderTop: '1px solid #fafafa',
     },
 }));
-// produces offsetX/offsetY coordinates from a clientX and an element's
-// getBoundingClientRect
 function getOffset(coord, rect) {
     return coord && [coord[0] - rect.left, coord[1] - rect.top];
 }
 const RenderedComponent = (0, mobx_react_1.observer)(({ model }) => {
     const { classes } = useStyles();
-    return (react_1.default.createElement("div", { className: classes.overlay }, model.tracks.map(track => {
-        const [display] = track.displays;
-        const { RenderingComponent } = display;
-        return RenderingComponent ? (react_1.default.createElement(RenderingComponent, { key: track.configuration.trackId, model: display })) : null;
-    })));
+    return ((0, jsx_runtime_1.jsx)("div", { className: classes.overlay, children: model.tracks.map(track => {
+            const [display] = track.displays;
+            const { RenderingComponent } = display;
+            return RenderingComponent ? ((0, jsx_runtime_1.jsx)(RenderingComponent, { model: display }, track.configuration.trackId)) : null;
+        }) }));
 });
 const DotplotViewInternal = (0, mobx_react_1.observer)(function ({ model, }) {
     var _a, _b;
@@ -119,7 +128,6 @@ const DotplotViewInternal = (0, mobx_react_1.observer)(function ({ model, }) {
         (cursorMode === 'crosshair' && ctrlKeyWasUsed);
     const validSelect = (cursorMode === 'move' && ctrlKeyWasUsed) ||
         (cursorMode === 'crosshair' && !ctrlKeyWasUsed);
-    // use non-React wheel handler to properly prevent body scrolling
     (0, react_1.useEffect)(() => {
         function onWheel(event) {
             event.preventDefault();
@@ -188,8 +196,6 @@ const DotplotViewInternal = (0, mobx_react_1.observer)(function ({ model, }) {
             window.addEventListener('keyup', globalCtrlKeyUp);
         };
     }, []);
-    // detect a mouseup after a mousedown was submitted, autoremoves mouseup once
-    // that single mouseup is set
     (0, react_1.useEffect)(() => {
         function globalMouseUp(event) {
             if (Math.abs(xdistance) > 3 && Math.abs(ydistance) > 3 && validSelect) {
@@ -207,81 +213,63 @@ const DotplotViewInternal = (0, mobx_react_1.observer)(function ({ model, }) {
         }
         return () => { };
     }, [validSelect, mousedown, mouseup, xdistance, ydistance]);
-    return (react_1.default.createElement("div", null,
-        react_1.default.createElement(Header_1.default, { model: model, selection: !validSelect || !(mousedown && mouserect)
-                ? undefined
-                : {
-                    width: Math.abs(xdistance),
-                    height: Math.abs(ydistance),
-                } }),
-        react_1.default.createElement("div", { ref: root, className: classes.root, onMouseLeave: () => {
-                setMouseOvered(false);
-            }, onMouseEnter: () => {
-                setMouseOvered(true);
-            } },
-            react_1.default.createElement("div", { className: classes.container },
-                react_1.default.createElement(Axes_1.VerticalAxis, { model: model }),
-                react_1.default.createElement(Axes_1.HorizontalAxis, { model: model }),
-                react_1.default.createElement("div", { ref: ref, className: classes.content },
-                    mouseOvered && validSelect ? (react_1.default.createElement(react_1.Suspense, { fallback: null },
-                        react_1.default.createElement(TooltipWhereMouseovered, { model: model, mouserect: mouserect, mouserectClient: mouserectClient, xdistance: xdistance }))) : null,
-                    validSelect ? (react_1.default.createElement(react_1.Suspense, { fallback: null },
-                        react_1.default.createElement(TooltipWhereClicked, { model: model, mousedown: mousedown, mousedownClient: mousedownClient, xdistance: xdistance, ydistance: ydistance }))) : null,
-                    react_1.default.createElement("div", { style: { cursor: ctrlKeyDown ? 'pointer' : cursorMode }, onMouseDown: event => {
-                            if (event.button === 0) {
-                                const { clientX, clientY } = event;
-                                setMouseDownClient([clientX, clientY]);
-                                setMouseCurrClient([clientX, clientY]);
-                                setCtrlKeyWasUsed(ctrlKeyDown);
-                            }
-                        } },
-                        react_1.default.createElement(Grid_1.default, { model: model }, validSelect && mousedown && mouserect ? (react_1.default.createElement("rect", { fill: "rgba(255,0,0,0.3)", x: Math.min(mouserect[0], mousedown[0]), y: Math.min(mouserect[1], mousedown[1]), width: Math.abs(xdistance), height: Math.abs(ydistance) })) : null)),
-                    react_1.default.createElement("div", { className: classes.spacer })),
-                react_1.default.createElement(RenderedComponent, { model: model }),
-                react_1.default.createElement(ui_1.Menu, { open: Boolean(mouseup), onMenuItemClick: (_, callback) => {
-                        callback();
-                        setMouseUpClient(undefined);
-                        setMouseDownClient(undefined);
-                    }, onClose: () => {
-                        setMouseUpClient(undefined);
-                        setMouseDownClient(undefined);
-                    }, anchorReference: "anchorPosition", anchorPosition: mouseupClient
-                        ? {
-                            top: mouseupClient[1] + 50,
-                            left: mouseupClient[0] + 50,
-                        }
-                        : undefined, style: { zIndex: 10000 }, menuItems: [
-                        {
-                            label: 'Zoom in',
-                            onClick: () => {
-                                if (mousedown && mouseup) {
-                                    model.zoomInToMouseCoords(mousedown, mouseup);
-                                }
-                                // below line is needed to prevent tooltip from sticking
-                                setMouseOvered(false);
-                            },
-                        },
-                        {
-                            label: 'Open linear synteny view',
-                            onClick: () => {
-                                if (mousedown && mouseup) {
-                                    model.onDotplotView(mousedown, mouseup);
-                                }
-                                // below line is needed to prevent tooltip from sticking
-                                setMouseOvered(false);
-                            },
-                        },
-                    ] })),
-            react_1.default.createElement(ui_1.ResizeHandle, { onDrag: n => model.setHeight(model.height + n), className: classes.resizeHandle }))));
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(Header_1.default, { model: model, selection: !validSelect || !(mousedown && mouserect)
+                    ? undefined
+                    : {
+                        width: Math.abs(xdistance),
+                        height: Math.abs(ydistance),
+                    } }), (0, jsx_runtime_1.jsxs)("div", { ref: root, className: classes.root, onMouseLeave: () => {
+                    setMouseOvered(false);
+                }, onMouseEnter: () => {
+                    setMouseOvered(true);
+                }, children: [(0, jsx_runtime_1.jsxs)("div", { className: classes.container, children: [(0, jsx_runtime_1.jsx)(Axes_1.VerticalAxis, { model: model }), (0, jsx_runtime_1.jsx)(Axes_1.HorizontalAxis, { model: model }), (0, jsx_runtime_1.jsxs)("div", { ref: ref, className: classes.content, children: [mouseOvered && validSelect ? ((0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: null, children: (0, jsx_runtime_1.jsx)(TooltipWhereMouseovered, { model: model, mouserect: mouserect, mouserectClient: mouserectClient, xdistance: xdistance }) })) : null, validSelect ? ((0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: null, children: (0, jsx_runtime_1.jsx)(TooltipWhereClicked, { model: model, mousedown: mousedown, mousedownClient: mousedownClient, xdistance: xdistance, ydistance: ydistance }) })) : null, (0, jsx_runtime_1.jsx)("div", { style: { cursor: ctrlKeyDown ? 'pointer' : cursorMode }, onMouseDown: event => {
+                                            if (event.button === 0) {
+                                                const { clientX, clientY } = event;
+                                                setMouseDownClient([clientX, clientY]);
+                                                setMouseCurrClient([clientX, clientY]);
+                                                setCtrlKeyWasUsed(ctrlKeyDown);
+                                            }
+                                        }, children: (0, jsx_runtime_1.jsx)(Grid_1.default, { model: model, children: validSelect && mousedown && mouserect ? ((0, jsx_runtime_1.jsx)("rect", { fill: "rgba(255,0,0,0.3)", x: Math.min(mouserect[0], mousedown[0]), y: Math.min(mouserect[1], mousedown[1]), width: Math.abs(xdistance), height: Math.abs(ydistance) })) : null }) }), (0, jsx_runtime_1.jsx)("div", { className: classes.spacer })] }), (0, jsx_runtime_1.jsx)(RenderedComponent, { model: model }), (0, jsx_runtime_1.jsx)(ui_1.Menu, { open: Boolean(mouseup), onMenuItemClick: (_, callback) => {
+                                    callback();
+                                    setMouseUpClient(undefined);
+                                    setMouseDownClient(undefined);
+                                }, onClose: () => {
+                                    setMouseUpClient(undefined);
+                                    setMouseDownClient(undefined);
+                                }, anchorReference: "anchorPosition", anchorPosition: mouseupClient
+                                    ? {
+                                        top: mouseupClient[1] + 50,
+                                        left: mouseupClient[0] + 50,
+                                    }
+                                    : undefined, style: { zIndex: 10000 }, menuItems: [
+                                    {
+                                        label: 'Zoom in',
+                                        onClick: () => {
+                                            if (mousedown && mouseup) {
+                                                model.zoomInToMouseCoords(mousedown, mouseup);
+                                            }
+                                            setMouseOvered(false);
+                                        },
+                                    },
+                                    {
+                                        label: 'Open linear synteny view',
+                                        onClick: () => {
+                                            if (mousedown && mouseup) {
+                                                model.onDotplotView(mousedown, mouseup);
+                                            }
+                                            setMouseOvered(false);
+                                        },
+                                    },
+                                ] })] }), (0, jsx_runtime_1.jsx)(ui_1.ResizeHandle, { onDrag: n => model.setHeight(model.height + n), className: classes.resizeHandle })] })] }));
 });
 const DotplotView = (0, mobx_react_1.observer)(function ({ model }) {
     const { initialized, loading, error } = model;
     if ((!initialized && !loading) || error) {
-        return react_1.default.createElement(ImportForm_1.default, { model: model });
+        return (0, jsx_runtime_1.jsx)(ImportForm_1.default, { model: model });
     }
     if (loading) {
-        return react_1.default.createElement(ui_1.LoadingEllipses, { variant: "h6" });
+        return (0, jsx_runtime_1.jsx)(ui_1.LoadingEllipses, { variant: "h6" });
     }
-    return react_1.default.createElement(DotplotViewInternal, { model: model });
+    return (0, jsx_runtime_1.jsx)(DotplotViewInternal, { model: model });
 });
 exports.default = DotplotView;

package/dist/DotplotView/components/DotplotWarnings.d.ts

@@ -1,6 +1,5 @@
-import React from 'react';
-import { DotplotViewModel } from '../model';
+import type { DotplotViewModel } from '../model';
 declare const DotplotWarnings: ({ model, }: {
     model: DotplotViewModel;
-}) => React.JSX.Element | null;
+}) => import("react/jsx-runtime").JSX.Element | null;
 export default DotplotWarnings;