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

package/esm/BreakpointSplitView/components/Overlay.js

@@ -1,20 +1,19 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { observer } from 'mobx-react';
 import AlignmentConnections from './AlignmentConnections';
 import Breakends from './Breakends';
-import Translocations from './Translocations';
 import PairedFeatures from './PairedFeatures';
+import Translocations from './Translocations';
 const Overlay = observer(function (props) {
-    var _a, _b;
+    var _a;
     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 });
+    const type = (_a = tracks[0]) === null || _a === void 0 ? void 0 : _a.type;
+    if (type === 'AlignmentsTrack') {
+        return _jsx(AlignmentConnections, { ...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 if (type === 'VariantTrack') {
+        return model.hasTranslocations(trackId) ? (_jsx(Translocations, { ...props })) : model.hasPairedFeatures(trackId) ? (_jsx(PairedFeatures, { ...props })) : (_jsx(Breakends, { ...props }));
     }
     else {
         return null;

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

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

package/esm/BreakpointSplitView/components/PairedFeatures.js

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

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

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

package/esm/BreakpointSplitView/components/Translocations.js

@@ -1,10 +1,10 @@
-import React, { useState, useMemo } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
 import { getSession } from '@jbrowse/core/util';
 import { observer } from 'mobx-react';
 import { getSnapshot } from 'mobx-state-tree';
-// locals
 import { getMatchedTranslocationFeatures } from './util';
-import { yPos, getPxFromCoordinate, useNextFrame } from '../util';
+import { getPxFromCoordinate, useNextFrame, yPos } from '../util';
 const [LEFT] = [0, 1, 2, 3];
 function str(s) {
     if (s === '+') {
@@ -18,7 +18,7 @@ function str(s) {
     }
 }
 const Translocations = observer(function ({ model, trackId, parentRef: ref, getTrackYPosOverride, }) {
-    const { views } = model;
+    const { interactiveOverlay, views } = model;
     const session = getSession(model);
     const { assemblyManager } = session;
     const totalFeatures = model.getTrackFeatures(trackId);
@@ -35,69 +35,63 @@ const Translocations = observer(function ({ model, trackId, parentRef: ref, getT
         const rect = ref.current.getBoundingClientRect();
         yOffset = rect.top;
     }
-    // we hardcode the TRA to go to the "other view" and if there is none, we
-    // just return null here note: would need to do processing of the INFO
-    // CHR2/END and see which view could contain those coordinates to really do
-    // it properly
     if (views.length < 2) {
         return null;
     }
-    return (React.createElement("g", { fill: "none", stroke: "green", strokeWidth: 5, "data-testid": layoutMatches.length ? `${trackId}-loaded` : trackId }, layoutMatches.map(chunk => {
-        var _a, _b;
-        // we follow a path in the list of chunks, not from top to bottom,
-        // just in series following x1,y1 -> x2,y2
-        const ret = [];
-        for (const { layout: c1, feature: f1, level: level1 } of chunk) {
-            const level2 = level1 === 0 ? 1 : 0;
-            const id = f1.id();
-            if (!c1) {
-                return null;
+    return (_jsx("g", { fill: "none", stroke: "green", strokeWidth: 5, "data-testid": layoutMatches.length ? `${trackId}-loaded` : trackId, children: layoutMatches.map(chunk => {
+            var _a, _b;
+            const ret = [];
+            for (const { layout: c1, feature: f1, level: level1 } of chunk) {
+                const level2 = level1 === 0 ? 1 : 0;
+                const id = f1.id();
+                if (!c1) {
+                    return null;
+                }
+                const info = f1.get('INFO');
+                const chr2 = info.CHR2[0];
+                const end2 = info.END[0];
+                const res = (_b = (_a = info.STRANDS) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.split('');
+                const [myDirection, mateDirection] = res !== null && res !== void 0 ? res : ['.', '.'];
+                const r = getPxFromCoordinate(views[level2], chr2, end2);
+                if (r) {
+                    const c2 = [r, 0, r + 1, 0];
+                    const x1 = getPxFromCoordinate(views[level1], f1.get('refName'), c1[LEFT]);
+                    const x2 = r;
+                    const reversed1 = views[level1].pxToBp(x1).reversed;
+                    const reversed2 = views[level2].pxToBp(x2).reversed;
+                    const tracks = views.map(v => v.getTrack(trackId));
+                    const y1 = yPos(trackId, level1, views, tracks, c1, getTrackYPosOverride) -
+                        yOffset;
+                    const y2 = yPos(trackId, level2, views, tracks, c2, getTrackYPosOverride) -
+                        yOffset;
+                    const path = [
+                        'M',
+                        x1 - 20 * str(myDirection) * (reversed1 ? -1 : 1),
+                        y1,
+                        'L',
+                        x1,
+                        y1,
+                        'L',
+                        x2,
+                        y2,
+                        'L',
+                        x2 - 20 * str(mateDirection) * (reversed2 ? -1 : 1),
+                        y2,
+                    ].join(' ');
+                    ret.push(_jsx("path", { d: path, pointerEvents: interactiveOverlay ? 'auto' : undefined, strokeWidth: id === mouseoverElt ? 10 : 5, onClick: () => {
+                            var _a, _b;
+                            const featureWidget = (_a = session.addWidget) === null || _a === void 0 ? void 0 : _a.call(session, 'VariantFeatureWidget', 'variantFeature', {
+                                featureData: (totalFeatures.get(id) || { toJSON: () => { } }).toJSON(),
+                            });
+                            (_b = session.showWidget) === null || _b === void 0 ? void 0 : _b.call(session, featureWidget);
+                        }, onMouseOver: () => {
+                            setMouseoverElt(id);
+                        }, onMouseOut: () => {
+                            setMouseoverElt(undefined);
+                        } }, JSON.stringify(path)));
+                }
             }
-            const info = f1.get('INFO');
-            const chr2 = info.CHR2[0];
-            const end2 = info.END[0];
-            const res = (_b = (_a = info.STRANDS) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.split(''); // not all files have STRANDS
-            const [myDirection, mateDirection] = res !== null && res !== void 0 ? res : ['.', '.'];
-            const r = getPxFromCoordinate(views[level2], chr2, end2);
-            if (r) {
-                const c2 = [r, 0, r + 1, 0];
-                const x1 = getPxFromCoordinate(views[level1], f1.get('refName'), c1[LEFT]);
-                const x2 = r;
-                const reversed1 = views[level1].pxToBp(x1).reversed;
-                const reversed2 = views[level2].pxToBp(x2).reversed;
-                const tracks = views.map(v => v.getTrack(trackId));
-                const y1 = yPos(trackId, level1, views, tracks, c1, getTrackYPosOverride) -
-                    yOffset;
-                const y2 = yPos(trackId, level2, views, tracks, c2, getTrackYPosOverride) -
-                    yOffset;
-                const path = [
-                    'M', // move to
-                    x1 - 20 * str(myDirection) * (reversed1 ? -1 : 1),
-                    y1,
-                    'L', // line to
-                    x1,
-                    y1,
-                    'L', // line to as const
-                    x2,
-                    y2,
-                    'L', // line to
-                    x2 - 20 * str(mateDirection) * (reversed2 ? -1 : 1),
-                    y2,
-                ].join(' ');
-                ret.push(React.createElement("path", { d: path, key: JSON.stringify(path), strokeWidth: id === mouseoverElt ? 10 : 5, onClick: () => {
-                        var _a, _b;
-                        const featureWidget = (_a = session.addWidget) === null || _a === void 0 ? void 0 : _a.call(session, 'VariantFeatureWidget', 'variantFeature', {
-                            featureData: (totalFeatures.get(id) || { toJSON: () => { } }).toJSON(),
-                        });
-                        (_b = session.showWidget) === null || _b === void 0 ? void 0 : _b.call(session, featureWidget);
-                    }, onMouseOver: () => {
-                        setMouseoverElt(id);
-                    }, onMouseOut: () => {
-                        setMouseoverElt(undefined);
-                    } }));
-            }
-        }
-        return ret;
-    })));
+            return ret;
+        }) }));
 });
 export default Translocations;

package/esm/BreakpointSplitView/components/getOrientationColor.js

@@ -1,6 +1,4 @@
 import { alpha } from '@mui/material';
-// orientation definitions from igv.js, see also
-// https://software.broadinstitute.org/software/igv/interpreting_pair_orientations
 export const orientationTypes = {
     fr: {
         F1R2: 'LR',
@@ -39,12 +37,6 @@ export const pairMap = {
     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
 export const strokeColor = {
     color_fwd_strand_not_proper: alpha('#CA6767', 0.8),
     color_rev_strand_not_proper: alpha('#7272AA', 0.8),

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

@@ -1,4 +1,4 @@
-import { Feature } from '@jbrowse/core/util';
+import type { Feature } from '@jbrowse/core/util';
 export declare function getBadlyPairedAlignments(features: Map<string, Feature>): Feature[][];
 export declare function getMatchedAlignmentFeatures(features: Map<string, Feature>): Feature[][];
 export declare function hasPairedReads(features: Map<string, Feature>): boolean;

package/esm/BreakpointSplitView/components/util.js

@@ -1,17 +1,23 @@
-import { notEmpty } from '@jbrowse/core/util';
 import { parseBreakend } from '@gmod/vcf';
-// this finds candidate alignment features, aimed at plotting split reads from
-// BAM/CRAM files
+import { assembleLocStringFast, notEmpty } from '@jbrowse/core/util';
 export function getBadlyPairedAlignments(features) {
     const candidates = new Map();
     const alreadySeen = new Set();
-    // this finds candidate features that share the same name
+    const alreadyPairedWithSamePosition = new Set();
     for (const feature of features.values()) {
         const flags = feature.get('flags');
         const id = feature.id();
+        const supp = assembleLocStringFast({
+            refName: feature.get('refName'),
+            start: feature.get('start'),
+            end: feature.get('end'),
+        });
         const unmapped = flags & 4;
         const correctlyPaired = flags & 2;
-        if (!alreadySeen.has(id) && !correctlyPaired && !unmapped) {
+        if (!alreadySeen.has(id) &&
+            !alreadyPairedWithSamePosition.has(supp) &&
+            !correctlyPaired &&
+            !unmapped) {
             const n = feature.get('name');
             let val = candidates.get(n);
             if (!val) {
@@ -21,16 +27,14 @@ export function getBadlyPairedAlignments(features) {
             val.push(feature);
         }
         alreadySeen.add(feature.id());
+        alreadyPairedWithSamePosition.add(supp);
     }
     return [...candidates.values()].filter(v => v.length > 1);
 }
-// this finds candidate alignment features, aimed at plotting split reads from
-// BAM/CRAM files
 export function getMatchedAlignmentFeatures(features) {
     var _a;
     const candidates = new Map();
     const alreadySeen = new Set();
-    // this finds candidate features that share the same name
     for (const feature of features.values()) {
         const id = feature.id();
         const unmapped = feature.get('flags') & 4;
@@ -66,8 +70,6 @@ export function findMatchingAlt(feat1, feat2) {
     }
     return undefined;
 }
-// Returns paired BND features across multiple views by inspecting the ALT
-// field to get exact coordinate matches
 export function getMatchedBreakendFeatures(feats) {
     const candidates = new Map();
     const alreadySeen = new Set();
@@ -92,7 +94,6 @@ export function getMatchedBreakendFeatures(feats) {
     }
     return [...candidates.values()].filter(v => v.length > 1);
 }
-// Getting "matched" TRA means just return all TRA
 export function getMatchedTranslocationFeatures(feats) {
     const ret = [];
     const alreadySeen = new Set();
@@ -104,7 +105,6 @@ export function getMatchedTranslocationFeatures(feats) {
     }
     return ret;
 }
-// Getting "matched" TRA means just return all TRA
 export function getMatchedPairedFeatures(feats) {
     const candidates = new Map();
     const alreadySeen = new Set();

package/esm/BreakpointSplitView/index.d.ts

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

package/esm/BreakpointSplitView/index.js

@@ -1,10 +1,9 @@
 import { lazy } from 'react';
-// locals
-import BreakpointSplitView from './BreakpointSplitView';
+import { ViewType } from '@jbrowse/core/pluggableElementTypes';
 import stateModelFactory from './model';
 export default function BreakpointSplitViewF(pluginManager) {
     pluginManager.addViewType(() => {
-        return new BreakpointSplitView({
+        return new ViewType({
             name: 'BreakpointSplitView',
             displayName: 'Breakpoint split view',
             stateModel: stateModelFactory(pluginManager),