@jbrowse/plugin-breakpoint-split-view 3.6.5 → 4.0.0

package/esm/BreakpointSplitView/components/Header.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+import SearchIcon from '@mui/icons-material/Search';
+import { FormGroup } from '@mui/material';
+import { observer } from 'mobx-react';
+import HeaderSearchBoxes from "./HeaderSearchBoxes.js";
+const useStyles = makeStyles()({
+    inline: {
+        display: 'inline-flex',
+    },
+});
+const Header = observer(function Header({ model, }) {
+    const { classes } = useStyles();
+    const { views } = model;
+    const [showSearchBoxes, setShowSearchBoxes] = useState(views.length <= 3);
+    const [sideBySide, setSideBySide] = useState(views.length <= 3);
+    return (_jsxs(FormGroup, { row: true, children: [_jsx(CascadingMenuButton, { menuItems: () => model.menuItems(), children: _jsx(MoreVertIcon, {}) }), _jsx(CascadingMenuButton, { menuItems: [
+                    {
+                        label: 'Show search boxes',
+                        type: 'checkbox',
+                        checked: showSearchBoxes,
+                        onClick: () => {
+                            setShowSearchBoxes(!showSearchBoxes);
+                        },
+                    },
+                    {
+                        label: 'Orientation - Side-by-side',
+                        type: 'radio',
+                        checked: sideBySide,
+                        onClick: () => {
+                            setSideBySide(!sideBySide);
+                        },
+                    },
+                    {
+                        label: 'Orientation - Vertical',
+                        type: 'radio',
+                        checked: !sideBySide,
+                        onClick: () => {
+                            setSideBySide(!sideBySide);
+                        },
+                    },
+                ], children: _jsx(SearchIcon, {}) }), showSearchBoxes ? (_jsx("span", { className: sideBySide ? classes.inline : undefined, children: views.map(view => (_jsx(HeaderSearchBoxes, { view: view }, view.id))) })) : null] }));
+});
+export default Header;

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

@@ -0,0 +1,5 @@
+import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view';
+declare const HeaderSearchBoxes: ({ view, }: {
+    view: LinearGenomeViewModel;
+}) => import("react/jsx-runtime").JSX.Element;
+export default HeaderSearchBoxes;

package/esm/BreakpointSplitView/components/HeaderSearchBoxes.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getBpDisplayStr } from '@jbrowse/core/util';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
+import { SearchBox } from '@jbrowse/plugin-linear-genome-view';
+import { Typography } from '@mui/material';
+import { observer } from 'mobx-react';
+const useStyles = makeStyles()(() => ({
+    bp: {
+        display: 'flex',
+        alignItems: 'center',
+        marginLeft: 10,
+    },
+    searchBox: {
+        display: 'flex',
+    },
+}));
+const HeaderSearchBoxes = observer(function HeaderSearchBoxes({ view, }) {
+    const { classes } = useStyles();
+    const { assemblyDisplayNames, coarseTotalBp } = view;
+    return (_jsxs("span", { className: classes.searchBox, children: [_jsx(SearchBox, { model: view, showHelp: false }), _jsxs(Typography, { variant: "body2", color: "textSecondary", className: classes.bp, children: [assemblyDisplayNames.join(','), " ", getBpDisplayStr(coarseTotalBp)] })] }));
+});
+export default HeaderSearchBoxes;

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

@@ -1,4 +1,4 @@
-import type { BreakpointViewModel } from '../model';
+import type { BreakpointViewModel } from '../model.ts';
 declare const Overlay: (props: {
     parentRef: React.RefObject<SVGSVGElement | null>;
     model: BreakpointViewModel;

package/esm/BreakpointSplitView/components/Overlay.js

@@ -1,22 +1,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { observer } from 'mobx-react';
-import AlignmentConnections from './AlignmentConnections';
-import Breakends from './Breakends';
-import PairedFeatures from './PairedFeatures';
-import Translocations from './Translocations';
-const Overlay = observer(function (props) {
-    var _a;
+import AlignmentConnections from "./AlignmentConnections.js";
+import Breakends from "./Breakends.js";
+import PairedFeatures from "./PairedFeatures.js";
+import Translocations from "./Translocations.js";
+const Overlay = observer(function Overlay(props) {
     const { model, trackId } = props;
     const tracks = model.getMatchedTracks(trackId);
-    const type = (_a = tracks[0]) === null || _a === void 0 ? void 0 : _a.type;
+    const type = tracks[0]?.type;
     if (type === 'AlignmentsTrack') {
         return _jsx(AlignmentConnections, { ...props });
     }
-    else if (type === 'VariantTrack') {
+    if (type === 'VariantTrack') {
         return model.hasTranslocations(trackId) ? (_jsx(Translocations, { ...props })) : model.hasPairedFeatures(trackId) ? (_jsx(PairedFeatures, { ...props })) : (_jsx(Breakends, { ...props }));
     }
-    else {
-        return null;
-    }
+    return null;
 });
 export default Overlay;

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

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

package/esm/BreakpointSplitView/components/PairedFeatures.js

@@ -1,71 +1,46 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo, useState } from 'react';
 import { getSession } from '@jbrowse/core/util';
+import { getSnapshot } from '@jbrowse/mobx-state-tree';
 import { observer } from 'mobx-react';
-import { getSnapshot } from 'mobx-state-tree';
-import { getMatchedPairedFeatures } from './util';
-import { getPxFromCoordinate, useNextFrame, yPos } from '../util';
-const [LEFT] = [0, 1, 2, 3];
-const PairedFeatures = observer(function ({ model, trackId, parentRef: ref, getTrackYPosOverride, }) {
+import { LEFT, buildSimplePath, createMouseHandlers, getCanonicalRefs, getTestId, getYOffset, } from "./overlayUtils.js";
+import { getMatchedPairedFeatures } from "./util.js";
+import { getPxFromCoordinate, useNextFrame, yPos } from "../util.js";
+const PairedFeatures = observer(function PairedFeatures({ model, trackId, parentRef, getTrackYPosOverride, }) {
     const { interactiveOverlay, views } = model;
     const session = getSession(model);
     const { assemblyManager } = session;
-    const totalFeatures = model.getTrackFeatures(trackId);
-    const layoutMatches = useMemo(() => model.getMatchedFeaturesInLayout(trackId, getMatchedPairedFeatures(totalFeatures)), [totalFeatures, trackId, model]);
-    const [mouseoverElt, setMouseoverElt] = useState();
     const snap = getSnapshot(model);
+    const v0 = views[0];
+    const assembly = v0 ? assemblyManager.get(v0.assemblyNames[0]) : undefined;
     useNextFrame(snap);
-    const assembly = assemblyManager.get(views[0].assemblyNames[0]);
+    const totalFeatures = model.getTrackFeatures(trackId);
+    const layoutMatches = useMemo(() => {
+        const matchedFeatures = getMatchedPairedFeatures(totalFeatures);
+        return model.getMatchedFeaturesInLayout(trackId, matchedFeatures);
+    }, [totalFeatures, trackId, model]);
+    const [mouseoverElt, setMouseoverElt] = useState();
+    const yOffset = getYOffset(parentRef);
+    const tracks = views.map(v => v.getTrack(trackId));
     if (!assembly) {
         return null;
     }
-    let yoff = 0;
-    if (ref.current) {
-        const rect = ref.current.getBoundingClientRect();
-        yoff = rect.top;
-    }
-    return (_jsx("g", { stroke: "green", strokeWidth: 5, fill: "none", "data-testid": layoutMatches.length ? `${trackId}-loaded` : trackId, children: layoutMatches.map(chunk => {
+    return (_jsx("g", { stroke: "green", strokeWidth: 5, fill: "none", "data-testid": getTestId(trackId, layoutMatches.length > 0), 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();
-                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 { f1ref, f2ref } = getCanonicalRefs(assembly, f1.get('refName'), f2.get('refName'));
                 const x1 = getPxFromCoordinate(views[level1], f1ref, c1[LEFT]);
                 const x2 = getPxFromCoordinate(views[level2], f2ref, c2[LEFT]);
-                const tracks = views.map(v => v.getTrack(trackId));
                 const y1 = yPos(trackId, level1, views, tracks, c1, getTrackYPosOverride) -
-                    yoff;
+                    yOffset;
                 const y2 = yPos(trackId, level2, views, tracks, c2, getTrackYPosOverride) -
-                    yoff;
-                const path = [
-                    'M',
-                    x1,
-                    y1,
-                    'L',
-                    x2,
-                    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)));
+                    yOffset;
+                const path = buildSimplePath(x1, y1, x2, y2);
+                const mouseHandlers = createMouseHandlers(id, setMouseoverElt, session, 'VariantFeatureWidget', 'variantFeature', totalFeatures.get(id)?.toJSON());
+                ret.push(_jsx("path", { d: path, "data-testid": "r2", pointerEvents: interactiveOverlay ? 'auto' : undefined, strokeWidth: id === mouseoverElt ? 10 : 5, ...mouseHandlers }, JSON.stringify(path)));
             }
             return ret;
         }) }));

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

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

package/esm/BreakpointSplitView/components/Rubberband.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { Menu } from '@jbrowse/core/ui';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
+import { observer } from 'mobx-react';
+import RubberbandSpan from "./RubberbandSpan.js";
+import VerticalGuide from "./VerticalGuide.js";
+import { useRangeSelect } from "./useRangeSelect.js";
+const useStyles = makeStyles()({
+    rubberbandControl: {
+        cursor: 'crosshair',
+        width: '100%',
+        minHeight: 8,
+        position: 'relative',
+        zIndex: 900,
+    },
+});
+const Rubberband = observer(function Rubberband({ model, ControlComponent = _jsx("div", {}), }) {
+    const ref = useRef(null);
+    const { classes } = useStyles();
+    const { guideX, rubberbandOn, leftBpOffset, rightBpOffset, numOfBpSelected, width, left, anchorPosition, open, handleMenuItemClick, handleClose, mouseMove, mouseDown, mouseOut, } = useRangeSelect(ref, model);
+    return (_jsxs(_Fragment, { children: [guideX !== undefined ? (_jsx(VerticalGuide, { model: model, coordX: guideX })) : rubberbandOn ? (_jsx(RubberbandSpan, { leftBpOffset: leftBpOffset, rightBpOffset: rightBpOffset, numOfBpSelected: numOfBpSelected, width: width, left: left })) : null, anchorPosition ? (_jsx(Menu, { anchorReference: "anchorPosition", anchorPosition: {
+                    left: anchorPosition.clientX,
+                    top: anchorPosition.clientY,
+                }, onMenuItemClick: handleMenuItemClick, open: open, onClose: handleClose, menuItems: model.rubberBandMenuItems() })) : null, _jsx("div", { "data-testid": "rubberband_controls", className: classes.rubberbandControl, ref: ref, onMouseDown: mouseDown, onMouseMove: mouseMove, onMouseOut: mouseOut, children: ControlComponent })] }));
+});
+export default Rubberband;

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

@@ -0,0 +1,15 @@
+interface Offset {
+    coord: number;
+    refName?: string;
+    oob?: boolean;
+}
+export default function RubberbandSpan({ leftBpOffset, rightBpOffset, numOfBpSelected, left, width, top, sticky, }: {
+    leftBpOffset: Offset[];
+    rightBpOffset: Offset[];
+    numOfBpSelected?: number[];
+    left: number;
+    width: number;
+    top?: number;
+    sticky?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/esm/BreakpointSplitView/components/RubberbandSpan.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { getBpDisplayStr, stringify } from '@jbrowse/core/util';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
+import { Typography, alpha } from '@mui/material';
+import RubberbandTooltip from "./RubberbandTooltip.js";
+const useStyles = makeStyles()(theme => {
+    const { tertiary } = theme.palette;
+    const background = alpha(tertiary.light, 0.7);
+    return {
+        rubberband: {
+            height: '100%',
+            background,
+            position: 'absolute',
+            zIndex: 830,
+            textAlign: 'center',
+        },
+        rubberbandText: {
+            color: theme.palette.tertiary.contrastText,
+        },
+    };
+});
+export default function RubberbandSpan({ leftBpOffset, rightBpOffset, numOfBpSelected, left, width, top = 0, sticky = false, }) {
+    const { classes } = useStyles();
+    const [anchorEl, setAnchorEl] = useState(null);
+    return (_jsxs(_Fragment, { children: [anchorEl ? (_jsxs(_Fragment, { children: [_jsx(RubberbandTooltip, { side: "left", anchorEl: anchorEl, text: leftBpOffset.map((l, idx) => (_jsx("div", { children: stringify(l, true) }, `${JSON.stringify(l)}-left-${idx}`))) }), _jsx(RubberbandTooltip, { side: "right", anchorEl: anchorEl, text: rightBpOffset.map((l, idx) => (_jsx("div", { children: stringify(l, true) }, `${JSON.stringify(l)}-right-${idx}`))) })] })) : null, _jsx("div", { className: classes.rubberband, style: { left, width }, children: numOfBpSelected ? (_jsx(Typography, { ref: setAnchorEl, variant: "h6", className: classes.rubberbandText, style: {
+                        top,
+                        position: sticky ? 'sticky' : undefined,
+                    }, children: numOfBpSelected.map((n, i) => (_jsx("div", { children: getBpDisplayStr(n) }, `bpSelectedRow-${i}`))) })) : null })] }));
+}

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

@@ -0,0 +1,5 @@
+export default function RubberbandTooltip({ anchorEl, side, text, }: {
+    anchorEl: HTMLSpanElement;
+    side: string;
+    text: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/esm/BreakpointSplitView/components/RubberbandTooltip.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tooltip } from '@mui/material';
+export default function RubberbandTooltip({ anchorEl, side, text, }) {
+    return (_jsx(Tooltip, { title: text, open: true, placement: side === 'left' ? 'left-start' : 'right-start', slotProps: {
+            popper: {
+                anchorEl,
+                modifiers: [
+                    {
+                        name: 'offset',
+                        options: {
+                            offset: [-30, -10],
+                        },
+                    },
+                ],
+            },
+        }, children: _jsx("span", {}) }));
+}

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

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

package/esm/BreakpointSplitView/components/Translocations.js

@@ -1,57 +1,43 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo, useState } from 'react';
 import { getSession } from '@jbrowse/core/util';
+import { getSnapshot } from '@jbrowse/mobx-state-tree';
 import { observer } from 'mobx-react';
-import { getSnapshot } from 'mobx-state-tree';
-import { getMatchedTranslocationFeatures } from './util';
-import { getPxFromCoordinate, useNextFrame, yPos } from '../util';
-const [LEFT] = [0, 1, 2, 3];
-function str(s) {
-    if (s === '+') {
-        return 1;
-    }
-    else if (s === '-') {
-        return -1;
-    }
-    else {
-        return 0;
-    }
-}
-const Translocations = observer(function ({ model, trackId, parentRef: ref, getTrackYPosOverride, }) {
+import { LEFT, buildBreakpointPath, createMouseHandlers, getTestId, getYOffset, strandToSign, } from "./overlayUtils.js";
+import { getMatchedTranslocationFeatures } from "./util.js";
+import { getPxFromCoordinate, useNextFrame, yPos } from "../util.js";
+const Translocations = observer(function Translocations({ model, trackId, parentRef, getTrackYPosOverride, }) {
     const { interactiveOverlay, views } = model;
     const session = getSession(model);
     const { assemblyManager } = session;
-    const totalFeatures = model.getTrackFeatures(trackId);
-    const layoutMatches = useMemo(() => model.getMatchedFeaturesInLayout(trackId, getMatchedTranslocationFeatures(totalFeatures)), [totalFeatures, trackId, model]);
-    const [mouseoverElt, setMouseoverElt] = useState();
     const snap = getSnapshot(model);
+    const v0 = views[0];
+    const assembly = v0 ? assemblyManager.get(v0.assemblyNames[0]) : undefined;
     useNextFrame(snap);
-    const assembly = assemblyManager.get(views[0].assemblyNames[0]);
+    const totalFeatures = model.getTrackFeatures(trackId);
+    const layoutMatches = useMemo(() => {
+        const matchedFeatures = getMatchedTranslocationFeatures(totalFeatures);
+        return model.getMatchedFeaturesInLayout(trackId, matchedFeatures);
+    }, [totalFeatures, trackId, model]);
+    const [mouseoverElt, setMouseoverElt] = useState();
+    const yOffset = getYOffset(parentRef);
+    const tracks = views.map(v => v.getTrack(trackId));
     if (!assembly) {
         return null;
     }
-    let yOffset = 0;
-    if (ref.current) {
-        const rect = ref.current.getBoundingClientRect();
-        yOffset = rect.top;
-    }
     if (views.length < 2) {
         return null;
     }
-    return (_jsx("g", { fill: "none", stroke: "green", strokeWidth: 5, "data-testid": layoutMatches.length ? `${trackId}-loaded` : trackId, children: layoutMatches.map(chunk => {
-            var _a, _b;
+    return (_jsx("g", { fill: "none", stroke: "green", strokeWidth: 5, "data-testid": getTestId(trackId, layoutMatches.length > 0), children: layoutMatches.map(chunk => {
             const ret = [];
             for (const { layout: c1, feature: f1, level: level1 } of chunk) {
                 const level2 = level1 === 0 ? 1 : 0;
                 const id = f1.id();
-                if (!c1) {
-                    return null;
-                }
                 const info = f1.get('INFO');
                 const chr2 = info.CHR2[0];
                 const end2 = info.END[0];
-                const res = (_b = (_a = info.STRANDS) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.split('');
-                const [myDirection, mateDirection] = res !== null && res !== void 0 ? res : ['.', '.'];
+                const res = info.STRANDS?.[0]?.split('');
+                const [myDirection, mateDirection] = res ?? ['.', '.'];
                 const r = getPxFromCoordinate(views[level2], chr2, end2);
                 if (r) {
                     const c2 = [r, 0, r + 1, 0];
@@ -59,36 +45,15 @@ const Translocations = observer(function ({ model, trackId, parentRef: ref, getT
                     const x2 = r;
                     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) -
                         yOffset;
                     const y2 = yPos(trackId, level2, views, tracks, c2, getTrackYPosOverride) -
                         yOffset;
-                    const path = [
-                        'M',
-                        x1 - 20 * str(myDirection) * (reversed1 ? -1 : 1),
-                        y1,
-                        'L',
-                        x1,
-                        y1,
-                        'L',
-                        x2,
-                        y2,
-                        'L',
-                        x2 - 20 * str(mateDirection) * (reversed2 ? -1 : 1),
-                        y2,
-                    ].join(' ');
-                    ret.push(_jsx("path", { d: path, pointerEvents: interactiveOverlay ? 'auto' : undefined, strokeWidth: id === mouseoverElt ? 10 : 5, onClick: () => {
-                            var _a, _b;
-                            const featureWidget = (_a = session.addWidget) === null || _a === void 0 ? void 0 : _a.call(session, 'VariantFeatureWidget', 'variantFeature', {
-                                featureData: (totalFeatures.get(id) || { toJSON: () => { } }).toJSON(),
-                            });
-                            (_b = session.showWidget) === null || _b === void 0 ? void 0 : _b.call(session, featureWidget);
-                        }, onMouseOver: () => {
-                            setMouseoverElt(id);
-                        }, onMouseOut: () => {
-                            setMouseoverElt(undefined);
-                        } }, JSON.stringify(path)));
+                    const x1Tick = x1 - 20 * strandToSign(myDirection) * (reversed1 ? -1 : 1);
+                    const x2Tick = x2 - 20 * strandToSign(mateDirection) * (reversed2 ? -1 : 1);
+                    const path = buildBreakpointPath(x1, y1, x2, y2, x1Tick, x2Tick);
+                    const mouseHandlers = createMouseHandlers(id, setMouseoverElt, session, 'VariantFeatureWidget', 'variantFeature', totalFeatures.get(id)?.toJSON());
+                    ret.push(_jsx("path", { d: path, pointerEvents: interactiveOverlay ? 'auto' : undefined, strokeWidth: id === mouseoverElt ? 10 : 5, ...mouseHandlers }, JSON.stringify(path)));
                 }
             }
             return ret;

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

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

package/esm/BreakpointSplitView/components/VerticalGuide.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { stringify } from '@jbrowse/core/util';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
+import { Tooltip } from '@mui/material';
+import { observer } from 'mobx-react';
+const useStyles = makeStyles()({
+    guide: {
+        pointerEvents: 'none',
+        height: '100%',
+        width: 1,
+        position: 'absolute',
+        background: 'red',
+        zIndex: 1001,
+    },
+});
+const VerticalGuide = observer(function VerticalGuide({ model, coordX, }) {
+    const { classes } = useStyles();
+    return (_jsx(Tooltip, { open: true, placement: "top", title: model.views
+            .map(view => view.pxToBp(coordX))
+            .map((elt, idx) => (_jsx("div", { children: stringify(elt, true) }, [JSON.stringify(elt), idx].join('-')))), arrow: true, children: _jsx("div", { className: classes.guide, style: {
+                left: coordX,
+            } }) }));
+});
+export default VerticalGuide;

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

@@ -0,0 +1,24 @@
+import type { BreakpointViewModel } from '../model.ts';
+import type { Assembly } from '@jbrowse/core/assemblyManager/assembly';
+import type { getSession } from '@jbrowse/core/util';
+export declare const LEFT: 0, RIGHT: 2;
+export interface OverlayProps {
+    model: BreakpointViewModel;
+    trackId: string;
+    parentRef: React.RefObject<SVGSVGElement | null>;
+    getTrackYPosOverride?: (trackId: string, level: number) => number;
+}
+export declare function getYOffset(parentRef: React.RefObject<SVGSVGElement | null>): number;
+export declare function createMouseHandlers(id: string, setMouseoverElt: (id: string | undefined) => void, session: ReturnType<typeof getSession>, widgetType: string, widgetId: string, featureData: unknown): {
+    onClick: () => void;
+    onMouseOver: () => void;
+    onMouseOut: () => void;
+};
+export declare function getTestId(trackId: string, hasMatches: boolean): string;
+export declare function getCanonicalRefs(assembly: Assembly, f1RefName: string, f2RefName: string): {
+    f1ref: string;
+    f2ref: string;
+};
+export declare function strandToSign(s: string): 0 | 1 | -1;
+export declare function buildSimplePath(x1: number, y1: number, x2: number, y2: number): string;
+export declare function buildBreakpointPath(x1: number, y1: number, x2: number, y2: number, x1Tick: number, x2Tick: number): string;

package/esm/BreakpointSplitView/components/overlayUtils.js

@@ -0,0 +1,47 @@
+export const [LEFT, , RIGHT] = [0, 1, 2, 3];
+export function getYOffset(parentRef) {
+    return parentRef.current?.getBoundingClientRect().top ?? 0;
+}
+export function createMouseHandlers(id, setMouseoverElt, session, widgetType, widgetId, featureData) {
+    return {
+        onClick: () => {
+            const featureWidget = session.addWidget?.(widgetType, widgetId, {
+                featureData,
+            });
+            session.showWidget?.(featureWidget);
+        },
+        onMouseOver: () => {
+            setMouseoverElt(id);
+        },
+        onMouseOut: () => {
+            setMouseoverElt(undefined);
+        },
+    };
+}
+export function getTestId(trackId, hasMatches) {
+    return hasMatches ? `${trackId}-loaded` : trackId;
+}
+export function getCanonicalRefs(assembly, f1RefName, f2RefName) {
+    const f1ref = assembly.getCanonicalRefName(f1RefName);
+    const f2ref = assembly.getCanonicalRefName(f2RefName);
+    if (!f1ref || !f2ref) {
+        throw new Error(`unable to find ref for ${f1ref || f2ref}`);
+    }
+    return { f1ref, f2ref };
+}
+export function strandToSign(s) {
+    return s === '+' ? 1 : s === '-' ? -1 : 0;
+}
+const FLAT_ARC_HEIGHT = 30;
+function arcOrLine(x1, y1, x2, y2) {
+    const midX = (x1 + x2) / 2;
+    return y1 === y2
+        ? `Q ${midX} ${y1 - FLAT_ARC_HEIGHT} ${x2} ${y2}`
+        : `L ${x2} ${y2}`;
+}
+export function buildSimplePath(x1, y1, x2, y2) {
+    return `M ${x1} ${y1} ${arcOrLine(x1, y1, x2, y2)}`;
+}
+export function buildBreakpointPath(x1, y1, x2, y2, x1Tick, x2Tick) {
+    return `M ${x1Tick} ${y1} L ${x1} ${y1} ${arcOrLine(x1, y1, x2, y2)} L ${x2Tick} ${y2}`;
+}

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

@@ -0,0 +1,4 @@
+export declare function getRelativeX(event: {
+    clientX: number;
+    target: EventTarget | null;
+}, element: HTMLElement | null): number;

package/esm/BreakpointSplitView/components/rubberbandUtil.js

@@ -0,0 +1,3 @@
+export function getRelativeX(event, element) {
+    return event.clientX - (element?.getBoundingClientRect().left || 0);
+}

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

@@ -0,0 +1,59 @@
+import type React from 'react';
+import type { BreakpointViewModel } from '../model.ts';
+interface AnchorPosition {
+    offsetX: number;
+    clientX: number;
+    clientY: number;
+}
+export declare function useRangeSelect(ref: React.RefObject<HTMLDivElement | null>, model: BreakpointViewModel): {
+    open: boolean;
+    guideX: number | undefined;
+    mouseDown: (event: React.MouseEvent<HTMLDivElement>) => void;
+    mouseMove: (event: React.MouseEvent<HTMLDivElement>) => void;
+    mouseOut: () => void;
+    handleMenuItemClick: (_: unknown, callback: () => void) => void;
+    rubberbandOn?: undefined;
+    handleClose?: undefined;
+    leftBpOffset?: undefined;
+    rightBpOffset?: undefined;
+    anchorPosition?: undefined;
+    numOfBpSelected?: undefined;
+    width?: undefined;
+    left?: undefined;
+} | {
+    open: boolean;
+    rubberbandOn: boolean;
+    mouseDown: (event: React.MouseEvent<HTMLDivElement>) => void;
+    mouseMove: (event: React.MouseEvent<HTMLDivElement>) => void;
+    mouseOut: () => void;
+    handleClose: () => void;
+    handleMenuItemClick: (_: unknown, callback: () => void) => void;
+    leftBpOffset: {
+        coord: number;
+        index: number;
+        refName: string;
+        oob: boolean;
+        assemblyName: string;
+        offset: number;
+        start: number;
+        end: number;
+        reversed?: boolean;
+    }[];
+    rightBpOffset: {
+        coord: number;
+        index: number;
+        refName: string;
+        oob: boolean;
+        assemblyName: string;
+        offset: number;
+        start: number;
+        end: number;
+        reversed?: boolean;
+    }[];
+    anchorPosition: AnchorPosition | undefined;
+    numOfBpSelected: number[];
+    width: number;
+    left: number;
+    guideX?: undefined;
+};
+export {};