@jbrowse/plugin-alignments 2.15.0 → 2.15.2

package/dist/LinearPileupDisplay/model.d.ts

@@ -34,7 +34,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
     }, {
         renderInProgress: AbortController | undefined;
         filled: boolean;
-        reactElement: import("react").ReactElement | undefined;
+        reactElement: React.ReactElement | undefined;
         features: Map<string, import("@jbrowse/core/util").Feature> | undefined;
         layout: any;
         status: string;
@@ -45,12 +45,12 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
             model: {
                 error?: unknown;
                 reload: () => void;
-                message: import("react").ReactNode;
+                message: React.ReactNode;
                 filled?: boolean;
                 status?: string;
                 reactElement? /**
                  * #property
-                 */: import("react").ReactElement;
+                 */: React.ReactElement;
             };
         }) => import("react").JSX.Element | undefined;
         renderProps: any;
@@ -61,7 +61,11 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
         setLoading(abortController: AbortController): void;
         setMessage(messageText: string): void;
         setRendered(props: {
-            reactElement: import("react").ReactElement;
+            reactElement: React.
+            /**
+             * #action
+             */
+            ReactElement;
             features: Map<string, import("@jbrowse/core/util").Feature>;
             layout: any;
             maxHeightReached: boolean;
@@ -137,7 +141,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
     error: unknown;
     message: string | undefined;
 } & {
-    readonly RenderingComponent: import("react").FC<{
+    readonly RenderingComponent: React.FC<{
         model: {
             id: string;
             type: string;
@@ -160,7 +164,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
         onHorizontalScroll?: () => void;
         blockState?: Record<string, any>;
     }>;
-    readonly DisplayBlurb: import("react").FC<{
+    readonly DisplayBlurb: React.FC<{
         model: {
             id: string;
             type: string;
@@ -185,7 +189,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
     readonly parentTrack: any;
     renderProps(): any;
     readonly rendererType: import("@jbrowse/core/pluggableElementTypes").RendererType;
-    readonly DisplayMessageComponent: undefined | import("react").FC<any>;
+    readonly DisplayMessageComponent: undefined | React.FC<any>;
     trackMenuItems(): import("@jbrowse/core/ui").MenuItem[];
     readonly viewMenuActions: import("@jbrowse/core/ui").MenuItem[];
     regionCannotBeRendered(): null;
@@ -231,13 +235,13 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
     featureIdUnderMouse: undefined | string;
     contextMenuFeature: undefined | import("@jbrowse/core/util").Feature;
 } & {
+    readonly DisplayMessageComponent: import("react").FC<any> | undefined;
     readonly blockType: "dynamicBlocks" | "staticBlocks";
     readonly blockDefinitions: import("@jbrowse/core/util/blockTypes").BlockSet;
 } & {
     readonly renderDelay: number;
-    readonly TooltipComponent: import("react").FC<any>;
+    readonly TooltipComponent: import("@jbrowse/core/util").AnyReactComponentType;
     readonly selectedFeatureId: string | undefined;
-    readonly DisplayMessageComponent: undefined | import("react").FC<any>;
 } & {
     readonly features: import("@jbrowse/core/util/compositeMap").default<string, import("@jbrowse/core/util").Feature>;
     readonly featureUnderMouse: import("@jbrowse/core/util").Feature | undefined;
@@ -335,7 +339,6 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
         icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
             muiName: string;
         };
-        priority: number;
         onClick: () => void;
     })[];
 } & {
@@ -428,6 +431,22 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
      * #method
      */
     trackMenuItems(): readonly [...import("@jbrowse/core/ui").MenuItem[], {
+        readonly label: "Sort by...";
+        readonly icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+            muiName: string;
+        };
+        readonly disabled: boolean;
+        readonly subMenu: readonly [...{
+            label: string;
+            onClick: () => void;
+        }[], {
+            readonly label: "Sort by tag...";
+            readonly onClick: () => void;
+        }, {
+            readonly label: "Clear sort";
+            readonly onClick: () => void;
+        }];
+    }, {
         readonly label: "Color by...";
         readonly icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
             muiName: string;
@@ -445,22 +464,6 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
             label: string;
             onClick: () => void;
         }[]];
-    }, {
-        readonly label: "Sort by...";
-        readonly icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
-            muiName: string;
-        };
-        readonly disabled: boolean;
-        readonly subMenu: readonly [...{
-            label: string;
-            onClick: () => void;
-        }[], {
-            readonly label: "Sort by tag...";
-            readonly onClick: () => void;
-        }, {
-            readonly label: "Clear sort";
-            readonly onClick: () => void;
-        }];
     }, {
         readonly label: "Group by...";
         readonly icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {

package/dist/LinearPileupDisplay/model.js

@@ -251,59 +251,65 @@ function stateModelFactory(configSchema) {
                 return [
                     ...superTrackMenuItems(),
                     {
-                        label: 'Color by...',
-                        icon: ColorLens_1.default,
+                        label: 'Sort by...',
+                        icon: Sort_1.default,
+                        disabled: self.showSoftClipping,
                         subMenu: [
-                            {
-                                label: 'Pair orientation',
+                            ...['Start location', 'Read strand', 'Base pair'].map(option => ({
+                                label: option,
                                 onClick: () => {
-                                    self.setColorScheme({ type: 'pairOrientation' });
+                                    self.setSortedBy(option);
                                 },
-                            },
+                            })),
                             {
-                                label: 'Modifications or methylation',
+                                label: 'Sort by tag...',
                                 onClick: () => {
-                                    (0, util_1.getSession)(self).queueDialog(doneCallback => [
-                                        ModificationsDialog,
-                                        { model: self, handleClose: doneCallback },
+                                    (0, util_1.getSession)(self).queueDialog(handleClose => [
+                                        SortByTagDialog,
+                                        {
+                                            model: self,
+                                            handleClose,
+                                        },
                                     ]);
                                 },
                             },
                             {
-                                label: 'Insert size',
+                                label: 'Clear sort',
                                 onClick: () => {
-                                    self.setColorScheme({ type: 'insertSize' });
+                                    self.clearSelected();
                                 },
                             },
-                            ...superColorSchemeSubMenuItems(),
                         ],
                     },
                     {
-                        label: 'Sort by...',
-                        icon: Sort_1.default,
-                        disabled: self.showSoftClipping,
+                        label: 'Color by...',
+                        icon: ColorLens_1.default,
                         subMenu: [
-                            ...['Start location', 'Read strand', 'Base pair'].map(option => ({
-                                label: option,
+                            {
+                                label: 'Pair orientation',
                                 onClick: () => {
-                                    self.setSortedBy(option);
+                                    self.setColorScheme({ type: 'pairOrientation' });
                                 },
-                            })),
+                            },
                             {
-                                label: 'Sort by tag...',
+                                label: 'Modifications or methylation',
                                 onClick: () => {
-                                    (0, util_1.getSession)(self).queueDialog(handleClose => [
-                                        SortByTagDialog,
-                                        { model: self, handleClose },
+                                    (0, util_1.getSession)(self).queueDialog(doneCallback => [
+                                        ModificationsDialog,
+                                        {
+                                            model: self,
+                                            handleClose: doneCallback,
+                                        },
                                     ]);
                                 },
                             },
                             {
-                                label: 'Clear sort',
+                                label: 'Insert size',
                                 onClick: () => {
-                                    self.clearSelected();
+                                    self.setColorScheme({ type: 'insertSize' });
                                 },
                             },
+                            ...superColorSchemeSubMenuItems(),
                         ],
                     },
                     {
@@ -349,8 +355,7 @@ function stateModelFactory(configSchema) {
                 if (!self.autorunReady) {
                     return;
                 }
-                const { bpPerPx } = view;
-                self.setCurrSortBpPerPx(bpPerPx);
+                self.setCurrSortBpPerPx(view.bpPerPx);
             }, { delay: 1000 });
             (0, util_2.createAutorun)(self, async () => {
                 const { rpcManager } = (0, util_1.getSession)(self);

package/dist/LinearReadArcsDisplay/index.js

@@ -1,4 +1,27 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -6,9 +29,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = register;
 const DisplayType_1 = __importDefault(require("@jbrowse/core/pluggableElementTypes/DisplayType"));
 // locals
-const ReactComponent_1 = __importDefault(require("./components/ReactComponent"));
 const configSchema_1 = __importDefault(require("./configSchema"));
 const model_1 = __importDefault(require("./model"));
+const react_1 = require("react");
 function register(pluginManager) {
     pluginManager.addDisplayType(() => {
         const configSchema = (0, configSchema_1.default)(pluginManager);
@@ -20,7 +43,7 @@ function register(pluginManager) {
             trackType: 'AlignmentsTrack',
             viewType: 'LinearGenomeView',
             subDisplay: { type: 'LinearAlignmentsDisplay', lowerPanel: true },
-            ReactComponent: ReactComponent_1.default,
+            ReactComponent: (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./components/ReactComponent')))),
         });
     });
 }

package/dist/LinearReadCloudDisplay/index.js

@@ -1,4 +1,27 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -6,9 +29,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = register;
 const DisplayType_1 = __importDefault(require("@jbrowse/core/pluggableElementTypes/DisplayType"));
 // locals
-const ReactComponent_1 = __importDefault(require("./components/ReactComponent"));
 const configSchema_1 = __importDefault(require("./configSchema"));
 const model_1 = __importDefault(require("./model"));
+const react_1 = require("react");
 function register(pluginManager) {
     pluginManager.addDisplayType(() => {
         const configSchema = (0, configSchema_1.default)(pluginManager);
@@ -20,7 +43,7 @@ function register(pluginManager) {
             trackType: 'AlignmentsTrack',
             viewType: 'LinearGenomeView',
             subDisplay: { type: 'LinearAlignmentsDisplay', lowerPanel: true },
-            ReactComponent: ReactComponent_1.default,
+            ReactComponent: (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./components/ReactComponent')))),
         });
     });
 }

package/dist/LinearSNPCoverageDisplay/models/model.d.ts

@@ -33,7 +33,7 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
     }, {
         renderInProgress: AbortController | undefined;
         filled: boolean;
-        reactElement: import("react").ReactElement | undefined;
+        reactElement: React.ReactElement | undefined;
         features: Map<string, import("@jbrowse/core/util").Feature> | undefined;
         layout: any;
         status: string;
@@ -44,10 +44,10 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
             model: {
                 error?: unknown;
                 reload: () => void;
-                message: import("react").ReactNode;
+                message: React.ReactNode;
                 filled?: boolean;
                 status?: string;
-                reactElement?: import("react").ReactElement;
+                reactElement?: React.ReactElement;
             };
         }) => import("react").JSX.Element | undefined;
         renderProps: any;
@@ -58,7 +58,7 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
         setLoading(abortController: AbortController): void;
         setMessage(messageText: string): void;
         setRendered(props: {
-            reactElement: import("react").ReactElement;
+            reactElement: React.ReactElement;
             features: Map<string, import("@jbrowse/core/util").Feature>;
             layout: any;
             maxHeightReached: boolean;

package/dist/LinearSNPCoverageDisplay/models/model.js

@@ -1,8 +1,32 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
 const mobx_state_tree_1 = require("mobx-state-tree");
 const mobx_1 = require("mobx");
 const configuration_1 = require("@jbrowse/core/configuration");
@@ -10,10 +34,11 @@ const plugin_wiggle_1 = require("@jbrowse/plugin-wiggle");
 const util_1 = require("@jbrowse/core/util");
 const serializableFilterChain_1 = __importDefault(require("@jbrowse/core/pluggableElementTypes/renderers/util/serializableFilterChain"));
 // locals
-const Tooltip_1 = __importDefault(require("../components/Tooltip"));
 const shared_1 = require("../../shared");
 const util_2 = require("../../util");
 const util_3 = require("../../util");
+// lazies
+const Tooltip = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('../components/Tooltip'))));
 // using a map because it preserves order
 const rendererTypes = new Map([['snpcoverage', 'SNPCoverageRenderer']]);
 /**
@@ -230,7 +255,7 @@ function stateModelFactory(pluginManager, configSchema) {
              * #getter
              */
             get TooltipComponent() {
-                return Tooltip_1.default;
+                return Tooltip;
             },
             /**
              * #getter

package/dist/PileupRenderer/PileupRenderer.d.ts

@@ -49,7 +49,7 @@ export default class PileupRenderer extends BoxRendererType {
         height: number;
         width: number;
         maxHeightReached: boolean;
-        reactElement: import("react").JSX.Element;
+        reactElement: React.JSX.Element;
         html?: string;
     } | {
         features: Map<any, any>;

package/dist/shared/color.d.ts

@@ -51,6 +51,9 @@ export declare function getPairedInsertSizeAndOrientationColor(f1: {
 }, f2: {
     refName: string;
 }, stats?: ChainStats): readonly [string, string];
+export declare function getPairedOrientationColorOrDefault(f: {
+    pair_orientation?: string;
+}): readonly [string, string] | undefined;
 export declare function getPairedOrientationColor(f: {
     pair_orientation?: string;
 }): readonly [string, string];

package/dist/shared/color.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ColorByModel = exports.strokeColor = exports.fillColor = void 0;
 exports.getPairedInsertSizeColor = getPairedInsertSizeColor;
 exports.getPairedInsertSizeAndOrientationColor = getPairedInsertSizeAndOrientationColor;
+exports.getPairedOrientationColorOrDefault = getPairedOrientationColorOrDefault;
 exports.getPairedOrientationColor = getPairedOrientationColor;
 const mobx_state_tree_1 = require("mobx-state-tree");
 const util_1 = require("../util");
@@ -56,24 +57,34 @@ function getPairedInsertSizeColor(f1, f2, stats) {
     if (sameRef && tlen > ((stats === null || stats === void 0 ? void 0 : stats.upper) || 0)) {
         return [exports.fillColor.color_longinsert, exports.strokeColor.color_longinsert];
     }
-    if (sameRef && tlen < ((stats === null || stats === void 0 ? void 0 : stats.lower) || 0)) {
+    else if (sameRef && tlen < ((stats === null || stats === void 0 ? void 0 : stats.lower) || 0)) {
         return [exports.fillColor.color_shortinsert, exports.strokeColor.color_shortinsert];
     }
-    if (!sameRef) {
+    else if (!sameRef) {
         return [exports.fillColor.color_interchrom, exports.strokeColor.color_interchrom];
     }
-    return undefined;
+    else {
+        return undefined;
+    }
 }
+const defaultColor = [exports.fillColor.color_unknown, exports.fillColor.color_unknown];
+// return color scheme with both insert size and orientation coloring,
+// prioritzing orientation coloring
 function getPairedInsertSizeAndOrientationColor(f1, f2, stats) {
-    return (getPairedInsertSizeColor(f1, f2, stats) || getPairedOrientationColor(f1));
+    return (getPairedOrientationColorOrDefault(f1) ||
+        getPairedInsertSizeColor(f1, f2, stats) ||
+        defaultColor);
 }
-function getPairedOrientationColor(f) {
+function getPairedOrientationColorOrDefault(f) {
     const type = util_1.orientationTypes.fr;
-    const type2 = util_1.pairMap[type[f.pair_orientation || '']];
-    return [
-        exports.fillColor[type2] || exports.fillColor.color_unknown,
-        exports.strokeColor[type2] || exports.strokeColor.color_unknown,
-    ];
+    const r = type[f.pair_orientation || ''];
+    const type2 = util_1.pairMap[r];
+    return r === 'LR'
+        ? undefined
+        : [exports.fillColor[type2], exports.strokeColor[type2]];
+}
+function getPairedOrientationColor(f) {
+    return getPairedOrientationColorOrDefault(f) || defaultColor;
 }
 exports.ColorByModel = mobx_state_tree_1.types.maybe(mobx_state_tree_1.types.model({
     type: mobx_state_tree_1.types.string,

package/esm/AlignmentsFeatureDetail/AlignmentsFeatureDetail.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { lazy } from 'react';
 import { Paper } from '@mui/material';
 import { observer } from 'mobx-react';
 import clone from 'clone';
@@ -7,10 +7,12 @@ import { FeatureDetails } from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetai
 import { getTag } from './util';
 import { tags } from './tagInfo';
 // local components
-import SuppAlignments from './SuppAlignments';
 import Flags from './Flags';
 import PairLink from './PairLink';
 import Formatter from './Formatter';
+// lazies
+const SupplementaryAlignments = lazy(() => import('./SupplementaryAlignments'));
+const LinkedPairedAlignments = lazy(() => import('./LinkedPairedAlignments'));
 const omit = ['clipPos', 'flags'];
 const AlignmentsFeatureDetails = observer(function (props) {
     const { model } = props;
@@ -22,7 +24,8 @@ const AlignmentsFeatureDetails = observer(function (props) {
         React.createElement(FeatureDetails, { ...props, omit: omit, 
             // @ts-expect-error
             descriptions: { ...tags, tags: tags }, feature: feat, formatter: (value, key) => key === 'next_segment_position' ? (React.createElement(PairLink, { model: model, locString: value })) : (React.createElement(Formatter, { value: value })) }),
-        SA !== undefined ? (React.createElement(SuppAlignments, { model: model, tag: SA, feature: feat })) : null,
+        SA !== undefined ? (React.createElement(SupplementaryAlignments, { model: model, tag: SA, feature: feat })) : null,
+        flags & 1 ? (React.createElement(LinkedPairedAlignments, { model: model, feature: feat })) : null,
         flags !== undefined ? React.createElement(Flags, { feature: feat, ...props }) : null));
 });
 export default AlignmentsFeatureDetails;

package/esm/AlignmentsFeatureDetail/BreakendMultiLevelOptionDialog.d.ts

@@ -0,0 +1 @@
+export { BreakendMultiLevelOptionDialog as default } from '@jbrowse/sv-core';

package/esm/AlignmentsFeatureDetail/BreakendMultiLevelOptionDialog.js

@@ -0,0 +1,2 @@
+// re-exported for react lazy
+export { BreakendMultiLevelOptionDialog as default } from '@jbrowse/sv-core';

package/esm/AlignmentsFeatureDetail/BreakendSingleLevelOptionDialog.d.ts

@@ -0,0 +1 @@
+export { BreakendSingleLevelOptionDialog as default } from '@jbrowse/sv-core';

package/esm/AlignmentsFeatureDetail/BreakendSingleLevelOptionDialog.js

@@ -0,0 +1,2 @@
+// re-exported for react lazy
+export { BreakendSingleLevelOptionDialog as default } from '@jbrowse/sv-core';

package/esm/AlignmentsFeatureDetail/LaunchPairedEndBreakpointSplitViewPanel.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { SimpleFeatureSerialized } from '@jbrowse/core/util';
+import { ViewType } from '@jbrowse/core/pluggableElementTypes';
+import { AlignmentFeatureWidgetModel } from './stateModelFactory';
+export default function LaunchPairedEndBreakpointSplitViewPanel({ model, feature, viewType, }: {
+    model: AlignmentFeatureWidgetModel;
+    feature: SimpleFeatureSerialized;
+    viewType: ViewType;
+}): React.JSX.Element;

package/esm/AlignmentsFeatureDetail/LaunchPairedEndBreakpointSplitViewPanel.js

@@ -0,0 +1,66 @@
+import React, { lazy } from 'react';
+import { Typography, Link } from '@mui/material';
+import { SimpleFeature, getSession, toLocale, } from '@jbrowse/core/util';
+// lazies
+const BreakendMultiLevelOptionDialog = lazy(() => import('./BreakendMultiLevelOptionDialog'));
+const BreakendSingleLevelOptionDialog = lazy(() => import('./BreakendSingleLevelOptionDialog'));
+export default function LaunchPairedEndBreakpointSplitViewPanel({ model, feature, viewType, }) {
+    const session = getSession(model);
+    const f1 = {
+        uniqueId: feature.uniqueId,
+        refName: feature.refName,
+        start: feature.start,
+        end: feature.end,
+        strand: feature.strand,
+    };
+    const f2 = {
+        uniqueId: `${feature.id}-mate`,
+        refName: feature.next_ref,
+        start: feature.next_pos,
+        end: feature.next_pos + 1,
+        strand: feature.strand,
+    };
+    return (React.createElement("div", null,
+        React.createElement(Typography, null, "Launch split view"),
+        React.createElement("ul", null,
+            React.createElement("li", null,
+                f1.refName,
+                ":",
+                toLocale(f1.start),
+                " -> ",
+                f2.refName,
+                ":",
+                toLocale(f2.start),
+                ' ',
+                React.createElement(Link, { href: "#", onClick: event => {
+                        event.preventDefault();
+                        session.queueDialog(handleClose => [
+                            BreakendMultiLevelOptionDialog,
+                            {
+                                handleClose,
+                                model,
+                                feature: new SimpleFeature({ ...f1, mate: f2 }),
+                                // @ts-expect-error
+                                viewType,
+                                view: model.view,
+                                assemblyName: model.view.displayedRegions[0].assemblyName,
+                            },
+                        ]);
+                    } }, "(top/bottom)"),
+                ' ',
+                React.createElement(Link, { href: "#", onClick: event => {
+                        event.preventDefault();
+                        session.queueDialog(handleClose => [
+                            BreakendSingleLevelOptionDialog,
+                            {
+                                handleClose,
+                                model,
+                                feature: new SimpleFeature({ ...f1, mate: f2 }),
+                                // @ts-expect-error
+                                viewType,
+                                view: model.view,
+                                assemblyName: model.view.displayedRegions[0].assemblyName,
+                            },
+                        ]);
+                    } }, "(single row)")))));
+}