@jbrowse/plugin-linear-genome-view 4.2.1 → 4.3.0

package/esm/LinearGenomeView/afterAttach.js

@@ -1,6 +1,17 @@
 import { getSession, localStorageSetItem, parseLocString, } from '@jbrowse/core/util';
 import { addDisposer } from '@jbrowse/mobx-state-tree';
 import { autorun, when } from 'mobx';
+function tryParseJson(s) {
+    try {
+        const v = JSON.parse(s);
+        return v && typeof v === 'object'
+            ? v
+            : undefined;
+    }
+    catch {
+        return undefined;
+    }
+}
 export function setupInitAutorun(self) {
     addDisposer(self, autorun(async function initAutorun() {
         const { init, initialized } = self;
@@ -65,18 +76,45 @@ export function setupInitAutorun(self) {
             if (init.nav !== undefined) {
                 self.setHideHeader(!init.nav);
             }
+            if (self.highlight.length) {
+                const fallback = self.assemblyNames[0];
+                if (fallback) {
+                    const normalized = self.highlight.map(h => h.assemblyName ? h : { ...h, assemblyName: fallback });
+                    if (normalized.some((h, i) => h !== self.highlight[i])) {
+                        self.setHighlight(normalized);
+                    }
+                }
+            }
             if (init.highlight) {
                 for (const h of init.highlight) {
-                    const p = parseLocString(h, refName => assemblyManager.isValidRefName(refName, init.assembly));
-                    const { start, end } = p;
-                    if (start !== undefined && end !== undefined) {
+                    const json = h.trim().startsWith('{') && tryParseJson(h);
+                    if (json &&
+                        typeof json.refName === 'string' &&
+                        typeof json.start === 'number' &&
+                        typeof json.end === 'number') {
                         self.addToHighlights({
-                            ...p,
-                            start,
-                            end,
-                            assemblyName: init.assembly,
+                            refName: json.refName,
+                            start: json.start,
+                            end: json.end,
+                            assemblyName: typeof json.assemblyName === 'string'
+                                ? json.assemblyName
+                                : init.assembly,
+                            color: typeof json.color === 'string' ? json.color : undefined,
+                            label: typeof json.label === 'string' ? json.label : undefined,
                         });
                     }
+                    else {
+                        const p = parseLocString(h, refName => assemblyManager.isValidRefName(refName, init.assembly));
+                        const { start, end } = p;
+                        if (start !== undefined && end !== undefined) {
+                            self.addToHighlights({
+                                ...p,
+                                start,
+                                end,
+                                assemblyName: init.assembly,
+                            });
+                        }
+                    }
                 }
             }
             self.setInit(undefined);

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

@@ -1,12 +1,8 @@
 import type { LinearGenomeViewModel } from '../model.ts';
+import type { HighlightType } from '../types.ts';
 type LGV = LinearGenomeViewModel;
 declare const Highlight: ({ model, highlight, }: {
     model: LGV;
-    highlight: {
-        assemblyName: string;
-        refName: string;
-        start: number;
-        end: number;
-    };
+    highlight: HighlightType;
 }) => import("react/jsx-runtime").JSX.Element | null;
 export default Highlight;

package/esm/LinearGenomeView/components/Highlight.js

@@ -1,90 +1,42 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, useState } from 'react';
-import { Menu } from '@jbrowse/core/ui';
+import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
 import { getSession } from '@jbrowse/core/util';
 import { colord } from '@jbrowse/core/util/colord';
-import { makeStyles } from '@jbrowse/core/util/tss-react';
 import BookmarkIcon from '@mui/icons-material/Bookmark';
 import CloseIcon from '@mui/icons-material/Close';
 import LinkIcon from '@mui/icons-material/Link';
-import { IconButton, Tooltip } from '@mui/material';
+import { Box, Tooltip, Typography, useTheme } from '@mui/material';
 import { observer } from 'mobx-react';
-const useStyles = makeStyles()(theme => ({
-    highlight: {
-        height: '100%',
-        position: 'absolute',
-        left: 0,
-        overflow: 'hidden',
-        background: colord(theme.palette.highlight.main).alpha(0.35).toRgbString(),
-    },
-    linkIcon: {
-        color: colord(theme.palette.highlight.main).darken(0.2).toRgbString(),
-    },
-    z3: {
-        zIndex: 3,
-    },
-}));
+import HighlightBand from "./HighlightBand.js";
 const Highlight = observer(function Highlight({ model, highlight, }) {
-    const { classes } = useStyles();
-    const [open, setOpen] = useState(false);
-    const anchorEl = useRef(null);
+    const theme = useTheme();
     const session = getSession(model);
-    const { assemblyManager } = session;
-    const dismissHighlight = () => {
-        model.removeHighlight(highlight);
-    };
-    function handleClose() {
-        setOpen(false);
-    }
-    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.assemblyName);
-    const h = mapCoords({
-        ...highlight,
-        refName: asm?.getCanonicalRefName(highlight.refName) ?? highlight.refName,
-    });
-    return h ? (_jsxs("div", { className: classes.highlight, style: {
-            transform: `translateX(${h.left}px)`,
-            width: h.width,
-        }, children: [_jsx(Tooltip, { title: "Highlighted from URL parameter", arrow: true, children: _jsx(IconButton, { ref: anchorEl, className: classes.z3, onClick: () => {
-                        setOpen(true);
-                    }, children: _jsx(LinkIcon, { fontSize: "small", className: classes.linkIcon }) }) }), _jsx(Menu, { anchorEl: anchorEl.current, onMenuItemClick: (_event, callback) => {
-                    callback();
-                    handleClose();
-                }, open: open, onClose: handleClose, menuItems: [
-                    {
-                        label: 'Dismiss highlight',
-                        icon: CloseIcon,
-                        onClick: () => {
-                            dismissHighlight();
-                        },
+    const coords = model.getHighlightCoords(highlight);
+    const bandColor = highlight.color
+        ? colord(highlight.color)
+        : colord(theme.palette.highlight.main).alpha(0.35);
+    return coords ? (_jsx(HighlightBand, { coords: coords, background: bandColor.toRgbString(), children: _jsx(CascadingMenuButton, { menuItems: [
+                {
+                    label: 'Dismiss highlight',
+                    icon: CloseIcon,
+                    onClick: () => {
+                        model.removeHighlight(highlight);
                     },
-                    {
-                        label: 'Bookmark highlighted region',
-                        icon: BookmarkIcon,
-                        onClick: () => {
-                            let bookmarkWidget = session.widgets.get('GridBookmark');
-                            if (!bookmarkWidget) {
-                                bookmarkWidget = session.addWidget('GridBookmarkWidget', 'GridBookmark');
-                            }
-                            bookmarkWidget.addBookmark(highlight);
-                            dismissHighlight();
-                        },
+                },
+                {
+                    label: 'Bookmark highlighted region',
+                    icon: BookmarkIcon,
+                    onClick: () => {
+                        const bookmarkWidget = (session.widgets.get('GridBookmark') ??
+                            session.addWidget('GridBookmarkWidget', 'GridBookmark'));
+                        bookmarkWidget.addBookmark({
+                            ...highlight,
+                            assemblyName: highlight.assemblyName ?? model.assemblyNames[0],
+                        });
+                        session.showWidget(bookmarkWidget);
+                        model.removeHighlight(highlight);
                     },
-                ] })] })) : null;
+                },
+            ], children: _jsx(Tooltip, { title: highlight.label ?? 'Highlighted region', arrow: true, children: _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 0.5 }, children: [_jsx(LinkIcon, { fontSize: "small", sx: { color: bandColor.alpha(0.8).toRgbString() } }), highlight.label && model.labelsVisible ? (_jsx(Typography, { variant: "caption", noWrap: true, children: highlight.label })) : null] }) }) }) })) : null;
 });
 export default Highlight;

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

@@ -0,0 +1,8 @@
+export default function HighlightBand({ coords, background, children, }: {
+    coords: {
+        left: number;
+        width: number;
+    };
+    background: string;
+    children?: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/esm/LinearGenomeView/components/HighlightBand.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { makeStyles } from '@jbrowse/core/util/tss-react';
+const useStyles = makeStyles()({
+    highlight: {
+        height: '100%',
+        position: 'absolute',
+        left: 0,
+        overflow: 'hidden',
+        zIndex: 1,
+        pointerEvents: 'none',
+    },
+    chip: {
+        pointerEvents: 'auto',
+    },
+});
+export default function HighlightBand({ coords, background, children, }) {
+    const { classes } = useStyles();
+    return (_jsx("div", { className: classes.highlight, style: {
+            transform: `translateX(${coords.left}px)`,
+            width: coords.width,
+            background,
+        }, children: coords.width > 3 && children ? (_jsx("div", { className: classes.chip, children: children })) : null }));
+}

package/esm/LinearGenomeView/components/OverviewHighlight.js

@@ -20,7 +20,9 @@ const OverviewHighlight = observer(function OverviewHighlight({ model, overview,
     const { assemblyManager } = session;
     return highlight
         .map(r => {
-        const asm = assemblyManager.get(r.assemblyName);
+        const asm = r.assemblyName
+            ? assemblyManager.get(r.assemblyName)
+            : undefined;
         const refName = asm?.getCanonicalRefName(r.refName) ?? r.refName;
         const s = overview.bpToPx({
             ...r,

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

@@ -1,8 +1,5 @@
 import type { AutocompleteRenderInputParams, TextFieldProps as TFP } from '@mui/material';
-export default function AutocompleteTextField({ TextFieldProps, inputBoxVal, params, setInputValue, setCurrentSearch, }: {
+export default function AutocompleteTextField({ TextFieldProps, params, }: {
     TextFieldProps: TFP;
-    inputBoxVal: string;
     params: AutocompleteRenderInputParams;
-    setInputValue: (arg: string) => void;
-    setCurrentSearch: (arg: string) => void;
 }): import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import BaseResult, { RefSequenceResult, } from '@jbrowse/core/TextSearch/BaseResults';
 import { getSession, measureText, useDebounce } from '@jbrowse/core/util';
 import { Autocomplete } from '@mui/material';
@@ -11,12 +11,14 @@ const RefNameAutocomplete = observer(function RefNameAutocomplete({ model, onSel
     const { assemblyManager } = session;
     const [open, setOpen] = useState(false);
     const [loaded, setLoaded] = useState(true);
-    const [currentSearch, setCurrentSearch] = useState('');
     const [inputValue, setInputValue] = useState('');
+    const [searchQuery, setSearchQuery] = useState('');
     const [searchOptions, setSearchOptions] = useState();
-    const debouncedSearch = useDebounce(currentSearch, 50);
+    const debouncedSearch = useDebounce(searchQuery, 50);
     const assembly = assemblyName ? assemblyManager.get(assemblyName) : undefined;
     const { coarseVisibleLocStrings, hasDisplayedRegions } = model;
+    const fetchResultsRef = useRef(fetchResults);
+    fetchResultsRef.current = fetchResults;
     useEffect(() => {
         const isCurrent = { cancelled: false };
         (async () => {
@@ -25,7 +27,7 @@ const RefNameAutocomplete = observer(function RefNameAutocomplete({ model, onSel
                     return;
                 }
                 setLoaded(false);
-                const results = await fetchResults(debouncedSearch);
+                const results = await fetchResultsRef.current(debouncedSearch);
                 if (!isCurrent.cancelled) {
                     setSearchOptions(getDeduplicatedResult(results));
                 }
@@ -45,7 +47,7 @@ const RefNameAutocomplete = observer(function RefNameAutocomplete({ model, onSel
         return () => {
             isCurrent.cancelled = true;
         };
-    }, [assemblyName, fetchResults, debouncedSearch, session]);
+    }, [assemblyName, debouncedSearch, session]);
     const inputBoxVal = coarseVisibleLocStrings || value || '';
     const regions = assembly?.regions;
     const regionOptions = useMemo(() => regions?.map(region => ({
@@ -59,16 +61,26 @@ const RefNameAutocomplete = observer(function RefNameAutocomplete({ model, onSel
     return (_jsx(Autocomplete, { "data-testid": "autocomplete", disableListWrap: true, disableClearable: true, disabled: !assemblyName, freeSolo: true, includeInputInList: true, selectOnFocus: true, style: {
             ...style,
             width: Math.min(Math.max(measureText(inputBoxVal, 14) + 100, minWidth), maxWidth),
-        }, value: inputBoxVal, loading: !loaded, inputValue: inputValue, onInputChange: (_event, newInputValue) => {
+        }, value: inputBoxVal, loading: !loaded, inputValue: inputValue, onInputChange: (_event, newInputValue, reason) => {
             setInputValue(newInputValue);
-            onChange?.(newInputValue);
+            if (reason === 'input') {
+                setSearchQuery(newInputValue);
+                onChange?.(newInputValue);
+            }
+            else if (reason === 'selectOption' || reason === 'clear') {
+                onChange?.(newInputValue);
+                setSearchQuery('');
+            }
+            else if (reason === 'blur') {
+                setSearchQuery('');
+            }
         }, loadingText: "loading results", open: open, onOpen: () => {
             setOpen(true);
         }, onClose: () => {
             setOpen(false);
             setLoaded(true);
             if (hasDisplayedRegions) {
-                setCurrentSearch('');
+                setSearchQuery('');
                 setSearchOptions(undefined);
             }
         }, onChange: (_event, selectedOption) => {
@@ -84,6 +96,6 @@ const RefNameAutocomplete = observer(function RefNameAutocomplete({ model, onSel
                 onSelect?.(selectedOption.result);
             }
             setInputValue(inputBoxVal);
-        }, options: searchOptions?.length ? searchOptions : regionOptions, getOptionDisabled: option => option.group === 'limitOption', filterOptions: (opts, { inputValue }) => getFiltered(opts, inputValue), renderInput: params => (_jsx(AutocompleteTextField, { params: params, inputBoxVal: inputBoxVal, TextFieldProps: TextFieldProps, setCurrentSearch: setCurrentSearch, setInputValue: setInputValue })), getOptionLabel: opt => typeof opt === 'string' ? opt : opt.result.getDisplayString() }));
+        }, options: searchOptions?.length ? searchOptions : regionOptions, getOptionDisabled: option => option.group === 'limitOption', filterOptions: opts => getFiltered(opts, searchQuery), renderInput: params => (_jsx(AutocompleteTextField, { params: params, TextFieldProps: TextFieldProps })), getOptionLabel: opt => typeof opt === 'string' ? opt : opt.result.getDisplayString() }));
 });
 export default RefNameAutocomplete;

package/esm/LinearGenomeView/components/TracksContainer.js

@@ -44,6 +44,6 @@ const TracksContainer = observer(function TracksContainer({ children, model, })
                     } }) }), _jsx(HighlightGroup, { model: model }), additional, children] }));
 });
 const HighlightGroup = observer(function HighlightGroup({ model, }) {
-    return model.highlight.length ? (_jsx(Suspense, { fallback: null, children: model.highlight.map((highlight, idx) => (_jsx(Highlight, { model: model, highlight: highlight }, `${JSON.stringify(highlight)}-${idx}`))) })) : null;
+    return model.highlightsVisible && model.highlight.length ? (_jsx(Suspense, { fallback: null, children: model.highlight.map((highlight, idx) => (_jsx(Highlight, { model: model, highlight: highlight }, `${JSON.stringify(highlight)}-${idx}`))) })) : null;
 });
 export default TracksContainer;

package/esm/LinearGenomeView/index.d.ts

@@ -2,3 +2,4 @@ import type PluginManager from '@jbrowse/core/PluginManager';
 export default function LinearGenomeViewF(pluginManager: PluginManager): void;
 export * from './model.ts';
 export * from './types.ts';
+export { default as HighlightBand } from './components/HighlightBand.tsx';

package/esm/LinearGenomeView/index.js

@@ -13,3 +13,4 @@ export default function LinearGenomeViewF(pluginManager) {
 }
 export * from "./model.js";
 export * from "./types.js";
+export { default as HighlightBand } from "./components/HighlightBand.js";

package/esm/LinearGenomeView/model.d.ts

@@ -28,6 +28,8 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
     trackLabels: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<string>, [undefined]>;
     showGridlines: import("@jbrowse/mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
     highlight: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").IArrayType<import("@jbrowse/mobx-state-tree").IType<HighlightType, HighlightType, HighlightType>>, [undefined]>;
+    highlightsVisible: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<boolean>, [undefined]>;
+    labelsVisible: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<boolean>, [undefined]>;
     colorByCDS: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<boolean>, [undefined]>;
     showTrackOutlines: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<boolean>, [undefined]>;
     init: import("@jbrowse/mobx-state-tree").IType<InitState | undefined, InitState | undefined, InitState | undefined>;
@@ -119,6 +121,9 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
     addToHighlights(highlight: HighlightType): void;
     setHighlight(highlight?: HighlightType[]): void;
     removeHighlight(highlight: HighlightType): void;
+    updateHighlight(old: HighlightType, updates: Partial<HighlightType>): void;
+    setHighlightsVisible(arg: boolean): void;
+    setLabelsVisible(arg: boolean): void;
     setVolatileGuides(guides: VolatileGuide[]): void;
     scrollTo(offsetPx: number): number;
     zoomTo(bpPerPx: number, offset?: number, centerAtOffset?: boolean): number;
@@ -199,6 +204,15 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
         index: number;
         offsetPx: number;
     } | undefined;
+    getHighlightCoords(region: {
+        assemblyName?: string;
+        refName: string;
+        start: number;
+        end: number;
+    }): {
+        width: number;
+        left: number;
+    } | undefined;
     centerAt(coord: number, refName: string, regionNumber?: number): void;
     pxToBp(px: number): {
         coord: number;
@@ -248,6 +262,8 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
     trackLabels: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<string>, [undefined]>;
     showGridlines: import("@jbrowse/mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
     highlight: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").IArrayType<import("@jbrowse/mobx-state-tree").IType<HighlightType, HighlightType, HighlightType>>, [undefined]>;
+    highlightsVisible: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<boolean>, [undefined]>;
+    labelsVisible: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<boolean>, [undefined]>;
     colorByCDS: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<boolean>, [undefined]>;
     showTrackOutlines: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<boolean>, [undefined]>;
     init: import("@jbrowse/mobx-state-tree").IType<InitState | undefined, InitState | undefined, InitState | undefined>;
@@ -271,6 +287,8 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
     trackLabels: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<string>, [undefined]>;
     showGridlines: import("@jbrowse/mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
     highlight: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").IArrayType<import("@jbrowse/mobx-state-tree").IType<HighlightType, HighlightType, HighlightType>>, [undefined]>;
+    highlightsVisible: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<boolean>, [undefined]>;
+    labelsVisible: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<boolean>, [undefined]>;
     colorByCDS: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<boolean>, [undefined]>;
     showTrackOutlines: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<boolean>, [undefined]>;
     init: import("@jbrowse/mobx-state-tree").IType<InitState | undefined, InitState | undefined, InitState | undefined>;

package/esm/LinearGenomeView/model.js

@@ -42,6 +42,8 @@ export function stateModelFactory(pluginManager) {
         trackLabels: types.optional(types.string, () => localStorageGetItem('lgv-trackLabels') || ''),
         showGridlines: true,
         highlight: types.optional(types.array(types.frozen()), []),
+        highlightsVisible: types.optional(types.boolean, true),
+        labelsVisible: types.optional(types.boolean, true),
         colorByCDS: types.optional(types.boolean, () => localStorageGetBoolean('lgv-colorByCDS', false)),
         showTrackOutlines: types.optional(types.boolean, () => localStorageGetBoolean('lgv-showTrackOutlines', true)),
         init: types.frozen(),
@@ -351,6 +353,18 @@ export function stateModelFactory(pluginManager) {
         removeHighlight(highlight) {
             self.highlight.remove(highlight);
         },
+        updateHighlight(old, updates) {
+            const idx = self.highlight.indexOf(old);
+            if (idx !== -1) {
+                self.highlight.splice(idx, 1, { ...old, ...updates });
+            }
+        },
+        setHighlightsVisible(arg) {
+            self.highlightsVisible = arg;
+        },
+        setLabelsVisible(arg) {
+            self.labelsVisible = arg;
+        },
         setVolatileGuides(guides) {
             self.volatileGuides = guides;
         },
@@ -826,6 +840,21 @@ export function stateModelFactory(pluginManager) {
         bpToPx({ refName, coord, regionNumber, }) {
             return bpToPx({ refName, coord, regionNumber, self });
         },
+        getHighlightCoords(region) {
+            const { assemblyManager } = getSession(self);
+            const asm = region.assemblyName
+                ? assemblyManager.get(region.assemblyName)
+                : undefined;
+            const refName = asm?.getCanonicalRefName(region.refName) ?? region.refName;
+            const s = this.bpToPx({ refName, coord: region.start });
+            const e = this.bpToPx({ refName, coord: region.end });
+            return s && e
+                ? {
+                    width: Math.max(Math.abs(e.offsetPx - s.offsetPx), 3),
+                    left: Math.min(s.offsetPx, e.offsetPx) - self.offsetPx,
+                }
+                : undefined;
+        },
         centerAt(coord, refName, regionNumber) {
             const centerPx = this.bpToPx({
                 refName,
@@ -877,7 +906,7 @@ export function stateModelFactory(pluginManager) {
         if (!snap) {
             return snap;
         }
-        const { init, offsetPx, bpPerPx, hideHeader, hideHeaderOverview, hideNoTracksActive, showGridlines, trackSelectorType, displayedRegions, highlight, showCenterLine, showCytobandsSetting, trackLabels, colorByCDS, showTrackOutlines, ...rest } = snap;
+        const { init, offsetPx, bpPerPx, hideHeader, hideHeaderOverview, hideNoTracksActive, showGridlines, trackSelectorType, displayedRegions, highlight, showCenterLine, showCytobandsSetting, trackLabels, colorByCDS, showTrackOutlines, highlightsVisible, labelsVisible, ...rest } = snap;
         return {
             ...rest,
             ...(offsetPx ? { offsetPx } : {}),
@@ -894,6 +923,8 @@ export function stateModelFactory(pluginManager) {
             ...(trackLabels ? { trackLabels } : {}),
             ...(colorByCDS ? { colorByCDS } : {}),
             ...(!showTrackOutlines ? { showTrackOutlines } : {}),
+            ...(!highlightsVisible ? { highlightsVisible } : {}),
+            ...(!labelsVisible ? { labelsVisible } : {}),
         };
     });
 }

package/esm/LinearGenomeView/types.d.ts

@@ -29,8 +29,10 @@ export interface ExportSvgOptions {
 export interface HighlightType {
     start: number;
     end: number;
-    assemblyName: string;
+    assemblyName?: string;
     refName: string;
+    color?: string;
+    label?: string;
 }
 export interface NavLocation {
     refName: string;

package/esm/index.d.ts

@@ -1245,7 +1245,7 @@ export type { BaseLinearDisplayModel, BlockModel, ExportSvgDisplayOptions, Float
 export { configSchemaFactory as linearBareDisplayConfigSchemaFactory, stateModelFactory as linearBareDisplayStateModelFactory, } from './LinearBareDisplay/index.ts';
 export { BaseLinearDisplay, BaseLinearDisplayComponent, BlockMsg, FeatureDensityMixin, FloatingLegend, NonBlockCanvasDisplayComponent, NonBlockCanvasDisplayMixin, SVGLegend, TooLargeMessage, TrackHeightMixin, baseLinearDisplayConfigSchema, calculateSvgLegendWidth, createSubfeatureLabelMetadata, drawCanvasImageData, } from './BaseLinearDisplay/index.ts';
 export type { NonBlockCanvasDisplayMixinType, NonBlockCanvasDisplayModel, } from './BaseLinearDisplay/index.ts';
-export { type LinearGenomeViewModel, type LinearGenomeViewStateModel, RefNameAutocomplete, SearchBox, } from './LinearGenomeView/index.ts';
+export { HighlightBand, type LinearGenomeViewModel, type LinearGenomeViewStateModel, RefNameAutocomplete, SearchBox, } from './LinearGenomeView/index.ts';
 export { fetchResults } from './searchUtils.ts';
 export type { BpOffset, ExportSvgOptions, HighlightType, InitState, NavLocation, VolatileGuide, } from './LinearGenomeView/types.ts';
 export { SVGGridlines, SVGRuler, SVGTracks, renderToSvg, } from './LinearGenomeView/svgcomponents/SVGLinearGenomeView.tsx';

package/esm/index.js

@@ -54,7 +54,7 @@ export default class LinearGenomeViewPlugin extends Plugin {
 }
 export { configSchemaFactory as linearBareDisplayConfigSchemaFactory, stateModelFactory as linearBareDisplayStateModelFactory, } from "./LinearBareDisplay/index.js";
 export { BaseLinearDisplay, BaseLinearDisplayComponent, BlockMsg, FeatureDensityMixin, FloatingLegend, NonBlockCanvasDisplayComponent, NonBlockCanvasDisplayMixin, SVGLegend, TooLargeMessage, TrackHeightMixin, baseLinearDisplayConfigSchema, calculateSvgLegendWidth, createSubfeatureLabelMetadata, drawCanvasImageData, } from "./BaseLinearDisplay/index.js";
-export { RefNameAutocomplete, SearchBox, } from "./LinearGenomeView/index.js";
+export { HighlightBand, RefNameAutocomplete, SearchBox, } from "./LinearGenomeView/index.js";
 export { fetchResults } from "./searchUtils.js";
 export { SVGGridlines, SVGRuler, SVGTracks, renderToSvg, } from "./LinearGenomeView/svgcomponents/SVGLinearGenomeView.js";
 export { totalHeight } from "./LinearGenomeView/svgcomponents/util.js";

package/esm/searchUtils.js

@@ -58,11 +58,13 @@ export async function fetchResults({ queryString, searchType, searchScope, rankS
         queryString,
         searchType,
     }, searchScope, rankSearchResults);
-    const refNameResults = assembly?.allRefNames
-        ?.filter(ref => ref.toLowerCase().startsWith(queryString.toLowerCase()))
-        .slice(0, 10)
-        .map(r => new BaseResult({ label: r }));
-    return dedupe([...(refNameResults || []), ...(textSearchResults || [])], elt => elt.getId());
+    const refNameResults = [
+        ...new Set(assembly?.allRefNames
+            ?.filter(ref => ref.toLowerCase().startsWith(queryString.toLowerCase()))
+            .map(ref => assembly.getCanonicalRefName(ref) ?? ref)
+            .slice(0, 10)),
+    ].map(r => new BaseResult({ label: r, matchedObject: { refName: r } }));
+    return dedupe([...refNameResults, ...(textSearchResults ?? [])], elt => elt.getId());
 }
 export function splitLast(str, split) {
     const lastIndex = str.lastIndexOf(split);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-linear-genome-view",
-  "version": "4.2.1",
+  "version": "4.3.0",
   "type": "module",
   "description": "JBrowse 2 linear genome view",
   "keywords": [
@@ -22,15 +22,15 @@
   ],
   "dependencies": {
     "@jbrowse/mobx-state-tree": "^5.6.0",
-    "@mui/icons-material": "^7.3.10",
-    "@mui/material": "^7.3.10",
+    "@mui/icons-material": "^7.3.11",
+    "@mui/material": "^7.3.11",
     "@types/file-saver-es": "^2.0.3",
     "copy-to-clipboard": "^3.3.3",
     "file-saver-es": "^2.0.5",
-    "mobx": "^6.15.0",
+    "mobx": "^6.15.3",
     "mobx-react": "^9.2.1",
-    "@jbrowse/core": "^4.2.1",
-    "@jbrowse/product-core": "^4.2.1"
+    "@jbrowse/product-core": "^4.3.0",
+    "@jbrowse/core": "^4.3.0"
   },
   "peerDependencies": {
     "react": ">=18.0.0",