@jbrowse/plugin-linear-genome-view 2.10.3 → 2.11.0

package/esm/LinearGenomeView/components/ExportSvgDialog.js

@@ -10,6 +10,10 @@ function LoadingMessage() {
 function useSvgLocal(key, val) {
     return useLocalStorage('svg-' + key, val);
 }
+function TextField2({ children, ...rest }) {
+    return (React.createElement("div", null,
+        React.createElement(TextField, { ...rest }, children)));
+}
 export default function ExportSvgDialog({ model, handleClose, }) {
     const session = getSession(model);
     const offscreenCanvas = typeof OffscreenCanvas !== 'undefined';
@@ -22,15 +26,13 @@ export default function ExportSvgDialog({ model, handleClose, }) {
     return (React.createElement(Dialog, { open: true, onClose: handleClose, title: "Export SVG" },
         React.createElement(DialogContent, null,
             error ? (React.createElement(ErrorMessage, { error: error })) : loading ? (React.createElement(LoadingMessage, null)) : null,
-            React.createElement(TextField, { helperText: "filename", value: filename, onChange: event => setFilename(event.target.value) }),
-            React.createElement("br", null),
-            React.createElement(TextField, { select: true, label: "Track label positioning", variant: "outlined", style: { width: 150 }, value: trackLabels, onChange: event => setTrackLabels(event.target.value) },
+            React.createElement(TextField2, { helperText: "filename", value: filename, onChange: event => setFilename(event.target.value) }),
+            React.createElement(TextField2, { select: true, label: "Track label positioning", variant: "outlined", style: { width: 150 }, value: trackLabels, onChange: event => setTrackLabels(event.target.value) },
                 React.createElement(MenuItem, { value: "offset" }, "Offset"),
                 React.createElement(MenuItem, { value: "overlay" }, "Overlay"),
                 React.createElement(MenuItem, { value: "left" }, "Left"),
                 React.createElement(MenuItem, { value: "none" }, "None")),
-            React.createElement("br", null),
-            session.allThemes ? (React.createElement(TextField, { select: true, label: "Theme", variant: "outlined", value: themeName, onChange: event => setThemeName(event.target.value) }, Object.entries(session.allThemes()).map(([key, val]) => (React.createElement(MenuItem, { key: key, value: key }, 
+            session.allThemes ? (React.createElement(TextField2, { select: true, label: "Theme", variant: "outlined", value: themeName, onChange: event => setThemeName(event.target.value) }, Object.entries(session.allThemes()).map(([key, val]) => (React.createElement(MenuItem, { key: key, value: key }, 
             // @ts-expect-error
             val.name || '(Unknown name)'))))) : null,
             offscreenCanvas ? (React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { checked: rasterizeLayers, onChange: () => setRasterizeLayers(val => !val) }), label: "Rasterize canvas based tracks? File may be much larger if this is turned off" })) : (React.createElement(Typography, null, "Note: rasterizing layers not yet supported in this browser, so SVG size may be large"))),
@@ -51,6 +53,8 @@ export default function ExportSvgDialog({ model, handleClose, }) {
                     catch (e) {
                         console.error(e);
                         setError(e);
+                    }
+                    finally {
                         setLoading(false);
                     }
                 } }, "Submit"))));

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { LinearGenomeViewModel } from '../model';
 type LGV = LinearGenomeViewModel;
-declare const Highlight: ({ model }: {
+declare const HighlightGroup: ({ model, }: {
     model: LGV;
-}) => React.JSX.Element | null;
-export default Highlight;
+}) => React.JSX.Element[];
+export default HighlightGroup;

package/esm/LinearGenomeView/components/Highlight.js

@@ -10,28 +10,28 @@ import LinkIcon from '@mui/icons-material/Link';
 import CloseIcon from '@mui/icons-material/Close';
 import BookmarkIcon from '@mui/icons-material/Bookmark';
 const useStyles = makeStyles()(theme => {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b;
     return ({
         highlight: {
             height: '100%',
             position: 'absolute',
-            background: `${colord((_b = (_a = theme.palette.quaternary) === null || _a === void 0 ? void 0 : _a.main) !== null && _b !== void 0 ? _b : 'goldenrod')
+            overflow: 'hidden',
+            background: `${colord((_b = (_a = theme.palette.highlight) === null || _a === void 0 ? void 0 : _a.main) !== null && _b !== void 0 ? _b : 'goldenrod')
                 .alpha(0.35)
                 .toRgbString()}`,
-            borderLeft: `1px solid ${(_d = (_c = theme.palette.quaternary) === null || _c === void 0 ? void 0 : _c.main) !== null && _d !== void 0 ? _d : 'goldenrod'}`,
-            borderRight: `1px solid ${(_f = (_e = theme.palette.quaternary) === null || _e === void 0 ? void 0 : _e.main) !== null && _f !== void 0 ? _f : 'goldenrod'}`,
         },
     });
 });
-const Highlight = observer(function Highlight({ model }) {
-    var _a, _b;
+const Highlight = observer(function Highlight({ model, highlight, }) {
+    var _a, _b, _c;
     const { classes } = useStyles();
     const [open, setOpen] = useState(false);
     const anchorEl = useRef(null);
-    const color = (_b = (_a = useTheme().palette.quaternary) === null || _a === void 0 ? void 0 : _a.main) !== null && _b !== void 0 ? _b : 'goldenrod';
+    const color = (_b = (_a = useTheme().palette.highlight) === null || _a === void 0 ? void 0 : _a.main) !== null && _b !== void 0 ? _b : 'goldenrod';
     const session = getSession(model);
+    const { assemblyManager } = session;
     const dismissHighlight = () => {
-        model.setHighlight(undefined);
+        model.removeHighlight(highlight);
     };
     const menuItems = [
         {
@@ -48,7 +48,7 @@ const Highlight = observer(function Highlight({ model }) {
                     bookmarkWidget = session.addWidget('GridBookmarkWidget', 'GridBookmark');
                 }
                 // @ts-ignore
-                bookmarkWidget.addBookmark(model.highlight);
+                bookmarkWidget.addBookmark(highlight);
                 dismissHighlight();
             },
         },
@@ -56,9 +56,6 @@ const Highlight = observer(function Highlight({ model }) {
     function handleClose() {
         setOpen(false);
     }
-    if (!model.highlight) {
-        return null;
-    }
     // coords
     const mapCoords = (r) => {
         const s = model.bpToPx({
@@ -76,19 +73,26 @@ const Highlight = observer(function Highlight({ model }) {
             }
             : undefined;
     };
-    const h = mapCoords(model.highlight);
-    return (React.createElement(React.Fragment, null, h ? (React.createElement("div", { className: classes.highlight, style: {
+    const asm = assemblyManager.get(highlight === null || highlight === void 0 ? void 0 : highlight.assemblyName);
+    const h = mapCoords({
+        ...highlight,
+        refName: (_c = asm === null || asm === void 0 ? void 0 : asm.getCanonicalRefName(highlight.refName)) !== null && _c !== void 0 ? _c : highlight.refName,
+    });
+    return h ? (React.createElement("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) },
+            React.createElement(IconButton, { ref: anchorEl, onClick: () => setOpen(true), style: { zIndex: 3 } },
                 React.createElement(LinkIcon, { fontSize: "small", sx: {
                         color: `${colord(color).darken(0.2).toRgbString()}`,
                     } }))),
         React.createElement(Menu, { anchorEl: anchorEl.current, onMenuItemClick: (_event, callback) => {
                 callback(session);
                 handleClose();
-            }, open: open, onClose: handleClose, menuItems: menuItems }))) : null));
+            }, open: open, onClose: handleClose, menuItems: menuItems }))) : 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 })));
 });
-export default Highlight;
+export default HighlightGroup;

package/esm/LinearGenomeView/components/MiniControls.js

@@ -1,13 +1,13 @@
 import React from 'react';
 import { observer } from 'mobx-react';
-import { IconButton, Paper } from '@mui/material';
+import { IconButton, Paper, alpha } from '@mui/material';
+import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
+import { makeStyles } from 'tss-react/mui';
+import { getSession } from '@jbrowse/core/util';
 // icons
 import ZoomIn from '@mui/icons-material/ZoomIn';
 import ZoomOut from '@mui/icons-material/ZoomOut';
 import ArrowDown from '@mui/icons-material/KeyboardArrowDown';
-import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
-import { makeStyles } from 'tss-react/mui';
-import { getSession } from '@jbrowse/core/util';
 const useStyles = makeStyles()(theme => ({
     background: {
         position: 'absolute',
@@ -16,22 +16,20 @@ const useStyles = makeStyles()(theme => ({
         background: theme.palette.background.paper,
     },
     focusedBackground: {
-        background: theme.palette.secondary.light,
-        svg: {
-            fill: theme.palette.secondary.contrastText,
-        },
+        background: alpha(theme.palette.secondary.light, 0.2),
     },
 }));
 const MiniControls = observer(function ({ model, }) {
-    const { classes, cx } = useStyles();
+    const { classes } = useStyles();
     const { id, bpPerPx, maxBpPerPx, minBpPerPx, scaleFactor, hideHeader } = model;
     const { focusedViewId } = getSession(model);
-    return hideHeader ? (React.createElement(Paper, { className: cx(classes.background, 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 ? (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;
 });
 export default MiniControls;

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

@@ -5,5 +5,5 @@ type LGV = LinearGenomeViewModel;
 declare const OverviewHighlight: ({ model, overview, }: {
     model: LGV;
     overview: Base1DViewModel;
-}) => React.JSX.Element | null;
+}) => React.JSX.Element[];
 export default OverviewHighlight;

package/esm/LinearGenomeView/components/OverviewHighlight.js

@@ -2,23 +2,26 @@ import React from 'react';
 import { observer } from 'mobx-react';
 import { makeStyles } from 'tss-react/mui';
 import { colord } from '@jbrowse/core/util/colord';
+import { getSession, notEmpty, } from '@jbrowse/core/util';
 const useStyles = makeStyles()(theme => {
     var _a, _b, _c, _d, _e, _f;
     return ({
         highlight: {
             height: '100%',
             position: 'absolute',
-            background: `${colord((_b = (_a = theme.palette.quaternary) === null || _a === void 0 ? void 0 : _a.main) !== null && _b !== void 0 ? _b : 'goldenrod')
+            background: `${colord((_b = (_a = theme.palette.highlight) === null || _a === void 0 ? void 0 : _a.main) !== null && _b !== void 0 ? _b : 'goldenrod')
                 .alpha(0.35)
                 .toRgbString()}`,
-            borderLeft: `1px solid ${(_d = (_c = theme.palette.quaternary) === null || _c === void 0 ? void 0 : _c.main) !== null && _d !== void 0 ? _d : 'goldenrod'}`,
-            borderRight: `1px solid ${(_f = (_e = theme.palette.quaternary) === null || _e === void 0 ? void 0 : _e.main) !== null && _f !== void 0 ? _f : 'goldenrod'}`,
+            borderLeft: `1px solid ${(_d = (_c = theme.palette.highlight) === null || _c === void 0 ? void 0 : _c.main) !== null && _d !== void 0 ? _d : 'goldenrod'}`,
+            borderRight: `1px solid ${(_f = (_e = theme.palette.highlight) === null || _e === void 0 ? void 0 : _e.main) !== null && _f !== void 0 ? _f : 'goldenrod'}`,
         },
     });
 });
 const OverviewHighlight = observer(function OverviewHighlight({ model, overview, }) {
     const { classes } = useStyles();
     const { cytobandOffset } = model;
+    const session = getSession(model);
+    const { assemblyManager } = session;
     // coords
     const mapCoords = (r) => {
         const s = overview.bpToPx({
@@ -36,13 +39,19 @@ const OverviewHighlight = observer(function OverviewHighlight({ model, overview,
             }
             : undefined;
     };
-    if (!model.highlight) {
-        return null;
-    }
-    const h = mapCoords(model.highlight);
-    return (React.createElement(React.Fragment, null, h ? (React.createElement("div", { className: classes.highlight, style: {
-            width: h.width,
-            left: h.left,
-        } })) : null));
+    return model.highlight
+        .map(h => {
+        var _a;
+        const asm = assemblyManager.get(h === null || h === void 0 ? void 0 : h.assemblyName);
+        return mapCoords({
+            ...h,
+            refName: (_a = asm === null || asm === void 0 ? void 0 : asm.getCanonicalRefName(h.refName)) !== null && _a !== void 0 ? _a : h.refName,
+        });
+    })
+        .filter(notEmpty)
+        .map(({ left, width }, idx) => (React.createElement("div", { key: `${left}_${width}_${idx}`, className: classes.highlight, style: {
+            width: width,
+            left: left,
+        } })));
 });
 export default OverviewHighlight;

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

@@ -5,6 +5,6 @@ type LGV = LinearGenomeViewModel;
 declare const OverviewRubberband: ({ model, overview, ControlComponent, }: {
     model: LGV;
     overview: Base1DViewModel;
-    ControlComponent?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
+    ControlComponent?: React.ReactElement;
 }) => React.JSX.Element;
 export default OverviewRubberband;

package/esm/LinearGenomeView/components/OverviewScalebar.js

@@ -4,7 +4,7 @@ import { makeStyles } from 'tss-react/mui';
 import { observer } from 'mobx-react';
 // core
 import Base1DView from '@jbrowse/core/util/Base1DViewModel';
-import { getSession, getTickDisplayStr } from '@jbrowse/core/util';
+import { getEnv, getSession, getTickDisplayStr } from '@jbrowse/core/util';
 import { ContentBlock } from '@jbrowse/core/util/blockTypes';
 // locals
 import { HEADER_BAR_HEIGHT, HEADER_OVERVIEW_HEIGHT, } from '..';
@@ -118,6 +118,7 @@ const Scalebar = observer(function ({ model, scale, overview, }) {
     const { classes } = useStyles();
     const theme = useTheme();
     const { dynamicBlocks, showCytobands, cytobandOffset } = model;
+    const { pluginManager } = getEnv(model);
     const visibleRegions = dynamicBlocks.contentBlocks;
     const overviewVisibleRegions = overview.dynamicBlocks;
     const { tertiary, primary } = theme.palette;
@@ -138,6 +139,7 @@ const Scalebar = observer(function ({ model, scale, overview, }) {
     }) || 0;
     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,
@@ -153,7 +155,8 @@ const Scalebar = observer(function ({ model, scale, overview, }) {
                     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 })));
+        React.createElement(OverviewHighlight, { model: model, overview: overview }),
+        additional));
 });
 const OverviewScalebar = observer(function ({ model, children, }) {
     const { classes } = useStyles();

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

@@ -4,6 +4,6 @@ import { LinearGenomeViewModel } from '..';
 declare const OverviewScalebarPolygon: ({ model, overview, useOffset, }: {
     model: LinearGenomeViewModel;
     overview: Base1DViewModel;
-    useOffset?: boolean | undefined;
+    useOffset?: boolean;
 }) => React.JSX.Element | null;
 export default OverviewScalebarPolygon;

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

@@ -4,15 +4,15 @@ import { TextFieldProps as TFP } from '@mui/material';
 import { LinearGenomeViewModel } from '../../model';
 declare const RefNameAutocomplete: ({ model, onSelect, assemblyName, style, fetchResults, onChange, value, showHelp, minWidth, maxWidth, TextFieldProps, }: {
     model: LinearGenomeViewModel;
-    onSelect?: ((region: BaseResult) => void) | undefined;
-    onChange?: ((val: string) => void) | undefined;
-    assemblyName?: string | undefined;
-    value?: string | undefined;
+    onSelect?: (region: BaseResult) => void;
+    onChange?: (val: string) => void;
+    assemblyName?: string;
+    value?: string;
     fetchResults: (query: string) => Promise<BaseResult[]>;
-    style?: React.CSSProperties | undefined;
-    minWidth?: number | undefined;
-    maxWidth?: number | undefined;
-    showHelp?: boolean | undefined;
-    TextFieldProps?: TFP | undefined;
+    style?: React.CSSProperties;
+    minWidth?: number;
+    maxWidth?: number;
+    showHelp?: boolean;
+    TextFieldProps?: TFP;
 }) => React.JSX.Element;
 export default RefNameAutocomplete;

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

@@ -17,7 +17,8 @@ const RefNameAutocomplete = observer(function ({ model, onSelect, assemblyName,
     const assembly = assemblyName ? assemblyManager.get(assemblyName) : undefined;
     const { coarseVisibleLocStrings, hasDisplayedRegions } = model;
     useEffect(() => {
-        let active = true;
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
+        ;
         (async () => {
             try {
                 if (debouncedSearch === '' || !assemblyName) {
@@ -25,21 +26,14 @@ const RefNameAutocomplete = observer(function ({ model, onSelect, assemblyName,
                 }
                 setLoaded(false);
                 const results = await fetchResults(debouncedSearch);
-                if (active) {
-                    setLoaded(true);
-                    setSearchOptions(getDeduplicatedResult(results));
-                }
+                setLoaded(true);
+                setSearchOptions(getDeduplicatedResult(results));
             }
             catch (e) {
                 console.error(e);
-                if (active) {
-                    session.notify(`${e}`, 'error');
-                }
+                session.notifyError(`${e}`, e);
             }
         })();
-        return () => {
-            active = false;
-        };
     }, [assemblyName, fetchResults, debouncedSearch, session, model]);
     const inputBoxVal = coarseVisibleLocStrings || value || '';
     // heuristic, text width + 60 accommodates help icon and search icon
@@ -54,29 +48,28 @@ const RefNameAutocomplete = observer(function ({ model, onSelect, assemblyName,
     }))) || [], [regions]);
     // notes on implementation:
     // The selectOnFocus setting helps highlight the field when clicked
-    return (React.createElement(React.Fragment, null,
-        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) => {
-                setInputValue(newInputValue);
-                onChange === null || onChange === void 0 ? void 0 : onChange(newInputValue);
-            }, loadingText: "loading results", open: open, onOpen: () => setOpen(true), onClose: () => {
-                setOpen(false);
-                setLoaded(true);
-                if (hasDisplayedRegions) {
-                    setCurrentSearch('');
-                    setSearchOptions(undefined);
-                }
-            }, onChange: (_event, selectedOption) => {
-                if (!selectedOption || !assemblyName) {
-                    return;
-                }
-                if (typeof selectedOption === 'string') {
-                    // handles string inputs on keyPress enter
-                    onSelect === null || onSelect === void 0 ? void 0 : onSelect(new BaseResult({ label: selectedOption }));
-                }
-                else {
-                    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() })));
+    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) => {
+            setInputValue(newInputValue);
+            onChange === null || onChange === void 0 ? void 0 : onChange(newInputValue);
+        }, loadingText: "loading results", open: open, onOpen: () => setOpen(true), onClose: () => {
+            setOpen(false);
+            setLoaded(true);
+            if (hasDisplayedRegions) {
+                setCurrentSearch('');
+                setSearchOptions(undefined);
+            }
+        }, onChange: (_event, selectedOption) => {
+            if (!selectedOption || !assemblyName) {
+                return;
+            }
+            if (typeof selectedOption === 'string') {
+                // handles string inputs on keyPress enter
+                onSelect === null || onSelect === void 0 ? void 0 : onSelect(new BaseResult({ label: selectedOption }));
+            }
+            else {
+                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() }));
 });
 export default RefNameAutocomplete;

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

@@ -3,6 +3,6 @@ import { LinearGenomeViewModel } from '..';
 type LGV = LinearGenomeViewModel;
 declare const Rubberband: ({ model, ControlComponent, }: {
     model: LGV;
-    ControlComponent?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
+    ControlComponent?: React.ReactElement;
 }) => React.JSX.Element;
 export default Rubberband;

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

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

package/esm/LinearGenomeView/components/SearchResultsTable.js

@@ -69,7 +69,7 @@ export default function SearchResultsTable({ searchResults, assemblyName: optAss
                             }
                             catch (e) {
                                 console.error(e);
-                                session.notify(`${e}`, 'error');
+                                session.notifyError(`${e}`, e);
                             }
                             handleClose();
                         }, color: "primary", variant: "contained" }, "Go")))))))));

package/esm/LinearGenomeView/components/TrackContainer.js

@@ -5,7 +5,6 @@ import { observer } from 'mobx-react';
 import { isAlive } from 'mobx-state-tree';
 import { ErrorBoundary } from 'react-error-boundary';
 import { ResizeHandle, ErrorMessage } from '@jbrowse/core/ui';
-import { useDebouncedCallback } from '@jbrowse/core/util';
 import TrackLabelContainer from './TrackLabelContainer';
 import TrackRenderingContainer from './TrackRenderingContainer';
 const useStyles = makeStyles()({
@@ -18,40 +17,28 @@ const useStyles = makeStyles()({
         position: 'relative',
         zIndex: 2,
     },
-    overlay: {
-        pointerEvents: 'none',
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        width: '100%',
-        zIndex: 3,
-    },
 });
 const TrackContainer = observer(function ({ model, track, }) {
     const { classes } = useStyles();
     const display = track.displays[0];
     const { draggingTrackId } = model;
-    const ref2 = useRef(null);
-    const dimmed = draggingTrackId !== undefined && draggingTrackId !== display.id;
-    const debouncedOnDragEnter = useDebouncedCallback(() => {
-        if (isAlive(display) && dimmed) {
-            model.moveTrack(draggingTrackId, track.id);
-        }
-    }, 100);
-    return (React.createElement(Paper, { ref: ref2, className: classes.root, variant: "outlined", onClick: event => {
+    const ref = useRef(null);
+    return (React.createElement(Paper, { ref: ref, className: classes.root, variant: "outlined", onClick: event => {
             var _a;
             if (event.detail === 2 && !track.displays[0].featureIdUnderMouse) {
-                const left = ((_a = ref2.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().left) || 0;
+                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: debouncedOnDragEnter })),
-        React.createElement("div", { className: classes.overlay, style: {
-                height: display.height,
-                background: dimmed ? 'rgba(0, 0, 0, 0.4)' : undefined,
-            }, onDragEnter: debouncedOnDragEnter }),
+            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 })));
 });
 export default TrackContainer;

package/esm/LinearGenomeView/components/TrackLabel.js

@@ -12,6 +12,10 @@ import MoreVertIcon from '@mui/icons-material/MoreVert';
 import CloseIcon from '@mui/icons-material/Close';
 import MinimizeIcon from '@mui/icons-material/Minimize';
 import AddIcon from '@mui/icons-material/Add';
+import KeyboardDoubleArrowDownIcon from '@mui/icons-material/KeyboardDoubleArrowDown';
+import KeyboardDoubleArrowUpIcon from '@mui/icons-material/KeyboardDoubleArrowUp';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
 import TrackLabelDragHandle from './TrackLabelDragHandle';
 const useStyles = makeStyles()(theme => ({
     root: {
@@ -19,9 +23,6 @@ const useStyles = makeStyles()(theme => ({
         '&:hover': {
             background: theme.palette.background.paper,
         },
-        transition: theme.transitions.create(['background'], {
-            duration: theme.transitions.duration.shortest,
-        }),
     },
     trackName: {
         margin: '0 auto',
@@ -44,9 +45,35 @@ const TrackLabel = observer(React.forwardRef(function TrackLabel2({ track, class
     const trackName = getTrackName(trackConf, session);
     const items = [
         {
-            label: minimized ? 'Restore track' : 'Minimize track',
-            icon: minimized ? AddIcon : MinimizeIcon,
-            onClick: () => track.setMinimized(!minimized),
+            label: 'Track order',
+            type: 'subMenu',
+            subMenu: [
+                {
+                    label: minimized ? 'Restore track' : 'Minimize track',
+                    icon: minimized ? AddIcon : MinimizeIcon,
+                    onClick: () => track.setMinimized(!minimized),
+                },
+                {
+                    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),
+                },
+                {
+                    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(),

package/esm/LinearGenomeView/components/TracksContainer.js

@@ -13,7 +13,7 @@ import Gridlines from './Gridlines';
 import CenterLine from './CenterLine';
 import VerticalGuide from './VerticalGuide';
 import RubberbandSpan from './RubberbandSpan';
-import Highlight from './Highlight';
+import HighlightGroup from './Highlight';
 const useStyles = makeStyles()({
     tracksContainer: {
         position: 'relative',
@@ -40,7 +40,7 @@ const TracksContainer = observer(function TracksContainer({ children, model, })
                 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(Highlight, { model: model }),
+        React.createElement(HighlightGroup, { model: model }),
         additional,
         children));
 });

package/esm/LinearGenomeView/components/ZoomControls.js

@@ -17,16 +17,16 @@ const useStyles = makeStyles()(theme => ({
 }));
 const ZoomControls = observer(function ({ model, }) {
     const { classes } = useStyles();
-    const { maxBpPerPx, minBpPerPx, bpPerPx, scaleFactor } = model;
+    const { maxBpPerPx, minBpPerPx, bpPerPx } = model;
     const [value, setValue] = useState(-Math.log2(bpPerPx) * 100);
     useEffect(() => {
         setValue(-Math.log2(bpPerPx) * 100);
     }, [setValue, bpPerPx]);
     return (React.createElement("div", { className: classes.container },
-        React.createElement(IconButton, { "data-testid": "zoom_out", onClick: () => model.zoom(bpPerPx * 2), disabled: bpPerPx >= maxBpPerPx - 0.0001 || scaleFactor !== 1, size: "large" },
+        React.createElement(IconButton, { "data-testid": "zoom_out", onClick: () => model.zoom(bpPerPx * 2), disabled: bpPerPx >= maxBpPerPx - 0.0001, size: "large" },
             React.createElement(ZoomOut, null)),
-        React.createElement(Slider, { size: "small", className: classes.slider, value: value, min: -Math.log2(maxBpPerPx) * 100, max: -Math.log2(minBpPerPx) * 100, onChange: (_, val) => setValue(val), onChangeCommitted: () => model.zoomTo(2 ** (-value / 100)), disabled: scaleFactor !== 1 }),
-        React.createElement(IconButton, { "data-testid": "zoom_in", onClick: () => model.zoom(model.bpPerPx / 2), disabled: bpPerPx <= minBpPerPx + 0.0001 || scaleFactor !== 1, size: "large" },
+        React.createElement(Slider, { size: "small", className: classes.slider, value: value, min: -Math.log2(maxBpPerPx) * 100, max: -Math.log2(minBpPerPx) * 100, onChange: (_, val) => setValue(val), onChangeCommitted: () => model.zoomTo(2 ** (-value / 100)) }),
+        React.createElement(IconButton, { "data-testid": "zoom_in", onClick: () => model.zoom(model.bpPerPx / 2), disabled: bpPerPx <= minBpPerPx + 0.0001, size: "large" },
             React.createElement(ZoomIn, null))));
 });
 export default ZoomControls;