@jbrowse/plugin-linear-genome-view 3.6.5 → 4.0.0

package/esm/LinearGenomeView/svgExportUtil.d.ts

@@ -0,0 +1,9 @@
+export declare function isReadyOrHasError(display: {
+    renderProps(): {
+        notReady?: boolean;
+    };
+    error?: unknown;
+}): boolean;
+export declare function hasAnySubDisplayError(displays: {
+    error?: unknown;
+}[]): boolean;

package/esm/LinearGenomeView/svgExportUtil.js

@@ -0,0 +1,6 @@
+export function isReadyOrHasError(display) {
+    return !display.renderProps().notReady || !!display.error;
+}
+export function hasAnySubDisplayError(displays) {
+    return displays.some(d => !!d.error);
+}

package/{dist/LinearGenomeView/svgcomponents/SVGRegionSeparators.d.ts → esm/LinearGenomeView/svgcomponents/SVGGridlines.d.ts}

@@ -1,7 +1,7 @@
 import type { LinearGenomeViewModel } from '..';
 type LGV = LinearGenomeViewModel;
-export default function SVGRegionSeparators({ model, height, }: {
-    height: number;
+export default function SVGGridlines({ model, height, }: {
     model: LGV;
+    height: number;
 }): import("react/jsx-runtime").JSX.Element;
 export {};

package/esm/LinearGenomeView/svgcomponents/SVGGridlines.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { stripAlpha } from '@jbrowse/core/util';
+import { useTheme } from '@mui/material';
+import { makeTicks } from "../util.js";
+export default function SVGGridlines({ model, height, }) {
+    const { dynamicBlocks: { contentBlocks }, offsetPx: viewOffsetPx, bpPerPx, } = model;
+    const theme = useTheme();
+    const c = stripAlpha(theme.palette.divider);
+    return (_jsx(_Fragment, { children: contentBlocks.map(block => {
+            const { start, end, key, reversed, offsetPx, widthPx } = block;
+            const offset = offsetPx - viewOffsetPx;
+            const ticks = makeTicks(start, end, bpPerPx, true, true);
+            const clipid = `gridline-clip-${key}`;
+            return (_jsxs("g", { children: [_jsx("defs", { children: _jsx("clipPath", { id: clipid, children: _jsx("rect", { x: 0, y: 0, width: widthPx, height: height }) }) }), _jsx("g", { transform: `translate(${offset} 0)`, clipPath: `url(#${clipid})`, children: ticks.map(tick => {
+                            const x = (reversed ? end - tick.base : tick.base - start) / bpPerPx;
+                            const isMajor = tick.type === 'major';
+                            return (_jsx("line", { x1: x, x2: x, y1: 0, y2: height, strokeWidth: 1, stroke: c, strokeOpacity: isMajor ? 0.3 : 0.15 }, `gridline-${tick.base}`));
+                        }) })] }, key));
+        }) }));
+}

package/esm/LinearGenomeView/svgcomponents/SVGHeader.js

@@ -2,11 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getSession, stripAlpha } from '@jbrowse/core/util';
 import Base1DView from '@jbrowse/core/util/Base1DViewModel';
 import { useTheme } from '@mui/material';
-import SVGRuler from './SVGRuler';
-import SVGScalebar from './SVGScalebar';
-import Cytobands from '../components/Cytobands';
-import OverviewScalebarPolygon from '../components/OverviewScalebarPolygon';
-import { HEADER_OVERVIEW_HEIGHT } from '../consts';
+import SVGRuler from "./SVGRuler.js";
+import SVGScalebar from "./SVGScalebar.js";
+import Cytobands from "../components/Cytobands.js";
+import OverviewScalebarPolygon from "../components/OverviewScalebarPolygon.js";
+import { HEADER_OVERVIEW_HEIGHT } from "../consts.js";
 export default function SVGHeader({ model, fontSize, cytobandHeight, rulerHeight, }) {
     const { width, assemblyNames, showCytobands, displayedRegions } = model;
     const { assemblyManager } = getSession(model);

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

@@ -1,6 +1,7 @@
 import type { LinearGenomeViewModel } from '..';
-import type { ExportSvgOptions } from '../types';
+import type { ExportSvgOptions } from '../types.ts';
 type LGV = LinearGenomeViewModel;
 export declare function renderToSvg(model: LGV, opts: ExportSvgOptions): Promise<string>;
-export { default as SVGRuler } from './SVGRuler';
-export { default as SVGTracks } from './SVGTracks';
+export { default as SVGGridlines } from './SVGGridlines.tsx';
+export { default as SVGRuler } from './SVGRuler.tsx';
+export { default as SVGTracks } from './SVGTracks.tsx';

package/esm/LinearGenomeView/svgcomponents/SVGLinearGenomeView.js

@@ -4,30 +4,42 @@ import { getSession, max, measureText, renderToStaticMarkup, } from '@jbrowse/co
 import { getTrackName } from '@jbrowse/core/util/tracks';
 import { ThemeProvider } from '@mui/material';
 import { when } from 'mobx';
-import SVGBackground from './SVGBackground';
-import SVGHeader from './SVGHeader';
-import SVGTracks from './SVGTracks';
-import { totalHeight } from './util';
+import { isReadyOrHasError } from "../svgExportUtil.js";
+import SVGBackground from "./SVGBackground.js";
+import SVGGridlines from "./SVGGridlines.js";
+import SVGHeader from "./SVGHeader.js";
+import SVGTracks from "./SVGTracks.js";
+import { totalHeight } from "./util.js";
 export async function renderToSvg(model, opts) {
     await when(() => model.initialized);
-    const { textHeight = 18, headerHeight = 40, rulerHeight = 50, fontSize = 13, cytobandHeight = 100, trackLabels = 'offset', themeName = 'default', Wrapper = ({ children }) => children, } = opts;
+    const { textHeight = 18, headerHeight = 40, rulerHeight = 50, fontSize = 13, cytobandHeight = 100, trackLabels = 'offset', themeName = 'default', showGridlines = false, Wrapper = ({ children }) => children, } = opts;
     const session = getSession(model);
     const { allThemes } = session;
-    const theme = allThemes === null || allThemes === void 0 ? void 0 : allThemes()[themeName];
+    const theme = allThemes?.()[themeName];
+    const jbrowseTheme = createJBrowseTheme(theme);
     const { width, pinnedTracks, unpinnedTracks, tracks, showCytobands } = model;
     const shift = 50;
     const c = +showCytobands * cytobandHeight;
     const offset = headerHeight + rulerHeight + c + 10;
     const height = totalHeight(tracks, textHeight, trackLabels) + offset + 100;
+    const legendWidth = max([...pinnedTracks, ...unpinnedTracks].map(track => {
+        const display = track.displays[0];
+        return display?.svgLegendWidth?.(jbrowseTheme) ?? 0;
+    }), 0);
     const displayResults = await Promise.all([...pinnedTracks, ...unpinnedTracks].map(async (track) => {
         const display = track.displays[0];
-        await when(() => !display.renderProps().notReady);
-        return { track, result: await display.renderSvg({ ...opts, theme }) };
+        await when(() => isReadyOrHasError(display));
+        return {
+            track,
+            result: await display.renderSvg({ ...opts, theme, legendWidth }),
+        };
     }));
     const trackLabelMaxLen = max(tracks.map(t => measureText(getTrackName(t.configuration, session), fontSize)), 0) + 40;
     const trackLabelOffset = trackLabels === 'left' ? trackLabelMaxLen : 0;
-    const w = width + trackLabelOffset;
-    return renderToStaticMarkup(_jsx(ThemeProvider, { theme: createJBrowseTheme(theme), children: _jsx(Wrapper, { children: _jsxs("svg", { width: w, height: height, xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", viewBox: [0, 0, w + shift * 2, height].toString(), children: [_jsx(SVGBackground, { width: w, height: height, shift: shift }), _jsxs("g", { transform: `translate(${shift} 0)`, children: [_jsx("g", { transform: `translate(${trackLabelOffset})`, children: _jsx(SVGHeader, { model: model, fontSize: fontSize, rulerHeight: rulerHeight, cytobandHeight: cytobandHeight }) }), _jsx("g", { transform: `translate(0 ${offset})`, children: _jsx(SVGTracks, { textHeight: textHeight, fontSize: fontSize, model: model, displayResults: displayResults, trackLabels: trackLabels, trackLabelOffset: trackLabelOffset }) })] })] }) }) }));
+    const w = width + trackLabelOffset + legendWidth;
+    const tracksHeight = totalHeight(tracks, textHeight, trackLabels);
+    return renderToStaticMarkup(_jsx(ThemeProvider, { theme: createJBrowseTheme(theme), children: _jsx(Wrapper, { children: _jsxs("svg", { width: w, height: height, xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", viewBox: [0, 0, w + shift * 2, height].toString(), children: [_jsx(SVGBackground, { width: w, height: height, shift: shift }), _jsxs("g", { transform: `translate(${shift} 0)`, children: [_jsx("g", { transform: `translate(${trackLabelOffset})`, children: _jsx(SVGHeader, { model: model, fontSize: fontSize, rulerHeight: rulerHeight, cytobandHeight: cytobandHeight }) }), showGridlines ? (_jsx("g", { transform: `translate(${trackLabelOffset} ${offset})`, children: _jsx(SVGGridlines, { model: model, height: tracksHeight }) })) : null, _jsx("g", { transform: `translate(0 ${offset})`, children: _jsx(SVGTracks, { textHeight: textHeight, fontSize: fontSize, model: model, displayResults: displayResults, trackLabels: trackLabels, trackLabelOffset: trackLabelOffset }) })] })] }) }) }));
 }
-export { default as SVGRuler } from './SVGRuler';
-export { default as SVGTracks } from './SVGTracks';
+export { default as SVGGridlines } from "./SVGGridlines.js";
+export { default as SVGRuler } from "./SVGRuler.js";
+export { default as SVGTracks } from "./SVGTracks.js";

package/esm/LinearGenomeView/svgcomponents/SVGRuler.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { getTickDisplayStr, stripAlpha } from '@jbrowse/core/util';
+import { getTickDisplayStr, measureText, stripAlpha } from '@jbrowse/core/util';
 import { useTheme } from '@mui/material';
-import { makeTicks } from '../util';
-import SVGRegionSeparators from './SVGRegionSeparators';
-function Ruler({ start, end, bpPerPx, reversed = false, major = true, minor = true, hideText = false, }) {
+import { makeTicks } from "../util.js";
+import SVGRegionSeparators from "./SVGRegionSeparators.js";
+function Ruler({ start, end, bpPerPx, reversed = false, major = true, minor = true, hideText = false, widthPx, }) {
     const ticks = makeTicks(start, end, bpPerPx, major, minor);
     const theme = useTheme();
     const c = stripAlpha(theme.palette.text.secondary);
@@ -13,6 +13,14 @@ function Ruler({ start, end, bpPerPx, reversed = false, major = true, minor = tr
             }), !hideText
                 ? ticks
                     .filter(tick => tick.type === 'major')
+                    .filter(tick => {
+                    const x = (reversed ? end - tick.base : tick.base - start) / bpPerPx;
+                    const labelText = getTickDisplayStr(tick.base + 1, bpPerPx);
+                    const labelWidth = measureText(labelText, 11) + 4;
+                    const leftEdge = x - 3;
+                    const rightEdge = leftEdge + labelWidth;
+                    return leftEdge >= 0 && rightEdge <= widthPx;
+                })
                     .map(tick => {
                     const x = (reversed ? end - tick.base : tick.base - start) / bpPerPx;
                     return (_jsx("text", { x: x - 3, y: 7 + 11, fontSize: 11, fill: c, children: getTickDisplayStr(tick.base + 1, bpPerPx) }, `label-${tick.base}`));
@@ -28,6 +36,6 @@ export default function SVGRuler({ model, fontSize, }) {
                 const { start, end, key, reversed, offsetPx, refName, widthPx } = block;
                 const offset = offsetPx - viewOffsetPx;
                 const clipid = `clip-${key}`;
-                return (_jsxs("g", { children: [_jsx("defs", { children: _jsx("clipPath", { id: clipid, children: _jsx("rect", { x: 0, y: 0, width: widthPx, height: 100 }) }) }), _jsx("g", { transform: `translate(${offset} 0)`, children: _jsxs("g", { clipPath: `url(#${clipid})`, children: [_jsx("text", { x: 4, y: fontSize, fontSize: fontSize, fill: c, children: refName }), _jsx("g", { transform: "translate(0 20)", children: _jsx(Ruler, { hideText: !renderRuler, start: start, end: end, bpPerPx: bpPerPx, reversed: reversed }) })] }) })] }, key));
+                return (_jsxs("g", { children: [_jsx("defs", { children: _jsx("clipPath", { id: clipid, children: _jsx("rect", { x: 0, y: 0, width: widthPx, height: 100 }) }) }), _jsx("g", { transform: `translate(${offset} 0)`, children: _jsxs("g", { clipPath: `url(#${clipid})`, children: [_jsx("text", { x: 4, y: fontSize, fontSize: fontSize, fill: c, children: refName }), _jsx("g", { transform: "translate(0 20)", children: _jsx(Ruler, { hideText: !renderRuler, start: start, end: end, bpPerPx: bpPerPx, reversed: reversed, widthPx: widthPx }) })] }) })] }, key));
             })] }));
 }

package/esm/LinearGenomeView/svgcomponents/SVGTracks.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { getSession } from '@jbrowse/core/util';
 import { getTrackName } from '@jbrowse/core/util/tracks';
-import SVGRegionSeparators from './SVGRegionSeparators';
-import SVGTrackLabel from './SVGTrackLabel';
+import SVGRegionSeparators from "./SVGRegionSeparators.js";
+import SVGTrackLabel from "./SVGTrackLabel.js";
 export default function SVGTracks({ displayResults, model, textHeight, fontSize, trackLabels = 'offset', trackLabelOffset = 0, }) {
     const session = getSession(model);
     const textOffset = trackLabels === 'offset' ? textHeight : 0;

package/esm/LinearGenomeView/types.d.ts

@@ -23,6 +23,7 @@ export interface ExportSvgOptions {
     cytobandHeight?: number;
     trackLabels?: string;
     themeName?: string;
+    showGridlines?: boolean;
 }
 export interface HighlightType {
     start: number;
@@ -37,7 +38,10 @@ export interface NavLocation {
     assemblyName?: string;
 }
 export interface InitState {
-    loc: string;
+    loc?: string;
     assembly: string;
     tracks?: string[];
+    tracklist?: boolean;
+    nav?: boolean;
+    highlight?: string[];
 }

package/esm/LinearGenomeView/util.d.ts

@@ -17,9 +17,9 @@ export declare function generateLocations({ regions, assemblyManager, assemblyNa
 }): Promise<{
     assemblyName: string;
     parentRegion: import("@jbrowse/core/assemblyManager/assembly").BasicRegion;
-    end?: number | undefined;
-    start?: number | undefined;
     refName: string;
+    start?: number | undefined;
+    end?: number | undefined;
     reversed?: boolean | undefined;
 }[]>;
 export declare function parseLocStrings(input: string, assemblyName: string, isValidRefName: (str: string, assemblyName: string) => boolean): ParsedLocString[];

package/esm/LinearGenomeView/util.js

@@ -2,7 +2,7 @@ import { assembleLocString, parseLocString } from '@jbrowse/core/util';
 export function chooseGridPitch(scale, minMajorPitchPx, minMinorPitchPx) {
     scale = Math.abs(scale);
     const minMajorPitchBp = minMajorPitchPx * scale;
-    const majorMagnitude = Number.parseInt(Number(minMajorPitchBp).toExponential().split(/e/i)[1], 10);
+    const majorMagnitude = +minMajorPitchBp.toExponential().split(/e/i)[1];
     let majorPitch = 10 ** majorMagnitude;
     while (majorPitch < minMajorPitchBp) {
         majorPitch *= 2;
@@ -104,7 +104,7 @@ export function parseLocStrings(input, assemblyName, isValidRefName) {
     }
     catch (e) {
         const [refName, start, end] = inputs;
-        if (/Unknown reference sequence/.exec(`${e}`) &&
+        if (/Unknown feature or sequence/.exec(`${e}`) &&
             Number.isInteger(+start) &&
             Number.isInteger(+end)) {
             return [
@@ -120,12 +120,14 @@ export function calculateVisibleLocStrings(contentBlocks) {
     }
     else {
         const isSingleAssemblyName = contentBlocks.every(b => b.assemblyName === contentBlocks[0].assemblyName);
-        const locs = contentBlocks.map(block => assembleLocString({
-            ...block,
+        return contentBlocks
+            .map(block => assembleLocString({
+            refName: block.refName,
             start: Math.round(block.start),
             end: Math.round(block.end),
             assemblyName: isSingleAssemblyName ? undefined : block.assemblyName,
-        }));
-        return locs.join(' ');
+            reversed: block.reversed,
+        }))
+            .join(' ');
     }
 }