@jbrowse/plugin-linear-genome-view 4.2.1 → 5.0.0-beta.1

package/esm/LinearGenomeView/components/TrackContainer.js

@@ -1,58 +1,102 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef } from 'react';
-import { ErrorMessage, ResizeHandle } from '@jbrowse/core/ui';
+import { ErrorBanner, ResizeHandle } from '@jbrowse/core/ui';
 import { ErrorBoundary } from '@jbrowse/core/ui/ErrorBoundary';
 import { cx, makeStyles } from '@jbrowse/core/util/tss-react';
-import { isAlive } from '@jbrowse/mobx-state-tree';
+import { TrackOverlaySlot } from '@jbrowse/display-ui';
 import { Paper } from '@mui/material';
 import { observer } from 'mobx-react';
-import Gridlines from "./Gridlines.js";
-import TrackLabelContainer from "./TrackLabelContainer.js";
-import TrackRenderingContainer from "./TrackRenderingContainer.js";
-import { shouldSwapTracks } from "./util.js";
-const useStyles = makeStyles()(theme => ({
+import { RESIZE_HANDLE_HEIGHT, TRACK_OUTLINE_BORDER, TRACK_TOP_GAP, } from '../consts.js';
+import Gridlines from './Gridlines.js';
+import PaddingBlocks from './PaddingBlocks.js';
+import TrackLabel from './TrackLabel.js';
+import TrackRenderingContainer from './TrackRenderingContainer.js';
+const useStyles = makeStyles()({
+    // No `overflow`: paint containment already clips to the padding box, and an
+    // overflow would only add a scroll container — the spurious second scrollbar
+    // described in TrackRenderingContainer. flow-root keeps the block formatting
+    // context that `overflow: hidden` used to establish as a side effect (neither
+    // `clip` nor no overflow does), so child margins still can't collapse through
+    // and shift the track — which the breakpoint split view would pick up, since
+    // its connector overlay measures trackRefs' getBoundingClientRect().top.
     root: {
-        marginTop: 2,
-        overflow: 'hidden',
+        marginTop: TRACK_TOP_GAP,
         position: 'relative',
+        display: 'flow-root',
         contain: 'layout style paint',
     },
     unpinnedTrack: {
         background: 'none',
     },
+    // in flow at the bottom of the Paper, and outside `trackContent` — so a
+    // `bottom:0` portaled overlay (the status chips) lands on the track content's
+    // bottom edge rather than having to subtract this height back out. The height
+    // arrives inline from RESIZE_HANDLE_HEIGHT, which the model's offset
+    // arithmetic reads too.
+    //
+    // No `bar`: a divider drawn at rest under every track read as a band of its
+    // own down the whole view. It keeps its RESIZE_HANDLE_HEIGHT of space in flow
+    // and reveals itself under the pointer at `action.disabled`, the weight a
+    // `bar` rests at.
     resizeHandle: {
-        height: 4,
-        boxSizing: 'border-box',
         position: 'relative',
-        background: 'transparent',
-        '&:hover': {
-            background: theme.palette.divider,
-        },
     },
-}));
+    // in-flow, so the label pushes the track body down by its own height. The
+    // margin is that push plus a gap: without it the body starts on the label's
+    // border-box edge, and the Paper's drop shadow (which reaches ~4px past it)
+    // lands on the first rows of features. Vertical margins count on an atomic
+    // inline-level box, so this grows the line box rather than collapsing away.
+    //
+    // 8, not 4. At 4 the whole margin went to clearing the shadow and nothing
+    // was left over as a gap: measured on desktop-ispcr-results, where the PCR
+    // product is a feature on the display's FIRST row, the chip's bottom border
+    // and the feature's top border came out ~2px apart and read as one line
+    // (reviewer: "the tracklabels:offset is just a little bit overlapping the
+    // tracklabel still"). Most tracks hide this because their display adds its
+    // own top padding before the first row. 8 keeps the ~4 the shadow needs and
+    // spends the other 4 on clearance.
+    trackLabelOffset: {
+        position: 'relative',
+        display: 'inline-block',
+        marginBottom: 8,
+    },
+    trackLabelOverlap: {
+        position: 'absolute',
+    },
+});
 const TrackContainer = observer(function TrackContainer({ model, track, }) {
     const { classes } = useStyles();
-    const display = track.displays[0];
-    const { draggingTrackId, showTrackOutlines } = model;
-    const ref = useRef(null);
-    return (_jsxs(Paper, { ref: ref, className: cx(classes.root, track.pinned ? null : classes.unpinnedTrack), variant: showTrackOutlines ? 'outlined' : undefined, elevation: showTrackOutlines ? undefined : 0, onClick: event => {
-            if (event.detail === 2 && !display.featureIdUnderMouse) {
-                const left = ref.current?.getBoundingClientRect().left || 0;
-                model.zoomTo(model.bpPerPx / 2, event.clientX - left, true);
-            }
-        }, onDragOver: event => {
-            if (isAlive(display) &&
-                draggingTrackId !== undefined &&
-                draggingTrackId !== display.id) {
-                const draggingIdx = model.tracks.findIndex(t => t.id === draggingTrackId);
-                const targetIdx = model.tracks.findIndex(t => t.id === track.id);
-                const movingDown = targetIdx > draggingIdx;
-                const currentY = event.clientY;
-                if (shouldSwapTracks(model.lastTrackDragY, currentY, movingDown)) {
-                    model.setLastTrackDragY(currentY);
-                    model.moveTrack(draggingTrackId, track.id);
-                }
-            }
-        }, 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 }) }), _jsx(ResizeHandle, { onDrag: display.resizeHeight, className: classes.resizeHandle })] }));
+    // an LGV track always holds at least one linear display (activeDisplay =
+    // displays[0]); narrow to the linear shape for prefersOffset/resizeHeight
+    const display = track.activeDisplay;
+    const { showTrackOutlines } = model;
+    // The Paper's 1px border, present iff outlines are on. Everything laid out in
+    // the *display's* coordinates has to cancel it — the rendering container
+    // shifts left by it (see renderingComponentContainer), so the overlay node and
+    // the masks over it have to move by the same amount or they land a pixel off
+    // the data. One binding rather than three copies of the ternary, because the
+    // three agreeing is the whole point.
+    const outlineOffset = showTrackOutlines ? TRACK_OUTLINE_BORDER : 0;
+    const trackLabelStyle = model.effectiveTrackLabels !== 'overlapping' || display.prefersOffset
+        ? classes.trackLabelOffset
+        : classes.trackLabelOverlap;
+    return (_jsxs(Paper, { className: cx(classes.root, track.pinned ? null : classes.unpinnedTrack), variant: showTrackOutlines ? 'outlined' : undefined, elevation: showTrackOutlines ? undefined : 0, onDragOver: event => {
+            model.onTrackDragOver(track.id, event.clientY);
+        }, children: [track.pinned ? _jsx(Gridlines, { model: model, offset: outlineOffset }) : null, model.effectiveTrackLabels !== 'hidden' ? (_jsx(TrackLabel, { track: track, className: trackLabelStyle })) : null, _jsx(TrackOverlaySlot, { zIndex: 100, overlayStyle: { left: -outlineOffset }, children: _jsx(ErrorBoundary, { resetKeys: [display.id], FallbackComponent: e => (_jsx(ErrorBanner, { error: e.error, onReset: e.resetErrorBoundary })), children: _jsx(TrackRenderingContainer, { model: model, track: track }) }) }), _jsx(PaddingBlocks, { model: model, offset: outlineOffset }), _jsx(ResizeHandle, { style: { height: RESIZE_HANDLE_HEIGHT }, onDrag: distance => display.resizeHeight(distance), 
+                // the drag's shortcut: grow the track by whatever it is scrolled over,
+                // so a pileup showing three rows of forty opens to all forty
+                // Optional: only a display that scrolls its own content has anything
+                // hidden to expand to.
+                onDoubleClick: () => {
+                    display.expandToContentHeight?.();
+                }, 
+                // Bracket the drag so a display can sit an expensive per-frame layer
+                // out of it (see `resizing` on TrackHeightMixin). Causal rather than a
+                // per-display debounce: the handle owns both ends of the gesture. On
+                // the track, so this holds whatever the active display is.
+                onDragStart: () => {
+                    track.setResizing(true);
+                }, onDragEnd: () => {
+                    track.setResizing(false);
+                }, className: classes.resizeHandle })] }));
 });
 export default TrackContainer;

package/esm/LinearGenomeView/components/TrackLabel.d.ts

@@ -1,7 +1,6 @@
 import type { BaseTrackModel } from '@jbrowse/core/pluggableElementTypes/models';
-interface Props {
+declare const TrackLabel: ({ track, className, }: {
     track: BaseTrackModel;
     className?: string;
-}
-declare const TrackLabel: ({ track, className }: Props) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default TrackLabel;

package/esm/LinearGenomeView/components/TrackLabel.js

@@ -1,42 +1,29 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { SanitizedHTML } from '@jbrowse/core/ui';
-import { getContainingView, getSession } from '@jbrowse/core/util';
+import { getSession } from '@jbrowse/core/util';
 import { getTrackName } from '@jbrowse/core/util/tracks';
 import { cx, makeStyles } from '@jbrowse/core/util/tss-react';
-import CloseIcon from '@mui/icons-material/Close';
-import { IconButton, Paper, Typography, alpha } from '@mui/material';
+import { Paper, Typography } from '@mui/material';
 import { observer } from 'mobx-react';
-import TrackLabelDragHandle from "./TrackLabelDragHandle.js";
-import TrackLabelMenu from "./TrackLabelMenu.js";
+import { TrackLabelCloseButton, TrackLabelMinimizeButton, } from './TrackLabelButtons.js';
+import TrackLabelDragHandle from './TrackLabelDragHandle.js';
+import TrackLabelMenu from './TrackLabelMenu.js';
+import TrackLabelRefNameWarning from './TrackLabelRefNameWarning.js';
 const useStyles = makeStyles()(theme => ({
     root: {
+        // above breakpoint split view
         zIndex: 200,
-        background: alpha(theme.palette.background.paper, 0.8),
-        '&:hover': {
-            background: theme.palette.background.paper,
-        },
+        background: theme.palette.background.paper,
     },
     trackName: {
         margin: '0 auto',
         width: '90%',
-        fontSize: '0.8rem',
         pointerEvents: 'none',
     },
-    iconButton: {
-        padding: theme.spacing(1),
-    },
 }));
-const TrackLabel = observer(function TrackLabel({ track, className }) {
+const TrackLabel = observer(function TrackLabel({ track, className, }) {
     const { classes } = useStyles();
-    const view = getContainingView(track);
-    const session = getSession(track);
-    const { minimized } = track;
-    const trackId = track.trackId;
-    const trackName = getTrackName(track.configuration, session);
-    return (_jsxs(Paper, { className: cx(className, classes.root), onClick: event => {
-            event.stopPropagation();
-        }, children: [_jsx(TrackLabelDragHandle, { track: track, trackId: trackId, view: view }), _jsx(IconButton, { onClick: () => view.hideTrack(trackId), className: classes.iconButton, title: "close this track", children: _jsx(CloseIcon, { fontSize: "small" }) }), _jsx(Typography, { variant: "body1", component: "span", className: classes.trackName, children: _jsx(SanitizedHTML, { html: [trackName, minimized ? '(minimized)' : '']
-                        .filter(f => !!f)
-                        .join(' ') }) }), _jsx(TrackLabelMenu, { track: track })] }));
+    const trackName = getTrackName(track.configuration, getSession(track));
+    return (_jsxs(Paper, { className: cx(className, classes.root), children: [_jsx(TrackLabelDragHandle, { track: track }), _jsx(TrackLabelCloseButton, { track: track }), _jsx(TrackLabelMinimizeButton, { track: track }), _jsx(Typography, { variant: "body2", component: "span", className: classes.trackName, children: _jsx(SanitizedHTML, { html: trackName }) }), _jsx(TrackLabelRefNameWarning, { track: track }), _jsx(TrackLabelMenu, { track: track })] }));
 });
 export default TrackLabel;

package/esm/LinearGenomeView/components/TrackLabelButtons.d.ts

@@ -0,0 +1,7 @@
+import type { BaseTrackModel } from '@jbrowse/core/pluggableElementTypes/models';
+export declare const TrackLabelCloseButton: ({ track, }: {
+    track: BaseTrackModel;
+}) => import("react").JSX.Element;
+export declare const TrackLabelMinimizeButton: ({ track }: {
+    track: BaseTrackModel;
+}) => import("react").JSX.Element;

package/esm/LinearGenomeView/components/TrackLabelButtons.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getContainingView } from '@jbrowse/core/util';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+import ArrowRightIcon from '@mui/icons-material/ArrowRight';
+import CloseIcon from '@mui/icons-material/Close';
+import { IconButton } from '@mui/material';
+import { observer } from 'mobx-react';
+const useStyles = makeStyles()({
+    iconButton: {
+        padding: 0,
+    },
+});
+// Keyed by trackId, not by the track's display name or by the model id: the
+// name is config the user can change and the model id is minted per session, so
+// neither survives being written into a test or a screenshot spec. The only
+// other handle these buttons offered was `title`, which is shared by every
+// track's copy of the button — so reaching ONE of them meant walking up to the
+// Paper the label and the rendering container share and matching that
+// container's testid through `:has()`. That worked and nobody should have to
+// write it.
+export const TrackLabelCloseButton = observer(function TrackLabelCloseButton({ track, }) {
+    const { classes } = useStyles();
+    const view = getContainingView(track);
+    return (_jsx(IconButton, { onClick: () => view.hideTrack(track.trackId), className: classes.iconButton, title: "close this track", "data-testid": `track-close-${track.trackId}`, children: _jsx(CloseIcon, { fontSize: "small" }) }));
+});
+export const TrackLabelMinimizeButton = observer(function TrackLabelMinimizeButton({ track }) {
+    const { classes } = useStyles();
+    const { minimized } = track;
+    return (_jsx(IconButton, { onClick: () => {
+            track.setMinimized(!minimized);
+        }, className: classes.iconButton, title: minimized ? 'restore track' : 'minimize track', "data-testid": `track-minimize-${track.trackId}`, children: minimized ? _jsx(ArrowRightIcon, {}) : _jsx(ArrowDropDownIcon, {}) }));
+});

package/esm/LinearGenomeView/components/TrackLabelDragHandle.d.ts

@@ -1,8 +1,5 @@
-import type { LinearGenomeViewModel } from '../index.ts';
 import type { BaseTrackModel } from '@jbrowse/core/pluggableElementTypes/models';
-declare function TrackLabelDragHandle({ trackId, view, track, }: {
-    trackId: string;
+declare const TrackLabelDragHandle: ({ track, }: {
     track: BaseTrackModel;
-    view: LinearGenomeViewModel;
-}): import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default TrackLabelDragHandle;

package/esm/LinearGenomeView/components/TrackLabelDragHandle.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { getContainingView } from '@jbrowse/core/util';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
 import DragIcon from '@mui/icons-material/DragIndicator';
+import { observer } from 'mobx-react';
 const useStyles = makeStyles()({
     dragHandle: {
         cursor: 'grab',
@@ -11,8 +13,10 @@ const useStyles = makeStyles()({
         pointerEvents: 'none',
     },
 });
-function TrackLabelDragHandle({ trackId, view, track, }) {
+const TrackLabelDragHandle = observer(function TrackLabelDragHandle({ track, }) {
     const { classes } = useStyles();
+    const view = getContainingView(track);
+    const trackId = track.trackId;
     return (_jsx("span", { draggable: true, className: classes.dragHandle, onDragStart: event => {
             const target = event.currentTarget;
             if (target.parentNode) {
@@ -23,5 +27,5 @@ function TrackLabelDragHandle({ trackId, view, track, }) {
         }, onDragEnd: () => {
             view.setDraggingTrackId(undefined);
         }, "data-testid": `dragHandle-${view.id}-${trackId}`, children: _jsx(DragIcon, { className: classes.dragHandleIcon, fontSize: "small" }) }));
-}
+});
 export default TrackLabelDragHandle;

package/esm/LinearGenomeView/components/TrackLabelMenu.d.ts

@@ -1,5 +1,5 @@
 import type { BaseTrackModel } from '@jbrowse/core/pluggableElementTypes/models';
 declare const TrackLabelMenu: ({ track, }: {
     track: BaseTrackModel;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default TrackLabelMenu;

package/esm/LinearGenomeView/components/TrackLabelMenu.js

@@ -1,100 +1,47 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback } from 'react';
 import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
 import { getContainingView, getSession } from '@jbrowse/core/util';
-import AddIcon from '@mui/icons-material/Add';
-import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
-import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
-import KeyboardDoubleArrowDownIcon from '@mui/icons-material/KeyboardDoubleArrowDown';
-import KeyboardDoubleArrowUpIcon from '@mui/icons-material/KeyboardDoubleArrowUp';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
 import LowPriorityIcon from '@mui/icons-material/LowPriority';
-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';
+import { getTrackOrderSubMenu } from './trackLabelMenuItems.js';
+// IconButton's default 5px padding made this the tallest thing in the label
+// (27px), so it, not the text or the other controls, set the label height and
+// hence the offset the track body gets. 3px trims the label to 23px while
+// keeping a hit area past the 17px icon; 2px reads as too compact.
+const useStyles = makeStyles()({
+    menuButton: {
+        padding: 3,
+    },
+});
 const TrackLabelMenu = observer(function TrackLabelMenu({ track, }) {
+    const { classes } = useStyles();
     const view = getContainingView(track);
     const session = getSession(track);
-    const getMenuItems = useCallback(() => {
-        const trackConf = track.configuration;
-        const minimized = track.minimized;
-        const pinned = track.pinned;
-        const { isTopLevelView } = view;
-        const trackMenuItems = track.trackMenuItems();
-        const saveTrackData = trackMenuItems.find(item => 'label' in item && item.label === 'Save track data');
-        const remainingTrackMenuItems = trackMenuItems.filter(item => !('label' in item) || item.label !== 'Save track data');
-        const sessionItems = session.getTrackActionMenuItems?.(trackConf, saveTrackData ? [saveTrackData] : []) || [];
+    function getMenuItems() {
+        const orderSubMenu = getTrackOrderSubMenu({ view, track });
+        const sessionItems = session.getTrackActionMenuItems?.({
+            config: track.configuration,
+            view,
+        }) ?? [];
         return [
-            {
-                label: 'Track order',
-                icon: LowPriorityIcon,
-                type: 'subMenu',
-                priority: 1000,
-                subMenu: [
-                    ...(!isTopLevelView
-                        ? []
-                        : [
-                            {
-                                label: pinned ? 'Unpin track' : 'Pin track',
-                                icon: PushPinIcon,
-                                onClick: () => {
-                                    track.setPinned(!pinned);
-                                },
-                            },
-                        ]),
+            ...(orderSubMenu.length
+                ? [
                     {
-                        label: minimized ? 'Restore track' : 'Minimize track',
-                        icon: minimized ? AddIcon : MinimizeIcon,
-                        onClick: () => {
-                            track.setMinimized(!minimized);
-                        },
+                        label: 'Track order',
+                        icon: LowPriorityIcon,
+                        type: 'subMenu',
+                        priority: 1000,
+                        subMenu: orderSubMenu,
                     },
-                    ...(view.tracks.length > 2
-                        ? [
-                            {
-                                label: 'Move track to top',
-                                icon: KeyboardDoubleArrowUpIcon,
-                                onClick: () => {
-                                    view.moveTrackToTop(track.id);
-                                },
-                            },
-                        ]
-                        : []),
-                    ...(view.tracks.length > 1
-                        ? [
-                            {
-                                label: 'Move track up',
-                                icon: KeyboardArrowUpIcon,
-                                onClick: () => {
-                                    view.moveTrackUp(track.id);
-                                },
-                            },
-                            {
-                                label: 'Move track down',
-                                icon: KeyboardArrowDownIcon,
-                                onClick: () => {
-                                    view.moveTrackDown(track.id);
-                                },
-                            },
-                        ]
-                        : []),
-                    ...(view.tracks.length > 2
-                        ? [
-                            {
-                                label: 'Move track to bottom',
-                                icon: KeyboardDoubleArrowDownIcon,
-                                onClick: () => {
-                                    view.moveTrackToBottom(track.id);
-                                },
-                            },
-                        ]
-                        : []),
-                ],
-            },
+                ]
+                : []),
             ...sessionItems,
-            ...remainingTrackMenuItems,
-        ].sort((a, b) => (b.priority || 0) - (a.priority || 0));
-    }, [track, view, session]);
-    return (_jsx(CascadingMenuButton, { menuItems: getMenuItems, "data-testid": "track_menu_icon", children: _jsx(MoreVertIcon, { fontSize: "small" }) }));
+            track.saveTrackDataMenuItem,
+            ...track.trackMenuItems(),
+        ].sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));
+    }
+    return (_jsx(CascadingMenuButton, { menuItems: getMenuItems, className: classes.menuButton, "data-testid": "track_menu_icon", "data-trackid": track.trackId, tooltip: "Track settings", children: _jsx(MoreVertIcon, { fontSize: "small" }) }));
 });
 export default TrackLabelMenu;

package/esm/LinearGenomeView/components/TrackLabelRefNameWarning.d.ts

@@ -0,0 +1,22 @@
+import type { BaseTrackModel } from '@jbrowse/core/pluggableElementTypes/models';
+/**
+ * The track label's warning for a file whose reference names have nothing in
+ * common with the assembly's — the commonest data-configuration mistake in
+ * JBrowse, and until now a silent one: the track draws nothing and reads
+ * exactly like a track with no features in view.
+ *
+ * The label rather than the display chrome, deliberately. The chrome's states
+ * are `displayPhase`'s, which are mutually exclusive and two of which replace
+ * the display's subtree; a mismatch is neither an error to retry nor a phase to
+ * be in, and routing it through `model.error` would put a red banner and a dead
+ * Retry over a track that, if the check is ever wrong, is drawing fine. This
+ * sits next to the track's own close/minimize buttons, costs the display
+ * nothing, and reaches every track type at once.
+ *
+ * The tooltip is the summary and the dialog is the disclosure — a hover nobody
+ * performs is not a way of telling someone their data is misconfigured.
+ */
+declare const TrackLabelRefNameWarning: ({ track, }: {
+    track: BaseTrackModel;
+}) => import("react").JSX.Element | null;
+export default TrackLabelRefNameWarning;

package/esm/LinearGenomeView/components/TrackLabelRefNameWarning.js

@@ -0,0 +1,46 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { refNameMismatchMessage } from '@jbrowse/core/assemblyManager/assembly';
+import { InfoDialog } from '@jbrowse/core/ui';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
+import WarningIcon from '@mui/icons-material/Warning';
+import { IconButton, Typography } from '@mui/material';
+import { observer } from 'mobx-react';
+const useStyles = makeStyles()(theme => ({
+    iconButton: {
+        padding: 0,
+        color: theme.palette.warning.main,
+    },
+}));
+/**
+ * The track label's warning for a file whose reference names have nothing in
+ * common with the assembly's — the commonest data-configuration mistake in
+ * JBrowse, and until now a silent one: the track draws nothing and reads
+ * exactly like a track with no features in view.
+ *
+ * The label rather than the display chrome, deliberately. The chrome's states
+ * are `displayPhase`'s, which are mutually exclusive and two of which replace
+ * the display's subtree; a mismatch is neither an error to retry nor a phase to
+ * be in, and routing it through `model.error` would put a red banner and a dead
+ * Retry over a track that, if the check is ever wrong, is drawing fine. This
+ * sits next to the track's own close/minimize buttons, costs the display
+ * nothing, and reaches every track type at once.
+ *
+ * The tooltip is the summary and the dialog is the disclosure — a hover nobody
+ * performs is not a way of telling someone their data is misconfigured.
+ */
+const TrackLabelRefNameWarning = observer(function TrackLabelRefNameWarning({ track, }) {
+    const { classes } = useStyles();
+    const [open, setOpen] = useState(false);
+    const { refNameMismatch } = track;
+    if (!refNameMismatch) {
+        return null;
+    }
+    const message = refNameMismatchMessage(refNameMismatch);
+    return (_jsxs(_Fragment, { children: [_jsx(IconButton, { onClick: () => {
+                    setOpen(true);
+                }, className: classes.iconButton, title: message, "data-testid": `track-refname-warning-${track.trackId}`, children: _jsx(WarningIcon, { fontSize: "small" }) }), open ? (_jsxs(InfoDialog, { open: true, title: "Reference names do not match the assembly", onClose: () => {
+                    setOpen(false);
+                }, children: [_jsx(Typography, { children: message }), _jsx(Typography, { variant: "body2", style: { marginTop: 8 }, children: "The track menu's \"About track\" shows every reference name the file uses." })] })) : null] }));
+});
+export default TrackLabelRefNameWarning;

package/esm/LinearGenomeView/components/TrackRenderingContainer.d.ts

@@ -4,5 +4,5 @@ type LGV = LinearGenomeViewModel;
 declare const TrackRenderingContainer: ({ model, track, }: {
     model: LGV;
     track: BaseTrackModel;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default TrackRenderingContainer;

package/esm/LinearGenomeView/components/TrackRenderingContainer.js

@@ -1,45 +1,99 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Suspense, useEffect, useRef } from 'react';
-import { LoadingEllipses } from '@jbrowse/core/ui';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Suspense, useCallback } from 'react';
+import { LoadingOverlay } from '@jbrowse/core/ui';
+import { getSession } from '@jbrowse/core/util';
+import { getTrackName } from '@jbrowse/core/util/tracks';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { observer } from 'mobx-react';
+import { MINIMIZED_TRACK_HEIGHT } from '../consts.js';
 const useStyles = makeStyles()({
+    // aligns with block boundaries. check for example the breakpoint split view
+    // demo to see if features align if wanting to change things. the -1 left
+    // offset (cancels the Paper's 1px border) is applied inline since it's
+    // conditional on showTrackOutlines, the same condition the border is gated on
     renderingComponentContainer: {
         position: 'absolute',
-        left: -1,
         height: '100%',
         width: '100%',
     },
+    // Tracks never scroll natively on this outer container — every display owns
+    // its own vertical scroll: canvas displays scroll an inner sticky-canvas
+    // container (FeatureComponent), while alignments and variants draw a custom
+    // VerticalScrollbar overlay and redraw the canvas at `scrollTop`. A native
+    // scroll port here only produced a *second*, spurious scrollbar whenever a
+    // display's absolutely-positioned overlays extended a pixel past `height`
+    // (the reported double/flickering/full-height scrollbars). So there is
+    // deliberately no `overflow` here: `contain: strict` includes paint
+    // containment, which clips to the padding box on its own, and adding an
+    // `overflow` would reintroduce the scroll container — one the browser can
+    // still scroll silently (focus, scrollIntoView, scroll anchoring) even with
+    // no scrollbar shown, desyncing track content from the scalebar.
+    //
+    // `contain: strict` is also what makes every piece of display chrome reach the
+    // track's overlay layer through `TrackOverlayPortal` — containment creates a
+    // stacking context, so nothing in here can paint above `PaddingBlocks`, which
+    // is a later sibling. That looks like a tax worth removing (swap for a bare
+    // `overflow: clip`, which clips without a scroll container AND without a
+    // stacking context, and the portals become plain z-indexes). It was measured:
+    // `browser-tests/probe-containment.ts`. Under DOM load that swap costs 2.6x
+    // paint time on a track height change and 4.0x on a pan, at identical paint
+    // counts. The stacking context IS the paint isolation — the two can't be
+    // separated, so the portal is the price of the isolation, not a workaround
+    // for it. Layout containment measured free; the paint half is the load-bearing
+    // one. ADR-058.
     trackRenderingContainer: {
-        overflowY: 'auto',
-        overflowX: 'hidden',
         whiteSpace: 'nowrap',
         position: 'relative',
         background: 'none',
         contain: 'strict',
     },
 });
+// The box every LGV display is mounted in, and the ONLY place in the tree where
+// a track's pixels get a name and a role — one component rather than an
+// `aria-label` per display type, the same way `TrackOverlaySlot` is one paint
+// order rather than one per display.
+//
+// Its own observer for a measured reason. The "what is on screen" half of the
+// name is the settled locstring, which changes whenever navigation settles; read
+// from `TrackRenderingContainer` below, that would re-render every track's
+// container (and re-run its `useStyles`) on every settle. Here the re-render is
+// this one `<div>`: `children` is the same React element object the parent
+// already handed it, so React bails out of the display's whole subtree.
+//
+// **`role="figure"`, not `role="img"`.** `img` is the textbook role for a canvas
+// and would be right if the box held only pixels — but it makes every descendant
+// presentational, and a display's chrome does not all portal out of the sandbox:
+// alignments draws its group collapse/expand `<button>`s inline
+// (`GroupLabelsOverlay`), which under `img` would be focusable and announced as
+// nothing. `figure` names the box and keeps what is inside it reachable. Revisit
+// if inline interactive chrome ever goes away.
+const TrackDisplayRegion = observer(function TrackDisplayRegion({ model, track, children, ...divProps }) {
+    const trackName = getTrackName(track.configuration, getSession(track));
+    const loc = model.coarseVisibleLocStrings;
+    return (_jsx("div", { ...divProps, role: "figure", "aria-label": loc ? `${trackName} track, showing ${loc}` : `${trackName} track`, children: children }));
+});
 const TrackRenderingContainer = observer(function TrackRenderingContainer({ model, track, }) {
     const { classes } = useStyles();
-    const display = track.displays[0];
+    // an LGV track always holds at least one linear display (activeDisplay =
+    // displays[0]); narrow to the linear shape for height/RenderingComponent
+    const display = track.activeDisplay;
     const { height, RenderingComponent, DisplayBlurb } = display;
-    const { trackRefs, id, scaleFactor } = model;
+    const { trackRefs, showTrackOutlines } = model;
     const trackId = track.trackId;
-    const ref = useRef(null);
     const minimized = track.minimized;
-    useEffect(() => {
-        if (ref.current) {
-            trackRefs[trackId] = ref.current;
+    // callback ref keeps trackRefs in sync as the rendering div mounts/unmounts
+    // (e.g. on minimize/restore), unlike a useEffect that misses the toggle
+    const setRef = useCallback((el) => {
+        if (el) {
+            trackRefs[trackId] = el;
         }
-        return () => {
+        else {
             delete trackRefs[trackId];
-        };
+        }
     }, [trackRefs, trackId]);
     return (_jsx("div", { className: classes.trackRenderingContainer, style: {
-            height: minimized ? 20 : height,
-        }, onScroll: evt => display.setScrollTop(evt.currentTarget.scrollTop), "data-testid": `trackRenderingContainer-${id}-${trackId}`, children: !minimized ? (_jsxs(_Fragment, { children: [_jsx("div", { ref: ref, className: classes.renderingComponentContainer, style: {
-                        transform: scaleFactor !== 1 ? `scaleX(${scaleFactor})` : undefined,
-                    }, children: _jsx(Suspense, { fallback: _jsx(LoadingEllipses, {}), children: _jsx(RenderingComponent, { model: display, onHorizontalScroll: model.horizontalScroll }) }) }), DisplayBlurb ? (_jsx("div", { style: {
+            height: minimized ? MINIMIZED_TRACK_HEIGHT : height,
+        }, "data-testid": `trackRenderingContainer-${model.id}-${trackId}`, children: !minimized ? (_jsxs(_Fragment, { children: [_jsx(TrackDisplayRegion, { model: model, track: track, ref: setRef, className: classes.renderingComponentContainer, style: { left: showTrackOutlines ? -1 : 0 }, children: _jsx(Suspense, { fallback: _jsx(LoadingOverlay, { isVisible: true, immediate: true }), children: _jsx(RenderingComponent, { model: display, onHorizontalScroll: model.horizontalScroll }) }) }), DisplayBlurb ? (_jsx("div", { style: {
                         position: 'absolute',
                         left: 0,
                         top: display.height - 20,