@jbrowse/plugin-breakpoint-split-view 2.14.0 → 2.15.1

package/dist/BreakpointSplitView/components/util.js

@@ -6,6 +6,7 @@ exports.hasPairedReads = hasPairedReads;
 exports.findMatchingAlt = findMatchingAlt;
 exports.getMatchedBreakendFeatures = getMatchedBreakendFeatures;
 exports.getMatchedTranslocationFeatures = getMatchedTranslocationFeatures;
+exports.getMatchedPairedFeatures = getMatchedPairedFeatures;
 const util_1 = require("@jbrowse/core/util");
 const vcf_1 = require("@gmod/vcf");
 // this finds candidate alignment features, aimed at plotting split reads from
@@ -115,3 +116,28 @@ function getMatchedTranslocationFeatures(feats) {
     }
     return ret;
 }
+// Getting "matched" TRA means just return all TRA
+function getMatchedPairedFeatures(feats) {
+    const candidates = new Map();
+    const alreadySeen = new Set();
+    for (const f of feats.values()) {
+        if (!alreadySeen.has(f.id()) && f.get('type') === 'paired_feature') {
+            const r1 = f.id().replace('-r1', '');
+            const r2 = f.id().replace('-r2', '');
+            if (f.id().endsWith('-r1')) {
+                if (!candidates.get(r1)) {
+                    candidates.set(r1, []);
+                }
+                candidates.get(r1).push(f);
+            }
+            else if (f.id().endsWith('-r2')) {
+                if (!candidates.get(r2)) {
+                    candidates.set(r2, []);
+                }
+                candidates.get(r2).push(f);
+            }
+        }
+        alreadySeen.add(f.id());
+    }
+    return [...candidates.values()].filter(v => v.length > 1);
+}

package/dist/BreakpointSplitView/model.d.ts

@@ -282,9 +282,14 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
 } & {
     /**
      * #getter
-     * Find all track ids that match across multiple views
+     * Find all track ids that match across multiple views, or return just
+     * the single view's track if only a single row is used
      */
-    readonly matchedTracks: any[];
+    readonly matchedTracks: (import("mobx-state-tree").IMSTArray<import("mobx-state-tree").IAnyType> & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IArrayType<import("mobx-state-tree").IAnyType>>) | {
+        configuration: {
+            trackId: string;
+        };
+    }[];
     /**
      * #method
      * Get tracks with a given trackId across multiple views
@@ -292,11 +297,15 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
     getMatchedTracks(trackConfigId: string): any[];
     /**
      * #method
-     *
-     * Translocation features are handled differently
-     * since they do not have a mate e.g. they are one sided
+     * Translocation features are handled differently since they do not have
+     * a mate e.g. they are one sided
      */
     hasTranslocations(trackConfigId: string): Feature | undefined;
+    /**
+     * #method
+     * Paired features similar to breakends, but simpler, like BEDPE
+     */
+    hasPairedFeatures(trackConfigId: string): Feature | undefined;
     /**
      * #method
      * Get a composite map of featureId-\>feature map for a track across
@@ -338,6 +347,10 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
      * #action
      */
     setMatchedTrackFeatures(obj: Record<string, Feature[][]>): void;
+    /**
+     * #action
+     */
+    reverseViewOrder(): void;
 } & {
     afterAttach(): void;
     /**
@@ -346,6 +359,12 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
     menuItems(): ({
         label: string;
         subMenu: import("@jbrowse/core/ui").MenuItem[];
+    } | {
+        label: string;
+        onClick: () => void;
+        type?: undefined;
+        checked?: undefined;
+        icon?: undefined;
     } | {
         label: string;
         type: string;

package/dist/BreakpointSplitView/model.js

@@ -46,9 +46,13 @@ function calc(track, f) {
     return (_b = (_a = track.displays[0]).searchFeatureByID) === null || _b === void 0 ? void 0 : _b.call(_a, f.id());
 }
 async function getBlockFeatures(model, track) {
+    var _a;
     const { views } = model;
     const { rpcManager, assemblyManager } = (0, util_1.getSession)(model);
-    const assemblyName = model.views[0].assemblyNames[0];
+    const assemblyName = (_a = model.views[0]) === null || _a === void 0 ? void 0 : _a.assemblyNames[0];
+    if (!assemblyName) {
+        return undefined;
+    }
     const assembly = await assemblyManager.waitForAssembly(assemblyName);
     if (!assembly) {
         return undefined; // throw new Error(`assembly not found: "${assemblyName}"`)
@@ -119,10 +123,13 @@ function stateModelFactory(pluginManager) {
         .views(self => ({
         /**
          * #getter
-         * Find all track ids that match across multiple views
+         * Find all track ids that match across multiple views, or return just
+         * the single view's track if only a single row is used
          */
         get matchedTracks() {
-            return (0, util_2.intersect)(elt => elt.configuration.trackId, ...self.views.map(view => view.tracks));
+            return self.views.length === 1
+                ? self.views[0].tracks
+                : (0, util_2.intersect)(elt => elt.configuration.trackId, ...self.views.map(view => view.tracks));
         },
         /**
          * #method
@@ -135,13 +142,19 @@ function stateModelFactory(pluginManager) {
         },
         /**
          * #method
-         *
-         * Translocation features are handled differently
-         * since they do not have a mate e.g. they are one sided
+         * Translocation features are handled differently since they do not have
+         * a mate e.g. they are one sided
          */
         hasTranslocations(trackConfigId) {
             return [...this.getTrackFeatures(trackConfigId).values()].find(f => f.get('type') === 'translocation');
         },
+        /**
+         * #method
+         * Paired features similar to breakends, but simpler, like BEDPE
+         */
+        hasPairedFeatures(trackConfigId) {
+            return [...this.getTrackFeatures(trackConfigId).values()].find(f => f.get('type') === 'paired_feature');
+        },
         /**
          * #method
          * Get a composite map of featureId-\>feature map for a track across
@@ -239,6 +252,12 @@ function stateModelFactory(pluginManager) {
         setMatchedTrackFeatures(obj) {
             self.matchedTrackFeatures = obj;
         },
+        /**
+         * #action
+         */
+        reverseViewOrder() {
+            self.views.reverse();
+        },
     }))
         .actions(self => ({
         afterAttach() {
@@ -265,7 +284,16 @@ function stateModelFactory(pluginManager) {
             return [
                 ...self.views
                     .map((view, idx) => [idx, view.menuItems()])
-                    .map(f => ({ label: `View ${f[0] + 1} Menu`, subMenu: f[1] })),
+                    .map(f => ({
+                    label: `Row ${f[0] + 1} view menu`,
+                    subMenu: f[1],
+                })),
+                {
+                    label: 'Reverse view order',
+                    onClick: () => {
+                        self.reverseViewOrder();
+                    },
+                },
                 {
                     label: 'Show intra-view links',
                     type: 'checkbox',

package/dist/BreakpointSplitView/svgcomponents/SVGBreakpointSplitView.js

@@ -38,10 +38,7 @@ async function renderToSvg(model, opts) {
     const trackLabelMaxLen = (0, util_2.getTrackNameMaxLen)(views, fontSize, session) + 40;
     const trackLabelOffset = trackLabels === 'left' ? trackLabelMaxLen : 0;
     const textOffset = trackLabels === 'offset' ? textHeight : 0;
-    const trackOffsets = [
-        (0, util_2.getTrackOffsets)(views[0], textOffset, fontSize + offset),
-        (0, util_2.getTrackOffsets)(views[1], textOffset, fontSize + heights[0] + offset),
-    ];
+    const trackOffsets = views.map((view, idx) => (0, util_2.getTrackOffsets)(view, textOffset, fontSize + (idx > 0 ? heights[idx - 1] : 0) + offset));
     const w = width + trackLabelOffset;
     const t = (0, ui_1.createJBrowseTheme)(theme);
     // the xlink namespace is used for rendering <image> tag
@@ -49,16 +46,16 @@ async function renderToSvg(model, opts) {
         react_1.default.createElement(Wrapper, null,
             react_1.default.createElement("svg", { width: width, height: totalHeightSvg, xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", viewBox: [0, 0, w + shift * 2, totalHeightSvg].toString() },
                 react_1.default.createElement(SVGBackground_1.default, { width: w, height: totalHeightSvg, shift: shift }),
-                react_1.default.createElement("g", { transform: `translate(${shift} ${fontSize})` },
+                views[0] ? (react_1.default.createElement("g", { transform: `translate(${shift} ${fontSize})` },
                     react_1.default.createElement("g", { transform: `translate(${trackLabelOffset})` },
                         react_1.default.createElement("text", { x: 0, fontSize: fontSize, fill: t.palette.text.primary }, views[0].assemblyNames.join(', ')),
                         react_1.default.createElement(plugin_linear_genome_view_1.SVGRuler, { model: displayResults[0].view, fontSize: fontSize })),
-                    react_1.default.createElement(plugin_linear_genome_view_1.SVGTracks, { textHeight: textHeight, trackLabels: trackLabels, fontSize: fontSize, model: displayResults[0].view, displayResults: displayResults[0].data, offset: offset, trackLabelOffset: trackLabelOffset })),
-                react_1.default.createElement("g", { transform: `translate(${shift} ${fontSize + heights[0]})` },
+                    react_1.default.createElement(plugin_linear_genome_view_1.SVGTracks, { textHeight: textHeight, trackLabels: trackLabels, fontSize: fontSize, model: displayResults[0].view, displayResults: displayResults[0].data, offset: offset, trackLabelOffset: trackLabelOffset }))) : null,
+                views[1] ? (react_1.default.createElement("g", { transform: `translate(${shift} ${fontSize + heights[0]})` },
                     react_1.default.createElement("g", { transform: `translate(${trackLabelOffset})` },
                         react_1.default.createElement("text", { x: 0, fontSize: fontSize, fill: t.palette.text.primary }, views[1].assemblyNames.join(', ')),
                         react_1.default.createElement(plugin_linear_genome_view_1.SVGRuler, { model: displayResults[1].view, fontSize: fontSize })),
-                    react_1.default.createElement(plugin_linear_genome_view_1.SVGTracks, { textHeight: textHeight, trackLabels: trackLabels, fontSize: fontSize, model: displayResults[1].view, displayResults: displayResults[1].data, offset: offset, trackLabelOffset: trackLabelOffset })),
+                    react_1.default.createElement(plugin_linear_genome_view_1.SVGTracks, { textHeight: textHeight, trackLabels: trackLabels, fontSize: fontSize, model: displayResults[1].view, displayResults: displayResults[1].data, offset: offset, trackLabelOffset: trackLabelOffset }))) : null,
                 react_1.default.createElement("defs", null,
                     react_1.default.createElement("clipPath", { id: "clip-bsv" },
                         react_1.default.createElement("rect", { x: 0, y: 0, width: width, height: totalHeightSvg }))),

package/dist/BreakpointSplitView/util.d.ts

@@ -11,6 +11,7 @@ interface Display {
 interface Track {
     displays: Display[];
 }
+export declare function heightFromSpecificLevel(views: LGV[], trackId: string, level: number, getYPosOverride?: (trackId: string, level: number) => number): number;
 export declare function getPxFromCoordinate(view: LGV, refName: string, coord: number): number;
 export declare function yPos(trackId: string, level: number, views: LGV[], tracks: Track[], c: LayoutRecord, getYPosOverride?: (trackId: string, level: number) => number): number;
 export declare const useNextFrame: (variable: unknown) => void;

package/dist/BreakpointSplitView/util.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useNextFrame = void 0;
+exports.heightFromSpecificLevel = heightFromSpecificLevel;
 exports.getPxFromCoordinate = getPxFromCoordinate;
 exports.yPos = yPos;
 exports.intersect = intersect;

package/esm/BreakpointSplitView/BreakpointSplitView.d.ts

@@ -1,8 +1,18 @@
 import { Feature, Region } from '@jbrowse/core/util';
 import ViewType from '@jbrowse/core/pluggableElementTypes/ViewType';
 import { IStateTreeNode } from 'mobx-state-tree';
+import { Assembly } from '@jbrowse/core/assemblyManager/assembly';
 export default class BreakpointSplitViewType extends ViewType {
-    snapshotFromBreakendFeature(feature: Feature, view: {
+    getBreakendCoveringRegions({ feature, assembly, }: {
+        feature: Feature;
+        assembly: Assembly;
+    }): {
+        pos: number;
+        refName: string | undefined;
+        mateRefName: string | undefined;
+        matePos: number;
+    };
+    singleLevelSnapshotFromBreakendFeature(feature: Feature, view: {
         displayedRegions: Region[];
     } & IStateTreeNode): {
         type: string;
@@ -21,4 +31,22 @@ export default class BreakpointSplitViewType extends ViewType {
         displayName: string;
         featureData: unknown;
     };
+    snapshotFromBreakendFeature(feature: Feature, view: {
+        displayedRegions: Region[];
+    } & IStateTreeNode): {
+        type: string;
+        views: {
+            type: string;
+            displayedRegions: {
+                start: number;
+                end: number;
+                refName: string;
+                assemblyName: string;
+            }[];
+            hideHeader: boolean;
+            bpPerPx: number;
+            offsetPx: number;
+        }[];
+        displayName: string;
+    };
 }

package/esm/BreakpointSplitView/BreakpointSplitView.js

@@ -2,49 +2,29 @@ import { getSession } from '@jbrowse/core/util';
 import ViewType from '@jbrowse/core/pluggableElementTypes/ViewType';
 import { parseBreakend } from '@gmod/vcf';
 export default class BreakpointSplitViewType extends ViewType {
-    snapshotFromBreakendFeature(feature, view) {
+    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 refName = feature.get('refName');
         let endPos;
-        const bpPerPx = 10;
-        // TODO: Figure this out for multiple assembly names
-        const { assemblyName } = view.displayedRegions[0];
-        const { assemblyManager } = getSession(view);
-        const assembly = assemblyManager.get(assemblyName);
-        if (!assembly) {
-            throw new Error(`assembly ${assemblyName} not found`);
-        }
-        if (!assembly.regions) {
-            throw new Error(`assembly ${assemblyName} regions not loaded`);
-        }
-        const featureRefName = assembly.getCanonicalRefName(feature.get('refName'));
-        const topRegion = assembly.regions.find(f => f.refName === featureRefName);
         let mateRefName;
-        let startMod = 0;
-        let endMod = 0;
         // a VCF breakend feature
         if (alt === '<TRA>') {
             const INFO = feature.get('INFO');
             endPos = INFO.END[0] - 1;
-            mateRefName = assembly.getCanonicalRefName(INFO.CHR2[0]);
+            mateRefName = INFO.CHR2[0];
         }
         else if (bnd === null || bnd === void 0 ? void 0 : bnd.MatePosition) {
             const matePosition = bnd.MatePosition.split(':');
             endPos = +matePosition[1] - 1;
-            mateRefName = assembly.getCanonicalRefName(matePosition[0]);
-            if (bnd.Join === 'left') {
-                startMod = -1;
-            }
-            if (bnd.MateDirection === 'left') {
-                endMod = -1;
-            }
+            mateRefName = matePosition[0];
         }
         else if (feature.get('mate')) {
             // a generic 'mate' feature
             const mate = feature.get('mate');
-            mateRefName = assembly.getCanonicalRefName(mate.refName);
+            mateRefName = mate.refName;
             endPos = mate.start;
         }
         else {
@@ -53,16 +33,76 @@ export default class BreakpointSplitViewType extends ViewType {
         if (!mateRefName) {
             throw new Error(`unable to resolve mate refName ${mateRefName} in reference genome`);
         }
+        return {
+            pos: startPos,
+            refName: assembly.getCanonicalRefName(refName),
+            mateRefName: assembly.getCanonicalRefName(mateRefName),
+            matePos: endPos,
+        };
+    }
+    singleLevelSnapshotFromBreakendFeature(feature, view) {
+        const session = getSession(view);
+        const bpPerPx = 10;
+        const { assemblyName } = view.displayedRegions[0];
+        const { assemblyManager } = session;
+        const assembly = assemblyManager.get(assemblyName);
+        if (!assembly) {
+            throw new Error(`assembly ${assemblyName} not found`);
+        }
+        if (!assembly.regions) {
+            throw new Error(`assembly ${assemblyName} regions not loaded`);
+        }
+        const { refName, pos: startPos, mateRefName, matePos: endPos, } = this.getBreakendCoveringRegions({
+            feature,
+            assembly,
+        });
+        const topRegion = assembly.regions.find(f => f.refName === refName);
         const bottomRegion = assembly.regions.find(f => f.refName === mateRefName);
-        if (!topRegion || !bottomRegion) {
-            throw new Error('unable to find the refName for the top or bottom of the breakpoint view');
+        const topMarkedRegion = [{ ...topRegion }, { ...topRegion }];
+        const bottomMarkedRegion = [{ ...bottomRegion }, { ...bottomRegion }];
+        topMarkedRegion[0].end = startPos;
+        topMarkedRegion[1].start = startPos;
+        bottomMarkedRegion[0].end = endPos;
+        bottomMarkedRegion[1].start = endPos;
+        return {
+            type: 'BreakpointSplitView',
+            views: [
+                {
+                    type: 'LinearGenomeView',
+                    displayedRegions: topMarkedRegion,
+                    hideHeader: true,
+                    bpPerPx,
+                    offsetPx: (topRegion.start + feature.get('start')) / bpPerPx,
+                },
+            ],
+            displayName: `${feature.get('name') || feature.get('id') || 'breakend'} split detail`,
+            featureData: undefined,
+        };
+    }
+    snapshotFromBreakendFeature(feature, view) {
+        const session = getSession(view);
+        const bpPerPx = 10;
+        const { assemblyName } = view.displayedRegions[0];
+        const { assemblyManager } = session;
+        const assembly = assemblyManager.get(assemblyName);
+        if (!assembly) {
+            throw new Error(`assembly ${assemblyName} not found`);
+        }
+        if (!assembly.regions) {
+            throw new Error(`assembly ${assemblyName} regions not loaded`);
         }
+        const { refName, pos: startPos, mateRefName, matePos: endPos, } = this.getBreakendCoveringRegions({
+            feature,
+            assembly,
+        });
+        const topRegion = assembly.regions.find(f => f.refName === refName);
+        const bottomRegion = assembly.regions.find(f => f.refName === mateRefName);
         const topMarkedRegion = [{ ...topRegion }, { ...topRegion }];
         const bottomMarkedRegion = [{ ...bottomRegion }, { ...bottomRegion }];
-        topMarkedRegion[0].end = startPos + startMod;
-        topMarkedRegion[1].start = startPos + startMod;
-        bottomMarkedRegion[0].end = endPos + endMod;
-        bottomMarkedRegion[1].start = endPos + endMod;
+        topMarkedRegion[0].end = startPos;
+        topMarkedRegion[1].start = startPos;
+        bottomMarkedRegion[0].end = endPos;
+        bottomMarkedRegion[1].start = endPos;
         return {
             type: 'BreakpointSplitView',
             views: [
@@ -82,7 +122,6 @@ export default class BreakpointSplitViewType extends ViewType {
                 },
             ],
             displayName: `${feature.get('name') || feature.get('id') || 'breakend'} split detail`,
-            featureData: undefined,
         };
     }
 }

package/esm/BreakpointSplitView/components/AlignmentConnections.js

@@ -5,7 +5,8 @@ import { useTheme } from '@mui/material';
 import { getSession, getStrokeProps } from '@jbrowse/core/util';
 // locals
 import { getBadlyPairedAlignments, getMatchedAlignmentFeatures, hasPairedReads, } from './util';
-import { yPos, useNextFrame, getPxFromCoordinate } from '../util';
+import { yPos, useNextFrame, getPxFromCoordinate, heightFromSpecificLevel, } 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;
@@ -13,7 +14,8 @@ const AlignmentConnections = observer(function ({ model, trackId, parentRef, get
     const session = getSession(model);
     const snap = getSnapshot(model);
     const { assemblyManager } = session;
-    const assembly = assemblyManager.get(views[0].assemblyNames[0]);
+    const v0 = views[0];
+    const assembly = v0 ? assemblyManager.get(v0.assemblyNames[0]) : undefined;
     useNextFrame(snap);
     const allFeatures = model.getTrackFeatures(trackId);
     const hasPaired = useMemo(() => hasPairedReads(allFeatures), [allFeatures]);
@@ -34,7 +36,7 @@ const AlignmentConnections = observer(function ({ model, trackId, parentRef, get
         const rect = parentRef.current.getBoundingClientRect();
         yOffset = rect.top;
     }
-    return assembly ? (React.createElement("g", { fill: "none", ...getStrokeProps(theme.palette.text.disabled), "data-testid": layoutMatches.length ? `${trackId}-loaded` : trackId }, layoutMatches.map(chunk => {
+    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
@@ -45,7 +47,7 @@ const AlignmentConnections = observer(function ({ model, trackId, parentRef, get
                 console.warn('received null layout for a overlay feature');
                 return null;
             }
-            // disable rendering connections in a single level
+            // disable rendering connections in a single row
             if (!showIntraviewLinks && level1 === level2) {
                 return null;
             }
@@ -54,8 +56,25 @@ const AlignmentConnections = observer(function ({ model, trackId, parentRef, get
             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];
@@ -63,11 +82,20 @@ const AlignmentConnections = observer(function ({ model, trackId, parentRef, get
             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 = [
@@ -75,19 +103,22 @@ const AlignmentConnections = observer(function ({ model, trackId, parentRef, get
                 x1,
                 y1,
                 'C',
-                x1 + 200 * f1.get('strand') * (reversed1 ? -1 : 1),
-                y1,
-                x2 -
-                    200 *
-                        f2.get('strand') *
-                        (reversed2 ? -1 : 1) *
-                        (hasPaired ? -1 : 1),
-                y2,
+                // 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, onClick: () => {
+            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: {

package/esm/BreakpointSplitView/components/BreakpointSplitView.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { observer } from 'mobx-react';
-import { getEnv } from 'mobx-state-tree';
+import { getEnv } from '@jbrowse/core/util';
 import { makeStyles } from 'tss-react/mui';
 import BreakpointSplitViewOverlay from './BreakpointSplitViewOverlay';
 const useStyles = makeStyles()(theme => ({
@@ -14,22 +14,24 @@ const useStyles = makeStyles()(theme => ({
     content: {
         gridArea: '1/1',
     },
+    rel: {
+        position: 'relative',
+    },
 }));
 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", { style: { position: 'relative' } }, views.map((view, idx) => {
+        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 });
-            if (idx === views.length - 1) {
-                return viewComponent;
-            }
-            return [
-                viewComponent,
-                React.createElement("div", { key: `${view.id}-divider`, className: classes.viewDivider }),
-            ];
+            return idx === views.length - 1
+                ? viewComponent
+                : [
+                    viewComponent,
+                    React.createElement("div", { key: `${view.id}-divider`, className: classes.viewDivider }),
+                ];
         }))));
 });
 const BreakpointSplitView = observer(function ({ model, }) {

package/esm/BreakpointSplitView/components/BreakpointSplitViewOverlay.js

@@ -23,11 +23,12 @@ const BreakpointSplitViewOverlay = observer(function ({ model, }) {
                 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
+        // 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 }))))));
 });
 export default BreakpointSplitViewOverlay;

package/esm/BreakpointSplitView/components/Overlay.js

@@ -3,16 +3,21 @@ import { observer } from 'mobx-react';
 import AlignmentConnections from './AlignmentConnections';
 import Breakends from './Breakends';
 import Translocations from './Translocations';
+import PairedFeatures from './PairedFeatures';
 const Overlay = observer(function (props) {
     var _a, _b;
     const { model, trackId } = props;
     const tracks = model.getMatchedTracks(trackId);
+    // curvy line type arcs
     if (((_a = tracks[0]) === null || _a === void 0 ? void 0 : _a.type) === 'AlignmentsTrack') {
         return React.createElement(AlignmentConnections, { ...props });
     }
-    if (((_b = tracks[0]) === null || _b === void 0 ? void 0 : _b.type) === 'VariantTrack') {
-        return model.hasTranslocations(trackId) ? (React.createElement(Translocations, { ...props })) : (React.createElement(Breakends, { ...props }));
+    // translocation type arcs
+    else if (((_b = tracks[0]) === null || _b === void 0 ? void 0 : _b.type) === 'VariantTrack') {
+        return model.hasTranslocations(trackId) ? (React.createElement(Translocations, { ...props })) : model.hasPairedFeatures(trackId) ? (React.createElement(PairedFeatures, { ...props })) : (React.createElement(Breakends, { ...props }));
+    }
+    else {
+        return null;
     }
-    return null;
 });
 export default Overlay;

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

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