@jbrowse/plugin-linear-genome-view 2.18.0 → 3.0.0

package/dist/LinearGenomeView/components/HeaderZoomControls.js

@@ -0,0 +1,103 @@
+"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 () {
+    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 jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const CascadingMenuButton_1 = __importDefault(require("@jbrowse/core/ui/CascadingMenuButton"));
+const util_1 = require("@jbrowse/core/util");
+const MoreVert_1 = __importDefault(require("@mui/icons-material/MoreVert"));
+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 mui_1 = require("tss-react/mui");
+const RegionWidthEditorDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./RegionWidthEditorDialog'))));
+const useStyles = (0, mui_1.makeStyles)()(theme => ({
+    container: {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    slider: {
+        width: 100,
+        color: theme.palette.text.secondary,
+    },
+}));
+const HeaderZoomControls = (0, mobx_react_1.observer)(function ({ model, }) {
+    const { classes } = useStyles();
+    const { maxBpPerPx, minBpPerPx, bpPerPx } = model;
+    const [value, setValue] = (0, react_1.useState)(-Math.log2(bpPerPx) * 100);
+    (0, react_1.useEffect)(() => {
+        setValue(-Math.log2(bpPerPx) * 100);
+    }, [bpPerPx]);
+    const zoomInDisabled = bpPerPx <= minBpPerPx + 0.0001;
+    const zoomOutDisabled = bpPerPx >= maxBpPerPx - 0.0001;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: classes.container, children: [(0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: "Zoom out 2x", children: (0, jsx_runtime_1.jsx)("span", { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { "data-testid": "zoom_out", disabled: zoomOutDisabled, onClick: () => {
+                            model.zoom(bpPerPx * 2);
+                        }, children: (0, jsx_runtime_1.jsx)(ZoomOut_1.default, {}) }) }) }), (0, jsx_runtime_1.jsx)(material_1.Slider, { size: "small", className: classes.slider, value: value, min: -Math.log2(maxBpPerPx) * 100, max: -Math.log2(minBpPerPx) * 100, onChangeCommitted: () => model.zoomTo(2 ** (-value / 100)), onChange: (_, val) => {
+                    setValue(val);
+                } }), (0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: "Zoom in 2x", children: (0, jsx_runtime_1.jsx)("span", { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { "data-testid": "zoom_in", disabled: zoomInDisabled, onClick: () => {
+                            model.zoom(model.bpPerPx / 2);
+                        }, children: (0, jsx_runtime_1.jsx)(ZoomIn_1.default, {}) }) }) }), (0, jsx_runtime_1.jsx)(CascadingMenuButton_1.default, { menuItems: [
+                    ...[100, 50, 10].map(r => ({
+                        label: `Zoom in ${r}x`,
+                        onClick: () => {
+                            model.zoom(model.bpPerPx / r);
+                        },
+                    })),
+                    ...[10, 50, 100].map(r => ({
+                        label: `Zoom out ${r}x`,
+                        onClick: () => {
+                            model.zoom(model.bpPerPx * r);
+                        },
+                    })),
+                    {
+                        label: 'Custom zoom',
+                        onClick: () => {
+                            (0, util_1.getSession)(model).queueDialog(handleClose => [
+                                RegionWidthEditorDialog,
+                                {
+                                    model,
+                                    handleClose,
+                                },
+                            ]);
+                        },
+                    },
+                ], children: (0, jsx_runtime_1.jsx)(MoreVert_1.default, {}) })] }));
+});
+exports.default = HeaderZoomControls;

package/dist/LinearGenomeView/components/Highlight.d.ts

@@ -1,7 +1,12 @@
-import React from 'react';
 import type { LinearGenomeViewModel } from '../model';
 type LGV = LinearGenomeViewModel;
-declare const HighlightGroup: ({ model, }: {
+declare const Highlight: ({ model, highlight, }: {
     model: LGV;
-}) => React.JSX.Element[];
-export default HighlightGroup;
+    highlight: {
+        assemblyName: string;
+        refName: string;
+        start: number;
+        end: number;
+    };
+}) => import("react/jsx-runtime").JSX.Element | null;
+export default Highlight;

package/dist/LinearGenomeView/components/Highlight.js

@@ -1,32 +1,10 @@
 "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;
-};
 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 util_1 = require("@jbrowse/core/util");
 const colord_1 = require("@jbrowse/core/util/colord");
@@ -46,8 +24,11 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
     linkIcon: {
         color: (0, colord_1.colord)(theme.palette.highlight.main).darken(0.2).toRgbString(),
     },
+    z3: {
+        zIndex: 3,
+    },
 }));
-const Highlight = (0, mobx_react_1.observer)(function Highlight({ model, highlight, }) {
+const Highlight = (0, mobx_react_1.observer)(function ({ model, highlight, }) {
     var _a;
     const { classes } = useStyles();
     const [open, setOpen] = (0, react_1.useState)(false);
@@ -81,41 +62,34 @@ const Highlight = (0, mobx_react_1.observer)(function Highlight({ model, highlig
         ...highlight,
         refName: (_a = asm === null || asm === void 0 ? void 0 : asm.getCanonicalRefName(highlight.refName)) !== null && _a !== void 0 ? _a : highlight.refName,
     });
-    return h ? (react_1.default.createElement("div", { className: classes.highlight, style: {
+    return h ? ((0, jsx_runtime_1.jsxs)("div", { className: classes.highlight, style: {
             left: h.left,
             width: h.width,
-        } },
-        react_1.default.createElement(material_1.Tooltip, { title: "Highlighted from URL parameter", arrow: true },
-            react_1.default.createElement(material_1.IconButton, { ref: anchorEl, onClick: () => {
-                    setOpen(true);
-                }, style: { zIndex: 3 } },
-                react_1.default.createElement(Link_1.default, { fontSize: "small", className: classes.linkIcon }))),
-        react_1.default.createElement(ui_1.Menu, { anchorEl: anchorEl.current, onMenuItemClick: (_event, callback) => {
-                callback(session);
-                handleClose();
-            }, open: open, onClose: handleClose, menuItems: [
-                {
-                    label: 'Dismiss highlight',
-                    icon: Close_1.default,
-                    onClick: () => {
-                        dismissHighlight();
+        }, children: [(0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: "Highlighted from URL parameter", arrow: true, children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { ref: anchorEl, className: classes.z3, onClick: () => {
+                        setOpen(true);
+                    }, children: (0, jsx_runtime_1.jsx)(Link_1.default, { fontSize: "small", className: classes.linkIcon }) }) }), (0, jsx_runtime_1.jsx)(ui_1.Menu, { anchorEl: anchorEl.current, onMenuItemClick: (_event, callback) => {
+                    callback(session);
+                    handleClose();
+                }, open: open, onClose: handleClose, menuItems: [
+                    {
+                        label: 'Dismiss highlight',
+                        icon: Close_1.default,
+                        onClick: () => {
+                            dismissHighlight();
+                        },
                     },
-                },
-                {
-                    label: 'Bookmark highlighted region',
-                    icon: Bookmark_1.default,
-                    onClick: () => {
-                        let bookmarkWidget = session.widgets.get('GridBookmark');
-                        if (!bookmarkWidget) {
-                            bookmarkWidget = session.addWidget('GridBookmarkWidget', 'GridBookmark');
-                        }
-                        bookmarkWidget.addBookmark(highlight);
-                        dismissHighlight();
+                    {
+                        label: 'Bookmark highlighted region',
+                        icon: Bookmark_1.default,
+                        onClick: () => {
+                            let bookmarkWidget = session.widgets.get('GridBookmark');
+                            if (!bookmarkWidget) {
+                                bookmarkWidget = session.addWidget('GridBookmarkWidget', 'GridBookmark');
+                            }
+                            bookmarkWidget.addBookmark(highlight);
+                            dismissHighlight();
+                        },
                     },
-                },
-            ] }))) : null;
-});
-const HighlightGroup = (0, mobx_react_1.observer)(function HighlightGroup({ model, }) {
-    return model.highlight.map((highlight, idx) => (react_1.default.createElement(Highlight, { key: `${JSON.stringify(highlight)}-${idx}`, model: model, highlight: highlight })));
+                ] })] })) : null;
 });
-exports.default = HighlightGroup;
+exports.default = Highlight;

package/dist/LinearGenomeView/components/ImportForm.d.ts

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

package/dist/LinearGenomeView/components/ImportForm.js

@@ -1,32 +1,10 @@
 "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;
-};
 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 util_1 = require("@jbrowse/core/util");
 const Close_1 = __importDefault(require("@mui/icons-material/Close"));
@@ -66,51 +44,37 @@ const LinearGenomeViewImportForm = (0, mobx_react_1.observer)(function ({ model,
     (0, react_1.useEffect)(() => {
         setValue(r0);
     }, [r0, selectedAsm]);
-    return (react_1.default.createElement("div", { className: classes.container },
-        displayError ? react_1.default.createElement(ui_1.ErrorMessage, { error: displayError }) : null,
-        react_1.default.createElement(material_1.Container, { className: classes.importFormContainer },
-            react_1.default.createElement("form", { onSubmit: async (event) => {
-                    var _a;
-                    event.preventDefault();
-                    model.setError(undefined);
-                    if (value) {
-                        try {
-                            if ((option === null || option === void 0 ? void 0 : option.getDisplayString()) === value &&
-                                option.hasLocation()) {
-                                await (0, searchUtils_1.navToOption)({
-                                    option,
-                                    model,
-                                    assemblyName: selectedAsm,
-                                });
+    return ((0, jsx_runtime_1.jsxs)("div", { className: classes.container, children: [displayError ? (0, jsx_runtime_1.jsx)(ui_1.ErrorMessage, { error: displayError }) : null, (0, jsx_runtime_1.jsx)(material_1.Container, { className: classes.importFormContainer, children: (0, jsx_runtime_1.jsx)("form", { onSubmit: async (event) => {
+                        var _a;
+                        event.preventDefault();
+                        model.setError(undefined);
+                        if (value) {
+                            try {
+                                if ((option === null || option === void 0 ? void 0 : option.getDisplayString()) === value &&
+                                    option.hasLocation()) {
+                                    await (0, searchUtils_1.navToOption)({
+                                        option,
+                                        model,
+                                        assemblyName: selectedAsm,
+                                    });
+                                }
+                                else if ((_a = option === null || option === void 0 ? void 0 : option.results) === null || _a === void 0 ? void 0 : _a.length) {
+                                    model.setSearchResults(option.results, option.getLabel(), selectedAsm);
+                                }
+                                else if (assembly) {
+                                    await (0, searchUtils_1.handleSelectedRegion)({ input: value, assembly, model });
+                                }
                             }
-                            else if ((_a = option === null || option === void 0 ? void 0 : option.results) === null || _a === void 0 ? void 0 : _a.length) {
-                                model.setSearchResults(option.results, option.getLabel(), selectedAsm);
+                            catch (e) {
+                                console.error(e);
+                                session.notify(`${e}`, 'warning');
                             }
-                            else if (assembly) {
-                                await (0, searchUtils_1.handleSelectedRegion)({ input: value, assembly, model });
-                            }
-                        }
-                        catch (e) {
-                            console.error(e);
-                            session.notify(`${e}`, 'warning');
                         }
-                    }
-                } },
-                react_1.default.createElement(material_1.Grid, { container: true, spacing: 1, justifyContent: "center", alignItems: "center" },
-                    react_1.default.createElement(material_1.Grid, { item: true },
-                        react_1.default.createElement(material_1.FormControl, null,
-                            react_1.default.createElement(ui_1.AssemblySelector, { onChange: val => {
-                                    setSelectedAsm(val);
-                                }, localStorageKey: "lgv", session: session, selected: selectedAsm }))),
-                    react_1.default.createElement(material_1.Grid, { item: true }, selectedAsm ? (assemblyError ? (react_1.default.createElement(Close_1.default, { style: { color: 'red' } })) : assemblyLoaded ? (react_1.default.createElement(material_1.FormControl, null,
-                        react_1.default.createElement(ImportFormRefNameAutocomplete_1.default, { value: value, setValue: setValue, selectedAsm: selectedAsm, setOption: setOption, model: model }))) : (react_1.default.createElement(material_1.CircularProgress, { size: 20, disableShrink: true }))) : null),
-                    react_1.default.createElement(material_1.Grid, { item: true },
-                        react_1.default.createElement(material_1.FormControl, null,
-                            react_1.default.createElement(material_1.Button, { type: "submit", disabled: !value, className: classes.button, variant: "contained", color: "primary" }, "Open")),
-                        react_1.default.createElement(material_1.FormControl, null,
-                            react_1.default.createElement(material_1.Button, { disabled: !value, className: classes.button, onClick: () => {
-                                    model.setError(undefined);
-                                    model.showAllRegionsInAssembly(selectedAsm);
-                                }, variant: "contained", color: "secondary" }, "Show all regions in assembly"))))))));
+                    }, children: (0, jsx_runtime_1.jsxs)(material_1.Grid2, { container: true, spacing: 1, justifyContent: "center", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(material_1.FormControl, { children: (0, jsx_runtime_1.jsx)(ui_1.AssemblySelector, { onChange: val => {
+                                        setSelectedAsm(val);
+                                    }, localStorageKey: "lgv", session: session, selected: selectedAsm }) }), selectedAsm ? (assemblyError ? ((0, jsx_runtime_1.jsx)(Close_1.default, { style: { color: 'red' } })) : assemblyLoaded ? ((0, jsx_runtime_1.jsx)(material_1.FormControl, { children: (0, jsx_runtime_1.jsx)(ImportFormRefNameAutocomplete_1.default, { value: value, setValue: setValue, selectedAsm: selectedAsm, setOption: setOption, model: model }) })) : ((0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 20, disableShrink: true }))) : null, (0, jsx_runtime_1.jsx)(material_1.FormControl, { children: (0, jsx_runtime_1.jsx)(material_1.Button, { type: "submit", disabled: !value, className: classes.button, variant: "contained", color: "primary", children: "Open" }) }), (0, jsx_runtime_1.jsx)(material_1.FormControl, { children: (0, jsx_runtime_1.jsx)(material_1.Button, { disabled: !value, className: classes.button, onClick: () => {
+                                        model.setError(undefined);
+                                        model.showAllRegionsInAssembly(selectedAsm);
+                                    }, variant: "contained", color: "secondary", children: "Show all regions in assembly" }) })] }) }) })] }));
 });
 exports.default = LinearGenomeViewImportForm;

package/dist/LinearGenomeView/components/ImportFormRefNameAutocomplete.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { LinearGenomeViewModel } from '..';
 import type BaseResult from '@jbrowse/core/TextSearch/BaseResults';
 type LGV = LinearGenomeViewModel;
@@ -8,5 +7,5 @@ declare const ImportFormRefNameAutocomplete: ({ model, selectedAsm, value, setVa
     model: LGV;
     selectedAsm: string;
     setOption: (arg: BaseResult) => void;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default ImportFormRefNameAutocomplete;

package/dist/LinearGenomeView/components/ImportFormRefNameAutocomplete.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 mobx_react_1 = require("mobx-react");
 const RefNameAutocomplete_1 = __importDefault(require("./RefNameAutocomplete"));
@@ -14,7 +14,7 @@ const ImportFormRefNameAutocomplete = (0, mobx_react_1.observer)(function ({ mod
     const { rankSearchResults } = model;
     const searchScope = model.searchScope(selectedAsm);
     const assembly = assemblyManager.get(selectedAsm);
-    return (react_1.default.createElement(RefNameAutocomplete_1.default, { fetchResults: queryString => (0, util_2.fetchResults)({
+    return ((0, jsx_runtime_1.jsx)(RefNameAutocomplete_1.default, { fetchResults: queryString => (0, util_2.fetchResults)({
             queryString,
             assembly,
             textSearchManager,

package/dist/LinearGenomeView/components/LinearGenomeView.d.ts

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

package/dist/LinearGenomeView/components/LinearGenomeView.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 util_1 = require("@jbrowse/core/util");
 const mobx_react_1 = require("mobx-react");
@@ -46,13 +57,13 @@ const useStyles = (0, mui_1.makeStyles)()({
 const LinearGenomeView = (0, mobx_react_1.observer)(function ({ model, }) {
     const { error, initialized, hasDisplayedRegions } = model;
     if (!initialized && !error) {
-        return react_1.default.createElement(ui_1.LoadingEllipses, { variant: "h6" });
+        return (0, jsx_runtime_1.jsx)(ui_1.LoadingEllipses, { variant: "h6" });
     }
     else if (!hasDisplayedRegions || error) {
-        return react_1.default.createElement(ImportForm, { model: model });
+        return (0, jsx_runtime_1.jsx)(ImportForm, { model: model });
     }
     else {
-        return react_1.default.createElement(LinearGenomeViewContainer, { model: model });
+        return (0, jsx_runtime_1.jsx)(LinearGenomeViewContainer, { model: model });
     }
 });
 const LinearGenomeViewContainer = (0, mobx_react_1.observer)(function ({ model, }) {
@@ -76,7 +87,7 @@ const LinearGenomeViewContainer = (0, mobx_react_1.observer)(function ({ model,
             document.removeEventListener('keydown', handleSelectView);
         };
     }, [session, model]);
-    return (react_1.default.createElement("div", { className: classes.rel, ref: ref, onMouseLeave: () => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: classes.rel, ref: ref, onMouseLeave: () => {
             session.setHovered(undefined);
         }, onMouseMove: event => {
             const c = ref.current;
@@ -88,10 +99,6 @@ const LinearGenomeViewContainer = (0, mobx_react_1.observer)(function ({ model,
             const hoverPosition = model.pxToBp(leftPx);
             const hoverFeature = tracks.find(t => t.displays[0].featureUnderMouse);
             session.setHovered({ hoverPosition, hoverFeature });
-        } },
-        react_1.default.createElement(HeaderComponent, { model: model }),
-        react_1.default.createElement(MiniControlsComponent, { model: model }),
-        react_1.default.createElement(TracksContainer_1.default, { model: model }, !tracks.length ? (react_1.default.createElement(react_1.Suspense, { fallback: react_1.default.createElement(react_1.default.Fragment, null) },
-            react_1.default.createElement(NoTracksActiveButton, { model: model }))) : (tracks.map(track => (react_1.default.createElement(TrackContainer_1.default, { key: track.id, model: model, track: track })))))));
+        }, children: [(0, jsx_runtime_1.jsx)(HeaderComponent, { model: model }), (0, jsx_runtime_1.jsx)(MiniControlsComponent, { model: model }), (0, jsx_runtime_1.jsx)(TracksContainer_1.default, { model: model, children: !tracks.length ? ((0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: null, children: (0, jsx_runtime_1.jsx)(NoTracksActiveButton, { model: model }) })) : (tracks.map(track => ((0, jsx_runtime_1.jsx)(TrackContainer_1.default, { model: model, track: track }, track.id)))) })] }));
 });
 exports.default = LinearGenomeView;

package/dist/LinearGenomeView/components/MiniControls.d.ts

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

package/dist/LinearGenomeView/components/MiniControls.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 CascadingMenuButton_1 = __importDefault(require("@jbrowse/core/ui/CascadingMenuButton"));
 const util_1 = require("@jbrowse/core/util");
 const KeyboardArrowDown_1 = __importDefault(require("@mui/icons-material/KeyboardArrowDown"));
@@ -27,17 +27,10 @@ const MiniControls = (0, mobx_react_1.observer)(function ({ model, }) {
     const { classes } = useStyles();
     const { id, bpPerPx, maxBpPerPx, minBpPerPx, scaleFactor, hideHeader } = model;
     const { focusedViewId } = (0, util_1.getSession)(model);
-    return hideHeader ? (react_1.default.createElement(material_1.Paper, { className: classes.background },
-        react_1.default.createElement(material_1.Paper, { className: focusedViewId === id ? classes.focusedBackground : undefined },
-            react_1.default.createElement(CascadingMenuButton_1.default, { menuItems: model.menuItems() },
-                react_1.default.createElement(KeyboardArrowDown_1.default, { fontSize: "small" })),
-            react_1.default.createElement(material_1.IconButton, { "data-testid": "zoom_out", onClick: () => {
-                    model.zoom(bpPerPx * 2);
-                }, disabled: bpPerPx >= maxBpPerPx - 0.0001 || scaleFactor !== 1 },
-                react_1.default.createElement(ZoomOut_1.default, { fontSize: "small" })),
-            react_1.default.createElement(material_1.IconButton, { "data-testid": "zoom_in", onClick: () => {
-                    model.zoom(bpPerPx / 2);
-                }, disabled: bpPerPx <= minBpPerPx + 0.0001 || scaleFactor !== 1 },
-                react_1.default.createElement(ZoomIn_1.default, { fontSize: "small" }))))) : null;
+    return hideHeader ? ((0, jsx_runtime_1.jsx)(material_1.Paper, { className: classes.background, children: (0, jsx_runtime_1.jsxs)(material_1.Paper, { className: focusedViewId === id ? classes.focusedBackground : undefined, children: [(0, jsx_runtime_1.jsx)(CascadingMenuButton_1.default, { menuItems: model.menuItems(), children: (0, jsx_runtime_1.jsx)(KeyboardArrowDown_1.default, { fontSize: "small" }) }), (0, jsx_runtime_1.jsx)(material_1.IconButton, { "data-testid": "zoom_out", onClick: () => {
+                        model.zoom(bpPerPx * 2);
+                    }, disabled: bpPerPx >= maxBpPerPx - 0.0001 || scaleFactor !== 1, children: (0, jsx_runtime_1.jsx)(ZoomOut_1.default, { fontSize: "small" }) }), (0, jsx_runtime_1.jsx)(material_1.IconButton, { "data-testid": "zoom_in", onClick: () => {
+                        model.zoom(bpPerPx / 2);
+                    }, disabled: bpPerPx <= minBpPerPx + 0.0001 || scaleFactor !== 1, children: (0, jsx_runtime_1.jsx)(ZoomIn_1.default, { fontSize: "small" }) })] }) })) : null;
 });
 exports.default = MiniControls;

package/dist/LinearGenomeView/components/NoTracksActiveButton.d.ts

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

package/dist/LinearGenomeView/components/NoTracksActiveButton.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 Icons_1 = require("@jbrowse/core/ui/Icons");
 const material_1 = require("@mui/material");
 const mobx_react_1 = require("mobx-react");
@@ -21,8 +18,6 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
 const NoTracksActiveButton = (0, mobx_react_1.observer)(function ({ model, }) {
     const { classes } = useStyles();
     const { hideNoTracksActive } = model;
-    return (react_1.default.createElement(material_1.Paper, { className: classes.note }, !hideNoTracksActive ? (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(material_1.Typography, null, "No tracks active."),
-        react_1.default.createElement(material_1.Button, { variant: "contained", color: "primary", onClick: () => model.activateTrackSelector(), className: classes.top, startIcon: react_1.default.createElement(Icons_1.TrackSelector, null) }, "Open track selector"))) : (react_1.default.createElement("div", { style: { height: '48px' } }))));
+    return ((0, jsx_runtime_1.jsx)(material_1.Paper, { className: classes.note, children: !hideNoTracksActive ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: "No tracks active." }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", color: "primary", onClick: () => model.activateTrackSelector(), className: classes.top, startIcon: (0, jsx_runtime_1.jsx)(Icons_1.TrackSelector, {}), children: "Open track selector" })] })) : ((0, jsx_runtime_1.jsx)("div", { style: { height: '48px' } })) }));
 });
 exports.default = NoTracksActiveButton;

package/dist/LinearGenomeView/components/OverviewHighlight.d.ts

@@ -1,9 +1,8 @@
-import React from 'react';
 import type { LinearGenomeViewModel } from '../model';
 import type { Base1DViewModel } from '@jbrowse/core/util/Base1DViewModel';
 type LGV = LinearGenomeViewModel;
 declare const OverviewHighlight: ({ model, overview, }: {
     model: LGV;
     overview: Base1DViewModel;
-}) => React.JSX.Element[];
+}) => import("react/jsx-runtime").JSX.Element[];
 export default OverviewHighlight;

package/dist/LinearGenomeView/components/OverviewHighlight.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 util_1 = require("@jbrowse/core/util");
 const colord_1 = require("@jbrowse/core/util/colord");
 const mobx_react_1 = require("mobx-react");
@@ -45,9 +42,9 @@ const OverviewHighlight = (0, mobx_react_1.observer)(function OverviewHighlight(
             : undefined;
     })
         .filter(util_1.notEmpty)
-        .map(({ left, width }, idx) => (react_1.default.createElement("div", { key: `${left}_${width}_${idx}`, className: classes.highlight, style: {
+        .map(({ left, width }, idx) => ((0, jsx_runtime_1.jsx)("div", { className: classes.highlight, style: {
             width: width,
             left: left,
-        } })));
+        } }, `${left}_${width}_${idx}`)));
 });
 exports.default = OverviewHighlight;

package/dist/LinearGenomeView/components/OverviewRubberband.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { LinearGenomeViewModel } from '..';
 import type { Base1DViewModel } from '@jbrowse/core/util/Base1DViewModel';
 type LGV = LinearGenomeViewModel;
@@ -6,5 +5,5 @@ declare const OverviewRubberband: ({ model, overview, ControlComponent, }: {
     model: LGV;
     overview: Base1DViewModel;
     ControlComponent?: React.ReactElement;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default OverviewRubberband;