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

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

@@ -1,9 +1,10 @@
 import type { TrackLabelMode } from '../types.ts';
-export default function SVGTrackLabel({ trackLabels, trackName, fontSize, textHeight, trackLabelOffset, x, }: {
+export default function SVGTrackLabel({ trackLabels, trackName, fontSize, textHeight, trackLabelOffset, x, raised, }: {
     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

@@ -3,22 +3,25 @@ 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 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
+// 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.
-function labelPosition({ trackLabels, trackLabelOffset, textHeight, fontSize, x, }) {
+// dominantBaseline is emitted at all): 'offset' and a raised 'left' so their
+// 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, }) {
     if (trackLabels === 'left') {
         return {
             x: trackLabelOffset - TRACK_LABEL_GAP,
-            y: insetLabelBaselineY(fontSize),
+            y: raised
+                ? offsetLabelBaselineY(textHeight, fontSize)
+                : insetLabelBaselineY(fontSize),
             textAnchor: 'end',
         };
     }
@@ -31,7 +34,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, }) {
+export default function SVGTrackLabel({ trackLabels, trackName, fontSize, textHeight, trackLabelOffset, x, raised = false, }) {
     const palette = usePalette();
     if (trackLabels === 'hidden') {
         return null;
@@ -42,6 +45,7 @@ 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, trackBoxOffsets, trackLabelMode } from './util.js';
+import { labelOffset, leftLabelRaised, 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, 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, raised: leftLabelRaised(track, trackLabels), x: x + trackLabelOffset })] }, conf.trackId));
         }) }));
 }

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

@@ -6,6 +6,7 @@ interface TrackHeights {
     displays: {
         height: number;
         prefersOffset?: boolean;
+        svgSidebarWidth?: () => number;
     }[];
 }
 export interface SvgDisplayResult {
@@ -15,6 +16,7 @@ export interface SvgDisplayResult {
             height: number;
             regionTooLarge?: boolean;
             drawsWhenTooLarge?: boolean;
+            svgSidebarWidth?: () => number;
         }[];
     };
     result: ReactNode;
@@ -82,17 +84,23 @@ 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 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 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;

package/esm/LinearGenomeView/svgcomponents/util.js

@@ -184,18 +184,31 @@ export function trackLabelMode(track, trackLabels) {
         ? 'offset'
         : trackLabels;
 }
-// space the label pushes a track's body down by; only 'offset' mode does
+// 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' ? textHeight : 0;
+    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>,
@@ -212,11 +225,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), 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.

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.11",
   "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-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/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"
   },
   "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.11"
   },
   "scripts": {
     "prebuild": "pnpm clean",