@jbrowse/plugin-linear-genome-view 4.3.0 → 5.0.0-beta.2

package/esm/LinearGenomeView/components/SearchResultsTable.js

@@ -1,64 +1,56 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { assembleLocString, getEnv, getSession, parseLocString, } from '@jbrowse/core/util';
+import { readConfObject } from '@jbrowse/core/configuration';
+import { assembleLocString, getSession, parseLocString, } from '@jbrowse/core/util';
 import { Button, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, } from '@mui/material';
-import { navToOption } from "../../searchUtils.js";
-export default function SearchResultsTable({ searchResults, assemblyName: optAssemblyName, model, handleClose, }) {
+import { observer } from 'mobx-react';
+import { isOpenInView, navToOption } from '../../searchUtils.js';
+const SearchResultsTable = observer(function SearchResultsTable({ searchResults, assemblyName, model, handleClose, }) {
     const session = getSession(model);
-    const { pluginManager } = getEnv(session);
     const { assemblyManager } = session;
-    const assemblyName = optAssemblyName || model.displayedRegions[0].assemblyName;
     const assembly = assemblyManager.get(assemblyName);
-    if (!assembly) {
-        throw new Error(`assembly ${assemblyName} not found`);
-    }
-    if (!assembly.regions) {
-        throw new Error(`assembly ${assemblyName} regions not loaded`);
-    }
     function getTrackName(trackId) {
-        return trackId !== undefined ? session.getTracksById()[trackId]?.name : '';
+        const conf = trackId !== undefined ? session.getTrackById(trackId) : undefined;
+        return conf ? readConfObject(conf, 'name') : '';
     }
-    async function handleClick(result) {
-        if (result.hasLocation()) {
-            await navToOption({
-                option: result,
-                model,
-                assemblyName,
-            });
+    // the raw locString, prettified to the assembly's canonical refName when the
+    // assembly is loaded and the string parses. A result the assembly can't
+    // resolve is still listed as-is rather than blowing up the dialog: the Go
+    // button navigates through navToOption, which reports its own failure
+    function formatLocation(locString) {
+        if (assembly && locString) {
+            try {
+                const loc = parseLocString(locString, refName => assembly.isValidRefName(refName));
+                return assembleLocString({
+                    ...loc,
+                    refName: assembly.getCanonicalRefName2(loc.refName),
+                });
+            }
+            catch (e) {
+                console.warn('failed to parse location string', locString, e);
+                return locString;
+            }
         }
         else {
-            const location = result.getLabel();
-            const newRegion = assembly?.regions?.find(region => location === region.refName);
-            if (newRegion) {
-                model.setDisplayedRegions([newRegion]);
-                model.showAllRegions();
-            }
-            await pluginManager.evaluateAsyncExtensionPoint('LinearGenomeView-searchResultSelected', undefined, { session, result, model, assemblyName });
+            return locString;
         }
     }
-    return (_jsx(TableContainer, { component: Paper, children: _jsxs(Table, { children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { children: "Name" }), _jsx(TableCell, { align: "right", children: "Location" }), _jsx(TableCell, { align: "right", children: "Track" }), _jsx(TableCell, { align: "right" })] }) }), _jsx(TableBody, { children: searchResults.map(result => {
-                        const locString = result.getLocation();
-                        let loc;
-                        try {
-                            loc = locString
-                                ? parseLocString(locString, refName => assembly.isValidRefName(refName))
-                                : undefined;
-                        }
-                        catch (e) { }
-                        return (_jsxs(TableRow, { children: [_jsx(TableCell, { component: "th", scope: "row", children: result.getLabel() }), _jsx(TableCell, { align: "right", children: loc
-                                        ? assembleLocString({
-                                            ...loc,
-                                            refName: assembly.getCanonicalRefName(loc.refName) ||
-                                                loc.refName,
-                                        })
-                                        : locString }), _jsx(TableCell, { align: "right", children: getTrackName(result.getTrackId()) || 'N/A' }), _jsx(TableCell, { align: "right", children: _jsx(Button, { onClick: async () => {
-                                            try {
-                                                await handleClick(result);
-                                            }
-                                            catch (e) {
-                                                console.error(e);
-                                                session.notifyError(`${e}`, e);
-                                            }
-                                            handleClose();
-                                        }, color: "primary", variant: "contained", children: "Go" }) })] }, result.getId()));
-                    }) })] }) }));
-}
+    // A hit in a track that is already on screen is usually the one meant, so it
+    // is listed first rather than given a control that says so. sort is stable,
+    // so everything else keeps the ranked order it arrived in.
+    const ordered = [...searchResults].sort((a, b) => Number(isOpenInView(b, model)) - Number(isOpenInView(a, model)));
+    return (_jsx(TableContainer, { component: Paper, children: _jsxs(Table, { children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { children: "Name" }), _jsx(TableCell, { align: "right", children: "Location" }), _jsx(TableCell, { align: "right", children: "Track" }), _jsx(TableCell, { align: "right" })] }) }), _jsx(TableBody, { children: ordered.map(result => (_jsxs(TableRow, { children: [_jsx(TableCell, { component: "th", scope: "row", children: result.getLabel() }), _jsx(TableCell, { align: "right", children: formatLocation(result.getLocation()) }), _jsx(TableCell, { align: "right", children: getTrackName(result.getTrackId()) || 'N/A' }), _jsx(TableCell, { align: "right", children: _jsx(Button, { onClick: async () => {
+                                        try {
+                                            await navToOption({
+                                                option: result,
+                                                model,
+                                                assemblyName,
+                                            });
+                                        }
+                                        catch (e) {
+                                            console.error(e);
+                                            session.notifyError(`${e}`, e);
+                                        }
+                                        handleClose();
+                                    }, color: "primary", variant: "contained", children: "Go" }) })] }, result.getId()))) })] }) }));
+});
+export default SearchResultsTable;

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

@@ -0,0 +1,5 @@
+import type { LinearGenomeViewModel } from '../index.ts';
+declare const SequenceFeatureHoverHighlight: ({ model, }: {
+    model: LinearGenomeViewModel;
+}) => import("react").JSX.Element;
+export default SequenceFeatureHoverHighlight;

package/esm/LinearGenomeView/components/SequenceFeatureHoverHighlight.js

@@ -0,0 +1,37 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { observer } from 'mobx-react';
+import ConnectedHoverHighlight from './ConnectedHoverHighlight.js';
+import HoverPositionHighlight from './HoverPositionHighlight.js';
+// A feature-detail widget is "connected" to this view when its `view` reference
+// points back at it; that widget's sequence panel publishes the hovered base as
+// `sequenceHoverPosition`.
+function isFeatureWidgetForView(w, viewId) {
+    const candidate = w;
+    return (!!candidate &&
+        !!candidate.sequenceFeatureDetails &&
+        candidate.view?.id === viewId);
+}
+// The same panel also opens straight off a feature's right-click menu, where it
+// is owned by the display rather than by a widget — so the view's own displays
+// publish hover positions too.
+function displayHoverPosition(display) {
+    const candidate = display;
+    return candidate?.sequenceHoverPosition;
+}
+// Draws a crosshair on the LGV at the base a connected feature-detail sequence
+// panel is hovering, so mousing over the sequence readout points at the genome.
+const SequenceFeatureHoverHighlight = observer(function SequenceFeatureHoverHighlight({ model, }) {
+    return (_jsxs(_Fragment, { children: [_jsx(ConnectedHoverHighlight, { model: model, getPosition: (widget, viewId) => isFeatureWidgetForView(widget, viewId)
+                    ? widget.sequenceHoverPosition
+                    : undefined }), model.tracks
+                .flatMap(track => track.displays)
+                .flatMap(display => {
+                const position = displayHoverPosition(display);
+                return position
+                    ? [
+                        _jsx(HoverPositionHighlight, { model: model, position: position }, `hover-${display.id}`),
+                    ]
+                    : [];
+            })] }));
+});
+export default SequenceFeatureHoverHighlight;

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

@@ -0,0 +1,2 @@
+import type PluginManager from '@jbrowse/core/PluginManager';
+export default function SequenceFeatureHoverHighlightExtensionF(pluginManager: PluginManager): void;

package/esm/LinearGenomeView/components/SequenceFeatureHoverHighlightExtension.js

@@ -0,0 +1,5 @@
+import { addExtensionElement } from '@jbrowse/core/ui';
+import SequenceFeatureHoverHighlight from './SequenceFeatureHoverHighlight.js';
+export default function SequenceFeatureHoverHighlightExtensionF(pluginManager) {
+    addExtensionElement(pluginManager, 'LinearGenomeView-TracksContainerComponent', SequenceFeatureHoverHighlight);
+}

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

@@ -0,0 +1,3 @@
+import type { SequenceSearchModeProps } from './searchModes.ts';
+declare const SequencePatternPanel: ({ model, handleClose, }: SequenceSearchModeProps) => import("react").JSX.Element;
+export default SequencePatternPanel;

package/esm/LinearGenomeView/components/SequencePatternPanel.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { LabeledCheckbox } from '@jbrowse/core/ui';
+import { TextField } from '@mui/material';
+import { observer } from 'mobx-react';
+import SearchPanelForm from './SearchPanelForm.js';
+import StrandCheckboxes from './StrandCheckboxes.js';
+import { addReferenceScanTrack } from './searchModes.js';
+const SequencePatternPanel = observer(function SequencePatternPanel({ model, handleClose, }) {
+    const [value, setValue] = useState('');
+    const [caseInsensitive, setCaseInsensitive] = useState(true);
+    const [searchForward, setSearchForward] = useState(true);
+    const [searchReverse, setSearchReverse] = useState(true);
+    let patternError;
+    try {
+        new RegExp(value);
+    }
+    catch (e) {
+        patternError = e;
+    }
+    const canSubmit = !!value && !patternError && (searchForward || searchReverse);
+    function handleSubmit() {
+        addReferenceScanTrack(model, {
+            trackId: `sequence_search_${Date.now()}`,
+            name: `Sequence search ${value}`,
+            adapter: {
+                type: 'SequenceSearchAdapter',
+                search: value,
+                searchForward,
+                searchReverse,
+                caseInsensitive,
+            },
+        });
+        handleClose();
+    }
+    return (_jsxs(SearchPanelForm, { onSubmit: handleSubmit, handleClose: handleClose, submitDisabled: !canSubmit, children: [_jsx(TextField, { size: "small", value: value, onChange: e => {
+                    setValue(e.target.value);
+                }, label: "Sequence pattern", placeholder: "e.g. AACT(C|T)", error: !!patternError, helperText: patternError ? `${patternError}` : 'Plain sequence or a regex' }), _jsx(StrandCheckboxes, { searchForward: searchForward, searchReverse: searchReverse, setSearchForward: setSearchForward, setSearchReverse: setSearchReverse, children: _jsx(LabeledCheckbox, { size: "small", checked: caseInsensitive, onChange: val => {
+                        setCaseInsensitive(val);
+                    }, label: "Case insensitive" }) })] }));
+});
+export default SequencePatternPanel;

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

@@ -1,8 +1,8 @@
 declare const SequenceSearchDialog: ({ model, handleClose, }: {
     model: {
         assemblyNames: string[];
-        showTrack: (trackId: string) => void;
+        launchTrack: (trackId: string) => Promise<unknown>;
     };
     handleClose: () => void;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default SequenceSearchDialog;

package/esm/LinearGenomeView/components/SequenceSearchDialog.js

@@ -1,65 +1,43 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { Dialog } from '@jbrowse/core/ui';
-import { getSession, isSessionWithAddTracks } from '@jbrowse/core/util';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
-import { getSnapshot } from '@jbrowse/mobx-state-tree';
-import { Button, Checkbox, DialogActions, DialogContent, FormControlLabel, FormGroup, TextField, Typography, } from '@mui/material';
+import { ToggleButton, ToggleButtonGroup } from '@mui/material';
 import { observer } from 'mobx-react';
+import CrisprGuidePanel from './CrisprGuidePanel.js';
+import MotifListPanel from './MotifListPanel.js';
+import SequencePatternPanel from './SequencePatternPanel.js';
 const useStyles = makeStyles()({
-    dialogContent: {
-        width: '40em',
+    modeBar: {
+        padding: '12px 24px 0',
     },
 });
+const MODES = [
+    {
+        id: 'pattern',
+        label: 'Sequence pattern',
+        ReactComponent: SequencePatternPanel,
+    },
+    {
+        id: 'crispr',
+        label: 'CRISPR guide RNAs',
+        ReactComponent: CrisprGuidePanel,
+    },
+    {
+        id: 'motifs',
+        label: 'Motif list',
+        ReactComponent: MotifListPanel,
+    },
+];
 const SequenceSearchDialog = observer(function SequenceSearchDialog({ model, handleClose, }) {
     const { classes } = useStyles();
-    const [value, setValue] = useState('');
-    const [searchForward, setSearchForward] = useState(true);
-    const [searchReverse, setSearchReverse] = useState(true);
-    const [caseInsensitive, setCaseInsensitive] = useState(true);
-    let error;
-    try {
-        new RegExp(value);
-    }
-    catch (e) {
-        error = e;
-    }
-    return (_jsxs(Dialog, { maxWidth: "xl", open: true, onClose: handleClose, title: "Sequence search", children: [_jsxs(DialogContent, { className: classes.dialogContent, children: [_jsx(Typography, { children: "Supply a sequence to search for. A track will be created with the resulting matches once submitted. You can also supply regex style expressions e.g. AACT(C|T)." }), _jsx(TextField, { value: value, onChange: e => {
-                            setValue(e.target.value);
-                        }, helperText: "Sequence search pattern" }), _jsxs(FormGroup, { children: [_jsx(FormControlLabel, { control: _jsx(Checkbox, { checked: searchForward, onChange: event => {
-                                        setSearchForward(event.target.checked);
-                                    } }), label: "Search forward strand" }), _jsx(FormControlLabel, { control: _jsx(Checkbox, { checked: searchReverse, onChange: event => {
-                                        setSearchReverse(event.target.checked);
-                                    } }), label: "Search reverse strand" }), _jsx(FormControlLabel, { control: _jsx(Checkbox, { checked: caseInsensitive, onChange: event => {
-                                        setCaseInsensitive(event.target.checked);
-                                    } }), label: "Case insensitive" })] }), error ? _jsx(Typography, { color: "error", children: `${error}` }) : null] }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: () => {
-                            if (value) {
-                                const trackId = `sequence_search_${Date.now()}`;
-                                const session = getSession(model);
-                                const { assemblyManager } = session;
-                                const assemblyName = model.assemblyNames[0];
-                                if (isSessionWithAddTracks(session)) {
-                                    session.addTrackConf({
-                                        trackId,
-                                        name: `Sequence search ${value}`,
-                                        assemblyNames: [assemblyName],
-                                        type: 'FeatureTrack',
-                                        adapter: {
-                                            type: 'SequenceSearchAdapter',
-                                            search: value,
-                                            searchForward,
-                                            searchReverse,
-                                            caseInsensitive,
-                                            sequenceAdapter: getSnapshot(assemblyManager.get(assemblyName)?.configuration.sequence
-                                                .adapter),
-                                        },
-                                    });
-                                    model.showTrack(trackId);
-                                }
-                            }
-                            handleClose();
-                        }, variant: "contained", color: "primary", children: "Submit" }), _jsx(Button, { onClick: () => {
-                            handleClose();
-                        }, variant: "contained", color: "secondary", children: "Close" })] })] }));
+    const [modeId, setModeId] = useState(MODES[0].id);
+    const active = MODES.find(m => m.id === modeId) ?? MODES[0];
+    const { ReactComponent } = active;
+    return (_jsxs(Dialog, { maxWidth: "xl", open: true, onClose: handleClose, title: "Sequence search", children: [_jsx("div", { className: classes.modeBar, children: _jsx(ToggleButtonGroup, { exclusive: true, fullWidth: true, size: "small", value: active.id, onChange: (_event, value) => {
+                        if (value) {
+                            setModeId(value);
+                        }
+                    }, children: MODES.map(m => (_jsx(ToggleButton, { value: m.id, children: m.label }, m.id))) }) }), _jsx(ReactComponent, { model: model, handleClose: handleClose })] }));
 });
 export default SequenceSearchDialog;

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

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+export default function StrandCheckboxes({ searchForward, searchReverse, setSearchForward, setSearchReverse, children, }: {
+    searchForward: boolean;
+    searchReverse: boolean;
+    setSearchForward: (arg: boolean) => void;
+    setSearchReverse: (arg: boolean) => void;
+    children?: ReactNode;
+}): import("react").JSX.Element;

package/esm/LinearGenomeView/components/StrandCheckboxes.js

@@ -0,0 +1,13 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LabeledCheckbox } from '@jbrowse/core/ui';
+import { FormGroup, Typography } from '@mui/material';
+// Forward/reverse strand checkboxes plus the "select at least one" guard, shared
+// by the sequence-search mode panels. Extra checkboxes for a specific panel (e.g.
+// "Case insensitive") slot in alongside via `children`.
+export default function StrandCheckboxes({ searchForward, searchReverse, setSearchForward, setSearchReverse, children, }) {
+    return (_jsxs(_Fragment, { children: [_jsxs(FormGroup, { row: true, children: [_jsx(LabeledCheckbox, { size: "small", checked: searchForward, onChange: val => {
+                            setSearchForward(val);
+                        }, label: "Forward strand" }), _jsx(LabeledCheckbox, { size: "small", checked: searchReverse, onChange: val => {
+                            setSearchReverse(val);
+                        }, label: "Reverse strand" }), children] }), !searchForward && !searchReverse ? (_jsx(Typography, { color: "error", variant: "body2", children: "Select at least one strand" })) : null] }));
+}

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

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

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, {}) }));
+});