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

package/esm/BaseLinearDisplay/models/BaseLinearDisplayModel.d.ts

@@ -58,8 +58,15 @@ export declare const BaseLinearDisplay: import("mobx-state-tree").IModelType<{
         message: string | undefined;
         maxHeightReached: boolean;
         ReactComponent: ({ model, }: {
-            model: any;
-        }) => any;
+            model: {
+                error?: unknown;
+                reload: () => void;
+                message: React.ReactNode;
+                filled?: boolean | undefined;
+                status?: string | undefined;
+                reactElement?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
+            };
+        }) => React.JSX.Element | undefined;
         renderProps: any;
     } & {
         doReload(): void;
@@ -342,8 +349,15 @@ export declare const BaseLinearDisplay: import("mobx-state-tree").IModelType<{
         message: string | undefined;
         maxHeightReached: boolean;
         ReactComponent: ({ model, }: {
-            model: any;
-        }) => any;
+            model: {
+                error?: unknown;
+                reload: () => void;
+                message: React.ReactNode;
+                filled?: boolean | undefined;
+                status?: string | undefined;
+                reactElement?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
+            };
+        }) => React.JSX.Element | undefined;
         renderProps: any;
     } & {
         doReload(): void;

package/esm/BaseLinearDisplay/models/serverSideRenderedBlock.d.ts

@@ -28,8 +28,15 @@ declare const blockState: import("mobx-state-tree").IModelType<{
     message: string | undefined;
     maxHeightReached: boolean;
     ReactComponent: ({ model, }: {
-        model: any;
-    }) => any;
+        model: {
+            error?: unknown;
+            reload: () => void;
+            message: React.ReactNode;
+            filled?: boolean | undefined;
+            status?: string | undefined;
+            reactElement?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
+        };
+    }) => React.JSX.Element | undefined;
     renderProps: any;
 } & {
     doReload(): void;

package/esm/BaseLinearDisplay/models/serverSideRenderedBlock.js

@@ -96,7 +96,6 @@ const blockState = types
             renderInProgress = undefined;
         },
         setError(error) {
-            console.error(error);
             if (renderInProgress && !renderInProgress.signal.aborted) {
                 renderInProgress.abort();
             }

package/esm/LaunchLinearGenomeView/index.js

@@ -1,11 +1,12 @@
-import { when } from '@jbrowse/core/util';
+import { when, parseLocString, } from '@jbrowse/core/util';
 import { handleSelectedRegion } from '../searchUtils';
 export default (pluginManager) => {
     pluginManager.addToExtensionPoint('LaunchView-LinearGenomeView', 
     // @ts-expect-error
-    async ({ session, assembly, loc, tracks = [], tracklist, nav, }) => {
+    async ({ session, assembly, loc, tracks = [], tracklist, nav, highlight, }) => {
         try {
             const { assemblyManager } = session;
+            const { isValidRefName } = assemblyManager;
             const view = session.addView('LinearGenomeView', {});
             await when(() => !!view.volatileWidth);
             if (!assembly) {
@@ -15,21 +16,36 @@ export default (pluginManager) => {
             if (!asm) {
                 throw new Error(`Assembly "${assembly}" not found when launching linear genome view`);
             }
-            await handleSelectedRegion({ input: loc, model: view, assembly: asm });
-            const idsNotFound = [];
-            tracks.forEach(track => tryTrack(view, track, idsNotFound));
-            if (idsNotFound.length) {
-                throw new Error(`Could not resolve identifiers: ${idsNotFound.join(',')}`);
-            }
             if (tracklist) {
                 view.activateTrackSelector();
             }
             if (nav !== undefined) {
                 view.setHideHeader(!nav);
             }
+            if (highlight !== undefined) {
+                highlight.forEach(async (h) => {
+                    if (h) {
+                        const parsedLocString = parseLocString(h, refName => isValidRefName(refName, assembly));
+                        const location = {
+                            ...parsedLocString,
+                            assemblyName: assembly,
+                        };
+                        if ((location === null || location === void 0 ? void 0 : location.start) !== undefined &&
+                            (location === null || location === void 0 ? void 0 : location.end) !== undefined) {
+                            view.addToHighlights(location);
+                        }
+                    }
+                });
+            }
+            await handleSelectedRegion({ input: loc, model: view, assembly: asm });
+            const idsNotFound = [];
+            tracks.forEach(track => tryTrack(view, track, idsNotFound));
+            if (idsNotFound.length) {
+                throw new Error(`Could not resolve identifiers: ${idsNotFound.join(',')}`);
+            }
         }
         catch (e) {
-            session.notify(`${e}`, 'error');
+            session.notifyError(`${e}`, e);
             throw e;
         }
     });

package/esm/LinearBareDisplay/model.d.ts

@@ -42,8 +42,15 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
         message: string | undefined;
         maxHeightReached: boolean;
         ReactComponent: ({ model, }: {
-            model: any;
-        }) => any;
+            model: {
+                error?: unknown;
+                reload: () => void;
+                message: import("react").ReactNode;
+                filled?: boolean | undefined;
+                status?: string | undefined;
+                reactElement?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+            };
+        }) => import("react").JSX.Element | undefined;
         renderProps: any;
     } & {
         doReload(): void;
@@ -267,8 +274,15 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
         message: string | undefined;
         maxHeightReached: boolean;
         ReactComponent: ({ model, }: {
-            model: any;
-        }) => any;
+            model: {
+                error?: unknown;
+                reload: () => void;
+                message: import("react").ReactNode;
+                filled?: boolean | undefined;
+                status?: string | undefined;
+                reactElement?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+            };
+        }) => import("react").JSX.Element | undefined;
         renderProps: any;
     } & {
         doReload(): void;

package/esm/LinearBasicDisplay/components/SetMaxHeight.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 declare const SetMaxHeightDialog: ({ model, handleClose, }: {
     model: {
-        maxHeight?: number | undefined;
+        maxHeight?: number;
         setMaxHeight: (arg?: number) => void;
     };
     handleClose: () => void;

package/esm/LinearBasicDisplay/model.d.ts

@@ -47,8 +47,17 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
         message: string | undefined;
         maxHeightReached: boolean;
         ReactComponent: ({ model, }: {
-            model: any;
-        }) => any;
+            model: {
+                error?: unknown;
+                reload: () => void;
+                message: import("react").ReactNode;
+                filled?: boolean | undefined;
+                status?: string | undefined; /**
+                 * #getter
+                 */
+                reactElement?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+            };
+        }) => import("react").JSX.Element | undefined;
         renderProps: any;
     } & {
         doReload(): void;
@@ -343,8 +352,17 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
         message: string | undefined;
         maxHeightReached: boolean;
         ReactComponent: ({ model, }: {
-            model: any;
-        }) => any;
+            model: {
+                error?: unknown;
+                reload: () => void;
+                message: import("react").ReactNode;
+                filled?: boolean | undefined;
+                status?: string | undefined; /**
+                 * #getter
+                 */
+                reactElement?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+            };
+        }) => import("react").JSX.Element | undefined;
         renderProps: any;
     } & {
         doReload(): void;

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

@@ -4,131 +4,7 @@ import { ContentBlock } from '@jbrowse/core/util/blockTypes';
 import { Assembly } from '@jbrowse/core/assemblyManager/assembly';
 declare const Cytobands: ({ overview, block, assembly, }: {
     overview: Base1DViewModel;
-    assembly?: ({
-        configuration: any;
-    } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
-        error: unknown;
-        loaded: boolean;
-        loadingP: Promise<void> | undefined;
-        volatileRegions: import("@jbrowse/core/assemblyManager/assembly").BasicRegion[] | undefined;
-        refNameAliases: {
-            [x: string]: string | undefined;
-        } | undefined;
-        lowerCaseRefNameAliases: {
-            [x: string]: string | undefined;
-        } | undefined;
-        cytobands: import("@jbrowse/core/util").Feature[] | undefined;
-    } & {
-        getConf(arg: string): any;
-    } & {
-        readonly initialized: boolean;
-        readonly name: string;
-        readonly regions: import("@jbrowse/core/assemblyManager/assembly").BasicRegion[] | undefined;
-        readonly aliases: string[];
-        readonly displayName: string | undefined;
-        hasName(name: string): boolean;
-        readonly allAliases: string[];
-        readonly allRefNames: string[] | undefined;
-        readonly lowerCaseRefNames: string[] | undefined;
-        readonly allRefNamesWithLowerCase: string[] | undefined;
-        readonly rpcManager: import("@jbrowse/core/rpc/RpcManager").default;
-        readonly refNameColors: string[];
-    } & {
-        readonly refNames: string[] | undefined;
-    } & {
-        getCanonicalRefName(refName: string): string | undefined;
-        getRefNameColor(refName: string): string | undefined;
-        isValidRefName(refName: string): boolean;
-    } & {
-        setLoaded({ adapterRegionsWithAssembly, refNameAliases, lowerCaseRefNameAliases, cytobands, }: import("@jbrowse/core/assemblyManager/assembly").Loading): void;
-        setError(e: unknown): void;
-        setRegions(regions: import("@jbrowse/core/util").Region[]): void;
-        setRefNameAliases(aliases: {
-            [x: string]: string | undefined;
-        }, lcAliases: {
-            [x: string]: string | undefined;
-        }): void;
-        setCytobands(cytobands: import("@jbrowse/core/util").Feature[]): void;
-        setLoadingP(p?: Promise<void> | undefined): void;
-        load(): Promise<void>;
-        loadPre(): Promise<void>;
-    } & {
-        getAdapterMapEntry(adapterConf: {
-            [x: string]: unknown;
-        }, options: import("@jbrowse/core/data_adapters/BaseAdapter").BaseOptions): Promise<import("@jbrowse/core/assemblyManager/assembly").RefNameMap>;
-        getRefNameMapForAdapter(adapterConf: {
-            [x: string]: unknown;
-        }, opts: import("@jbrowse/core/data_adapters/BaseAdapter").BaseOptions): Promise<{
-            [x: string]: string | undefined;
-        }>;
-        getReverseRefNameMapForAdapter(adapterConf: {
-            [x: string]: unknown;
-        }, opts: import("@jbrowse/core/data_adapters/BaseAdapter").BaseOptions): Promise<{
-            [x: string]: string | undefined;
-        }>;
-    } & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IModelType<{
-        configuration: import("mobx-state-tree").IMaybe<import("mobx-state-tree").IReferenceType<import("mobx-state-tree").IAnyType>>;
-    }, {
-        error: unknown;
-        loaded: boolean;
-        loadingP: Promise<void> | undefined;
-        volatileRegions: import("@jbrowse/core/assemblyManager/assembly").BasicRegion[] | undefined;
-        refNameAliases: {
-            [x: string]: string | undefined;
-        } | undefined;
-        lowerCaseRefNameAliases: {
-            [x: string]: string | undefined;
-        } | undefined;
-        cytobands: import("@jbrowse/core/util").Feature[] | undefined;
-    } & {
-        getConf(arg: string): any;
-    } & {
-        readonly initialized: boolean;
-        readonly name: string;
-        readonly regions: import("@jbrowse/core/assemblyManager/assembly").BasicRegion[] | undefined;
-        readonly aliases: string[];
-        readonly displayName: string | undefined;
-        hasName(name: string): boolean;
-        readonly allAliases: string[];
-        readonly allRefNames: string[] | undefined;
-        readonly lowerCaseRefNames: string[] | undefined;
-        readonly allRefNamesWithLowerCase: string[] | undefined;
-        readonly rpcManager: import("@jbrowse/core/rpc/RpcManager").default;
-        readonly refNameColors: string[];
-    } & {
-        readonly refNames: string[] | undefined;
-    } & {
-        getCanonicalRefName(refName: string): string | undefined;
-        getRefNameColor(refName: string): string | undefined;
-        isValidRefName(refName: string): boolean;
-    } & {
-        setLoaded({ adapterRegionsWithAssembly, refNameAliases, lowerCaseRefNameAliases, cytobands, }: import("@jbrowse/core/assemblyManager/assembly").Loading): void;
-        setError(e: unknown): void;
-        setRegions(regions: import("@jbrowse/core/util").Region[]): void;
-        setRefNameAliases(aliases: {
-            [x: string]: string | undefined;
-        }, lcAliases: {
-            [x: string]: string | undefined;
-        }): void;
-        setCytobands(cytobands: import("@jbrowse/core/util").Feature[]): void;
-        setLoadingP(p?: Promise<void> | undefined): void;
-        load(): Promise<void>;
-        loadPre(): Promise<void>;
-    } & {
-        getAdapterMapEntry(adapterConf: {
-            [x: string]: unknown;
-        }, options: import("@jbrowse/core/data_adapters/BaseAdapter").BaseOptions): Promise<import("@jbrowse/core/assemblyManager/assembly").RefNameMap>;
-        getRefNameMapForAdapter(adapterConf: {
-            [x: string]: unknown;
-        }, opts: import("@jbrowse/core/data_adapters/BaseAdapter").BaseOptions): Promise<{
-            [x: string]: string | undefined;
-        }>;
-        getReverseRefNameMapForAdapter(adapterConf: {
-            [x: string]: unknown;
-        }, opts: import("@jbrowse/core/data_adapters/BaseAdapter").BaseOptions): Promise<{
-            [x: string]: string | undefined;
-        }>;
-    }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>) | undefined;
+    assembly?: Assembly;
     block: ContentBlock;
 }) => React.JSX.Element;
 export default Cytobands;

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

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

package/esm/LinearGenomeView/components/Highlight.js

@@ -0,0 +1,98 @@
+import React, { useRef, useState } from 'react';
+import { observer } from 'mobx-react';
+import { makeStyles } from 'tss-react/mui';
+import { colord } from '@jbrowse/core/util/colord';
+import { getSession, } from '@jbrowse/core/util';
+import { Menu } from '@jbrowse/core/ui';
+import { IconButton, Tooltip, useTheme } from '@mui/material';
+// icons
+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;
+    return ({
+        highlight: {
+            height: '100%',
+            position: 'absolute',
+            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()}`,
+        },
+    });
+});
+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.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.removeHighlight(highlight);
+    };
+    const menuItems = [
+        {
+            label: 'Dismiss highlight',
+            icon: CloseIcon,
+            onClick: () => dismissHighlight(),
+        },
+        {
+            label: 'Bookmark highlighted region',
+            icon: BookmarkIcon,
+            onClick: () => {
+                let bookmarkWidget = session.widgets.get('GridBookmark');
+                if (!bookmarkWidget) {
+                    bookmarkWidget = session.addWidget('GridBookmarkWidget', 'GridBookmark');
+                }
+                // @ts-ignore
+                bookmarkWidget.addBookmark(highlight);
+                dismissHighlight();
+            },
+        },
+    ];
+    function handleClose() {
+        setOpen(false);
+    }
+    // coords
+    const mapCoords = (r) => {
+        const s = model.bpToPx({
+            refName: r.refName,
+            coord: r.start,
+        });
+        const e = model.bpToPx({
+            refName: r.refName,
+            coord: r.end,
+        });
+        return s && e
+            ? {
+                width: Math.max(Math.abs(e.offsetPx - s.offsetPx), 3),
+                left: Math.min(s.offsetPx, e.offsetPx) - model.offsetPx,
+            }
+            : undefined;
+    };
+    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), 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;
+});
+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 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

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

package/esm/LinearGenomeView/components/OverviewHighlight.js

@@ -0,0 +1,57 @@
+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.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.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({
+            ...r,
+            coord: r.reversed ? r.end : r.start,
+        });
+        const e = overview.bpToPx({
+            ...r,
+            coord: r.reversed ? r.start : r.end,
+        });
+        return s !== undefined && e != undefined
+            ? {
+                width: Math.abs(e - s),
+                left: s + cytobandOffset,
+            }
+            : undefined;
+    };
+    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;