@jbrowse/plugin-linear-genome-view 3.0.5 → 3.2.0

package/dist/LinearGenomeView/components/RubberbandSpan.js

@@ -1,4 +1,7 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = RubberbandSpan;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -6,6 +9,7 @@ const react_1 = require("react");
 const util_1 = require("@jbrowse/core/util");
 const material_1 = require("@mui/material");
 const mui_1 = require("tss-react/mui");
+const RubberbandTooltip_1 = __importDefault(require("./RubberbandTooltip"));
 const useStyles = (0, mui_1.makeStyles)()(theme => {
     const { tertiary } = theme.palette;
     const background = (0, material_1.alpha)(tertiary.light, 0.7);
@@ -14,9 +18,8 @@ const useStyles = (0, mui_1.makeStyles)()(theme => {
             height: '100%',
             background,
             position: 'absolute',
-            zIndex: 10,
+            zIndex: 830,
             textAlign: 'center',
-            overflow: 'hidden',
         },
         rubberbandControl: {
             cursor: 'crosshair',
@@ -24,32 +27,17 @@ const useStyles = (0, mui_1.makeStyles)()(theme => {
             minHeight: 8,
         },
         rubberbandText: {
-            color: tertiary.contrastText,
-        },
-        popover: {
-            mouseEvents: 'none',
-            cursor: 'crosshair',
-        },
-        paper: {
-            paddingLeft: theme.spacing(1),
-            paddingRight: theme.spacing(1),
+            color: theme.palette.tertiary.contrastText,
         },
     };
 });
-function Tooltip({ anchorEl, side, text, }) {
-    const { classes } = useStyles();
-    return ((0, jsx_runtime_1.jsx)(material_1.Popover, { className: classes.popover, classes: { paper: classes.paper }, open: true, anchorEl: anchorEl, anchorOrigin: {
-            vertical: 'top',
-            horizontal: side === 'left' ? 'right' : 'left',
-        }, transformOrigin: {
-            vertical: 'bottom',
-            horizontal: side === 'left' ? 'left' : 'right',
-        }, keepMounted: true, disableRestoreFocus: true, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { children: text }) }));
-}
-function RubberbandSpan({ leftBpOffset, rightBpOffset, numOfBpSelected, left, width, }) {
+function RubberbandSpan({ leftBpOffset, rightBpOffset, numOfBpSelected, left, width, top = 0, sticky = false, }) {
     const { classes } = useStyles();
     const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [anchorEl ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Tooltip, { side: "left", anchorEl: anchorEl, text: (0, util_1.stringify)(leftBpOffset) }), (0, jsx_runtime_1.jsx)(Tooltip, { side: "right", anchorEl: anchorEl, text: (0, util_1.stringify)(rightBpOffset) })] })) : null, (0, jsx_runtime_1.jsx)("div", { ref: el => {
-                    setAnchorEl(el);
-                }, className: classes.rubberband, style: { left, width }, children: numOfBpSelected ? ((0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "h6", className: classes.rubberbandText, children: [(0, util_1.toLocale)(numOfBpSelected), " bp"] })) : null })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [anchorEl ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(RubberbandTooltip_1.default, { side: "left", anchorEl: anchorEl, text: (0, util_1.stringify)(leftBpOffset) }), (0, jsx_runtime_1.jsx)(RubberbandTooltip_1.default, { side: "right", anchorEl: anchorEl, text: (0, util_1.stringify)(rightBpOffset) })] })) : null, (0, jsx_runtime_1.jsx)("div", { className: classes.rubberband, style: { left, width }, children: numOfBpSelected ? ((0, jsx_runtime_1.jsxs)(material_1.Typography, { ref: el => {
+                        setAnchorEl(el);
+                    }, variant: "h6", className: classes.rubberbandText, style: {
+                        top,
+                        position: sticky ? 'sticky' : undefined,
+                    }, children: [(0, util_1.toLocale)(numOfBpSelected), " bp"] })) : null })] }));
 }

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

@@ -0,0 +1,5 @@
+export default function RubberbandTooltip({ anchorEl, side, text, }: {
+    anchorEl: HTMLSpanElement;
+    side: string;
+    text: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/LinearGenomeView/components/RubberbandTooltip.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = RubberbandTooltip;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const mui_1 = require("tss-react/mui");
+const useStyles = (0, mui_1.makeStyles)()(theme => {
+    return {
+        popover: {
+            mouseEvents: 'none',
+            cursor: 'crosshair',
+        },
+        paper: {
+            paddingLeft: theme.spacing(1),
+            paddingRight: theme.spacing(1),
+        },
+    };
+});
+function RubberbandTooltip({ anchorEl, side, text, }) {
+    const { classes } = useStyles();
+    return ((0, jsx_runtime_1.jsx)(material_1.Popover, { className: classes.popover, classes: { paper: classes.paper }, open: true, anchorEl: anchorEl, anchorOrigin: {
+            vertical: 'top',
+            horizontal: side === 'left' ? 'left' : 'right',
+        }, transformOrigin: {
+            vertical: 'bottom',
+            horizontal: side === 'left' ? 'right' : 'left',
+        }, keepMounted: true, disableRestoreFocus: true, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { children: text }) }));
+}

package/dist/LinearGenomeView/components/Scalebar.js

@@ -8,6 +8,7 @@ const react_1 = require("react");
 const material_1 = require("@mui/material");
 const mobx_react_1 = require("mobx-react");
 const mui_1 = require("tss-react/mui");
+const Gridlines_1 = __importDefault(require("./Gridlines"));
 const ScalebarCoordinateLabels_1 = __importDefault(require("./ScalebarCoordinateLabels"));
 const ScalebarRefNameLabels_1 = __importDefault(require("./ScalebarRefNameLabels"));
 const useStyles = (0, mui_1.makeStyles)()({
@@ -17,7 +18,6 @@ const useStyles = (0, mui_1.makeStyles)()({
     },
     zoomContainer: {
         position: 'relative',
-        zIndex: 1,
     },
     scalebar: {
         position: 'absolute',
@@ -29,7 +29,7 @@ const Scalebar = (0, mobx_react_1.observer)((0, react_1.forwardRef)(function Sca
     const { classes, cx } = useStyles();
     const { staticBlocks, offsetPx, scaleFactor } = model;
     const offsetLeft = staticBlocks.offsetPx - offsetPx;
-    return ((0, jsx_runtime_1.jsxs)(material_1.Paper, { "data-resizer": "true", className: cx(classes.container, className), variant: "outlined", ref: ref, style: style, ...other, children: [(0, jsx_runtime_1.jsx)("div", { className: classes.zoomContainer, style: {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Paper, { "data-resizer": "true", className: cx(classes.container, className), variant: "outlined", ref: ref, style: style, ...other, children: [(0, jsx_runtime_1.jsx)(Gridlines_1.default, { model: model, offset: 1 }), (0, jsx_runtime_1.jsx)("div", { className: classes.zoomContainer, style: {
                     transform: scaleFactor !== 1 ? `scaleX(${scaleFactor})` : undefined,
                 }, children: (0, jsx_runtime_1.jsx)("div", { className: classes.scalebar, style: {
                         left: offsetLeft - 1,

package/dist/LinearGenomeView/components/TrackContainer.js

@@ -11,31 +11,36 @@ const material_1 = require("@mui/material");
 const mobx_react_1 = require("mobx-react");
 const mobx_state_tree_1 = require("mobx-state-tree");
 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)()({
     root: {
         marginTop: 2,
+        overflow: 'hidden',
+        position: 'relative',
+    },
+    unpinnedTrack: {
+        background: 'none',
     },
     resizeHandle: {
         height: 3,
         boxSizing: 'border-box',
         position: 'relative',
-        zIndex: 2,
     },
 });
 const TrackContainer = (0, mobx_react_1.observer)(function ({ model, track, }) {
-    const { classes } = useStyles();
+    const { classes, cx } = useStyles();
     const display = track.displays[0];
     const { draggingTrackId, showTrackOutlines } = model;
     const ref = (0, react_1.useRef)(null);
-    return ((0, jsx_runtime_1.jsxs)(material_1.Paper, { ref: ref, className: classes.root, variant: showTrackOutlines ? 'outlined' : undefined, elevation: showTrackOutlines ? undefined : 0, onClick: event => {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Paper, { ref: ref, className: cx(classes.root, track.pinned ? null : classes.unpinnedTrack), variant: showTrackOutlines ? 'outlined' : undefined, elevation: showTrackOutlines ? undefined : 0, onClick: event => {
             var _a;
             if (event.detail === 2 && !track.displays[0].featureIdUnderMouse) {
                 const left = ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().left) || 0;
                 model.zoomTo(model.bpPerPx / 2, event.clientX - left, true);
             }
-        }, children: [(0, jsx_runtime_1.jsx)(TrackLabelContainer_1.default, { track: track, view: model }), (0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { FallbackComponent: e => (0, jsx_runtime_1.jsx)(ui_1.ErrorMessage, { error: e.error }), children: (0, jsx_runtime_1.jsx)(TrackRenderingContainer_1.default, { model: model, track: track, onDragEnter: () => {
+        }, children: [track.pinned ? (0, jsx_runtime_1.jsx)(Gridlines_1.default, { model: model, offset: 1 }) : null, (0, jsx_runtime_1.jsx)(TrackLabelContainer_1.default, { track: track, view: model }), (0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { FallbackComponent: e => (0, jsx_runtime_1.jsx)(ui_1.ErrorMessage, { error: e.error }), children: (0, jsx_runtime_1.jsx)(TrackRenderingContainer_1.default, { model: model, track: track, onDragEnter: () => {
                         if ((0, mobx_state_tree_1.isAlive)(display) &&
                             draggingTrackId !== undefined &&
                             draggingTrackId !== display.id) {

package/dist/LinearGenomeView/components/TrackLabel.js

@@ -34,7 +34,7 @@ const TrackLabel = (0, mobx_react_1.observer)((0, react_1.forwardRef)(function T
     const view = (0, util_1.getContainingView)(track);
     const session = (0, util_1.getSession)(track);
     const trackConf = track.configuration;
-    const minimized = track.minimized;
+    const { minimized } = track;
     const trackId = (0, configuration_1.getConf)(track, 'trackId');
     const trackName = (0, tracks_1.getTrackName)(trackConf, session);
     return ((0, jsx_runtime_1.jsxs)(material_1.Paper, { ref: ref, className: cx(className, classes.root), onClick: event => {

package/dist/LinearGenomeView/components/TrackLabelContainer.js

@@ -9,7 +9,7 @@ const mui_1 = require("tss-react/mui");
 const TrackLabel_1 = __importDefault(require("./TrackLabel"));
 const useStyles = (0, mui_1.makeStyles)()({
     trackLabel: {
-        zIndex: 3,
+        zIndex: 2,
     },
     trackLabelOffset: {
         position: 'relative',

package/dist/LinearGenomeView/components/TrackLabelMenu.js

@@ -13,6 +13,7 @@ const KeyboardDoubleArrowDown_1 = __importDefault(require("@mui/icons-material/K
 const KeyboardDoubleArrowUp_1 = __importDefault(require("@mui/icons-material/KeyboardDoubleArrowUp"));
 const Minimize_1 = __importDefault(require("@mui/icons-material/Minimize"));
 const MoreVert_1 = __importDefault(require("@mui/icons-material/MoreVert"));
+const PushPin_1 = __importDefault(require("@mui/icons-material/PushPin"));
 const mobx_react_1 = require("mobx-react");
 const TrackLabelMenu = (0, mobx_react_1.observer)(function ({ track, }) {
     var _a;
@@ -20,7 +21,27 @@ const TrackLabelMenu = (0, mobx_react_1.observer)(function ({ track, }) {
     const session = (0, util_1.getSession)(track);
     const trackConf = track.configuration;
     const minimized = track.minimized;
+    const pinned = track.pinned;
+    let lgvHasParentView;
+    try {
+        (0, util_1.getContainingView)(view);
+        lgvHasParentView = true;
+    }
+    catch (error) {
+        lgvHasParentView = false;
+    }
     const items = [
+        ...(lgvHasParentView
+            ? []
+            : [
+                {
+                    label: pinned ? 'Unpin track' : 'Pin track',
+                    icon: PushPin_1.default,
+                    onClick: () => {
+                        track.setPinned(!pinned);
+                    },
+                },
+            ]),
         {
             label: 'Track order',
             type: 'subMenu',

package/dist/LinearGenomeView/components/TrackRenderingContainer.js

@@ -19,7 +19,6 @@ const useStyles = (0, mui_1.makeStyles)()({
         whiteSpace: 'nowrap',
         position: 'relative',
         background: 'none',
-        zIndex: 2,
     },
 });
 const TrackRenderingContainer = (0, mobx_react_1.observer)(function ({ model, track, onDragEnter, }) {

package/dist/LinearGenomeView/components/TracksContainer.js

@@ -56,22 +56,21 @@ const RubberbandSpan = (0, react_1.lazy)(() => Promise.resolve().then(() => __im
 const useStyles = (0, mui_1.makeStyles)()({
     tracksContainer: {
         position: 'relative',
-        overflow: 'hidden',
     },
 });
 const TracksContainer = (0, mobx_react_1.observer)(function TracksContainer({ children, model, }) {
     const { classes } = useStyles();
     const { pluginManager } = (0, util_1.getEnv)(model);
     const { mouseDown: mouseDown1, mouseUp } = (0, useSideScroll_1.useSideScroll)(model);
-    const { showGridlines, showCenterLine } = model;
+    const { stickyViewHeaders, rubberbandTop, showGridlines, showCenterLine } = model;
     const ref = (0, react_1.useRef)(null);
     const { guideX, rubberbandOn, leftBpOffset, rightBpOffset, numOfBpSelected, width, left, anchorPosition, open, handleMenuItemClick, handleClose, mouseMove, mouseDown: mouseDown2, } = (0, useRangeSelect_1.useRangeSelect)(ref, model, true);
     (0, useWheelScroll_1.useWheelScroll)(ref, model);
     const additional = pluginManager.evaluateExtensionPoint('LinearGenomeView-TracksContainerComponent', undefined, { model });
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, "data-testid": "trackContainer", className: classes.tracksContainer, onMouseDown: event => {
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, "data-testid": "tracksContainer", className: classes.tracksContainer, onMouseDown: event => {
             mouseDown1(event);
             mouseDown2(event);
-        }, onMouseMove: mouseMove, onMouseUp: mouseUp, children: [showGridlines ? (0, jsx_runtime_1.jsx)(Gridlines_1.default, { model: model }) : null, (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: null, children: showCenterLine ? (0, jsx_runtime_1.jsx)(CenterLine, { model: model }) : null }), guideX !== undefined ? ((0, jsx_runtime_1.jsx)(VerticalGuide_1.default, { model: model, coordX: guideX })) : rubberbandOn ? ((0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: null, children: (0, jsx_runtime_1.jsx)(RubberbandSpan, { leftBpOffset: leftBpOffset, rightBpOffset: rightBpOffset, numOfBpSelected: numOfBpSelected, width: width, left: left }) })) : null, anchorPosition ? ((0, jsx_runtime_1.jsx)(ui_1.Menu, { anchorReference: "anchorPosition", anchorPosition: {
+        }, onMouseMove: mouseMove, onMouseUp: mouseUp, children: [showGridlines ? (0, jsx_runtime_1.jsx)(Gridlines_1.default, { model: model }) : null, (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: null, children: showCenterLine ? (0, jsx_runtime_1.jsx)(CenterLine, { model: model }) : null }), guideX !== undefined ? ((0, jsx_runtime_1.jsx)(VerticalGuide_1.default, { model: model, coordX: guideX })) : rubberbandOn ? ((0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: null, children: (0, jsx_runtime_1.jsx)(RubberbandSpan, { leftBpOffset: leftBpOffset, rightBpOffset: rightBpOffset, numOfBpSelected: numOfBpSelected, width: width, left: left, top: rubberbandTop, sticky: stickyViewHeaders }) })) : null, anchorPosition ? ((0, jsx_runtime_1.jsx)(ui_1.Menu, { anchorReference: "anchorPosition", anchorPosition: {
                     left: anchorPosition.clientX,
                     top: anchorPosition.clientY,
                 }, onMenuItemClick: handleMenuItemClick, open: open, onClose: handleClose, menuItems: model.rubberBandMenuItems() })) : null, (0, jsx_runtime_1.jsx)(Rubberband_1.default, { model: model, ControlComponent: (0, jsx_runtime_1.jsx)(Scalebar_1.default, { model: model, style: {

package/dist/LinearGenomeView/components/VerticalGuide.js

@@ -11,14 +11,21 @@ const useStyles = (0, mui_1.makeStyles)()({
         height: '100%',
         width: 1,
         position: 'absolute',
-        zIndex: 10,
+        background: 'red',
+        zIndex: 1001,
+    },
+    tooltipTarget: {
+        position: 'sticky',
+        width: 1,
     },
 });
 const VerticalGuide = (0, mobx_react_1.observer)(function VerticalGuide({ model, coordX, }) {
     const { classes } = useStyles();
-    return ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { open: true, placement: "top", title: (0, util_1.stringify)(model.pxToBp(coordX)), arrow: true, children: (0, jsx_runtime_1.jsx)("div", { className: classes.guide, style: {
-                left: coordX,
-                background: 'red',
-            } }) }));
+    const { stickyViewHeaders, rubberbandTop } = model;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Tooltip, { open: true, placement: "top", title: (0, util_1.stringify)(model.pxToBp(coordX)), arrow: true, children: (0, jsx_runtime_1.jsx)("div", { className: classes.tooltipTarget, style: {
+                        left: coordX + 6,
+                        top: rubberbandTop,
+                        position: stickyViewHeaders ? 'sticky' : undefined,
+                    } }) }), (0, jsx_runtime_1.jsx)("div", { className: classes.guide, style: { left: coordX } })] }));
 });
 exports.default = VerticalGuide;

package/dist/LinearGenomeView/model.d.ts

@@ -1,5 +1,5 @@
 import type React from 'react';
-import type { BpOffset, ExportSvgOptions, HighlightType, NavLocation } from './types';
+import type { BpOffset, ExportSvgOptions, HighlightType, InitState, NavLocation } from './types';
 import type PluginManager from '@jbrowse/core/PluginManager';
 import type BaseResult from '@jbrowse/core/TextSearch/BaseResults';
 import type { Assembly } from '@jbrowse/core/assemblyManager/assembly';
@@ -30,6 +30,7 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
     highlight: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IArrayType<import("mobx-state-tree").IType<HighlightType, HighlightType, HighlightType>>, [undefined]>;
     colorByCDS: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
     showTrackOutlines: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
+    init: import("mobx-state-tree").IType<InitState | undefined, InitState | undefined, InitState | undefined>;
 }, {
     width: number;
 } & {
@@ -51,10 +52,15 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
     leftOffset: undefined | BpOffset;
     rightOffset: undefined | BpOffset;
 } & {
+    readonly pinnedTracks: any[];
+    readonly unpinnedTracks: any[];
     readonly trackLabelsSetting: any;
     readonly width: number;
     readonly interRegionPaddingWidth: number;
     readonly assemblyNames: string[];
+    readonly stickyViewHeaders: boolean;
+    readonly rubberbandTop: number;
+    readonly pinnedTracksTop: number;
 } & {
     scaleBarDisplayPrefix(): string | undefined;
     MiniControlsComponent(): React.FC<any>;
@@ -140,6 +146,7 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
     setDraggingTrackId(idx?: string): void;
     setScaleFactor(factor: number): void;
     clearView(): void;
+    setInit(arg?: InitState): void;
     exportSvg(opts?: ExportSvgOptions): Promise<void>;
 } & {
     slide: (viewWidths: number) => void;
@@ -160,7 +167,6 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
     readonly coarseVisibleLocStrings: string;
 } & {
     setCoarseDynamicBlocks(blocks: BlockSet): void;
-    afterAttach(): void;
 } & {
     moveTo(start?: BpOffset, end?: BpOffset): void;
     navToLocString(input: string, optAssemblyName?: string): Promise<void>;
@@ -206,6 +212,7 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
     } | undefined;
 } & {
     afterCreate(): void;
+    afterAttach(): void;
 }, import("mobx-state-tree").ModelCreationType<import("mobx-state-tree/dist/internal").ExtractCFromProps<{
     id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
     displayName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
@@ -228,7 +235,28 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
     highlight: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IArrayType<import("mobx-state-tree").IType<HighlightType, HighlightType, HighlightType>>, [undefined]>;
     colorByCDS: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
     showTrackOutlines: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
-}>>, import("mobx-state-tree")._NotCustomized>;
+    init: import("mobx-state-tree").IType<InitState | undefined, InitState | undefined, InitState | undefined>;
+}>>, {
+    type: string;
+    id: string;
+    displayName: string | undefined;
+    tracks: any[];
+    minimized: boolean;
+    displayedRegions: Region[];
+    offsetPx: number;
+    bpPerPx: number;
+    hideHeader: boolean;
+    hideHeaderOverview: boolean;
+    hideNoTracksActive: boolean;
+    trackSelectorType: string;
+    showCenterLine: boolean;
+    showCytobandsSetting: boolean;
+    trackLabels: string;
+    showGridlines: boolean;
+    highlight: HighlightType[];
+    colorByCDS: boolean;
+    showTrackOutlines: boolean;
+}>;
 export type LinearGenomeViewStateModel = ReturnType<typeof stateModelFactory>;
 export type LinearGenomeViewModel = Instance<LinearGenomeViewStateModel>;
 export { default as LinearGenomeView, default as ReactComponent, } from './components/LinearGenomeView';

package/dist/LinearGenomeView/model.js

@@ -41,6 +41,7 @@ exports.stateModelFactory = stateModelFactory;
 const react_1 = require("react");
 const configuration_1 = require("@jbrowse/core/configuration");
 const models_1 = require("@jbrowse/core/pluggableElementTypes/models");
+const ui_1 = require("@jbrowse/core/ui");
 const Icons_1 = require("@jbrowse/core/ui/Icons");
 const util_1 = require("@jbrowse/core/util");
 const Base1DUtils_1 = require("@jbrowse/core/util/Base1DUtils");
@@ -49,6 +50,7 @@ const calculateDynamicBlocks_1 = __importDefault(require("@jbrowse/core/util/cal
 const calculateStaticBlocks_1 = __importDefault(require("@jbrowse/core/util/calculateStaticBlocks"));
 const tracks_1 = require("@jbrowse/core/util/tracks");
 const mst_1 = require("@jbrowse/core/util/types/mst");
+const product_core_1 = require("@jbrowse/product-core");
 const FolderOpen_1 = __importDefault(require("@mui/icons-material/FolderOpen"));
 const Label_1 = __importDefault(require("@mui/icons-material/Label"));
 const MenuOpen_1 = __importDefault(require("@mui/icons-material/MenuOpen"));
@@ -91,6 +93,7 @@ function stateModelFactory(pluginManager) {
         highlight: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.array(mobx_state_tree_1.types.frozen()), []),
         colorByCDS: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.boolean, () => (0, util_1.localStorageGetBoolean)('lgv-colorByCDS', false)),
         showTrackOutlines: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.boolean, () => (0, util_1.localStorageGetBoolean)('lgv-showTrackOutlines', true)),
+        init: mobx_state_tree_1.types.frozen(),
     }))
         .volatile(() => ({
         volatileWidth: undefined,
@@ -106,6 +109,12 @@ function stateModelFactory(pluginManager) {
         rightOffset: undefined,
     }))
         .views(self => ({
+        get pinnedTracks() {
+            return self.tracks.filter(t => t.pinned);
+        },
+        get unpinnedTracks() {
+            return self.tracks.filter(t => !t.pinned);
+        },
         get trackLabelsSetting() {
             const sessionSetting = (0, configuration_1.getConf)((0, util_1.getSession)(self), [
                 'LinearGenomeViewPlugin',
@@ -127,6 +136,28 @@ function stateModelFactory(pluginManager) {
                 ...new Set(self.displayedRegions.map(region => region.assemblyName)),
             ];
         },
+        get stickyViewHeaders() {
+            const session = (0, util_1.getSession)(self);
+            return (0, product_core_1.isSessionWithMultipleViews)(session)
+                ? session.stickyViewHeaders
+                : false;
+        },
+        get rubberbandTop() {
+            let pinnedTracksTop = 0;
+            if (this.stickyViewHeaders) {
+                pinnedTracksTop = ui_1.VIEW_HEADER_HEIGHT;
+                if (!self.hideHeader) {
+                    pinnedTracksTop += consts_1.HEADER_BAR_HEIGHT;
+                    if (!self.hideHeaderOverview) {
+                        pinnedTracksTop += consts_1.HEADER_OVERVIEW_HEIGHT;
+                    }
+                }
+            }
+            return pinnedTracksTop;
+        },
+        get pinnedTracksTop() {
+            return this.rubberbandTop + consts_1.SCALE_BAR_HEIGHT;
+        },
     }))
         .views(self => ({
         scaleBarDisplayPrefix() {
@@ -240,32 +271,32 @@ function stateModelFactory(pluginManager) {
             return results;
         },
         rewriteOnClicks(trackType, viewMenuActions) {
-            viewMenuActions.forEach(action => {
+            for (const action of viewMenuActions) {
                 if ('subMenu' in action) {
                     this.rewriteOnClicks(trackType, action.subMenu);
                 }
                 if ('onClick' in action) {
                     const holdOnClick = action.onClick;
                     action.onClick = (...args) => {
-                        self.tracks.forEach(track => {
+                        for (const track of self.tracks) {
                             if (track.type === trackType) {
                                 holdOnClick.apply(track, [track, ...args]);
                             }
-                        });
+                        }
                     };
                 }
-            });
+            }
         },
         get trackTypeActions() {
             const allActions = new Map();
-            self.tracks.forEach(track => {
+            for (const track of self.tracks) {
                 const trackInMap = allActions.get(track.type);
                 if (!trackInMap) {
                     const viewMenuActions = structuredClone(track.viewMenuActions);
                     this.rewriteOnClicks(track.type, viewMenuActions);
                     allActions.set(track.type, viewMenuActions);
                 }
-            });
+            }
             return allActions;
         },
     }))
@@ -390,11 +421,13 @@ function stateModelFactory(pluginManager) {
         hideTrack(trackId) {
             const schema = pluginManager.pluggableConfigSchemaType('track');
             const conf = (0, mobx_state_tree_1.resolveIdentifier)(schema, (0, mobx_state_tree_1.getRoot)(self), trackId);
-            const t = self.tracks.filter(t => t.configuration === conf);
+            const tracks = self.tracks.filter(t => t.configuration === conf);
             (0, mobx_1.transaction)(() => {
-                t.forEach(t => self.tracks.remove(t));
+                for (const track of tracks) {
+                    self.tracks.remove(track);
+                }
             });
-            return t.length;
+            return tracks.length;
         },
     }))
         .actions(self => ({
@@ -535,6 +568,9 @@ function stateModelFactory(pluginManager) {
             self.scrollTo(0);
             self.zoomTo(10);
         },
+        setInit(arg) {
+            self.init = arg;
+        },
         async exportSvg(opts = {}) {
             const { renderToSvg } = await Promise.resolve().then(() => __importStar(require('./svgcomponents/SVGLinearGenomeView')));
             const html = await renderToSvg(self, opts);
@@ -755,7 +791,9 @@ function stateModelFactory(pluginManager) {
             for (const [key, value] of self.trackTypeActions.entries()) {
                 if (value.length) {
                     menuItems.push({ type: 'divider' }, { type: 'subHeader', label: key });
-                    value.forEach(action => menuItems.push(action));
+                    for (const action of value) {
+                        menuItems.push(action);
+                    }
                 }
             }
             return menuItems;
@@ -797,20 +835,6 @@ function stateModelFactory(pluginManager) {
             self.coarseDynamicBlocks = blocks.contentBlocks;
             self.coarseTotalBp = blocks.totalBp;
         },
-        afterAttach() {
-            (0, mobx_state_tree_1.addDisposer)(self, (0, mobx_1.autorun)(() => {
-                if (self.initialized) {
-                    this.setCoarseDynamicBlocks(self.dynamicBlocks);
-                }
-            }, { delay: 150 }));
-            (0, mobx_state_tree_1.addDisposer)(self, (0, mobx_1.autorun)(() => {
-                const s = (s) => JSON.stringify(s);
-                const { showCytobandsSetting, showCenterLine, colorByCDS } = self;
-                (0, util_1.localStorageSetItem)('lgv-showCytobands', s(showCytobandsSetting));
-                (0, util_1.localStorageSetItem)('lgv-showCenterLine', s(showCenterLine));
-                (0, util_1.localStorageSetItem)('lgv-colorByCDS', s(colorByCDS));
-            }));
-        },
     }))
         .actions(self => ({
         moveTo(start, end) {
@@ -977,6 +1001,33 @@ function stateModelFactory(pluginManager) {
                 document.removeEventListener('keydown', handler);
             });
         },
+        afterAttach() {
+            (0, mobx_state_tree_1.addDisposer)(self, (0, mobx_1.autorun)(() => {
+                var _a;
+                const { init } = self;
+                if (init) {
+                    self
+                        .navToLocString(init.loc, init.assembly)
+                        .catch((e) => {
+                        (0, util_1.getSession)(self).notifyError(`${e}`, e);
+                    });
+                    (_a = init.tracks) === null || _a === void 0 ? void 0 : _a.map(t => self.showTrack(t));
+                    self.setInit(undefined);
+                }
+            }));
+            (0, mobx_state_tree_1.addDisposer)(self, (0, mobx_1.autorun)(() => {
+                if (self.initialized) {
+                    self.setCoarseDynamicBlocks(self.dynamicBlocks);
+                }
+            }, { delay: 150 }));
+            (0, mobx_state_tree_1.addDisposer)(self, (0, mobx_1.autorun)(() => {
+                const s = (s) => JSON.stringify(s);
+                const { showCytobandsSetting, showCenterLine, colorByCDS } = self;
+                (0, util_1.localStorageSetItem)('lgv-showCytobands', s(showCytobandsSetting));
+                (0, util_1.localStorageSetItem)('lgv-showCenterLine', s(showCenterLine));
+                (0, util_1.localStorageSetItem)('lgv-colorByCDS', s(colorByCDS));
+            }));
+        },
     }))
         .preProcessSnapshot(snap => {
         if (!snap) {
@@ -989,6 +1040,15 @@ function stateModelFactory(pluginManager) {
                 : [highlight],
             ...rest,
         };
+    })
+        .postProcessSnapshot(snap => {
+        if (!snap) {
+            return snap;
+        }
+        else {
+            const { init, ...rest } = snap;
+            return rest;
+        }
     });
 }
 var LinearGenomeView_1 = require("./components/LinearGenomeView");

package/dist/LinearGenomeView/svgcomponents/SVGLinearGenomeView.js

@@ -21,12 +21,12 @@ async function renderToSvg(model, opts) {
     const session = (0, util_1.getSession)(model);
     const { allThemes } = session;
     const theme = allThemes === null || allThemes === void 0 ? void 0 : allThemes()[themeName];
-    const { width, tracks, showCytobands } = model;
+    const { width, pinnedTracks, unpinnedTracks, tracks, showCytobands } = model;
     const shift = 50;
     const c = +showCytobands * cytobandHeight;
     const offset = headerHeight + rulerHeight + c + 10;
     const height = (0, util_2.totalHeight)(tracks, textHeight, trackLabels) + offset + 100;
-    const displayResults = await Promise.all(tracks.map(async (track) => {
+    const displayResults = await Promise.all([...pinnedTracks, ...unpinnedTracks].map(async (track) => {
         const display = track.displays[0];
         await (0, mobx_1.when)(() => !display.renderProps().notReady);
         return { track, result: await display.renderSvg({ ...opts, theme }) };

package/dist/LinearGenomeView/types.d.ts

@@ -36,3 +36,8 @@ export interface NavLocation {
     end?: number;
     assemblyName?: string;
 }
+export interface InitState {
+    loc: string;
+    assembly: string;
+    tracks?: string[];
+}

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

@@ -0,0 +1,7 @@
+declare const BlockErrorMessage: ({ model, }: {
+    model: {
+        error?: unknown;
+        reload: () => void;
+    };
+}) => import("react/jsx-runtime").JSX.Element;
+export default BlockErrorMessage;

package/esm/BaseLinearDisplay/components/{BlockError.js → BlockErrorMessage.js}

@@ -6,14 +6,17 @@ import ReportIcon from '@mui/icons-material/Report';
 import { IconButton, Tooltip } from '@mui/material';
 import { observer } from 'mobx-react';
 import BlockMsg from './BlockMsg';
-const BlockError = observer(function ({ model }) {
+const BlockErrorMessage = observer(function ({ model, }) {
     return (_jsx(BlockMsg, { message: `${model.error}`, severity: "error", action: _jsxs(_Fragment, { children: [_jsx(Tooltip, { title: "Reload track", children: _jsx(IconButton, { "data-testid": "reload_button", onClick: () => {
                             model.reload();
                         }, children: _jsx(RefreshIcon, {}) }) }), _jsx(Tooltip, { title: "Show stack trace", children: _jsx(IconButton, { onClick: () => {
                             getSession(model).queueDialog(onClose => [
                                 ErrorMessageStackTraceDialog,
-                                { onClose, error: model.error },
+                                {
+                                    onClose,
+                                    error: model.error,
+                                },
                             ]);
                         }, children: _jsx(ReportIcon, {}) }) })] }) }));
 });
-export default BlockError;
+export default BlockErrorMessage;