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

package/esm/LinearGenomeView/components/Scalebar.js

@@ -3,6 +3,7 @@ import { forwardRef } from 'react';
 import { Paper } from '@mui/material';
 import { observer } from 'mobx-react';
 import { makeStyles } from 'tss-react/mui';
+import Gridlines from './Gridlines';
 import ScalebarCoordinateLabels from './ScalebarCoordinateLabels';
 import ScalebarRefNameLabels from './ScalebarRefNameLabels';
 const useStyles = makeStyles()({
@@ -12,7 +13,6 @@ const useStyles = makeStyles()({
     },
     zoomContainer: {
         position: 'relative',
-        zIndex: 1,
     },
     scalebar: {
         position: 'absolute',
@@ -24,7 +24,7 @@ const Scalebar = observer(forwardRef(function Scalebar2({ model, style, classNam
     const { classes, cx } = useStyles();
     const { staticBlocks, offsetPx, scaleFactor } = model;
     const offsetLeft = staticBlocks.offsetPx - offsetPx;
-    return (_jsxs(Paper, { "data-resizer": "true", className: cx(classes.container, className), variant: "outlined", ref: ref, style: style, ...other, children: [_jsx("div", { className: classes.zoomContainer, style: {
+    return (_jsxs(Paper, { "data-resizer": "true", className: cx(classes.container, className), variant: "outlined", ref: ref, style: style, ...other, children: [_jsx(Gridlines, { model: model, offset: 1 }), _jsx("div", { className: classes.zoomContainer, style: {
                     transform: scaleFactor !== 1 ? `scaleX(${scaleFactor})` : undefined,
                 }, children: _jsx("div", { className: classes.scalebar, style: {
                         left: offsetLeft - 1,

package/esm/LinearGenomeView/components/TrackContainer.js

@@ -6,31 +6,36 @@ import { Paper } from '@mui/material';
 import { observer } from 'mobx-react';
 import { isAlive } from 'mobx-state-tree';
 import { makeStyles } from 'tss-react/mui';
+import Gridlines from './Gridlines';
 import TrackLabelContainer from './TrackLabelContainer';
 import TrackRenderingContainer from './TrackRenderingContainer';
 const useStyles = makeStyles()({
     root: {
         marginTop: 2,
+        overflow: 'hidden',
+        position: 'relative',
+    },
+    unpinnedTrack: {
+        background: 'none',
     },
     resizeHandle: {
         height: 3,
         boxSizing: 'border-box',
         position: 'relative',
-        zIndex: 2,
     },
 });
 const TrackContainer = observer(function ({ model, track, }) {
-    const { classes } = useStyles();
+    const { classes, cx } = useStyles();
     const display = track.displays[0];
     const { draggingTrackId, showTrackOutlines } = model;
     const ref = useRef(null);
-    return (_jsxs(Paper, { ref: ref, className: classes.root, variant: showTrackOutlines ? 'outlined' : undefined, elevation: showTrackOutlines ? undefined : 0, onClick: event => {
+    return (_jsxs(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: [_jsx(TrackLabelContainer, { track: track, view: model }), _jsx(ErrorBoundary, { FallbackComponent: e => _jsx(ErrorMessage, { error: e.error }), children: _jsx(TrackRenderingContainer, { model: model, track: track, onDragEnter: () => {
+        }, children: [track.pinned ? _jsx(Gridlines, { model: model, offset: 1 }) : null, _jsx(TrackLabelContainer, { track: track, view: model }), _jsx(ErrorBoundary, { FallbackComponent: e => _jsx(ErrorMessage, { error: e.error }), children: _jsx(TrackRenderingContainer, { model: model, track: track, onDragEnter: () => {
                         if (isAlive(display) &&
                             draggingTrackId !== undefined &&
                             draggingTrackId !== display.id) {

package/esm/LinearGenomeView/components/TrackLabel.js

@@ -29,7 +29,7 @@ const TrackLabel = observer(forwardRef(function TrackLabel2({ track, className }
     const view = getContainingView(track);
     const session = getSession(track);
     const trackConf = track.configuration;
-    const minimized = track.minimized;
+    const { minimized } = track;
     const trackId = getConf(track, 'trackId');
     const trackName = getTrackName(trackConf, session);
     return (_jsxs(Paper, { ref: ref, className: cx(className, classes.root), onClick: event => {

package/esm/LinearGenomeView/components/TrackLabelContainer.js

@@ -4,7 +4,7 @@ import { makeStyles } from 'tss-react/mui';
 import TrackLabel from './TrackLabel';
 const useStyles = makeStyles()({
     trackLabel: {
-        zIndex: 3,
+        zIndex: 2,
     },
     trackLabelOffset: {
         position: 'relative',

package/esm/LinearGenomeView/components/TrackLabelMenu.js

@@ -8,6 +8,7 @@ import KeyboardDoubleArrowDownIcon from '@mui/icons-material/KeyboardDoubleArrow
 import KeyboardDoubleArrowUpIcon from '@mui/icons-material/KeyboardDoubleArrowUp';
 import MinimizeIcon from '@mui/icons-material/Minimize';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
+import PushPinIcon from '@mui/icons-material/PushPin';
 import { observer } from 'mobx-react';
 const TrackLabelMenu = observer(function ({ track, }) {
     var _a;
@@ -15,7 +16,27 @@ const TrackLabelMenu = observer(function ({ track, }) {
     const session = getSession(track);
     const trackConf = track.configuration;
     const minimized = track.minimized;
+    const pinned = track.pinned;
+    let lgvHasParentView;
+    try {
+        getContainingView(view);
+        lgvHasParentView = true;
+    }
+    catch (error) {
+        lgvHasParentView = false;
+    }
     const items = [
+        ...(lgvHasParentView
+            ? []
+            : [
+                {
+                    label: pinned ? 'Unpin track' : 'Pin track',
+                    icon: PushPinIcon,
+                    onClick: () => {
+                        track.setPinned(!pinned);
+                    },
+                },
+            ]),
         {
             label: 'Track order',
             type: 'subMenu',

package/esm/LinearGenomeView/components/TrackRenderingContainer.js

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

package/esm/LinearGenomeView/components/TracksContainer.js

@@ -18,22 +18,21 @@ const RubberbandSpan = lazy(() => import('./RubberbandSpan'));
 const useStyles = makeStyles()({
     tracksContainer: {
         position: 'relative',
-        overflow: 'hidden',
     },
 });
 const TracksContainer = observer(function TracksContainer({ children, model, }) {
     const { classes } = useStyles();
     const { pluginManager } = getEnv(model);
     const { mouseDown: mouseDown1, mouseUp } = useSideScroll(model);
-    const { showGridlines, showCenterLine } = model;
+    const { stickyViewHeaders, pinnedTracksTop, showGridlines, showCenterLine } = model;
     const ref = useRef(null);
     const { guideX, rubberbandOn, leftBpOffset, rightBpOffset, numOfBpSelected, width, left, anchorPosition, open, handleMenuItemClick, handleClose, mouseMove, mouseDown: mouseDown2, } = useRangeSelect(ref, model, true);
     useWheelScroll(ref, model);
     const additional = pluginManager.evaluateExtensionPoint('LinearGenomeView-TracksContainerComponent', undefined, { model });
-    return (_jsxs("div", { ref: ref, "data-testid": "trackContainer", className: classes.tracksContainer, onMouseDown: event => {
+    return (_jsxs("div", { ref: ref, "data-testid": "tracksContainer", className: classes.tracksContainer, onMouseDown: event => {
             mouseDown1(event);
             mouseDown2(event);
-        }, onMouseMove: mouseMove, onMouseUp: mouseUp, children: [showGridlines ? _jsx(Gridlines, { model: model }) : null, _jsx(Suspense, { fallback: null, children: showCenterLine ? _jsx(CenterLine, { model: model }) : null }), guideX !== undefined ? (_jsx(VerticalGuide, { model: model, coordX: guideX })) : rubberbandOn ? (_jsx(Suspense, { fallback: null, children: _jsx(RubberbandSpan, { leftBpOffset: leftBpOffset, rightBpOffset: rightBpOffset, numOfBpSelected: numOfBpSelected, width: width, left: left }) })) : null, anchorPosition ? (_jsx(Menu, { anchorReference: "anchorPosition", anchorPosition: {
+        }, onMouseMove: mouseMove, onMouseUp: mouseUp, children: [showGridlines ? _jsx(Gridlines, { model: model }) : null, _jsx(Suspense, { fallback: null, children: showCenterLine ? _jsx(CenterLine, { model: model }) : null }), guideX !== undefined ? (_jsx(VerticalGuide, { model: model, coordX: guideX })) : rubberbandOn ? (_jsx(Suspense, { fallback: null, children: _jsx(RubberbandSpan, { leftBpOffset: leftBpOffset, rightBpOffset: rightBpOffset, numOfBpSelected: numOfBpSelected, width: width, left: left, top: pinnedTracksTop, sticky: stickyViewHeaders }) })) : null, anchorPosition ? (_jsx(Menu, { anchorReference: "anchorPosition", anchorPosition: {
                     left: anchorPosition.clientX,
                     top: anchorPosition.clientY,
                 }, onMenuItemClick: handleMenuItemClick, open: open, onClose: handleClose, menuItems: model.rubberBandMenuItems() })) : null, _jsx(Rubberband, { model: model, ControlComponent: _jsx(Scalebar, { model: model, style: {

package/esm/LinearGenomeView/components/VerticalGuide.js

@@ -1,22 +1,47 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { stringify } from '@jbrowse/core/util';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { VIEW_HEADER_HEIGHT } from '@jbrowse/core/ui';
+import { getSession, stringify } from '@jbrowse/core/util';
+import { isSessionWithMultipleViews } from '@jbrowse/product-core';
 import { Tooltip } from '@mui/material';
 import { observer } from 'mobx-react';
 import { makeStyles } from 'tss-react/mui';
+import { HEADER_BAR_HEIGHT, HEADER_OVERVIEW_HEIGHT } from '../consts';
 const useStyles = makeStyles()({
     guide: {
         pointerEvents: 'none',
         height: '100%',
         width: 1,
         position: 'absolute',
-        zIndex: 10,
+        background: 'red',
+        zIndex: 4,
+    },
+    tooltipTarget: {
+        position: 'sticky',
+        width: 1,
     },
 });
 const VerticalGuide = observer(function VerticalGuide({ model, coordX, }) {
     const { classes } = useStyles();
-    return (_jsx(Tooltip, { open: true, placement: "top", title: stringify(model.pxToBp(coordX)), arrow: true, children: _jsx("div", { className: classes.guide, style: {
-                left: coordX,
-                background: 'red',
-            } }) }));
+    const session = getSession(model);
+    let stickyViewHeaders = false;
+    if (isSessionWithMultipleViews(session)) {
+        ;
+        ({ stickyViewHeaders } = session);
+    }
+    let tooltipTop = 0;
+    if (stickyViewHeaders) {
+        tooltipTop = VIEW_HEADER_HEIGHT;
+        if (!model.hideHeader) {
+            tooltipTop += HEADER_BAR_HEIGHT;
+            if (!model.hideHeaderOverview) {
+                tooltipTop += HEADER_OVERVIEW_HEIGHT;
+            }
+        }
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(Tooltip, { open: true, placement: "top", title: stringify(model.pxToBp(coordX)), arrow: true, children: _jsx("div", { className: classes.tooltipTarget, style: {
+                        left: coordX + 6,
+                        top: tooltipTop,
+                        position: stickyViewHeaders ? 'sticky' : undefined,
+                    } }) }), _jsx("div", { className: classes.guide, style: { left: coordX } })] }));
 });
 export default VerticalGuide;

package/esm/LinearGenomeView/model.d.ts

@@ -51,10 +51,14 @@ 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 pinnedTracksTop: number;
 } & {
     scaleBarDisplayPrefix(): string | undefined;
     MiniControlsComponent(): React.FC<any>;

package/esm/LinearGenomeView/model.js

@@ -1,6 +1,7 @@
 import { lazy } from 'react';
 import { getConf } from '@jbrowse/core/configuration';
 import { BaseViewModel } from '@jbrowse/core/pluggableElementTypes/models';
+import { VIEW_HEADER_HEIGHT } from '@jbrowse/core/ui';
 import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons';
 import { assembleLocString, clamp, findLast, getSession, isSessionModelWithWidgets, isSessionWithAddTracks, localStorageGetBoolean, localStorageGetItem, localStorageSetItem, measureText, springAnimate, sum, } from '@jbrowse/core/util';
 import { bpToPx, moveTo, pxToBp } from '@jbrowse/core/util/Base1DUtils';
@@ -9,6 +10,7 @@ import calculateDynamicBlocks from '@jbrowse/core/util/calculateDynamicBlocks';
 import calculateStaticBlocks from '@jbrowse/core/util/calculateStaticBlocks';
 import { getParentRenderProps } from '@jbrowse/core/util/tracks';
 import { ElementId } from '@jbrowse/core/util/types/mst';
+import { isSessionWithMultipleViews } from '@jbrowse/product-core';
 import FolderOpenIcon from '@mui/icons-material/FolderOpen';
 import LabelIcon from '@mui/icons-material/Label';
 import MenuOpenIcon from '@mui/icons-material/MenuOpen';
@@ -66,6 +68,12 @@ export 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 = getConf(getSession(self), [
                 'LinearGenomeViewPlugin',
@@ -87,6 +95,25 @@ export function stateModelFactory(pluginManager) {
                 ...new Set(self.displayedRegions.map(region => region.assemblyName)),
             ];
         },
+        get stickyViewHeaders() {
+            const session = getSession(self);
+            return isSessionWithMultipleViews(session)
+                ? session.stickyViewHeaders
+                : false;
+        },
+        get pinnedTracksTop() {
+            let pinnedTracksTop = 0;
+            if (this.stickyViewHeaders) {
+                pinnedTracksTop = VIEW_HEADER_HEIGHT + SCALE_BAR_HEIGHT;
+                if (!self.hideHeader) {
+                    pinnedTracksTop += HEADER_BAR_HEIGHT;
+                    if (!self.hideHeaderOverview) {
+                        pinnedTracksTop += HEADER_OVERVIEW_HEIGHT;
+                    }
+                }
+            }
+            return pinnedTracksTop;
+        },
     }))
         .views(self => ({
         scaleBarDisplayPrefix() {

package/esm/LinearGenomeView/svgcomponents/SVGLinearGenomeView.js

@@ -14,12 +14,12 @@ export async function renderToSvg(model, opts) {
     const session = 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 = 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 when(() => !display.renderProps().notReady);
         return { track, result: await display.renderSvg({ ...opts, theme }) };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-linear-genome-view",
-  "version": "3.0.5",
+  "version": "3.1.0",
   "description": "JBrowse 2 linear genome view",
   "keywords": [
     "jbrowse",
@@ -38,7 +38,7 @@
     "useSrc": "node ../../scripts/useSrc.js"
   },
   "dependencies": {
-    "@jbrowse/core": "^3.0.5",
+    "@jbrowse/core": "^3.1.0",
     "@mui/icons-material": "^6.0.0",
     "@mui/material": "^6.0.0",
     "@types/file-saver": "^2.0.1",
@@ -58,5 +58,5 @@
     "access": "public"
   },
   "module": "esm/index.js",
-  "gitHead": "a03749efe19e51609922272b845a331897346789"
+  "gitHead": "91492049ddea0aed90eb24d3c066c2d9f5a6b189"
 }

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

@@ -1,4 +0,0 @@
-declare const BlockError: ({ model }: {
-    model: any;
-}) => import("react/jsx-runtime").JSX.Element;
-export default BlockError;

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

@@ -1,4 +0,0 @@
-declare const BlockError: ({ model }: {
-    model: any;
-}) => import("react/jsx-runtime").JSX.Element;
-export default BlockError;