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

package/esm/LinearGenomeView/components/SearchResultsTable.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getEnv, getSession } from '@jbrowse/core/util';
 import { Button, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, } from '@mui/material';
 import { getRoot, resolveIdentifier } from 'mobx-state-tree';
@@ -40,31 +40,18 @@ export default function SearchResultsTable({ searchResults, assemblyName: optAss
             session.notify(`${e}`, 'warning');
         }
     }
-    return (React.createElement(TableContainer, { component: Paper },
-        React.createElement(Table, null,
-            React.createElement(TableHead, null,
-                React.createElement(TableRow, null,
-                    React.createElement(TableCell, null, "Name"),
-                    React.createElement(TableCell, { align: "right" }, "Location"),
-                    React.createElement(TableCell, { align: "right" }, "Track"),
-                    React.createElement(TableCell, { align: "right" }))),
-            React.createElement(TableBody, null, searchResults.map(result => (React.createElement(TableRow, { key: result.getId() },
-                React.createElement(TableCell, { component: "th", scope: "row" }, result.getLabel()),
-                React.createElement(TableCell, { align: "right" }, result.getLocation()),
-                React.createElement(TableCell, { align: "right" }, getTrackName(result.getTrackId()) || 'N/A'),
-                React.createElement(TableCell, { align: "right" },
-                    React.createElement(Button, { onClick: async () => {
-                            try {
-                                await handleClick(result.getLocation() || result.getLabel());
-                                const resultTrackId = result.getTrackId();
-                                if (resultTrackId) {
-                                    model.showTrack(resultTrackId);
-                                }
-                            }
-                            catch (e) {
-                                console.error(e);
-                                session.notifyError(`${e}`, e);
-                            }
-                            handleClose();
-                        }, color: "primary", variant: "contained" }, "Go")))))))));
+    return (_jsx(TableContainer, { component: Paper, children: _jsxs(Table, { children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { children: "Name" }), _jsx(TableCell, { align: "right", children: "Location" }), _jsx(TableCell, { align: "right", children: "Track" }), _jsx(TableCell, { align: "right" })] }) }), _jsx(TableBody, { children: searchResults.map(result => (_jsxs(TableRow, { children: [_jsx(TableCell, { component: "th", scope: "row", children: result.getLabel() }), _jsx(TableCell, { align: "right", children: result.getLocation() }), _jsx(TableCell, { align: "right", children: getTrackName(result.getTrackId()) || 'N/A' }), _jsx(TableCell, { align: "right", children: _jsx(Button, { onClick: async () => {
+                                        try {
+                                            await handleClick(result.getLocation() || result.getLabel());
+                                            const resultTrackId = result.getTrackId();
+                                            if (resultTrackId) {
+                                                model.showTrack(resultTrackId);
+                                            }
+                                        }
+                                        catch (e) {
+                                            console.error(e);
+                                            session.notifyError(`${e}`, e);
+                                        }
+                                        handleClose();
+                                    }, color: "primary", variant: "contained", children: "Go" }) })] }, result.getId()))) })] }) }));
 }

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

@@ -1,9 +1,8 @@
-import React from 'react';
 declare const SequenceSearchDialog: ({ model, handleClose, }: {
     model: {
         assemblyNames: string[];
         showTrack: (trackId: string) => void;
     };
     handleClose: () => void;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default SequenceSearchDialog;

package/esm/LinearGenomeView/components/SequenceSearchDialog.js

@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
 import { Dialog } from '@jbrowse/core/ui';
 import { getSession, isSessionWithAddTracks } from '@jbrowse/core/util';
 import { Button, Checkbox, DialogActions, DialogContent, FormControlLabel, FormGroup, TextField, Typography, } from '@mui/material';
@@ -23,53 +24,42 @@ const SequenceSearchDialog = observer(function ({ model, handleClose, }) {
     catch (e) {
         error = e;
     }
-    return (React.createElement(Dialog, { maxWidth: "xl", open: true, onClose: handleClose, title: "Sequence search" },
-        React.createElement(DialogContent, { className: classes.dialogContent },
-            React.createElement(Typography, null, "Supply a sequence to search for. A track will be created with the resulting matches once submitted. You can also supply regex style expressions e.g. AACT(C|T)."),
-            React.createElement(TextField, { value: value, onChange: e => {
-                    setValue(e.target.value);
-                }, helperText: "Sequence search pattern" }),
-            React.createElement(FormGroup, null,
-                React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { checked: searchForward, onChange: event => {
-                            setSearchForward(event.target.checked);
-                        } }), label: "Search forward strand" }),
-                React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { checked: searchReverse, onChange: event => {
-                            setSearchReverse(event.target.checked);
-                        } }), label: "Search reverse strand" }),
-                React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { checked: caseInsensitive, onChange: event => {
-                            setCaseInsensitive(event.target.checked);
-                        } }), label: "Case insensitive" })),
-            error ? React.createElement(Typography, { color: "error" }, `${error}`) : null),
-        React.createElement(DialogActions, null,
-            React.createElement(Button, { onClick: () => {
-                    var _a;
-                    if (value) {
-                        const trackId = `sequence_search_${+Date.now()}`;
-                        const session = getSession(model);
-                        const { assemblyManager } = session;
-                        const assemblyName = model.assemblyNames[0];
-                        if (isSessionWithAddTracks(session)) {
-                            session.addTrackConf({
-                                trackId,
-                                name: `Sequence search ${value}`,
-                                assemblyNames: [assemblyName],
-                                type: 'FeatureTrack',
-                                adapter: {
-                                    type: 'SequenceSearchAdapter',
-                                    search: value,
-                                    searchForward,
-                                    searchReverse,
-                                    caseInsensitive,
-                                    sequenceAdapter: getSnapshot((_a = assemblyManager.get(assemblyName)) === null || _a === void 0 ? void 0 : _a.configuration.sequence.adapter),
-                                },
-                            });
-                            model.showTrack(trackId);
-                        }
-                    }
-                    handleClose();
-                }, variant: "contained", color: "primary" }, "Submit"),
-            React.createElement(Button, { onClick: () => {
-                    handleClose();
-                }, variant: "contained", color: "secondary" }, "Close"))));
+    return (_jsxs(Dialog, { maxWidth: "xl", open: true, onClose: handleClose, title: "Sequence search", children: [_jsxs(DialogContent, { className: classes.dialogContent, children: [_jsx(Typography, { children: "Supply a sequence to search for. A track will be created with the resulting matches once submitted. You can also supply regex style expressions e.g. AACT(C|T)." }), _jsx(TextField, { value: value, onChange: e => {
+                            setValue(e.target.value);
+                        }, helperText: "Sequence search pattern" }), _jsxs(FormGroup, { children: [_jsx(FormControlLabel, { control: _jsx(Checkbox, { checked: searchForward, onChange: event => {
+                                        setSearchForward(event.target.checked);
+                                    } }), label: "Search forward strand" }), _jsx(FormControlLabel, { control: _jsx(Checkbox, { checked: searchReverse, onChange: event => {
+                                        setSearchReverse(event.target.checked);
+                                    } }), label: "Search reverse strand" }), _jsx(FormControlLabel, { control: _jsx(Checkbox, { checked: caseInsensitive, onChange: event => {
+                                        setCaseInsensitive(event.target.checked);
+                                    } }), label: "Case insensitive" })] }), error ? _jsx(Typography, { color: "error", children: `${error}` }) : null] }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: () => {
+                            var _a;
+                            if (value) {
+                                const trackId = `sequence_search_${+Date.now()}`;
+                                const session = getSession(model);
+                                const { assemblyManager } = session;
+                                const assemblyName = model.assemblyNames[0];
+                                if (isSessionWithAddTracks(session)) {
+                                    session.addTrackConf({
+                                        trackId,
+                                        name: `Sequence search ${value}`,
+                                        assemblyNames: [assemblyName],
+                                        type: 'FeatureTrack',
+                                        adapter: {
+                                            type: 'SequenceSearchAdapter',
+                                            search: value,
+                                            searchForward,
+                                            searchReverse,
+                                            caseInsensitive,
+                                            sequenceAdapter: getSnapshot((_a = assemblyManager.get(assemblyName)) === null || _a === void 0 ? void 0 : _a.configuration.sequence.adapter),
+                                        },
+                                    });
+                                    model.showTrack(trackId);
+                                }
+                            }
+                            handleClose();
+                        }, variant: "contained", color: "primary", children: "Submit" }), _jsx(Button, { onClick: () => {
+                            handleClose();
+                        }, variant: "contained", color: "secondary", children: "Close" })] })] }));
 });
 export default SequenceSearchDialog;

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

@@ -1,9 +1,8 @@
-import React from 'react';
 import type { LinearGenomeViewModel } from '..';
 import type { BaseTrackModel } from '@jbrowse/core/pluggableElementTypes/models';
 type LGV = LinearGenomeViewModel;
 declare const TrackContainer: ({ model, track, }: {
     model: LGV;
     track: BaseTrackModel;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default TrackContainer;

package/esm/LinearGenomeView/components/TrackContainer.js

@@ -1,4 +1,5 @@
-import React, { useRef } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
 import { ErrorMessage, ResizeHandle } from '@jbrowse/core/ui';
 import { ErrorBoundary } from '@jbrowse/core/ui/ErrorBoundary';
 import { Paper } from '@mui/material';
@@ -23,22 +24,18 @@ const TrackContainer = observer(function ({ model, track, }) {
     const display = track.displays[0];
     const { draggingTrackId, showTrackOutlines } = model;
     const ref = useRef(null);
-    return (React.createElement(Paper, { ref: ref, className: classes.root, variant: showTrackOutlines ? 'outlined' : undefined, elevation: showTrackOutlines ? undefined : 0, onClick: event => {
+    return (_jsxs(Paper, { ref: ref, className: classes.root, variant: showTrackOutlines ? 'outlined' : undefined, elevation: showTrackOutlines ? undefined : 0, onClick: event => {
             var _a;
             if (event.detail === 2 && !track.displays[0].featureIdUnderMouse) {
                 const left = ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().left) || 0;
                 model.zoomTo(model.bpPerPx / 2, event.clientX - left, true);
             }
-        } },
-        React.createElement(TrackLabelContainer, { track: track, view: model }),
-        React.createElement(ErrorBoundary, { FallbackComponent: e => React.createElement(ErrorMessage, { error: e.error }) },
-            React.createElement(TrackRenderingContainer, { model: model, track: track, onDragEnter: () => {
-                    if (isAlive(display) &&
-                        draggingTrackId !== undefined &&
-                        draggingTrackId !== display.id) {
-                        model.moveTrack(draggingTrackId, track.id);
-                    }
-                } })),
-        React.createElement(ResizeHandle, { onDrag: display.resizeHeight, className: classes.resizeHandle })));
+        }, children: [_jsx(TrackLabelContainer, { track: track, view: model }), _jsx(ErrorBoundary, { FallbackComponent: e => _jsx(ErrorMessage, { error: e.error }), children: _jsx(TrackRenderingContainer, { model: model, track: track, onDragEnter: () => {
+                        if (isAlive(display) &&
+                            draggingTrackId !== undefined &&
+                            draggingTrackId !== display.id) {
+                            model.moveTrack(draggingTrackId, track.id);
+                        }
+                    } }) }), _jsx(ResizeHandle, { onDrag: display.resizeHeight, className: classes.resizeHandle })] }));
 });
 export default TrackContainer;

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

@@ -1,8 +1,7 @@
-import React from 'react';
 import type { BaseTrackModel } from '@jbrowse/core/pluggableElementTypes/models';
 interface Props {
     track: BaseTrackModel;
     className?: string;
 }
-declare const TrackLabel: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+declare const TrackLabel: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLDivElement>>;
 export default TrackLabel;

package/esm/LinearGenomeView/components/TrackLabel.js

@@ -1,21 +1,15 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 import { getConf } from '@jbrowse/core/configuration';
 import { SanitizedHTML } from '@jbrowse/core/ui';
-import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
 import { getContainingView, getSession } from '@jbrowse/core/util';
 import { getTrackName } from '@jbrowse/core/util/tracks';
-import AddIcon from '@mui/icons-material/Add';
 import CloseIcon from '@mui/icons-material/Close';
-import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
-import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
-import KeyboardDoubleArrowDownIcon from '@mui/icons-material/KeyboardDoubleArrowDown';
-import KeyboardDoubleArrowUpIcon from '@mui/icons-material/KeyboardDoubleArrowUp';
-import MinimizeIcon from '@mui/icons-material/Minimize';
-import MoreVertIcon from '@mui/icons-material/MoreVert';
 import { IconButton, Paper, Typography, alpha } from '@mui/material';
 import { observer } from 'mobx-react';
 import { makeStyles } from 'tss-react/mui';
 import TrackLabelDragHandle from './TrackLabelDragHandle';
+import TrackLabelMenu from './TrackLabelMenu';
 const useStyles = makeStyles()(theme => ({
     root: {
         background: alpha(theme.palette.background.paper, 0.8),
@@ -30,8 +24,7 @@ const useStyles = makeStyles()(theme => ({
         padding: theme.spacing(1),
     },
 }));
-const TrackLabel = observer(React.forwardRef(function TrackLabel2({ track, className }, ref) {
-    var _a;
+const TrackLabel = observer(forwardRef(function TrackLabel2({ track, className }, ref) {
     const { classes, cx } = useStyles();
     const view = getContainingView(track);
     const session = getSession(track);
@@ -39,73 +32,12 @@ const TrackLabel = observer(React.forwardRef(function TrackLabel2({ track, class
     const minimized = track.minimized;
     const trackId = getConf(track, 'trackId');
     const trackName = getTrackName(trackConf, session);
-    const items = [
-        {
-            label: 'Track order',
-            type: 'subMenu',
-            priority: 2000,
-            subMenu: [
-                {
-                    label: minimized ? 'Restore track' : 'Minimize track',
-                    icon: minimized ? AddIcon : MinimizeIcon,
-                    onClick: () => {
-                        track.setMinimized(!minimized);
-                    },
-                },
-                ...(view.tracks.length > 2
-                    ? [
-                        {
-                            label: 'Move track to top',
-                            icon: KeyboardDoubleArrowUpIcon,
-                            onClick: () => {
-                                view.moveTrackToTop(track.id);
-                            },
-                        },
-                    ]
-                    : []),
-                {
-                    label: 'Move track up',
-                    icon: KeyboardArrowUpIcon,
-                    onClick: () => {
-                        view.moveTrackUp(track.id);
-                    },
-                },
-                {
-                    label: 'Move track down',
-                    icon: KeyboardArrowDownIcon,
-                    onClick: () => {
-                        view.moveTrackDown(track.id);
-                    },
-                },
-                ...(view.tracks.length > 2
-                    ? [
-                        {
-                            label: 'Move track to bottom',
-                            icon: KeyboardDoubleArrowDownIcon,
-                            onClick: () => {
-                                view.moveTrackToBottom(track.id);
-                            },
-                        },
-                    ]
-                    : []),
-            ],
-        },
-        ...(((_a = session.getTrackActionMenuItems) === null || _a === void 0 ? void 0 : _a.call(session, trackConf)) || []),
-        ...track.trackMenuItems(),
-    ].sort((a, b) => ((b === null || b === void 0 ? void 0 : b.priority) || 0) - ((a === null || a === void 0 ? void 0 : a.priority) || 0));
-    return (React.createElement(Paper, { ref: ref, className: cx(className, classes.root), onClick: event => {
+    return (_jsxs(Paper, { ref: ref, className: cx(className, classes.root), onClick: event => {
             event.stopPropagation();
-        } },
-        React.createElement(TrackLabelDragHandle, { track: track, trackId: trackId, view: view }),
-        React.createElement(IconButton, { onClick: () => view.hideTrack(trackId), className: classes.iconButton, title: "close this track" },
-            React.createElement(CloseIcon, { fontSize: "small" })),
-        React.createElement(Typography, { variant: "body1", component: "span", className: classes.trackName, onMouseDown: event => {
-                event.stopPropagation();
-            } },
-            React.createElement(SanitizedHTML, { html: [trackName, minimized ? '(minimized)' : '']
-                    .filter(f => !!f)
-                    .join(' ') })),
-        React.createElement(CascadingMenuButton, { menuItems: items, "data-testid": "track_menu_icon" },
-            React.createElement(MoreVertIcon, { fontSize: "small" }))));
+        }, children: [_jsx(TrackLabelDragHandle, { track: track, trackId: trackId, view: view }), _jsx(IconButton, { onClick: () => view.hideTrack(trackId), className: classes.iconButton, title: "close this track", children: _jsx(CloseIcon, { fontSize: "small" }) }), _jsx(Typography, { variant: "body1", component: "span", className: classes.trackName, onMouseDown: event => {
+                    event.stopPropagation();
+                }, children: _jsx(SanitizedHTML, { html: [trackName, minimized ? '(minimized)' : '']
+                        .filter(f => !!f)
+                        .join(' ') }) }), _jsx(TrackLabelMenu, { track: track })] }));
 }));
 export default TrackLabel;

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

@@ -1,9 +1,8 @@
-import React from 'react';
 import type { LinearGenomeViewModel } from '..';
 import type { BaseTrackModel } from '@jbrowse/core/pluggableElementTypes/models';
 type LGV = LinearGenomeViewModel;
 declare const TrackLabelContainer: ({ track, view, }: {
     track: BaseTrackModel;
     view: LGV;
-}) => React.JSX.Element | null;
+}) => import("react/jsx-runtime").JSX.Element | null;
 export default TrackLabelContainer;

package/esm/LinearGenomeView/components/TrackLabelContainer.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { observer } from 'mobx-react';
 import { makeStyles } from 'tss-react/mui';
 import TrackLabel from './TrackLabel';
@@ -21,6 +21,6 @@ const TrackLabelContainer = observer(function ({ track, view, }) {
     const labelStyle = view.trackLabelsSetting !== 'overlapping' || display.prefersOffset
         ? trackLabelOffset
         : trackLabelOverlap;
-    return view.trackLabelsSetting !== 'hidden' ? (React.createElement(TrackLabel, { track: track, className: cx(trackLabel, labelStyle) })) : null;
+    return view.trackLabelsSetting !== 'hidden' ? (_jsx(TrackLabel, { track: track, className: cx(trackLabel, labelStyle) })) : null;
 });
 export default TrackLabelContainer;

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

@@ -1,9 +1,8 @@
-import React from 'react';
 import type { LinearGenomeViewModel } from '..';
 import type { BaseTrackModel } from '@jbrowse/core/pluggableElementTypes/models';
 declare function TrackLabelDragHandle({ trackId, view, track, }: {
     trackId: string;
     track: BaseTrackModel;
     view: LinearGenomeViewModel;
-}): React.JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 export default TrackLabelDragHandle;

package/esm/LinearGenomeView/components/TrackLabelDragHandle.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import DragIcon from '@mui/icons-material/DragIndicator';
 import { makeStyles } from 'tss-react/mui';
 const useStyles = makeStyles()({
@@ -13,7 +13,7 @@ const useStyles = makeStyles()({
 });
 function TrackLabelDragHandle({ trackId, view, track, }) {
     const { classes } = useStyles();
-    return (React.createElement("span", { draggable: true, className: classes.dragHandle, onDragStart: event => {
+    return (_jsx("span", { draggable: true, className: classes.dragHandle, onDragStart: event => {
             const target = event.currentTarget;
             if (target.parentNode) {
                 const parent = target.parentNode;
@@ -22,7 +22,6 @@ function TrackLabelDragHandle({ trackId, view, track, }) {
             }
         }, onDragEnd: () => {
             view.setDraggingTrackId(undefined);
-        }, "data-testid": `dragHandle-${view.id}-${trackId}` },
-        React.createElement(DragIcon, { className: classes.dragHandleIcon, fontSize: "small" })));
+        }, "data-testid": `dragHandle-${view.id}-${trackId}`, children: _jsx(DragIcon, { className: classes.dragHandleIcon, fontSize: "small" }) }));
 }
 export default TrackLabelDragHandle;

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

@@ -0,0 +1,5 @@
+import type { BaseTrackModel } from '@jbrowse/core/pluggableElementTypes/models';
+declare const TrackLabelMenu: ({ track, }: {
+    track: BaseTrackModel;
+}) => import("react/jsx-runtime").JSX.Element;
+export default TrackLabelMenu;

package/esm/LinearGenomeView/components/TrackLabelMenu.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
+import { getContainingView, getSession } from '@jbrowse/core/util';
+import AddIcon from '@mui/icons-material/Add';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
+import KeyboardDoubleArrowDownIcon from '@mui/icons-material/KeyboardDoubleArrowDown';
+import KeyboardDoubleArrowUpIcon from '@mui/icons-material/KeyboardDoubleArrowUp';
+import MinimizeIcon from '@mui/icons-material/Minimize';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+import { observer } from 'mobx-react';
+const TrackLabelMenu = observer(function ({ track, }) {
+    var _a;
+    const view = getContainingView(track);
+    const session = getSession(track);
+    const trackConf = track.configuration;
+    const minimized = track.minimized;
+    const items = [
+        {
+            label: 'Track order',
+            type: 'subMenu',
+            priority: 2000,
+            subMenu: [
+                {
+                    label: minimized ? 'Restore track' : 'Minimize track',
+                    icon: minimized ? AddIcon : MinimizeIcon,
+                    onClick: () => {
+                        track.setMinimized(!minimized);
+                    },
+                },
+                ...(view.tracks.length > 2
+                    ? [
+                        {
+                            label: 'Move track to top',
+                            icon: KeyboardDoubleArrowUpIcon,
+                            onClick: () => {
+                                view.moveTrackToTop(track.id);
+                            },
+                        },
+                    ]
+                    : []),
+                {
+                    label: 'Move track up',
+                    icon: KeyboardArrowUpIcon,
+                    onClick: () => {
+                        view.moveTrackUp(track.id);
+                    },
+                },
+                {
+                    label: 'Move track down',
+                    icon: KeyboardArrowDownIcon,
+                    onClick: () => {
+                        view.moveTrackDown(track.id);
+                    },
+                },
+                ...(view.tracks.length > 2
+                    ? [
+                        {
+                            label: 'Move track to bottom',
+                            icon: KeyboardDoubleArrowDownIcon,
+                            onClick: () => {
+                                view.moveTrackToBottom(track.id);
+                            },
+                        },
+                    ]
+                    : []),
+            ],
+        },
+        ...(((_a = session.getTrackActionMenuItems) === null || _a === void 0 ? void 0 : _a.call(session, trackConf)) || []),
+        ...track.trackMenuItems(),
+    ].sort((a, b) => ((b === null || b === void 0 ? void 0 : b.priority) || 0) - ((a === null || a === void 0 ? void 0 : a.priority) || 0));
+    return (_jsx(CascadingMenuButton, { menuItems: items, "data-testid": "track_menu_icon", children: _jsx(MoreVertIcon, { fontSize: "small" }) }));
+});
+export default TrackLabelMenu;

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { LinearGenomeViewModel } from '..';
 import type { BaseTrackModel } from '@jbrowse/core/pluggableElementTypes/models';
 type LGV = LinearGenomeViewModel;
@@ -6,5 +5,5 @@ declare const TrackRenderingContainer: ({ model, track, onDragEnter, }: {
     model: LGV;
     track: BaseTrackModel;
     onDragEnter: () => void;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default TrackRenderingContainer;

package/esm/LinearGenomeView/components/TrackRenderingContainer.js

@@ -1,4 +1,5 @@
-import React, { Suspense, useEffect, useRef } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Suspense, useEffect, useRef } from 'react';
 import { getConf } from '@jbrowse/core/configuration';
 import { LoadingEllipses } from '@jbrowse/core/ui';
 import { observer } from 'mobx-react';
@@ -35,19 +36,14 @@ const TrackRenderingContainer = observer(function ({ model, track, onDragEnter,
             delete trackRefs[trackId];
         };
     }, [trackRefs, trackId]);
-    return (React.createElement("div", { className: classes.trackRenderingContainer, style: {
+    return (_jsx("div", { className: classes.trackRenderingContainer, style: {
             height: minimized ? 20 : height,
-        }, onScroll: evt => display.setScrollTop(evt.currentTarget.scrollTop), onDragEnter: onDragEnter, "data-testid": `trackRenderingContainer-${id}-${trackId}` }, !minimized ? (React.createElement(React.Fragment, null,
-        React.createElement("div", { ref: ref, className: classes.renderingComponentContainer, style: {
-                transform: scaleFactor !== 1 ? `scaleX(${scaleFactor})` : undefined,
-            } },
-            React.createElement(Suspense, { fallback: React.createElement(LoadingEllipses, null) },
-                React.createElement(RenderingComponent, { model: display, onHorizontalScroll: model.horizontalScroll }))),
-        DisplayBlurb ? (React.createElement("div", { style: {
-                position: 'absolute',
-                left: 0,
-                top: display.height - 20,
-            } },
-            React.createElement(DisplayBlurb, { model: display }))) : null)) : null));
+        }, onScroll: evt => display.setScrollTop(evt.currentTarget.scrollTop), onDragEnter: onDragEnter, "data-testid": `trackRenderingContainer-${id}-${trackId}`, children: !minimized ? (_jsxs(_Fragment, { children: [_jsx("div", { ref: ref, className: classes.renderingComponentContainer, style: {
+                        transform: scaleFactor !== 1 ? `scaleX(${scaleFactor})` : undefined,
+                    }, children: _jsx(Suspense, { fallback: _jsx(LoadingEllipses, {}), children: _jsx(RenderingComponent, { model: display, onHorizontalScroll: model.horizontalScroll }) }) }), DisplayBlurb ? (_jsx("div", { style: {
+                        position: 'absolute',
+                        left: 0,
+                        top: display.height - 20,
+                    }, children: _jsx(DisplayBlurb, { model: display }) })) : null] })) : null }));
 });
 export default TrackRenderingContainer;

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

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

package/esm/LinearGenomeView/components/TracksContainer.js

@@ -1,19 +1,20 @@
-import React, { useRef } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Suspense, lazy, useRef } from 'react';
 import { Menu } from '@jbrowse/core/ui';
 import { getEnv } from '@jbrowse/core/util';
 import { observer } from 'mobx-react';
 import { makeStyles } from 'tss-react/mui';
-import CenterLine from './CenterLine';
 import Gridlines from './Gridlines';
-import HighlightGroup from './Highlight';
 import Rubberband from './Rubberband';
-import RubberbandSpan from './RubberbandSpan';
 import Scalebar from './Scalebar';
 import VerticalGuide from './VerticalGuide';
 import { SCALE_BAR_HEIGHT } from '../consts';
 import { useRangeSelect } from './useRangeSelect';
 import { useSideScroll } from './useSideScroll';
 import { useWheelScroll } from './useWheelScroll';
+const CenterLine = lazy(() => import('./CenterLine'));
+const Highlight = lazy(() => import('./Highlight'));
+const RubberbandSpan = lazy(() => import('./RubberbandSpan'));
 const useStyles = makeStyles()({
     tracksContainer: {
         position: 'relative',
@@ -29,23 +30,18 @@ const TracksContainer = observer(function TracksContainer({ children, model, })
     const { guideX, rubberbandOn, leftBpOffset, rightBpOffset, numOfBpSelected, width, left, anchorPosition, open, handleMenuItemClick, handleClose, mouseMove, mouseDown: mouseDown2, } = useRangeSelect(ref, model, true);
     useWheelScroll(ref, model);
     const additional = pluginManager.evaluateExtensionPoint('LinearGenomeView-TracksContainerComponent', undefined, { model });
-    return (React.createElement("div", { ref: ref, "data-testid": "trackContainer", className: classes.tracksContainer, onMouseDown: event => {
+    return (_jsxs("div", { ref: ref, "data-testid": "trackContainer", className: classes.tracksContainer, onMouseDown: event => {
             mouseDown1(event);
             mouseDown2(event);
-        }, onMouseMove: mouseMove, onMouseUp: mouseUp },
-        showGridlines ? React.createElement(Gridlines, { model: model }) : null,
-        showCenterLine ? React.createElement(CenterLine, { model: model }) : 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(Rubberband, { model: model, ControlComponent: React.createElement(Scalebar, { model: model, style: {
-                    height: SCALE_BAR_HEIGHT,
-                    boxSizing: 'border-box',
-                } }) }),
-        React.createElement(HighlightGroup, { model: model }),
-        additional,
-        children));
+        }, onMouseMove: mouseMove, onMouseUp: mouseUp, children: [showGridlines ? _jsx(Gridlines, { model: model }) : null, _jsx(Suspense, { fallback: null, children: showCenterLine ? _jsx(CenterLine, { model: model }) : null }), guideX !== undefined ? (_jsx(VerticalGuide, { model: model, coordX: guideX })) : rubberbandOn ? (_jsx(Suspense, { fallback: null, children: _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(Rubberband, { model: model, ControlComponent: _jsx(Scalebar, { model: model, style: {
+                        height: SCALE_BAR_HEIGHT,
+                        boxSizing: 'border-box',
+                    } }) }), _jsx(HighlightGroup, { model: model }), additional, children] }));
+});
+const HighlightGroup = observer(function HighlightGroup({ model, }) {
+    return model.highlight.length ? (_jsx(Suspense, { fallback: null, children: model.highlight.map((highlight, idx) => (_jsx(Highlight, { model: model, highlight: highlight }, `${JSON.stringify(highlight)}-${idx}`))) })) : null;
 });
 export default TracksContainer;

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

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