@jbrowse/plugin-breakpoint-split-view 2.16.1 → 2.18.0

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,23 +27,18 @@ export function getBadlyPairedAlignments(features) {
             val.push(feature);
         }
         alreadySeen.add(feature.id());
+        alreadyPairedWithSamePosition.add(supp);
     }
     return [...candidates.values()].filter(v => v.length > 1);
 }
-function getTag(f, tag) {
-    const tags = f.get('tags');
-    return tags ? tags[tag] : f.get(tag);
-}
-// 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;
-        const hasSA = !!getTag(feature, 'SA');
+        const hasSA = !!((_a = feature.get('tags')) === null || _a === void 0 ? void 0 : _a.SA);
         if (!alreadySeen.has(id) && !unmapped && hasSA) {
             const n = feature.get('name');
             let val = candidates.get(n);
@@ -69,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();
@@ -95,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();
@@ -107,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),

package/esm/BreakpointSplitView/model.d.ts

@@ -1,8 +1,9 @@
-import React from 'react';
-import { Instance } from 'mobx-state-tree';
-import { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view';
-import PluginManager from '@jbrowse/core/PluginManager';
-import { Feature } from '@jbrowse/core/util';
+import type React from 'react';
+import type PluginManager from '@jbrowse/core/PluginManager';
+import type { Feature } from '@jbrowse/core/util';
+import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view';
+import type { Instance } from 'mobx-state-tree';
+export declare function getClip(cigar: string, strand: number): number;
 export interface ExportSvgOptions {
     rasterizeLayers?: boolean;
     filename?: string;
@@ -26,11 +27,6 @@ export interface Breakend {
     MatePosition: string;
 }
 export type LayoutRecord = [number, number, number, number];
-/**
- * #stateModel BreakpointSplitView
- * extends
- * - [BaseViewModel](../baseviewmodel)
- */
 export default function stateModelFactory(pluginManager: PluginManager): import("mobx-state-tree").IModelType<{
     id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
     displayName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
@@ -93,6 +89,7 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
         scaleBarDisplayPrefix(): string | undefined;
         MiniControlsComponent(): React.FC<any>;
         HeaderComponent(): React.FC<any>;
+        readonly assembliesNotFound: string | undefined;
         readonly assemblyErrors: string;
         readonly assembliesInitialized: boolean;
         readonly initialized: boolean;
@@ -274,88 +271,35 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
     width: number;
     matchedTrackFeatures: Record<string, Feature[][]>;
 } & {
-    /**
-     * #method
-     * creates an svg export and save using FileSaver
-     */
     exportSvg(opts?: ExportSvgOptions): Promise<void>;
 } & {
-    /**
-     * #getter
-     * 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: (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
-     */
     getMatchedTracks(trackConfigId: string): any[];
-    /**
-     * #method
-     * 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
-     * multiple views
-     */
     getTrackFeatures(trackConfigId: string): Map<string, Feature>;
-    /**
-     * #method
-     */
     getMatchedFeaturesInLayout(trackConfigId: string, features: Feature[][]): {
         feature: Feature;
         layout: LayoutRecord | undefined;
         level: number;
+        clipPos: number;
     }[][];
 } & {
     afterAttach(): void;
     onSubviewAction(actionName: string, path: string, args?: unknown[]): void;
-    /**
-     * #action
-     */
     setWidth(newWidth: number): void;
-    /**
-     * #action
-     */
     removeView(view: LGV): void;
-    /**
-     * #action
-     */
     toggleInteract(): void;
-    /**
-     * #action
-     */
     toggleIntraviewLinks(): void;
-    /**
-     * #action
-     */
     toggleLinkViews(): void;
-    /**
-     * #action
-     */
     setMatchedTrackFeatures(obj: Record<string, Feature[][]>): void;
-    /**
-     * #action
-     */
     reverseViewOrder(): void;
 } & {
     afterAttach(): void;
-    /**
-     * #method
-     */
     menuItems(): ({
         label: string;
         subMenu: import("@jbrowse/core/ui").MenuItem[];

package/esm/BreakpointSplitView/model.js

@@ -1,17 +1,21 @@
 import { lazy } from 'react';
-import { types, onAction, addDisposer, getPath, } from 'mobx-state-tree';
-import { autorun } from 'mobx';
-import { saveAs } from 'file-saver';
+import { getConf } from '@jbrowse/core/configuration';
 import { BaseViewModel } from '@jbrowse/core/pluggableElementTypes/models';
 import { getSession, notEmpty } from '@jbrowse/core/util';
-import { getConf } from '@jbrowse/core/configuration';
-// icons
-import PhotoCamera from '@mui/icons-material/PhotoCamera';
 import LinkIcon from '@mui/icons-material/Link';
-// locals
+import PhotoCamera from '@mui/icons-material/PhotoCamera';
+import { saveAs } from 'file-saver';
+import { autorun } from 'mobx';
+import { addDisposer, getPath, onAction, types } from 'mobx-state-tree';
 import { intersect } from './util';
-// lazies
 const ExportSvgDialog = lazy(() => import('./components/ExportSvgDialog'));
+const startClip = new RegExp(/(\d+)[SH]$/);
+const endClip = new RegExp(/^(\d+)([SH])/);
+export function getClip(cigar, strand) {
+    return strand === -1
+        ? +(startClip.exec(cigar) || [])[1] || 0
+        : +(endClip.exec(cigar) || [])[1] || 0;
+}
 function calc(track, f) {
     var _a, _b;
     return (_b = (_a = track.displays[0]).searchFeatureByID) === null || _b === void 0 ? void 0 : _b.call(_a, f.id());
@@ -26,7 +30,7 @@ async function getBlockFeatures(model, track) {
     }
     const assembly = await assemblyManager.waitForAssembly(assemblyName);
     if (!assembly) {
-        return undefined; // throw new Error(`assembly not found: "${assemblyName}"`)
+        return undefined;
     }
     const sessionId = track.configuration.trackId;
     return Promise.all(views.map(async (view) => (await rpcManager.call(sessionId, 'CoreGetFeatures', {
@@ -35,43 +39,17 @@ async function getBlockFeatures(model, track) {
         regions: view.staticBlocks.contentBlocks,
     })).flat()));
 }
-/**
- * #stateModel BreakpointSplitView
- * extends
- * - [BaseViewModel](../baseviewmodel)
- */
 export default function stateModelFactory(pluginManager) {
     const minHeight = 40;
     const defaultHeight = 400;
     return types
         .compose('BreakpointSplitView', BaseViewModel, types.model({
-        /**
-         * #property
-         */
         type: types.literal('BreakpointSplitView'),
-        /**
-         * #property
-         */
         height: types.optional(types.refinement('viewHeight', types.number, (n) => n >= minHeight), defaultHeight),
-        /**
-         * #property
-         */
         trackSelectorType: 'hierarchical',
-        /**
-         * #property
-         */
         showIntraviewLinks: true,
-        /**
-         * #property
-         */
         linkViews: false,
-        /**
-         * #property
-         */
         interactToggled: false,
-        /**
-         * #property
-         */
         views: types.array(pluginManager.getViewType('LinearGenomeView')
             .stateModel),
     }))
@@ -80,10 +58,6 @@ export default function stateModelFactory(pluginManager) {
         matchedTrackFeatures: {},
     }))
         .views(self => ({
-        /**
-         * #method
-         * creates an svg export and save using FileSaver
-         */
         async exportSvg(opts = {}) {
             const { renderToSvg } = await import('./svgcomponents/SVGBreakpointSplitView');
             const html = await renderToSvg(self, opts);
@@ -92,54 +66,27 @@ export default function stateModelFactory(pluginManager) {
         },
     }))
         .views(self => ({
-        /**
-         * #getter
-         * 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 self.views.length === 1
                 ? self.views[0].tracks
                 : intersect(elt => elt.configuration.trackId, ...self.views.map(view => view.tracks));
         },
-        /**
-         * #method
-         * Get tracks with a given trackId across multiple views
-         */
         getMatchedTracks(trackConfigId) {
             return self.views
                 .map(view => view.getTrack(trackConfigId))
                 .filter(f => !!f);
         },
-        /**
-         * #method
-         * 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
-         * multiple views
-         */
         getTrackFeatures(trackConfigId) {
             var _a;
             return new Map((_a = self.matchedTrackFeatures[trackConfigId]) === null || _a === void 0 ? void 0 : _a.flat().map(f => [f.id(), f]));
         },
-        /**
-         * #method
-         */
         getMatchedFeaturesInLayout(trackConfigId, features) {
-            // use reverse to search the second track first
             const tracks = this.getMatchedTracks(trackConfigId);
             return features.map(c => c
                 .map(feature => {
@@ -149,6 +96,7 @@ export default function stateModelFactory(pluginManager) {
                         feature,
                         layout: calc(tracks[level], feature),
                         level,
+                        clipPos: getClip(feature.get('CIGAR'), feature.get('strand')),
                     }
                     : undefined;
             })
@@ -179,53 +127,31 @@ export default function stateModelFactory(pluginManager) {
             self.views.forEach(view => {
                 const ret = getPath(view);
                 if (!ret.endsWith(path)) {
-                    // @ts-ignore
                     view[actionName](args === null || args === void 0 ? void 0 : args[0]);
                 }
             });
         },
-        /**
-         * #action
-         */
         setWidth(newWidth) {
             self.width = newWidth;
             self.views.forEach(v => {
                 v.setWidth(newWidth);
             });
         },
-        /**
-         * #action
-         */
         removeView(view) {
             self.views.remove(view);
         },
-        /**
-         * #action
-         */
         toggleInteract() {
             self.interactToggled = !self.interactToggled;
         },
-        /**
-         * #action
-         */
         toggleIntraviewLinks() {
             self.showIntraviewLinks = !self.showIntraviewLinks;
         },
-        /**
-         * #action
-         */
         toggleLinkViews() {
             self.linkViews = !self.linkViews;
         },
-        /**
-         * #action
-         */
         setMatchedTrackFeatures(obj) {
             self.matchedTrackFeatures = obj;
         },
-        /**
-         * #action
-         */
         reverseViewOrder() {
             self.views.reverse();
         },
@@ -248,9 +174,6 @@ export default function stateModelFactory(pluginManager) {
                 }
             }));
         },
-        /**
-         * #method
-         */
         menuItems() {
             return [
                 ...self.views

package/esm/BreakpointSplitView/svgcomponents/SVGBackground.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { useTheme } from '@mui/material';
 import { stripAlpha } from '@jbrowse/core/util';
+import { useTheme } from '@mui/material';
 export default function SVGBackground({ width, height, shift, }) {
     const theme = useTheme();
     return (React.createElement("rect", { width: width + shift * 2, height: height, fill: stripAlpha(theme.palette.background.default) }));

package/esm/BreakpointSplitView/svgcomponents/SVGBreakpointSplitView.d.ts

@@ -1,4 +1,4 @@
-import { ExportSvgOptions, BreakpointViewModel } from '../model';
+import type { BreakpointViewModel, ExportSvgOptions } from '../model';
 type BSV = BreakpointViewModel;
 export declare function renderToSvg(model: BSV, opts: ExportSvgOptions): Promise<string>;
 export {};

package/esm/BreakpointSplitView/svgcomponents/SVGBreakpointSplitView.js

@@ -1,15 +1,13 @@
 import React from 'react';
-import { when } from 'mobx';
+import { createJBrowseTheme } from '@jbrowse/core/ui';
 import { getSession, renderToStaticMarkup, sum } from '@jbrowse/core/util';
+import { SVGRuler, SVGTracks, totalHeight, } from '@jbrowse/plugin-linear-genome-view';
 import { ThemeProvider } from '@mui/material';
-import { createJBrowseTheme } from '@jbrowse/core/ui';
+import { when } from 'mobx';
 import { getRoot } from 'mobx-state-tree';
-import { SVGTracks, SVGRuler, totalHeight, } from '@jbrowse/plugin-linear-genome-view';
-// locals
 import SVGBackground from './SVGBackground';
-import Overlay from '../components/Overlay';
 import { getTrackNameMaxLen, getTrackOffsets } from './util';
-// render LGV to SVG
+import Overlay from '../components/Overlay';
 export async function renderToSvg(model, opts) {
     var _a;
     const { textHeight = 18, headerHeight = 30, rulerHeight = 30, fontSize = 13, trackLabels = 'offset', Wrapper = ({ children }) => children, themeName = 'default', } = opts;
@@ -35,7 +33,6 @@ export async function renderToSvg(model, opts) {
     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
     return renderToStaticMarkup(React.createElement(ThemeProvider, { theme: t },
         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() },

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

@@ -1,4 +1,4 @@
-import { AbstractSessionModel } from '@jbrowse/core/util';
-import { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view';
+import type { AbstractSessionModel } from '@jbrowse/core/util';
+import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view';
 export declare function getTrackNameMaxLen(views: LinearGenomeViewModel[], fontSize: number, session: AbstractSessionModel): number;
 export declare function getTrackOffsets(view: LinearGenomeViewModel, textOffset: number, extra?: number): Record<string, number>;

package/esm/BreakpointSplitView/svgcomponents/util.js

@@ -1,5 +1,4 @@
 import { max, measureText } from '@jbrowse/core/util';
-// locals
 import { getTrackName } from '@jbrowse/core/util/tracks';
 export function getTrackNameMaxLen(views, fontSize, session) {
     return max(views.flatMap(view => view.tracks.map(t => measureText(getTrackName(t.configuration, session), fontSize))), 0);

package/esm/BreakpointSplitView/util.d.ts

@@ -1,5 +1,5 @@
-import { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view';
-import { LayoutRecord } from './model';
+import type { LayoutRecord } from './model';
+import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view';
 type LGV = LinearGenomeViewModel;
 interface Display {
     height: number;

package/esm/BreakpointSplitView/util.js

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { clamp } from '@jbrowse/core/util';
 const [, TOP, , BOTTOM] = [0, 1, 2, 3];
 function cheight(chunk) {
@@ -14,7 +14,6 @@ export function getPxFromCoordinate(view, refName, coord) {
     var _a;
     return (((_a = view.bpToPx({ refName, coord })) === null || _a === void 0 ? void 0 : _a.offsetPx) || 0) - view.offsetPx;
 }
-// get's the yposition of a layout record in a track
 export function yPos(trackId, level, views, tracks, c, getYPosOverride) {
     const display = tracks[level].displays[0];
     const min = 0;
@@ -29,19 +28,12 @@ export function yPos(trackId, level, views, tracks, c, getYPosOverride) {
         heightFromSpecificLevel(views, trackId, level, getYPosOverride) +
         display.scrollTop);
 }
-// we combo a useEffect and useState combo to force rerender on snap changing.
-// the setup of this being a useEffect+useState makes it re-render once the
-// useEffect is called, which is generally the "next frame". If we removed the
-// below use
 export const useNextFrame = (variable) => {
     const [, setNextFrameState] = useState();
     useEffect(() => {
         setNextFrameState(variable);
     }, [variable]);
 };
-// https://stackoverflow.com/a/49186706/2129219 the array-intersection package
-// on npm has a large kb size, and we are just intersecting open track ids so
-// simple is better
 export function intersect(cb, a1 = [], a2 = [], ...rest) {
     const ids = new Set(a2.map(elt => cb(elt)));
     const a12 = a1.filter(value => ids.has(cb(value)));

package/esm/index.d.ts

@@ -1,5 +1,5 @@
-import PluginManager from '@jbrowse/core/PluginManager';
 import Plugin from '@jbrowse/core/Plugin';
+import type PluginManager from '@jbrowse/core/PluginManager';
 export default class BreakpointSplitViewPlugin extends Plugin {
     name: string;
     install(pluginManager: PluginManager): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-breakpoint-split-view",
-  "version": "2.16.1",
+  "version": "2.18.0",
   "description": "JBrowse 2 breakpoint detail split view",
   "keywords": [
     "jbrowse",
@@ -36,7 +36,7 @@
     "clean": "rimraf dist esm *.tsbuildinfo"
   },
   "dependencies": {
-    "@gmod/vcf": "^5.0.9",
+    "@gmod/vcf": "^6.0.0",
     "@mui/icons-material": "^6.0.0",
     "@types/file-saver": "^2.0.1",
     "file-saver": "^2.0.0"
@@ -58,5 +58,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "c6a658d2344989895543f0456b1cf7dd3b937769"
+  "gitHead": "c344ea60099cb7e460b77f15808946b24a7eee74"
 }