@jbrowse/plugin-linear-genome-view 5.0.0-beta.2 → 5.0.0-beta.20

package/esm/LinearGenomeView/svgcomponents/SVGGridlines.js

@@ -1,16 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { SvgClipRect } from '@jbrowse/core/svg/SvgExport';
 import { svgNodeId } from '@jbrowse/core/svg/svgId';
+import { usePalette } from '@jbrowse/core/ui/PaletteContext';
 import { getStrokeProps } from '@jbrowse/core/util';
-import { useTheme } from '@mui/material';
 import { gridlineTickXs, vlinePath } from './util.js';
 export default function SVGGridlines({ model, height, }) {
     const { width } = model;
-    const theme = useTheme();
+    const palette = usePalette();
     // share the on-screen gridline colors; getStrokeProps splits the rgba alpha
     // into strokeOpacity so the exported SVG stays renderer-safe
-    const minorProps = getStrokeProps(theme.palette.gridlineMinor);
-    const majorProps = getStrokeProps(theme.palette.gridlineMajor);
+    const minorProps = getStrokeProps(palette.gridlineMinor);
+    const majorProps = getStrokeProps(palette.gridlineMajor);
     const { major, minor } = gridlineTickXs(model);
     // gridlineTicks spans the whole staticBlocks frame, which overhangs the
     // viewport on both sides, so clip to the view width rather than letting ticks

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

@@ -1,6 +1,9 @@
 import type { LinearGenomeViewModel } from '../index.ts';
-export default function SVGHeader({ model, fontSize, rulerHeight, }: {
+import type { HeaderLayout } from './util.ts';
+export default function SVGHeader({ model, fontSize, rulerHeight, layout, showCytobands, }: {
     model: LinearGenomeViewModel;
     rulerHeight: number;
     fontSize: number;
+    layout: HeaderLayout;
+    showCytobands: boolean;
 }): import("react").JSX.Element | null;

package/esm/LinearGenomeView/svgcomponents/SVGHeader.js

@@ -1,18 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { usePalette } from '@jbrowse/core/ui/PaletteContext';
 import { getSession, stripAlpha } from '@jbrowse/core/util';
 import { createOverviewLayout, getOverviewRegionPxSpan, } from '@jbrowse/core/util/Base1DUtils';
 import calculateDynamicBlocks from '@jbrowse/core/util/calculateDynamicBlocks';
-import { useTheme } from '@mui/material';
 import Cytobands from '../components/Cytobands.js';
 import OverviewScalebarPolygon from '../components/OverviewScalebarPolygon.js';
 import { getCytobands } from '../components/util.js';
 import { HEADER_OVERVIEW_HEIGHT } from '../consts.js';
 import SVGRuler from './SVGRuler.js';
 import SVGScalebar from './SVGScalebar.js';
-import { getHeaderLayout } from './util.js';
 // "you are here" cytoband overview rendered above the ruler. Self-contained so
 // the overview-layout work only runs when cytobands are actually shown.
-function CytobandOverview({ model, assembly, y, }) {
+function CytobandOverview({ model, y, }) {
     const { width, displayedRegions, minimumBlockWidth, bpPerPx } = model;
     const overview = createOverviewLayout({
         displayedRegions,
@@ -27,27 +26,15 @@ function CytobandOverview({ model, assembly, y, }) {
         bpPerPx,
         blocks: model.dynamicBlocks.blocks,
     });
-    return block && span ? (_jsxs("g", { transform: `translate(0 ${y})`, children: [_jsx(Cytobands, { overview: overview, cytobands: getCytobands(assembly, block.refName), block: block }), _jsx("rect", { stroke: "red", fill: "rgb(255,0,0)", fillOpacity: 0.1, width: Math.max(span.rightPx - span.leftPx, 0.5), height: HEADER_OVERVIEW_HEIGHT - 1, x: span.leftPx, y: 0.5 }), _jsx("g", { transform: `translate(0,${HEADER_OVERVIEW_HEIGHT})`, children: _jsx(OverviewScalebarPolygon, { overview: overview, model: model, exportSvg: true }) })] })) : null;
+    return block && span ? (_jsxs("g", { transform: `translate(0 ${y})`, children: [_jsx(Cytobands, { overview: overview, cytobands: getCytobands(getSession(model).assemblyManager.get(block.assemblyName), block.refName), block: block }), _jsx("rect", { stroke: "red", fill: "rgb(255,0,0)", fillOpacity: 0.1, width: Math.max(span.rightPx - span.leftPx, 0.5), height: HEADER_OVERVIEW_HEIGHT - 1, x: span.leftPx, y: 0.5 }), _jsx("g", { transform: `translate(0,${HEADER_OVERVIEW_HEIGHT})`, children: _jsx(OverviewScalebarPolygon, { overview: overview, model: model, exportSvg: true }) })] })) : null;
 }
-export default function SVGHeader({ model, fontSize, rulerHeight, }) {
-    const { assemblyNames, effectiveShowCytobands } = model;
-    const { assemblyManager } = getSession(model);
-    // cytobands need a single unambiguous assembly, but the header label names
-    // every assembly in the view
-    const cytobandAssemblyName = assemblyNames.length === 1 ? assemblyNames[0] : undefined;
-    const assembly = cytobandAssemblyName
-        ? assemblyManager.get(cytobandAssemblyName)
-        : undefined;
-    const theme = useTheme();
-    const fill = stripAlpha(theme.palette.text.primary);
+export default function SVGHeader({ model, fontSize, rulerHeight, layout, showCytobands, }) {
+    const palette = usePalette();
+    const fill = stripAlpha(palette.text.primary);
     // nothing on screen to label: no assembly name, scalebar or ruler
     if (!model.hasVisibleContent) {
         return null;
     }
-    const { assemblyLabelBaselineY, cytobandTop, scalebarLineY, rulerTop } = getHeaderLayout({
-        fontSize,
-        showCytobands: effectiveShowCytobands,
-        rulerHeight,
-    });
-    return (_jsxs("g", { id: "header", children: [_jsx("text", { x: 0, y: assemblyLabelBaselineY, fontSize: fontSize, fill: fill, children: assemblyNames.join(', ') }), effectiveShowCytobands ? (_jsx(CytobandOverview, { model: model, assembly: assembly, y: cytobandTop })) : null, _jsx("g", { transform: `translate(0 ${scalebarLineY})`, children: _jsx(SVGScalebar, { model: model, fontSize: fontSize }) }), _jsx("g", { transform: `translate(0 ${rulerTop})`, children: _jsx(SVGRuler, { model: model, rulerHeight: rulerHeight }) })] }));
+    const { assemblyLabelBaselineY, cytobandTop, scalebarLineY, rulerTop } = layout;
+    return (_jsxs("g", { id: "header", children: [_jsx("text", { x: 0, y: assemblyLabelBaselineY, fontSize: fontSize, fill: fill, children: model.assemblyNames.join(', ') }), showCytobands ? (_jsx(CytobandOverview, { model: model, y: cytobandTop })) : null, _jsx("g", { transform: `translate(0 ${scalebarLineY})`, children: _jsx(SVGScalebar, { model: model, fontSize: fontSize }) }), _jsx("g", { transform: `translate(0 ${rulerTop})`, children: _jsx(SVGRuler, { model: model, rulerHeight: rulerHeight }) })] }));
 }

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

@@ -1,5 +1,7 @@
+import type { BandGap } from '../components/SVGHighlightBand.tsx';
 import type { LinearGenomeViewModel } from '../index.ts';
-export default function SVGHighlights({ model, height, }: {
+export default function SVGHighlights({ model, height, gaps, }: {
     model: LinearGenomeViewModel;
     height: number;
+    gaps: BandGap[];
 }): (import("react").JSX.Element | null)[] | null;

package/esm/LinearGenomeView/svgcomponents/SVGHighlights.js

@@ -1,11 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useStyleTheme } from '@jbrowse/core/ui/PaletteContext';
 import { getSession } from '@jbrowse/core/util';
-import { useTheme } from '@mui/material';
 import SVGHighlightBand from '../components/SVGHighlightBand.js';
 import { getHighlightColor, highlightKey } from '../components/util.js';
-// Native LGV highlights (model.highlight) drawn as full-height bands over the
-// tracks area, with an optional label at the top. Bookmark highlights are added
-// separately via the LinearGenomeView-HighlightSVGComponent extension point.
+// The view's highlights drawn as full-height bands over the tracks area, with
+// an optional label at the top.
 //
 // Deliberately NOT an observer, and that is the whole of what keeps a live
 // figure coherent. `useViewSvgFigure` freezes a figure by memoizing it against
@@ -15,12 +14,13 @@ import { getHighlightColor, highlightKey } from '../components/util.js';
 // bands across track bodies that were still drawn where the snapshot left them.
 // The file export renders the whole document in one synchronous pass, so it
 // never needed the subscription either.
-export default function SVGHighlights({ model, height, }) {
-    const theme = useTheme();
-    return getSession(model).highlightsVisible
-        ? model.highlight.map((h, idx) => {
+export default function SVGHighlights({ model, height, gaps, }) {
+    const theme = useStyleTheme();
+    const session = getSession(model);
+    return session.highlightsVisible
+        ? model.highlights.map((h, idx) => {
             const coords = model.getHighlightCoords(h);
-            return coords ? (_jsx(SVGHighlightBand, { coords: coords, height: height, color: getHighlightColor(h, theme).toRgbString(), label: model.labelsVisible ? h.label : undefined, labelColor: theme.palette.text.primary }, highlightKey(h, idx))) : null;
+            return coords ? (_jsx(SVGHighlightBand, { coords: coords, height: height, gaps: gaps, color: getHighlightColor(h, theme).toRgbString(), label: session.highlightLabelsVisible ? h.label : undefined, labelColor: theme.palette.text.primary }, highlightKey(h, idx))) : null;
         })
         : null;
 }

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

@@ -1,5 +1,7 @@
+import type { BandGap } from '../components/SVGHighlightBand.tsx';
 import type { LinearGenomeViewModel } from '../index.ts';
-export default function SVGHighlightsOverlay({ model, tracksHeight, }: {
+export default function SVGHighlightsOverlay({ model, tracksHeight, gaps, }: {
     model: LinearGenomeViewModel;
     tracksHeight: number;
+    gaps: BandGap[];
 }): import("react").JSX.Element;

package/esm/LinearGenomeView/svgcomponents/SVGHighlightsOverlay.js

@@ -4,10 +4,10 @@ import { svgNodeId } from '@jbrowse/core/svg/svgId';
 import { PluggableElements } from '@jbrowse/core/ui';
 import { getEnv } from '@jbrowse/core/util';
 import SVGHighlights from './SVGHighlights.js';
-// The highlight layer over one view's tracks area: native LGV highlights plus
-// whatever plugins contribute (bookmarks), clipped to the view width. Callers
-// translate this to the top-left of the tracks area.
-export default function SVGHighlightsOverlay({ model, tracksHeight, }) {
+// The highlight layer over one view's tracks area: the view's highlights plus
+// whatever plugins contribute, clipped to the view width. Callers translate
+// this to the top-left of the tracks area.
+export default function SVGHighlightsOverlay({ model, tracksHeight, gaps, }) {
     const { pluginManager } = getEnv(model);
-    return (_jsxs(SvgClipRect, { id: `highlight-clip-${svgNodeId(model)}`, width: model.width, height: tracksHeight, children: [_jsx(SVGHighlights, { model: model, height: tracksHeight }), _jsx(PluggableElements, { pluginManager: pluginManager, name: "LinearGenomeView-HighlightSVGComponent", props: { model, height: tracksHeight } })] }));
+    return (_jsxs(SvgClipRect, { id: `highlight-clip-${svgNodeId(model)}`, width: model.width, height: tracksHeight, children: [_jsx(SVGHighlights, { model: model, height: tracksHeight, gaps: gaps }), _jsx(PluggableElements, { pluginManager: pluginManager, name: "LinearGenomeView-HighlightSVGComponent", props: { model, height: tracksHeight } })] }));
 }

package/esm/LinearGenomeView/svgcomponents/SVGLinearGenomeView.js

@@ -24,38 +24,33 @@ export async function renderToSvg(model, opts) {
     const { fontSize = 13, 
     // the label band scales with the font it holds; destructured after
     // fontSize so the default can read it
-    textHeight = defaultTextHeight(fontSize), rulerHeight = 34, trackLabels = 'offset', themeName = 'default', fontFamily, showGridlines = false, Wrapper, } = opts;
+    textHeight = defaultTextHeight(fontSize), rulerHeight = 34, trackLabels = 'offset', themeName, fontFamily, showGridlines = false, Wrapper, } = opts;
     const session = getSession(model);
     const theme = session.getActiveThemeOptions?.(themeName);
-    // owns the two orderings this used to spell out by hand: legendWidth before
-    // the awaits, tracksHeight after them. Every display's `renderSvg` owns its
+    // owns the ordering this used to spell out by hand: the stack's height and
+    // legend gutter measured after the awaits. Every display's `renderSvg` owns its
     // own readiness wait — an LGV display through `renderDisplaySvg`'s
     // `awaitSvgReady`, a non-LGV one (dotplot, synteny, circular) by calling that
     // itself.
     const { tracks, displayResults, tracksHeight, legendWidth, skippedTracks } = await renderViewTracks({
         view: model,
-        opts,
+        opts: { ...opts, fontSize },
         theme,
         textHeight,
         trackLabels,
-        // the standalone export is the one with room to give: it widens its
-        // canvas below so a legend sits beside the plot rather than over it
-        reserveLegendWidth: true,
     });
-    notifySkippedSvgTracks(session, skippedTracks);
-    // The view geometry is read *after* the displays' waits, never before —
-    // SVGHeader re-reads both of these when it renders (later still, inside
-    // wrapSvgExport) and lays itself out with the same getHeaderLayout call, so a
-    // value that moved during the awaits would leave the reserved `tracksTop` and
-    // the drawn header describing different rows. Same rule the dotplot, circular
-    // and synteny exports each shipped a violation of.
+    if (opts.announceSkipped !== false) {
+        notifySkippedSvgTracks(session, skippedTracks);
+    }
+    // read after the displays' waits, and handed to SVGHeader rather than read
+    // again, so the reserved `tracksTop` and the drawn header are one layout
     const { width, effectiveShowCytobands } = model;
-    const { tracksTop } = getHeaderLayout({
+    const headerLayout = getHeaderLayout({
         fontSize,
         showCytobands: effectiveShowCytobands,
         rulerHeight,
     });
-    const height = tracksHeight + tracksTop + exportMargin;
+    const { tracksTop } = headerLayout;
     const trackLabelOffset = trackLabelLeftOffset({
         tracks,
         trackLabels,
@@ -68,7 +63,7 @@ export async function renderToSvg(model, opts) {
     return wrapSvgExport({
         theme,
         width: w,
-        height,
+        height: tracksTop + tracksHeight + exportMargin,
         fontFamily,
         Wrapper,
         children: (_jsx("g", { transform: `translate(${exportMargin} 0)`, children: _jsx(SVGView, { view: model, displayResults: displayResults, 
@@ -76,6 +71,6 @@ export async function renderToSvg(model, opts) {
                 // header is the full one: cytoband overview and total-bp scalebar as
                 // well as the assembly name and ruler. `tracksTop` is the height
                 // getHeaderLayout gave it.
-                header: _jsx(SVGHeader, { model: model, fontSize: fontSize, rulerHeight: rulerHeight }), fontSize: fontSize, textHeight: textHeight, trackLabels: trackLabels, trackLabelOffset: trackLabelOffset, contentTop: tracksTop, tracksHeight: tracksHeight, showGridlines: showGridlines, leftBuffer: exportMargin, legendWidth: legendWidth }) })),
+                header: _jsx(SVGHeader, { model: model, fontSize: fontSize, rulerHeight: rulerHeight, layout: headerLayout, showCytobands: effectiveShowCytobands }), fontSize: fontSize, textHeight: textHeight, trackLabels: trackLabels, trackLabelOffset: trackLabelOffset, contentTop: tracksTop, tracksHeight: tracksHeight, showGridlines: showGridlines, leftBuffer: exportMargin }) })),
     });
 }

package/esm/LinearGenomeView/svgcomponents/SVGRegionSeparators.js

@@ -1,5 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { useTheme } from '@mui/material';
+import { usePalette } from '@jbrowse/core/ui/PaletteContext';
 // SVG counterpart of the on-screen PaddingBlocks region separators: an opaque
 // 3px bar at the right edge of every displayed region, in the same per-mode grey
 // (a translucent fill would tint the track data it masks rather than hide it).
@@ -15,10 +15,7 @@ import { useTheme } from '@mui/material';
 // close the "divergence".
 export default function SVGRegionSeparators({ model, height, }) {
     const { dynamicBlocks, offsetPx } = model;
-    const theme = useTheme();
-    const fill = theme.palette.mode === 'dark'
-        ? theme.palette.grey[500]
-        : theme.palette.grey[600];
+    const fill = usePalette().regionSeparator;
     return (_jsx(_Fragment, { children: dynamicBlocks.contentBlocks
             .filter(block => block.isRightEndOfDisplayedRegion)
             .map(block => (_jsx("rect", { x: block.offsetPx + block.widthPx - offsetPx - 1, width: 3, y: 0, height: height, fill: fill }, block.key))) }));

package/esm/LinearGenomeView/svgcomponents/SVGRowHeader.js

@@ -1,6 +1,6 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { usePalette } from '@jbrowse/core/ui/PaletteContext';
 import { stripAlpha } from '@jbrowse/core/util';
-import { useTheme } from '@mui/material';
 import SVGRuler from './SVGRuler.js';
 import SVGScalebar from './SVGScalebar.js';
 import { getRowHeaderLayout } from './util.js';
@@ -10,9 +10,8 @@ import { getRowHeaderLayout } from './util.js';
 // draws the cytoband overview — there is room for that above a single view, and
 // none between two rows of a synteny stack.
 export default function SVGRowHeader({ view, fontSize, 
-// Must be the height the caller also passes SVGView as `contentTop`: the
-// ruler hangs its ticks off the bottom of this budget so they meet the
-// tracks, and the tracks start at `contentTop`.
+// SVGStackedRow passes the same value as SVGView's `contentTop`, so the
+// ticks hanging off this budget meet the tracks
 rulerHeight, 
 // Whether this row draws its assembly name. Default true, which is what a
 // stack of DIFFERENT assemblies wants — a synteny export names each row
@@ -28,10 +27,10 @@ showAssemblyName = true,
 // band and every caller has to reserve that much before asking for it. See
 // getRowHeaderLayout for what it is for.
 showScalebar = false, }) {
-    const theme = useTheme();
+    const palette = usePalette();
     const { assemblyLabelBaselineY, scalebarLineY } = getRowHeaderLayout({
         fontSize,
         showScalebar,
     });
-    return (_jsxs(_Fragment, { children: [showAssemblyName ? (_jsx("text", { x: 0, y: assemblyLabelBaselineY, fontSize: fontSize, fill: stripAlpha(theme.palette.text.primary), children: view.assemblyNames.join(', ') })) : null, scalebarLineY === undefined ? null : (_jsx("g", { transform: `translate(0 ${scalebarLineY})`, children: _jsx(SVGScalebar, { model: view, fontSize: fontSize }) })), _jsx(SVGRuler, { model: view, rulerHeight: rulerHeight })] }));
+    return (_jsxs(_Fragment, { children: [showAssemblyName ? (_jsx("text", { x: 0, y: assemblyLabelBaselineY, fontSize: fontSize, fill: stripAlpha(palette.text.primary), children: view.assemblyNames.join(', ') })) : null, scalebarLineY === undefined ? null : (_jsx("g", { transform: `translate(0 ${scalebarLineY})`, children: _jsx(SVGScalebar, { model: view, fontSize: fontSize }) })), _jsx(SVGRuler, { model: view, rulerHeight: rulerHeight })] }));
 }

package/esm/LinearGenomeView/svgcomponents/SVGRuler.js

@@ -1,11 +1,11 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { SvgClipRect } from '@jbrowse/core/svg/SvgExport';
 import { svgNodeId } from '@jbrowse/core/svg/svgId';
+import { usePalette } from '@jbrowse/core/ui/PaletteContext';
 import { stripAlpha } from '@jbrowse/core/util';
-import { useTheme } from '@mui/material';
-import { REF_NAME_LABEL_FONT_SIZE, getScalebarRefNameLabels, labelFitsInBlock, refNameLabelFitsInView, tickLabelWidth, } from '../util.js';
+import { REF_NAME_LABEL_FONT_SIZE, TICK_LABEL_FONT_SIZE, getScalebarRefNameLabels, labelFitsInBlock, refNameLabelFitsInView, tickLabelWidth, } from '../util.js';
 import SVGRegionSeparators from './SVGRegionSeparators.js';
-import { RULER_MAJOR_TICK, RULER_MINOR_TICK, RULER_TICK_FONT_SIZE, getRulerLayout, gridlineTickXs, refNameLabelBaselineY, refNameLabelBoxHeight, vlinePath, } from './util.js';
+import { RULER_MAJOR_TICK, RULER_MINOR_TICK, getRulerLayout, gridlineTickXs, refNameLabelBaselineY, refNameLabelBoxHeight, vlinePath, } from './util.js';
 // Tick marks and their coordinate labels, read from the same model getters the
 // on-screen Gridlines/ScalebarCoordinateLabels use (gridlineTicks /
 // scalebarLabels), so tick pitch, label text and label placement can't drift
@@ -13,8 +13,8 @@ import { RULER_MAJOR_TICK, RULER_MINOR_TICK, RULER_TICK_FONT_SIZE, getRulerLayou
 // the viewport, so shift by the view's `staticBlocksTranslateX` and let the
 // caller's clip trim the overhang.
 function Ruler({ model, tickTopY, numbersBaselineY, }) {
-    const theme = useTheme();
-    const color = stripAlpha(theme.palette.text.secondary);
+    const palette = usePalette();
+    const color = stripAlpha(palette.text.secondary);
     const { scalebarLabels, width } = model;
     const { dx, major, minor } = gridlineTickXs(model);
     // major and minor marks share a stroke and differ only in length, so both
@@ -26,15 +26,14 @@ function Ruler({ model, tickTopY, numbersBaselineY, }) {
                 const w = tickLabelWidth(label);
                 return labelFitsInBlock(dx + x - w / 2, w, width);
             })
-                .map(({ x, label, key }) => (_jsx("text", { x: dx + x, y: numbersBaselineY, textAnchor: "middle", fontSize: RULER_TICK_FONT_SIZE, fill: color, children: label }, key)))] }));
+                .map(({ x, label, key }) => (_jsx("text", { x: dx + x, y: numbersBaselineY, textAnchor: "middle", fontSize: TICK_LABEL_FONT_SIZE, fill: color, children: label }, key)))] }));
 }
 // Chromosome/refName labels along the ruler. Reuses the on-screen scalebar's
 // sticky-label logic (getScalebarRefNameLabels) so the exported name stays
 // pinned to the viewport's left edge when a region has scrolled off — otherwise
 // the name renders off-canvas whenever you export a view zoomed into a
 // chromosome interior. No assembly-name prefix here (unlike the on-screen
-// scalebar): the SVG export already draws a standalone assembly-name label
-// above the ruler, so folding it into this one too is redundant.
+// scalebar): the SVG export already draws the assembly name above the ruler.
 //
 // `orientation` is not redundant, and this is the surface that needed it most.
 // A stacked export gives each row SVGRowHeader — assembly name, ruler, refName
@@ -42,8 +41,8 @@ function Ruler({ model, tickTopY, numbersBaselineY, }) {
 // counting down as the only evidence it was flipped. On screen the search box
 // says so; a figure has no search box.
 function SVGRefNameLabels({ model }) {
-    const theme = useTheme();
-    const fill = stripAlpha(theme.palette.text.primary);
+    const palette = usePalette();
+    const fill = stripAlpha(palette.text.primary);
     const { labels, caption } = getScalebarRefNameLabels({
         blocks: model.staticBlocks.blocks,
         offsetPx: model.offsetPx,

package/esm/LinearGenomeView/svgcomponents/SVGScalebar.js

@@ -1,15 +1,15 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { usePalette } from '@jbrowse/core/ui/PaletteContext';
 import { getBpDisplayStr, stripAlpha } from '@jbrowse/core/util';
-import { useTheme } from '@mui/material';
 import { SVG_SCALEBAR_CAP } from '../consts.js';
 import { labelBaselineFromTop } from './util.js';
 export default function SVGScalebar({ model, fontSize, }) {
     const { offsetPx, dynamicBlocks: { totalWidthPxWithoutBorders: totalWidthPx, totalBp }, } = model;
-    const theme = useTheme();
+    const palette = usePalette();
     const displayBp = getBpDisplayStr(totalBp);
     const x0 = Math.max(-offsetPx, 0);
     const x1 = x0 + totalWidthPx;
-    const color = stripAlpha(theme.palette.text.secondary);
+    const color = stripAlpha(palette.text.secondary);
     // the bar is drawn on this component's own origin (y=0), with capped ends and
     // the bp label hanging just below; callers translate it to the desired line y
     return (_jsxs(_Fragment, { children: [_jsx("line", { x1: x0, x2: x1, y1: 0, y2: 0, stroke: color }), _jsx("line", { x1: x0, x2: x0, y1: -SVG_SCALEBAR_CAP, y2: SVG_SCALEBAR_CAP, stroke: color }), _jsx("line", { x1: x1, x2: x1, y1: -SVG_SCALEBAR_CAP, y2: SVG_SCALEBAR_CAP, stroke: color }), _jsx("text", { x: (x0 + x1) / 2, y: labelBaselineFromTop(SVG_SCALEBAR_CAP, fontSize), textAnchor: "middle", fontSize: fontSize, fill: color, children: displayBp })] }));

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

@@ -0,0 +1,26 @@
+import type { LinearGenomeViewModel } from '../index.ts';
+import type { SvgDisplayResult } from './util.ts';
+import type { TrackLabelMode } from '@jbrowse/display-kit/types';
+/**
+ * One view of a stacked export: its ruler, with the assembly name and scalebar
+ * above it, over its track bodies. `top` is where the ruler starts; the caller
+ * reserves `getRowHeaderLayout().bandHeight` above it for the header to draw
+ * into, and the row is `rulerHeight + rendered.tracksHeight` tall below it.
+ */
+export default function SVGStackedRow({ view, rendered, top, margin, fontSize, textHeight, rulerHeight, trackLabels, trackLabelOffset, showGridlines, showAssemblyName, showScalebar, }: {
+    view: LinearGenomeViewModel;
+    rendered: {
+        displayResults: SvgDisplayResult[];
+        tracksHeight: number;
+    };
+    top: number;
+    margin: number;
+    fontSize: number;
+    textHeight: number;
+    rulerHeight: number;
+    trackLabels: TrackLabelMode;
+    trackLabelOffset: number;
+    showGridlines: boolean;
+    showAssemblyName?: boolean;
+    showScalebar?: boolean;
+}): import("react").JSX.Element;

package/esm/LinearGenomeView/svgcomponents/SVGStackedRow.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import SVGRowHeader from './SVGRowHeader.js';
+import SVGView from './SVGView.js';
+/**
+ * One view of a stacked export: its ruler, with the assembly name and scalebar
+ * above it, over its track bodies. `top` is where the ruler starts; the caller
+ * reserves `getRowHeaderLayout().bandHeight` above it for the header to draw
+ * into, and the row is `rulerHeight + rendered.tracksHeight` tall below it.
+ */
+export default function SVGStackedRow({ view, rendered, top, margin, fontSize, textHeight, rulerHeight, trackLabels, trackLabelOffset, showGridlines, showAssemblyName, showScalebar, }) {
+    return (_jsx("g", { transform: `translate(${margin} ${top})`, children: _jsx(SVGView, { view: view, displayResults: rendered.displayResults, header: _jsx(SVGRowHeader, { view: view, fontSize: fontSize, rulerHeight: rulerHeight, showAssemblyName: showAssemblyName, showScalebar: showScalebar }), fontSize: fontSize, textHeight: textHeight, trackLabels: trackLabels, trackLabelOffset: trackLabelOffset, contentTop: rulerHeight, tracksHeight: rendered.tracksHeight, showGridlines: showGridlines, leftBuffer: margin }) }));
+}

package/esm/LinearGenomeView/svgcomponents/SVGTrackLabel.js

@@ -1,19 +1,18 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { usePalette } from '@jbrowse/core/ui/PaletteContext';
 import { stripAlpha } from '@jbrowse/core/util';
-import { useTheme } from '@mui/material';
 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 ('overlay').
+// 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'/'overlay' 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 {
@@ -32,8 +31,8 @@ function labelPosition({ trackLabels, trackLabelOffset, textHeight, fontSize, x,
     return { x: x + 5, y: insetLabelBaselineY(fontSize) };
 }
 export default function SVGTrackLabel({ trackLabels, trackName, fontSize, textHeight, trackLabelOffset, x, }) {
-    const theme = useTheme();
-    if (trackLabels === 'none') {
+    const palette = usePalette();
+    if (trackLabels === 'hidden') {
         return null;
     }
     const pos = labelPosition({
@@ -43,5 +42,14 @@ export default function SVGTrackLabel({ trackLabels, trackName, fontSize, textHe
         fontSize,
         x,
     });
-    return (_jsx("text", { x: pos.x, y: pos.y, textAnchor: pos.textAnchor, fontSize: fontSize, fill: stripAlpha(theme.palette.text.primary), children: trackName }));
+    // '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
+    const halo = trackLabels === 'overlapping'
+        ? {
+            stroke: stripAlpha(palette.background.paper),
+            strokeWidth: 3,
+            paintOrder: 'stroke',
+        }
+        : {};
+    return (_jsx("text", { x: pos.x, y: pos.y, textAnchor: pos.textAnchor, fontSize: fontSize, fill: stripAlpha(palette.text.primary), ...halo, children: trackName }));
 }

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

@@ -2,14 +2,13 @@ import type { LinearGenomeViewModel } from '../index.ts';
 import type { TrackLabelMode } from '../types.ts';
 import type { SvgDisplayResult } from './util.ts';
 type LGV = LinearGenomeViewModel;
-export default function SVGTracks({ displayResults, model, textHeight, fontSize, trackLabels, trackLabelOffset, leftBuffer, legendWidth, }: {
+export default function SVGTracks({ displayResults, model, textHeight, fontSize, trackLabels, trackLabelOffset, leftBuffer, }: {
     displayResults: SvgDisplayResult[];
     model: LGV;
     textHeight: number;
     fontSize: number;
-    trackLabels?: TrackLabelMode;
-    trackLabelOffset?: number;
-    leftBuffer?: number;
-    legendWidth?: number;
+    trackLabels: TrackLabelMode;
+    trackLabelOffset: number;
+    leftBuffer: number;
 }): import("react").JSX.Element;
 export {};

package/esm/LinearGenomeView/svgcomponents/SVGTracks.js

@@ -3,19 +3,20 @@ import { SvgClipRect } from '@jbrowse/core/svg/SvgExport';
 import { svgNodeId } from '@jbrowse/core/svg/svgId';
 import { svgTrackName } from '@jbrowse/core/svg/trackNames';
 import { getSession } from '@jbrowse/core/util';
+import { SvgLegend } from '@jbrowse/display-kit/renderDisplaySvg';
 import SVGRegionSeparators from './SVGRegionSeparators.js';
 import SVGTrackLabel from './SVGTrackLabel.js';
-import { labelOffset, trackBoxOffsets } from './util.js';
-export default function SVGTracks({ displayResults, model, textHeight, fontSize, trackLabels = 'offset', trackLabelOffset = 0, leftBuffer = 0, legendWidth = 0, }) {
+import { labelOffset, trackBoxOffsets, trackLabelMode } from './util.js';
+export default function SVGTracks({ displayResults, model, textHeight, fontSize, trackLabels, trackLabelOffset, leftBuffer, }) {
     const session = getSession(model);
-    const textOffset = labelOffset(trackLabels, textHeight);
     const x = Math.max(-model.offsetPx, 0);
-    const offsets = trackBoxOffsets(displayResults.map(r => r.track), textOffset);
-    return (_jsx(_Fragment, { children: displayResults.map(({ track, result }, i) => {
+    const offsets = trackBoxOffsets(displayResults.map(r => r.track), trackLabels, textHeight);
+    return (_jsx(_Fragment, { children: displayResults.map(({ track, result, legendHeight }, i) => {
             const conf = track.configuration;
             const trackName = svgTrackName(track, session);
             const display = track.displays[0];
             const currentOffset = offsets[i];
-            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, _jsx(SVGRegionSeparators, { model: model, height: display.height })] }) }), _jsx(SVGTrackLabel, { trackName: trackName, fontSize: fontSize, textHeight: textHeight, trackLabels: trackLabels, trackLabelOffset: trackLabelOffset, x: x })] }, conf.trackId));
+            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, height: display.height, children: _jsxs("g", { transform: `translate(${trackLabelOffset} ${textOffset})`, children: [result, display.regionTooLarge ? null : (_jsx(SVGRegionSeparators, { model: model, height: display.height }))] }) }), legendHeight === undefined ? null : (_jsx("g", { transform: `translate(${trackLabelOffset} ${textOffset})`, children: _jsx(SvgLegend, { model: display, width: model.width, height: legendHeight }) })), _jsx(SVGTrackLabel, { trackName: trackName, fontSize: fontSize, textHeight: textHeight, trackLabels: trackLabelMode(track, trackLabels), trackLabelOffset: trackLabelOffset, x: x + trackLabelOffset })] }, conf.trackId));
         }) }));
 }

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

@@ -2,7 +2,7 @@ import type { LinearGenomeViewModel } from '../index.ts';
 import type { TrackLabelMode } from '../types.ts';
 import type { SvgDisplayResult } from './util.ts';
 import type { ReactNode } from 'react';
-export default function SVGView({ view, displayResults, header, fontSize, textHeight, trackLabels, trackLabelOffset, contentTop, tracksHeight, showGridlines, leftBuffer, legendWidth, }: {
+export default function SVGView({ view, displayResults, header, fontSize, textHeight, trackLabels, trackLabelOffset, contentTop, tracksHeight, showGridlines, leftBuffer, }: {
     view: LinearGenomeViewModel;
     displayResults: SvgDisplayResult[];
     header: ReactNode;
@@ -13,6 +13,5 @@ export default function SVGView({ view, displayResults, header, fontSize, textHe
     contentTop: number;
     tracksHeight: number;
     showGridlines: boolean;
-    leftBuffer?: number;
-    legendWidth?: number;
+    leftBuffer: number;
 }): import("react").JSX.Element;

package/esm/LinearGenomeView/svgcomponents/SVGView.js

@@ -2,12 +2,26 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import SVGGridlines from './SVGGridlines.js';
 import SVGHighlightsOverlay from './SVGHighlightsOverlay.js';
 import SVGTracks from './SVGTracks.js';
+import { labelOffset, trackBoxOffsets } from './util.js';
 // One LGV's worth of exported SVG: a caller-supplied header on top, then
 // optional gridlines, the track bodies, and the highlight layer over them.
 // Shared by all three exports that stack an LGV — the standalone one, and the
 // linear-synteny and breakpoint-split rows — so their per-view layout can't
 // drift. It did drift while the standalone export kept its own copy of these
-// four groups: only that copy widened the per-track clip by `legendWidth`.
-export default function SVGView({ view, displayResults, header, fontSize, textHeight, trackLabels, trackLabelOffset, contentTop, tracksHeight, showGridlines, leftBuffer = 0, legendWidth = 0, }) {
-    return (_jsxs(_Fragment, { children: [_jsx("g", { transform: `translate(${trackLabelOffset})`, children: header }), showGridlines ? (_jsx("g", { transform: `translate(${trackLabelOffset} ${contentTop})`, children: _jsx(SVGGridlines, { model: view, height: tracksHeight }) })) : null, _jsx("g", { transform: `translate(0 ${contentTop})`, children: _jsx(SVGTracks, { textHeight: textHeight, trackLabels: trackLabels, fontSize: fontSize, model: view, displayResults: displayResults, trackLabelOffset: trackLabelOffset, leftBuffer: leftBuffer, legendWidth: legendWidth }) }), _jsx("g", { transform: `translate(${trackLabelOffset} ${contentTop})`, children: _jsx(SVGHighlightsOverlay, { model: view, tracksHeight: tracksHeight }) })] }));
+// four groups.
+export default function SVGView({ view, displayResults, header, fontSize, textHeight, trackLabels, trackLabelOffset, contentTop, tracksHeight, showGridlines, leftBuffer, }) {
+    const tracks = displayResults.map(r => r.track);
+    const offsets = trackBoxOffsets(tracks, trackLabels, textHeight);
+    const nonGenomicBands = tracks.flatMap((track, i) => {
+        const display = track.displays[0];
+        return display.drawsGenomicCoordinates === false
+            ? [
+                {
+                    top: offsets[i] + labelOffset(track, trackLabels, textHeight),
+                    height: display.height,
+                },
+            ]
+            : [];
+    });
+    return (_jsxs(_Fragment, { children: [_jsx("g", { transform: `translate(${trackLabelOffset})`, children: header }), showGridlines ? (_jsx("g", { transform: `translate(${trackLabelOffset} ${contentTop})`, children: _jsx(SVGGridlines, { model: view, height: tracksHeight }) })) : null, _jsx("g", { transform: `translate(0 ${contentTop})`, children: _jsx(SVGTracks, { textHeight: textHeight, trackLabels: trackLabels, fontSize: fontSize, model: view, displayResults: displayResults, trackLabelOffset: trackLabelOffset, leftBuffer: leftBuffer }) }), _jsx("g", { transform: `translate(${trackLabelOffset} ${contentTop})`, children: _jsx(SVGHighlightsOverlay, { model: view, tracksHeight: tracksHeight, gaps: nonGenomicBands }) })] }));
 }