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

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

@@ -7,10 +7,10 @@ exports.BlockMsg = exports.Tooltip = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const configuration_1 = require("@jbrowse/core/configuration");
-const ui_1 = require("@jbrowse/core/ui");
 const mobx_react_1 = require("mobx-react");
 const mui_1 = require("tss-react/mui");
 const LinearBlocks_1 = __importDefault(require("./LinearBlocks"));
+const MenuPage_1 = __importDefault(require("./MenuPage"));
 const useStyles = (0, mui_1.makeStyles)()({
     display: {
         position: 'relative',
@@ -29,8 +29,6 @@ const BaseLinearDisplay = (0, mobx_react_1.observer)(function (props) {
     const [contextCoord, setContextCoord] = (0, react_1.useState)();
     const { model, children } = props;
     const { TooltipComponent, DisplayMessageComponent, height } = model;
-    const items = model.contextMenuItems();
-    const open = Boolean(contextCoord) && items.length > 0;
     return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, "data-testid": `display-${(0, configuration_1.getConf)(model, 'displayId')}`, className: classes.display, onContextMenu: event => {
             event.preventDefault();
             if (contextCoord) {
@@ -48,22 +46,9 @@ const BaseLinearDisplay = (0, mobx_react_1.observer)(function (props) {
             setOffsetMouseCoord([event.clientX - left, event.clientY - top]);
             setClientMouseCoord([event.clientX, event.clientY]);
             setClientRect(rect);
-        }, children: [DisplayMessageComponent ? ((0, jsx_runtime_1.jsx)(DisplayMessageComponent, { model: model })) : ((0, jsx_runtime_1.jsx)(LinearBlocks_1.default, { ...props })), children, (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: null, children: (0, jsx_runtime_1.jsx)(TooltipComponent, { model: model, height: height, offsetMouseCoord: offsetMouseCoord, clientMouseCoord: clientMouseCoord, clientRect: clientRect, mouseCoord: offsetMouseCoord }) }), open ? ((0, jsx_runtime_1.jsx)(ui_1.Menu, { open: true, onMenuItemClick: (_, callback) => {
-                    callback();
+        }, children: [DisplayMessageComponent ? ((0, jsx_runtime_1.jsx)(DisplayMessageComponent, { model: model })) : ((0, jsx_runtime_1.jsx)(LinearBlocks_1.default, { ...props })), children, (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: null, children: (0, jsx_runtime_1.jsx)(TooltipComponent, { model: model, height: height, offsetMouseCoord: offsetMouseCoord, clientMouseCoord: clientMouseCoord, clientRect: clientRect, mouseCoord: offsetMouseCoord }) }), contextCoord ? ((0, jsx_runtime_1.jsx)(MenuPage_1.default, { 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] }));
 });
 exports.default = BaseLinearDisplay;
 var Tooltip_1 = require("./Tooltip");

package/dist/BaseLinearDisplay/components/BlockMsg.js

@@ -16,5 +16,7 @@ function BlockMsg({ message, severity, action, }) {
             message: classes.ellipses,
         }, onMouseDown: event => {
             event.stopPropagation();
+        }, onClick: event => {
+            event.stopPropagation();
         }, children: (0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: message, children: (0, jsx_runtime_1.jsx)("div", { children: message }) }) }));
 }

package/dist/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/dist/BaseLinearDisplay/components/LinearBlocks.js

@@ -1,11 +1,13 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RenderedBlocks = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const util_1 = require("@jbrowse/core/util");
 const mobx_react_1 = require("mobx-react");
 const mui_1 = require("tss-react/mui");
-const Block_1 = require("./Block");
+const RenderedBlocks_1 = __importDefault(require("./RenderedBlocks"));
 const useStyles = (0, mui_1.makeStyles)()({
     linearBlocks: {
         whiteSpace: 'nowrap',
@@ -14,48 +16,13 @@ const useStyles = (0, mui_1.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 = (0, mobx_react_1.observer)(function ({ model, }) {
-    const { classes } = useStyles();
-    const { blockDefinitions, blockState } = model;
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: blockDefinitions.map(block => {
-            const key = `${model.id}-${block.key}`;
-            if (block.type === 'ContentBlock') {
-                const state = blockState.get(block.key);
-                return ((0, jsx_runtime_1.jsxs)(Block_1.ContentBlock, { block: block, children: [(state === null || state === void 0 ? void 0 : state.ReactComponent) ? ((0, jsx_runtime_1.jsx)(state.ReactComponent, { model: state })) : null, (state === null || state === void 0 ? void 0 : state.maxHeightReached) ? ((0, jsx_runtime_1.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 (0, jsx_runtime_1.jsx)(Block_1.ElidedBlock, { width: block.widthPx }, key);
-            }
-            if (block.type === 'InterRegionPaddingBlock') {
-                return ((0, jsx_runtime_1.jsx)(Block_1.InterRegionPaddingBlock, { width: block.widthPx, style: { background: 'none' }, boundary: block.variant === 'boundary' }, key));
-            }
-            throw new Error(`invalid block type ${JSON.stringify(block)}`);
-        }) }));
 });
-exports.RenderedBlocks = RenderedBlocks;
 const LinearBlocks = (0, mobx_react_1.observer)(function ({ model, }) {
     const { classes } = useStyles();
     const { blockDefinitions } = model;
     const viewModel = (0, util_1.getContainingView)(model);
     return ((0, jsx_runtime_1.jsx)("div", { className: classes.linearBlocks, style: {
             left: blockDefinitions.offsetPx - viewModel.offsetPx,
-        }, children: (0, jsx_runtime_1.jsx)(RenderedBlocks, { model: model }) }));
+        }, children: (0, jsx_runtime_1.jsx)(RenderedBlocks_1.default, { model: model }) }));
 });
 exports.default = LinearBlocks;

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

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

package/dist/BaseLinearDisplay/components/MaxHeightReachedIndicator.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = MaxHeightReached;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const mui_1 = require("tss-react/mui");
+const useStyles = (0, mui_1.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',
+    },
+});
+function MaxHeightReached({ top }) {
+    const { classes } = useStyles();
+    return ((0, jsx_runtime_1.jsx)("div", { className: classes.heightOverflowed, style: {
+            top,
+            pointerEvents: 'none',
+            height: 16,
+        }, children: "Max height reached" }));
+}

package/dist/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/dist/BaseLinearDisplay/components/MenuPage.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ui_1 = require("@jbrowse/core/ui");
+const mobx_react_1 = require("mobx-react");
+const MenuPage = (0, mobx_react_1.observer)(function ({ onClose, contextCoord, model, }) {
+    const items = model.contextMenuItems();
+    return ((0, jsx_runtime_1.jsx)(ui_1.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 }));
+});
+exports.default = MenuPage;

package/dist/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/dist/BaseLinearDisplay/components/RenderedBlocks.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const mobx_react_1 = require("mobx-react");
+const Block_1 = require("./Block");
+const MaxHeightReachedIndicator_1 = __importDefault(require("./MaxHeightReachedIndicator"));
+const RenderedBlocks = (0, mobx_react_1.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 ((0, jsx_runtime_1.jsxs)(Block_1.ContentBlock, { block: block, children: [(state === null || state === void 0 ? void 0 : state.ReactComponent) ? ((0, jsx_runtime_1.jsx)(state.ReactComponent, { model: state })) : null, (state === null || state === void 0 ? void 0 : state.maxHeightReached) ? ((0, jsx_runtime_1.jsx)(MaxHeightReachedIndicator_1.default, { top: state.layout.getTotalHeight() - 16 })) : null] }, key));
+        }
+        else if (block.type === 'ElidedBlock') {
+            return (0, jsx_runtime_1.jsx)(Block_1.ElidedBlock, { width: block.widthPx }, key);
+        }
+        else if (block.type === 'InterRegionPaddingBlock') {
+            return ((0, jsx_runtime_1.jsx)(Block_1.InterRegionPaddingBlock, { width: block.widthPx, style: { background: 'none' }, boundary: block.variant === 'boundary' }, key));
+        }
+        throw new Error(`invalid block type ${JSON.stringify(block)}`);
+    });
+});
+exports.default = RenderedBlocks;

package/dist/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/dist/BaseLinearDisplay/components/Tooltip.js

@@ -13,11 +13,14 @@ const TooltipContents = (0, react_1.forwardRef)(function TooltipContents2({ mess
     return ((0, jsx_runtime_1.jsx)("div", { ref: ref, children: (0, react_1.isValidElement)(message) ? (message) : message ? ((0, jsx_runtime_1.jsx)(ui_1.SanitizedHTML, { html: String(message) })) : null }));
 });
 const Tooltip = (0, mobx_react_1.observer)(function ({ model, clientMouseCoord, }) {
-    const { featureUnderMouse } = model;
+    const { featureUnderMouse, mouseoverExtraInformation } = model;
     const x = clientMouseCoord[0] + 15;
     const y = clientMouseCoord[1];
     const contents = featureUnderMouse
-        ? (0, configuration_1.getConf)(model, 'mouseover', { feature: featureUnderMouse })
+        ? (0, configuration_1.getConf)(model, 'mouseover', {
+            feature: featureUnderMouse,
+            mouseoverExtraInformation,
+        })
         : undefined;
     return featureUnderMouse && contents ? ((0, jsx_runtime_1.jsx)(BaseTooltip_1.default, { clientPoint: { x, y }, children: (0, jsx_runtime_1.jsx)(TooltipContents, { message: contents }) })) : null;
 });

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

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

package/dist/BaseLinearDisplay/components/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/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/dist/BaseLinearDisplay/index.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TooLargeMessage = exports.FeatureDensityMixin = exports.TrackHeightMixin = exports.BaseLinearDisplayComponent = exports.Tooltip = exports.BlockMsg = exports.BaseLinearDisplay = exports.baseLinearDisplayConfigSchema = void 0;
 var configSchema_1 = require("./models/configSchema");
 Object.defineProperty(exports, "baseLinearDisplayConfigSchema", { enumerable: true, get: function () { return __importDefault(configSchema_1).default; } });
-var BaseLinearDisplayModel_1 = require("./models/BaseLinearDisplayModel");
-Object.defineProperty(exports, "BaseLinearDisplay", { enumerable: true, get: function () { return BaseLinearDisplayModel_1.BaseLinearDisplay; } });
+var model_1 = require("./model");
+Object.defineProperty(exports, "BaseLinearDisplay", { enumerable: true, get: function () { return model_1.BaseLinearDisplay; } });
 var BaseLinearDisplay_1 = require("./components/BaseLinearDisplay");
 Object.defineProperty(exports, "BlockMsg", { enumerable: true, get: function () { return BaseLinearDisplay_1.BlockMsg; } });
 Object.defineProperty(exports, "Tooltip", { enumerable: true, get: function () { return BaseLinearDisplay_1.Tooltip; } });

package/dist/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/dist/BaseLinearDisplay/{models/BaseLinearDisplayModel.js → model.js}

@@ -49,11 +49,11 @@ const MenuOpen_1 = __importDefault(require("@mui/icons-material/MenuOpen"));
 const copy_to_clipboard_1 = __importDefault(require("copy-to-clipboard"));
 const mobx_1 = require("mobx");
 const mobx_state_tree_1 = require("mobx-state-tree");
-const FeatureDensityMixin_1 = __importDefault(require("./FeatureDensityMixin"));
-const TrackHeightMixin_1 = __importDefault(require("./TrackHeightMixin"));
-const configSchema_1 = __importDefault(require("./configSchema"));
-const serverSideRenderedBlock_1 = __importDefault(require("./serverSideRenderedBlock"));
-const Tooltip = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('../components/Tooltip'))));
+const FeatureDensityMixin_1 = __importDefault(require("./models/FeatureDensityMixin"));
+const TrackHeightMixin_1 = __importDefault(require("./models/TrackHeightMixin"));
+const configSchema_1 = __importDefault(require("./models/configSchema"));
+const serverSideRenderedBlock_1 = __importDefault(require("./models/serverSideRenderedBlock"));
+const Tooltip = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./components/Tooltip'))));
 function stateModelFactory() {
     return mobx_state_tree_1.types
         .compose('BaseLinearDisplay', models_1.BaseDisplay, (0, TrackHeightMixin_1.default)(), (0, FeatureDensityMixin_1.default)(), mobx_state_tree_1.types.model({
@@ -61,6 +61,7 @@ function stateModelFactory() {
         configuration: (0, configuration_1.ConfigurationReference)(configSchema_1.default),
     }))
         .volatile(() => ({
+        mouseoverExtraInformation: undefined,
         featureIdUnderMouse: undefined,
         contextMenuFeature: undefined,
     }))
@@ -116,6 +117,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_1.default(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);
@@ -193,6 +203,9 @@ function stateModelFactory() {
         setContextMenuFeature(feature) {
             self.contextMenuFeature = feature;
         },
+        setMouseoverExtraInformation(extra) {
+            self.mouseoverExtraInformation = extra;
+        },
     }))
         .actions(self => {
         const { reload: superReload } = self;
@@ -270,11 +283,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);
@@ -285,7 +300,7 @@ function stateModelFactory() {
     }))
         .actions(self => ({
         async renderSvg(opts) {
-            const { renderBaseLinearDisplaySvg } = await Promise.resolve().then(() => __importStar(require('./renderSvg')));
+            const { renderBaseLinearDisplaySvg } = await Promise.resolve().then(() => __importStar(require('./models/renderSvg')));
             return renderBaseLinearDisplaySvg(self, opts);
         },
         afterAttach() {

package/dist/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/dist/BaseLinearDisplay/models/configSchema.js

@@ -21,8 +21,8 @@ const baseLinearDisplayConfigSchema = (0, configuration_1.ConfigurationSchema)('
     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/dist/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/dist/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/dist/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>;
 } & {

package/dist/LinearGenomeView/components/Cytobands.js

@@ -28,7 +28,9 @@ function rightTriangle(x, _y, width, height) {
 const colorMap = {
     gneg: 'rgb(227,227,227)',
     gpos25: 'rgb(142,142,142)',
+    gpos33: 'rgb(142,142,142)',
     gpos50: 'rgb(85,85,85)',
+    gpos66: 'rgb(85,85,85)',
     gpos100: 'rgb(0,0,0)',
     gpos75: 'rgb(57,57,57)',
     gvar: 'rgb(0,0,0)',

package/dist/LinearGenomeView/components/RegionWidthEditorDialog.js

@@ -6,7 +6,7 @@ const ui_1 = require("@jbrowse/core/ui");
 const util_1 = require("@jbrowse/core/util");
 const material_1 = require("@mui/material");
 const mobx_react_1 = require("mobx-react");
-const toP = (s = 0) => +(+s).toFixed(1);
+const toP = (s = 0) => +s.toFixed(1);
 const RegionWidthEditorDialog = (0, mobx_react_1.observer)(function ({ model, handleClose, }) {
     const { bpPerPx, width } = model;
     const [val, setVal] = (0, react_1.useState)((0, util_1.toLocale)(toP(bpPerPx * width)));

package/dist/LinearGenomeView/components/SequenceSearchDialog.js

@@ -37,7 +37,7 @@ const SequenceSearchDialog = (0, mobx_react_1.observer)(function ({ model, handl
                                     } }), label: "Case insensitive" })] }), error ? (0, jsx_runtime_1.jsx)(material_1.Typography, { color: "error", children: `${error}` }) : null] }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { onClick: () => {
                             var _a;
                             if (value) {
-                                const trackId = `sequence_search_${+Date.now()}`;
+                                const trackId = `sequence_search_${Date.now()}`;
                                 const session = (0, util_1.getSession)(model);
                                 const { assemblyManager } = session;
                                 const assemblyName = model.assemblyNames[0];

package/dist/LinearGenomeView/components/TrackContainer.js

@@ -14,7 +14,7 @@ const mui_1 = require("tss-react/mui");
 const Gridlines_1 = __importDefault(require("./Gridlines"));
 const TrackLabelContainer_1 = __importDefault(require("./TrackLabelContainer"));
 const TrackRenderingContainer_1 = __importDefault(require("./TrackRenderingContainer"));
-const useStyles = (0, mui_1.makeStyles)()({
+const useStyles = (0, mui_1.makeStyles)()(theme => ({
     root: {
         marginTop: 2,
         overflow: 'hidden',
@@ -24,11 +24,15 @@ const useStyles = (0, mui_1.makeStyles)()({
         background: 'none',
     },
     resizeHandle: {
-        height: 3,
+        height: 4,
         boxSizing: 'border-box',
         position: 'relative',
+        background: 'transparent',
+        '&:hover': {
+            background: theme.palette.divider,
+        },
     },
-});
+}));
 const TrackContainer = (0, mobx_react_1.observer)(function ({ model, track, }) {
     const { classes, cx } = useStyles();
     const display = track.displays[0];

package/dist/LinearGenomeView/components/TrackLabelMenu.js

@@ -24,7 +24,7 @@ const TrackLabelMenu = (0, mobx_react_1.observer)(function ({ track, }) {
     const pinned = track.pinned;
     const { isTopLevelView } = view;
     const items = [
-        ...(isTopLevelView
+        ...(!isTopLevelView
             ? []
             : [
                 {