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

package/esm/LinearGenomeView/components/Highlight.js

@@ -1,4 +1,5 @@
-import React, { useRef, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
 import { Menu } from '@jbrowse/core/ui';
 import { getSession } from '@jbrowse/core/util';
 import { colord } from '@jbrowse/core/util/colord';
@@ -18,8 +19,11 @@ const useStyles = makeStyles()(theme => ({
     linkIcon: {
         color: colord(theme.palette.highlight.main).darken(0.2).toRgbString(),
     },
+    z3: {
+        zIndex: 3,
+    },
 }));
-const Highlight = observer(function Highlight({ model, highlight, }) {
+const Highlight = observer(function ({ model, highlight, }) {
     var _a;
     const { classes } = useStyles();
     const [open, setOpen] = useState(false);
@@ -53,41 +57,34 @@ const Highlight = observer(function Highlight({ model, highlight, }) {
         ...highlight,
         refName: (_a = asm === null || asm === void 0 ? void 0 : asm.getCanonicalRefName(highlight.refName)) !== null && _a !== void 0 ? _a : highlight.refName,
     });
-    return h ? (React.createElement("div", { className: classes.highlight, style: {
+    return h ? (_jsxs("div", { className: classes.highlight, style: {
             left: h.left,
             width: h.width,
-        } },
-        React.createElement(Tooltip, { title: "Highlighted from URL parameter", arrow: true },
-            React.createElement(IconButton, { ref: anchorEl, onClick: () => {
-                    setOpen(true);
-                }, style: { zIndex: 3 } },
-                React.createElement(LinkIcon, { fontSize: "small", className: classes.linkIcon }))),
-        React.createElement(Menu, { anchorEl: anchorEl.current, onMenuItemClick: (_event, callback) => {
-                callback(session);
-                handleClose();
-            }, open: open, onClose: handleClose, menuItems: [
-                {
-                    label: 'Dismiss highlight',
-                    icon: CloseIcon,
-                    onClick: () => {
-                        dismissHighlight();
+        }, children: [_jsx(Tooltip, { title: "Highlighted from URL parameter", arrow: true, children: _jsx(IconButton, { ref: anchorEl, className: classes.z3, onClick: () => {
+                        setOpen(true);
+                    }, children: _jsx(LinkIcon, { fontSize: "small", className: classes.linkIcon }) }) }), _jsx(Menu, { anchorEl: anchorEl.current, onMenuItemClick: (_event, callback) => {
+                    callback(session);
+                    handleClose();
+                }, open: open, onClose: handleClose, menuItems: [
+                    {
+                        label: 'Dismiss highlight',
+                        icon: CloseIcon,
+                        onClick: () => {
+                            dismissHighlight();
+                        },
                     },
-                },
-                {
-                    label: 'Bookmark highlighted region',
-                    icon: BookmarkIcon,
-                    onClick: () => {
-                        let bookmarkWidget = session.widgets.get('GridBookmark');
-                        if (!bookmarkWidget) {
-                            bookmarkWidget = session.addWidget('GridBookmarkWidget', 'GridBookmark');
-                        }
-                        bookmarkWidget.addBookmark(highlight);
-                        dismissHighlight();
+                    {
+                        label: 'Bookmark highlighted region',
+                        icon: BookmarkIcon,
+                        onClick: () => {
+                            let bookmarkWidget = session.widgets.get('GridBookmark');
+                            if (!bookmarkWidget) {
+                                bookmarkWidget = session.addWidget('GridBookmarkWidget', 'GridBookmark');
+                            }
+                            bookmarkWidget.addBookmark(highlight);
+                            dismissHighlight();
+                        },
                     },
-                },
-            ] }))) : null;
-});
-const HighlightGroup = observer(function HighlightGroup({ model, }) {
-    return model.highlight.map((highlight, idx) => (React.createElement(Highlight, { key: `${JSON.stringify(highlight)}-${idx}`, model: model, highlight: highlight })));
+                ] })] })) : null;
 });
-export default HighlightGroup;
+export default Highlight;

package/esm/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/esm/LinearGenomeView/components/ImportForm.js

@@ -1,8 +1,9 @@
-import React, { useEffect, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
 import { AssemblySelector, ErrorMessage } from '@jbrowse/core/ui';
 import { getSession } from '@jbrowse/core/util';
 import CloseIcon from '@mui/icons-material/Close';
-import { Button, CircularProgress, Container, FormControl, Grid, } from '@mui/material';
+import { Button, CircularProgress, Container, FormControl, Grid2 as Grid, } from '@mui/material';
 import { observer } from 'mobx-react';
 import { makeStyles } from 'tss-react/mui';
 import ImportFormRefNameAutocomplete from './ImportFormRefNameAutocomplete';
@@ -38,51 +39,37 @@ const LinearGenomeViewImportForm = observer(function ({ model, }) {
     useEffect(() => {
         setValue(r0);
     }, [r0, selectedAsm]);
-    return (React.createElement("div", { className: classes.container },
-        displayError ? React.createElement(ErrorMessage, { error: displayError }) : null,
-        React.createElement(Container, { className: classes.importFormContainer },
-            React.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 navToOption({
-                                    option,
-                                    model,
-                                    assemblyName: selectedAsm,
-                                });
+    return (_jsxs("div", { className: classes.container, children: [displayError ? _jsx(ErrorMessage, { error: displayError }) : null, _jsx(Container, { className: classes.importFormContainer, children: _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 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 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 handleSelectedRegion({ input: value, assembly, model });
-                            }
-                        }
-                        catch (e) {
-                            console.error(e);
-                            session.notify(`${e}`, 'warning');
                         }
-                    }
-                } },
-                React.createElement(Grid, { container: true, spacing: 1, justifyContent: "center", alignItems: "center" },
-                    React.createElement(Grid, { item: true },
-                        React.createElement(FormControl, null,
-                            React.createElement(AssemblySelector, { onChange: val => {
-                                    setSelectedAsm(val);
-                                }, localStorageKey: "lgv", session: session, selected: selectedAsm }))),
-                    React.createElement(Grid, { item: true }, selectedAsm ? (assemblyError ? (React.createElement(CloseIcon, { style: { color: 'red' } })) : assemblyLoaded ? (React.createElement(FormControl, null,
-                        React.createElement(ImportFormRefNameAutocomplete, { value: value, setValue: setValue, selectedAsm: selectedAsm, setOption: setOption, model: model }))) : (React.createElement(CircularProgress, { size: 20, disableShrink: true }))) : null),
-                    React.createElement(Grid, { item: true },
-                        React.createElement(FormControl, null,
-                            React.createElement(Button, { type: "submit", disabled: !value, className: classes.button, variant: "contained", color: "primary" }, "Open")),
-                        React.createElement(FormControl, null,
-                            React.createElement(Button, { disabled: !value, className: classes.button, onClick: () => {
-                                    model.setError(undefined);
-                                    model.showAllRegionsInAssembly(selectedAsm);
-                                }, variant: "contained", color: "secondary" }, "Show all regions in assembly"))))))));
+                    }, children: _jsxs(Grid, { container: true, spacing: 1, justifyContent: "center", alignItems: "center", children: [_jsx(FormControl, { children: _jsx(AssemblySelector, { onChange: val => {
+                                        setSelectedAsm(val);
+                                    }, localStorageKey: "lgv", session: session, selected: selectedAsm }) }), selectedAsm ? (assemblyError ? (_jsx(CloseIcon, { style: { color: 'red' } })) : assemblyLoaded ? (_jsx(FormControl, { children: _jsx(ImportFormRefNameAutocomplete, { value: value, setValue: setValue, selectedAsm: selectedAsm, setOption: setOption, model: model }) })) : (_jsx(CircularProgress, { size: 20, disableShrink: true }))) : null, _jsx(FormControl, { children: _jsx(Button, { type: "submit", disabled: !value, className: classes.button, variant: "contained", color: "primary", children: "Open" }) }), _jsx(FormControl, { children: _jsx(Button, { disabled: !value, className: classes.button, onClick: () => {
+                                        model.setError(undefined);
+                                        model.showAllRegionsInAssembly(selectedAsm);
+                                    }, variant: "contained", color: "secondary", children: "Show all regions in assembly" }) })] }) }) })] }));
 });
 export default LinearGenomeViewImportForm;

package/esm/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/esm/LinearGenomeView/components/ImportFormRefNameAutocomplete.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { getSession } from '@jbrowse/core/util';
 import { observer } from 'mobx-react';
 import RefNameAutocomplete from './RefNameAutocomplete';
@@ -9,7 +9,7 @@ const ImportFormRefNameAutocomplete = observer(function ({ model, selectedAsm, v
     const { rankSearchResults } = model;
     const searchScope = model.searchScope(selectedAsm);
     const assembly = assemblyManager.get(selectedAsm);
-    return (React.createElement(RefNameAutocomplete, { fetchResults: queryString => fetchResults({
+    return (_jsx(RefNameAutocomplete, { fetchResults: queryString => fetchResults({
             queryString,
             assembly,
             textSearchManager,

package/esm/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/esm/LinearGenomeView/components/LinearGenomeView.js

@@ -1,4 +1,5 @@
-import React, { Suspense, lazy, useEffect, useRef } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Suspense, lazy, useEffect, useRef } from 'react';
 import { LoadingEllipses } from '@jbrowse/core/ui';
 import { getSession } from '@jbrowse/core/util';
 import { observer } from 'mobx-react';
@@ -18,13 +19,13 @@ const useStyles = makeStyles()({
 const LinearGenomeView = observer(function ({ model, }) {
     const { error, initialized, hasDisplayedRegions } = model;
     if (!initialized && !error) {
-        return React.createElement(LoadingEllipses, { variant: "h6" });
+        return _jsx(LoadingEllipses, { variant: "h6" });
     }
     else if (!hasDisplayedRegions || error) {
-        return React.createElement(ImportForm, { model: model });
+        return _jsx(ImportForm, { model: model });
     }
     else {
-        return React.createElement(LinearGenomeViewContainer, { model: model });
+        return _jsx(LinearGenomeViewContainer, { model: model });
     }
 });
 const LinearGenomeViewContainer = observer(function ({ model, }) {
@@ -48,7 +49,7 @@ const LinearGenomeViewContainer = observer(function ({ model, }) {
             document.removeEventListener('keydown', handleSelectView);
         };
     }, [session, model]);
-    return (React.createElement("div", { className: classes.rel, ref: ref, onMouseLeave: () => {
+    return (_jsxs("div", { className: classes.rel, ref: ref, onMouseLeave: () => {
             session.setHovered(undefined);
         }, onMouseMove: event => {
             const c = ref.current;
@@ -60,10 +61,6 @@ const LinearGenomeViewContainer = observer(function ({ model, }) {
             const hoverPosition = model.pxToBp(leftPx);
             const hoverFeature = tracks.find(t => t.displays[0].featureUnderMouse);
             session.setHovered({ hoverPosition, hoverFeature });
-        } },
-        React.createElement(HeaderComponent, { model: model }),
-        React.createElement(MiniControlsComponent, { model: model }),
-        React.createElement(TracksContainer, { model: model }, !tracks.length ? (React.createElement(Suspense, { fallback: React.createElement(React.Fragment, null) },
-            React.createElement(NoTracksActiveButton, { model: model }))) : (tracks.map(track => (React.createElement(TrackContainer, { key: track.id, model: model, track: track })))))));
+        }, children: [_jsx(HeaderComponent, { model: model }), _jsx(MiniControlsComponent, { model: model }), _jsx(TracksContainer, { model: model, children: !tracks.length ? (_jsx(Suspense, { fallback: null, children: _jsx(NoTracksActiveButton, { model: model }) })) : (tracks.map(track => (_jsx(TrackContainer, { model: model, track: track }, track.id)))) })] }));
 });
 export default LinearGenomeView;

package/esm/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/esm/LinearGenomeView/components/MiniControls.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
 import { getSession } from '@jbrowse/core/util';
 import ArrowDown from '@mui/icons-material/KeyboardArrowDown';
@@ -22,17 +22,10 @@ const MiniControls = observer(function ({ model, }) {
     const { classes } = useStyles();
     const { id, bpPerPx, maxBpPerPx, minBpPerPx, scaleFactor, hideHeader } = model;
     const { focusedViewId } = getSession(model);
-    return hideHeader ? (React.createElement(Paper, { className: classes.background },
-        React.createElement(Paper, { className: focusedViewId === id ? classes.focusedBackground : undefined },
-            React.createElement(CascadingMenuButton, { menuItems: model.menuItems() },
-                React.createElement(ArrowDown, { fontSize: "small" })),
-            React.createElement(IconButton, { "data-testid": "zoom_out", onClick: () => {
-                    model.zoom(bpPerPx * 2);
-                }, disabled: bpPerPx >= maxBpPerPx - 0.0001 || scaleFactor !== 1 },
-                React.createElement(ZoomOut, { fontSize: "small" })),
-            React.createElement(IconButton, { "data-testid": "zoom_in", onClick: () => {
-                    model.zoom(bpPerPx / 2);
-                }, disabled: bpPerPx <= minBpPerPx + 0.0001 || scaleFactor !== 1 },
-                React.createElement(ZoomIn, { fontSize: "small" }))))) : null;
+    return hideHeader ? (_jsx(Paper, { className: classes.background, children: _jsxs(Paper, { className: focusedViewId === id ? classes.focusedBackground : undefined, children: [_jsx(CascadingMenuButton, { menuItems: model.menuItems(), children: _jsx(ArrowDown, { fontSize: "small" }) }), _jsx(IconButton, { "data-testid": "zoom_out", onClick: () => {
+                        model.zoom(bpPerPx * 2);
+                    }, disabled: bpPerPx >= maxBpPerPx - 0.0001 || scaleFactor !== 1, children: _jsx(ZoomOut, { fontSize: "small" }) }), _jsx(IconButton, { "data-testid": "zoom_in", onClick: () => {
+                        model.zoom(bpPerPx / 2);
+                    }, disabled: bpPerPx <= minBpPerPx + 0.0001 || scaleFactor !== 1, children: _jsx(ZoomIn, { fontSize: "small" }) })] }) })) : null;
 });
 export default MiniControls;

package/esm/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/esm/LinearGenomeView/components/NoTracksActiveButton.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons';
 import { Button, Paper, Typography } from '@mui/material';
 import { observer } from 'mobx-react';
@@ -16,8 +16,6 @@ const useStyles = makeStyles()(theme => ({
 const NoTracksActiveButton = observer(function ({ model, }) {
     const { classes } = useStyles();
     const { hideNoTracksActive } = model;
-    return (React.createElement(Paper, { className: classes.note }, !hideNoTracksActive ? (React.createElement(React.Fragment, null,
-        React.createElement(Typography, null, "No tracks active."),
-        React.createElement(Button, { variant: "contained", color: "primary", onClick: () => model.activateTrackSelector(), className: classes.top, startIcon: React.createElement(TrackSelectorIcon, null) }, "Open track selector"))) : (React.createElement("div", { style: { height: '48px' } }))));
+    return (_jsx(Paper, { className: classes.note, children: !hideNoTracksActive ? (_jsxs(_Fragment, { children: [_jsx(Typography, { children: "No tracks active." }), _jsx(Button, { variant: "contained", color: "primary", onClick: () => model.activateTrackSelector(), className: classes.top, startIcon: _jsx(TrackSelectorIcon, {}), children: "Open track selector" })] })) : (_jsx("div", { style: { height: '48px' } })) }));
 });
 export default NoTracksActiveButton;

package/esm/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/esm/LinearGenomeView/components/OverviewHighlight.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { getSession, notEmpty } from '@jbrowse/core/util';
 import { colord } from '@jbrowse/core/util/colord';
 import { observer } from 'mobx-react';
@@ -40,9 +40,9 @@ const OverviewHighlight = observer(function OverviewHighlight({ model, overview,
             : undefined;
     })
         .filter(notEmpty)
-        .map(({ left, width }, idx) => (React.createElement("div", { key: `${left}_${width}_${idx}`, className: classes.highlight, style: {
+        .map(({ left, width }, idx) => (_jsx("div", { className: classes.highlight, style: {
             width: width,
             left: left,
-        } })));
+        } }, `${left}_${width}_${idx}`)));
 });
 export default OverviewHighlight;

package/esm/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;

package/esm/LinearGenomeView/components/OverviewRubberband.js

@@ -1,4 +1,5 @@
-import React, { useEffect, useRef, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
 import { getSession, stringify } from '@jbrowse/core/util';
 import { Tooltip } from '@mui/material';
 import { observer } from 'mobx-react';
@@ -32,10 +33,9 @@ const HoverTooltip = observer(function ({ model, open, guideX, overview, }) {
     const cytoband = (_a = assembly === null || assembly === void 0 ? void 0 : assembly.cytobands) === null || _a === void 0 ? void 0 : _a.find(f => px.coord > f.get('start') &&
         px.coord < f.get('end') &&
         px.refName === assembly.getCanonicalRefName(f.get('refName')));
-    return (React.createElement(Tooltip, { open: open, placement: "top", title: [stringify(px), cytoband === null || cytoband === void 0 ? void 0 : cytoband.get('name')].join(' '), arrow: true },
-        React.createElement("div", { className: classes.guide, style: { left: guideX } })));
+    return (_jsx(Tooltip, { open: open, placement: "top", title: [stringify(px), cytoband === null || cytoband === void 0 ? void 0 : cytoband.get('name')].join(' '), arrow: true, children: _jsx("div", { className: classes.guide, style: { left: guideX } }) }));
 });
-const OverviewRubberband = observer(function OverviewRubberband({ model, overview, ControlComponent = React.createElement("div", null), }) {
+const OverviewRubberband = observer(function OverviewRubberband({ model, overview, ControlComponent = _jsx("div", {}), }) {
     const { cytobandOffset } = model;
     const [startX, setStartX] = useState();
     const [currentX, setCurrentX] = useState();
@@ -104,9 +104,7 @@ const OverviewRubberband = observer(function OverviewRubberband({ model, overvie
         setGuideX(undefined);
     }
     if (startX === undefined) {
-        return (React.createElement("div", { className: classes.rel },
-            guideX !== undefined ? (React.createElement(HoverTooltip, { model: model, open: !mouseDragging, overview: overview, guideX: guideX })) : null,
-            React.createElement("div", { className: classes.rubberbandControl, ref: controlsRef, onMouseDown: mouseDown, onMouseOut: mouseOut, onMouseMove: mouseMove }, ControlComponent)));
+        return (_jsxs("div", { className: classes.rel, children: [guideX !== undefined ? (_jsx(HoverTooltip, { model: model, open: !mouseDragging, overview: overview, guideX: guideX })) : null, _jsx("div", { className: classes.rubberbandControl, ref: controlsRef, onMouseDown: mouseDown, onMouseOut: mouseOut, onMouseMove: mouseMove, children: ControlComponent })] }));
     }
     let left = startX || 0;
     let width = 0;
@@ -124,8 +122,6 @@ const OverviewRubberband = observer(function OverviewRubberband({ model, overvie
             [leftBpOffset, rightBpOffset] = [rightBpOffset, leftBpOffset];
         }
     }
-    return (React.createElement("div", { className: classes.rel },
-        leftBpOffset && rightBpOffset ? (React.createElement(RubberbandSpan, { leftBpOffset: leftBpOffset, rightBpOffset: rightBpOffset, width: Math.abs(width), left: left })) : null,
-        React.createElement("div", { "data-testid": "rubberband_controls", className: classes.rubberbandControl, ref: controlsRef, onMouseDown: mouseDown, onMouseOut: mouseOut, onMouseMove: mouseMove }, ControlComponent)));
+    return (_jsxs("div", { className: classes.rel, children: [leftBpOffset && rightBpOffset ? (_jsx(RubberbandSpan, { leftBpOffset: leftBpOffset, rightBpOffset: rightBpOffset, width: Math.abs(width), left: left })) : null, _jsx("div", { "data-testid": "rubberband_controls", className: classes.rubberbandControl, ref: controlsRef, onMouseDown: mouseDown, onMouseOut: mouseOut, onMouseMove: mouseMove, children: ControlComponent })] }));
 });
 export default OverviewRubberband;

package/esm/LinearGenomeView/components/OverviewScalebar.d.ts

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

package/esm/LinearGenomeView/components/OverviewScalebar.js

@@ -1,4 +1,5 @@
-import React, { useMemo } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
 import { getEnv, getSession } from '@jbrowse/core/util';
 import Base1DView from '@jbrowse/core/util/Base1DViewModel';
 import { Typography, alpha, useTheme } from '@mui/material';
@@ -66,23 +67,20 @@ const OverviewBox = observer(function ({ scale, model, block, overview, }) {
     const assembly = assemblyManager.get(assemblyName);
     const refNameColor = assembly === null || assembly === void 0 ? void 0 : assembly.getRefNameColor(refName);
     const canDisplayCytobands = showCytobands && getCytobands(assembly, block.refName).length;
-    return (React.createElement("div", null,
-        React.createElement(Typography, { style: {
-                left: block.offsetPx + 3,
-                color: canDisplayCytobands
-                    ? theme.palette.text.primary
-                    : refNameColor,
-            }, className: classes.scalebarRefName }, refName),
-        React.createElement("div", { className: cx(classes.scalebarContig, canDisplayCytobands
-                ? undefined
-                : reversed
-                    ? classes.scalebarContigReverse
-                    : classes.scalebarContigForward, !canDisplayCytobands ? classes.scalebarBorder : undefined), style: {
-                left: block.offsetPx + cytobandOffset,
-                width: block.widthPx,
-                borderColor: refNameColor,
-            } }, canDisplayCytobands ? (React.createElement("svg", { style: { width: '100%' } },
-            React.createElement(Cytobands, { overview: overview, assembly: assembly, block: block }))) : (React.createElement(OverviewScalebarTickLabels, { model: model, overview: overview, scale: scale, block: block })))));
+    return (_jsxs("div", { children: [_jsx(Typography, { style: {
+                    left: block.offsetPx + 3,
+                    color: canDisplayCytobands
+                        ? theme.palette.text.primary
+                        : refNameColor,
+                }, className: classes.scalebarRefName, children: refName }), _jsx("div", { className: cx(classes.scalebarContig, canDisplayCytobands
+                    ? undefined
+                    : reversed
+                        ? classes.scalebarContigReverse
+                        : classes.scalebarContigForward, !canDisplayCytobands ? classes.scalebarBorder : undefined), style: {
+                    left: block.offsetPx + cytobandOffset,
+                    width: block.widthPx,
+                    borderColor: refNameColor,
+                }, children: canDisplayCytobands ? (_jsx("svg", { style: { width: '100%' }, children: _jsx(Cytobands, { overview: overview, assembly: assembly, block: block }) })) : (_jsx(OverviewScalebarTickLabels, { model: model, overview: overview, scale: scale, block: block })) })] }));
 });
 const Scalebar = observer(function ({ model, scale, overview, }) {
     const { classes } = useStyles();
@@ -108,23 +106,19 @@ const Scalebar = observer(function ({ model, scale, overview, }) {
     const color = showCytobands ? '#f00' : scalebarColor;
     const transparency = showCytobands ? 0.1 : 0.3;
     const additional = pluginManager.evaluateExtensionPoint('LinearGenomeView-OverviewScalebarComponent', undefined, { model, overview });
-    return (React.createElement("div", { className: classes.scalebar },
-        React.createElement("div", { className: classes.scalebarVisibleRegion, style: {
-                width: lastOverviewPx - firstOverviewPx,
-                left: firstOverviewPx + cytobandOffset,
-                background: alpha(color, transparency),
-                borderColor: color,
-            } }),
-        overviewVisibleRegions.map((block, idx) => {
-            return !(block.type === 'ContentBlock') ? (React.createElement("div", { key: `${JSON.stringify(block)}-${idx}`, className: classes.scalebarContig, style: {
-                    width: block.widthPx,
-                    left: block.offsetPx,
-                    backgroundColor: '#999',
-                    backgroundImage: 'repeating-linear-gradient(90deg, transparent, transparent 1px, rgba(255,255,255,.5) 1px, rgba(255,255,255,.5) 3px)',
-                } })) : (React.createElement(OverviewBox, { scale: scale, block: block, model: model, overview: overview, key: `${JSON.stringify(block)}-${idx}` }));
-        }),
-        React.createElement(OverviewHighlight, { model: model, overview: overview }),
-        additional));
+    return (_jsxs("div", { className: classes.scalebar, children: [_jsx("div", { className: classes.scalebarVisibleRegion, style: {
+                    width: lastOverviewPx - firstOverviewPx,
+                    left: firstOverviewPx + cytobandOffset,
+                    background: alpha(color, transparency),
+                    borderColor: color,
+                } }), overviewVisibleRegions.map((block, idx) => {
+                return !(block.type === 'ContentBlock') ? (_jsx("div", { className: classes.scalebarContig, style: {
+                        width: block.widthPx,
+                        left: block.offsetPx,
+                        backgroundColor: '#999',
+                        backgroundImage: 'repeating-linear-gradient(90deg, transparent, transparent 1px, rgba(255,255,255,.5) 1px, rgba(255,255,255,.5) 3px)',
+                    } }, `${JSON.stringify(block)}-${idx}`)) : (_jsx(OverviewBox, { scale: scale, block: block, model: model, overview: overview }, `${JSON.stringify(block)}-${idx}`));
+            }), _jsx(OverviewHighlight, { model: model, overview: overview }), additional] }));
 });
 const OverviewScalebar = observer(function ({ model, children, }) {
     const { classes } = useStyles();
@@ -142,11 +136,6 @@ const OverviewScalebar = observer(function ({ model, children, }) {
         return overview;
     }, [str, minimumBlockWidth, modWidth]);
     const scale = totalBp / (modWidth - (displayedRegions.length - 1) * wholeSeqSpacer);
-    return (React.createElement("div", null,
-        React.createElement(OverviewRubberband, { model: model, overview: overview, ControlComponent: React.createElement(Scalebar, { model: model, overview: overview, scale: scale }) }),
-        React.createElement("div", { className: classes.overview },
-            React.createElement("svg", { height: HEADER_BAR_HEIGHT, className: classes.overviewSvg },
-                React.createElement(OverviewScalebarPolygon, { model: model, overview: overview })),
-            children)));
+    return (_jsxs("div", { children: [_jsx(OverviewRubberband, { model: model, overview: overview, ControlComponent: _jsx(Scalebar, { model: model, overview: overview, scale: scale }) }), _jsxs("div", { className: classes.overview, children: [_jsx("svg", { height: HEADER_BAR_HEIGHT, className: classes.overviewSvg, children: _jsx(OverviewScalebarPolygon, { model: model, overview: overview }) }), children] })] }));
 });
 export default OverviewScalebar;

package/esm/LinearGenomeView/components/OverviewScalebarPolygon.d.ts

@@ -1,9 +1,8 @@
-import React from 'react';
 import type { LinearGenomeViewModel } from '..';
 import type { Base1DViewModel } from '@jbrowse/core/util/Base1DViewModel';
 declare const OverviewScalebarPolygon: ({ model, overview, useOffset, }: {
     model: LinearGenomeViewModel;
     overview: Base1DViewModel;
     useOffset?: boolean;
-}) => React.JSX.Element | null;
+}) => import("react/jsx-runtime").JSX.Element | null;
 export default OverviewScalebarPolygon;

package/esm/LinearGenomeView/components/OverviewScalebarPolygon.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { getFillProps, getStrokeProps } from '@jbrowse/core/util';
 import { alpha, useTheme } from '@mui/material';
 import { observer } from 'mobx-react';
@@ -34,6 +34,6 @@ const OverviewScalebarPolygon = observer(function ({ model, overview, useOffset
         [topRight, 0],
         [topLeft, 0],
     ];
-    return (React.createElement("polygon", { points: points.toString(), ...getFillProps(alpha(polygonColor, 0.3)), ...getStrokeProps(alpha(polygonColor, 0.8)) }));
+    return (_jsx("polygon", { points: points.toString(), ...getFillProps(alpha(polygonColor, 0.3)), ...getStrokeProps(alpha(polygonColor, 0.8)) }));
 });
 export default OverviewScalebarPolygon;

package/esm/LinearGenomeView/components/OverviewScalebarTickLabels.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { LinearGenomeViewModel } from '..';
 import type { Base1DViewModel } from '@jbrowse/core/util/Base1DViewModel';
 import type { ContentBlock } from '@jbrowse/core/util/blockTypes';
@@ -7,5 +6,5 @@ declare const OverviewScalebarTickLabels: ({ block, scale, overview, model, }: {
     scale: number;
     block: ContentBlock;
     overview: Base1DViewModel;
-}) => React.JSX.Element[];
+}) => import("react/jsx-runtime").JSX.Element[];
 export default OverviewScalebarTickLabels;

package/esm/LinearGenomeView/components/OverviewScalebarTickLabels.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { getSession, getTickDisplayStr } from '@jbrowse/core/util';
 import { Typography } from '@mui/material';
 import { observer } from 'mobx-react';
@@ -26,10 +26,10 @@ const OverviewScalebarTickLabels = observer(function ({ block, scale, overview,
         const offsetLabel = (i + 1) * majorPitch;
         tickLabels.push(reversed ? end - offsetLabel : start + offsetLabel);
     }
-    return tickLabels.map((tickLabel, labelIdx) => (React.createElement(Typography, { key: `${JSON.stringify(block)}-${tickLabel}-${labelIdx}`, className: classes.scalebarLabel, variant: "body2", style: {
+    return tickLabels.map((tickLabel, labelIdx) => (_jsx(Typography, { className: classes.scalebarLabel, variant: "body2", style: {
             left: ((labelIdx + 1) * majorPitch) / scale,
             pointerEvents: 'none',
             color: refNameColor,
-        } }, getTickDisplayStr(tickLabel, overview.bpPerPx))));
+        }, children: getTickDisplayStr(tickLabel, overview.bpPerPx) }, `${JSON.stringify(block)}-${tickLabel}-${labelIdx}`)));
 });
 export default OverviewScalebarTickLabels;

package/esm/LinearGenomeView/components/RefNameAutocomplete/AutocompleteTextField.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { AutocompleteRenderInputParams, TextFieldProps as TFP } from '@mui/material';
 export default function AutocompleteTextField({ TextFieldProps, inputBoxVal, params, showHelp, setInputValue, setCurrentSearch, }: {
     TextFieldProps: TFP;
@@ -7,4 +6,4 @@ export default function AutocompleteTextField({ TextFieldProps, inputBoxVal, par
     params: AutocompleteRenderInputParams;
     setInputValue: (arg: string) => void;
     setCurrentSearch: (arg: string) => void;
-}): React.JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;