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

package/esm/BreakpointSplitView/components/PairedFeatures.js

@@ -0,0 +1,75 @@
+import React, { useState, useMemo } 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';
+const [LEFT] = [0, 1, 2, 3];
+const PairedFeatures = observer(function ({ model, trackId, parentRef: ref, getTrackYPosOverride, }) {
+    const { views } = model;
+    const session = getSession(model);
+    const { assemblyManager } = session;
+    const totalFeatures = model.getTrackFeatures(trackId);
+    const layoutMatches = useMemo(() => model.getMatchedFeaturesInLayout(trackId, getMatchedPairedFeatures(totalFeatures)), [totalFeatures, trackId, model]);
+    const [mouseoverElt, setMouseoverElt] = useState();
+    const snap = getSnapshot(model);
+    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.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 = 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;
+    })));
+});
+export default PairedFeatures;

package/esm/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/esm/BreakpointSplitView/components/getOrientationColor.js

@@ -0,0 +1,103 @@
+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',
+        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',
+    },
+};
+export const 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
+export const strokeColor = {
+    color_fwd_strand_not_proper: alpha('#CA6767', 0.8),
+    color_rev_strand_not_proper: alpha('#7272AA', 0.8),
+    color_fwd_strand: alpha('#DC2A2A', 0.8),
+    color_rev_strand: alpha('#4141BA', 0.8),
+    color_fwd_missing_mate: alpha('#921111', 0.8),
+    color_rev_missing_mate: alpha('#111192', 0.8),
+    color_fwd_diff_chr: alpha('#000000', 0.8),
+    color_rev_diff_chr: alpha('#696969', 0.8),
+    color_pair_lr: alpha('#8C8C8C', 0.8),
+    color_pair_rr: alpha('#00005A', 0.8),
+    color_pair_rl: alpha('#005A5A', 0.8),
+    color_pair_ll: alpha('#005A00', 0.8),
+    color_nostrand: alpha('#8C8C8C', 0.8),
+    color_interchrom: alpha('#5A005A', 0.8),
+    color_longinsert: alpha('#B30000', 0.8),
+    color_shortinsert: alpha('#FF3A5C', 0.8),
+    color_unknown: alpha('#555', 0.8),
+};
+const defaultColor = strokeColor.color_unknown;
+export function getPairedOrientationColorOrDefault(f) {
+    const type = orientationTypes.fr;
+    const r = type[f.pair_orientation || ''];
+    const type2 = pairMap[r];
+    return r === 'LR' ? undefined : strokeColor[type2];
+}
+export function getLongReadOrientationColorOrDefault(s1, s2) {
+    if (s1 === -1 && s2 === 1) {
+        return strokeColor.color_pair_rr;
+    }
+    else if (s1 === 1 && s2 === -1) {
+        return strokeColor.color_pair_ll;
+    }
+    else {
+        return strokeColor.color_unknown;
+    }
+}
+export function getLongReadOrientationAbnormal(s1, s2) {
+    if (s1 === -1 && s2 === 1) {
+        return true;
+    }
+    else if (s1 === 1 && s2 === -1) {
+        return true;
+    }
+    else {
+        return false;
+    }
+}
+export function isAbnormalOrientation(f) {
+    const type = orientationTypes.fr;
+    const r = type[f.pair_orientation || ''];
+    return r !== 'LR';
+}
+export function getPairedOrientationColor(f) {
+    return getPairedOrientationColorOrDefault(f) || defaultColor;
+}

package/esm/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[][];

package/esm/BreakpointSplitView/components/util.js

@@ -107,3 +107,28 @@ 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();
+    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/esm/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/esm/BreakpointSplitView/model.js

@@ -17,9 +17,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 } = 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}"`)
@@ -90,10 +94,13 @@ export default 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 intersect(elt => elt.configuration.trackId, ...self.views.map(view => view.tracks));
+            return self.views.length === 1
+                ? self.views[0].tracks
+                : intersect(elt => elt.configuration.trackId, ...self.views.map(view => view.tracks));
         },
         /**
          * #method
@@ -106,13 +113,19 @@ export default 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
@@ -210,6 +223,12 @@ export default function stateModelFactory(pluginManager) {
         setMatchedTrackFeatures(obj) {
             self.matchedTrackFeatures = obj;
         },
+        /**
+         * #action
+         */
+        reverseViewOrder() {
+            self.views.reverse();
+        },
     }))
         .actions(self => ({
         afterAttach() {
@@ -236,7 +255,16 @@ export default 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/esm/BreakpointSplitView/svgcomponents/SVGBreakpointSplitView.js

@@ -32,10 +32,7 @@ export async function renderToSvg(model, opts) {
     const trackLabelMaxLen = getTrackNameMaxLen(views, fontSize, session) + 40;
     const trackLabelOffset = trackLabels === 'left' ? trackLabelMaxLen : 0;
     const textOffset = trackLabels === 'offset' ? textHeight : 0;
-    const trackOffsets = [
-        getTrackOffsets(views[0], textOffset, fontSize + offset),
-        getTrackOffsets(views[1], textOffset, fontSize + heights[0] + offset),
-    ];
+    const trackOffsets = views.map((view, idx) => getTrackOffsets(view, textOffset, fontSize + (idx > 0 ? heights[idx - 1] : 0) + offset));
     const w = width + trackLabelOffset;
     const t = createJBrowseTheme(theme);
     // the xlink namespace is used for rendering <image> tag
@@ -43,16 +40,16 @@ export async function renderToSvg(model, opts) {
         React.createElement(Wrapper, null,
             React.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.createElement(SVGBackground, { width: w, height: totalHeightSvg, shift: shift }),
-                React.createElement("g", { transform: `translate(${shift} ${fontSize})` },
+                views[0] ? (React.createElement("g", { transform: `translate(${shift} ${fontSize})` },
                     React.createElement("g", { transform: `translate(${trackLabelOffset})` },
                         React.createElement("text", { x: 0, fontSize: fontSize, fill: t.palette.text.primary }, views[0].assemblyNames.join(', ')),
                         React.createElement(SVGRuler, { model: displayResults[0].view, fontSize: fontSize })),
-                    React.createElement(SVGTracks, { textHeight: textHeight, trackLabels: trackLabels, fontSize: fontSize, model: displayResults[0].view, displayResults: displayResults[0].data, offset: offset, trackLabelOffset: trackLabelOffset })),
-                React.createElement("g", { transform: `translate(${shift} ${fontSize + heights[0]})` },
+                    React.createElement(SVGTracks, { textHeight: textHeight, trackLabels: trackLabels, fontSize: fontSize, model: displayResults[0].view, displayResults: displayResults[0].data, offset: offset, trackLabelOffset: trackLabelOffset }))) : null,
+                views[1] ? (React.createElement("g", { transform: `translate(${shift} ${fontSize + heights[0]})` },
                     React.createElement("g", { transform: `translate(${trackLabelOffset})` },
                         React.createElement("text", { x: 0, fontSize: fontSize, fill: t.palette.text.primary }, views[1].assemblyNames.join(', ')),
                         React.createElement(SVGRuler, { model: displayResults[1].view, fontSize: fontSize })),
-                    React.createElement(SVGTracks, { textHeight: textHeight, trackLabels: trackLabels, fontSize: fontSize, model: displayResults[1].view, displayResults: displayResults[1].data, offset: offset, trackLabelOffset: trackLabelOffset })),
+                    React.createElement(SVGTracks, { textHeight: textHeight, trackLabels: trackLabels, fontSize: fontSize, model: displayResults[1].view, displayResults: displayResults[1].data, offset: offset, trackLabelOffset: trackLabelOffset }))) : null,
                 React.createElement("defs", null,
                     React.createElement("clipPath", { id: "clip-bsv" },
                         React.createElement("rect", { x: 0, y: 0, width: width, height: totalHeightSvg }))),

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

@@ -4,7 +4,7 @@ const [, TOP, , BOTTOM] = [0, 1, 2, 3];
 function cheight(chunk) {
     return chunk[BOTTOM] - chunk[TOP];
 }
-function heightFromSpecificLevel(views, trackId, level, getYPosOverride) {
+export function heightFromSpecificLevel(views, trackId, level, getYPosOverride) {
     var _a;
     return getYPosOverride
         ? getYPosOverride(trackId, level)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-breakpoint-split-view",
-  "version": "2.15.0",
+  "version": "2.15.2",
   "description": "JBrowse 2 breakpoint detail split view",
   "keywords": [
     "jbrowse",
@@ -58,5 +58,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "87eeb1fbf8311dbf88d5e75b5a265f03beffdda8"
+  "gitHead": "8a58cefbfe39af4c97bcb6ead354d72c9fef9224"
 }