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

package/esm/LinearGenomeView/svgcomponents/figureContract.js

@@ -1,25 +1,25 @@
 import { useEffect, useRef } from 'react';
 import { svgNodeId } from '@jbrowse/core/svg/svgId';
+import { contractReportsOn, reportContractViolation, } from '@jbrowse/render-core/contractReports';
 /**
- * Dev-only checks that a live SVG figure is being used the way it can work.
- * No-ops in production.
+ * Checks that a live SVG figure is being used the way it can work.
  *
  * `useViewSvgFigure` publishes a figure whose two halves are drawn at different
  * moments and only agree by construction, and both ways of breaking that are
  * invisible in the output: the drawing is still a plausible picture of
  * somewhere, just not of one moment or not with its own clips. So the run
  * reports instead, through the `[jbrowse <family> contract]` channel every
- * dev-only check in the tree uses — `config/jest/contractGate.js` fails the test
- * that collects one, and ARCHITECTURAL_LIMITS.md §"Ordering is the contract" is
- * the register. `figure` rather than `svg-figure` because the gate's family
- * pattern is `\w+`, which a hyphen is not.
+ * check in the tree uses — `config/jest/contractGate.js` fails the test that
+ * collects one, and ARCHITECTURAL_LIMITS.md §"Ordering is the contract" is the
+ * register. `figure` rather than `svg-figure` because the gate's family pattern
+ * is `\w+`, which a hyphen is not.
  *
- * `console.error` and never a throw, as the rest of that family: a figure is
- * chrome a host renders beside its own, and taking the host's tree down over a
- * drawing is worse than the drawing being wrong.
+ * Reported and never thrown, as the rest of that family: a figure is chrome a
+ * host renders beside its own, and taking the host's tree down over a drawing
+ * is worse than the drawing being wrong.
  */
 function report(message) {
-    console.error(`[jbrowse figure contract] ${message}`);
+    reportContractViolation('figure', message);
 }
 // Live figures per view, keyed the way their SVG ids are. A count rather than a
 // flag: the report belongs on the second mount, and the first has to survive the
@@ -43,9 +43,6 @@ const figuresPerView = new Map();
  */
 export function useOneFigurePerView(view) {
     useEffect(() => {
-        if (process.env.NODE_ENV === 'production') {
-            return undefined;
-        }
         // captured, not re-derived on cleanup: by then the view may have left the
         // tree, and `svgNodeId` walks it
         const key = svgNodeId(view);
@@ -99,7 +96,10 @@ export function useFrozenFigureContract(ref, snapshot) {
     rendered.current = snapshot;
     useEffect(() => {
         const el = ref.current;
-        if (process.env.NODE_ENV === 'production' || !el) {
+        // the one check here with a cost of its own — a `MutationObserver` over the
+        // whole figure subtree — so unlike its neighbour it asks whether the
+        // channel is armed rather than running and reporting into it
+        if (!contractReportsOn() || !el) {
             return undefined;
         }
         const observer = new MutationObserver(() => {

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

@@ -7,6 +7,7 @@ export interface SvgExportTrack {
     displays: {
         height: number;
         svgLegendWidth?: () => number;
+        svgSidebarWidth?: () => number;
         /**
          * 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/renderViewTracks.js

@@ -59,7 +59,7 @@ export async function renderViewTracks({ view, opts, theme, textHeight, trackLab
     return {
         tracks,
         displayResults,
-        tracksHeight: totalHeight(tracks, textHeight, trackLabels),
+        tracksHeight: totalHeight(tracks, trackLabels, textHeight),
         legendWidth,
         skippedTracks,
     };

package/esm/LinearGenomeView/svgcomponents/useViewSvgFigure.js

@@ -1,17 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { memo, useCallback, useEffect, useRef, useSyncExternalStore, } from 'react';
+import { SvgThemeProviders } from '@jbrowse/core/svg/SvgThemeProviders';
 import { exportMargin } from '@jbrowse/core/svg/constants';
+import { svgNodeId } from '@jbrowse/core/svg/svgId';
 import { svgTrackName } from '@jbrowse/core/svg/trackNames';
-import { StyleThemeProvider } from '@jbrowse/core/ui/PaletteContext';
-import { resolveStyleTheme } from '@jbrowse/core/ui/styleTheme';
-import { createJBrowseTheme } from '@jbrowse/core/ui/theme';
 import { getSession } from '@jbrowse/core/util';
 import { useFetch } from '@jbrowse/core/util/useFetch';
-import { isAlive } from '@jbrowse/mobx-state-tree';
-import { ThemeProvider } from '@mui/material';
+import { getSnapshot, isAlive } from '@jbrowse/mobx-state-tree';
 import { reaction } from 'mobx';
-import SVGRowHeader from './SVGRowHeader.js';
-import SVGView from './SVGView.js';
+import SVGStackedRow from './SVGStackedRow.js';
 import { useFrozenFigureContract, useOneFigurePerView, } from './figureContract.js';
 import { renderViewTracks } from './renderViewTracks.js';
 import { defaultTextHeight, getRowHeaderLayout, trackLabelLeftOffset, } from './util.js';
@@ -87,38 +84,31 @@ async function renderFigure(view, opts) {
  * render. Where it matters, this line is the only thing holding the two halves
  * together.
  *
- * Both providers, as `wrapSvgExport` mounts for the file path, and for the same
- * reason: the chrome takes its colors from the Material UI theme and a
- * `makeStyles` component would take its own from the style theme, so a figure
- * mounted in a host that installs neither would otherwise draw itself in
- * JBrowse's *default light* theme whatever the session is set to.
+ * The export's theme providers, as the file path mounts them: a host that
+ * installs neither would otherwise get JBrowse's default light theme whatever
+ * the session is set to.
  *
  * No background rect, unlike a file — that has nothing behind it, and a figure
- * in a page has the page. No `resetSvgClipIds` either, and that is the opposite
- * decision from the file path on purpose: the counter is document-global, so
- * resetting it here would renumber ids that a figure already on the page is
- * pointing at. Letting it run is what makes several live figures unique.
+ * in a page has the page. No `withFreshSvgClipIds` either, and that is the
+ * opposite decision from the file path on purpose: the counter is
+ * document-global, so restarting it here would reuse ids that a figure already
+ * on the page is pointing at. Letting it run is what makes several live figures
+ * unique.
  */
 const FrozenSvgFigure = memo(function FrozenSvgFigure({ view, snapshot, }) {
     const { width, height, margin, theme } = snapshot;
-    // dev-only, and it watches for the one thing this component cannot enforce:
-    // an observer INSIDE the tree, which the memo above is not between
+    // it watches for the one thing this component cannot enforce: an observer
+    // INSIDE the tree, which the memo above is not between
     const ref = useRef(null);
     useFrozenFigureContract(ref, snapshot);
-    return (_jsx(ThemeProvider, { theme: createJBrowseTheme(theme), children: _jsx(StyleThemeProvider, { theme: resolveStyleTheme({ configTheme: theme }), children: _jsx("svg", { ref: ref, width: width, height: height, viewBox: `0 0 ${width} ${height}`, 
-                // It is a vector, so a narrower container scales it rather than
-                // clipping it; the height attribute stays, so a box reserved for it
-                // does not change size when that happens. Deliberately not a prop:
-                // anything passed per-render would have to reach past the memo above,
-                // which is the one thing holding the figure's two halves together. A
-                // host that wants other sizing wraps this in a box of its own.
-                style: { display: 'block', maxWidth: '100%' }, children: _jsx("g", { transform: `translate(${margin} ${snapshot.bandHeight})`, children: _jsx(SVGView, { view: view, displayResults: snapshot.displayResults, header: _jsx(SVGRowHeader, { view: view, fontSize: snapshot.fontSize, rulerHeight: snapshot.rulerHeight, showScalebar: snapshot.showScalebar }), fontSize: snapshot.fontSize, textHeight: snapshot.textHeight, trackLabels: snapshot.trackLabels, trackLabelOffset: snapshot.trackLabelOffset, 
-                        // the row header is exactly the ruler, so the bodies start at its
-                        // height
-                        contentTop: snapshot.rulerHeight, tracksHeight: snapshot.tracksHeight, showGridlines: snapshot.showGridlines, 
-                        // the left gutter the per-track clip may bleed into, so content
-                        // drawn left of zero — a wiggle's y-axis — survives
-                        leftBuffer: snapshot.margin, legendWidth: snapshot.legendWidth }) }) }) }) }));
+    return (_jsx(SvgThemeProviders, { theme: theme, children: _jsx("svg", { ref: ref, width: width, height: height, viewBox: `0 0 ${width} ${height}`, 
+            // It is a vector, so a narrower container scales it rather than
+            // clipping it; the height attribute stays, so a box reserved for it
+            // does not change size when that happens. Deliberately not a prop:
+            // anything passed per-render would have to reach past the memo above,
+            // which is the one thing holding the figure's two halves together. A
+            // host that wants other sizing wraps this in a box of its own.
+            style: { display: 'block', maxWidth: '100%' }, children: _jsx(SVGStackedRow, { view: view, rendered: snapshot, top: snapshot.bandHeight, margin: margin, fontSize: snapshot.fontSize, textHeight: snapshot.textHeight, rulerHeight: snapshot.rulerHeight, trackLabels: snapshot.trackLabels, trackLabelOffset: snapshot.trackLabelOffset, showGridlines: snapshot.showGridlines, legendWidth: snapshot.legendWidth, showScalebar: snapshot.showScalebar }) }) }));
 });
 /**
  * What "the figure is out of date" means, as a string.
@@ -141,11 +131,10 @@ const FrozenSvgFigure = memo(function FrozenSvgFigure({ view, snapshot, }) {
  * highlight bands**, which are drawn in the figure and are the one thing in it a
  * reader adds without navigating anywhere.
  *
- * A plugin's own overlay (grid-bookmark's bookmarks, through
- * `LinearGenomeView-HighlightSVGComponent`) is state this cannot see, so a
- * bookmark added under a drawn figure shows up at its 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.
+ * 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.
  */
 function figureKey(view, themeName) {
     // A closed view is not an error, it is a host doing an ordinary thing in an
@@ -156,10 +145,10 @@ function figureKey(view, themeName) {
     // throw a TypeError inside the reaction, where MobX swallows it. No key means
     // no figure, which is what a host that closed the view wanted anyway.
     //
-    // `view.width` throws by design before the view has been measured, and
-    // `ready` is the gate that says it has been — and that there are regions to
-    // draw, which is the second async step `initialized` does not cover
-    if (!isAlive(view) || !view.ready) {
+    // `view.width` throws by design before the view has been measured. `status`
+    // is ready only once it has been AND there are regions to draw — `ready` is
+    // also true for a view nothing has told where to look, measured or not
+    if (!isAlive(view) || view.status.type !== 'ready') {
         return '';
     }
     const session = getSession(view);
@@ -167,14 +156,12 @@ function figureKey(view, themeName) {
         view.coarseVisibleLocStrings,
         view.coarseBpPerPx,
         view.width,
-        view.tracks.map(track => [
-            track.configuration.trackId,
-            track.minimized,
-            track.displays[0]?.height,
-        ]),
+        // 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]),
         session.getActiveThemeOptions?.(themeName),
-        session.highlightsVisible ? view.highlight : false,
-        view.labelsVisible,
+        session.highlightsVisible ? view.highlights : false,
+        session.highlightLabelsVisible,
     ]);
 }
 /**
@@ -212,25 +199,7 @@ function useFigureKey(view, themeName) {
 export function useViewSvgFigure(view, { fontSize = 12, rulerHeight = 30, trackLabels = 'offset', showGridlines = true, showScalebar = true, rasterizeLayers = false, margin = exportMargin, themeName, } = {}) {
     const key = useFigureKey(view, themeName);
     useOneFigurePerView(view);
-    const { data: snapshot, error, isLoading, } = useFetch(
-    // Every option is in the key by value, so an inline options object costs
-    // nothing and a changed option redraws. A null key is `useFetch`'s own "not
-    // yet", which is what an unready view reports.
-    key
-        ? [
-            'lgv-svg-figure',
-            key,
-            JSON.stringify([
-                fontSize,
-                rulerHeight,
-                trackLabels,
-                showGridlines,
-                showScalebar,
-                rasterizeLayers,
-                margin,
-            ]),
-        ]
-        : null, () => renderFigure(view, {
+    const opts = {
         fontSize,
         rulerHeight,
         trackLabels,
@@ -239,7 +208,20 @@ export function useViewSvgFigure(view, { fontSize = 12, rulerHeight = 30, trackL
         rasterizeLayers,
         margin,
         themeName,
-    }));
+    };
+    const { data: snapshot, error, isLoading, } = useFetch(
+    // Every option is in the key by value, so an inline options object costs
+    // nothing and a changed option redraws. The view's id too: two views can
+    // share every other term. A null key is `useFetch`'s own "not yet", which
+    // is what an unready view reports.
+    key
+        ? [
+            'lgv-svg-figure',
+            svgNodeId(view),
+            key,
+            JSON.stringify(opts),
+        ]
+        : null, () => renderFigure(view, opts));
     // Written in an effect and read during render, which is the order that makes
     // it work: a key change clears `data` on the render where the ref still holds
     // the previous commit's size, so the host's box keeps the height it had rather

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

@@ -5,6 +5,8 @@ import type { ReactNode } from 'react';
 interface TrackHeights {
     displays: {
         height: number;
+        prefersOffset?: boolean;
+        svgSidebarWidth?: () => number;
     }[];
 }
 export interface SvgDisplayResult {
@@ -12,6 +14,9 @@ export interface SvgDisplayResult {
         configuration: AnyConfigurationModel;
         displays: {
             height: number;
+            regionTooLarge?: boolean;
+            drawsWhenTooLarge?: boolean;
+            svgSidebarWidth?: () => number;
         }[];
     };
     result: ReactNode;
@@ -58,6 +63,7 @@ export declare function getRowHeaderLayout({ fontSize, showScalebar, }: {
     assemblyLabelBaselineY: number;
     bandHeight: number;
 };
+export type HeaderLayout = ReturnType<typeof getHeaderLayout>;
 export declare function getHeaderLayout({ fontSize, showCytobands, rulerHeight, }: {
     fontSize: number;
     showCytobands: boolean;
@@ -71,25 +77,31 @@ export declare function getHeaderLayout({ fontSize, showCytobands, rulerHeight,
 };
 export declare const RULER_MAJOR_TICK = 5;
 export declare const RULER_MINOR_TICK = 3;
-export declare const RULER_TICK_FONT_SIZE = 11;
 export declare function getRulerLayout(rulerHeight: number): {
     tickTopY: number;
     numbersBaselineY: number;
 };
 export declare const refNameLabelBoxHeight: number;
 export declare const refNameLabelBaselineY: number;
-export declare function labelOffset(trackLabels: TrackLabelMode, textHeight: number): number;
+export declare function trackLabelMode(track: TrackHeights, trackLabels: TrackLabelMode): TrackLabelMode;
+export declare function leftLabelRaised(track: Pick<TrackHeights, 'displays'>, trackLabels: TrackLabelMode): boolean;
+export declare function labelOffset(track: TrackHeights, trackLabels: TrackLabelMode, textHeight: number): number;
+interface SidebarTrack {
+    configuration: AnyConfigurationModel;
+    displays: {
+        svgSidebarWidth?: () => number;
+    }[];
+}
 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 trackBoxHeight(track: TrackHeights, textOffset: number): number;
-export declare function trackBoxOffsets(tracks: TrackHeights[], textOffset: number): number[];
-export declare function totalHeight(tracks: TrackHeights[], textHeight: number, trackLabels: TrackLabelMode): number;
+export declare function trackSidebarWidth(track: Pick<SidebarTrack, 'displays'>): 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;
 export {};

package/esm/LinearGenomeView/svgcomponents/util.js

@@ -80,7 +80,7 @@ export function defaultTextHeight(fontSize) {
 export function offsetLabelBaselineY(textHeight, fontSize) {
     return textHeight - LABEL_PAD_BOTTOM - labelDescent(fontSize);
 }
-// Baseline for a label inset into the top of the box it draws over ('overlay'
+// Baseline for a label inset into the top of the box it draws over ('overlapping'
 // mode), measured down from that top edge so the ascenders stay inside it.
 export function insetLabelBaselineY(fontSize) {
     return labelBaselineFromTop(LABEL_PAD_TOP, fontSize);
@@ -99,6 +99,9 @@ export function insetLabelBaselineY(fontSize) {
 // scale in each row the only thing saying whether two rows are at the same zoom
 // is their ruler coordinates, which are unreadable at the size a figure is
 // published at. The standalone LGV export has drawn this bar all along.
+//
+// The name's band is reserved whether or not the row draws one: a breakpoint
+// split view names its first row only, and the rest stay the same height as it.
 export function getRowHeaderLayout({ fontSize, showScalebar, }) {
     const label = labelInkHeight(fontSize);
     // the bp label hangs a cap below the bar's line and its own ink box ends a gap
@@ -111,8 +114,10 @@ export function getRowHeaderLayout({ fontSize, showScalebar, }) {
     // ink box rather than by baseline, because the gaps are fixed while a font's
     // descent is not: laying the label out from its baseline instead put its
     // descenders through that cap at the larger export fonts.
+    // without a scalebar the name sits on its baseline at the origin, its
+    // descenders into the ruler's top, so only the ink above the baseline counts
     const assemblyInkTop = scalebarLineY === undefined
-        ? -label
+        ? -labelBaselineFromTop(0, fontSize)
         : scalebarLineY - SVG_SCALEBAR_CAP - ROW_GAP - label;
     return {
         // undefined rather than an unused number: a row without a scalebar has no
@@ -123,17 +128,9 @@ export function getRowHeaderLayout({ fontSize, showScalebar, }) {
         assemblyLabelBaselineY: showScalebar
             ? labelBaselineFromTop(assemblyInkTop, fontSize)
             : 0,
-        // up from the ruler to the top of the topmost ink box — the assembly
-        // label's, in both cases
         bandHeight: -assemblyInkTop,
     };
 }
-// Compact vertical layout for the exported header: rows (assembly name,
-// cytoband overview, "you are here" polygon, total-bp scalebar, ruler) are
-// stacked with a small fixed gap rather than reserving loose fixed-height
-// bands, so nothing is separated by dead space. `tracksTop` is where the track
-// bodies begin (renderToSvg's `offset`). Shared by SVGHeader and renderToSvg so
-// the header height and the track origin can't drift.
 export function getHeaderLayout({ fontSize, showCytobands, rulerHeight, }) {
     // the assembly name is drawn on its ink box, not on `fontSize`: at y=0 with a
     // hanging baseline its ascenders rose above the export's top edge and got
@@ -161,7 +158,6 @@ export function getHeaderLayout({ fontSize, showCytobands, rulerHeight, }) {
 // Ruler tick geometry, shared by the tick marks and their number labels.
 export const RULER_MAJOR_TICK = 5;
 export const RULER_MINOR_TICK = 3;
-export const RULER_TICK_FONT_SIZE = 11;
 // clearance between the tick-number baseline and the marks below it
 const RULER_TICK_LABEL_GAP = 2;
 // Vertical positions within a ruler of the given budget: tick marks hang just
@@ -180,18 +176,39 @@ export function getRulerLayout(rulerHeight) {
 // 13, and both ends of the glyphs at any smaller export font.
 export const refNameLabelBoxHeight = labelInkHeight(REF_NAME_LABEL_FONT_SIZE);
 export const refNameLabelBaselineY = labelBaselineFromTop(0, REF_NAME_LABEL_FONT_SIZE);
-// space the label pushes a track down by; only 'offset' mode does
-export function labelOffset(trackLabels, textHeight) {
-    return trackLabels === 'offset' ? textHeight : 0;
+// 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.
+export function trackLabelMode(track, trackLabels) {
+    return trackLabels === 'overlapping' && track.displays[0]?.prefersOffset
+        ? '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
+export function labelOffset(track, trackLabels, textHeight) {
+    return trackLabelMode(track, trackLabels) === 'offset' ||
+        leftLabelRaised(track, trackLabels)
+        ? 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`,
 // 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, 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
+// 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>,
@@ -208,31 +225,35 @@ 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), 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;
 }
 // vertical box a single track occupies. Shared by totalHeight (sum) and
 // trackBoxOffsets (prefix-sum) so the two can't drift.
-export function trackBoxHeight(track, textOffset) {
-    return track.displays[0].height + textOffset + trackSpacing;
+export function trackBoxHeight(track, trackLabels, textHeight) {
+    return (track.displays[0].height +
+        labelOffset(track, trackLabels, textHeight) +
+        trackSpacing);
 }
 // Top y of each track's box within a stack of them. SVGTracks lays the bodies
 // out with it and the breakpoint-split export anchors its overlay ribbons with
 // it, so one implementation rather than two prefix-sums that must agree —
 // they drifted by trackSpacing per track when they didn't.
-export function trackBoxOffsets(tracks, textOffset) {
+export function trackBoxOffsets(tracks, trackLabels, textHeight) {
     const offsets = [];
     let total = 0;
     for (const track of tracks) {
         offsets.push(total);
-        total += trackBoxHeight(track, textOffset);
+        total += trackBoxHeight(track, trackLabels, textHeight);
     }
     return offsets;
 }
-export function totalHeight(tracks, textHeight, trackLabels) {
-    const textOffset = labelOffset(trackLabels, textHeight);
-    return sum(tracks.map(t => trackBoxHeight(t, textOffset)));
+export function totalHeight(tracks, trackLabels, textHeight) {
+    return sum(tracks.map(t => trackBoxHeight(t, trackLabels, textHeight)));
 }

package/esm/LinearGenomeView/types.d.ts

@@ -1,20 +1,16 @@
 import type { LinearGenomeViewStateModel } from './model.ts';
-import type { HighlightType } from '@jbrowse/core/util/highlights';
+import type { BpOffset as CoreBpOffset } from '@jbrowse/core/util/Base1DUtils';
+import type { HighlightInput, HighlightType } from '@jbrowse/core/util/highlights';
 import type { TrackInit } from '@jbrowse/core/util/tracks';
 import type { SnapshotIn } from '@jbrowse/mobx-state-tree';
-export interface BpOffset {
-    refName?: string;
-    index: number;
-    offset: number;
-    start?: number;
-    end?: number;
+export interface BpOffset extends CoreBpOffset {
     coord?: number;
     reversed?: boolean;
     assemblyName?: string;
     oob?: boolean;
 }
-export type { ExportSvgOptions, TrackLabelMode, } from '@jbrowse/display-kit/types';
-export type { HighlightType };
+export type { ExportSvgOptions, TrackLabelMode, ViewTrackLabelMode, } from '@jbrowse/display-kit/types';
+export type { HighlightInput, HighlightType };
 export interface NavLocation {
     refName: string;
     start?: number;
@@ -34,11 +30,12 @@ export interface InitState {
      */
     loc?: string;
     grow?: number;
+    showHitTrack?: boolean;
     assembly: string;
     displayedRegionNames?: string[];
     tracks?: TrackInit[];
     tracklist?: boolean;
     nav?: boolean;
-    highlight?: (string | HighlightType)[];
+    highlight?: (string | HighlightInput)[];
 }
-export type LinearGenomeViewLaunchProps = Partial<Omit<SnapshotIn<LinearGenomeViewStateModel>, keyof InitState | 'id' | 'type' | 'init'>>;
+export type LinearGenomeViewLaunchProps = Partial<Omit<SnapshotIn<LinearGenomeViewStateModel>, keyof InitState | 'id' | 'type' | 'launch'>>;