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

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/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/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.d.ts

@@ -1,10 +1,9 @@
 import type { TrackLabelMode } from '../types.ts';
-export default function SVGTrackLabel({ trackLabels, trackName, fontSize, textHeight, trackLabelOffset, x, raised, }: {
+export default function SVGTrackLabel({ trackLabels, trackName, fontSize, textHeight, trackLabelOffset, x, }: {
     trackName: string;
     trackLabels: TrackLabelMode;
     fontSize: number;
     textHeight: number;
     trackLabelOffset: number;
     x: number;
-    raised?: boolean;
 }): import("react").JSX.Element | null;

package/esm/LinearGenomeView/svgcomponents/SVGTrackLabel.js

@@ -4,24 +4,20 @@ 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), beside the
-// first row or, `raised`, in the band above a track whose sidebar holds the
-// gutter beside its rows. The other modes hang off the leftmost visible content
+// 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' and a raised 'left' so their
-// descenders land a known distance above the track body — the band is
+// 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, raised, }) {
+function labelPosition({ trackLabels, trackLabelOffset, textHeight, fontSize, x, }) {
     if (trackLabels === 'left') {
         return {
             x: trackLabelOffset - TRACK_LABEL_GAP,
-            y: raised
-                ? offsetLabelBaselineY(textHeight, fontSize)
-                : insetLabelBaselineY(fontSize),
+            y: insetLabelBaselineY(fontSize),
             textAnchor: 'end',
         };
     }
@@ -34,7 +30,7 @@ function labelPosition({ trackLabels, trackLabelOffset, textHeight, fontSize, x,
     // stay inside it (at y=0 they rose into the track above)
     return { x: x + 5, y: insetLabelBaselineY(fontSize) };
 }
-export default function SVGTrackLabel({ trackLabels, trackName, fontSize, textHeight, trackLabelOffset, x, raised = false, }) {
+export default function SVGTrackLabel({ trackLabels, trackName, fontSize, textHeight, trackLabelOffset, x, }) {
     const palette = usePalette();
     if (trackLabels === 'hidden') {
         return null;
@@ -45,7 +41,6 @@ export default function SVGTrackLabel({ trackLabels, trackName, fontSize, textHe
         textHeight,
         fontSize,
         x,
-        raised,
     });
     // 'overlapping' prints over the track's own data, which the on-screen label
     // clears with a paper box, so it carries the halo text over a plot needs

package/esm/LinearGenomeView/svgcomponents/SVGTracks.js

@@ -6,7 +6,7 @@ import { getSession } from '@jbrowse/core/util';
 import { exportsTooLargeNote } from '@jbrowse/display-kit/renderDisplaySvg';
 import SVGRegionSeparators from './SVGRegionSeparators.js';
 import SVGTrackLabel from './SVGTrackLabel.js';
-import { labelOffset, leftLabelRaised, trackBoxOffsets, trackLabelMode, } from './util.js';
+import { labelOffset, trackBoxOffsets, trackLabelMode } from './util.js';
 export default function SVGTracks({ displayResults, model, textHeight, fontSize, trackLabels, trackLabelOffset, leftBuffer, legendWidth, }) {
     const session = getSession(model);
     const x = Math.max(-model.offsetPx, 0);
@@ -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, raised: leftLabelRaised(track, trackLabels), x: x + trackLabelOffset })] }, 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,7 +8,7 @@ export interface SvgExportTrack {
     displays: {
         height: number;
         svgLegendWidth?: () => number;
-        svgSidebarWidth?: () => 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,23 +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;
-        svgSidebarWidth?: () => number;
-    }[];
+    } & SidebarDisplay)[];
 }
 export interface SvgDisplayResult {
     track: {
         configuration: AnyConfigurationModel;
-        displays: {
+        displays: ({
             height: number;
             regionTooLarge?: boolean;
             drawsWhenTooLarge?: boolean;
-            svgSidebarWidth?: () => number;
-        }[];
+        } & SidebarDisplay)[];
     };
     result: ReactNode;
 }
@@ -83,14 +84,15 @@ 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 leftLabelRaised(track: Pick<TrackHeights, 'displays'>, trackLabels: TrackLabelMode): boolean;
+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: {
-        svgSidebarWidth?: () => number;
-    }[];
+    displays: SidebarDisplay[];
 }
 export declare const TRACK_LABEL_GAP = 40;
 export declare function trackLabelLeftOffset({ tracks, trackLabels, fontSize, fontFamily, session, }: {
@@ -100,7 +102,7 @@ export declare function trackLabelLeftOffset({ tracks, trackLabels, fontSize, fo
     fontFamily?: string;
     session: TrackCatalog;
 }): number;
-export declare function trackSidebarWidth(track: Pick<SidebarTrack, 'displays'>): 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,24 +179,17 @@ 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;
 }
-// Whether a 'left' name sits in a band above its track's rows rather than
-// beside the first of them: the gutter beside the rows holds the track's own
-// sidebar, so the name heads it instead of standing off to its left.
-export function leftLabelRaised(track, trackLabels) {
-    return trackLabels === 'left' && trackSidebarWidth(track) > 0;
-}
-// space the label pushes a track's body down by: an 'offset' label, or a raised
-// 'left' one
+// space an 'offset' label pushes a track's body down by
 export function labelOffset(track, trackLabels, textHeight) {
-    return trackLabelMode(track, trackLabels) === 'offset' ||
-        leftLabelRaised(track, trackLabels)
-        ? textHeight
-        : 0;
+    return trackLabelMode(track, trackLabels) === 'offset' ? textHeight : 0;
 }
 // Gap between a 'left' track label's right edge and the track body.
 // SVGTrackLabel right-aligns its text at `trackLabelOffset - TRACK_LABEL_GAP`,
@@ -204,9 +197,7 @@ export function labelOffset(track, trackLabels, textHeight) {
 // gutter it was measured for.
 export const TRACK_LABEL_GAP = 40;
 // Horizontal gutter left of the track bodies: the widest of each track's
-// sidebar and, in 'left' mode, its name plus TRACK_LABEL_GAP. A sidebar and a
-// name share the column because the name rises above the sidebar
-// (leftLabelRaised). Takes an
+// 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.
 //
@@ -225,14 +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, }) {
-    return max(tracks.map(t => Math.max(trackSidebarWidth(t), trackLabels === 'left'
+    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) {
-    return track.displays[0]?.svgSidebarWidth?.() ?? 0;
+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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-linear-genome-view",
-  "version": "5.0.0-beta.11",
+  "version": "5.0.0-beta.13",
   "type": "module",
   "description": "JBrowse 2 linear genome view",
   "keywords": [
@@ -24,12 +24,12 @@
     "@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/display-kit": "^5.0.0-beta.11",
-    "@jbrowse/core": "^5.0.0-beta.11",
-    "@jbrowse/render-core": "^5.0.0-beta.11",
-    "@jbrowse/display-ui": "^5.0.0-beta.11"
+    "@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.11"
+    "@jbrowse/display-test-utils": "^5.0.0-beta.13"
   },
   "scripts": {
     "prebuild": "pnpm clean",