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

package/dist/BreakpointSplitView/components/getOrientationColor.js

@@ -7,8 +7,6 @@ exports.getLongReadOrientationAbnormal = getLongReadOrientationAbnormal;
 exports.isAbnormalOrientation = isAbnormalOrientation;
 exports.getPairedOrientationColor = getPairedOrientationColor;
 const material_1 = require("@mui/material");
-// orientation definitions from igv.js, see also
-// https://software.broadinstitute.org/software/igv/interpreting_pair_orientations
 exports.orientationTypes = {
     fr: {
         F1R2: 'LR',
@@ -47,12 +45,6 @@ exports.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
 exports.strokeColor = {
     color_fwd_strand_not_proper: (0, material_1.alpha)('#CA6767', 0.8),
     color_rev_strand_not_proper: (0, material_1.alpha)('#7272AA', 0.8),

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

@@ -7,20 +7,26 @@ exports.findMatchingAlt = findMatchingAlt;
 exports.getMatchedBreakendFeatures = getMatchedBreakendFeatures;
 exports.getMatchedTranslocationFeatures = getMatchedTranslocationFeatures;
 exports.getMatchedPairedFeatures = getMatchedPairedFeatures;
-const util_1 = require("@jbrowse/core/util");
 const vcf_1 = require("@gmod/vcf");
-// this finds candidate alignment features, aimed at plotting split reads from
-// BAM/CRAM files
+const util_1 = require("@jbrowse/core/util");
 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 = (0, util_1.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) {
@@ -30,23 +36,18 @@ 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
 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);
@@ -78,8 +79,6 @@ function findMatchingAlt(feat1, feat2) {
     }
     return undefined;
 }
-// Returns paired BND features across multiple views by inspecting the ALT
-// field to get exact coordinate matches
 function getMatchedBreakendFeatures(feats) {
     const candidates = new Map();
     const alreadySeen = new Set();
@@ -104,7 +103,6 @@ function getMatchedBreakendFeatures(feats) {
     }
     return [...candidates.values()].filter(v => v.length > 1);
 }
-// Getting "matched" TRA means just return all TRA
 function getMatchedTranslocationFeatures(feats) {
     const ret = [];
     const alreadySeen = new Set();
@@ -116,7 +114,6 @@ function getMatchedTranslocationFeatures(feats) {
     }
     return ret;
 }
-// Getting "matched" TRA means just return all TRA
 function getMatchedPairedFeatures(feats) {
     const candidates = new Map();
     const alreadySeen = new Set();

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

@@ -28,12 +28,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = BreakpointSplitViewF;
 const react_1 = require("react");
-// locals
-const BreakpointSplitView_1 = __importDefault(require("./BreakpointSplitView"));
+const pluggableElementTypes_1 = require("@jbrowse/core/pluggableElementTypes");
 const model_1 = __importDefault(require("./model"));
 function BreakpointSplitViewF(pluginManager) {
     pluginManager.addViewType(() => {
-        return new BreakpointSplitView_1.default({
+        return new pluggableElementTypes_1.ViewType({
             name: 'BreakpointSplitView',
             displayName: 'Breakpoint split view',
             stateModel: (0, model_1.default)(pluginManager),

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

@@ -26,21 +26,26 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.getClip = getClip;
 exports.default = stateModelFactory;
 const react_1 = require("react");
-const mobx_state_tree_1 = require("mobx-state-tree");
-const mobx_1 = require("mobx");
-const file_saver_1 = require("file-saver");
+const configuration_1 = require("@jbrowse/core/configuration");
 const models_1 = require("@jbrowse/core/pluggableElementTypes/models");
 const util_1 = require("@jbrowse/core/util");
-const configuration_1 = require("@jbrowse/core/configuration");
-// icons
-const PhotoCamera_1 = __importDefault(require("@mui/icons-material/PhotoCamera"));
 const Link_1 = __importDefault(require("@mui/icons-material/Link"));
-// locals
+const PhotoCamera_1 = __importDefault(require("@mui/icons-material/PhotoCamera"));
+const file_saver_1 = require("file-saver");
+const mobx_1 = require("mobx");
+const mobx_state_tree_1 = require("mobx-state-tree");
 const util_2 = require("./util");
-// lazies
 const ExportSvgDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./components/ExportSvgDialog'))));
+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());
@@ -55,7 +60,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', {
@@ -64,43 +69,17 @@ async function getBlockFeatures(model, track) {
         regions: view.staticBlocks.contentBlocks,
     })).flat()));
 }
-/**
- * #stateModel BreakpointSplitView
- * extends
- * - [BaseViewModel](../baseviewmodel)
- */
 function stateModelFactory(pluginManager) {
     const minHeight = 40;
     const defaultHeight = 400;
     return mobx_state_tree_1.types
         .compose('BreakpointSplitView', models_1.BaseViewModel, mobx_state_tree_1.types.model({
-        /**
-         * #property
-         */
         type: mobx_state_tree_1.types.literal('BreakpointSplitView'),
-        /**
-         * #property
-         */
         height: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.refinement('viewHeight', mobx_state_tree_1.types.number, (n) => n >= minHeight), defaultHeight),
-        /**
-         * #property
-         */
         trackSelectorType: 'hierarchical',
-        /**
-         * #property
-         */
         showIntraviewLinks: true,
-        /**
-         * #property
-         */
         linkViews: false,
-        /**
-         * #property
-         */
         interactToggled: false,
-        /**
-         * #property
-         */
         views: mobx_state_tree_1.types.array(pluginManager.getViewType('LinearGenomeView')
             .stateModel),
     }))
@@ -109,10 +88,6 @@ function stateModelFactory(pluginManager) {
         matchedTrackFeatures: {},
     }))
         .views(self => ({
-        /**
-         * #method
-         * creates an svg export and save using FileSaver
-         */
         async exportSvg(opts = {}) {
             const { renderToSvg } = await Promise.resolve().then(() => __importStar(require('./svgcomponents/SVGBreakpointSplitView')));
             const html = await renderToSvg(self, opts);
@@ -121,54 +96,27 @@ 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
                 : (0, util_2.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 => {
@@ -178,6 +126,7 @@ function stateModelFactory(pluginManager) {
                         feature,
                         layout: calc(tracks[level], feature),
                         level,
+                        clipPos: getClip(feature.get('CIGAR'), feature.get('strand')),
                     }
                     : undefined;
             })
@@ -208,53 +157,31 @@ function stateModelFactory(pluginManager) {
             self.views.forEach(view => {
                 const ret = (0, mobx_state_tree_1.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();
         },
@@ -277,9 +204,6 @@ function stateModelFactory(pluginManager) {
                 }
             }));
         },
-        /**
-         * #method
-         */
         menuItems() {
             return [
                 ...self.views

package/dist/BreakpointSplitView/svgcomponents/SVGBackground.js

@@ -5,8 +5,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = SVGBackground;
 const react_1 = __importDefault(require("react"));
-const material_1 = require("@mui/material");
 const util_1 = require("@jbrowse/core/util");
+const material_1 = require("@mui/material");
 function SVGBackground({ width, height, shift, }) {
     const theme = (0, material_1.useTheme)();
     return (react_1.default.createElement("rect", { width: width + shift * 2, height: height, fill: (0, util_1.stripAlpha)(theme.palette.background.default) }));

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

@@ -5,17 +5,15 @@ 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 ui_1 = require("@jbrowse/core/ui");
 const util_1 = require("@jbrowse/core/util");
+const plugin_linear_genome_view_1 = require("@jbrowse/plugin-linear-genome-view");
 const material_1 = require("@mui/material");
-const ui_1 = require("@jbrowse/core/ui");
+const mobx_1 = require("mobx");
 const mobx_state_tree_1 = require("mobx-state-tree");
-const plugin_linear_genome_view_1 = require("@jbrowse/plugin-linear-genome-view");
-// locals
 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;
@@ -41,7 +39,6 @@ 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() },

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

@@ -21,7 +21,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 +35,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,9 +42,6 @@ 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)));

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,11 @@
 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;
 export default BreakpointAlignmentsFeatureDetail;

package/esm/BreakpointAlignmentsFeatureDetail/BreakpointAlignmentsFeatureDetail.js

@@ -1,10 +1,11 @@
 import React from 'react';
+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" },
+    const { featureData } = model;
+    const { feature1, feature2 } = structuredClone(featureData);
+    return (React.createElement(Paper, null,
         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 }),

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', {