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

package/dist/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/dist/BreakpointSplitView/BreakpointSplitView.js

@@ -7,49 +7,29 @@ const util_1 = require("@jbrowse/core/util");
 const ViewType_1 = __importDefault(require("@jbrowse/core/pluggableElementTypes/ViewType"));
 const vcf_1 = require("@gmod/vcf");
 class BreakpointSplitViewType extends ViewType_1.default {
-    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 ? (0, vcf_1.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 } = (0, util_1.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 {
@@ -58,16 +38,76 @@ class BreakpointSplitViewType extends ViewType_1.default {
         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 = (0, util_1.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 = (0, util_1.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: [
@@ -87,7 +127,6 @@ class BreakpointSplitViewType extends ViewType_1.default {
                 },
             ],
             displayName: `${feature.get('name') || feature.get('id') || 'breakend'} split detail`,
-            featureData: undefined,
         };
     }
 }

package/dist/BreakpointSplitView/components/AlignmentConnections.js

@@ -31,6 +31,7 @@ const util_1 = require("@jbrowse/core/util");
 // locals
 const util_2 = require("./util");
 const util_3 = require("../util");
+const getOrientationColor_1 = require("./getOrientationColor");
 const [LEFT, , RIGHT] = [0, 1, 2, 3];
 const AlignmentConnections = (0, mobx_react_1.observer)(function ({ model, trackId, parentRef, getTrackYPosOverride, }) {
     const { views, showIntraviewLinks } = model;
@@ -38,7 +39,8 @@ const AlignmentConnections = (0, mobx_react_1.observer)(function ({ model, track
     const session = (0, util_1.getSession)(model);
     const snap = (0, mobx_state_tree_1.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;
     (0, util_3.useNextFrame)(snap);
     const allFeatures = model.getTrackFeatures(trackId);
     const hasPaired = (0, react_1.useMemo)(() => (0, util_2.hasPairedReads)(allFeatures), [allFeatures]);
@@ -59,7 +61,7 @@ const AlignmentConnections = (0, mobx_react_1.observer)(function ({ model, track
         const rect = parentRef.current.getBoundingClientRect();
         yOffset = rect.top;
     }
-    return assembly ? (react_1.default.createElement("g", { fill: "none", ...(0, util_1.getStrokeProps)(theme.palette.text.disabled), "data-testid": layoutMatches.length ? `${trackId}-loaded` : trackId }, layoutMatches.map(chunk => {
+    return assembly ? (react_1.default.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
@@ -70,7 +72,7 @@ const AlignmentConnections = (0, mobx_react_1.observer)(function ({ model, track
                 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;
             }
@@ -79,8 +81,25 @@ const AlignmentConnections = (0, mobx_react_1.observer)(function ({ model, track
             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 = (0, getOrientationColor_1.getPairedOrientationColor)(r);
+                    isAbnormal = (0, getOrientationColor_1.isAbnormalOrientation)(r);
+                }
+                else {
+                    orientationColor = (0, getOrientationColor_1.getLongReadOrientationColorOrDefault)(s1, s2);
+                    isAbnormal = (0, getOrientationColor_1.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];
@@ -88,11 +107,20 @@ const AlignmentConnections = (0, mobx_react_1.observer)(function ({ model, track
             const x2 = (0, util_3.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 = (0, util_3.yPos)(trackId, level1, views, tracks, c1, getTrackYPosOverride) -
                 yOffset;
             const y2 = (0, util_3.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 = (0, util_3.heightFromSpecificLevel)(views, trackId, level1, getTrackYPosOverride);
             // possible todo: use totalCurveHeight to possibly make alternative
             // squiggle if the S is too small
             const path = [
@@ -100,19 +128,22 @@ const AlignmentConnections = (0, mobx_react_1.observer)(function ({ model, track
                 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_1.default.createElement("path", { d: path, key: id, "data-testid": "r1", strokeWidth: mouseoverElt === id ? 5 : 1, onClick: () => {
+            ret.push(react_1.default.createElement("path", { d: path, key: id, "data-testid": "r1", strokeWidth: mouseoverElt === id ? 5 : 1, ...(0, util_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/dist/BreakpointSplitView/components/BreakpointSplitView.js

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const mobx_react_1 = require("mobx-react");
-const mobx_state_tree_1 = require("mobx-state-tree");
+const util_1 = require("@jbrowse/core/util");
 const mui_1 = require("tss-react/mui");
 const BreakpointSplitViewOverlay_1 = __importDefault(require("./BreakpointSplitViewOverlay"));
 const useStyles = (0, mui_1.makeStyles)()(theme => ({
@@ -19,22 +19,24 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
     content: {
         gridArea: '1/1',
     },
+    rel: {
+        position: 'relative',
+    },
 }));
 const BreakpointSplitViewLevels = (0, mobx_react_1.observer)(function ({ model, }) {
     const { classes } = useStyles();
     const { views } = model;
-    const { pluginManager } = (0, mobx_state_tree_1.getEnv)(model);
+    const { pluginManager } = (0, util_1.getEnv)(model);
     return (react_1.default.createElement("div", { className: classes.content },
-        react_1.default.createElement("div", { style: { position: 'relative' } }, views.map((view, idx) => {
+        react_1.default.createElement("div", { className: classes.rel }, views.map((view, idx) => {
             const { ReactComponent } = pluginManager.getViewType(view.type);
             const viewComponent = react_1.default.createElement(ReactComponent, { key: view.id, model: view });
-            if (idx === views.length - 1) {
-                return viewComponent;
-            }
-            return [
-                viewComponent,
-                react_1.default.createElement("div", { key: `${view.id}-divider`, className: classes.viewDivider }),
-            ];
+            return idx === views.length - 1
+                ? viewComponent
+                : [
+                    viewComponent,
+                    react_1.default.createElement("div", { key: `${view.id}-divider`, className: classes.viewDivider }),
+                ];
         }))));
 });
 const BreakpointSplitView = (0, mobx_react_1.observer)(function ({ model, }) {

package/dist/BreakpointSplitView/components/BreakpointSplitViewOverlay.js

@@ -51,11 +51,12 @@ const BreakpointSplitViewOverlay = (0, mobx_react_1.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_1.default.createElement(Overlay_1.default, { parentRef: ref, key: track.configuration.trackId, model: model, trackId: track.configuration.trackId }))))));
 });
 exports.default = BreakpointSplitViewOverlay;

package/dist/BreakpointSplitView/components/Overlay.js

@@ -8,16 +8,21 @@ const mobx_react_1 = require("mobx-react");
 const AlignmentConnections_1 = __importDefault(require("./AlignmentConnections"));
 const Breakends_1 = __importDefault(require("./Breakends"));
 const Translocations_1 = __importDefault(require("./Translocations"));
+const PairedFeatures_1 = __importDefault(require("./PairedFeatures"));
 const Overlay = (0, mobx_react_1.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_1.default.createElement(AlignmentConnections_1.default, { ...props });
     }
-    if (((_b = tracks[0]) === null || _b === void 0 ? void 0 : _b.type) === 'VariantTrack') {
-        return model.hasTranslocations(trackId) ? (react_1.default.createElement(Translocations_1.default, { ...props })) : (react_1.default.createElement(Breakends_1.default, { ...props }));
+    // translocation type arcs
+    else if (((_b = tracks[0]) === null || _b === void 0 ? void 0 : _b.type) === 'VariantTrack') {
+        return model.hasTranslocations(trackId) ? (react_1.default.createElement(Translocations_1.default, { ...props })) : model.hasPairedFeatures(trackId) ? (react_1.default.createElement(PairedFeatures_1.default, { ...props })) : (react_1.default.createElement(Breakends_1.default, { ...props }));
+    }
+    else {
+        return null;
     }
-    return null;
 });
 exports.default = Overlay;

package/dist/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;

package/dist/BreakpointSplitView/components/PairedFeatures.js

@@ -0,0 +1,100 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const util_1 = require("@jbrowse/core/util");
+const mobx_react_1 = require("mobx-react");
+const mobx_state_tree_1 = require("mobx-state-tree");
+// locals
+const util_2 = require("./util");
+const util_3 = require("../util");
+const [LEFT] = [0, 1, 2, 3];
+const PairedFeatures = (0, mobx_react_1.observer)(function ({ model, trackId, parentRef: ref, getTrackYPosOverride, }) {
+    const { views } = model;
+    const session = (0, util_1.getSession)(model);
+    const { assemblyManager } = session;
+    const totalFeatures = model.getTrackFeatures(trackId);
+    const layoutMatches = (0, react_1.useMemo)(() => model.getMatchedFeaturesInLayout(trackId, (0, util_2.getMatchedPairedFeatures)(totalFeatures)), [totalFeatures, trackId, model]);
+    const [mouseoverElt, setMouseoverElt] = (0, react_1.useState)();
+    const snap = (0, mobx_state_tree_1.getSnapshot)(model);
+    (0, util_3.useNextFrame)(snap);
+    const assembly = assemblyManager.get(views[0].assemblyNames[0]);
+    if (!assembly) {
+        return null;
+    }
+    let yoff = 0;
+    if (ref.current) {
+        const rect = ref.current.getBoundingClientRect();
+        yoff = rect.top;
+    }
+    return (react_1.default.createElement("g", { stroke: "green", strokeWidth: 5, fill: "none", "data-testid": layoutMatches.length ? `${trackId}-loaded` : trackId }, layoutMatches.map(chunk => {
+        const ret = [];
+        // we follow a path in the list of chunks, not from top to bottom, just
+        // in series following x1,y1 -> x2,y2
+        for (let i = 0; i < chunk.length - 1; i += 1) {
+            const { layout: c1, feature: f1, level: level1 } = chunk[i];
+            const { layout: c2, feature: f2, level: level2 } = chunk[i + 1];
+            const id = f1.id();
+            if (!c1 || !c2) {
+                return null;
+            }
+            const f1origref = f1.get('refName');
+            const f2origref = f2.get('refName');
+            const f1ref = assembly.getCanonicalRefName(f1origref);
+            const f2ref = assembly.getCanonicalRefName(f2origref);
+            if (!f1ref || !f2ref) {
+                throw new Error(`unable to find ref for ${f1ref || f2ref}`);
+            }
+            const x1 = (0, util_3.getPxFromCoordinate)(views[level1], f1ref, c1[LEFT]);
+            const x2 = (0, util_3.getPxFromCoordinate)(views[level2], f2ref, c2[LEFT]);
+            const tracks = views.map(v => v.getTrack(trackId));
+            const y1 = (0, util_3.yPos)(trackId, level1, views, tracks, c1, getTrackYPosOverride) -
+                yoff;
+            const y2 = (0, util_3.yPos)(trackId, level2, views, tracks, c2, getTrackYPosOverride) -
+                yoff;
+            const path = [
+                'M', // move to
+                x1,
+                y1,
+                'L', // line to
+                x2,
+                y2,
+            ].join(' ');
+            ret.push(react_1.default.createElement("path", { d: path, "data-testid": "r2", key: JSON.stringify(path), strokeWidth: id === mouseoverElt ? 10 : 5, onClick: () => {
+                    var _a, _b, _c;
+                    const featureWidget = (_a = session.addWidget) === null || _a === void 0 ? void 0 : _a.call(session, 'VariantFeatureWidget', 'variantFeature', {
+                        featureData: (_b = totalFeatures.get(id)) === null || _b === void 0 ? void 0 : _b.toJSON(),
+                    });
+                    (_c = session.showWidget) === null || _c === void 0 ? void 0 : _c.call(session, featureWidget);
+                }, onMouseOver: () => {
+                    setMouseoverElt(id);
+                }, onMouseOut: () => {
+                    setMouseoverElt(undefined);
+                } }));
+        }
+        return ret;
+    })));
+});
+exports.default = PairedFeatures;

package/dist/BreakpointSplitView/components/getOrientationColor.d.ts

@@ -0,0 +1,41 @@
+export declare const orientationTypes: {
+    fr: Record<string, string>;
+    rf: Record<string, string>;
+    ff: Record<string, string>;
+};
+export declare const pairMap: {
+    readonly LR: "color_pair_lr";
+    readonly LL: "color_pair_ll";
+    readonly RR: "color_pair_rr";
+    readonly RL: "color_pair_rl";
+};
+export declare const strokeColor: {
+    color_fwd_strand_not_proper: string;
+    color_rev_strand_not_proper: string;
+    color_fwd_strand: string;
+    color_rev_strand: string;
+    color_fwd_missing_mate: string;
+    color_rev_missing_mate: string;
+    color_fwd_diff_chr: string;
+    color_rev_diff_chr: string;
+    color_pair_lr: string;
+    color_pair_rr: string;
+    color_pair_rl: string;
+    color_pair_ll: string;
+    color_nostrand: string;
+    color_interchrom: string;
+    color_longinsert: string;
+    color_shortinsert: string;
+    color_unknown: string;
+};
+export declare function getPairedOrientationColorOrDefault(f: {
+    pair_orientation?: string;
+}): string | undefined;
+export declare function getLongReadOrientationColorOrDefault(s1: number, s2: number): string;
+export declare function getLongReadOrientationAbnormal(s1: number, s2: number): boolean;
+export declare function isAbnormalOrientation(f: {
+    pair_orientation?: string;
+}): boolean;
+export declare function getPairedOrientationColor(f: {
+    pair_orientation?: string;
+}): string;

package/dist/BreakpointSplitView/components/getOrientationColor.js

@@ -0,0 +1,111 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.strokeColor = exports.pairMap = exports.orientationTypes = void 0;
+exports.getPairedOrientationColorOrDefault = getPairedOrientationColorOrDefault;
+exports.getLongReadOrientationColorOrDefault = getLongReadOrientationColorOrDefault;
+exports.getLongReadOrientationAbnormal = getLongReadOrientationAbnormal;
+exports.isAbnormalOrientation = isAbnormalOrientation;
+exports.getPairedOrientationColor = getPairedOrientationColor;
+const material_1 = require("@mui/material");
+// orientation definitions from igv.js, see also
+// https://software.broadinstitute.org/software/igv/interpreting_pair_orientations
+exports.orientationTypes = {
+    fr: {
+        F1R2: 'LR',
+        F2R1: 'LR',
+        F1F2: 'LL',
+        F2F1: 'LL',
+        R1R2: 'RR',
+        R2R1: 'RR',
+        R1F2: 'RL',
+        R2F1: 'RL',
+    },
+    rf: {
+        R1F2: 'LR',
+        R2F1: 'LR',
+        R1R2: 'LL',
+        R2R1: 'LL',
+        F1F2: 'RR',
+        F2F1: 'RR',
+        F1R2: 'RL',
+        F2R1: 'RL',
+    },
+    ff: {
+        F2F1: 'LR',
+        R1R2: 'LR',
+        F2R1: 'LL',
+        R1F2: 'LL',
+        R2F1: 'RR',
+        F1R2: 'RR',
+        R2R1: 'RL',
+        F1F2: 'RL',
+    },
+};
+exports.pairMap = {
+    LR: 'color_pair_lr',
+    LL: 'color_pair_ll',
+    RR: 'color_pair_rr',
+    RL: 'color_pair_rl',
+};
+// manually calculated by running
+// const color = require('color')
+// Object.fromEntries(Object.entries(fillColor).map(([key,val])=>{
+//   return [key, color(val).darken('0.3').hex()]
+// }))
+// this avoids (expensive) use of Color module at runtime
+exports.strokeColor = {
+    color_fwd_strand_not_proper: (0, material_1.alpha)('#CA6767', 0.8),
+    color_rev_strand_not_proper: (0, material_1.alpha)('#7272AA', 0.8),
+    color_fwd_strand: (0, material_1.alpha)('#DC2A2A', 0.8),
+    color_rev_strand: (0, material_1.alpha)('#4141BA', 0.8),
+    color_fwd_missing_mate: (0, material_1.alpha)('#921111', 0.8),
+    color_rev_missing_mate: (0, material_1.alpha)('#111192', 0.8),
+    color_fwd_diff_chr: (0, material_1.alpha)('#000000', 0.8),
+    color_rev_diff_chr: (0, material_1.alpha)('#696969', 0.8),
+    color_pair_lr: (0, material_1.alpha)('#8C8C8C', 0.8),
+    color_pair_rr: (0, material_1.alpha)('#00005A', 0.8),
+    color_pair_rl: (0, material_1.alpha)('#005A5A', 0.8),
+    color_pair_ll: (0, material_1.alpha)('#005A00', 0.8),
+    color_nostrand: (0, material_1.alpha)('#8C8C8C', 0.8),
+    color_interchrom: (0, material_1.alpha)('#5A005A', 0.8),
+    color_longinsert: (0, material_1.alpha)('#B30000', 0.8),
+    color_shortinsert: (0, material_1.alpha)('#FF3A5C', 0.8),
+    color_unknown: (0, material_1.alpha)('#555', 0.8),
+};
+const defaultColor = exports.strokeColor.color_unknown;
+function getPairedOrientationColorOrDefault(f) {
+    const type = exports.orientationTypes.fr;
+    const r = type[f.pair_orientation || ''];
+    const type2 = exports.pairMap[r];
+    return r === 'LR' ? undefined : exports.strokeColor[type2];
+}
+function getLongReadOrientationColorOrDefault(s1, s2) {
+    if (s1 === -1 && s2 === 1) {
+        return exports.strokeColor.color_pair_rr;
+    }
+    else if (s1 === 1 && s2 === -1) {
+        return exports.strokeColor.color_pair_ll;
+    }
+    else {
+        return exports.strokeColor.color_unknown;
+    }
+}
+function getLongReadOrientationAbnormal(s1, s2) {
+    if (s1 === -1 && s2 === 1) {
+        return true;
+    }
+    else if (s1 === 1 && s2 === -1) {
+        return true;
+    }
+    else {
+        return false;
+    }
+}
+function isAbnormalOrientation(f) {
+    const type = exports.orientationTypes.fr;
+    const r = type[f.pair_orientation || ''];
+    return r !== 'LR';
+}
+function getPairedOrientationColor(f) {
+    return getPairedOrientationColorOrDefault(f) || defaultColor;
+}

package/dist/BreakpointSplitView/components/util.d.ts

@@ -5,3 +5,4 @@ export declare function hasPairedReads(features: Map<string, Feature>): boolean;
 export declare function findMatchingAlt(feat1: Feature, feat2: Feature): import("@gmod/vcf").Breakend | undefined;
 export declare function getMatchedBreakendFeatures(feats: Map<string, Feature>): Feature[][];
 export declare function getMatchedTranslocationFeatures(feats: Map<string, Feature>): Feature[][];
+export declare function getMatchedPairedFeatures(feats: Map<string, Feature>): Feature[][];