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

package/dist/BaseLinearDisplay/components/Tooltip.js

@@ -40,6 +40,7 @@ const Tooltip = (0, mobx_react_1.observer)(function ({ model, clientMouseCoord,
     const y = clientMouseCoord[1];
     const { refs, floatingStyles, context } = (0, react_2.useFloating)({
         placement: 'right',
+        strategy: 'fixed',
     });
     const clientPoint = (0, react_2.useClientPoint)(context, { x, y });
     const { getFloatingProps } = (0, react_2.useInteractions)([clientPoint]);

package/dist/BaseLinearDisplay/models/serverSideRenderedBlock.js

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

package/dist/BasicTrack/index.d.ts

@@ -1,3 +1,2 @@
 import PluginManager from '@jbrowse/core/PluginManager';
-declare const _default: (pm: PluginManager) => void;
-export default _default;
+export default function BasicTrackF(pm: PluginManager): void;

package/dist/BasicTrack/index.js

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const pluggableElementTypes_1 = require("@jbrowse/core/pluggableElementTypes");
 const configSchema_1 = __importDefault(require("./configSchema"));
-exports.default = (pm) => {
+function BasicTrackF(pm) {
     pm.addTrackType(() => {
         const configSchema = (0, configSchema_1.default)(pm);
         return new pluggableElementTypes_1.TrackType({
@@ -14,4 +14,5 @@ exports.default = (pm) => {
             stateModel: (0, pluggableElementTypes_1.createBaseTrackModel)(pm, 'BasicTrack', configSchema),
         });
     });
-};
+}
+exports.default = BasicTrackF;

package/dist/FeatureTrack/index.d.ts

@@ -1,3 +1,2 @@
 import PluginManager from '@jbrowse/core/PluginManager';
-declare const _default: (pm: PluginManager) => void;
-export default _default;
+export default function FeatureTrackF(pm: PluginManager): void;

package/dist/FeatureTrack/index.js

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const pluggableElementTypes_1 = require("@jbrowse/core/pluggableElementTypes");
 const configSchema_1 = __importDefault(require("./configSchema"));
-exports.default = (pm) => {
+function FeatureTrackF(pm) {
     pm.addTrackType(() => {
         const configSchema = (0, configSchema_1.default)(pm);
         return new pluggableElementTypes_1.TrackType({
@@ -15,4 +15,5 @@ exports.default = (pm) => {
             stateModel: (0, pluggableElementTypes_1.createBaseTrackModel)(pm, 'FeatureTrack', configSchema),
         });
     });
-};
+}
+exports.default = FeatureTrackF;

package/dist/LaunchLinearGenomeView/index.d.ts

@@ -1,3 +1,2 @@
 import PluginManager from '@jbrowse/core/PluginManager';
-declare const _default: (pluginManager: PluginManager) => void;
-export default _default;
+export default function LaunchLinearGenomeViewF(pluginManager: PluginManager): void;

package/dist/LaunchLinearGenomeView/index.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const util_1 = require("@jbrowse/core/util");
 const searchUtils_1 = require("../searchUtils");
-exports.default = (pluginManager) => {
+function LaunchLinearGenomeViewF(pluginManager) {
     pluginManager.addToExtensionPoint('LaunchView-LinearGenomeView', 
     // @ts-expect-error
     async ({ session, assembly, loc, tracks = [], tracklist, nav, highlight, }) => {
@@ -25,11 +25,19 @@ exports.default = (pluginManager) => {
                 view.setHideHeader(!nav);
             }
             if (highlight !== undefined) {
-                const location = (0, util_1.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);
-                }
+                highlight.forEach(async (h) => {
+                    if (h) {
+                        const parsedLocString = (0, util_1.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 (0, searchUtils_1.handleSelectedRegion)({ input: loc, model: view, assembly: asm });
             const idsNotFound = [];
@@ -39,11 +47,12 @@ exports.default = (pluginManager) => {
             }
         }
         catch (e) {
-            session.notify(`${e}`, 'error');
+            session.notifyError(`${e}`, e);
             throw e;
         }
     });
-};
+}
+exports.default = LaunchLinearGenomeViewF;
 function tryTrack(model, trackId, idsNotFound) {
     try {
         model.showTrack(trackId);

package/dist/LinearBareDisplay/index.d.ts

@@ -1,5 +1,4 @@
 import PluginManager from '@jbrowse/core/PluginManager';
-declare const _default: (pluginManager: PluginManager) => void;
-export default _default;
+export default function LinearBareDisplayF(pluginManager: PluginManager): void;
 export { configSchemaFactory } from './configSchema';
 export { stateModelFactory } from './model';

package/dist/LinearBareDisplay/index.js

@@ -6,7 +6,7 @@ const pluggableElementTypes_1 = require("@jbrowse/core/pluggableElementTypes");
 const configSchema_1 = require("./configSchema");
 const model_1 = require("./model");
 const BaseLinearDisplay_1 = require("../BaseLinearDisplay/");
-exports.default = (pluginManager) => {
+function LinearBareDisplayF(pluginManager) {
     pluginManager.addDisplayType(() => {
         const configSchema = (0, configSchema_1.configSchemaFactory)(pluginManager);
         return new pluggableElementTypes_1.DisplayType({
@@ -19,7 +19,8 @@ exports.default = (pluginManager) => {
             ReactComponent: BaseLinearDisplay_1.BaseLinearDisplayComponent,
         });
     });
-};
+}
+exports.default = LinearBareDisplayF;
 var configSchema_2 = require("./configSchema");
 Object.defineProperty(exports, "configSchemaFactory", { enumerable: true, get: function () { return configSchema_2.configSchemaFactory; } });
 var model_2 = require("./model");

package/dist/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/dist/LinearBasicDisplay/index.d.ts

@@ -1,5 +1,4 @@
 import PluginManager from '@jbrowse/core/PluginManager';
-declare const _default: (pluginManager: PluginManager) => void;
-export default _default;
+export default function LinearBasicDisplay(pluginManager: PluginManager): void;
 export { default as modelFactory } from './model';
 export { default as configSchema } from './configSchema';

package/dist/LinearBasicDisplay/index.js

@@ -9,7 +9,7 @@ const BaseLinearDisplay_1 = require("../BaseLinearDisplay");
 // locals
 const configSchema_1 = __importDefault(require("./configSchema"));
 const model_1 = __importDefault(require("./model"));
-exports.default = (pluginManager) => {
+function LinearBasicDisplay(pluginManager) {
     pluginManager.addDisplayType(() => {
         const config = (0, configSchema_1.default)(pluginManager);
         return new pluggableElementTypes_1.DisplayType({
@@ -22,7 +22,8 @@ exports.default = (pluginManager) => {
             ReactComponent: BaseLinearDisplay_1.BaseLinearDisplayComponent,
         });
     });
-};
+}
+exports.default = LinearBasicDisplay;
 var model_2 = require("./model");
 Object.defineProperty(exports, "modelFactory", { enumerable: true, get: function () { return __importDefault(model_2).default; } });
 var configSchema_2 = require("./configSchema");

package/dist/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/dist/LinearGenomeView/components/Cytobands.js

@@ -8,6 +8,7 @@ const mobx_react_1 = require("mobx-react");
 // locals
 const __1 = require("..");
 const util_1 = require("./util");
+const util_2 = require("@jbrowse/core/util");
 // rounded rect from https://stackoverflow.com/a/45889603/2129219
 // prettier-ignore
 function rightRoundedRect(x, y, width, height, radius) {
@@ -68,28 +69,26 @@ const Cytobands = (0, mobx_react_1.observer)(function ({ overview, block, assemb
         const e = overview.bpToPx({ refName, coord: end }) || 0;
         const l = Math.min(s, e);
         const w = Math.abs(e - s);
-        const c = colorMap[type];
+        const c = colorMap[type] || 'black';
         if (type === 'acen' && !centromereSeen) {
             centromereSeen = true; // the next acen entry is drawn with different right triangle
-            const tri = reversed
-                ? rightTriangle(s - w, 0, w, h)
-                : leftTriangle(s, 0, w, h);
-            return react_1.default.createElement("polygon", { key: k, points: tri, fill: c });
+            return (react_1.default.createElement("polygon", { key: k, points: reversed
+                    ? rightTriangle(s - w, 0, w, h)
+                    : leftTriangle(s, 0, w, h), ...(0, util_2.getFillProps)(c) }));
         }
         else if (type === 'acen' && centromereSeen) {
-            const tri = reversed
-                ? leftTriangle(s - w, 0, w, h)
-                : rightTriangle(s, 0, w, h);
-            return react_1.default.createElement("polygon", { key: k, points: tri, fill: c });
+            return (react_1.default.createElement("polygon", { key: k, points: reversed
+                    ? leftTriangle(s - w, 0, w, h)
+                    : rightTriangle(s, 0, w, h), ...(0, util_2.getFillProps)(c) }));
         }
         else if (lcap === index) {
-            return react_1.default.createElement("path", { key: k, d: leftRoundedRect(l, 0, w, h, 8), fill: c });
+            return (react_1.default.createElement("path", { key: k, d: leftRoundedRect(l, 0, w, h, 8), ...(0, util_2.getFillProps)(c) }));
         }
         else if (rcap === index) {
-            return react_1.default.createElement("path", { key: k, d: rightRoundedRect(l, 0, w, h, 8), fill: c });
+            return (react_1.default.createElement("path", { key: k, d: rightRoundedRect(l, 0, w, h, 8), ...(0, util_2.getFillProps)(c) }));
         }
         else {
-            return react_1.default.createElement("rect", { key: k, x: l, y: 0, width: w, height: h, fill: c });
+            return (react_1.default.createElement("rect", { key: k, x: l, y: 0, width: w, height: h, ...(0, util_2.getFillProps)(c) }));
         }
     })));
 });

package/dist/LinearGenomeView/components/ExportSvgDialog.js

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

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

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

package/dist/LinearGenomeView/components/Highlight.js

@@ -38,28 +38,28 @@ const Link_1 = __importDefault(require("@mui/icons-material/Link"));
 const Close_1 = __importDefault(require("@mui/icons-material/Close"));
 const Bookmark_1 = __importDefault(require("@mui/icons-material/Bookmark"));
 const useStyles = (0, mui_1.makeStyles)()(theme => {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b;
     return ({
         highlight: {
             height: '100%',
             position: 'absolute',
-            background: `${(0, colord_1.colord)((_b = (_a = theme.palette.quaternary) === null || _a === void 0 ? void 0 : _a.main) !== null && _b !== void 0 ? _b : 'goldenrod')
+            overflow: 'hidden',
+            background: `${(0, colord_1.colord)((_b = (_a = theme.palette.highlight) === null || _a === void 0 ? void 0 : _a.main) !== null && _b !== void 0 ? _b : 'goldenrod')
                 .alpha(0.35)
                 .toRgbString()}`,
-            borderLeft: `1px solid ${(_d = (_c = theme.palette.quaternary) === null || _c === void 0 ? void 0 : _c.main) !== null && _d !== void 0 ? _d : 'goldenrod'}`,
-            borderRight: `1px solid ${(_f = (_e = theme.palette.quaternary) === null || _e === void 0 ? void 0 : _e.main) !== null && _f !== void 0 ? _f : 'goldenrod'}`,
         },
     });
 });
-const Highlight = (0, mobx_react_1.observer)(function Highlight({ model }) {
-    var _a, _b;
+const Highlight = (0, mobx_react_1.observer)(function Highlight({ model, highlight, }) {
+    var _a, _b, _c;
     const { classes } = useStyles();
     const [open, setOpen] = (0, react_1.useState)(false);
     const anchorEl = (0, react_1.useRef)(null);
-    const color = (_b = (_a = (0, material_1.useTheme)().palette.quaternary) === null || _a === void 0 ? void 0 : _a.main) !== null && _b !== void 0 ? _b : 'goldenrod';
+    const color = (_b = (_a = (0, material_1.useTheme)().palette.highlight) === null || _a === void 0 ? void 0 : _a.main) !== null && _b !== void 0 ? _b : 'goldenrod';
     const session = (0, util_1.getSession)(model);
+    const { assemblyManager } = session;
     const dismissHighlight = () => {
-        model.setHighlight(undefined);
+        model.removeHighlight(highlight);
     };
     const menuItems = [
         {
@@ -76,7 +76,7 @@ const Highlight = (0, mobx_react_1.observer)(function Highlight({ model }) {
                     bookmarkWidget = session.addWidget('GridBookmarkWidget', 'GridBookmark');
                 }
                 // @ts-ignore
-                bookmarkWidget.addBookmark(model.highlight);
+                bookmarkWidget.addBookmark(highlight);
                 dismissHighlight();
             },
         },
@@ -84,9 +84,6 @@ const Highlight = (0, mobx_react_1.observer)(function Highlight({ model }) {
     function handleClose() {
         setOpen(false);
     }
-    if (!model.highlight) {
-        return null;
-    }
     // coords
     const mapCoords = (r) => {
         const s = model.bpToPx({
@@ -104,19 +101,26 @@ const Highlight = (0, mobx_react_1.observer)(function Highlight({ model }) {
             }
             : undefined;
     };
-    const h = mapCoords(model.highlight);
-    return (react_1.default.createElement(react_1.default.Fragment, null, h ? (react_1.default.createElement("div", { className: classes.highlight, style: {
+    const asm = assemblyManager.get(highlight === null || highlight === void 0 ? void 0 : highlight.assemblyName);
+    const h = mapCoords({
+        ...highlight,
+        refName: (_c = asm === null || asm === void 0 ? void 0 : asm.getCanonicalRefName(highlight.refName)) !== null && _c !== void 0 ? _c : highlight.refName,
+    });
+    return h ? (react_1.default.createElement("div", { className: classes.highlight, style: {
             left: h.left,
             width: h.width,
         } },
         react_1.default.createElement(material_1.Tooltip, { title: 'Highlighted from URL parameter', arrow: true },
-            react_1.default.createElement(material_1.IconButton, { ref: anchorEl, onClick: () => setOpen(true) },
+            react_1.default.createElement(material_1.IconButton, { ref: anchorEl, onClick: () => setOpen(true), style: { zIndex: 3 } },
                 react_1.default.createElement(Link_1.default, { fontSize: "small", sx: {
                         color: `${(0, colord_1.colord)(color).darken(0.2).toRgbString()}`,
                     } }))),
         react_1.default.createElement(ui_1.Menu, { anchorEl: anchorEl.current, onMenuItemClick: (_event, callback) => {
                 callback(session);
                 handleClose();
-            }, open: open, onClose: handleClose, menuItems: menuItems }))) : null));
+            }, open: open, onClose: handleClose, menuItems: menuItems }))) : null;
+});
+const HighlightGroup = (0, mobx_react_1.observer)(function HighlightGroup({ model, }) {
+    return model.highlight.map((highlight, idx) => (react_1.default.createElement(Highlight, { key: JSON.stringify(highlight) + '-' + idx, model: model, highlight: highlight })));
 });
-exports.default = Highlight;
+exports.default = HighlightGroup;

package/dist/LinearGenomeView/components/MiniControls.js

@@ -6,13 +6,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const mobx_react_1 = require("mobx-react");
 const material_1 = require("@mui/material");
+const CascadingMenuButton_1 = __importDefault(require("@jbrowse/core/ui/CascadingMenuButton"));
+const mui_1 = require("tss-react/mui");
+const util_1 = require("@jbrowse/core/util");
 // icons
 const ZoomIn_1 = __importDefault(require("@mui/icons-material/ZoomIn"));
 const ZoomOut_1 = __importDefault(require("@mui/icons-material/ZoomOut"));
 const KeyboardArrowDown_1 = __importDefault(require("@mui/icons-material/KeyboardArrowDown"));
-const CascadingMenuButton_1 = __importDefault(require("@jbrowse/core/ui/CascadingMenuButton"));
-const mui_1 = require("tss-react/mui");
-const util_1 = require("@jbrowse/core/util");
 const useStyles = (0, mui_1.makeStyles)()(theme => ({
     background: {
         position: 'absolute',
@@ -21,22 +21,20 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
         background: theme.palette.background.paper,
     },
     focusedBackground: {
-        background: theme.palette.secondary.light,
-        svg: {
-            fill: theme.palette.secondary.contrastText,
-        },
+        background: (0, material_1.alpha)(theme.palette.secondary.light, 0.2),
     },
 }));
 const MiniControls = (0, mobx_react_1.observer)(function ({ model, }) {
-    const { classes, cx } = useStyles();
+    const { classes } = useStyles();
     const { id, bpPerPx, maxBpPerPx, minBpPerPx, scaleFactor, hideHeader } = model;
     const { focusedViewId } = (0, util_1.getSession)(model);
-    return hideHeader ? (react_1.default.createElement(material_1.Paper, { className: cx(classes.background, focusedViewId === id ? classes.focusedBackground : undefined) },
-        react_1.default.createElement(CascadingMenuButton_1.default, { menuItems: model.menuItems() },
-            react_1.default.createElement(KeyboardArrowDown_1.default, { fontSize: "small" })),
-        react_1.default.createElement(material_1.IconButton, { "data-testid": "zoom_out", onClick: () => model.zoom(bpPerPx * 2), disabled: bpPerPx >= maxBpPerPx - 0.0001 || scaleFactor !== 1 },
-            react_1.default.createElement(ZoomOut_1.default, { fontSize: "small" })),
-        react_1.default.createElement(material_1.IconButton, { "data-testid": "zoom_in", onClick: () => model.zoom(bpPerPx / 2), disabled: bpPerPx <= minBpPerPx + 0.0001 || scaleFactor !== 1 },
-            react_1.default.createElement(ZoomIn_1.default, { fontSize: "small" })))) : null;
+    return hideHeader ? (react_1.default.createElement(material_1.Paper, { className: classes.background },
+        react_1.default.createElement(material_1.Paper, { className: focusedViewId === id ? classes.focusedBackground : undefined },
+            react_1.default.createElement(CascadingMenuButton_1.default, { menuItems: model.menuItems() },
+                react_1.default.createElement(KeyboardArrowDown_1.default, { fontSize: "small" })),
+            react_1.default.createElement(material_1.IconButton, { "data-testid": "zoom_out", onClick: () => model.zoom(bpPerPx * 2), disabled: bpPerPx >= maxBpPerPx - 0.0001 || scaleFactor !== 1 },
+                react_1.default.createElement(ZoomOut_1.default, { fontSize: "small" })),
+            react_1.default.createElement(material_1.IconButton, { "data-testid": "zoom_in", onClick: () => model.zoom(bpPerPx / 2), disabled: bpPerPx <= minBpPerPx + 0.0001 || scaleFactor !== 1 },
+                react_1.default.createElement(ZoomIn_1.default, { fontSize: "small" }))))) : null;
 });
 exports.default = MiniControls;

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

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

package/dist/LinearGenomeView/components/OverviewHighlight.js

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

package/dist/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;