@jbrowse/plugin-linear-genome-view 3.6.5 → 3.7.0

package/dist/LinearGenomeView/components/useRangeSelect.js

@@ -9,6 +9,11 @@ function useRangeSelect(ref, model, shiftOnly) {
     const [anchorPosition, setAnchorPosition] = (0, react_1.useState)();
     const [guideX, setGuideX] = (0, react_1.useState)();
     const mouseDragging = startX !== undefined && anchorPosition === undefined;
+    const handleClose = (0, react_1.useCallback)(() => {
+        setAnchorPosition(undefined);
+        setStartX(undefined);
+        setCurrentX(undefined);
+    }, []);
     (0, react_1.useEffect)(() => {
         function computeOffsets(offsetX) {
             if (startX === undefined) {
@@ -31,6 +36,10 @@ function useRangeSelect(ref, model, shiftOnly) {
             if (startX !== undefined && ref.current) {
                 const { clientX, clientY } = event;
                 const offsetX = (0, util_1.getRelativeX)(event, ref.current);
+                if (Math.abs(offsetX - startX) <= 3) {
+                    handleClose();
+                    return;
+                }
                 setAnchorPosition({
                     offsetX,
                     clientX,
@@ -52,15 +61,7 @@ function useRangeSelect(ref, model, shiftOnly) {
             };
         }
         return () => { };
-    }, [startX, mouseDragging, model, ref]);
-    (0, react_1.useEffect)(() => {
-        if (!mouseDragging &&
-            currentX !== undefined &&
-            startX !== undefined &&
-            Math.abs(currentX - startX) <= 3) {
-            handleClose();
-        }
-    }, [mouseDragging, currentX, startX]);
+    }, [startX, mouseDragging, model, ref, handleClose]);
     function mouseDown(event) {
         if (shiftOnly && !event.shiftKey) {
             return;
@@ -87,11 +88,6 @@ function useRangeSelect(ref, model, shiftOnly) {
     function mouseOut() {
         setGuideX(undefined);
     }
-    function handleClose() {
-        setAnchorPosition(undefined);
-        setStartX(undefined);
-        setCurrentX(undefined);
-    }
     function handleMenuItemClick(_, callback) {
         callback();
         handleClose();

package/dist/LinearGenomeView/model.js

@@ -687,7 +687,7 @@ function stateModelFactory(pluginManager) {
                     onClick: self.horizontallyFlip,
                 },
                 {
-                    label: 'Color by CDS',
+                    label: 'Color by CDS and draw amino acids',
                     type: 'checkbox',
                     checked: self.colorByCDS,
                     icon: Palette_1.default,

package/dist/LinearGenomeView/util.js

@@ -9,7 +9,7 @@ const util_1 = require("@jbrowse/core/util");
 function chooseGridPitch(scale, minMajorPitchPx, minMinorPitchPx) {
     scale = Math.abs(scale);
     const minMajorPitchBp = minMajorPitchPx * scale;
-    const majorMagnitude = Number.parseInt(Number(minMajorPitchBp).toExponential().split(/e/i)[1], 10);
+    const majorMagnitude = +minMajorPitchBp.toExponential().split(/e/i)[1];
     let majorPitch = 10 ** majorMagnitude;
     while (majorPitch < minMajorPitchBp) {
         majorPitch *= 2;

package/dist/index.d.ts

@@ -176,6 +176,7 @@ export default class LinearGenomeViewPlugin extends Plugin {
             regionCannotBeRenderedText(_region: import("@jbrowse/core/util").Region): "" | "Force load to see features";
             regionCannotBeRendered(_region: import("@jbrowse/core/util").Region): import("react/jsx-runtime").JSX.Element | null;
         } & {
+            mouseoverExtraInformation: string | undefined;
             featureIdUnderMouse: undefined | string;
             contextMenuFeature: undefined | import("@jbrowse/core/util").Feature;
         } & {
@@ -190,9 +191,22 @@ export default class LinearGenomeViewPlugin extends Plugin {
         } & {
             readonly features: import("@jbrowse/core/util/compositeMap").default<string, import("@jbrowse/core/util").Feature>;
             readonly featureUnderMouse: import("@jbrowse/core/util").Feature | undefined;
+            readonly layoutFeatures: import("@jbrowse/core/util/compositeMap").default<string, [number, number, number, number] | [number, number, number, number, {
+                label?: string;
+                description?: string;
+                refName: string;
+            }]>;
             getFeatureOverlapping(blockKey: string, x: number, y: number): string | undefined;
-            getFeatureByID(blockKey: string, id: string): [number, number, number, number] | undefined;
-            searchFeatureByID(id: string): [number, number, number, number] | undefined;
+            getFeatureByID(blockKey: string, id: string): ([number, number, number, number] | [number, number, number, number, {
+                label?: string;
+                description?: string;
+                refName: string;
+            }]) | undefined;
+            searchFeatureByID(id: string): ([number, number, number, number] | [number, number, number, number, {
+                label?: string;
+                description?: string;
+                refName: string;
+            }]) | undefined;
         } & {
             addBlock(key: string, block: import("@jbrowse/core/util/blockTypes").BaseBlock): void;
             deleteBlock(key: string): void;
@@ -201,6 +215,7 @@ export default class LinearGenomeViewPlugin extends Plugin {
             clearFeatureSelection(): void;
             setFeatureIdUnderMouse(feature?: string): void;
             setContextMenuFeature(feature?: import("@jbrowse/core/util").Feature): void;
+            setMouseoverExtraInformation(extra?: string): void;
         } & {
             reload(): Promise<void>;
         } & {

package/esm/BaseLinearDisplay/components/BaseLinearDisplay.d.ts

@@ -1,4 +1,4 @@
-import type { BaseLinearDisplayModel } from '../models/BaseLinearDisplayModel';
+import type { BaseLinearDisplayModel } from '../model';
 declare const BaseLinearDisplay: (props: {
     model: BaseLinearDisplayModel;
     children?: React.ReactNode;

package/esm/BaseLinearDisplay/components/BaseLinearDisplay.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Suspense, useRef, useState } from 'react';
 import { getConf } from '@jbrowse/core/configuration';
-import { Menu } from '@jbrowse/core/ui';
 import { observer } from 'mobx-react';
 import { makeStyles } from 'tss-react/mui';
 import LinearBlocks from './LinearBlocks';
+import MenuPage from './MenuPage';
 const useStyles = makeStyles()({
     display: {
         position: 'relative',
@@ -23,8 +23,6 @@ const BaseLinearDisplay = observer(function (props) {
     const [contextCoord, setContextCoord] = useState();
     const { model, children } = props;
     const { TooltipComponent, DisplayMessageComponent, height } = model;
-    const items = model.contextMenuItems();
-    const open = Boolean(contextCoord) && items.length > 0;
     return (_jsxs("div", { ref: ref, "data-testid": `display-${getConf(model, 'displayId')}`, className: classes.display, onContextMenu: event => {
             event.preventDefault();
             if (contextCoord) {
@@ -42,22 +40,9 @@ const BaseLinearDisplay = observer(function (props) {
             setOffsetMouseCoord([event.clientX - left, event.clientY - top]);
             setClientMouseCoord([event.clientX, event.clientY]);
             setClientRect(rect);
-        }, children: [DisplayMessageComponent ? (_jsx(DisplayMessageComponent, { model: model })) : (_jsx(LinearBlocks, { ...props })), children, _jsx(Suspense, { fallback: null, children: _jsx(TooltipComponent, { model: model, height: height, offsetMouseCoord: offsetMouseCoord, clientMouseCoord: clientMouseCoord, clientRect: clientRect, mouseCoord: offsetMouseCoord }) }), open ? (_jsx(Menu, { open: true, onMenuItemClick: (_, callback) => {
-                    callback();
+        }, children: [DisplayMessageComponent ? (_jsx(DisplayMessageComponent, { model: model })) : (_jsx(LinearBlocks, { ...props })), children, _jsx(Suspense, { fallback: null, children: _jsx(TooltipComponent, { model: model, height: height, offsetMouseCoord: offsetMouseCoord, clientMouseCoord: clientMouseCoord, clientRect: clientRect, mouseCoord: offsetMouseCoord }) }), contextCoord ? (_jsx(MenuPage, { contextCoord: contextCoord, model: model, onClose: () => {
                     setContextCoord(undefined);
-                }, onClose: () => {
-                    setContextCoord(undefined);
-                    model.setContextMenuFeature(undefined);
-                }, slotProps: {
-                    transition: {
-                        onExit: () => {
-                            setContextCoord(undefined);
-                            model.setContextMenuFeature(undefined);
-                        },
-                    },
-                }, anchorReference: "anchorPosition", anchorPosition: contextCoord
-                    ? { top: contextCoord[1], left: contextCoord[0] }
-                    : undefined, menuItems: items })) : null] }));
+                } })) : null] }));
 });
 export default BaseLinearDisplay;
 export { default as Tooltip } from './Tooltip';

package/esm/BaseLinearDisplay/components/BlockMsg.js

@@ -13,5 +13,7 @@ export default function BlockMsg({ message, severity, action, }) {
             message: classes.ellipses,
         }, onMouseDown: event => {
             event.stopPropagation();
+        }, onClick: event => {
+            event.stopPropagation();
         }, children: _jsx(Tooltip, { title: message, children: _jsx("div", { children: message }) }) }));
 }

package/esm/BaseLinearDisplay/components/LinearBlocks.d.ts

@@ -1,8 +1,4 @@
-import type { BaseLinearDisplayModel } from '../models/BaseLinearDisplayModel';
-declare const RenderedBlocks: ({ model, }: {
-    model: BaseLinearDisplayModel;
-}) => import("react/jsx-runtime").JSX.Element;
-export { RenderedBlocks };
+import type { BaseLinearDisplayModel } from '../model';
 declare const LinearBlocks: ({ model, }: {
     model: BaseLinearDisplayModel;
 }) => import("react/jsx-runtime").JSX.Element;

package/esm/BaseLinearDisplay/components/LinearBlocks.js

@@ -1,8 +1,8 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { getContainingView } from '@jbrowse/core/util';
 import { observer } from 'mobx-react';
 import { makeStyles } from 'tss-react/mui';
-import { ContentBlock as ContentBlockComponent, ElidedBlock as ElidedBlockComponent, InterRegionPaddingBlock as InterRegionPaddingBlockComponent, } from './Block';
+import RenderedBlocks from './RenderedBlocks';
 const useStyles = makeStyles()({
     linearBlocks: {
         whiteSpace: 'nowrap',
@@ -11,42 +11,7 @@ const useStyles = makeStyles()({
         minHeight: '100%',
         display: 'flex',
     },
-    heightOverflowed: {
-        position: 'absolute',
-        color: 'rgb(77,77,77)',
-        borderBottom: '2px solid rgb(77,77,77)',
-        textShadow: 'white 0px 0px 1px',
-        whiteSpace: 'nowrap',
-        width: '100%',
-        fontWeight: 'bold',
-        textAlign: 'center',
-        zIndex: 999,
-        boxSizing: 'border-box',
-    },
-});
-const RenderedBlocks = observer(function ({ model, }) {
-    const { classes } = useStyles();
-    const { blockDefinitions, blockState } = model;
-    return (_jsx(_Fragment, { children: blockDefinitions.map(block => {
-            const key = `${model.id}-${block.key}`;
-            if (block.type === 'ContentBlock') {
-                const state = blockState.get(block.key);
-                return (_jsxs(ContentBlockComponent, { block: block, children: [(state === null || state === void 0 ? void 0 : state.ReactComponent) ? (_jsx(state.ReactComponent, { model: state })) : null, (state === null || state === void 0 ? void 0 : state.maxHeightReached) ? (_jsx("div", { className: classes.heightOverflowed, style: {
-                                top: state.layout.getTotalHeight() - 16,
-                                pointerEvents: 'none',
-                                height: 16,
-                            }, children: "Max height reached" })) : null] }, key));
-            }
-            if (block.type === 'ElidedBlock') {
-                return _jsx(ElidedBlockComponent, { width: block.widthPx }, key);
-            }
-            if (block.type === 'InterRegionPaddingBlock') {
-                return (_jsx(InterRegionPaddingBlockComponent, { width: block.widthPx, style: { background: 'none' }, boundary: block.variant === 'boundary' }, key));
-            }
-            throw new Error(`invalid block type ${JSON.stringify(block)}`);
-        }) }));
 });
-export { RenderedBlocks };
 const LinearBlocks = observer(function ({ model, }) {
     const { classes } = useStyles();
     const { blockDefinitions } = model;

package/esm/BaseLinearDisplay/components/MaxHeightReachedIndicator.d.ts

@@ -0,0 +1,3 @@
+export default function MaxHeightReached({ top }: {
+    top: number;
+}): import("react/jsx-runtime").JSX.Element;

package/esm/BaseLinearDisplay/components/MaxHeightReachedIndicator.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { makeStyles } from 'tss-react/mui';
+const useStyles = makeStyles()({
+    heightOverflowed: {
+        position: 'absolute',
+        color: 'rgb(77,77,77)',
+        borderBottom: '2px solid rgb(77,77,77)',
+        textShadow: 'white 0px 0px 1px',
+        whiteSpace: 'nowrap',
+        width: '100%',
+        fontWeight: 'bold',
+        textAlign: 'center',
+        zIndex: 999,
+        boxSizing: 'border-box',
+    },
+});
+export default function MaxHeightReached({ top }) {
+    const { classes } = useStyles();
+    return (_jsx("div", { className: classes.heightOverflowed, style: {
+            top,
+            pointerEvents: 'none',
+            height: 16,
+        }, children: "Max height reached" }));
+}

package/esm/BaseLinearDisplay/components/MenuPage.d.ts

@@ -0,0 +1,8 @@
+import type { Coord } from './types';
+import type { BaseLinearDisplayModel } from '../model';
+declare const MenuPage: ({ onClose, contextCoord, model, }: {
+    model: BaseLinearDisplayModel;
+    contextCoord: Coord;
+    onClose: () => void;
+}) => import("react/jsx-runtime").JSX.Element;
+export default MenuPage;

package/esm/BaseLinearDisplay/components/MenuPage.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Menu } from '@jbrowse/core/ui';
+import { observer } from 'mobx-react';
+const MenuPage = observer(function ({ onClose, contextCoord, model, }) {
+    const items = model.contextMenuItems();
+    return (_jsx(Menu, { open: items.length > 0, onMenuItemClick: (_, callback) => {
+            callback();
+            onClose();
+        }, onClose: () => {
+            onClose();
+            model.setContextMenuFeature(undefined);
+        }, slotProps: {
+            transition: {
+                onExit: () => {
+                    onClose();
+                    model.setContextMenuFeature(undefined);
+                },
+            },
+        }, anchorReference: "anchorPosition", anchorPosition: {
+            top: contextCoord[1],
+            left: contextCoord[0],
+        }, menuItems: items }));
+});
+export default MenuPage;

package/esm/BaseLinearDisplay/components/RenderedBlocks.d.ts

@@ -0,0 +1,9 @@
+import type { BlockSet } from '@jbrowse/core/util/blockTypes';
+declare const RenderedBlocks: ({ model, }: {
+    model: {
+        id: string;
+        blockDefinitions: BlockSet;
+        blockState: any;
+    };
+}) => import("react/jsx-runtime").JSX.Element[];
+export default RenderedBlocks;

package/esm/BaseLinearDisplay/components/RenderedBlocks.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { observer } from 'mobx-react';
+import { ContentBlock as ContentBlockComponent, ElidedBlock as ElidedBlockComponent, InterRegionPaddingBlock as InterRegionPaddingBlockComponent, } from './Block';
+import MaxHeightReached from './MaxHeightReachedIndicator';
+const RenderedBlocks = observer(function ({ model, }) {
+    const { blockDefinitions, blockState } = model;
+    return blockDefinitions.map(block => {
+        const key = `${model.id}-${block.key}`;
+        if (block.type === 'ContentBlock') {
+            const state = blockState.get(block.key);
+            return (_jsxs(ContentBlockComponent, { block: block, children: [(state === null || state === void 0 ? void 0 : state.ReactComponent) ? (_jsx(state.ReactComponent, { model: state })) : null, (state === null || state === void 0 ? void 0 : state.maxHeightReached) ? (_jsx(MaxHeightReached, { top: state.layout.getTotalHeight() - 16 })) : null] }, key));
+        }
+        else if (block.type === 'ElidedBlock') {
+            return _jsx(ElidedBlockComponent, { width: block.widthPx }, key);
+        }
+        else if (block.type === 'InterRegionPaddingBlock') {
+            return (_jsx(InterRegionPaddingBlockComponent, { width: block.widthPx, style: { background: 'none' }, boundary: block.variant === 'boundary' }, key));
+        }
+        throw new Error(`invalid block type ${JSON.stringify(block)}`);
+    });
+});
+export default RenderedBlocks;

package/esm/BaseLinearDisplay/components/Tooltip.d.ts

@@ -4,6 +4,7 @@ type Coord = [number, number];
 declare const Tooltip: ({ model, clientMouseCoord, }: {
     model: {
         featureUnderMouse: Feature | undefined;
+        mouseoverExtraInformation: string | undefined;
         configuration: AnyConfigurationModel;
     };
     clientMouseCoord: Coord;

package/esm/BaseLinearDisplay/components/Tooltip.js

@@ -8,11 +8,14 @@ const TooltipContents = forwardRef(function TooltipContents2({ message }, ref) {
     return (_jsx("div", { ref: ref, children: isValidElement(message) ? (message) : message ? (_jsx(SanitizedHTML, { html: String(message) })) : null }));
 });
 const Tooltip = observer(function ({ model, clientMouseCoord, }) {
-    const { featureUnderMouse } = model;
+    const { featureUnderMouse, mouseoverExtraInformation } = model;
     const x = clientMouseCoord[0] + 15;
     const y = clientMouseCoord[1];
     const contents = featureUnderMouse
-        ? getConf(model, 'mouseover', { feature: featureUnderMouse })
+        ? getConf(model, 'mouseover', {
+            feature: featureUnderMouse,
+            mouseoverExtraInformation,
+        })
         : undefined;
     return featureUnderMouse && contents ? (_jsx(BaseTooltip, { clientPoint: { x, y }, children: _jsx(TooltipContents, { message: contents }) })) : null;
 });

package/esm/BaseLinearDisplay/components/types.d.ts

@@ -0,0 +1 @@
+export type Coord = [number, number];

package/esm/BaseLinearDisplay/components/types.js

@@ -0,0 +1 @@
+export {};

package/esm/BaseLinearDisplay/index.d.ts

@@ -1,7 +1,7 @@
 export { default as baseLinearDisplayConfigSchema } from './models/configSchema';
 export type { BlockModel } from './models/serverSideRenderedBlock';
-export { BaseLinearDisplay } from './models/BaseLinearDisplayModel';
-export type { BaseLinearDisplayModel, BaseLinearDisplayStateModel, ExportSvgDisplayOptions, } from './models/BaseLinearDisplayModel';
+export { BaseLinearDisplay } from './model';
+export type { BaseLinearDisplayModel, BaseLinearDisplayStateModel, ExportSvgDisplayOptions, } from './model';
 export { BlockMsg, Tooltip, default as BaseLinearDisplayComponent, } from './components/BaseLinearDisplay';
 export { default as TrackHeightMixin } from './models/TrackHeightMixin';
 export { default as FeatureDensityMixin } from './models/FeatureDensityMixin';

package/esm/BaseLinearDisplay/index.js

@@ -1,5 +1,5 @@
 export { default as baseLinearDisplayConfigSchema } from './models/configSchema';
-export { BaseLinearDisplay } from './models/BaseLinearDisplayModel';
+export { BaseLinearDisplay } from './model';
 export { BlockMsg, Tooltip, default as BaseLinearDisplayComponent, } from './components/BaseLinearDisplay';
 export { default as TrackHeightMixin } from './models/TrackHeightMixin';
 export { default as FeatureDensityMixin } from './models/FeatureDensityMixin';

package/esm/BaseLinearDisplay/{models/BaseLinearDisplayModel.d.ts → model.d.ts}

@@ -1,6 +1,6 @@
 import type React from 'react';
 import CompositeMap from '@jbrowse/core/util/compositeMap';
-import type { ExportSvgOptions } from '../../LinearGenomeView/types';
+import type { ExportSvgOptions } from '../LinearGenomeView/types';
 import type { MenuItem } from '@jbrowse/core/ui';
 import type { AnyReactComponentType, Feature } from '@jbrowse/core/util';
 import type { BaseBlock } from '@jbrowse/core/util/blockTypes';
@@ -13,7 +13,17 @@ export interface Layout {
     maxY: number;
     name: string;
 }
-type LayoutRecord = [number, number, number, number];
+type LayoutRecord = [number, number, number, number] | [
+    number,
+    number,
+    number,
+    number,
+    {
+        label?: string;
+        description?: string;
+        refName: string;
+    }
+];
 export interface ExportSvgDisplayOptions extends ExportSvgOptions {
     overrideHeight: number;
     theme: ThemeOptions;
@@ -61,7 +71,7 @@ export declare const BaseLinearDisplay: import("mobx-state-tree").IModelType<{
         setStatus(message: string): void;
         setLoading(newStopToken: string): void;
         setMessage(messageText: string): void;
-        setRendered(props: import("./serverSideRenderedBlock").RenderedProps | undefined): void;
+        setRendered(props: import("./models/serverSideRenderedBlock").RenderedProps | undefined): void;
         setError(error: unknown): void;
         reload(): void;
         beforeDestroy(): void;
@@ -187,6 +197,7 @@ export declare const BaseLinearDisplay: import("mobx-state-tree").IModelType<{
     regionCannotBeRenderedText(_region: import("@jbrowse/core/util").Region): "" | "Force load to see features";
     regionCannotBeRendered(_region: import("@jbrowse/core/util").Region): import("react/jsx-runtime").JSX.Element | null;
 } & {
+    mouseoverExtraInformation: string | undefined;
     featureIdUnderMouse: undefined | string;
     contextMenuFeature: undefined | Feature;
 } & {
@@ -201,6 +212,7 @@ export declare const BaseLinearDisplay: import("mobx-state-tree").IModelType<{
 } & {
     readonly features: CompositeMap<string, Feature>;
     readonly featureUnderMouse: Feature | undefined;
+    readonly layoutFeatures: CompositeMap<string, LayoutRecord>;
     getFeatureOverlapping(blockKey: string, x: number, y: number): string | undefined;
     getFeatureByID(blockKey: string, id: string): LayoutRecord | undefined;
     searchFeatureByID(id: string): LayoutRecord | undefined;
@@ -212,6 +224,7 @@ export declare const BaseLinearDisplay: import("mobx-state-tree").IModelType<{
     clearFeatureSelection(): void;
     setFeatureIdUnderMouse(feature?: string): void;
     setContextMenuFeature(feature?: Feature): void;
+    setMouseoverExtraInformation(extra?: string): void;
 } & {
     reload(): Promise<void>;
 } & {
@@ -264,7 +277,7 @@ export declare const BaseLinearDisplay: import("mobx-state-tree").IModelType<{
         setStatus(message: string): void;
         setLoading(newStopToken: string): void;
         setMessage(messageText: string): void;
-        setRendered(props: import("./serverSideRenderedBlock").RenderedProps | undefined): void;
+        setRendered(props: import("./models/serverSideRenderedBlock").RenderedProps | undefined): void;
         setError(error: unknown): void;
         reload(): void;
         beforeDestroy(): void;

package/esm/BaseLinearDisplay/{models/BaseLinearDisplayModel.js → model.js}

@@ -10,11 +10,11 @@ import MenuOpenIcon from '@mui/icons-material/MenuOpen';
 import copy from 'copy-to-clipboard';
 import { autorun } from 'mobx';
 import { addDisposer, isAlive, types } from 'mobx-state-tree';
-import FeatureDensityMixin from './FeatureDensityMixin';
-import TrackHeightMixin from './TrackHeightMixin';
-import configSchema from './configSchema';
-import BlockState from './serverSideRenderedBlock';
-const Tooltip = lazy(() => import('../components/Tooltip'));
+import FeatureDensityMixin from './models/FeatureDensityMixin';
+import TrackHeightMixin from './models/TrackHeightMixin';
+import configSchema from './models/configSchema';
+import BlockState from './models/serverSideRenderedBlock';
+const Tooltip = lazy(() => import('./components/Tooltip'));
 function stateModelFactory() {
     return types
         .compose('BaseLinearDisplay', BaseDisplay, TrackHeightMixin(), FeatureDensityMixin(), types.model({
@@ -22,6 +22,7 @@ function stateModelFactory() {
         configuration: ConfigurationReference(configSchema),
     }))
         .volatile(() => ({
+        mouseoverExtraInformation: undefined,
         featureIdUnderMouse: undefined,
         contextMenuFeature: undefined,
     }))
@@ -77,6 +78,15 @@ function stateModelFactory() {
             const feat = self.featureIdUnderMouse;
             return feat ? this.features.get(feat) : undefined;
         },
+        get layoutFeatures() {
+            const featureMaps = [];
+            for (const block of self.blockState.values()) {
+                if (block.layout) {
+                    featureMaps.push(block.layout.rectangles);
+                }
+            }
+            return new CompositeMap(featureMaps);
+        },
         getFeatureOverlapping(blockKey, x, y) {
             var _a, _b;
             return (_b = (_a = self.blockState.get(blockKey)) === null || _a === void 0 ? void 0 : _a.layout) === null || _b === void 0 ? void 0 : _b.getByCoord(x, y);
@@ -154,6 +164,9 @@ function stateModelFactory() {
         setContextMenuFeature(feature) {
             self.contextMenuFeature = feature;
         },
+        setMouseoverExtraInformation(extra) {
+            self.mouseoverExtraInformation = extra;
+        },
     }))
         .actions(self => {
         const { reload: superReload } = self;
@@ -231,11 +244,13 @@ function stateModelFactory() {
                         self.setContextMenuFeature(self.features.get(f));
                     }
                 },
-                onMouseMove(_, featureId) {
+                onMouseMove(_, featureId, extra) {
                     self.setFeatureIdUnderMouse(featureId);
+                    self.setMouseoverExtraInformation(extra);
                 },
                 onMouseLeave(_) {
                     self.setFeatureIdUnderMouse(undefined);
+                    self.setMouseoverExtraInformation(undefined);
                 },
                 onContextMenu() {
                     self.setContextMenuFeature(undefined);
@@ -246,7 +261,7 @@ function stateModelFactory() {
     }))
         .actions(self => ({
         async renderSvg(opts) {
-            const { renderBaseLinearDisplaySvg } = await import('./renderSvg');
+            const { renderBaseLinearDisplaySvg } = await import('./models/renderSvg');
             return renderBaseLinearDisplaySvg(self, opts);
         },
         afterAttach() {

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

@@ -1,2 +1,2 @@
-import type { BaseLinearDisplayModel } from './BaseLinearDisplayModel';
+import type { BaseLinearDisplayModel } from '../model';
 export default function autorunFeatureDensityStats(self: BaseLinearDisplayModel): Promise<void>;

package/esm/BaseLinearDisplay/models/configSchema.js

@@ -19,8 +19,8 @@ const baseLinearDisplayConfigSchema = ConfigurationSchema('BaseLinearDisplay', {
     mouseover: {
         type: 'string',
         description: 'text to display when the cursor hovers over a feature',
-        defaultValue: `jexl:get(feature,'name')`,
-        contextVariable: ['feature'],
+        defaultValue: `jexl:join('<br/>',get(feature,'_mouseOver')||get(feature,'name')||get(feature,'id'),mouseoverExtraInformation||'')`,
+        contextVariable: ['feature', 'mouseoverExtraInformation'],
     },
     jexlFilters: {
         type: 'stringArray',

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

@@ -1,5 +1,5 @@
-import type { BaseLinearDisplayModel } from './BaseLinearDisplayModel';
 import type { ExportSvgOptions } from '../../LinearGenomeView/types';
+import type { BaseLinearDisplayModel } from '../model';
 import type { ThemeOptions } from '@mui/material';
 export declare function renderBaseLinearDisplaySvg(self: BaseLinearDisplayModel, opts: ExportSvgOptions & {
     overrideHeight: number;

package/esm/LinearBareDisplay/model.d.ts

@@ -171,6 +171,7 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
     regionCannotBeRenderedText(_region: import("@jbrowse/core/util").Region): "" | "Force load to see features";
     regionCannotBeRendered(_region: import("@jbrowse/core/util").Region): import("react/jsx-runtime").JSX.Element | null;
 } & {
+    mouseoverExtraInformation: string | undefined;
     featureIdUnderMouse: undefined | string;
     contextMenuFeature: undefined | import("@jbrowse/core/util").Feature;
 } & {
@@ -185,9 +186,22 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
 } & {
     readonly features: import("@jbrowse/core/util/compositeMap").default<string, import("@jbrowse/core/util").Feature>;
     readonly featureUnderMouse: import("@jbrowse/core/util").Feature | undefined;
+    readonly layoutFeatures: import("@jbrowse/core/util/compositeMap").default<string, [number, number, number, number] | [number, number, number, number, {
+        label?: string;
+        description?: string;
+        refName: string;
+    }]>;
     getFeatureOverlapping(blockKey: string, x: number, y: number): string | undefined;
-    getFeatureByID(blockKey: string, id: string): [number, number, number, number] | undefined;
-    searchFeatureByID(id: string): [number, number, number, number] | undefined;
+    getFeatureByID(blockKey: string, id: string): ([number, number, number, number] | [number, number, number, number, {
+        label?: string;
+        description?: string;
+        refName: string;
+    }]) | undefined;
+    searchFeatureByID(id: string): ([number, number, number, number] | [number, number, number, number, {
+        label?: string;
+        description?: string;
+        refName: string;
+    }]) | undefined;
 } & {
     addBlock(key: string, block: import("@jbrowse/core/util/blockTypes").BaseBlock): void;
     deleteBlock(key: string): void;
@@ -196,6 +210,7 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
     clearFeatureSelection(): void;
     setFeatureIdUnderMouse(feature?: string): void;
     setContextMenuFeature(feature?: import("@jbrowse/core/util").Feature): void;
+    setMouseoverExtraInformation(extra?: string): void;
 } & {
     reload(): Promise<void>;
 } & {

package/esm/LinearBasicDisplay/model.d.ts

@@ -179,6 +179,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
     regionCannotBeRenderedText(_region: import("@jbrowse/core/util").Region): "" | "Force load to see features";
     regionCannotBeRendered(_region: import("@jbrowse/core/util").Region): import("react/jsx-runtime").JSX.Element | null;
 } & {
+    mouseoverExtraInformation: string | undefined;
     featureIdUnderMouse: undefined | string;
     contextMenuFeature: undefined | import("@jbrowse/core/util").Feature;
 } & {
@@ -193,9 +194,22 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
 } & {
     readonly features: import("@jbrowse/core/util/compositeMap").default<string, import("@jbrowse/core/util").Feature>;
     readonly featureUnderMouse: import("@jbrowse/core/util").Feature | undefined;
+    readonly layoutFeatures: import("@jbrowse/core/util/compositeMap").default<string, [number, number, number, number] | [number, number, number, number, {
+        label?: string;
+        description?: string;
+        refName: string;
+    }]>;
     getFeatureOverlapping(blockKey: string, x: number, y: number): string | undefined;
-    getFeatureByID(blockKey: string, id: string): [number, number, number, number] | undefined;
-    searchFeatureByID(id: string): [number, number, number, number] | undefined;
+    getFeatureByID(blockKey: string, id: string): ([number, number, number, number] | [number, number, number, number, {
+        label?: string;
+        description?: string;
+        refName: string;
+    }]) | undefined;
+    searchFeatureByID(id: string): ([number, number, number, number] | [number, number, number, number, {
+        label?: string;
+        description?: string;
+        refName: string;
+    }]) | undefined;
 } & {
     addBlock(key: string, block: import("@jbrowse/core/util/blockTypes").BaseBlock): void;
     deleteBlock(key: string): void;
@@ -204,6 +218,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
     clearFeatureSelection(): void;
     setFeatureIdUnderMouse(feature?: string): void;
     setContextMenuFeature(feature?: import("@jbrowse/core/util").Feature): void;
+    setMouseoverExtraInformation(extra?: string): void;
 } & {
     reload(): Promise<void>;
 } & {