@jbrowse/plugin-dotplot-view 2.18.0 → 3.0.1

package/dist/DotplotView/components/DotplotView.js

@@ -15,18 +15,29 @@ 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_1 = require("mobx");
 const mobx_react_1 = require("mobx-react");
@@ -83,11 +94,11 @@ function getOffset(coord, rect) {
 }
 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;
@@ -202,79 +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);
-                                }
-                                setMouseOvered(false);
-                            },
-                        },
-                        {
-                            label: 'Open linear synteny view',
-                            onClick: () => {
-                                if (mousedown && mouseup) {
-                                    model.onDotplotView(mousedown, mouseup);
-                                }
-                                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 type { DotplotViewModel } from '../model';
 declare const DotplotWarnings: ({ model, }: {
     model: DotplotViewModel;
-}) => React.JSX.Element | null;
+}) => import("react/jsx-runtime").JSX.Element | null;
 export default DotplotWarnings;

package/dist/DotplotView/components/DotplotWarnings.js

@@ -15,15 +15,26 @@ 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;
+    };
+})();
 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 material_1 = require("@mui/material");
 const mobx_react_1 = require("mobx-react");
 const WarningDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./WarningDialog'))));
@@ -31,17 +42,12 @@ const DotplotWarnings = (0, mobx_react_1.observer)(function ({ model, }) {
     const trackWarnings = model.tracks.filter(t => { var _a; return (_a = t.displays[0].warnings) === null || _a === void 0 ? void 0 : _a.length; });
     const [shown, setShown] = (0, react_1.useState)(false);
     const [hide, setHide] = (0, react_1.useState)(false);
-    return trackWarnings.length && !hide ? (react_1.default.createElement(material_1.Alert, { severity: "warning" },
-        "Warnings during render",
-        ' ',
-        react_1.default.createElement(material_1.Button, { onClick: () => {
-                setShown(true);
-            } }, "More info"),
-        shown ? (react_1.default.createElement(WarningDialog, { trackWarnings: trackWarnings, handleClose: () => {
-                setShown(false);
-            } })) : null,
-        react_1.default.createElement(material_1.Button, { variant: "contained", onClick: () => {
-                setHide(true);
-            } }, "Dismiss"))) : null;
+    return trackWarnings.length && !hide ? ((0, jsx_runtime_1.jsxs)(material_1.Alert, { severity: "warning", children: ["Warnings during render", ' ', (0, jsx_runtime_1.jsx)(material_1.Button, { onClick: () => {
+                    setShown(true);
+                }, children: "More info" }), shown ? ((0, jsx_runtime_1.jsx)(WarningDialog, { trackWarnings: trackWarnings, handleClose: () => {
+                    setShown(false);
+                } })) : null, (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: () => {
+                    setHide(true);
+                }, children: "Dismiss" })] })) : null;
 });
 exports.default = DotplotWarnings;

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

@@ -1,8 +1,7 @@
-import React from 'react';
 import type { ExportSvgOptions } from '../model';
 export default function ExportSvgDialog({ model, handleClose, }: {
     model: {
         exportSvg(opts: ExportSvgOptions): Promise<void>;
     };
     handleClose: () => void;
-}): React.JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/DotplotView/components/ExportSvgDialog.js

@@ -1,41 +1,16 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : 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;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = ExportSvgDialog;
-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 util_1 = require("@jbrowse/core/util");
 const material_1 = require("@mui/material");
 function LoadingMessage() {
-    return (react_1.default.createElement("div", null,
-        react_1.default.createElement(material_1.CircularProgress, { size: 20, style: { marginRight: 20 } }),
-        react_1.default.createElement(material_1.Typography, { display: "inline" }, "Creating SVG")));
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 20, style: { marginRight: 20 } }), (0, jsx_runtime_1.jsx)(material_1.Typography, { display: "inline", children: "Creating SVG" })] }));
 }
 function TextField2({ children, ...rest }) {
-    return (react_1.default.createElement("div", null,
-        react_1.default.createElement(material_1.TextField, { ...rest }, children)));
+    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { ...rest, children: children }) }));
 }
 function useSvgLocal(key, val) {
     return (0, util_1.useLocalStorage)(`svg-${key}`, val);
@@ -48,39 +23,31 @@ function ExportSvgDialog({ model, handleClose, }) {
     const [error, setError] = (0, react_1.useState)();
     const [filename, setFilename] = useSvgLocal('file', 'jbrowse.svg');
     const [themeName, setThemeName] = useSvgLocal('theme', session.themeName || 'default');
-    return (react_1.default.createElement(ui_1.Dialog, { open: true, onClose: handleClose, title: "Export SVG" },
-        react_1.default.createElement(material_1.DialogContent, null,
-            error ? (react_1.default.createElement(ui_1.ErrorMessage, { error: error })) : loading ? (react_1.default.createElement(LoadingMessage, null)) : null,
-            react_1.default.createElement(TextField2, { helperText: "filename", value: filename, onChange: event => {
-                    setFilename(event.target.value);
-                } }),
-            session.allThemes ? (react_1.default.createElement(TextField2, { select: true, label: "Theme", value: themeName, onChange: event => {
-                    setThemeName(event.target.value);
-                } }, Object.entries(session.allThemes()).map(([key, val]) => (react_1.default.createElement(material_1.MenuItem, { key: key, value: key }, val.name || '(Unknown name)'))))) : null,
-            offscreenCanvas ? (react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.Checkbox, { checked: rasterizeLayers, onChange: () => {
-                        setRasterizeLayers(val => !val);
-                    } }), label: "Rasterize canvas based tracks? File may be much larger if this is turned off" })) : (react_1.default.createElement(material_1.Typography, null, "Note: rasterizing layers not yet supported in this browser, so SVG size may be large"))),
-        react_1.default.createElement(material_1.DialogActions, null,
-            react_1.default.createElement(material_1.Button, { variant: "contained", color: "secondary", onClick: () => {
-                    handleClose();
-                } }, "Cancel"),
-            react_1.default.createElement(material_1.Button, { variant: "contained", color: "primary", type: "submit", onClick: async () => {
-                    setLoading(true);
-                    setError(undefined);
-                    try {
-                        await model.exportSvg({
-                            rasterizeLayers,
-                            filename,
-                            themeName,
-                        });
-                        handleClose();
-                    }
-                    catch (e) {
-                        console.error(e);
-                        setError(e);
-                    }
-                    finally {
-                        setLoading(false);
-                    }
-                } }, "Submit"))));
+    return ((0, jsx_runtime_1.jsxs)(ui_1.Dialog, { open: true, onClose: handleClose, title: "Export SVG", children: [(0, jsx_runtime_1.jsxs)(material_1.DialogContent, { children: [error ? ((0, jsx_runtime_1.jsx)(ui_1.ErrorMessage, { error: error })) : loading ? ((0, jsx_runtime_1.jsx)(LoadingMessage, {})) : null, (0, jsx_runtime_1.jsx)(TextField2, { helperText: "filename", value: filename, onChange: event => {
+                            setFilename(event.target.value);
+                        } }), session.allThemes ? ((0, jsx_runtime_1.jsx)(TextField2, { select: true, label: "Theme", value: themeName, onChange: event => {
+                            setThemeName(event.target.value);
+                        }, children: Object.entries(session.allThemes()).map(([key, val]) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: key, children: val.name || '(Unknown name)' }, key))) })) : null, offscreenCanvas ? ((0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { checked: rasterizeLayers, onChange: () => {
+                                setRasterizeLayers(val => !val);
+                            } }), label: "Rasterize canvas based tracks? File may be much larger if this is turned off" })) : ((0, jsx_runtime_1.jsx)(material_1.Typography, { children: "Note: rasterizing layers not yet supported in this browser, so SVG size may be large" }))] }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", color: "secondary", onClick: () => {
+                            handleClose();
+                        }, children: "Cancel" }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", color: "primary", type: "submit", onClick: async () => {
+                            setLoading(true);
+                            setError(undefined);
+                            try {
+                                await model.exportSvg({
+                                    rasterizeLayers,
+                                    filename,
+                                    themeName,
+                                });
+                                handleClose();
+                            }
+                            catch (e) {
+                                console.error(e);
+                                setError(e);
+                            }
+                            finally {
+                                setLoading(false);
+                            }
+                        }, children: "Submit" })] })] }));
 }

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

@@ -1,10 +1,9 @@
-import React from 'react';
 import type { DotplotViewModel } from '../model';
 export declare const GridRaw: ({ model, children, }: {
     model: DotplotViewModel;
     children?: React.ReactNode;
-}) => React.JSX.Element | null;
+}) => import("react/jsx-runtime").JSX.Element | null;
 export default function Grid({ model, children, }: {
     model: DotplotViewModel;
     children?: React.ReactNode;
-}): React.JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/DotplotView/components/Grid.js

@@ -1,11 +1,8 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GridRaw = void 0;
 exports.default = Grid;
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const util_1 = require("@jbrowse/core/util");
 const material_1 = require("@mui/material");
 const mobx_react_1 = require("mobx-react");
@@ -28,31 +25,23 @@ exports.GridRaw = (0, mobx_react_1.observer)(function ({ model, children, }) {
     const h = Math.min(viewHeight - vbottom - ry, viewHeight);
     let lastx = Number.POSITIVE_INFINITY;
     let lasty = Number.POSITIVE_INFINITY;
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("rect", { x: rx, y: ry, width: w, height: h, ...(0, util_1.getFillProps)(theme.palette.background.default) }),
-        react_1.default.createElement("g", null,
-            hblocks.map(region => {
-                const x = region.offsetPx - hview.offsetPx;
-                const render = Math.floor(x) !== Math.floor(lastx);
-                if (render) {
-                    lastx = x;
-                }
-                return render ? (react_1.default.createElement("line", { key: JSON.stringify(region), x1: x, y1: 0, x2: x, y2: viewHeight, ...(0, util_1.getStrokeProps)(stroke) })) : null;
-            }),
-            vblocks.map(region => {
-                const y = viewHeight - (region.offsetPx - vview.offsetPx);
-                const render = Math.floor(y) !== Math.floor(lasty);
-                if (render) {
-                    lasty = y;
-                }
-                return render ? (react_1.default.createElement("line", { key: JSON.stringify(region), x1: 0, y1: y, x2: viewWidth, y2: y, ...(0, util_1.getStrokeProps)(stroke) })) : null;
-            }),
-            react_1.default.createElement("line", { x1: htop, y1: 0, x2: htop, y2: viewHeight, ...(0, util_1.getStrokeProps)(stroke) }),
-            react_1.default.createElement("line", { x1: 0, y1: viewHeight - vtop, x2: viewWidth, y2: viewHeight - vtop, ...(0, util_1.getStrokeProps)(stroke) })),
-        children));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("rect", { x: rx, y: ry, width: w, height: h, ...(0, util_1.getFillProps)(theme.palette.background.default) }), (0, jsx_runtime_1.jsxs)("g", { children: [hblocks.map(region => {
+                        const x = region.offsetPx - hview.offsetPx;
+                        const render = Math.floor(x) !== Math.floor(lastx);
+                        if (render) {
+                            lastx = x;
+                        }
+                        return render ? ((0, jsx_runtime_1.jsx)("line", { x1: x, y1: 0, x2: x, y2: viewHeight, ...(0, util_1.getStrokeProps)(stroke) }, JSON.stringify(region))) : null;
+                    }), vblocks.map(region => {
+                        const y = viewHeight - (region.offsetPx - vview.offsetPx);
+                        const render = Math.floor(y) !== Math.floor(lasty);
+                        if (render) {
+                            lasty = y;
+                        }
+                        return render ? ((0, jsx_runtime_1.jsx)("line", { x1: 0, y1: y, x2: viewWidth, y2: y, ...(0, util_1.getStrokeProps)(stroke) }, JSON.stringify(region))) : null;
+                    }), (0, jsx_runtime_1.jsx)("line", { x1: htop, y1: 0, x2: htop, y2: viewHeight, ...(0, util_1.getStrokeProps)(stroke) }), (0, jsx_runtime_1.jsx)("line", { x1: 0, y1: viewHeight - vtop, x2: viewWidth, y2: viewHeight - vtop, ...(0, util_1.getStrokeProps)(stroke) })] }), children] }));
 });
 function Grid({ model, children, }) {
     const { viewWidth, viewHeight } = model;
-    return (react_1.default.createElement("svg", { width: viewWidth, height: viewHeight, style: { background: 'rgba(0,0,0,0.12)' } },
-        react_1.default.createElement(exports.GridRaw, { model: model }, children)));
+    return ((0, jsx_runtime_1.jsx)("svg", { width: viewWidth, height: viewHeight, style: { background: 'rgba(0,0,0,0.12)' }, children: (0, jsx_runtime_1.jsx)(exports.GridRaw, { model: model, children: children }) }));
 }

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

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

package/dist/DotplotView/components/Header.js

@@ -3,7 +3,7 @@ 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 jsx_runtime_1 = require("react/jsx-runtime");
 const util_1 = require("@jbrowse/core/util");
 const material_1 = require("@mui/material");
 const mobx_react_1 = require("mobx-react");
@@ -28,25 +28,6 @@ const useStyles = (0, mui_1.makeStyles)()({
 const DotplotHeader = (0, mobx_react_1.observer)(function ({ model, selection, }) {
     const { classes } = useStyles();
     const { hview, vview, showPanButtons } = model;
-    return (react_1.default.createElement("div", { className: classes.headerBar },
-        react_1.default.createElement(DotplotControls_1.default, { model: model }),
-        react_1.default.createElement(material_1.Typography, { className: classes.bp, variant: "body2", color: "textSecondary" },
-            "x: ",
-            hview.assemblyNames.join(','),
-            " ",
-            (0, util_1.getBpDisplayStr)(hview.currBp),
-            react_1.default.createElement("br", null),
-            "y: ",
-            vview.assemblyNames.join(','),
-            " ",
-            (0, util_1.getBpDisplayStr)(vview.currBp)),
-        selection ? (react_1.default.createElement(material_1.Typography, { className: classes.bp, variant: "body2", color: "textSecondary" },
-            `width:${(0, util_1.getBpDisplayStr)(hview.bpPerPx * selection.width)}`,
-            " ",
-            react_1.default.createElement("br", null),
-            `height:${(0, util_1.getBpDisplayStr)(vview.bpPerPx * selection.height)}`)) : null,
-        react_1.default.createElement("div", { className: classes.spacer }),
-        react_1.default.createElement(DotplotWarnings_1.default, { model: model }),
-        showPanButtons ? react_1.default.createElement(PanButtons_1.default, { model: model }) : null));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: classes.headerBar, children: [(0, jsx_runtime_1.jsx)(DotplotControls_1.default, { model: model }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { className: classes.bp, variant: "body2", color: "textSecondary", children: ["x: ", hview.assemblyNames.join(','), " ", (0, util_1.getBpDisplayStr)(hview.currBp), (0, jsx_runtime_1.jsx)("br", {}), "y: ", vview.assemblyNames.join(','), " ", (0, util_1.getBpDisplayStr)(vview.currBp)] }), selection ? ((0, jsx_runtime_1.jsxs)(material_1.Typography, { className: classes.bp, variant: "body2", color: "textSecondary", children: [`width:${(0, util_1.getBpDisplayStr)(hview.bpPerPx * selection.width)}`, " ", (0, jsx_runtime_1.jsx)("br", {}), `height:${(0, util_1.getBpDisplayStr)(vview.bpPerPx * selection.height)}`] })) : null, (0, jsx_runtime_1.jsx)("div", { className: classes.spacer }), (0, jsx_runtime_1.jsx)(DotplotWarnings_1.default, { model: model }), showPanButtons ? (0, jsx_runtime_1.jsx)(PanButtons_1.default, { model: model }) : null] }));
 });
 exports.default = DotplotHeader;

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

@@ -0,0 +1,7 @@
+import type { DotplotViewModel } from '../../model';
+declare const ImportSyntenyOpenCustomTrack: ({ model, assembly1, assembly2, }: {
+    model: DotplotViewModel;
+    assembly1: string;
+    assembly2: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default ImportSyntenyOpenCustomTrack;