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

package/esm/LinearGenomeView/components/RefNameAutocomplete/AutocompleteTextField.js

@@ -1,15 +1,15 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { TextField } from '@mui/material';
 import EndAdornment from './EndAdornment';
 export default function AutocompleteTextField({ TextFieldProps, inputBoxVal, params, showHelp, setInputValue, setCurrentSearch, }) {
     const { helperText, InputProps = {} } = TextFieldProps;
-    return (React.createElement(TextField, { onBlur: () => {
+    return (_jsx(TextField, { onBlur: () => {
             setInputValue(inputBoxVal);
         }, ...params, ...TextFieldProps, size: "small", helperText: helperText, slotProps: {
             input: {
                 ...params.InputProps,
                 ...InputProps,
-                endAdornment: (React.createElement(EndAdornment, { showHelp: showHelp, endAdornment: params.InputProps.endAdornment })),
+                endAdornment: (_jsx(EndAdornment, { showHelp: showHelp, endAdornment: params.InputProps.endAdornment })),
             },
         }, placeholder: "Search for location", onChange: e => {
             setCurrentSearch(e.target.value);

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

@@ -1,5 +1,4 @@
-import React from 'react';
 export default function EndAdornment({ showHelp, endAdornment, }: {
     showHelp?: boolean;
     endAdornment: React.ReactNode;
-}): React.JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

package/esm/LinearGenomeView/components/RefNameAutocomplete/EndAdornment.js

@@ -1,24 +1,17 @@
-import React, { Suspense, lazy, useState } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Suspense, lazy, useState } from 'react';
 import HelpIcon from '@mui/icons-material/Help';
 import SearchIcon from '@mui/icons-material/Search';
 import { IconButton, InputAdornment } from '@mui/material';
 const HelpDialog = lazy(() => import('./HelpDialog'));
 function HelpAdornment() {
     const [isHelpDialogDisplayed, setHelpDialogDisplayed] = useState(false);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(IconButton, { onClick: () => {
-                setHelpDialogDisplayed(true);
-            }, size: "small" },
-            React.createElement(HelpIcon, { fontSize: "small" })),
-        isHelpDialogDisplayed ? (React.createElement(Suspense, { fallback: null },
-            React.createElement(HelpDialog, { handleClose: () => {
-                    setHelpDialogDisplayed(false);
-                } }))) : null));
+    return (_jsxs(_Fragment, { children: [_jsx(IconButton, { onClick: () => {
+                    setHelpDialogDisplayed(true);
+                }, size: "small", children: _jsx(HelpIcon, { fontSize: "small" }) }), isHelpDialogDisplayed ? (_jsx(Suspense, { fallback: null, children: _jsx(HelpDialog, { handleClose: () => {
+                        setHelpDialogDisplayed(false);
+                    } }) })) : null] }));
 }
 export default function EndAdornment({ showHelp, endAdornment, }) {
-    return (React.createElement(React.Fragment, null,
-        React.createElement(InputAdornment, { position: "end", style: { marginRight: 7 } },
-            React.createElement(SearchIcon, { fontSize: "small" }),
-            showHelp ? React.createElement(HelpAdornment, null) : null),
-        endAdornment));
+    return (_jsxs(_Fragment, { children: [_jsxs(InputAdornment, { position: "end", style: { marginRight: 7 }, children: [_jsx(SearchIcon, { fontSize: "small" }), showHelp ? _jsx(HelpAdornment, {}) : null] }), endAdornment] }));
 }

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

@@ -1,4 +1,3 @@
-import React from 'react';
 export default function HelpDialog({ handleClose, }: {
     handleClose: () => void;
-}): React.JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

package/esm/LinearGenomeView/components/RefNameAutocomplete/HelpDialog.js

@@ -1,44 +1,8 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Dialog } from '@jbrowse/core/ui';
 import { Button, DialogActions, DialogContent, Divider } from '@mui/material';
 export default function HelpDialog({ handleClose, }) {
-    return (React.createElement(Dialog, { open: true, maxWidth: "xl", onClose: handleClose, title: "Using the search box" },
-        React.createElement(DialogContent, null,
-            React.createElement("h3", null, "Searching"),
-            React.createElement("ul", null,
-                React.createElement("li", null, "Jump to a feature or reference sequence by typing its name in the location box and pressing Enter."),
-                React.createElement("li", null,
-                    "Jump to a specific region by typing the region into the location box as: ",
-                    React.createElement("code", null, "ref:start..end"),
-                    " or ",
-                    React.createElement("code", null, "ref:start-end"),
-                    ". Commas are allowed in the start and end coordinates. A space-separated list of locstrings can be used to open up multiple chromosomes at a time")),
-            React.createElement("h3", null, "Example Searches"),
-            React.createElement("ul", null,
-                React.createElement("li", null,
-                    React.createElement("code", null, "BRCA"),
-                    " - searches for the feature named BRCA"),
-                React.createElement("li", null,
-                    React.createElement("code", null, "chr4"),
-                    " - jumps to chromosome 4"),
-                React.createElement("li", null,
-                    React.createElement("code", null, "chr4:79,500,000..80,000,000"),
-                    " - jumps the region on chromosome 4 between 79.5Mb and 80Mb."),
-                React.createElement("li", null,
-                    React.createElement("code", null, "chr1:1-100 chr2:1-100"),
-                    " - create a split view of chr1:1-100 and chr2:1-100"),
-                React.createElement("li", null,
-                    React.createElement("code", null, "chr1 chr2 chr3"),
-                    " - open up multiple chromosomes at once"),
-                React.createElement("li", null,
-                    React.createElement("code", null, "chr1:1-100[rev] chr2:1-100"),
-                    " - open up the first region in the horizontally flipped orientation"),
-                React.createElement("li", null,
-                    React.createElement("code", null, "chr1 100 200"),
-                    " - use whitespace separated refname, start, end"))),
-        React.createElement(Divider, null),
-        React.createElement(DialogActions, null,
-            React.createElement(Button, { onClick: () => {
-                    handleClose();
-                }, color: "primary" }, "Close"))));
+    return (_jsxs(Dialog, { open: true, maxWidth: "xl", onClose: handleClose, title: "Using the search box", children: [_jsxs(DialogContent, { children: [_jsx("h3", { children: "Searching" }), _jsxs("ul", { children: [_jsx("li", { children: "Jump to a feature or reference sequence by typing its name in the location box and pressing Enter." }), _jsxs("li", { children: ["Jump to a specific region by typing the region into the location box as: ", _jsx("code", { children: "ref:start..end" }), " or ", _jsx("code", { children: "ref:start-end" }), ". Commas are allowed in the start and end coordinates. A space-separated list of locstrings can be used to open up multiple chromosomes at a time"] })] }), _jsx("h3", { children: "Example Searches" }), _jsxs("ul", { children: [_jsxs("li", { children: [_jsx("code", { children: "BRCA" }), " - searches for the feature named BRCA"] }), _jsxs("li", { children: [_jsx("code", { children: "chr4" }), " - jumps to chromosome 4"] }), _jsxs("li", { children: [_jsx("code", { children: "chr4:79,500,000..80,000,000" }), " - jumps the region on chromosome 4 between 79.5Mb and 80Mb."] }), _jsxs("li", { children: [_jsx("code", { children: "chr1:1-100 chr2:1-100" }), " - create a split view of chr1:1-100 and chr2:1-100"] }), _jsxs("li", { children: [_jsx("code", { children: "chr1 chr2 chr3" }), " - open up multiple chromosomes at once"] }), _jsxs("li", { children: [_jsx("code", { children: "chr1:1-100[rev] chr2:1-100" }), " - open up the first region in the horizontally flipped orientation"] }), _jsxs("li", { children: [_jsx("code", { children: "chr1 100 200" }), " - use whitespace separated refname, start, end"] })] })] }), _jsx(Divider, {}), _jsx(DialogActions, { children: _jsx(Button, { onClick: () => {
+                        handleClose();
+                    }, color: "primary", children: "Close" }) })] }));
 }

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import BaseResult from '@jbrowse/core/TextSearch/BaseResults';
 import type { LinearGenomeViewModel } from '../../model';
 import type { TextFieldProps as TFP } from '@mui/material';
@@ -14,5 +13,5 @@ declare const RefNameAutocomplete: ({ model, onSelect, assemblyName, style, fetc
     maxWidth?: number;
     showHelp?: boolean;
     TextFieldProps?: TFP;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default RefNameAutocomplete;

package/esm/LinearGenomeView/components/RefNameAutocomplete/index.js

@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
 import BaseResult, { RefSequenceResult, } from '@jbrowse/core/TextSearch/BaseResults';
 import { getSession, measureText, useDebounce } from '@jbrowse/core/util';
 import { Autocomplete } from '@mui/material';
@@ -44,7 +45,7 @@ const RefNameAutocomplete = observer(function ({ model, onSelect, assemblyName,
             matchedAttribute: 'refName',
         }),
     }))) || [];
-    return (React.createElement(Autocomplete, { "data-testid": "autocomplete", disableListWrap: true, disableClearable: true, disabled: !assemblyName, freeSolo: true, includeInputInList: true, selectOnFocus: true, style: { ...style, width }, value: inputBoxVal, loading: !loaded, inputValue: inputValue, onInputChange: (_event, newInputValue) => {
+    return (_jsx(Autocomplete, { "data-testid": "autocomplete", disableListWrap: true, disableClearable: true, disabled: !assemblyName, freeSolo: true, includeInputInList: true, selectOnFocus: true, style: { ...style, width }, value: inputBoxVal, loading: !loaded, inputValue: inputValue, onInputChange: (_event, newInputValue) => {
             setInputValue(newInputValue);
             onChange === null || onChange === void 0 ? void 0 : onChange(newInputValue);
         }, loadingText: "loading results", open: open, onOpen: () => {
@@ -67,6 +68,6 @@ const RefNameAutocomplete = observer(function ({ model, onSelect, assemblyName,
                 onSelect === null || onSelect === void 0 ? void 0 : onSelect(selectedOption.result);
             }
             setInputValue(inputBoxVal);
-        }, options: (searchOptions === null || searchOptions === void 0 ? void 0 : searchOptions.length) ? searchOptions : regionOptions, getOptionDisabled: option => option.group === 'limitOption', filterOptions: (opts, { inputValue }) => getFiltered(opts, inputValue), renderInput: params => (React.createElement(AutocompleteTextField, { showHelp: showHelp, params: params, inputBoxVal: inputBoxVal, TextFieldProps: TextFieldProps, setCurrentSearch: setCurrentSearch, setInputValue: setInputValue })), getOptionLabel: opt => typeof opt === 'string' ? opt : opt.result.getDisplayString() }));
+        }, options: (searchOptions === null || searchOptions === void 0 ? void 0 : searchOptions.length) ? searchOptions : regionOptions, getOptionDisabled: option => option.group === 'limitOption', filterOptions: (opts, { inputValue }) => getFiltered(opts, inputValue), renderInput: params => (_jsx(AutocompleteTextField, { showHelp: showHelp, params: params, inputBoxVal: inputBoxVal, TextFieldProps: TextFieldProps, setCurrentSearch: setCurrentSearch, setInputValue: setInputValue })), getOptionLabel: opt => typeof opt === 'string' ? opt : opt.result.getDisplayString() }));
 });
 export default RefNameAutocomplete;

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

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

package/esm/LinearGenomeView/components/RegionWidthEditorDialog.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Dialog } from '@jbrowse/core/ui';
+import { toLocale } from '@jbrowse/core/util';
+import { Button, DialogActions, DialogContent, TextField, Typography, } from '@mui/material';
+import { observer } from 'mobx-react';
+const toP = (s = 0) => +(+s).toFixed(1);
+const RegionWidthEditorDialog = observer(function ({ model, handleClose, }) {
+    const { bpPerPx, width } = model;
+    const [val, setVal] = useState(toLocale(toP(bpPerPx * width)));
+    useEffect(() => {
+        setVal(toLocale(bpPerPx * width));
+    }, [bpPerPx, width]);
+    const val2 = val.replace(/,/g, '');
+    return (_jsxs(Dialog, { title: "Edit zoom level", open: true, onClose: handleClose, children: [_jsxs(DialogContent, { style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: 30,
+                }, children: [_jsx(Typography, { children: "Enter a specific number of base pairs to change the viewport to show. This is approximate and does not account for padding between regions or off-screen scrolling" }), _jsx(TextField, { helperText: "current zoom level (in bp)", value: val, onChange: event => {
+                            setVal(event.target.value);
+                        } })] }), _jsxs(DialogActions, { children: [_jsx(Button, { variant: "contained", color: "secondary", onClick: () => {
+                            handleClose();
+                        }, children: "Cancel" }), _jsx(Button, { variant: "contained", color: "primary", onClick: () => {
+                            model.zoomTo(+val2 / model.width);
+                            handleClose();
+                        }, children: "Submit" })] })] }));
+});
+export default RegionWidthEditorDialog;

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

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

package/esm/LinearGenomeView/components/Rubberband.js

@@ -1,4 +1,5 @@
-import React, { useRef } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
 import { Menu } from '@jbrowse/core/ui';
 import { observer } from 'mobx-react';
 import { makeStyles } from 'tss-react/mui';
@@ -12,16 +13,13 @@ const useStyles = makeStyles()({
         minHeight: 8,
     },
 });
-const Rubberband = observer(function ({ model, ControlComponent = React.createElement("div", null), }) {
+const Rubberband = observer(function ({ model, ControlComponent = _jsx("div", {}), }) {
     const ref = useRef(null);
     const { classes } = useStyles();
     const { guideX, rubberbandOn, leftBpOffset, rightBpOffset, numOfBpSelected, width, left, anchorPosition, open, handleMenuItemClick, handleClose, mouseMove, mouseDown, mouseOut, } = useRangeSelect(ref, model);
-    return (React.createElement(React.Fragment, null,
-        guideX !== undefined ? (React.createElement(VerticalGuide, { model: model, coordX: guideX })) : rubberbandOn ? (React.createElement(RubberbandSpan, { leftBpOffset: leftBpOffset, rightBpOffset: rightBpOffset, numOfBpSelected: numOfBpSelected, width: width, left: left })) : null,
-        anchorPosition ? (React.createElement(Menu, { anchorReference: "anchorPosition", anchorPosition: {
-                left: anchorPosition.clientX,
-                top: anchorPosition.clientY,
-            }, onMenuItemClick: handleMenuItemClick, open: open, onClose: handleClose, menuItems: model.rubberBandMenuItems() })) : null,
-        React.createElement("div", { "data-testid": "rubberband_controls", className: classes.rubberbandControl, ref: ref, onMouseDown: mouseDown, onMouseMove: mouseMove, onMouseOut: mouseOut }, ControlComponent)));
+    return (_jsxs(_Fragment, { children: [guideX !== undefined ? (_jsx(VerticalGuide, { model: model, coordX: guideX })) : rubberbandOn ? (_jsx(RubberbandSpan, { leftBpOffset: leftBpOffset, rightBpOffset: rightBpOffset, numOfBpSelected: numOfBpSelected, width: width, left: left })) : null, anchorPosition ? (_jsx(Menu, { anchorReference: "anchorPosition", anchorPosition: {
+                    left: anchorPosition.clientX,
+                    top: anchorPosition.clientY,
+                }, onMenuItemClick: handleMenuItemClick, open: open, onClose: handleClose, menuItems: model.rubberBandMenuItems() })) : null, _jsx("div", { "data-testid": "rubberband_controls", className: classes.rubberbandControl, ref: ref, onMouseDown: mouseDown, onMouseMove: mouseMove, onMouseOut: mouseOut, children: ControlComponent })] }));
 });
 export default Rubberband;

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

@@ -1,4 +1,3 @@
-import React from 'react';
 interface Offset {
     coord: number;
     refName?: string;
@@ -10,5 +9,5 @@ export default function RubberbandSpan({ leftBpOffset, rightBpOffset, numOfBpSel
     numOfBpSelected?: number;
     left: number;
     width: number;
-}): React.JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 export {};

package/esm/LinearGenomeView/components/RubberbandSpan.js

@@ -1,4 +1,5 @@
-import React, { useRef } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
 import { stringify, toLocale } from '@jbrowse/core/util';
 import { Popover, Typography, alpha } from '@mui/material';
 import { makeStyles } from 'tss-react/mui';
@@ -32,16 +33,20 @@ const useStyles = makeStyles()(theme => {
         },
     };
 });
+function Tooltip({ anchorEl, side, text, }) {
+    const { classes } = useStyles();
+    return (_jsx(Popover, { className: classes.popover, classes: { paper: classes.paper }, open: true, anchorEl: anchorEl, anchorOrigin: {
+            vertical: 'top',
+            horizontal: side === 'left' ? 'right' : 'left',
+        }, transformOrigin: {
+            vertical: 'bottom',
+            horizontal: side === 'left' ? 'left' : 'right',
+        }, keepMounted: true, disableRestoreFocus: true, children: _jsx(Typography, { children: text }) }));
+}
 export default function RubberbandSpan({ leftBpOffset, rightBpOffset, numOfBpSelected, left, width, }) {
-    const ref = useRef(null);
     const { classes } = useStyles();
-    return (React.createElement(React.Fragment, null,
-        ref.current ? (React.createElement(React.Fragment, null,
-            React.createElement(Popover, { className: classes.popover, classes: { paper: classes.paper }, open: true, anchorEl: ref.current, anchorOrigin: { vertical: 'top', horizontal: 'left' }, transformOrigin: { vertical: 'bottom', horizontal: 'right' }, keepMounted: true, disableRestoreFocus: true },
-                React.createElement(Typography, null, stringify(leftBpOffset))),
-            React.createElement(Popover, { className: classes.popover, classes: { paper: classes.paper }, open: true, anchorEl: ref.current, anchorOrigin: { vertical: 'top', horizontal: 'right' }, transformOrigin: { vertical: 'bottom', horizontal: 'left' }, keepMounted: true, disableRestoreFocus: true },
-                React.createElement(Typography, null, stringify(rightBpOffset))))) : null,
-        React.createElement("div", { ref: ref, className: classes.rubberband, style: { left, width } }, numOfBpSelected ? (React.createElement(Typography, { variant: "h6", className: classes.rubberbandText },
-            toLocale(numOfBpSelected),
-            " bp")) : null)));
+    const [anchorEl, setAnchorEl] = useState(null);
+    return (_jsxs(_Fragment, { children: [anchorEl ? (_jsxs(_Fragment, { children: [_jsx(Tooltip, { side: "left", anchorEl: anchorEl, text: stringify(leftBpOffset) }), _jsx(Tooltip, { side: "right", anchorEl: anchorEl, text: stringify(rightBpOffset) })] })) : null, _jsx("div", { ref: el => {
+                    setAnchorEl(el);
+                }, className: classes.rubberband, style: { left, width }, children: numOfBpSelected ? (_jsxs(Typography, { variant: "h6", className: classes.rubberbandText, children: [toLocale(numOfBpSelected), " bp"] })) : null })] }));
 }

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import type { LinearGenomeViewModel } from '..';
 type LGV = LinearGenomeViewModel;
 interface ScalebarProps {

package/esm/LinearGenomeView/components/Scalebar.js

@@ -1,4 +1,5 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 import { Paper } from '@mui/material';
 import { observer } from 'mobx-react';
 import { makeStyles } from 'tss-react/mui';
@@ -19,20 +20,16 @@ const useStyles = makeStyles()({
         pointerEvents: 'none',
     },
 });
-const Scalebar = observer(React.forwardRef(function Scalebar2({ model, style, className, ...other }, ref) {
+const Scalebar = observer(forwardRef(function Scalebar2({ model, style, className, ...other }, ref) {
     const { classes, cx } = useStyles();
     const { staticBlocks, offsetPx, scaleFactor } = model;
     const offsetLeft = staticBlocks.offsetPx - offsetPx;
-    return (React.createElement(Paper, { "data-resizer": "true", className: cx(classes.container, className), variant: "outlined", ref: ref, style: style, ...other },
-        React.createElement("div", { className: classes.zoomContainer, style: {
-                transform: scaleFactor !== 1 ? `scaleX(${scaleFactor})` : undefined,
-            } },
-            React.createElement("div", { className: classes.scalebar, style: {
-                    left: offsetLeft - 1,
-                    width: staticBlocks.totalWidthPx,
-                    ...style,
-                } },
-                React.createElement(ScalebarCoordinateLabels, { model: model }))),
-        React.createElement(ScalebarRefNameLabels, { model: model })));
+    return (_jsxs(Paper, { "data-resizer": "true", className: cx(classes.container, className), variant: "outlined", ref: ref, style: style, ...other, children: [_jsx("div", { className: classes.zoomContainer, style: {
+                    transform: scaleFactor !== 1 ? `scaleX(${scaleFactor})` : undefined,
+                }, children: _jsx("div", { className: classes.scalebar, style: {
+                        left: offsetLeft - 1,
+                        width: staticBlocks.totalWidthPx,
+                        ...style,
+                    }, children: _jsx(ScalebarCoordinateLabels, { model: model }) }) }), _jsx(ScalebarRefNameLabels, { model: model })] }));
 }));
 export default Scalebar;

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

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

package/esm/LinearGenomeView/components/ScalebarCoordinateLabels.js

@@ -1,24 +1,24 @@
-import React from 'react';
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { observer } from 'mobx-react';
 import ScalebarCoordinateTicks from './ScalebarCoordinateTicks';
 import { ElidedBlock as ElidedBlockComponent, InterRegionPaddingBlock as InterRegionPaddingBlockComponent, } from '../../BaseLinearDisplay/components/Block';
 const ScalebarCoordinateLabels = observer(function ({ model }) {
     const { staticBlocks, bpPerPx } = model;
-    return (React.createElement(React.Fragment, null, staticBlocks.map((b, idx) => {
-        const { key, widthPx } = b;
-        const k = `${key}-${idx}`;
-        if (b.type === 'ContentBlock') {
-            return React.createElement(ScalebarCoordinateTicks, { key: k, block: b, bpPerPx: bpPerPx });
-        }
-        else if (b.type === 'ElidedBlock') {
-            return React.createElement(ElidedBlockComponent, { key: k, width: widthPx });
-        }
-        else if (b.type === 'InterRegionPaddingBlock') {
-            return (React.createElement(InterRegionPaddingBlockComponent, { key: k, width: widthPx, style: { background: 'none' }, boundary: b.variant === 'boundary' }));
-        }
-        else {
-            return null;
-        }
-    })));
+    return (_jsx(_Fragment, { children: staticBlocks.map((b, idx) => {
+            const { key, widthPx } = b;
+            const k = `${key}-${idx}`;
+            if (b.type === 'ContentBlock') {
+                return _jsx(ScalebarCoordinateTicks, { block: b, bpPerPx: bpPerPx }, k);
+            }
+            else if (b.type === 'ElidedBlock') {
+                return _jsx(ElidedBlockComponent, { width: widthPx }, k);
+            }
+            else if (b.type === 'InterRegionPaddingBlock') {
+                return (_jsx(InterRegionPaddingBlockComponent, { width: widthPx, style: { background: 'none' }, boundary: b.variant === 'boundary' }, k));
+            }
+            else {
+                return null;
+            }
+        }) }));
 });
 export default ScalebarCoordinateLabels;

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

@@ -1,7 +1,6 @@
-import React from 'react';
 import type { ContentBlock } from '@jbrowse/core/util/blockTypes';
 declare const ScalebarCoordinateTicks: ({ block, bpPerPx, }: {
     block: ContentBlock;
     bpPerPx: number;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default ScalebarCoordinateTicks;

package/esm/LinearGenomeView/components/ScalebarCoordinateTicks.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { getTickDisplayStr } from '@jbrowse/core/util';
 import { Typography } from '@mui/material';
 import { makeStyles } from 'tss-react/mui';
@@ -24,13 +24,13 @@ const ScalebarCoordinateTicks = function ({ block, bpPerPx, }) {
     const { classes } = useStyles();
     const { reversed, start, end } = block;
     const ticks = makeTicks(start, end, bpPerPx, true, false);
-    return (React.createElement(ContentBlockComponent, { block: block }, ticks.map(({ type, base }) => {
-        if (type === 'major') {
-            const x = (reversed ? end - base : base - start) / bpPerPx;
-            const baseNumber = base + 1;
-            return (React.createElement("div", { key: base, className: classes.tick, style: { left: x } }, baseNumber ? (React.createElement(Typography, { className: classes.majorTickLabel }, getTickDisplayStr(baseNumber, bpPerPx))) : null));
-        }
-        return null;
-    })));
+    return (_jsx(ContentBlockComponent, { block: block, children: ticks.map(({ type, base }) => {
+            if (type === 'major') {
+                const x = (reversed ? end - base : base - start) / bpPerPx;
+                const baseNumber = base + 1;
+                return (_jsx("div", { className: classes.tick, style: { left: x }, children: baseNumber ? (_jsx(Typography, { className: classes.majorTickLabel, children: getTickDisplayStr(baseNumber, bpPerPx) })) : null }, base));
+            }
+            return null;
+        }) }));
 };
 export default ScalebarCoordinateTicks;

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

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

package/esm/LinearGenomeView/components/ScalebarRefNameLabels.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Typography } from '@mui/material';
 import { observer } from 'mobx-react';
 import { makeStyles } from 'tss-react/mui';
@@ -29,20 +29,16 @@ const ScalebarRefNameLabels = observer(function ({ model }) {
     });
     const val = scaleBarDisplayPrefix();
     const b0 = staticBlocks.blocks[0];
-    return (React.createElement(React.Fragment, null,
-        (b0 === null || b0 === void 0 ? void 0 : b0.type) !== 'ContentBlock' && val ? (React.createElement(Typography, { className: cx(classes.b0, classes.refLabel) }, val)) : null,
-        staticBlocks.map((block, index) => {
-            const { offsetPx: blockOffsetPx, isLeftEndOfDisplayedRegion, key, type, refName, } = block;
-            const last = index === lastLeftBlock;
-            return type === 'ContentBlock' &&
-                (isLeftEndOfDisplayedRegion || last) ? (React.createElement(Typography, { key: `refLabel-${key}-${index}`, style: {
-                    left: last
-                        ? Math.max(0, -offsetPx)
-                        : blockOffsetPx - offsetPx - 1,
-                    paddingLeft: last ? 0 : 1,
-                }, className: classes.refLabel, "data-testid": `refLabel-${refName}` },
-                last && val ? `${val}:` : '',
-                refName)) : null;
-        })));
+    return (_jsxs(_Fragment, { children: [(b0 === null || b0 === void 0 ? void 0 : b0.type) !== 'ContentBlock' && val ? (_jsx(Typography, { className: cx(classes.b0, classes.refLabel), children: val })) : null, staticBlocks.map((block, index) => {
+                const { offsetPx: blockOffsetPx, isLeftEndOfDisplayedRegion, key, type, refName, } = block;
+                const last = index === lastLeftBlock;
+                return type === 'ContentBlock' &&
+                    (isLeftEndOfDisplayedRegion || last) ? (_jsxs(Typography, { style: {
+                        left: last
+                            ? Math.max(0, -offsetPx)
+                            : blockOffsetPx - offsetPx - 1,
+                        paddingLeft: last ? 0 : 1,
+                    }, className: classes.refLabel, "data-testid": `refLabel-${refName}`, children: [last && val ? `${val}:` : '', refName] }, `refLabel-${key}-${index}`)) : null;
+            })] }));
 });
 export default ScalebarRefNameLabels;

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

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

package/esm/LinearGenomeView/components/SearchBox.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { getSession } from '@jbrowse/core/util';
 import { alpha, useTheme } from '@mui/material';
 import { observer } from 'mobx-react';
@@ -21,7 +21,7 @@ const SearchBox = observer(function ({ model, showHelp, }) {
     const assemblyName = assemblyNames[0];
     const assembly = assemblyManager.get(assemblyName);
     const searchScope = model.searchScope(assemblyName);
-    return (React.createElement(RefNameAutocomplete, { showHelp: showHelp, onSelect: async (option) => {
+    return (_jsx(RefNameAutocomplete, { showHelp: showHelp, onSelect: async (option) => {
             var _a;
             try {
                 if (option.hasLocation()) {

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { LinearGenomeViewModel } from '../..';
 import type BaseResult from '@jbrowse/core/TextSearch/BaseResults';
 export default function SearchResultsDialog({ model, assemblyName, searchQuery, searchResults, handleClose, }: {
@@ -7,4 +6,4 @@ export default function SearchResultsDialog({ model, assemblyName, searchQuery,
     searchQuery: string;
     searchResults?: BaseResult[];
     handleClose: () => void;
-}): React.JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

package/esm/LinearGenomeView/components/SearchResultsDialog.js

@@ -1,19 +1,9 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Dialog } from '@jbrowse/core/ui';
 import { Button, DialogActions, DialogContent, Divider, Typography, } from '@mui/material';
 import SearchResultsTable from './SearchResultsTable';
 export default function SearchResultsDialog({ model, assemblyName, searchQuery, searchResults, handleClose, }) {
-    return (React.createElement(Dialog, { open: true, maxWidth: "xl", onClose: handleClose, title: "Search results" },
-        React.createElement(DialogContent, null, !(searchResults === null || searchResults === void 0 ? void 0 : searchResults.length) ? (React.createElement(Typography, null,
-            "No results found for ",
-            React.createElement("b", null, searchQuery))) : (React.createElement(React.Fragment, null,
-            React.createElement(Typography, null,
-                "Showing results for ",
-                React.createElement("b", null, searchQuery)),
-            React.createElement(SearchResultsTable, { model: model, handleClose: handleClose, assemblyName: assemblyName, searchResults: searchResults })))),
-        React.createElement(Divider, null),
-        React.createElement(DialogActions, null,
-            React.createElement(Button, { onClick: () => {
-                    handleClose();
-                }, color: "primary" }, "Cancel"))));
+    return (_jsxs(Dialog, { open: true, maxWidth: "xl", onClose: handleClose, title: "Search results", children: [_jsx(DialogContent, { children: !(searchResults === null || searchResults === void 0 ? void 0 : searchResults.length) ? (_jsxs(Typography, { children: ["No results found for ", _jsx("b", { children: searchQuery })] })) : (_jsxs(_Fragment, { children: [_jsxs(Typography, { children: ["Showing results for ", _jsx("b", { children: searchQuery })] }), _jsx(SearchResultsTable, { model: model, handleClose: handleClose, assemblyName: assemblyName, searchResults: searchResults })] })) }), _jsx(Divider, {}), _jsx(DialogActions, { children: _jsx(Button, { onClick: () => {
+                        handleClose();
+                    }, color: "primary", children: "Cancel" }) })] }));
 }

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { LinearGenomeViewModel } from '../..';
 import type BaseResult from '@jbrowse/core/TextSearch/BaseResults';
 export default function SearchResultsTable({ searchResults, assemblyName: optAssemblyName, model, handleClose, }: {
@@ -6,4 +5,4 @@ export default function SearchResultsTable({ searchResults, assemblyName: optAss
     assemblyName?: string;
     model: LinearGenomeViewModel;
     handleClose: () => void;
-}): React.JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;