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

package/esm/LinearGenomeView/afterAttach.js

@@ -234,9 +234,8 @@ export function setupInitAutorun(self) {
         name: 'LGVInit',
         // `init` is what makes hasSomethingToShow / awaitingInitNavigation report
         // "loading"
-        // until navigation populates displayedRegions, so the alternative gate
-        // (clearing `init` up front, the way SpreadsheetView does) would flash the
-        // import form mid-load.
+        // until navigation populates displayedRegions, so clearing `init` up front
+        // would flash the import form mid-load.
         ready: () => self.initialized,
         // No pre-materialization phase to protect: the view is its own single row,
         // and `error` already derives a failed init assembly declaratively (via

package/esm/LinearGenomeView/components/HeaderSearchBoxes.js

@@ -13,8 +13,11 @@ const useStyles = makeStyles()(theme => ({
         display: 'flex',
         alignItems: 'center',
         gap: theme.spacing(0.5),
+        minWidth: 0,
     },
 }));
+const MIN_BOX_WIDTH = 100;
+const boxStyle = { margin: 0, minWidth: MIN_BOX_WIDTH };
 // One row's locate control in a header that stacks several linear genome views:
 // the compact search box, then the assembly name and the span on screen. The
 // comparative view and the breakpoint split view each draw one per row, and each
@@ -23,6 +26,6 @@ const useStyles = makeStyles()(theme => ({
 const HeaderSearchBoxes = observer(function HeaderSearchBoxes({ view, }) {
     const { classes } = useStyles();
     const { assemblyDisplayNames, coarseTotalBp } = view;
-    return (_jsxs("span", { className: classes.searchBox, children: [_jsx(SearchBox, { model: view, showHelp: false, maxWidth: 250, minWidth: 100, style: { margin: 0 } }), _jsxs(Typography, { variant: "body2", color: "text.secondary", className: classes.bp, children: [assemblyDisplayNames.join(','), " ", getBpDisplayStr(coarseTotalBp)] })] }));
+    return (_jsxs("span", { className: classes.searchBox, children: [_jsx(SearchBox, { model: view, showHelp: false, maxWidth: 250, minWidth: MIN_BOX_WIDTH, style: boxStyle }), _jsxs(Typography, { variant: "body2", color: "text.secondary", className: classes.bp, children: [assemblyDisplayNames.join(','), " ", getBpDisplayStr(coarseTotalBp)] })] }));
 });
 export default HeaderSearchBoxes;

package/esm/LinearGenomeView/components/Highlight.js

@@ -17,7 +17,7 @@ const Highlight = observer(function Highlight({ model, highlight, }) {
     const label = getSession(model).highlightLabelsVisible
         ? highlight.label
         : undefined;
-    return coords ? (_jsx(HighlightBand, { coords: coords, background: bandColor.toRgbString(), label: label, children: coords.width >= CHIP_MIN_WIDTH ? (_jsx(HighlightChip, { color: bandColor, label: label, tooltip: highlight.label ?? 'Highlighted region', menuItems: [
+    return coords ? (_jsx(HighlightBand, { coords: coords, background: bandColor.toRgbString(), label: label, gaps: model.nonGenomicTrackBands(), children: coords.width >= CHIP_MIN_WIDTH ? (_jsx(HighlightChip, { color: bandColor, label: label, tooltip: highlight.label ?? 'Highlighted region', menuItems: [
                 {
                     label: 'Dismiss highlight',
                     icon: CloseIcon,

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

@@ -1,9 +1,17 @@
-export default function HighlightBand({ coords, background, label, children, }: {
+export declare function gapMask(gaps: {
+    top: number;
+    height: number;
+}[]): string;
+export default function HighlightBand({ coords, background, label, gaps, children, }: {
     coords: {
         left: number;
         width: number;
     };
     background: string;
     label?: string;
+    gaps?: {
+        top: number;
+        height: number;
+    }[];
     children?: React.ReactNode;
 }): import("react").JSX.Element;

package/esm/LinearGenomeView/components/HighlightBand.js

@@ -24,11 +24,20 @@ const useStyles = makeStyles()(theme => ({
         color: theme.palette.text.primary,
     },
 }));
+export function gapMask(gaps) {
+    const stops = gaps.flatMap(g => [
+        `#000 ${g.top}px`,
+        `transparent ${g.top}px`,
+        `transparent ${g.top + g.height}px`,
+        `#000 ${g.top + g.height}px`,
+    ]);
+    return `linear-gradient(to bottom, ${stops.join(', ')})`;
+}
 // OverviewHighlight stays separate (different bpToPx API). A non-interactive
 // colored band with an
 // optional top label; when `children` (the highlight chip) is passed it renders
 // that instead of the plain label. Visibility is toggled from the view menu
-export default function HighlightBand({ coords, background, label, children, }) {
+export default function HighlightBand({ coords, background, label, gaps, children, }) {
     const { classes } = useStyles();
     const content = children ??
         (label ? (_jsx(Typography, { variant: "caption", className: classes.label, noWrap: true, children: label })) : null);
@@ -36,5 +45,8 @@ export default function HighlightBand({ coords, background, label, children, })
             transform: `translateX(${coords.left}px)`,
             width: coords.width,
             background,
+            ...(gaps?.length
+                ? { maskImage: gapMask(gaps), WebkitMaskImage: gapMask(gaps) }
+                : undefined),
         }, children: coords.width > 3 && content ? (_jsx("div", { className: classes.overlay, children: content })) : null }));
 }

package/esm/LinearGenomeView/components/LinearGenomeViewContainer.js

@@ -1,5 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Suspense, lazy, useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { VIEW_HEADER_HEIGHT } from '@jbrowse/core/ui';
 import { getSession } from '@jbrowse/core/util';
 import { LGV_HEADER_HEIGHT_VAR, SCROLL_PORT_HEIGHT_VAR, VIEW_HEADER_HEIGHT_VAR, useChromeHeightVar, useFocusOnInteraction, } from '@jbrowse/core/util/hooks';
@@ -11,12 +11,11 @@ import { stickyChromeTops } from '../stickyChrome.js';
 import Header from './Header.js';
 import MiniControls from './MiniControls.js';
 import NavigationAnnouncer from './NavigationAnnouncer.js';
+import NoTracksActiveButton from './NoTracksActiveButton.js';
 import ResizeAllTracksHandle from './ResizeAllTracksHandle.js';
 import Rubberband from './Rubberband.js';
 import TrackContainer from './TrackContainer.js';
 import TracksContainer from './TracksContainer.js';
-// lazies
-const NoTracksActiveButton = lazy(() => import('./NoTracksActiveButton.js'));
 const useStyles = makeStyles()(theme => ({
     header: {
         background: theme.palette.background.paper,
@@ -104,7 +103,7 @@ const LinearGenomeViewContainer = observer(function LinearGenomeViewContainer({
                     .map(d => d.hoveredFeature)
                     .find(Boolean);
                 session.setHovered({ hoverPosition, hoverFeature });
-            }, children: [_jsx(NavigationAnnouncer, { model: model }), _jsxs("div", { ref: headerRef, "data-testid": `lgv-header-${model.id}`, className: classes.header, style: { position: stickyViewHeaders ? 'sticky' : undefined }, children: [_jsx(Header, { model: model }), hideHeader ? _jsx(MiniControls, { model: model }) : null] }), _jsx("div", { ref: tracksRef, children: model.scalebarOnly ? (_jsx(Rubberband, { model: model })) : (_jsx(TracksContainer, { model: model, children: !tracks.length ? (_jsx(Suspense, { fallback: null, children: _jsx(NoTracksActiveButton, { model: model }) })) : (_jsxs(_Fragment, { children: [pinnedTracks.length ? (_jsx(Paper, { elevation: 2, "data-testid": "pinned-tracks", className: classes.pinnedTracks, style: {
+            }, children: [_jsx(NavigationAnnouncer, { model: model }), _jsxs("div", { ref: headerRef, "data-testid": `lgv-header-${model.id}`, className: classes.header, style: { position: stickyViewHeaders ? 'sticky' : undefined }, children: [_jsx(Header, { model: model }), hideHeader ? _jsx(MiniControls, { model: model }) : null] }), _jsx("div", { ref: tracksRef, children: model.scalebarOnly ? (_jsx(Rubberband, { model: model })) : (_jsx(TracksContainer, { model: model, children: !tracks.length ? (_jsx(NoTracksActiveButton, { model: model })) : (_jsxs(_Fragment, { children: [pinnedTracks.length ? (_jsx(Paper, { elevation: 2, "data-testid": "pinned-tracks", className: classes.pinnedTracks, style: {
                                         top: stickyTops.pinnedTracks,
                                         // the scroll port this sticks in, not the window: it is
                                         // under the app bar in the classic stack, a dockview

package/esm/LinearGenomeView/components/MiniControls.js

@@ -14,19 +14,24 @@ const useStyles = makeStyles()(theme => ({
     background: {
         position: 'absolute',
         right: 0,
-        background: theme.palette.background.paper,
         // needed when sticky header is off in lgv, e.g. in breakpoint split view
         zIndex: 2,
     },
     focusedBackground: {
-        background: alpha(theme.palette.secondary.light, 0.2),
+        backgroundColor: alpha(theme.palette.secondary.light, 0.2),
     },
 }));
 const MiniControls = observer(function MiniControls({ model, }) {
     const { classes } = useStyles();
     const { id, scalebarOnly } = model;
     const { focusedViewId } = getSession(model);
-    return (_jsx(Paper, { className: classes.background, children: _jsxs(Paper, { className: focusedViewId === id ? classes.focusedBackground : undefined, children: [_jsx(Tooltip, { title: "Open track selector", children: _jsx(IconButton, { size: "small", onClick: () => {
+    // A ruler-only row is shorter than these controls, so they rise from the
+    // ruler's bottom edge rather than hang from its top: a nested row always has
+    // chrome above it, while the last row of a stack has only the view's frame
+    // below.
+    return (_jsx(Paper, { "data-testid": "lgv-mini-controls", className: classes.background, style: scalebarOnly
+            ? { top: model.scalebarHeight, transform: 'translateY(-100%)' }
+            : undefined, children: _jsxs(Paper, { className: focusedViewId === id ? classes.focusedBackground : undefined, children: [_jsx(Tooltip, { title: "Open track selector", children: _jsx(IconButton, { size: "small", onClick: () => {
                             model.activateTrackSelector();
                         }, children: _jsx(TrackSelectorIcon, { fontSize: "small" }) }) }), _jsx(CascadingMenuButton, { menuItems: () => model.menuItems(), children: _jsx(MoreVertIcon, { fontSize: "small" }) }), _jsx(Tooltip, { title: scalebarOnly ? 'Show tracks' : 'Show ruler only', children: _jsx(IconButton, { size: "small", onClick: () => {
                             model.setScalebarOnly(!scalebarOnly);

package/esm/LinearGenomeView/components/SearchResultsTable.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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';
@@ -12,7 +11,7 @@ const SearchResultsTable = observer(function SearchResultsTable({ searchResults,
     const assembly = assemblyManager.get(assemblyName);
     function getTrackName(trackId) {
         const conf = trackId !== undefined ? session.getTrackById(trackId) : undefined;
-        return conf ? readConfObject(conf, 'name') : '';
+        return conf?.name ?? '';
     }
     // A location the assembly can't resolve is listed as-is: Go navigates
     // through navToOption, which reports its own failure

package/esm/LinearGenomeView/components/TrackLabel.js

@@ -13,7 +13,10 @@ const useStyles = makeStyles()(theme => ({
     root: {
         // above breakpoint split view
         zIndex: 200,
-        background: theme.palette.background.paper,
+        ...(theme.palette.mode === 'dark' && {
+            outline: `1px solid ${theme.palette.divider}`,
+            outlineOffset: -1,
+        }),
         display: 'inline-flex',
         alignItems: 'center',
         maxWidth: 'calc(100% - 16px)',

package/esm/LinearGenomeView/model.d.ts

@@ -1698,6 +1698,15 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
         width: number;
         left: number;
     } | undefined;
+    /**
+     * #method
+     * y ranges, from the top of the highlight bands, of tracks whose display
+     * sets `drawsGenomicCoordinates` to false; the bands skip them
+     */
+    nonGenomicTrackBands(): {
+        top: number;
+        height: any;
+    }[];
     /**
      * #method
      * like getHighlightCoords but laid out against the overview scalebar and
@@ -3403,6 +3412,15 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
         width: number;
         left: number;
     } | undefined;
+    /**
+     * #method
+     * y ranges, from the top of the highlight bands, of tracks whose display
+     * sets `drawsGenomicCoordinates` to false; the bands skip them
+     */
+    nonGenomicTrackBands(): {
+        top: number;
+        height: any;
+    }[];
     /**
      * #method
      * like getHighlightCoords but laid out against the overview scalebar and

package/esm/LinearGenomeView/model.js

@@ -2657,6 +2657,21 @@ export function stateModelFactory(pluginManager) {
         getHighlightCoords(region) {
             return getLayoutHighlightCoords(self, canonicalHighlight(self, region));
         },
+        /**
+         * #method
+         * y ranges, from the top of the highlight bands, of tracks whose display
+         * sets `drawsGenomicCoordinates` to false; the bands skip them
+         */
+        nonGenomicTrackBands() {
+            const y0 = self.headerHeight + self.scalebarHeight;
+            return [...self.pinnedTracks, ...self.unpinnedTracks].flatMap(track => {
+                const display = track.activeDisplay;
+                const top = self.getTrackYOffset(track.configuration.trackId);
+                return display.drawsGenomicCoordinates === false && top !== undefined
+                    ? [{ top: top - y0, height: self.trackHeight(track) }]
+                    : [];
+            });
+        },
         /**
          * #method
          * like getHighlightCoords but laid out against the overview scalebar and

package/esm/LinearGenomeView/svgcomponents/SVGLinearGenomeView.js

@@ -34,7 +34,7 @@ export async function renderToSvg(model, opts) {
     // itself.
     const { tracks, displayResults, tracksHeight, legendWidth, skippedTracks } = await renderViewTracks({
         view: model,
-        opts,
+        opts: { ...opts, fontSize },
         theme,
         textHeight,
         trackLabels,

package/esm/LinearGenomeView/svgcomponents/SVGTrackLabel.js

@@ -3,17 +3,16 @@ import { usePalette } from '@jbrowse/core/ui/PaletteContext';
 import { stripAlpha } from '@jbrowse/core/util';
 import { TRACK_LABEL_GAP, insetLabelBaselineY, offsetLabelBaselineY, } from './util.js';
 // Where the label sits, per mode. 'left' right-aligns in the gutter
-// trackLabelLeftOffset reserved (hence the shared TRACK_LABEL_GAP); the other
-// modes hang off the leftmost visible content at `x`, either just above the
-// track body ('offset') or inset over it ('overlapping').
+// trackLabelLeftOffset reserved (hence the shared TRACK_LABEL_GAP), beside the
+// first row. The other modes hang off the leftmost visible content
+// at `x`, either just above the track body ('offset') or inset over it
+// ('overlapping').
 //
 // Every mode is placed on its alphabetic baseline (the SVG default, so no
-// dominantBaseline is emitted at all): 'offset' so its descenders land a known
-// distance above the track body — the band it sits in is `textHeight` tall, and
-// offsetLabelBaselineY owns that arithmetic — and 'left'/'overlapping' so their
-// ascenders stay inside the track box they align with. 'left' used to be pinned
-// at a hardcoded y=20 on a hanging baseline, which neither scaled with fontSize
-// nor stayed inside a track shorter than ~35px.
+// dominantBaseline is emitted at all): 'offset' so its descenders land a known distance above the track body — the band is
+// `textHeight` tall, and offsetLabelBaselineY owns that arithmetic — and
+// 'left'/'overlapping' so their ascenders stay inside the track box they align
+// with.
 function labelPosition({ trackLabels, trackLabelOffset, textHeight, fontSize, x, }) {
     if (trackLabels === 'left') {
         return {

package/esm/LinearGenomeView/svgcomponents/SVGTracks.js

@@ -17,6 +17,6 @@ export default function SVGTracks({ displayResults, model, textHeight, fontSize,
             const display = track.displays[0];
             const currentOffset = offsets[i];
             const textOffset = labelOffset(track, trackLabels, textHeight);
-            return (_jsxs("g", { transform: `translate(0 ${currentOffset})`, children: [_jsx(SvgClipRect, { id: `track-clip-${svgNodeId(model)}-${conf.trackId}`, x: -leftBuffer, y: textOffset, width: model.width + trackLabelOffset + leftBuffer + legendWidth, height: display.height, children: _jsxs("g", { transform: `translate(${trackLabelOffset} ${textOffset})`, children: [result, exportsTooLargeNote(display) ? null : (_jsx(SVGRegionSeparators, { model: model, height: display.height }))] }) }), _jsx(SVGTrackLabel, { trackName: trackName, fontSize: fontSize, textHeight: textHeight, trackLabels: trackLabelMode(track, trackLabels), trackLabelOffset: trackLabelOffset, x: x })] }, conf.trackId));
+            return (_jsxs("g", { transform: `translate(0 ${currentOffset})`, children: [_jsx(SvgClipRect, { id: `track-clip-${svgNodeId(model)}-${conf.trackId}`, x: -leftBuffer, y: textOffset, width: model.width + trackLabelOffset + leftBuffer + legendWidth, height: display.height, children: _jsxs("g", { transform: `translate(${trackLabelOffset} ${textOffset})`, children: [result, exportsTooLargeNote(display) ? null : (_jsx(SVGRegionSeparators, { model: model, height: display.height }))] }) }), _jsx(SVGTrackLabel, { trackName: trackName, fontSize: fontSize, textHeight: textHeight, trackLabels: trackLabelMode(track, trackLabels), trackLabelOffset: trackLabelOffset, x: x + trackLabelOffset })] }, conf.trackId));
         }) }));
 }

package/esm/LinearGenomeView/svgcomponents/renderViewTracks.d.ts

@@ -1,4 +1,5 @@
 import type { ExportSvgOptions, TrackLabelMode } from '../types.ts';
+import type { LgvSvgExportable } from '@jbrowse/display-kit/renderDisplaySvg';
 import type { ExportSvgDisplayOptions } from '@jbrowse/display-kit/types';
 import type { ThemeOptions } from '@mui/material';
 import type { ReactNode } from 'react';
@@ -7,6 +8,7 @@ export interface SvgExportTrack {
     displays: {
         height: number;
         svgLegendWidth?: () => number;
+        svgSidebarWidth?: LgvSvgExportable['svgSidebarWidth'];
         /**
          * Optional, and the option is the point: SVG export is a substantial extra
          * implementation for a display type, and a third-party plugin that has not

package/esm/LinearGenomeView/svgcomponents/useViewSvgFigure.js

@@ -125,7 +125,15 @@ const FrozenSvgFigure = memo(function FrozenSvgFigure({ view, snapshot, }) {
  * question about regions and is true before a track is instantiated (the first
  * figure then draws a header over nothing, and nothing else ever changes to
  * correct it); **their heights and minimized flags**, since the geometry is
- * derived from them; **the width**, since a resize can widen the canvas without
+ * derived from them; **their configs**, since a display's settings are slots on
+ * the track config and a shown track's snapshot spells that config as its id;
+ * **the legend sections a reader dismissed** and **the per-group state**
+ * (hidden sections, collapses, height overrides: `groupStateKey`), which are
+ * volatile and in no snapshot; **the reload counter**, since a Retry or a Force
+ * load leaves every snapshot as it was while the figure has an error or a
+ * too-large note to replace; **the view's coloring toggles** (`colorByCDS`,
+ * `showAminoAcids`), named one by one because the view's own snapshot moves
+ * every pan frame; **the width**, since a resize can widen the canvas without
  * moving the locus; **the theme**, since each display bakes colors into its own
  * bodies, so a figure from the other mode is not stale but unreadable; and **the
  * highlight bands**, which are drawn in the figure and are the one thing in it a
@@ -133,8 +141,10 @@ const FrozenSvgFigure = memo(function FrozenSvgFigure({ view, snapshot, }) {
  *
  * A plugin's own overlay, through `LinearGenomeView-HighlightSVGComponent`, is
  * state this cannot see, so a change to it shows up at the figure's next
- * redraw rather than at once. Subscribing from inside the figure is the thing
- * that must not happen — see the note at the top of the file.
+ * redraw rather than at once. So does a track's vertical scroll, which moves
+ * every wheel frame and has no settled copy to key on. Subscribing from inside
+ * the figure is the thing that must not happen — see the note at the top of
+ * the file.
  */
 function figureKey(view, themeName) {
     // A closed view is not an error, it is a host doing an ordinary thing in an
@@ -156,9 +166,19 @@ function figureKey(view, themeName) {
         view.coarseVisibleLocStrings,
         view.coarseBpPerPx,
         view.width,
-        // the snapshot carries pinned, minimized and the display settings a body
-        // bakes in; the effective height is a getter, so it is read beside it
-        view.tracks.map(track => [getSnapshot(track), track.displays[0]?.height]),
+        view.tracks.map(track => {
+            const display = track.displays[0];
+            return [
+                getSnapshot(track),
+                getSnapshot(track.configuration),
+                display?.height,
+                display?.dismissedLegendSections,
+                display?.groupStateKey,
+                display?.reloadCounter,
+            ];
+        }),
+        view.colorByCDS,
+        view.showAminoAcids,
         session.getActiveThemeOptions?.(themeName),
         session.highlightsVisible ? view.highlights : false,
         session.highlightLabelsVisible,

package/esm/LinearGenomeView/svgcomponents/util.d.ts

@@ -1,21 +1,24 @@
 import type { TrackLabelMode } from '../types.ts';
 import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
 import type { TrackCatalog } from '@jbrowse/core/util';
+import type { LgvSvgExportable } from '@jbrowse/display-kit/renderDisplaySvg';
+import type { ExportTextStyle } from '@jbrowse/display-kit/types';
 import type { ReactNode } from 'react';
+type SidebarDisplay = Pick<LgvSvgExportable, 'svgSidebarWidth'>;
 interface TrackHeights {
-    displays: {
+    displays: ({
         height: number;
         prefersOffset?: boolean;
-    }[];
+    } & SidebarDisplay)[];
 }
 export interface SvgDisplayResult {
     track: {
         configuration: AnyConfigurationModel;
-        displays: {
+        displays: ({
             height: number;
             regionTooLarge?: boolean;
             drawsWhenTooLarge?: boolean;
-        }[];
+        } & SidebarDisplay)[];
     };
     result: ReactNode;
 }
@@ -81,18 +84,25 @@ export declare function getRulerLayout(rulerHeight: number): {
 };
 export declare const refNameLabelBoxHeight: number;
 export declare const refNameLabelBaselineY: number;
-export declare function trackLabelMode(track: TrackHeights, trackLabels: TrackLabelMode): TrackLabelMode;
+export declare function trackLabelMode(track: {
+    displays: ({
+        prefersOffset?: boolean;
+    } & SidebarDisplay)[];
+}, trackLabels: TrackLabelMode): TrackLabelMode;
 export declare function labelOffset(track: TrackHeights, trackLabels: TrackLabelMode, textHeight: number): number;
+interface SidebarTrack {
+    configuration: AnyConfigurationModel;
+    displays: SidebarDisplay[];
+}
 export declare const TRACK_LABEL_GAP = 40;
 export declare function trackLabelLeftOffset({ tracks, trackLabels, fontSize, fontFamily, session, }: {
-    tracks: {
-        configuration: AnyConfigurationModel;
-    }[];
+    tracks: SidebarTrack[];
     trackLabels: TrackLabelMode;
     fontSize: number;
     fontFamily?: string;
     session: TrackCatalog;
 }): number;
+export declare function trackSidebarWidth(track: Pick<SidebarTrack, 'displays'>, text?: ExportTextStyle): number;
 export declare function trackBoxHeight(track: TrackHeights, trackLabels: TrackLabelMode, textHeight: number): number;
 export declare function trackBoxOffsets(tracks: TrackHeights[], trackLabels: TrackLabelMode, textHeight: number): number[];
 export declare function totalHeight(tracks: TrackHeights[], trackLabels: TrackLabelMode, textHeight: number): number;

package/esm/LinearGenomeView/svgcomponents/util.js

@@ -179,12 +179,15 @@ export const refNameLabelBaselineY = labelBaselineFromTop(0, REF_NAME_LABEL_FONT
 // The mode one track's label is drawn in. 'overlapping' yields to 'offset' for a
 // display that `prefersOffset`, as TrackContainer does on screen: its left edge
 // carries content — an axis, a sample's genotypes — the label would print over.
+// 'left' yields to 'offset' for a track whose sidebar holds the gutter beside
+// its rows.
 export function trackLabelMode(track, trackLabels) {
-    return trackLabels === 'overlapping' && track.displays[0]?.prefersOffset
+    return (trackLabels === 'overlapping' && track.displays[0]?.prefersOffset) ||
+        (trackLabels === 'left' && trackSidebarWidth(track) > 0)
         ? 'offset'
         : trackLabels;
 }
-// space the label pushes a track's body down by; only 'offset' mode does
+// space an 'offset' label pushes a track's body down by
 export function labelOffset(track, trackLabels, textHeight) {
     return trackLabelMode(track, trackLabels) === 'offset' ? textHeight : 0;
 }
@@ -193,9 +196,10 @@ export function labelOffset(track, trackLabels, textHeight) {
 // so it and trackLabelLeftOffset must agree or the widest name overflows the
 // gutter it was measured for.
 export const TRACK_LABEL_GAP = 40;
-// Horizontal gutter reserved for 'left' track labels (0 in every other mode).
-// Takes an already-minimized-filtered track list, so the reserved width matches
-// the labels that actually get drawn.
+// Horizontal gutter left of the track bodies: the widest of each track's
+// sidebar and of each name drawn 'left', plus TRACK_LABEL_GAP. Takes an
+// already-minimized-filtered track list, so the reserved width matches the
+// labels that actually get drawn.
 //
 // `fontFamily` is the export's own font option, and it has to reach the ruler
 // here: the labels are drawn in it (wrapSvgExport puts it on the root <svg>,
@@ -212,11 +216,14 @@ export const TRACK_LABEL_GAP = 40;
 // `getScalebarRefNameLabels`, an on-screen model getter, so making them
 // family-aware means threading an export option through screen state.
 export function trackLabelLeftOffset({ tracks, trackLabels, fontSize, fontFamily, session, }) {
-    // no labels means no gutter, and that includes having no tracks to label: the
-    // gap alone would push the whole figure right of a margin nothing is drawn in
-    return trackLabels === 'left' && tracks.length > 0
-        ? max(tracks.map(t => measureText(svgTrackName(t, session), fontSize, fontFamily)), 0) + TRACK_LABEL_GAP
-        : 0;
+    return max(tracks.map(t => Math.max(trackSidebarWidth(t, { fontSize, fontFamily }), trackLabelMode(t, trackLabels) === 'left'
+        ? measureText(svgTrackName(t, session), fontSize, fontFamily) +
+            TRACK_LABEL_GAP
+        : 0)), 0);
+}
+// Px of tree and row labels a track's display draws left of its body.
+export function trackSidebarWidth(track, text) {
+    return track.displays[0]?.svgSidebarWidth?.(text) ?? 0;
 }
 // vertical box a single track occupies. Shared by totalHeight (sum) and
 // trackBoxOffsets (prefix-sum) so the two can't drift.

package/esm/displayKitTests/perRegionTestEnv.d.ts

@@ -260,6 +260,16 @@ declare function makeStateModel(control: PerRegionTestControl, gate: GateOptIns,
             error: string;
         }[];
     };
+} & {
+    readonly plotKeys: string[];
+    readonly plot: import("@jbrowse/core/configuration").Plot;
+    readonly plotExamples: readonly import("@jbrowse/core/configuration").PlotExample[];
+    readonly configDocsUrl: string;
+    liftPlot(draft: import("@jbrowse/core/configuration").Plot): import("@jbrowse/core/configuration").AnyConfigurationModel;
+    plotProblems(draft: import("@jbrowse/core/configuration").Plot): string[];
+    plotWrites(draft: import("@jbrowse/core/configuration").Plot): Record<string, unknown>;
+} & {
+    applyPlot(draft: import("@jbrowse/core/configuration").Plot): void;
 } & {
     scrollTop: number;
 } & {
@@ -777,6 +787,16 @@ export declare function createPerRegionTestEnvironment({ measuresBytes, gate, es
                     error: string;
                 }[];
             };
+        } & {
+            readonly plotKeys: string[];
+            readonly plot: import("@jbrowse/core/configuration").Plot;
+            readonly plotExamples: readonly import("@jbrowse/core/configuration").PlotExample[];
+            readonly configDocsUrl: string;
+            liftPlot(draft: import("@jbrowse/core/configuration").Plot): import("@jbrowse/core/configuration").AnyConfigurationModel;
+            plotProblems(draft: import("@jbrowse/core/configuration").Plot): string[];
+            plotWrites(draft: import("@jbrowse/core/configuration").Plot): Record<string, unknown>;
+        } & {
+            applyPlot(draft: import("@jbrowse/core/configuration").Plot): void;
         } & {
             scrollTop: number;
         } & {
@@ -1183,6 +1203,16 @@ export declare function createPerRegionTestEnvironment({ measuresBytes, gate, es
                     error: string;
                 }[];
             };
+        } & {
+            readonly plotKeys: string[];
+            readonly plot: import("@jbrowse/core/configuration").Plot;
+            readonly plotExamples: readonly import("@jbrowse/core/configuration").PlotExample[];
+            readonly configDocsUrl: string;
+            liftPlot(draft: import("@jbrowse/core/configuration").Plot): import("@jbrowse/core/configuration").AnyConfigurationModel;
+            plotProblems(draft: import("@jbrowse/core/configuration").Plot): string[];
+            plotWrites(draft: import("@jbrowse/core/configuration").Plot): Record<string, unknown>;
+        } & {
+            applyPlot(draft: import("@jbrowse/core/configuration").Plot): void;
         } & {
             scrollTop: number;
         } & {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-linear-genome-view",
-  "version": "5.0.0-beta.10",
+  "version": "5.0.0-beta.13",
   "type": "module",
   "description": "JBrowse 2 linear genome view",
   "keywords": [
@@ -21,15 +21,15 @@
     "esm"
   ],
   "dependencies": {
-    "@jbrowse/mobx-state-tree": "^6.6.1",
+    "@jbrowse/mobx-state-tree": "^6.7.0",
     "@mui/icons-material": "^9.4.0",
     "@mui/material": "^9.4.0",
-    "mobx": "^7.0.5",
+    "mobx": "^7.0.6",
     "mobx-react": "^10.0.2",
-    "@jbrowse/core": "^5.0.0-beta.10",
-    "@jbrowse/display-kit": "^5.0.0-beta.10",
-    "@jbrowse/render-core": "^5.0.0-beta.10",
-    "@jbrowse/display-ui": "^5.0.0-beta.10"
+    "@jbrowse/core": "^5.0.0-beta.13",
+    "@jbrowse/render-core": "^5.0.0-beta.13",
+    "@jbrowse/display-kit": "^5.0.0-beta.13",
+    "@jbrowse/display-ui": "^5.0.0-beta.13"
   },
   "peerDependencies": {
     "react": ">=19.0.0",
@@ -40,7 +40,7 @@
   },
   "sideEffects": false,
   "devDependencies": {
-    "@jbrowse/display-test-utils": "^5.0.0-beta.10"
+    "@jbrowse/display-test-utils": "^5.0.0-beta.13"
   },
   "scripts": {
     "prebuild": "pnpm clean",