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

package/dist/BreakpointSplitView/svgcomponents/SVGBreakpointSplitView.js

@@ -4,22 +4,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.renderToSvg = renderToSvg;
-const react_1 = __importDefault(require("react"));
-const mobx_1 = require("mobx");
-const util_1 = require("@jbrowse/core/util");
-const material_1 = require("@mui/material");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const ui_1 = require("@jbrowse/core/ui");
-const mobx_state_tree_1 = require("mobx-state-tree");
+const util_1 = require("@jbrowse/core/util");
 const plugin_linear_genome_view_1 = require("@jbrowse/plugin-linear-genome-view");
-// locals
+const material_1 = require("@mui/material");
+const mobx_1 = require("mobx");
 const SVGBackground_1 = __importDefault(require("./SVGBackground"));
-const Overlay_1 = __importDefault(require("../components/Overlay"));
 const util_2 = require("./util");
-// render LGV to SVG
+const Overlay_1 = __importDefault(require("../components/Overlay"));
 async function renderToSvg(model, opts) {
     var _a;
     const { textHeight = 18, headerHeight = 30, rulerHeight = 30, fontSize = 13, trackLabels = 'offset', Wrapper = ({ children }) => children, themeName = 'default', } = opts;
-    const { createRootFn } = (0, mobx_state_tree_1.getRoot)(model);
     const session = (0, util_1.getSession)(model);
     const theme = (_a = session.allThemes) === null || _a === void 0 ? void 0 : _a.call(session)[themeName];
     const { width, views } = model;
@@ -41,25 +37,5 @@ async function renderToSvg(model, opts) {
     const trackOffsets = views.map((view, idx) => (0, util_2.getTrackOffsets)(view, textOffset, fontSize + (idx > 0 ? heights[idx - 1] : 0) + offset));
     const w = width + trackLabelOffset;
     const t = (0, ui_1.createJBrowseTheme)(theme);
-    // the xlink namespace is used for rendering <image> tag
-    return (0, util_1.renderToStaticMarkup)(react_1.default.createElement(material_1.ThemeProvider, { theme: t },
-        react_1.default.createElement(Wrapper, null,
-            react_1.default.createElement("svg", { width: width, height: totalHeightSvg, xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", viewBox: [0, 0, w + shift * 2, totalHeightSvg].toString() },
-                react_1.default.createElement(SVGBackground_1.default, { width: w, height: totalHeightSvg, shift: shift }),
-                views[0] ? (react_1.default.createElement("g", { transform: `translate(${shift} ${fontSize})` },
-                    react_1.default.createElement("g", { transform: `translate(${trackLabelOffset})` },
-                        react_1.default.createElement("text", { x: 0, fontSize: fontSize, fill: t.palette.text.primary }, views[0].assemblyNames.join(', ')),
-                        react_1.default.createElement(plugin_linear_genome_view_1.SVGRuler, { model: displayResults[0].view, fontSize: fontSize })),
-                    react_1.default.createElement("g", { transform: `translate(0 ${offset})` },
-                        react_1.default.createElement(plugin_linear_genome_view_1.SVGTracks, { textHeight: textHeight, trackLabels: trackLabels, fontSize: fontSize, model: displayResults[0].view, displayResults: displayResults[0].data, trackLabelOffset: trackLabelOffset })))) : null,
-                views[1] ? (react_1.default.createElement("g", { transform: `translate(${shift} ${fontSize + heights[0]})` },
-                    react_1.default.createElement("g", { transform: `translate(${trackLabelOffset})` },
-                        react_1.default.createElement("text", { x: 0, fontSize: fontSize, fill: t.palette.text.primary }, views[1].assemblyNames.join(', ')),
-                        react_1.default.createElement(plugin_linear_genome_view_1.SVGRuler, { model: displayResults[1].view, fontSize: fontSize })),
-                    react_1.default.createElement("g", { transform: `translate(0 ${offset})` },
-                        react_1.default.createElement(plugin_linear_genome_view_1.SVGTracks, { textHeight: textHeight, trackLabels: trackLabels, fontSize: fontSize, model: displayResults[1].view, displayResults: displayResults[1].data, trackLabelOffset: trackLabelOffset })))) : null,
-                react_1.default.createElement("defs", null,
-                    react_1.default.createElement("clipPath", { id: "clip-bsv" },
-                        react_1.default.createElement("rect", { x: 0, y: 0, width: width, height: totalHeightSvg }))),
-                react_1.default.createElement("g", { transform: `translate(${trackLabelOffset + shift})`, clipPath: "url(#clip-bsv)" }, model.matchedTracks.map(track => (react_1.default.createElement(Overlay_1.default, { parentRef: { current: null }, key: track.configuration.trackId, model: model, trackId: track.configuration.trackId, getTrackYPosOverride: (id, level) => trackOffsets[level][id] }))))))), createRootFn);
+    return (0, util_1.renderToStaticMarkup)((0, jsx_runtime_1.jsx)(material_1.ThemeProvider, { theme: t, children: (0, jsx_runtime_1.jsx)(Wrapper, { children: (0, jsx_runtime_1.jsxs)("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(), children: [(0, jsx_runtime_1.jsx)(SVGBackground_1.default, { width: w, height: totalHeightSvg, shift: shift }), views[0] ? ((0, jsx_runtime_1.jsxs)("g", { transform: `translate(${shift} ${fontSize})`, children: [(0, jsx_runtime_1.jsxs)("g", { transform: `translate(${trackLabelOffset})`, children: [(0, jsx_runtime_1.jsx)("text", { x: 0, fontSize: fontSize, fill: t.palette.text.primary, children: views[0].assemblyNames.join(', ') }), (0, jsx_runtime_1.jsx)(plugin_linear_genome_view_1.SVGRuler, { model: displayResults[0].view, fontSize: fontSize })] }), (0, jsx_runtime_1.jsx)("g", { transform: `translate(0 ${offset})`, children: (0, jsx_runtime_1.jsx)(plugin_linear_genome_view_1.SVGTracks, { textHeight: textHeight, trackLabels: trackLabels, fontSize: fontSize, model: displayResults[0].view, displayResults: displayResults[0].data, trackLabelOffset: trackLabelOffset }) })] })) : null, views[1] ? ((0, jsx_runtime_1.jsxs)("g", { transform: `translate(${shift} ${fontSize + heights[0]})`, children: [(0, jsx_runtime_1.jsxs)("g", { transform: `translate(${trackLabelOffset})`, children: [(0, jsx_runtime_1.jsx)("text", { x: 0, fontSize: fontSize, fill: t.palette.text.primary, children: views[1].assemblyNames.join(', ') }), (0, jsx_runtime_1.jsx)(plugin_linear_genome_view_1.SVGRuler, { model: displayResults[1].view, fontSize: fontSize })] }), (0, jsx_runtime_1.jsx)("g", { transform: `translate(0 ${offset})`, children: (0, jsx_runtime_1.jsx)(plugin_linear_genome_view_1.SVGTracks, { textHeight: textHeight, trackLabels: trackLabels, fontSize: fontSize, model: displayResults[1].view, displayResults: displayResults[1].data, trackLabelOffset: trackLabelOffset }) })] })) : null, (0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsx)("clipPath", { id: "clip-bsv", children: (0, jsx_runtime_1.jsx)("rect", { x: 0, y: 0, width: width, height: totalHeightSvg }) }) }), (0, jsx_runtime_1.jsx)("g", { transform: `translate(${trackLabelOffset + shift})`, clipPath: "url(#clip-bsv)", children: model.matchedTracks.map(track => ((0, jsx_runtime_1.jsx)(Overlay_1.default, { parentRef: { current: null }, model: model, trackId: track.configuration.trackId, getTrackYPosOverride: (id, level) => trackOffsets[level][id] }, track.configuration.trackId))) })] }) }) }));
 }

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

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getTrackNameMaxLen = getTrackNameMaxLen;
 exports.getTrackOffsets = getTrackOffsets;
 const util_1 = require("@jbrowse/core/util");
-// locals
 const tracks_1 = require("@jbrowse/core/util/tracks");
 function getTrackNameMaxLen(views, fontSize, session) {
     return (0, util_1.max)(views.flatMap(view => view.tracks.map(t => (0, util_1.measureText)((0, tracks_1.getTrackName)(t.configuration, session), fontSize))), 0);

package/dist/BreakpointSplitView/types.d.ts

@@ -0,0 +1,22 @@
+export interface ExportSvgOptions {
+    rasterizeLayers?: boolean;
+    filename?: string;
+    Wrapper?: React.FC<{
+        children: React.ReactNode;
+    }>;
+    fontSize?: number;
+    rulerHeight?: number;
+    textHeight?: number;
+    paddingHeight?: number;
+    headerHeight?: number;
+    cytobandHeight?: number;
+    trackLabels?: string;
+    themeName?: string;
+}
+export interface Breakend {
+    MateDirection: string;
+    Join: string;
+    Replacement: string;
+    MatePosition: string;
+}
+export type LayoutRecord = [number, number, number, number];

package/dist/BreakpointSplitView/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/BreakpointSplitView/util.d.ts

@@ -1,5 +1,7 @@
-import { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view';
-import { LayoutRecord } from './model';
+import type { LayoutRecord } from './types';
+import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
+import type { Feature } from '@jbrowse/core/util';
+import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view';
 type LGV = LinearGenomeViewModel;
 interface Display {
     height: number;
@@ -7,6 +9,7 @@ interface Display {
     SNPCoverageDisplay?: {
         height: number;
     };
+    searchFeatureByID?: (str: string) => LayoutRecord;
 }
 interface Track {
     displays: Display[];
@@ -16,4 +19,11 @@ export declare function getPxFromCoordinate(view: LGV, refName: string, coord: n
 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;
 export declare function intersect<T>(cb: (l: T) => string, a1?: T[], a2?: T[], ...rest: T[][]): T[];
+export declare function getClip(cigar: string, strand: number): number;
+export declare function calc(track: Track, f: Feature): LayoutRecord | undefined;
+export declare function getBlockFeatures(model: {
+    views: LinearGenomeViewModel[];
+}, track: {
+    configuration: AnyConfigurationModel;
+}): Promise<Feature[][] | undefined>;
 export {};

package/dist/BreakpointSplitView/util.js

@@ -5,7 +5,11 @@ exports.heightFromSpecificLevel = heightFromSpecificLevel;
 exports.getPxFromCoordinate = getPxFromCoordinate;
 exports.yPos = yPos;
 exports.intersect = intersect;
+exports.getClip = getClip;
+exports.calc = calc;
+exports.getBlockFeatures = getBlockFeatures;
 const react_1 = require("react");
+const configuration_1 = require("@jbrowse/core/configuration");
 const util_1 = require("@jbrowse/core/util");
 const [, TOP, , BOTTOM] = [0, 1, 2, 3];
 function cheight(chunk) {
@@ -21,7 +25,6 @@ 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
 function yPos(trackId, level, views, tracks, c, getYPosOverride) {
     const display = tracks[level].displays[0];
     const min = 0;
@@ -36,10 +39,6 @@ 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
 const useNextFrame = (variable) => {
     const [, setNextFrameState] = (0, react_1.useState)();
     (0, react_1.useEffect)(() => {
@@ -47,11 +46,38 @@ const useNextFrame = (variable) => {
     }, [variable]);
 };
 exports.useNextFrame = useNextFrame;
-// 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
 function intersect(cb, a1 = [], a2 = [], ...rest) {
     const ids = new Set(a2.map(elt => cb(elt)));
     const a12 = a1.filter(value => ids.has(cb(value)));
     return rest.length === 0 ? a12 : intersect(cb, a12, ...rest);
 }
+const startClip = new RegExp(/(\d+)[SH]$/);
+const endClip = new RegExp(/^(\d+)([SH])/);
+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());
+}
+async function getBlockFeatures(model, track) {
+    var _a;
+    const { views } = model;
+    const { rpcManager, assemblyManager } = (0, util_1.getSession)(model);
+    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;
+    }
+    const sessionId = track.configuration.trackId;
+    return Promise.all(views.map(async (view) => (await rpcManager.call(sessionId, 'CoreGetFeatures', {
+        adapterConfig: (0, configuration_1.getConf)(track, ['adapter']),
+        sessionId,
+        regions: view.staticBlocks.contentBlocks,
+    })).flat()));
+}

package/dist/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/esm/BreakpointAlignmentsFeatureDetail/BreakpointAlignmentsFeatureDetail.d.ts

@@ -1,7 +1,10 @@
-import React from 'react';
+import type { SimpleFeatureSerialized } from '@jbrowse/core/util';
 declare const BreakpointAlignmentsFeatureDetail: ({ model, }: {
     model: {
-        featureData: Record<string, unknown>;
+        featureData: {
+            feature1: SimpleFeatureSerialized;
+            feature2: SimpleFeatureSerialized;
+        };
     };
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default BreakpointAlignmentsFeatureDetail;

package/esm/BreakpointAlignmentsFeatureDetail/BreakpointAlignmentsFeatureDetail.js

@@ -1,13 +1,10 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BaseAttributes, BaseCoreDetails, } from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail';
 import { Paper } from '@mui/material';
 import { observer } from 'mobx-react';
-import { BaseCoreDetails, BaseAttributes, } from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail';
 const BreakpointAlignmentsFeatureDetail = observer(function ({ model, }) {
-    const { feature1, feature2 } = JSON.parse(JSON.stringify(model.featureData));
-    return (React.createElement(Paper, { "data-testid": "alignment-side-drawer" },
-        React.createElement(BaseCoreDetails, { title: "Feature 1", feature: feature1 }),
-        React.createElement(BaseCoreDetails, { title: "Feature 2", feature: feature2 }),
-        React.createElement(BaseAttributes, { title: "Feature 1 attributes", feature: feature1 }),
-        React.createElement(BaseAttributes, { title: "Feature 2 attributes", feature: feature2 })));
+    const { featureData } = model;
+    const { feature1, feature2 } = structuredClone(featureData);
+    return (_jsxs(Paper, { children: [_jsx(BaseCoreDetails, { title: "Feature 1", feature: feature1 }), _jsx(BaseCoreDetails, { title: "Feature 2", feature: feature2 }), _jsx(BaseAttributes, { title: "Feature 1 attributes", feature: feature1 }), _jsx(BaseAttributes, { title: "Feature 2 attributes", feature: feature2 })] }));
 });
 export default BreakpointAlignmentsFeatureDetail;

package/esm/BreakpointAlignmentsFeatureDetail/index.d.ts

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

package/esm/BreakpointAlignmentsFeatureDetail/index.js

@@ -1,8 +1,8 @@
 import { lazy } from 'react';
 import { ConfigurationSchema } from '@jbrowse/core/configuration';
+import { WidgetType } from '@jbrowse/core/pluggableElementTypes';
 import { ElementId } from '@jbrowse/core/util/types/mst';
 import { types } from 'mobx-state-tree';
-import { WidgetType } from '@jbrowse/core/pluggableElementTypes';
 const configSchema = ConfigurationSchema('BreakpointAlignmentsWidget', {});
 const stateModel = types
     .model('BreakpointAlignmentsWidget', {

package/esm/BreakpointSplitView/BreakpointSplitView.d.ts

@@ -1,52 +1,34 @@
-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';
+import { type AbstractSessionModel, type Feature } from '@jbrowse/core/util';
+import type { Assembly } from '@jbrowse/core/assemblyManager/assembly';
 export default class BreakpointSplitViewType extends ViewType {
     getBreakendCoveringRegions({ feature, assembly, }: {
         feature: Feature;
         assembly: Assembly;
     }): {
         pos: number;
-        refName: string | undefined;
-        mateRefName: string | undefined;
-        matePos: number;
+        refName: string;
+        mateRefName: string;
+        matePos: any;
     };
-    singleLevelSnapshotFromBreakendFeature(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;
-        featureData: unknown;
-    };
-    snapshotFromBreakendFeature(feature: Feature, view: {
-        displayedRegions: Region[];
-    } & IStateTreeNode): {
-        type: string;
-        views: {
+    singleLevelSnapshotFromBreakendFeature({ feature, session, assemblyName, }: {
+        feature: Feature;
+        session: AbstractSessionModel;
+        assemblyName: string;
+    }): {
+        coverage: {
+            pos: number;
+            refName: string;
+            mateRefName: string;
+            matePos: any;
+        };
+        snap: {
             type: string;
-            displayedRegions: {
-                start: number;
-                end: number;
-                refName: string;
-                assemblyName: string;
+            views: {
+                type: string;
+                displayedRegions: import("@jbrowse/core/assemblyManager/assembly").BasicRegion[];
             }[];
-            hideHeader: boolean;
-            bpPerPx: number;
-            offsetPx: number;
-        }[];
-        displayName: string;
+            displayName: string;
+        };
     };
 }

package/esm/BreakpointSplitView/BreakpointSplitView.js

@@ -1,6 +1,6 @@
-import { getSession } from '@jbrowse/core/util';
-import ViewType from '@jbrowse/core/pluggableElementTypes/ViewType';
 import { parseBreakend } from '@gmod/vcf';
+import ViewType from '@jbrowse/core/pluggableElementTypes/ViewType';
+import { gatherOverlaps, } from '@jbrowse/core/util';
 export default class BreakpointSplitViewType extends ViewType {
     getBreakendCoveringRegions({ feature, assembly, }) {
         var _a;
@@ -8,81 +8,44 @@ export default class BreakpointSplitViewType extends ViewType {
         const bnd = alt ? parseBreakend(alt) : undefined;
         const startPos = feature.get('start');
         const refName = feature.get('refName');
-        let endPos;
-        let mateRefName;
-        // a VCF breakend feature
+        const f = (ref) => assembly.getCanonicalRefName(ref) || ref;
         if (alt === '<TRA>') {
             const INFO = feature.get('INFO');
-            endPos = INFO.END[0] - 1;
-            mateRefName = INFO.CHR2[0];
+            return {
+                pos: startPos,
+                refName: f(refName),
+                mateRefName: f(INFO.CHR2[0]),
+                matePos: INFO.END[0] - 1,
+            };
         }
         else if (bnd === null || bnd === void 0 ? void 0 : bnd.MatePosition) {
             const matePosition = bnd.MatePosition.split(':');
-            endPos = +matePosition[1] - 1;
-            mateRefName = matePosition[0];
+            return {
+                pos: startPos,
+                refName: f(refName),
+                mateRefName: f(matePosition[0]),
+                matePos: +matePosition[1] - 1,
+            };
         }
         else if (feature.get('mate')) {
-            // a generic 'mate' feature
             const mate = feature.get('mate');
-            mateRefName = mate.refName;
-            endPos = mate.start;
+            return {
+                pos: startPos,
+                refName: f(refName),
+                mateRefName: f(mate.refName),
+                matePos: mate.start,
+            };
         }
         else {
-            endPos = startPos + 1;
-        }
-        if (!mateRefName) {
-            throw new Error(`unable to resolve mate refName ${mateRefName} in reference genome`);
-        }
-        return {
-            pos: startPos,
-            refName: assembly.getCanonicalRefName(refName),
-            mateRefName: assembly.getCanonicalRefName(mateRefName),
-            matePos: endPos,
-        };
-    }
-    singleLevelSnapshotFromBreakendFeature(feature, view) {
-        const session = getSession(view);
-        const bpPerPx = 10;
-        const { assemblyName } = view.displayedRegions[0];
-        const { assemblyManager } = session;
-        const assembly = assemblyManager.get(assemblyName);
-        if (!assembly) {
-            throw new Error(`assembly ${assemblyName} not found`);
+            return {
+                pos: startPos,
+                refName: f(refName),
+                mateRefName: f(refName),
+                matePos: feature.get('end'),
+            };
         }
-        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;
-        topMarkedRegion[1].start = startPos;
-        bottomMarkedRegion[0].end = endPos;
-        bottomMarkedRegion[1].start = endPos;
-        return {
-            type: 'BreakpointSplitView',
-            views: [
-                {
-                    type: 'LinearGenomeView',
-                    displayedRegions: topMarkedRegion,
-                    hideHeader: true,
-                    bpPerPx,
-                    offsetPx: (topRegion.start + feature.get('start')) / bpPerPx,
-                },
-            ],
-            displayName: `${feature.get('name') || feature.get('id') || 'breakend'} split detail`,
-            featureData: undefined,
-        };
     }
-    snapshotFromBreakendFeature(feature, view) {
-        const session = getSession(view);
-        const bpPerPx = 10;
-        const { assemblyName } = view.displayedRegions[0];
+    singleLevelSnapshotFromBreakendFeature({ feature, session, assemblyName, }) {
         const { assemblyManager } = session;
         const assembly = assemblyManager.get(assemblyName);
         if (!assembly) {
@@ -91,37 +54,25 @@ export default class BreakpointSplitViewType extends ViewType {
         if (!assembly.regions) {
             throw new Error(`assembly ${assemblyName} regions not loaded`);
         }
-        const { refName, pos: startPos, mateRefName, matePos: endPos, } = this.getBreakendCoveringRegions({
+        const coverage = this.getBreakendCoveringRegions({
             feature,
             assembly,
         });
+        const { refName, mateRefName } = coverage;
         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;
-        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,
-                },
-                {
-                    type: 'LinearGenomeView',
-                    displayedRegions: bottomMarkedRegion,
-                    hideHeader: true,
-                    bpPerPx,
-                    offsetPx: (bottomRegion.start + endPos) / bpPerPx,
-                },
-            ],
-            displayName: `${feature.get('name') || feature.get('id') || 'breakend'} split detail`,
+            coverage,
+            snap: {
+                type: 'BreakpointSplitView',
+                views: [
+                    {
+                        type: 'LinearGenomeView',
+                        displayedRegions: gatherOverlaps([topRegion, bottomRegion]),
+                    },
+                ],
+                displayName: `${feature.get('name') || feature.get('id') || 'breakend'} split detail`,
+            },
         };
     }
 }

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

@@ -1,9 +1,8 @@
-import React from 'react';
-import { BreakpointViewModel } from '../model';
+import type { BreakpointViewModel } from '../model';
 declare const AlignmentConnections: ({ model, trackId, parentRef, 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 AlignmentConnections;