@jbrowse/plugin-dotplot-view 2.18.0 → 3.0.0

package/dist/DotplotView/components/PanButtons.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 ArrowDropDown_1 = __importDefault(require("@mui/icons-material/ArrowDropDown"));
 const ArrowDropUp_1 = __importDefault(require("@mui/icons-material/ArrowDropUp"));
 const ArrowLeft_1 = __importDefault(require("@mui/icons-material/ArrowLeft"));
@@ -30,36 +30,18 @@ const useStyles = (0, mui_1.makeStyles)()({
 });
 const PanButtons = (0, mobx_react_1.observer)(function PanButtons({ model, }) {
     const { classes } = useStyles();
-    return (react_1.default.createElement(material_1.Paper, { className: classes.dpad, elevation: 6 },
-        react_1.default.createElement("div", null),
-        react_1.default.createElement(material_1.IconButton, { className: classes.icon, onClick: () => {
-                model.vview.scroll(100);
-            } },
-            react_1.default.createElement(ArrowDropUp_1.default, null)),
-        react_1.default.createElement("div", null),
-        react_1.default.createElement(material_1.IconButton, { className: classes.icon, onClick: () => {
-                model.hview.scroll(-100);
-            } },
-            react_1.default.createElement(ArrowLeft_1.default, null)),
-        react_1.default.createElement("div", null),
-        react_1.default.createElement(material_1.IconButton, { className: classes.icon, onClick: () => {
-                model.hview.scroll(100);
-            } },
-            react_1.default.createElement(ArrowRight_1.default, null)),
-        react_1.default.createElement("div", null),
-        react_1.default.createElement(material_1.IconButton, { className: classes.icon, onClick: () => {
-                model.vview.scroll(-100);
-            } },
-            react_1.default.createElement(ArrowDropDown_1.default, null)),
-        react_1.default.createElement("div", null),
-        react_1.default.createElement(material_1.IconButton, { className: classes.icon, onClick: () => {
-                model.zoomIn();
-            } },
-            react_1.default.createElement(ZoomIn_1.default, null)),
-        react_1.default.createElement("div", null),
-        react_1.default.createElement(material_1.IconButton, { className: classes.icon, onClick: () => {
-                model.zoomOut();
-            } },
-            react_1.default.createElement(ZoomOut_1.default, null))));
+    return ((0, jsx_runtime_1.jsxs)(material_1.Paper, { className: classes.dpad, elevation: 6, children: [(0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)(material_1.IconButton, { className: classes.icon, onClick: () => {
+                    model.vview.scroll(100);
+                }, children: (0, jsx_runtime_1.jsx)(ArrowDropUp_1.default, {}) }), (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)(material_1.IconButton, { className: classes.icon, onClick: () => {
+                    model.hview.scroll(-100);
+                }, children: (0, jsx_runtime_1.jsx)(ArrowLeft_1.default, {}) }), (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)(material_1.IconButton, { className: classes.icon, onClick: () => {
+                    model.hview.scroll(100);
+                }, children: (0, jsx_runtime_1.jsx)(ArrowRight_1.default, {}) }), (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)(material_1.IconButton, { className: classes.icon, onClick: () => {
+                    model.vview.scroll(-100);
+                }, children: (0, jsx_runtime_1.jsx)(ArrowDropDown_1.default, {}) }), (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)(material_1.IconButton, { className: classes.icon, onClick: () => {
+                    model.zoomIn();
+                }, children: (0, jsx_runtime_1.jsx)(ZoomIn_1.default, {}) }), (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)(material_1.IconButton, { className: classes.icon, onClick: () => {
+                    model.zoomOut();
+                }, children: (0, jsx_runtime_1.jsx)(ZoomOut_1.default, {}) })] }));
 });
 exports.default = PanButtons;

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
 interface Warning {
     message: string;
@@ -13,5 +12,5 @@ interface TrackWarning {
 declare const WarningDialog: ({ trackWarnings, handleClose, }: {
     handleClose: () => void;
     trackWarnings: TrackWarning[];
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default WarningDialog;

package/dist/DotplotView/components/WarningDialog.js

@@ -1,9 +1,6 @@
 "use strict";
-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 configuration_1 = require("@jbrowse/core/configuration");
 const ui_1 = require("@jbrowse/core/ui");
 const util_1 = require("@jbrowse/core/util");
@@ -37,10 +34,6 @@ const WarningDialog = (0, mobx_react_1.observer)(function WarningDialog({ trackW
         { field: 'message', width: (0, util_1.measureGridWidth)(rows.map(r => r.message)) },
         { field: 'effect', width: (0, util_1.measureGridWidth)(rows.map(r => r.effect)) },
     ];
-    return (react_1.default.createElement(ui_1.Dialog, { open: true, onClose: handleClose, maxWidth: "xl", title: "Dotplot rendered with warnings" },
-        react_1.default.createElement(material_1.DialogContent, { className: classes.content },
-            react_1.default.createElement(material_1.DialogContentText, null, "Found warnings while rendering the dotplot. This is often due to out-of-bound features that may indicate the wrong assemblies are being used. Check that the query and target are configured correctly, and that the right assemblies are being compared."),
-            react_1.default.createElement("div", { style: { height: 600, width: '100%', overflow: 'auto' } },
-                react_1.default.createElement(x_data_grid_1.DataGrid, { rows: rows, columns: columns, disableRowSelectionOnClick: true, rowHeight: 25, disableColumnMenu: true })))));
+    return ((0, jsx_runtime_1.jsx)(ui_1.Dialog, { open: true, onClose: handleClose, maxWidth: "xl", title: "Dotplot rendered with warnings", children: (0, jsx_runtime_1.jsxs)(material_1.DialogContent, { className: classes.content, children: [(0, jsx_runtime_1.jsx)(material_1.DialogContentText, { children: "Found warnings while rendering the dotplot. This is often due to out-of-bound features that may indicate the wrong assemblies are being used. Check that the query and target are configured correctly, and that the right assemblies are being compared." }), (0, jsx_runtime_1.jsx)("div", { style: { height: 600, width: '100%', overflow: 'auto' }, children: (0, jsx_runtime_1.jsx)(x_data_grid_1.DataGrid, { rows: rows, columns: columns, disableRowSelectionOnClick: true, rowHeight: 25, disableColumnMenu: true }) })] }) }));
 });
 exports.default = WarningDialog;

package/dist/DotplotView/index.js

@@ -15,13 +15,23 @@ 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 };
 };

package/dist/DotplotView/model.d.ts

@@ -1,5 +1,6 @@
 import type React from 'react';
 import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons';
+import type { ImportFormSyntenyTrack } from './types';
 import type PluginManager from '@jbrowse/core/PluginManager';
 import type { Base1DViewModel } from '@jbrowse/core/util/Base1DViewModel';
 import type { Instance, SnapshotIn } from 'mobx-state-tree';
@@ -214,6 +215,11 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
     wheelMode: string;
     borderX: number;
     borderY: number;
+    importFormSyntenyTrackSelections: import("mobx").IObservableArray<ImportFormSyntenyTrack>;
+} & {
+    importFormRemoveRow(idx: number): void;
+    clearImportFormSyntenyTracks(): void;
+    setImportFormSyntenyTrack(arg: number, val: ImportFormSyntenyTrack): void;
 } & {
     readonly width: number;
 } & {
@@ -410,14 +416,10 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
 } & {
     menuItems(): ({
         label: string;
-        onClick: () => void;
         icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
             muiName: string;
         };
-    } | {
-        label: string;
         onClick: () => void;
-        icon?: undefined;
     } | {
         label: string;
         onClick: () => import("@jbrowse/core/util").Widget;

package/dist/DotplotView/model.js

@@ -15,13 +15,23 @@ 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 };
 };
@@ -78,10 +88,22 @@ function stateModelFactory(pm) {
         volatileWidth: undefined,
         volatileError: undefined,
         cursorMode: (0, util_1.localStorageGetItem)('dotplot-cursorMode') || 'crosshair',
-        showPanButtons: Boolean(JSON.parse((0, util_1.localStorageGetItem)('dotplot-showPanbuttons') || 'true')),
+        showPanButtons: (0, util_1.localStorageGetBoolean)('dotplot-showPanbuttons', true),
         wheelMode: (0, util_1.localStorageGetItem)('dotplot-wheelMode') || 'zoom',
         borderX: 100,
         borderY: 100,
+        importFormSyntenyTrackSelections: mobx_1.observable.array(),
+    }))
+        .actions(self => ({
+        importFormRemoveRow(idx) {
+            self.importFormSyntenyTrackSelections.splice(idx, 1);
+        },
+        clearImportFormSyntenyTracks() {
+            self.importFormSyntenyTrackSelections.clear();
+        },
+        setImportFormSyntenyTrack(arg, val) {
+            self.importFormSyntenyTrackSelections[arg] = val;
+        },
     }))
         .views(self => ({
         get width() {
@@ -339,7 +361,7 @@ function stateModelFactory(pm) {
         beforeDestroy() {
             var _a;
             const session = (0, util_1.getSession)(self);
-            for (const name in self.assemblyNames) {
+            for (const name of self.assemblyNames) {
                 (_a = session.removeTemporaryAssembly) === null || _a === void 0 ? void 0 : _a.call(session, name);
             }
         },
@@ -419,31 +441,16 @@ function stateModelFactory(pm) {
             return [
                 {
                     label: 'Return to import form',
+                    icon: FolderOpen_1.default,
                     onClick: () => {
                         (0, util_1.getSession)(self).queueDialog(handleClose => [
                             ReturnToImportFormDialog,
-                            { model: self, handleClose },
+                            {
+                                model: self,
+                                handleClose,
+                            },
                         ]);
                     },
-                    icon: FolderOpen_1.default,
-                },
-                {
-                    label: 'Square view - same bp per pixel',
-                    onClick: () => {
-                        self.squareView();
-                    },
-                },
-                {
-                    label: 'Rectangular view - same total bp',
-                    onClick: () => {
-                        self.squareView();
-                    },
-                },
-                {
-                    label: 'Show all regions',
-                    onClick: () => {
-                        self.showAllRegions();
-                    },
                 },
                 {
                     label: 'Export SVG',
@@ -451,7 +458,10 @@ function stateModelFactory(pm) {
                     onClick: () => {
                         (0, util_1.getSession)(self).queueDialog(handleClose => [
                             ExportSvgDialog,
-                            { model: self, handleClose },
+                            {
+                                model: self,
+                                handleClose,
+                            },
                         ]);
                     },
                 },

package/dist/DotplotView/svgcomponents/SVGBackground.d.ts

@@ -1,5 +1,4 @@
-import React from 'react';
 export default function SVGBackground({ width, height, }: {
     width: number;
     height: number;
-}): React.JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/DotplotView/svgcomponents/SVGBackground.js

@@ -1,13 +1,10 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = SVGBackground;
-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");
 function SVGBackground({ width, height, }) {
     const theme = (0, material_1.useTheme)();
-    return (react_1.default.createElement("rect", { x: 0, y: 0, width: width, height: height, fill: (0, util_1.stripAlpha)(theme.palette.background.default) }));
+    return ((0, jsx_runtime_1.jsx)("rect", { x: 0, y: 0, width: width, height: height, fill: (0, util_1.stripAlpha)(theme.palette.background.default) }));
 }

package/dist/DotplotView/svgcomponents/SVGDotplotView.js

@@ -4,12 +4,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.renderToSvg = renderToSvg;
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const ui_1 = require("@jbrowse/core/ui");
 const util_1 = require("@jbrowse/core/util");
 const material_1 = require("@mui/material");
 const mobx_1 = require("mobx");
-const mobx_state_tree_1 = require("mobx-state-tree");
 const SVGBackground_1 = __importDefault(require("./SVGBackground"));
 const Axes_1 = require("../components/Axes");
 const Grid_1 = require("../components/Grid");
@@ -17,7 +16,6 @@ async function renderToSvg(model, opts) {
     var _a;
     await (0, mobx_1.when)(() => model.initialized);
     const { themeName = 'default', Wrapper = ({ children }) => children } = opts;
-    const { createRootFn } = (0, mobx_state_tree_1.getRoot)(model);
     const session = (0, util_1.getSession)(model);
     const theme = (_a = session.allThemes) === null || _a === void 0 ? void 0 : _a.call(session)[themeName];
     const { width, borderX, viewWidth, viewHeight, tracks, height } = model;
@@ -28,17 +26,5 @@ async function renderToSvg(model, opts) {
         return { track, result: await display.renderSvg({ ...opts, theme }) };
     }));
     const w = width + shift * 2;
-    return (0, util_1.renderToStaticMarkup)(react_1.default.createElement(material_1.ThemeProvider, { theme: (0, ui_1.createJBrowseTheme)(theme) },
-        react_1.default.createElement(Wrapper, null,
-            react_1.default.createElement("svg", { width: width, height: height, xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", viewBox: [0, 0, w, height].toString() },
-                react_1.default.createElement(SVGBackground_1.default, { width: w, height: height }),
-                react_1.default.createElement(Axes_1.VerticalAxisRaw, { model: model }),
-                react_1.default.createElement("g", { transform: `translate(${borderX} 0)` },
-                    react_1.default.createElement(Grid_1.GridRaw, { model: model }),
-                    react_1.default.createElement("defs", null,
-                        react_1.default.createElement("clipPath", { id: "clip-ruler" },
-                            react_1.default.createElement("rect", { x: 0, y: 0, width: viewWidth, height: viewHeight }))),
-                    react_1.default.createElement("g", { clipPath: "url(#clip-ruler)" }, displayResults.map(({ result }, i) => (react_1.default.createElement("g", { key: i }, result))))),
-                react_1.default.createElement("g", { transform: `translate(${borderX} ${viewHeight})` },
-                    react_1.default.createElement(Axes_1.HorizontalAxisRaw, { model: model }))))), createRootFn);
+    return (0, util_1.renderToStaticMarkup)((0, jsx_runtime_1.jsx)(material_1.ThemeProvider, { theme: (0, ui_1.createJBrowseTheme)(theme), children: (0, jsx_runtime_1.jsx)(Wrapper, { children: (0, jsx_runtime_1.jsxs)("svg", { width: width, height: height, xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", viewBox: [0, 0, w, height].toString(), children: [(0, jsx_runtime_1.jsx)(SVGBackground_1.default, { width: w, height: height }), (0, jsx_runtime_1.jsx)(Axes_1.VerticalAxisRaw, { model: model }), (0, jsx_runtime_1.jsxs)("g", { transform: `translate(${borderX} 0)`, children: [(0, jsx_runtime_1.jsx)(Grid_1.GridRaw, { model: model }), (0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsx)("clipPath", { id: "clip-ruler", children: (0, jsx_runtime_1.jsx)("rect", { x: 0, y: 0, width: viewWidth, height: viewHeight }) }) }), (0, jsx_runtime_1.jsx)("g", { clipPath: "url(#clip-ruler)", children: displayResults.map(({ result }, i) => ((0, jsx_runtime_1.jsx)("g", { children: result }, i))) })] }), (0, jsx_runtime_1.jsx)("g", { transform: `translate(${borderX} ${viewHeight})`, children: (0, jsx_runtime_1.jsx)(Axes_1.HorizontalAxisRaw, { model: model }) })] }) }) }));
 }

package/dist/DotplotView/types.d.ts

@@ -0,0 +1,12 @@
+import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
+import type { SnapshotIn } from 'mobx-state-tree';
+export type Conf = SnapshotIn<AnyConfigurationModel>;
+export type ImportFormSyntenyTrack = {
+    type: 'preConfigured';
+    value: string;
+} | {
+    type: 'userOpened';
+    value: Conf;
+} | {
+    type: 'none';
+};

package/dist/DotplotView/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/ServerSideRenderedBlockContent.d.ts

@@ -1,5 +1,4 @@
 import type { CSSProperties } from 'react';
-import React from 'react';
 declare const ServerSideRenderedDotplotContent: ({ model, style, }: {
     model: {
         error?: unknown;
@@ -9,5 +8,5 @@ declare const ServerSideRenderedDotplotContent: ({ model, style, }: {
         reactElement?: React.ReactElement;
     };
     style: CSSProperties;
-}) => React.JSX.Element | null;
+}) => import("react/jsx-runtime").JSX.Element | null;
 export default ServerSideRenderedDotplotContent;

package/dist/ServerSideRenderedBlockContent.js

@@ -1,29 +1,7 @@
 "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 });
-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 material_1 = require("@mui/material");
 const mobx_react_1 = require("mobx-react");
@@ -59,31 +37,28 @@ function LoadingMessage() {
             clearTimeout(timeout);
         };
     }, []);
-    return shown ? (react_1.default.createElement("div", { className: classes.loading },
-        react_1.default.createElement(ui_1.LoadingEllipses, null))) : null;
+    return shown ? ((0, jsx_runtime_1.jsx)("div", { className: classes.loading, children: (0, jsx_runtime_1.jsx)(ui_1.LoadingEllipses, {}) })) : null;
 }
 function BlockMessage({ messageText }) {
     const { classes } = useStyles();
-    return (react_1.default.createElement("div", { className: classes.blockMessage },
-        react_1.default.createElement(material_1.Typography, null, messageText)));
+    return ((0, jsx_runtime_1.jsx)("div", { className: classes.blockMessage, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { children: messageText }) }));
 }
 function BlockError({ error }) {
     const { classes } = useStyles();
-    return (react_1.default.createElement("div", { className: classes.blockError },
-        react_1.default.createElement(material_1.Typography, null, `${error}`)));
+    return ((0, jsx_runtime_1.jsx)("div", { className: classes.blockError, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { children: `${error}` }) }));
 }
 const ServerSideRenderedDotplotContent = (0, mobx_react_1.observer)(function ({ model, style, }) {
     if (model.error) {
-        return react_1.default.createElement(BlockError, { error: model.error, "data-testid": "reload_button" });
+        return (0, jsx_runtime_1.jsx)(BlockError, { error: model.error, "data-testid": "reload_button" });
     }
     else if (model.message) {
-        return react_1.default.createElement(BlockMessage, { messageText: model.message });
+        return (0, jsx_runtime_1.jsx)(BlockMessage, { messageText: model.message });
     }
     else if (!model.filled) {
-        return react_1.default.createElement(LoadingMessage, null);
+        return (0, jsx_runtime_1.jsx)(LoadingMessage, {});
     }
     else if (model.shouldDisplay) {
-        return react_1.default.createElement("div", { style: style }, model.reactElement);
+        return (0, jsx_runtime_1.jsx)("div", { style: style, children: model.reactElement });
     }
     return null;
 });

package/dist/ServerSideSyntenyRendering.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 interface ModelType {
     imageData: string;
     style: Record<string, string>;
@@ -10,5 +9,5 @@ interface ModelType {
 }
 declare const ServerSideSyntenyRendering: ({ model, }: {
     model: ModelType;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default ServerSideSyntenyRendering;

package/dist/ServerSideSyntenyRendering.js

@@ -1,29 +1,7 @@
 "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 });
-const react_1 = __importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const offscreenCanvasPonyfill_1 = require("@jbrowse/core/util/offscreenCanvasPonyfill");
 const mobx_react_1 = require("mobx-react");
 const ServerSideSyntenyRendering = (0, mobx_react_1.observer)(function ({ model, }) {
@@ -40,6 +18,6 @@ const ServerSideSyntenyRendering = (0, mobx_react_1.observer)(function ({ model,
         (0, offscreenCanvasPonyfill_1.drawImageOntoCanvasContext)(imageData, context);
         setDone(true);
     }, [imageData]);
-    return (react_1.default.createElement("canvas", { "data-testid": `prerendered_canvas${done ? '_done' : ''}`, ref: featureCanvas, width: width * highResolutionScaling, height: height * highResolutionScaling, style: { width, height, ...style } }));
+    return ((0, jsx_runtime_1.jsx)("canvas", { "data-testid": `prerendered_canvas${done ? '_done' : ''}`, ref: featureCanvas, width: width * highResolutionScaling, height: height * highResolutionScaling, style: { width, height, ...style } }));
 });
 exports.default = ServerSideSyntenyRendering;

package/esm/DotplotDisplay/components/DotplotDisplay.d.ts

@@ -1,7 +1,6 @@
-import React from 'react';
 import type { DotplotDisplayModel } from '../stateModelFactory';
 declare const DotplotDisplay: (props: {
     model: DotplotDisplayModel;
     children?: React.ReactNode;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default DotplotDisplay;

package/esm/DotplotDisplay/components/DotplotDisplay.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getContainingView } from '@jbrowse/core/util';
 import { observer } from 'mobx-react';
 const DotplotDisplay = observer(function DotplotDisplay(props) {
@@ -7,12 +7,10 @@ const DotplotDisplay = observer(function DotplotDisplay(props) {
     const view = getContainingView(model);
     const top = view.vview.offsetPx - offsetY;
     const left = -(view.hview.offsetPx - offsetX);
-    return (React.createElement("div", { style: { position: 'relative' } },
-        React.createElement(model.ReactComponent2, { ...props, style: {
-                position: 'absolute',
-                top,
-                left,
-            } }),
-        children));
+    return (_jsxs("div", { style: { position: 'relative' }, children: [_jsx(model.ReactComponent2, { ...props, style: {
+                    position: 'absolute',
+                    top,
+                    left,
+                } }), children] }));
 });
 export default DotplotDisplay;

package/esm/DotplotDisplay/stateModelFactory.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { ExportSvgOptions } from '../DotplotView/model';
 import type { AnyConfigurationSchemaType } from '@jbrowse/core/configuration';
 import type { ThemeOptions } from '@mui/material';
@@ -87,7 +86,7 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
 } & {
     renderSvg(opts: ExportSvgOptions & {
         theme?: ThemeOptions;
-    }): Promise<React.JSX.Element | null>;
+    }): Promise<import("react/jsx-runtime").JSX.Element | null>;
 } & {
     afterAttach(): void;
     setLoading(stopToken?: string): void;

package/esm/DotplotDisplay/stateModelFactory.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { ConfigurationReference, getConf } from '@jbrowse/core/configuration';
 import { BaseDisplay } from '@jbrowse/core/pluggableElementTypes/models';
 import { ReactRendering, getContainingView, makeAbortableReaction, } from '@jbrowse/core/util';
@@ -56,8 +56,7 @@ export function stateModelFactory(configSchema) {
             const { hview, vview } = getContainingView(self);
             const offX = -hview.offsetPx + rendering.offsetX;
             const offY = -vview.offsetPx + rendering.offsetY;
-            return (React.createElement("g", { transform: `translate(${offX} ${-offY})` },
-                React.createElement(ReactRendering, { rendering: rendering })));
+            return (_jsx("g", { transform: `translate(${offX} ${-offY})`, children: _jsx(ReactRendering, { rendering: rendering }) }));
         },
     }))
         .actions(self => ({

package/esm/DotplotRenderer/DotplotRenderer.d.ts

@@ -36,7 +36,7 @@ export default class DotplotRenderer extends ComparativeRenderer {
         bpPerPxX: number;
         bpPerPxY: number;
         canvasRecordedData: any;
-        reactElement?: import("react").ReactElement;
+        reactElement?: React.ReactElement;
         html?: string;
     } | {
         height: number;
@@ -45,7 +45,7 @@ export default class DotplotRenderer extends ComparativeRenderer {
         offsetY: number;
         bpPerPxX: number;
         bpPerPxY: number;
-        reactElement: React.JSX.Element;
+        reactElement: import("react/jsx-runtime").JSX.Element;
         html?: string;
     } | {
         height: number;
@@ -55,7 +55,7 @@ export default class DotplotRenderer extends ComparativeRenderer {
         bpPerPxX: number;
         bpPerPxY: number;
         imageData: any;
-        reactElement?: import("react").ReactElement;
+        reactElement?: React.ReactElement;
         html?: string;
     }>;
 }

package/esm/DotplotRenderer/components/DotplotRendering.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { DotplotRenderArgsDeserialized } from '../DotplotRenderer';
-declare const DotplotRendering: (props: DotplotRenderArgsDeserialized) => React.JSX.Element;
+declare const DotplotRendering: (props: DotplotRenderArgsDeserialized) => import("react/jsx-runtime").JSX.Element;
 export default DotplotRendering;

package/esm/DotplotRenderer/components/DotplotRendering.js

@@ -1,7 +1,7 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { PrerenderedCanvas } from '@jbrowse/core/ui';
 import { observer } from 'mobx-react';
 const DotplotRendering = observer(function (props) {
-    return React.createElement(PrerenderedCanvas, { ...props });
+    return _jsx(PrerenderedCanvas, { ...props });
 });
 export default DotplotRendering;

package/esm/DotplotView/components/Axes.d.ts

@@ -1,14 +1,13 @@
-import React from 'react';
 import type { DotplotViewModel } from '../model';
 export declare const HorizontalAxis: ({ model, }: {
     model: DotplotViewModel;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const HorizontalAxisRaw: ({ model, }: {
     model: DotplotViewModel;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const VerticalAxis: ({ model, }: {
     model: DotplotViewModel;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const VerticalAxisRaw: ({ model, }: {
     model: DotplotViewModel;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;