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

package/esm/BreakpointAlignmentsFeatureDetail/BreakpointAlignmentsFeatureDetail.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { BaseAttributes, BaseCoreDetails, } from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail';
 import { Paper } from '@mui/material';
 import { observer } from 'mobx-react';
-const BreakpointAlignmentsFeatureDetail = observer(function ({ model, }) {
+const BreakpointAlignmentsFeatureDetail = observer(function BreakpointAlignmentsFeatureDetail({ model, }) {
     const { featureData } = model;
     const { feature1, feature2 } = structuredClone(featureData);
     return (_jsxs(Paper, { children: [_jsx(BaseCoreDetails, { title: "Feature 1", feature: feature1 }), _jsx(BaseCoreDetails, { title: "Feature 2", feature: feature2 }), _jsx(BaseAttributes, { title: "Feature 1 attributes", feature: feature1 }), _jsx(BaseAttributes, { title: "Feature 2 attributes", feature: feature2 })] }));

package/esm/BreakpointAlignmentsFeatureDetail/index.js

@@ -2,7 +2,7 @@ import { lazy } from 'react';
 import { ConfigurationSchema } from '@jbrowse/core/configuration';
 import { WidgetType } from '@jbrowse/core/pluggableElementTypes';
 import { ElementId } from '@jbrowse/core/util/types/mst';
-import { types } from 'mobx-state-tree';
+import { types } from '@jbrowse/mobx-state-tree';
 const configSchema = ConfigurationSchema('BreakpointAlignmentsWidget', {});
 const stateModel = types
     .model('BreakpointAlignmentsWidget', {
@@ -25,7 +25,7 @@ export default function BreakpointAlignmentsFeatureDetailF(pluginManager) {
             heading: 'Breakpoint feature details',
             configSchema,
             stateModel,
-            ReactComponent: lazy(() => import('./BreakpointAlignmentsFeatureDetail')),
+            ReactComponent: lazy(() => import("./BreakpointAlignmentsFeatureDetail.js")),
         });
     });
 }

package/esm/BreakpointGetFeatures/BreakpointGetFeatures.d.ts

@@ -0,0 +1,51 @@
+import RpcMethodType from '@jbrowse/core/pluggableElementTypes/RpcMethodType';
+import SimpleFeature from '@jbrowse/core/util/simpleFeature';
+import type { RenderArgs } from '@jbrowse/core/rpc/methods/util';
+import type { Region } from '@jbrowse/core/util';
+interface MinimalFeature {
+    [key: string]: unknown;
+    uniqueId: string;
+    refName: string;
+    start: number;
+    end: number;
+    strand: number;
+    flags: number;
+    name?: string;
+    id?: string;
+    tags?: Record<string, unknown>;
+    pair_orientation?: string;
+    clipLengthAtStartOfRead?: number;
+    INFO?: Record<string, unknown>;
+    ALT?: unknown[];
+    mate?: Record<string, unknown>;
+    type?: string;
+}
+export default class BreakpointGetFeatures extends RpcMethodType {
+    name: string;
+    deserializeReturn(feats: MinimalFeature[], args: unknown, rpcDriver: string): Promise<SimpleFeature[]>;
+    serializeArguments(args: RenderArgs, rpcDriver: string): Promise<RenderArgs>;
+    execute(args: {
+        sessionId: string;
+        regions: Region[];
+        adapterConfig: Record<string, unknown>;
+        statusCallback: (arg: string) => void;
+        stopToken?: string;
+        opts?: Record<string, unknown>;
+    }, rpcDriver: string): Promise<{
+        uniqueId: string;
+        start: number;
+        end: number;
+        refName: string;
+        strand: any;
+        flags: any;
+        name: any;
+        id: any;
+        tags: any;
+        pair_orientation: any;
+        type: any;
+        ALT: any;
+        INFO: any;
+        clipLengthAtStartOfRead: number | undefined;
+    }[]>;
+}
+export {};

package/esm/BreakpointGetFeatures/BreakpointGetFeatures.js

@@ -0,0 +1,57 @@
+import { getAdapter } from '@jbrowse/core/data_adapters/dataAdapterCache';
+import RpcMethodType from '@jbrowse/core/pluggableElementTypes/RpcMethodType';
+import { renameRegionsIfNeeded } from '@jbrowse/core/util';
+import SimpleFeature from '@jbrowse/core/util/simpleFeature';
+import { firstValueFrom } from 'rxjs';
+import { toArray } from 'rxjs/operators';
+const startClip = /(\d+)[SH]$/;
+const endClip = /^(\d+)([SH])/;
+function getClip(cigar, strand) {
+    return strand === -1
+        ? +(startClip.exec(cigar)?.[1] ?? 0)
+        : +(endClip.exec(cigar)?.[1] ?? 0);
+}
+export default class BreakpointGetFeatures extends RpcMethodType {
+    name = 'BreakpointGetFeatures';
+    async deserializeReturn(feats, args, rpcDriver) {
+        const superDeserialized = (await super.deserializeReturn(feats, args, rpcDriver));
+        return superDeserialized.map(feat => new SimpleFeature(feat));
+    }
+    async serializeArguments(args, rpcDriver) {
+        const { rootModel } = this.pluginManager;
+        const assemblyManager = rootModel.session.assemblyManager;
+        const renamedArgs = await renameRegionsIfNeeded(assemblyManager, args);
+        return super.serializeArguments(renamedArgs, rpcDriver);
+    }
+    async execute(args, rpcDriver) {
+        const { stopToken, statusCallback, sessionId, adapterConfig, regions, opts, } = await this.deserializeArguments(args, rpcDriver);
+        const dataAdapter = (await getAdapter(this.pluginManager, sessionId, adapterConfig)).dataAdapter;
+        const features = await firstValueFrom(dataAdapter
+            .getFeaturesInMultipleRegions(regions, {
+            ...opts,
+            statusCallback,
+            stopToken,
+        })
+            .pipe(toArray()));
+        return features.map(feature => {
+            const cigar = feature.get('CIGAR');
+            const strand = feature.get('strand');
+            return {
+                uniqueId: feature.id(),
+                start: feature.get('start'),
+                end: feature.get('end'),
+                refName: feature.get('refName'),
+                strand,
+                flags: feature.get('flags'),
+                name: feature.get('name'),
+                id: feature.get('id'),
+                tags: feature.get('tags'),
+                pair_orientation: feature.get('pair_orientation'),
+                type: feature.get('type'),
+                ALT: feature.get('ALT'),
+                INFO: feature.get('INFO'),
+                clipLengthAtStartOfRead: cigar && strand !== undefined ? getClip(cigar, strand) : undefined,
+            };
+        });
+    }
+}

package/esm/BreakpointGetFeatures/index.d.ts

@@ -0,0 +1,2 @@
+import type PluginManager from '@jbrowse/core/PluginManager';
+export default function BreakpointGetFeaturesF(pluginManager: PluginManager): void;

package/esm/BreakpointGetFeatures/index.js

@@ -0,0 +1,4 @@
+import BreakpointGetFeatures from "./BreakpointGetFeatures.js";
+export default function BreakpointGetFeaturesF(pluginManager) {
+    pluginManager.addRpcMethod(() => new BreakpointGetFeatures(pluginManager));
+}

package/esm/BreakpointSplitView/BreakpointSplitView.js

@@ -1,49 +1,34 @@
 import { parseBreakend } from '@gmod/vcf';
 import ViewType from '@jbrowse/core/pluggableElementTypes/ViewType';
 import { gatherOverlaps, } from '@jbrowse/core/util';
+function getMateInfo(feature, alt) {
+    const bnd = alt ? parseBreakend(alt) : undefined;
+    if (alt === '<TRA>') {
+        const info = feature.get('INFO');
+        return { mateRefName: info.CHR2[0], matePos: info.END[0] - 1 };
+    }
+    if (bnd?.MatePosition) {
+        const [ref, pos] = bnd.MatePosition.split(':');
+        return { mateRefName: ref, matePos: +pos - 1 };
+    }
+    const mate = feature.get('mate');
+    if (mate) {
+        return { mateRefName: mate.refName, matePos: mate.start };
+    }
+    return { mateRefName: feature.get('refName'), matePos: feature.get('end') };
+}
 export default class BreakpointSplitViewType extends ViewType {
     getBreakendCoveringRegions({ feature, assembly, }) {
-        var _a;
-        const alt = (_a = feature.get('ALT')) === null || _a === void 0 ? void 0 : _a[0];
-        const bnd = alt ? parseBreakend(alt) : undefined;
-        const startPos = feature.get('start');
+        const canonicalize = (ref) => assembly.getCanonicalRefName(ref) || ref;
+        const alt = feature.get('ALT')?.[0];
         const refName = feature.get('refName');
-        const f = (ref) => assembly.getCanonicalRefName(ref) || ref;
-        if (alt === '<TRA>') {
-            const INFO = feature.get('INFO');
-            return {
-                pos: startPos,
-                refName: f(refName),
-                mateRefName: f(INFO.CHR2[0]),
-                matePos: INFO.END[0] - 1,
-            };
-        }
-        else if (bnd === null || bnd === void 0 ? void 0 : bnd.MatePosition) {
-            const matePosition = bnd.MatePosition.split(':');
-            return {
-                pos: startPos,
-                refName: f(refName),
-                mateRefName: f(matePosition[0]),
-                matePos: +matePosition[1] - 1,
-            };
-        }
-        else if (feature.get('mate')) {
-            const mate = feature.get('mate');
-            return {
-                pos: startPos,
-                refName: f(refName),
-                mateRefName: f(mate.refName),
-                matePos: mate.start,
-            };
-        }
-        else {
-            return {
-                pos: startPos,
-                refName: f(refName),
-                mateRefName: f(refName),
-                matePos: feature.get('end'),
-            };
-        }
+        const { mateRefName, matePos } = getMateInfo(feature, alt);
+        return {
+            pos: feature.get('start'),
+            refName: canonicalize(refName),
+            mateRefName: canonicalize(mateRefName),
+            matePos,
+        };
     }
     singleLevelSnapshotFromBreakendFeature({ feature, session, assemblyName, }) {
         const { assemblyManager } = session;
@@ -54,13 +39,14 @@ export default class BreakpointSplitViewType extends ViewType {
         if (!assembly.regions) {
             throw new Error(`assembly ${assemblyName} regions not loaded`);
         }
-        const coverage = this.getBreakendCoveringRegions({
-            feature,
-            assembly,
-        });
+        const coverage = this.getBreakendCoveringRegions({ feature, assembly });
         const { refName, mateRefName } = coverage;
-        const topRegion = assembly.regions.find(f => f.refName === refName);
-        const bottomRegion = assembly.regions.find(f => f.refName === mateRefName);
+        const topRegion = assembly.regions.find(r => r.refName === refName);
+        const bottomRegion = assembly.regions.find(r => r.refName === mateRefName);
+        if (!topRegion || !bottomRegion) {
+            throw new Error(`could not find regions for ${refName} or ${mateRefName}`);
+        }
+        const featureName = feature.get('name') || feature.get('id') || 'breakend';
         return {
             coverage,
             snap: {
@@ -71,7 +57,7 @@ export default class BreakpointSplitViewType extends ViewType {
                         displayedRegions: gatherOverlaps([topRegion, bottomRegion]),
                     },
                 ],
-                displayName: `${feature.get('name') || feature.get('id') || 'breakend'} split detail`,
+                displayName: `${featureName} split detail`,
             },
         };
     }

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

@@ -1,8 +1,3 @@
-import type { BreakpointViewModel } from '../model';
-declare const AlignmentConnections: ({ model, trackId, parentRef, 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 AlignmentConnections: ({ model, trackId, parentRef, getTrackYPosOverride, }: OverlayProps) => import("react/jsx-runtime").JSX.Element | null;
 export default AlignmentConnections;

package/esm/BreakpointSplitView/components/AlignmentConnections.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo, useState } from 'react';
 import { getSession, getStrokeProps } from '@jbrowse/core/util';
+import { getSnapshot } from '@jbrowse/mobx-state-tree';
 import { useTheme } from '@mui/material';
 import { observer } from 'mobx-react';
-import { getSnapshot } from 'mobx-state-tree';
-import { getBadlyPairedAlignments, getMatchedAlignmentFeatures, hasPairedReads, } 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, }) {
+import { getLongReadOrientationAbnormal, getLongReadOrientationColorOrDefault, getPairedOrientationColor, isAbnormalOrientation, } from "./getOrientationColor.js";
+import { LEFT, RIGHT, getTestId, getYOffset } from "./overlayUtils.js";
+import { getBadlyPairedAlignments, getMatchedAlignmentFeatures, hasPairedReads, } from "./util.js";
+import { getPxFromCoordinate, heightFromSpecificLevel, useNextFrame, yPos, } from "../util.js";
+const AlignmentConnections = observer(function AlignmentConnections({ model, trackId, parentRef, getTrackYPosOverride, }) {
     const { interactiveOverlay, views, showIntraviewLinks } = model;
     const theme = useTheme();
     const session = getSession(model);
@@ -20,31 +20,28 @@ const AlignmentConnections = observer(function ({ model, trackId, parentRef, get
     const allFeatures = model.getTrackFeatures(trackId);
     const hasPaired = useMemo(() => hasPairedReads(allFeatures), [allFeatures]);
     const layoutMatches = useMemo(() => {
-        const layoutMatches = model.getMatchedFeaturesInLayout(trackId, hasPaired
+        const matched = hasPaired
             ? getBadlyPairedAlignments(allFeatures)
-            : getMatchedAlignmentFeatures(allFeatures));
+            : getMatchedAlignmentFeatures(allFeatures);
+        const layoutMatches = model.getMatchedFeaturesInLayout(trackId, matched);
         if (!hasPaired) {
             for (const m of layoutMatches) {
-                m.sort((a, b) => a.clipPos - b.clipPos);
+                m.sort((a, b) => a.clipLengthAtStartOfRead - b.clipLengthAtStartOfRead);
             }
         }
         return layoutMatches;
     }, [allFeatures, trackId, hasPaired, model]);
     const [mouseoverElt, setMouseoverElt] = useState();
-    let yOffset = 0;
-    if (parentRef.current) {
-        const rect = parentRef.current.getBoundingClientRect();
-        yOffset = rect.top;
+    const yOffset = getYOffset(parentRef);
+    const tracks = views.map(v => v.getTrack(trackId));
+    if (!assembly) {
+        return null;
     }
-    return assembly ? (_jsx("g", { fill: "none", "data-testid": layoutMatches.length ? `${trackId}-loaded` : trackId, children: layoutMatches.map(chunk => {
+    return (_jsx("g", { fill: "none", "data-testid": getTestId(trackId, layoutMatches.length > 0), 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;
                 }
@@ -81,7 +78,6 @@ const AlignmentConnections = observer(function ({ model, trackId, parentRef, get
                 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) -
@@ -111,14 +107,13 @@ const AlignmentConnections = observer(function ({ model, trackId, parentRef, get
                 ].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', {
+                        const featureWidget = session.addWidget?.('BreakpointAlignmentsWidget', 'breakpointAlignments', {
                             featureData: {
-                                feature1: (allFeatures.get(f1.id()) || { toJSON: () => { } }).toJSON(),
-                                feature2: (allFeatures.get(f2.id()) || { toJSON: () => { } }).toJSON(),
+                                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);
+                        session.showWidget?.(featureWidget);
                     }, onMouseOver: () => {
                         setMouseoverElt(id);
                     }, onMouseOut: () => {
@@ -126,6 +121,6 @@ const AlignmentConnections = observer(function ({ model, trackId, parentRef, get
                     } }, id));
             }
             return ret;
-        }) })) : null;
+        }) }));
 });
 export default AlignmentConnections;

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

@@ -1,8 +1,3 @@
-import type { BreakpointViewModel } from '../model';
-declare const Breakends: ({ 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 Breakends: ({ model, trackId, parentRef, getTrackYPosOverride, }: OverlayProps) => import("react/jsx-runtime").JSX.Element | null;
 export default Breakends;

package/esm/BreakpointSplitView/components/Breakends.js

@@ -1,90 +1,59 @@
 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 { findMatchingAlt, getMatchedBreakendFeatures } from './util';
-import { getPxFromCoordinate, useNextFrame, yPos } from '../util';
-const [LEFT] = [0, 1, 2, 3];
-const Breakends = observer(function ({ model, trackId, parentRef: ref, getTrackYPosOverride, }) {
+import { LEFT, buildBreakpointPath, createMouseHandlers, getCanonicalRefs, getTestId, getYOffset, } from "./overlayUtils.js";
+import { findMatchingAlt, getMatchedBreakendFeatures } from "./util.js";
+import { getPxFromCoordinate, useNextFrame, yPos } from "../util.js";
+const Breakends = observer(function Breakends({ 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, getMatchedBreakendFeatures(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 = getMatchedBreakendFeatures(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();
                 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 { 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 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;
+                    yOffset;
                 const y2 = yPos(trackId, level2, views, tracks, c2, getTrackYPosOverride) -
-                    yoff;
+                    yOffset;
                 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 x1Tick = x1 -
+                        20 * (relevantAlt.Join === 'left' ? -1 : 1) * (reversed1 ? -1 : 1);
+                    const x2Tick = x2 -
+                        20 *
+                            (relevantAlt.MateDirection === 'left' ? 1 : -1) *
+                            (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, "data-testid": "r2", pointerEvents: interactiveOverlay ? 'auto' : undefined, strokeWidth: id === mouseoverElt ? 10 : 5, ...mouseHandlers }, JSON.stringify(path)));
                 }
             }
             return ret;

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

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

package/esm/BreakpointSplitView/components/BreakpointSplitView.js

@@ -1,8 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getEnv } from '@jbrowse/core/util';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { observer } from 'mobx-react';
-import { makeStyles } from 'tss-react/mui';
-import BreakpointSplitViewOverlay from './BreakpointSplitViewOverlay';
+import BreakpointSplitViewOverlay from "./BreakpointSplitViewOverlay.js";
+import Header from "./Header.js";
+import Rubberband from "./Rubberband.js";
 const useStyles = makeStyles()(theme => ({
     viewDivider: {
         background: theme.palette.secondary.main,
@@ -17,8 +19,20 @@ const useStyles = makeStyles()(theme => ({
     rel: {
         position: 'relative',
     },
+    rubberbandContainer: {
+        position: 'relative',
+        overflow: 'hidden',
+    },
+    rubberbandDiv: {
+        width: '100%',
+        background: theme.palette.action.disabledBackground,
+        height: 15,
+        '&:hover': {
+            background: theme.palette.action.selected,
+        },
+    },
 }));
-const BreakpointSplitViewLevels = observer(function ({ model, }) {
+const BreakpointSplitViewLevels = observer(function BreakpointSplitViewLevels({ model, }) {
     const { classes } = useStyles();
     const { views } = model;
     const { pluginManager } = getEnv(model);
@@ -33,8 +47,8 @@ const BreakpointSplitViewLevels = observer(function ({ model, }) {
                     ];
             }) }) }));
 });
-const BreakpointSplitView = observer(function ({ model, }) {
+const BreakpointSplitView = observer(function BreakpointSplitView({ model, }) {
     const { classes } = useStyles();
-    return (_jsx("div", { children: _jsxs("div", { className: classes.container, children: [_jsx(BreakpointSplitViewLevels, { model: model }), _jsx(BreakpointSplitViewOverlay, { model: model })] }) }));
+    return (_jsxs("div", { className: classes.rubberbandContainer, children: [model.showHeader ? _jsx(Header, { model: model }) : null, _jsx(Rubberband, { model: model, ControlComponent: _jsx("div", { className: classes.rubberbandDiv }) }), _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,4 +1,4 @@
-import type { BreakpointViewModel } from '../model';
+import type { BreakpointViewModel } from '../model.ts';
 declare const BreakpointSplitViewOverlay: ({ model, }: {
     model: BreakpointViewModel;
 }) => import("react/jsx-runtime").JSX.Element;

package/esm/BreakpointSplitView/components/BreakpointSplitViewOverlay.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useRef } from 'react';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { observer } from 'mobx-react';
-import { makeStyles } from 'tss-react/mui';
-import Overlay from './Overlay';
+import Overlay from "./Overlay.js";
 const useStyles = makeStyles()({
     overlay: {
         display: 'flex',
@@ -19,7 +19,7 @@ const useStyles = makeStyles()({
         zIndex: 100,
     },
 });
-const BreakpointSplitViewOverlay = observer(function ({ model, }) {
+const BreakpointSplitViewOverlay = observer(function BreakpointSplitViewOverlay({ model, }) {
     const { classes } = useStyles();
     const { matchedTracks } = model;
     const ref = useRef(null);

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

@@ -1,4 +1,4 @@
-import type { ExportSvgOptions } from '../types';
+import type { ExportSvgOptions } from '../types.ts';
 export default function ExportSvgDialog({ model, handleClose, }: {
     model: {
         exportSvg(opts: ExportSvgOptions): Promise<void>;

package/esm/BreakpointSplitView/components/ExportSvgDialog.js

@@ -16,6 +16,7 @@ export default function ExportSvgDialog({ model, handleClose, }) {
     const session = getSession(model);
     const offscreenCanvas = typeof OffscreenCanvas !== 'undefined';
     const [rasterizeLayers, setRasterizeLayers] = useState(offscreenCanvas);
+    const [showGridlines, setShowGridlines] = useSvgLocal('gridlines', false);
     const [loading, setLoading] = useState(false);
     const [error, setError] = useState();
     const [filename, setFilename] = useSvgLocal('file', 'jbrowse.svg');
@@ -27,7 +28,9 @@ export default function ExportSvgDialog({ model, handleClose, }) {
                             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: () => {
+                        }, children: Object.entries(session.allThemes()).map(([key, val]) => (_jsx(MenuItem, { value: key, children: val.name || '(Unknown name)' }, key))) })) : null, _jsx(FormControlLabel, { control: _jsx(Checkbox, { checked: showGridlines, onChange: () => {
+                                setShowGridlines(val => !val);
+                            } }), label: "Show gridlines" }), 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();
@@ -40,6 +43,7 @@ export default function ExportSvgDialog({ model, handleClose, }) {
                                     filename,
                                     trackLabels,
                                     themeName,
+                                    showGridlines,
                                 });
                                 handleClose();
                             }

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

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