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

package/esm/BaseLinearDisplay/components/ServerSideRenderedBlockContent.js

@@ -1,12 +1,16 @@
-import React from 'react';
+import React, { lazy } from 'react';
+import { Tooltip, IconButton } from '@mui/material';
 import { makeStyles } from 'tss-react/mui';
 import { observer } from 'mobx-react';
 import { getParent } from 'mobx-state-tree';
 import { LoadingEllipses } from '@jbrowse/core/ui';
+import { getSession } from '@jbrowse/core/util';
 // icons
 import RefreshIcon from '@mui/icons-material/Refresh';
+import ReportIcon from '@mui/icons-material/Report';
 // locals
 import BlockMsg from './BlockMsg';
+const ErrorMessageStackTraceDialog = lazy(() => import('@jbrowse/core/ui/ErrorMessageStackTraceDialog'));
 const useStyles = makeStyles()(theme => {
     const bg = theme.palette.action.disabledBackground;
     return {
@@ -18,11 +22,9 @@ const useStyles = makeStyles()(theme => {
         },
     };
 });
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const LoadingMessage = observer(({ model }) => {
     const { classes } = useStyles();
     const { status: blockStatus } = model;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const { message: displayStatus } = getParent(model, 2);
     const status = displayStatus || blockStatus;
     return (React.createElement("div", { className: classes.loading },
@@ -30,7 +32,18 @@ const LoadingMessage = observer(({ model }) => {
 });
 const ServerSideRenderedBlockContent = observer(function ({ model, }) {
     if (model.error) {
-        return (React.createElement(BlockMsg, { message: `${model.error}`, severity: "error", buttonText: "reload", icon: React.createElement(RefreshIcon, null), action: model.reload }));
+        return (React.createElement(BlockMsg, { message: `${model.error}`, severity: "error", action: React.createElement(React.Fragment, null,
+                React.createElement(Tooltip, { title: "Reload track" },
+                    React.createElement(IconButton, { "data-testid": "reload_button", onClick: () => model.reload() },
+                        React.createElement(RefreshIcon, null))),
+                React.createElement(Tooltip, { title: "Show stack trace" },
+                    React.createElement(IconButton, { onClick: () => {
+                            getSession(model).queueDialog(onClose => [
+                                ErrorMessageStackTraceDialog,
+                                { onClose, error: model.error },
+                            ]);
+                        } },
+                        React.createElement(ReportIcon, null)))) }));
     }
     else if (model.message) {
         // the message can be a fully rendered react component, e.g. the region too large message

package/esm/BaseLinearDisplay/components/TooLargeMessage.js

@@ -1,12 +1,13 @@
 import React from 'react';
 // locals
 import BlockMsg from '../components/BlockMsg';
+import { Button } from '@mui/material';
 function TooLargeMessage({ model, }) {
     const { regionTooLargeReason } = model;
-    return (React.createElement(BlockMsg, { severity: "warning", action: () => {
-            model.setFeatureDensityStatsLimit(model.featureDensityStats);
-            model.reload();
-        }, buttonText: "Force load", message: [
+    return (React.createElement(BlockMsg, { severity: "warning", action: React.createElement(Button, { onClick: () => {
+                model.setFeatureDensityStatsLimit(model.featureDensityStats);
+                model.reload();
+            } }, "Force load"), message: [
             regionTooLargeReason,
             'Zoom in to see features or force load (may be slow)',
         ]

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/util.js

@@ -16,8 +16,10 @@ export function getDisplayStr(totalBytes) {
 }
 // stabilize clipid under test for snapshot
 export function getId(id, index) {
-    const isJest = typeof jest === 'undefined';
-    return `clip-${isJest ? id : 'jest'}-${index}`;
+    const notJest = typeof jest === 'undefined';
+    return ['clip', notJest ? id : 'jest', index, notJest ? Math.random() : '']
+        .filter(f => !!f)
+        .join('-');
 }
 export async function getFeatureDensityStatsPre(self) {
     const view = getContainingView(self);

package/esm/LaunchLinearGenomeView/index.js

@@ -1,11 +1,12 @@
-import { when } from '@jbrowse/core/util';
-import { handleSelectedRegion } from '..//searchUtils';
+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 = [], }) => {
+    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,6 +16,19 @@ export default (pluginManager) => {
             if (!asm) {
                 throw new Error(`Assembly "${assembly}" not found when launching linear genome view`);
             }
+            if (tracklist) {
+                view.activateTrackSelector();
+            }
+            if (nav !== undefined) {
+                view.setHideHeader(!nav);
+            }
+            if (highlight !== undefined) {
+                const location = parseLocString(highlight, refName => isValidRefName(refName, assembly));
+                if ((location === null || location === void 0 ? void 0 : location.start) !== undefined && (location === null || location === void 0 ? void 0 : location.end) !== undefined) {
+                    location.assemblyName = assembly;
+                    view.setHighlight(location);
+                }
+            }
             await handleSelectedRegion({ input: loc, model: view, assembly: asm });
             const idsNotFound = [];
             tracks.forEach(track => tryTrack(view, track, idsNotFound));

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/model.d.ts

@@ -37,9 +37,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
         isLeftEndOfDisplayedRegion: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
         isRightEndOfDisplayedRegion: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
     }, {
-        renderInProgress: AbortController | undefined; /**
-         * #property
-         */
+        renderInProgress: AbortController | undefined;
         filled: boolean;
         reactElement: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
         features: Map<string, import("@jbrowse/core/util").Feature> | undefined;
@@ -49,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;
@@ -159,12 +166,11 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
         }, {
             rendererTypeName: string;
             error: unknown;
-            message: string | undefined;
+            message: string | undefined; /**
+             * #action
+             */
         }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
     }> | null;
-    /**
-     * #action
-     */
     readonly adapterConfig: any;
     readonly parentTrack: any;
     renderProps(): any;
@@ -193,9 +199,6 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
 } & {
     readonly currentBytesRequested: number;
     readonly currentFeatureScreenDensity: number;
-    /**
-     * #getter
-     */
     readonly maxFeatureScreenDensity: any;
     readonly featureDensityStatsReady: boolean;
     readonly maxAllowableBytes: number;
@@ -205,7 +208,9 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
     setCurrStatsBpPerPx(n: number): void;
     setFeatureDensityStatsLimit(stats?: import("@jbrowse/core/data_adapters/BaseAdapter").FeatureDensityStats | undefined): void;
     getFeatureDensityStats(): Promise<import("@jbrowse/core/data_adapters/BaseAdapter").FeatureDensityStats>;
-    setFeatureDensityStatsP(arg: any): void;
+    setFeatureDensityStatsP(arg: any): void; /**
+     * #method
+     */
     setFeatureDensityStats(featureDensityStats?: import("@jbrowse/core/data_adapters/BaseAdapter").FeatureDensityStats | undefined): void;
     clearFeatureDensityStats(): void;
 } & {
@@ -275,9 +280,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
     readonly rendererConfig: {
         [x: string]: any;
     } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
-        setSubschema(slotName: string, data: unknown): any; /**
-         * #property
-         */
+        setSubschema(slotName: string, data: unknown): any;
     } & import("mobx-state-tree").IStateTreeNode<AnyConfigurationSchemaType>;
 } & {
     /**
@@ -304,9 +307,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
         config: {
             [x: string]: any;
         } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
-            setSubschema(slotName: string, data: unknown): any; /**
-             * #property
-             */
+            setSubschema(slotName: string, data: unknown): any;
         } & import("mobx-state-tree").IStateTreeNode<AnyConfigurationSchemaType>;
     };
     /**
@@ -341,9 +342,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
         isLeftEndOfDisplayedRegion: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
         isRightEndOfDisplayedRegion: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
     }, {
-        renderInProgress: AbortController | undefined; /**
-         * #property
-         */
+        renderInProgress: AbortController | undefined;
         filled: boolean;
         reactElement: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
         features: Map<string, import("@jbrowse/core/util").Feature> | undefined;
@@ -353,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/LinearBasicDisplay/model.js

@@ -6,7 +6,7 @@ import { types, getEnv } from 'mobx-state-tree';
 import VisibilityIcon from '@mui/icons-material/Visibility';
 // locals
 import { BaseLinearDisplay } from '../BaseLinearDisplay';
-const SetMaxHeightDlg = lazy(() => import('./components/SetMaxHeight'));
+const SetMaxHeightDialog = lazy(() => import('./components/SetMaxHeight'));
 /**
  * #stateModel LinearBasicDisplay
  * #category display
@@ -174,7 +174,7 @@ function stateModelFactory(configSchema) {
                         label: 'Set max height',
                         onClick: () => {
                             getSession(self).queueDialog(handleClose => [
-                                SetMaxHeightDlg,
+                                SetMaxHeightDialog,
                                 { model: self, handleClose },
                             ]);
                         },

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ExportSvgOptions } from '..';
-export default function ExportSvgDlg({ model, handleClose, }: {
+export default function ExportSvgDialog({ model, handleClose, }: {
     model: {
         exportSvg(opts: ExportSvgOptions): Promise<void>;
     };

package/esm/LinearGenomeView/components/ExportSvgDialog.js

@@ -10,7 +10,7 @@ function LoadingMessage() {
 function useSvgLocal(key, val) {
     return useLocalStorage('svg-' + key, val);
 }
-export default function ExportSvgDlg({ model, handleClose, }) {
+export default function ExportSvgDialog({ model, handleClose, }) {
     const session = getSession(model);
     const offscreenCanvas = typeof OffscreenCanvas !== 'undefined';
     const [rasterizeLayers, setRasterizeLayers] = useState(offscreenCanvas);

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

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

package/esm/LinearGenomeView/components/Highlight.js

@@ -0,0 +1,94 @@
+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, _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')
+                .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 { 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 session = getSession(model);
+    const dismissHighlight = () => {
+        model.setHighlight(undefined);
+    };
+    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(model.highlight);
+                dismissHighlight();
+            },
+        },
+    ];
+    function handleClose() {
+        setOpen(false);
+    }
+    if (!model.highlight) {
+        return null;
+    }
+    // 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 h = mapCoords(model.highlight);
+    return (React.createElement(React.Fragment, null, 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(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));
+});
+export default Highlight;

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 | null;
+export default OverviewHighlight;

package/esm/LinearGenomeView/components/OverviewHighlight.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import { observer } from 'mobx-react';
+import { makeStyles } from 'tss-react/mui';
+import { colord } from '@jbrowse/core/util/colord';
+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')
+                .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 OverviewHighlight = observer(function OverviewHighlight({ model, overview, }) {
+    const { classes } = useStyles();
+    const { cytobandOffset } = model;
+    // 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;
+    };
+    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));
+});
+export default OverviewHighlight;

package/esm/LinearGenomeView/components/OverviewScalebar.js

@@ -13,6 +13,7 @@ import { getCytobands } from './util';
 import OverviewRubberband from './OverviewRubberband';
 import Cytobands from './Cytobands';
 import OverviewScalebarPolygon from './OverviewScalebarPolygon';
+import OverviewHighlight from './OverviewHighlight';
 const wholeSeqSpacer = 2;
 const useStyles = makeStyles()(theme => ({
     scalebar: {
@@ -151,7 +152,8 @@ const Scalebar = observer(function ({ model, scale, overview, }) {
                     backgroundColor: '#999',
                     backgroundImage: 'repeating-linear-gradient(90deg, transparent, transparent 1px, rgba(255,255,255,.5) 1px, rgba(255,255,255,.5) 3px)',
                 } })) : (React.createElement(OverviewBox, { scale: scale, block: block, model: model, overview: overview, key: `${JSON.stringify(block)}-${idx}` }));
-        })));
+        }),
+        React.createElement(OverviewHighlight, { model: model, overview: overview })));
 });
 const OverviewScalebar = observer(function ({ model, children, }) {
     const { classes } = useStyles();

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

@@ -10,7 +10,7 @@ function HelpAdornment() {
     return (React.createElement(React.Fragment, null,
         React.createElement(IconButton, { onClick: () => setHelpDialogDisplayed(true), size: "small" },
             React.createElement(HelpIcon, { fontSize: "small" })),
-        isHelpDialogDisplayed ? (React.createElement(Suspense, { fallback: React.createElement("div", null) },
+        isHelpDialogDisplayed ? (React.createElement(Suspense, { fallback: null },
             React.createElement(HelpDialog, { handleClose: () => setHelpDialogDisplayed(false) }))) : null));
 }
 export default function EndAdornment({ showHelp, endAdornment, }) {

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { observer } from 'mobx-react';
 import { getSession, useDebounce, measureText } from '@jbrowse/core/util';
 import BaseResult, { RefSequenceResult, } from '@jbrowse/core/TextSearch/BaseResults';
@@ -6,7 +6,6 @@ import { Autocomplete } from '@mui/material';
 import { getDeduplicatedResult, getFiltered } from './util';
 import AutocompleteTextField from './AutocompleteTextField';
 const RefNameAutocomplete = observer(function ({ model, onSelect, assemblyName, style, fetchResults, onChange, value, showHelp = true, minWidth = 200, maxWidth = 550, TextFieldProps = {}, }) {
-    var _a;
     const session = getSession(model);
     const { assemblyManager } = session;
     const [open, setOpen] = useState(false);
@@ -45,6 +44,14 @@ const RefNameAutocomplete = observer(function ({ model, onSelect, assemblyName,
     const inputBoxVal = coarseVisibleLocStrings || value || '';
     // heuristic, text width + 60 accommodates help icon and search icon
     const width = Math.min(Math.max(measureText(inputBoxVal, 14) + 100, minWidth), maxWidth);
+    const regions = assembly === null || assembly === void 0 ? void 0 : assembly.regions;
+    const regionOptions = useMemo(() => (regions === null || regions === void 0 ? void 0 : regions.map(option => ({
+        result: new RefSequenceResult({
+            refName: option.refName,
+            label: option.refName,
+            matchedAttribute: 'refName',
+        }),
+    }))) || [], [regions]);
     // notes on implementation:
     // The selectOnFocus setting helps highlight the field when clicked
     return (React.createElement(React.Fragment, null,
@@ -70,14 +77,6 @@ const RefNameAutocomplete = observer(function ({ model, onSelect, assemblyName,
                     onSelect === null || onSelect === void 0 ? void 0 : onSelect(selectedOption.result);
                 }
                 setInputValue(inputBoxVal);
-            }, options: !(searchOptions === null || searchOptions === void 0 ? void 0 : searchOptions.length)
-                ? ((_a = assembly === null || assembly === void 0 ? void 0 : assembly.regions) === null || _a === void 0 ? void 0 : _a.map(option => ({
-                    result: new RefSequenceResult({
-                        refName: option.refName,
-                        label: option.refName,
-                        matchedAttribute: 'refName',
-                    }),
-                }))) || []
-                : searchOptions, getOptionDisabled: option => option.group === 'limitOption', filterOptions: (opts, { inputValue }) => getFiltered(opts, inputValue), renderInput: params => (React.createElement(AutocompleteTextField, { showHelp: showHelp, params: params, inputBoxVal: inputBoxVal, TextFieldProps: TextFieldProps, setCurrentSearch: setCurrentSearch, setInputValue: setInputValue })), getOptionLabel: opt => typeof opt === 'string' ? opt : opt.result.getDisplayString() })));
+            }, options: (searchOptions === null || searchOptions === void 0 ? void 0 : searchOptions.length) ? searchOptions : regionOptions, getOptionDisabled: option => option.group === 'limitOption', filterOptions: (opts, { inputValue }) => getFiltered(opts, inputValue), renderInput: params => (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/TracksContainer.js

@@ -13,6 +13,7 @@ import Gridlines from './Gridlines';
 import CenterLine from './CenterLine';
 import VerticalGuide from './VerticalGuide';
 import RubberbandSpan from './RubberbandSpan';
+import Highlight from './Highlight';
 const useStyles = makeStyles()({
     tracksContainer: {
         position: 'relative',
@@ -39,6 +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 }),
         additional,
         children));
 });