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

package/esm/LinearGenomeView/components/SearchResultsTable.js

@@ -1,64 +1,39 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { assembleLocString, getEnv, getSession, parseLocString, } from '@jbrowse/core/util';
+import { canonicalLocString } from '@jbrowse/core/TextSearch/places';
+import { readConfObject } from '@jbrowse/core/configuration';
+import { SanitizedHTML } from '@jbrowse/core/ui';
+import { getSession } 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 } from '../../searchUtils.js';
+const SearchResultsTable = observer(function SearchResultsTable({ searchResults, assemblyName, model, handleClose, onPick, }) {
     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,
-            });
-        }
-        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 });
-        }
+    // A location the assembly can't resolve is listed as-is: Go navigates
+    // through navToOption, which reports its own failure
+    function formatLocation(locString) {
+        return assembly && locString
+            ? canonicalLocString(locString, assembly)
+            : 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: _jsx(SanitizedHTML, { html: getTrackName(result.getTrackId()) || 'N/A' }) }), _jsx(TableCell, { align: "right", children: _jsx(Button, { onClick: async () => {
+                                        try {
+                                            await onPick(result);
+                                        }
+                                        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,6 @@
+import type { SequenceSearchModel } from './searchModes.ts';
 declare const SequenceSearchDialog: ({ model, handleClose, }: {
-    model: {
-        assemblyNames: string[];
-        showTrack: (trackId: string) => void;
-    };
+    model: SequenceSearchModel;
     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,156 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef } from 'react';
-import { ErrorMessage, ResizeHandle } from '@jbrowse/core/ui';
+import { useEffect, useState } from 'react';
+import { ErrorBanner, ResizeHandle } from '@jbrowse/core/ui';
 import { ErrorBoundary } from '@jbrowse/core/ui/ErrorBoundary';
 import { cx, makeStyles } from '@jbrowse/core/util/tss-react';
+import { TrackOverlaySlot } from '@jbrowse/display-ui';
 import { isAlive } from '@jbrowse/mobx-state-tree';
 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 would put the pixels off the model's offset
+    // arithmetic, which the breakpoint split view draws its connectors from.
     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',
+        marginBottom: 8,
+    },
+    trackLabelOverlap: {
+        position: 'absolute',
+    },
+    // in flow, so the track keeps the banner's height, and raised over the
+    // `PaddingBlocks` painted after it
+    crashBanner: {
+        position: 'relative',
+        zIndex: 1,
+    },
+});
+// Measures the in-flow label band, the distance from the Paper's content top to
+// the rendering container, into the model. Observes the Paper: it grows and
+// shrinks with the label, the label setting, and the display, and each of those
+// can move the container. Published after a requestAnimationFrame like
+// useWidthSetter, and cleared on unmount so a removed track leaves no band.
+function useTrackLabelBand(model, trackId) {
+    const [paper, setPaper] = useState(null);
+    const [container, setContainer] = useState(null);
+    useEffect(() => {
+        if (paper && container && 'ResizeObserver' in window) {
+            let token;
+            const publish = () => {
+                token = requestAnimationFrame(() => {
+                    if (isAlive(model)) {
+                        const paperRect = paper.getBoundingClientRect();
+                        const band = container.getBoundingClientRect().top -
+                            paperRect.top -
+                            paper.clientTop;
+                        model.setTrackLabelBand(trackId, band);
+                    }
+                });
+            };
+            publish();
+            const observer = new ResizeObserver(publish);
+            observer.observe(paper);
+            return () => {
+                observer.disconnect();
+                if (token !== undefined) {
+                    cancelAnimationFrame(token);
+                }
+                if (isAlive(model)) {
+                    model.setTrackLabelBand(trackId, 0);
+                }
+            };
+        }
+        return undefined;
+    }, [paper, container, model, trackId]);
+    return { setPaper, setContainer };
+}
 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]). The one narrowing to the linear shape, handed down rather
+    // than repeated, so a track's chrome and its body can't read two displays.
+    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;
+    // A label in flow is a row of track height, which is most of what minimizing
+    // buys back — so a minimized track overlaps its label whatever the setting
+    // says, and there is nothing under it to print over. `prefersOffset` is the
+    // display asking for the offset row in 'overlapping' mode, because its left
+    // edge carries an axis or a sidebar the label would cover.
+    const trackLabelStyle = track.minimized ||
+        (model.effectiveTrackLabels === 'overlapping' && !display.prefersOffset)
+        ? classes.trackLabelOverlap
+        : classes.trackLabelOffset;
+    const { setPaper, setContainer } = useTrackLabelBand(model, track.trackId);
+    return (_jsxs(Paper, { ref: setPaper, 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, { FallbackComponent: e => (_jsx("div", { className: classes.crashBanner, children: _jsx(ErrorBanner, { error: e.error, onReset: e.resetErrorBoundary }) })), children: _jsx(TrackRenderingContainer, { model: model, track: track, display: display, ref: setContainer }) }, display.id) }), _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,36 @@
 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,
+        display: 'inline-flex',
+        alignItems: 'center',
+        maxWidth: 'calc(100% - 16px)',
     },
+    // one line: a long name wrapping over a narrow view covered the data below
     trackName: {
-        margin: '0 auto',
-        width: '90%',
-        fontSize: '0.8rem',
+        margin: theme.spacing(0, 0.5),
+        minWidth: 0,
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
         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), "data-testid": `trackLabel-${track.trackId}`, 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;