@jbrowse/plugin-breakpoint-split-view 2.17.0 → 3.0.0

package/esm/BreakpointSplitView/components/AlignmentConnections.js

@@ -1,15 +1,15 @@
-import React, { useMemo, useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { getSession, getStrokeProps } from '@jbrowse/core/util';
+import { useTheme } from '@mui/material';
 import { observer } from 'mobx-react';
 import { getSnapshot } from 'mobx-state-tree';
-import { useTheme } from '@mui/material';
-import { getSession, getStrokeProps } from '@jbrowse/core/util';
-// locals
 import { getBadlyPairedAlignments, getMatchedAlignmentFeatures, hasPairedReads, } from './util';
-import { yPos, useNextFrame, getPxFromCoordinate, heightFromSpecificLevel, } from '../util';
+import { getPxFromCoordinate, heightFromSpecificLevel, useNextFrame, yPos, } from '../util';
 import { getLongReadOrientationAbnormal, getLongReadOrientationColorOrDefault, getPairedOrientationColor, isAbnormalOrientation, } from './getOrientationColor';
 const [LEFT, , RIGHT] = [0, 1, 2, 3];
 const AlignmentConnections = observer(function ({ model, trackId, parentRef, getTrackYPosOverride, }) {
-    const { views, showIntraviewLinks } = model;
+    const { interactiveOverlay, views, showIntraviewLinks } = model;
     const theme = useTheme();
     const session = getSession(model);
     const snap = getSnapshot(model);
@@ -36,104 +36,96 @@ const AlignmentConnections = observer(function ({ model, trackId, parentRef, get
         const rect = parentRef.current.getBoundingClientRect();
         yOffset = rect.top;
     }
-    return assembly ? (React.createElement("g", { fill: "none", "data-testid": layoutMatches.length ? `${trackId}-loaded` : trackId }, layoutMatches.map(chunk => {
-        const ret = [];
-        // we follow a path in the list of chunks, not from top to bottom, just in series
-        // following x1,y1 -> x2,y2
-        for (let i = 0; i < chunk.length - 1; i++) {
-            const { layout: c1, feature: f1, level: level1 } = chunk[i];
-            const { layout: c2, feature: f2, level: level2 } = chunk[i + 1];
-            if (!c1 || !c2) {
-                console.warn('received null layout for a overlay feature');
-                return null;
-            }
-            // disable rendering connections in a single row
-            if (!showIntraviewLinks && level1 === level2) {
-                return null;
-            }
-            const f1ref = assembly.getCanonicalRefName(f1.get('refName'));
-            const f2ref = assembly.getCanonicalRefName(f2.get('refName'));
-            if (!f1ref || !f2ref) {
-                throw new Error(`unable to find ref for ${f1ref || f2ref}`);
-            }
-            const r = {
-                pair_orientation: f1.get('pair_orientation'),
-            };
-            const s1 = f1.get('strand');
-            const s2 = f2.get('strand');
-            const sameRef = f1ref === f2ref;
-            const checkOrientation = sameRef;
-            let orientationColor = '';
-            let isAbnormal = false;
-            if (checkOrientation) {
-                if (hasPaired) {
-                    orientationColor = getPairedOrientationColor(r);
-                    isAbnormal = isAbnormalOrientation(r);
+    return assembly ? (_jsx("g", { fill: "none", "data-testid": layoutMatches.length ? `${trackId}-loaded` : trackId, children: layoutMatches.map(chunk => {
+            const ret = [];
+            for (let i = 0; i < chunk.length - 1; i++) {
+                const { layout: c1, feature: f1, level: level1 } = chunk[i];
+                const { layout: c2, feature: f2, level: level2 } = chunk[i + 1];
+                if (!c1 || !c2) {
+                    console.warn('received null layout for a overlay feature');
+                    return null;
+                }
+                if (!showIntraviewLinks && level1 === level2) {
+                    return null;
                 }
-                else {
-                    orientationColor = getLongReadOrientationColorOrDefault(s1, s2);
-                    isAbnormal = getLongReadOrientationAbnormal(s1, s2);
+                const f1ref = assembly.getCanonicalRefName(f1.get('refName'));
+                const f2ref = assembly.getCanonicalRefName(f2.get('refName'));
+                if (!f1ref || !f2ref) {
+                    throw new Error(`unable to find ref for ${f1ref || f2ref}`);
                 }
+                const r = {
+                    pair_orientation: f1.get('pair_orientation'),
+                };
+                const s1 = f1.get('strand');
+                const s2 = f2.get('strand');
+                const sameRef = f1ref === f2ref;
+                const checkOrientation = sameRef;
+                let orientationColor = '';
+                let isAbnormal = false;
+                if (checkOrientation) {
+                    if (hasPaired) {
+                        orientationColor = getPairedOrientationColor(r);
+                        isAbnormal = isAbnormalOrientation(r);
+                    }
+                    else {
+                        orientationColor = getLongReadOrientationColorOrDefault(s1, s2);
+                        isAbnormal = getLongReadOrientationAbnormal(s1, s2);
+                    }
+                }
+                const p1 = c1[s1 === -1 ? LEFT : RIGHT];
+                const sn1 = s2 === -1;
+                const p2 = hasPaired ? c2[sn1 ? LEFT : RIGHT] : c2[sn1 ? RIGHT : LEFT];
+                const x1 = getPxFromCoordinate(views[level1], f1ref, p1);
+                const x2 = getPxFromCoordinate(views[level2], f2ref, p2);
+                const reversed1 = views[level1].pxToBp(x1).reversed;
+                const reversed2 = views[level2].pxToBp(x2).reversed;
+                const rf1 = reversed1 ? -1 : 1;
+                const rf2 = reversed2 ? -1 : 1;
+                const tracks = views.map(v => v.getTrack(trackId));
+                const y1 = yPos(trackId, level1, views, tracks, c1, getTrackYPosOverride) -
+                    yOffset;
+                const y2 = yPos(trackId, level2, views, tracks, c2, getTrackYPosOverride) -
+                    yOffset;
+                const sameLevel = level1 === level2;
+                const abnormalSpecialRenderFlag = sameLevel && isAbnormal;
+                const trackHeight = abnormalSpecialRenderFlag
+                    ? tracks[level1].displays[0].height
+                    : 0;
+                const pf1 = hasPaired ? -1 : 1;
+                const y0 = heightFromSpecificLevel(views, trackId, level1, getTrackYPosOverride);
+                const path = [
+                    'M',
+                    x1,
+                    y1,
+                    'C',
+                    x1 + 200 * f1.get('strand') * rf1,
+                    abnormalSpecialRenderFlag
+                        ? Math.min(y0 - yOffset + trackHeight, y1 + trackHeight)
+                        : y1,
+                    x2 - 200 * f2.get('strand') * rf2 * pf1,
+                    abnormalSpecialRenderFlag
+                        ? Math.min(y0 - yOffset + trackHeight, y2 + trackHeight)
+                        : y2,
+                    x2,
+                    y2,
+                ].join(' ');
+                const id = `${f1.id()}-${f2.id()}`;
+                ret.push(_jsx("path", { d: path, "data-testid": "r1", pointerEvents: interactiveOverlay ? 'auto' : undefined, strokeWidth: mouseoverElt === id ? 5 : 1, ...getStrokeProps(orientationColor || theme.palette.text.disabled), onClick: () => {
+                        var _a, _b;
+                        const featureWidget = (_a = session.addWidget) === null || _a === void 0 ? void 0 : _a.call(session, 'BreakpointAlignmentsWidget', 'breakpointAlignments', {
+                            featureData: {
+                                feature1: (allFeatures.get(f1.id()) || { toJSON: () => { } }).toJSON(),
+                                feature2: (allFeatures.get(f2.id()) || { toJSON: () => { } }).toJSON(),
+                            },
+                        });
+                        (_b = session.showWidget) === null || _b === void 0 ? void 0 : _b.call(session, featureWidget);
+                    }, onMouseOver: () => {
+                        setMouseoverElt(id);
+                    }, onMouseOut: () => {
+                        setMouseoverElt(undefined);
+                    } }, id));
             }
-            const p1 = c1[s1 === -1 ? LEFT : RIGHT];
-            const sn1 = s2 === -1;
-            const p2 = hasPaired ? c2[sn1 ? LEFT : RIGHT] : c2[sn1 ? RIGHT : LEFT];
-            const x1 = getPxFromCoordinate(views[level1], f1ref, p1);
-            const x2 = getPxFromCoordinate(views[level2], f2ref, p2);
-            const reversed1 = views[level1].pxToBp(x1).reversed;
-            const reversed2 = views[level2].pxToBp(x2).reversed;
-            const rf1 = reversed1 ? -1 : 1;
-            const rf2 = reversed2 ? -1 : 1;
-            const tracks = views.map(v => v.getTrack(trackId));
-            const y1 = yPos(trackId, level1, views, tracks, c1, getTrackYPosOverride) -
-                yOffset;
-            const y2 = yPos(trackId, level2, views, tracks, c2, getTrackYPosOverride) -
-                yOffset;
-            const sameLevel = level1 === level2;
-            const abnormalSpecialRenderFlag = sameLevel && isAbnormal;
-            const trackHeight = abnormalSpecialRenderFlag
-                ? tracks[level1].displays[0].height
-                : 0;
-            const pf1 = hasPaired ? -1 : 1;
-            const y0 = heightFromSpecificLevel(views, trackId, level1, getTrackYPosOverride);
-            // possible todo: use totalCurveHeight to possibly make alternative
-            // squiggle if the S is too small
-            const path = [
-                'M',
-                x1,
-                y1,
-                'C',
-                // first bezier x,y
-                x1 + 200 * f1.get('strand') * rf1,
-                abnormalSpecialRenderFlag
-                    ? Math.min(y0 - yOffset + trackHeight, y1 + trackHeight)
-                    : y1,
-                // second bezier x,y
-                x2 - 200 * f2.get('strand') * rf2 * pf1,
-                abnormalSpecialRenderFlag
-                    ? Math.min(y0 - yOffset + trackHeight, y2 + trackHeight)
-                    : y2,
-                // third bezier x,y
-                x2,
-                y2,
-            ].join(' ');
-            const id = `${f1.id()}-${f2.id()}`;
-            ret.push(React.createElement("path", { d: path, key: id, "data-testid": "r1", strokeWidth: mouseoverElt === id ? 5 : 1, ...getStrokeProps(orientationColor || theme.palette.text.disabled), onClick: () => {
-                    var _a, _b;
-                    const featureWidget = (_a = session.addWidget) === null || _a === void 0 ? void 0 : _a.call(session, 'BreakpointAlignmentsWidget', 'breakpointAlignments', {
-                        featureData: {
-                            feature1: (allFeatures.get(f1.id()) || { toJSON: () => { } }).toJSON(),
-                            feature2: (allFeatures.get(f2.id()) || { toJSON: () => { } }).toJSON(),
-                        },
-                    });
-                    (_b = session.showWidget) === null || _b === void 0 ? void 0 : _b.call(session, featureWidget);
-                }, onMouseOver: () => {
-                    setMouseoverElt(id);
-                }, onMouseOut: () => {
-                    setMouseoverElt(undefined);
-                } }));
-        }
-        return ret;
-    }))) : null;
+            return ret;
+        }) })) : null;
 });
 export default AlignmentConnections;

package/esm/BreakpointSplitView/components/Breakends.d.ts

@@ -1,9 +1,8 @@
-import React from 'react';
-import { BreakpointViewModel } from '../model';
+import type { BreakpointViewModel } from '../model';
 declare const Breakends: ({ model, trackId, parentRef: ref, getTrackYPosOverride, }: {
     model: BreakpointViewModel;
     trackId: string;
-    parentRef: React.RefObject<SVGSVGElement>;
+    parentRef: React.RefObject<SVGSVGElement | null>;
     getTrackYPosOverride?: (trackId: string, level: number) => number;
-}) => React.JSX.Element | null;
+}) => import("react/jsx-runtime").JSX.Element | null;
 export default Breakends;

package/esm/BreakpointSplitView/components/Breakends.js

@@ -1,13 +1,13 @@
-import React, { useState, useMemo } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
 import { getSession } from '@jbrowse/core/util';
 import { observer } from 'mobx-react';
 import { getSnapshot } from 'mobx-state-tree';
-// locals
 import { findMatchingAlt, getMatchedBreakendFeatures } from './util';
-import { yPos, getPxFromCoordinate, useNextFrame } from '../util';
+import { getPxFromCoordinate, useNextFrame, yPos } from '../util';
 const [LEFT] = [0, 1, 2, 3];
 const Breakends = observer(function ({ model, trackId, parentRef: ref, getTrackYPosOverride, }) {
-    const { views } = model;
+    const { interactiveOverlay, views } = model;
     const session = getSession(model);
     const { assemblyManager } = session;
     const totalFeatures = model.getTrackFeatures(trackId);
@@ -24,72 +24,70 @@ const Breakends = observer(function ({ model, trackId, parentRef: ref, getTrackY
         const rect = ref.current.getBoundingClientRect();
         yoff = rect.top;
     }
-    return (React.createElement("g", { stroke: "green", strokeWidth: 5, fill: "none", "data-testid": layoutMatches.length ? `${trackId}-loaded` : trackId }, layoutMatches.map(chunk => {
-        const ret = [];
-        // we follow a path in the list of chunks, not from top to bottom, just
-        // in series following x1,y1 -> x2,y2
-        for (let i = 0; i < chunk.length - 1; i += 1) {
-            const { layout: c1, feature: f1, level: level1 } = chunk[i];
-            const { layout: c2, feature: f2, level: level2 } = chunk[i + 1];
-            const id = f1.id();
-            const relevantAlt = findMatchingAlt(f1, f2);
-            if (!c1 || !c2) {
-                return null;
+    return (_jsx("g", { stroke: "green", strokeWidth: 5, fill: "none", "data-testid": layoutMatches.length ? `${trackId}-loaded` : trackId, children: layoutMatches.map(chunk => {
+            const ret = [];
+            for (let i = 0; i < chunk.length - 1; i += 1) {
+                const { layout: c1, feature: f1, level: level1 } = chunk[i];
+                const { layout: c2, feature: f2, level: level2 } = chunk[i + 1];
+                const id = f1.id();
+                const relevantAlt = findMatchingAlt(f1, f2);
+                if (!c1 || !c2) {
+                    return null;
+                }
+                const f1origref = f1.get('refName');
+                const f2origref = f2.get('refName');
+                const f1ref = assembly.getCanonicalRefName(f1origref);
+                const f2ref = assembly.getCanonicalRefName(f2origref);
+                if (!f1ref || !f2ref) {
+                    throw new Error(`unable to find ref for ${f1ref || f2ref}`);
+                }
+                const x1 = getPxFromCoordinate(views[level1], f1ref, c1[LEFT]);
+                const x2 = getPxFromCoordinate(views[level2], f2ref, c2[LEFT]);
+                const reversed1 = views[level1].pxToBp(x1).reversed;
+                const reversed2 = views[level2].pxToBp(x2).reversed;
+                const tracks = views.map(v => v.getTrack(trackId));
+                const y1 = yPos(trackId, level1, views, tracks, c1, getTrackYPosOverride) -
+                    yoff;
+                const y2 = yPos(trackId, level2, views, tracks, c2, getTrackYPosOverride) -
+                    yoff;
+                if (!relevantAlt) {
+                    console.warn('the relevant ALT allele was not found, cannot render');
+                }
+                else {
+                    const path = [
+                        'M',
+                        x1 -
+                            20 *
+                                (relevantAlt.Join === 'left' ? -1 : 1) *
+                                (reversed1 ? -1 : 1),
+                        y1,
+                        'L',
+                        x1,
+                        y1,
+                        'L',
+                        x2,
+                        y2,
+                        'L',
+                        x2 -
+                            20 *
+                                (relevantAlt.MateDirection === 'left' ? 1 : -1) *
+                                (reversed2 ? -1 : 1),
+                        y2,
+                    ].join(' ');
+                    ret.push(_jsx("path", { d: path, "data-testid": "r2", pointerEvents: interactiveOverlay ? 'auto' : undefined, strokeWidth: id === mouseoverElt ? 10 : 5, onClick: () => {
+                            var _a, _b, _c;
+                            const featureWidget = (_a = session.addWidget) === null || _a === void 0 ? void 0 : _a.call(session, 'VariantFeatureWidget', 'variantFeature', {
+                                featureData: (_b = totalFeatures.get(id)) === null || _b === void 0 ? void 0 : _b.toJSON(),
+                            });
+                            (_c = session.showWidget) === null || _c === void 0 ? void 0 : _c.call(session, featureWidget);
+                        }, onMouseOver: () => {
+                            setMouseoverElt(id);
+                        }, onMouseOut: () => {
+                            setMouseoverElt(undefined);
+                        } }, JSON.stringify(path)));
+                }
             }
-            const f1origref = f1.get('refName');
-            const f2origref = f2.get('refName');
-            const f1ref = assembly.getCanonicalRefName(f1origref);
-            const f2ref = assembly.getCanonicalRefName(f2origref);
-            if (!f1ref || !f2ref) {
-                throw new Error(`unable to find ref for ${f1ref || f2ref}`);
-            }
-            const x1 = getPxFromCoordinate(views[level1], f1ref, c1[LEFT]);
-            const x2 = getPxFromCoordinate(views[level2], f2ref, c2[LEFT]);
-            const reversed1 = views[level1].pxToBp(x1).reversed;
-            const reversed2 = views[level2].pxToBp(x2).reversed;
-            const tracks = views.map(v => v.getTrack(trackId));
-            const y1 = yPos(trackId, level1, views, tracks, c1, getTrackYPosOverride) -
-                yoff;
-            const y2 = yPos(trackId, level2, views, tracks, c2, getTrackYPosOverride) -
-                yoff;
-            if (!relevantAlt) {
-                console.warn('the relevant ALT allele was not found, cannot render');
-            }
-            else {
-                const path = [
-                    'M', // move to
-                    x1 -
-                        20 *
-                            (relevantAlt.Join === 'left' ? -1 : 1) *
-                            (reversed1 ? -1 : 1),
-                    y1,
-                    'L', // line to
-                    x1,
-                    y1,
-                    'L', // line to
-                    x2,
-                    y2,
-                    'L', // line to
-                    x2 -
-                        20 *
-                            (relevantAlt.MateDirection === 'left' ? 1 : -1) *
-                            (reversed2 ? -1 : 1),
-                    y2,
-                ].join(' ');
-                ret.push(React.createElement("path", { d: path, "data-testid": "r2", key: JSON.stringify(path), strokeWidth: id === mouseoverElt ? 10 : 5, onClick: () => {
-                        var _a, _b, _c;
-                        const featureWidget = (_a = session.addWidget) === null || _a === void 0 ? void 0 : _a.call(session, 'VariantFeatureWidget', 'variantFeature', {
-                            featureData: (_b = totalFeatures.get(id)) === null || _b === void 0 ? void 0 : _b.toJSON(),
-                        });
-                        (_c = session.showWidget) === null || _c === void 0 ? void 0 : _c.call(session, featureWidget);
-                    }, onMouseOver: () => {
-                        setMouseoverElt(id);
-                    }, onMouseOut: () => {
-                        setMouseoverElt(undefined);
-                    } }));
-            }
-        }
-        return ret;
-    })));
+            return ret;
+        }) }));
 });
 export default Breakends;

package/esm/BreakpointSplitView/components/BreakpointSplitView.d.ts

@@ -1,6 +1,5 @@
-import React from 'react';
-import { BreakpointViewModel } from '../model';
+import type { BreakpointViewModel } from '../model';
 declare const BreakpointSplitView: ({ model, }: {
     model: BreakpointViewModel;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default BreakpointSplitView;

package/esm/BreakpointSplitView/components/BreakpointSplitView.js

@@ -1,6 +1,6 @@
-import React from 'react';
-import { observer } from 'mobx-react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getEnv } from '@jbrowse/core/util';
+import { observer } from 'mobx-react';
 import { makeStyles } from 'tss-react/mui';
 import BreakpointSplitViewOverlay from './BreakpointSplitViewOverlay';
 const useStyles = makeStyles()(theme => ({
@@ -22,23 +22,19 @@ const BreakpointSplitViewLevels = observer(function ({ model, }) {
     const { classes } = useStyles();
     const { views } = model;
     const { pluginManager } = getEnv(model);
-    return (React.createElement("div", { className: classes.content },
-        React.createElement("div", { className: classes.rel }, views.map((view, idx) => {
-            const { ReactComponent } = pluginManager.getViewType(view.type);
-            const viewComponent = React.createElement(ReactComponent, { key: view.id, model: view });
-            return idx === views.length - 1
-                ? viewComponent
-                : [
-                    viewComponent,
-                    React.createElement("div", { key: `${view.id}-divider`, className: classes.viewDivider }),
-                ];
-        }))));
+    return (_jsx("div", { className: classes.content, children: _jsx("div", { className: classes.rel, children: views.map((view, idx) => {
+                const { ReactComponent } = pluginManager.getViewType(view.type);
+                const viewComponent = _jsx(ReactComponent, { model: view }, view.id);
+                return idx === views.length - 1
+                    ? viewComponent
+                    : [
+                        viewComponent,
+                        _jsx("div", { className: classes.viewDivider }, `${view.id}-divider`),
+                    ];
+            }) }) }));
 });
 const BreakpointSplitView = observer(function ({ model, }) {
     const { classes } = useStyles();
-    return (React.createElement("div", null,
-        React.createElement("div", { className: classes.container },
-            React.createElement(BreakpointSplitViewLevels, { model: model }),
-            React.createElement(BreakpointSplitViewOverlay, { model: model }))));
+    return (_jsx("div", { children: _jsxs("div", { className: classes.container, children: [_jsx(BreakpointSplitViewLevels, { model: model }), _jsx(BreakpointSplitViewOverlay, { model: model })] }) }));
 });
 export default BreakpointSplitView;

package/esm/BreakpointSplitView/components/BreakpointSplitViewOverlay.d.ts

@@ -1,6 +1,5 @@
-import React from 'react';
-import { BreakpointViewModel } from '../model';
+import type { BreakpointViewModel } from '../model';
 declare const BreakpointSplitViewOverlay: ({ model, }: {
     model: BreakpointViewModel;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default BreakpointSplitViewOverlay;

package/esm/BreakpointSplitView/components/BreakpointSplitViewOverlay.js

@@ -1,7 +1,8 @@
-import React, { useRef } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { observer } from 'mobx-react';
 import { makeStyles } from 'tss-react/mui';
 import Overlay from './Overlay';
-import { observer } from 'mobx-react';
 const useStyles = makeStyles()({
     overlay: {
         display: 'flex',
@@ -12,23 +13,16 @@ const useStyles = makeStyles()({
             fill: 'none',
         },
     },
+    base: {
+        pointerEvents: 'none',
+        width: '100%',
+        zIndex: 10,
+    },
 });
 const BreakpointSplitViewOverlay = observer(function ({ model, }) {
     const { classes } = useStyles();
-    const { matchedTracks, interactToggled } = model;
+    const { matchedTracks } = model;
     const ref = useRef(null);
-    return (React.createElement("div", { className: classes.overlay },
-        React.createElement("svg", { ref: ref, style: {
-                width: '100%',
-                zIndex: 10,
-                pointerEvents: interactToggled ? undefined : 'none',
-            } }, matchedTracks.map(track => (
-        // note: we must pass ref down, because:
-        // - the child component needs to getBoundingClientRect on the this
-        // components SVG, and...
-        // - we cannot rely on using getBoundingClientRect in this component
-        // to make sure this works because if it gets shifted around by
-        // another element, this will not re-render necessarily
-        React.createElement(Overlay, { parentRef: ref, key: track.configuration.trackId, model: model, trackId: track.configuration.trackId }))))));
+    return (_jsx("div", { className: classes.overlay, children: _jsx("svg", { ref: ref, className: classes.base, children: matchedTracks.map(track => (_jsx(Overlay, { parentRef: ref, model: model, trackId: track.configuration.trackId }, track.configuration.trackId))) }) }));
 });
 export default BreakpointSplitViewOverlay;

package/esm/BreakpointSplitView/components/ExportSvgDialog.d.ts

@@ -1,8 +1,7 @@
-import React from 'react';
-import { ExportSvgOptions } from '../model';
+import type { ExportSvgOptions } from '../types';
 export default function ExportSvgDialog({ model, handleClose, }: {
     model: {
         exportSvg(opts: ExportSvgOptions): Promise<void>;
     };
     handleClose: () => void;
-}): React.JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

package/esm/BreakpointSplitView/components/ExportSvgDialog.js

@@ -1,15 +1,13 @@
-import React, { useState } from 'react';
-import { Button, Checkbox, CircularProgress, DialogActions, DialogContent, FormControlLabel, MenuItem, TextField, Typography, } from '@mui/material';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
 import { Dialog, ErrorMessage } from '@jbrowse/core/ui';
 import { getSession, useLocalStorage } from '@jbrowse/core/util';
+import { Button, Checkbox, CircularProgress, DialogActions, DialogContent, FormControlLabel, MenuItem, TextField, Typography, } from '@mui/material';
 function LoadingMessage() {
-    return (React.createElement("div", null,
-        React.createElement(CircularProgress, { size: 20, style: { marginRight: 20 } }),
-        React.createElement(Typography, { display: "inline" }, "Creating SVG")));
+    return (_jsxs("div", { children: [_jsx(CircularProgress, { size: 20, style: { marginRight: 20 } }), _jsx(Typography, { display: "inline", children: "Creating SVG" })] }));
 }
 function TextField2({ children, ...rest }) {
-    return (React.createElement("div", null,
-        React.createElement(TextField, { ...rest }, children)));
+    return (_jsx("div", { children: _jsx(TextField, { ...rest, children: children }) }));
 }
 function useSvgLocal(key, val) {
     return useLocalStorage(`svg-${key}`, val);
@@ -23,50 +21,34 @@ export default function ExportSvgDialog({ model, handleClose, }) {
     const [filename, setFilename] = useSvgLocal('file', 'jbrowse.svg');
     const [trackLabels, setTrackLabels] = useSvgLocal('tracklabels', 'offset');
     const [themeName, setThemeName] = useSvgLocal('theme', session.themeName || 'default');
-    return (React.createElement(Dialog, { open: true, onClose: handleClose, title: "Export SVG" },
-        React.createElement(DialogContent, null,
-            error ? (React.createElement(ErrorMessage, { error: error })) : loading ? (React.createElement(LoadingMessage, null)) : null,
-            React.createElement(TextField2, { helperText: "filename", value: filename, onChange: event => {
-                    setFilename(event.target.value);
-                } }),
-            React.createElement(TextField2, { select: true, label: "Track label positioning", variant: "outlined", style: { width: 150 }, value: trackLabels, onChange: event => {
-                    setTrackLabels(event.target.value);
-                } },
-                React.createElement(MenuItem, { value: "offset" }, "Offset"),
-                React.createElement(MenuItem, { value: "overlay" }, "Overlay"),
-                React.createElement(MenuItem, { value: "left" }, "Left"),
-                React.createElement(MenuItem, { value: "none" }, "None")),
-            React.createElement("br", null),
-            session.allThemes ? (React.createElement(TextField2, { select: true, label: "Theme", variant: "outlined", value: themeName, onChange: event => {
-                    setThemeName(event.target.value);
-                } }, Object.entries(session.allThemes()).map(([key, val]) => (React.createElement(MenuItem, { key: key, value: key }, 
-            // @ts-expect-error
-            val.name || '(Unknown name)'))))) : null,
-            offscreenCanvas ? (React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { checked: rasterizeLayers, onChange: () => {
-                        setRasterizeLayers(val => !val);
-                    } }), label: "Rasterize canvas based tracks? File may be much larger if this is turned off" })) : (React.createElement(Typography, null, "Note: rasterizing layers not yet supported in this browser, so SVG size may be large"))),
-        React.createElement(DialogActions, null,
-            React.createElement(Button, { variant: "contained", color: "secondary", onClick: () => {
-                    handleClose();
-                } }, "Cancel"),
-            React.createElement(Button, { variant: "contained", color: "primary", type: "submit", onClick: async () => {
-                    setLoading(true);
-                    setError(undefined);
-                    try {
-                        await model.exportSvg({
-                            rasterizeLayers,
-                            filename,
-                            trackLabels,
-                            themeName,
-                        });
-                        handleClose();
-                    }
-                    catch (e) {
-                        console.error(e);
-                        setError(e);
-                    }
-                    finally {
-                        setLoading(false);
-                    }
-                } }, "Submit"))));
+    return (_jsxs(Dialog, { open: true, onClose: handleClose, title: "Export SVG", children: [_jsxs(DialogContent, { children: [error ? (_jsx(ErrorMessage, { error: error })) : loading ? (_jsx(LoadingMessage, {})) : null, _jsx(TextField2, { helperText: "filename", value: filename, onChange: event => {
+                            setFilename(event.target.value);
+                        } }), _jsxs(TextField2, { select: true, label: "Track label positioning", variant: "outlined", style: { width: 150 }, value: trackLabels, onChange: event => {
+                            setTrackLabels(event.target.value);
+                        }, children: [_jsx(MenuItem, { value: "offset", children: "Offset" }), _jsx(MenuItem, { value: "overlay", children: "Overlay" }), _jsx(MenuItem, { value: "left", children: "Left" }), _jsx(MenuItem, { value: "none", children: "None" })] }), _jsx("br", {}), session.allThemes ? (_jsx(TextField2, { select: true, label: "Theme", variant: "outlined", value: themeName, onChange: event => {
+                            setThemeName(event.target.value);
+                        }, children: Object.entries(session.allThemes()).map(([key, val]) => (_jsx(MenuItem, { value: key, children: val.name || '(Unknown name)' }, key))) })) : null, offscreenCanvas ? (_jsx(FormControlLabel, { control: _jsx(Checkbox, { checked: rasterizeLayers, onChange: () => {
+                                setRasterizeLayers(val => !val);
+                            } }), label: "Rasterize canvas based tracks? File may be much larger if this is turned off" })) : (_jsx(Typography, { children: "Note: rasterizing layers not yet supported in this browser, so SVG size may be large" }))] }), _jsxs(DialogActions, { children: [_jsx(Button, { variant: "contained", color: "secondary", onClick: () => {
+                            handleClose();
+                        }, children: "Cancel" }), _jsx(Button, { variant: "contained", color: "primary", type: "submit", onClick: async () => {
+                            setLoading(true);
+                            setError(undefined);
+                            try {
+                                await model.exportSvg({
+                                    rasterizeLayers,
+                                    filename,
+                                    trackLabels,
+                                    themeName,
+                                });
+                                handleClose();
+                            }
+                            catch (e) {
+                                console.error(e);
+                                setError(e);
+                            }
+                            finally {
+                                setLoading(false);
+                            }
+                        }, children: "Submit" })] })] }));
 }

package/esm/BreakpointSplitView/components/Overlay.d.ts

@@ -1,9 +1,8 @@
-import React from 'react';
-import { BreakpointViewModel } from '../model';
+import type { BreakpointViewModel } from '../model';
 declare const Overlay: (props: {
-    parentRef: React.RefObject<SVGSVGElement>;
+    parentRef: React.RefObject<SVGSVGElement | null>;
     model: BreakpointViewModel;
     trackId: string;
     getTrackYPosOverride?: (trackId: string, level: number) => number;
-}) => React.JSX.Element | null;
+}) => import("react/jsx-runtime").JSX.Element | null;
 export default Overlay;