@jbrowse/plugin-alignments 2.10.1 → 2.10.2

package/dist/LinearPileupDisplay/model.js

@@ -40,8 +40,8 @@ const Sort_1 = __importDefault(require("@mui/icons-material/Sort"));
 const SharedLinearPileupDisplayMixin_1 = require("./SharedLinearPileupDisplayMixin");
 const mobx_1 = require("mobx");
 // async
-const SortByTagDlg = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./components/SortByTag'))));
-const ModificationsDlg = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./components/ColorByModifications'))));
+const SortByTagDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./components/SortByTag'))));
+const ModificationsDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./components/ColorByModifications'))));
 /**
  * #stateModel LinearPileupDisplay
  * #category display
@@ -265,7 +265,7 @@ function stateModelFactory(configSchema) {
                                 label: 'Sort by tag...',
                                 onClick: () => {
                                     (0, util_1.getSession)(self).queueDialog(handleClose => [
-                                        SortByTagDlg,
+                                        SortByTagDialog,
                                         { model: self, handleClose },
                                     ]);
                                 },
@@ -287,7 +287,7 @@ function stateModelFactory(configSchema) {
                                 label: 'Modifications or methylation',
                                 onClick: () => {
                                     (0, util_1.getSession)(self).queueDialog(doneCallback => [
-                                        ModificationsDlg,
+                                        ModificationsDialog,
                                         { model: self, handleClose: doneCallback },
                                     ]);
                                 },

package/dist/LinearReadArcsDisplay/model.d.ts

@@ -61,7 +61,9 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
         } & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IModelType<{
             id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
             type: import("mobx-state-tree").ISimpleType<string>;
-            rpcDriverName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
+            rpcDriverName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>; /**
+             * #property
+             */
         }, {
             rendererTypeName: string;
             error: unknown;
@@ -80,7 +82,9 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
             error: unknown;
             message: string | undefined;
         } & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IModelType<{
-            id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
+            id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>; /**
+             * #action
+             */
             type: import("mobx-state-tree").ISimpleType<string>;
             rpcDriverName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
         }, {
@@ -90,17 +94,13 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
         }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
     }> | null;
     readonly adapterConfig: any;
-    readonly parentTrack: any; /**
-     * #action
-     */
+    readonly parentTrack: any;
     renderProps(): any;
     readonly rendererType: import("@jbrowse/core/pluggableElementTypes").RendererType;
     readonly DisplayMessageComponent: React.FC<any> | undefined;
     trackMenuItems(): import("@jbrowse/core/ui").MenuItem[];
     readonly viewMenuActions: import("@jbrowse/core/ui").MenuItem[];
-    regionCannotBeRendered(): null; /**
-     * #getter
-     */
+    regionCannotBeRendered(): null;
 } & {
     setMessage(arg?: string | undefined): void;
     setError(error?: unknown): void; /**

package/dist/LinearReadArcsDisplay/model.js

@@ -38,7 +38,7 @@ const ClearAll_1 = __importDefault(require("@mui/icons-material/ClearAll"));
 // locals
 const shared_1 = require("../shared");
 // async
-const FilterByTagDlg = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('../shared/FilterByTag'))));
+const FilterByTagDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('../shared/FilterByTag'))));
 /**
  * #stateModel LinearReadArcsDisplay
  * the arc display is a non-block-based track, so draws to a single canvas and
@@ -220,7 +220,7 @@ function stateModelFactory(configSchema) {
                         icon: ClearAll_1.default,
                         onClick: () => {
                             (0, util_1.getSession)(self).queueDialog(handleClose => [
-                                FilterByTagDlg,
+                                FilterByTagDialog,
                                 { model: self, handleClose },
                             ]);
                         },

package/dist/LinearReadCloudDisplay/model.d.ts

@@ -44,6 +44,14 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
     message: string | undefined;
 } & {
     readonly RenderingComponent: React.FC<{
+        /**
+         * #stateModel LinearReadCloudDisplay
+         * it is not a block based track, hence not BaseLinearDisplay
+         * extends
+         * - [BaseDisplay](../basedisplay)
+         * - [TrackHeightMixin](../trackheightmixin)
+         * - [FeatureDensityMixin](../featuredensitymixin)
+         */
         model: {
             id: string;
             type: string;
@@ -55,9 +63,6 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
         } & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IModelType<{
             id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
             type: import("mobx-state-tree").ISimpleType<string>;
-            /**
-             * #property
-             */
             rpcDriverName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
         }, {
             rendererTypeName: string;
@@ -78,7 +83,11 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
             message: string | undefined;
         } & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IModelType<{
             id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
-            type: import("mobx-state-tree").ISimpleType<string>;
+            type: import("mobx-state-tree").ISimpleType<string>; /**
+             * #action
+             * internal, a reference to a HTMLCanvas because we use a autorun to draw
+             * the canvas
+             */
             rpcDriverName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
         }, {
             rendererTypeName: string;
@@ -130,9 +139,6 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
     readonly regionTooLarge: boolean;
     readonly regionTooLargeReason: string;
 } & {
-    /**
-     * #method
-     */
     regionCannotBeRenderedText(_region: import("@jbrowse/core/util").Region): "" | "Force load to see features";
     regionCannotBeRendered(_region: import("@jbrowse/core/util").Region): React.JSX.Element | null;
 } & {

package/dist/LinearReadCloudDisplay/model.js

@@ -38,7 +38,7 @@ const ClearAll_1 = __importDefault(require("@mui/icons-material/ClearAll"));
 // locals
 const shared_1 = require("../shared");
 // async
-const FilterByTagDlg = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('../shared/FilterByTag'))));
+const FilterByTagDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('../shared/FilterByTag'))));
 /**
  * #stateModel LinearReadCloudDisplay
  * it is not a block based track, hence not BaseLinearDisplay
@@ -170,7 +170,7 @@ function stateModelFactory(configSchema) {
                         icon: ClearAll_1.default,
                         onClick: () => {
                             (0, util_1.getSession)(self).queueDialog(handleClose => [
-                                FilterByTagDlg,
+                                FilterByTagDialog,
                                 { model: self, handleClose },
                             ]);
                         },

package/dist/LinearSNPCoverageDisplay/components/Tooltip.js

@@ -5,8 +5,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const mobx_react_1 = require("mobx-react");
+const util_1 = require("@jbrowse/core/util");
 const plugin_wiggle_1 = require("@jbrowse/plugin-wiggle");
-const en = (n) => n.toLocaleString('en-US');
 const toP = (s = 0) => +(+s).toFixed(1);
 const pct = (n, total) => `${toP((n / (total || 1)) * 100)}%`;
 const TooltipContents = react_1.default.forwardRef(function TooltipContents2({ feature }, reactRef) {
@@ -14,7 +14,10 @@ const TooltipContents = react_1.default.forwardRef(function TooltipContents2({ f
     const end = feature.get('end');
     const name = feature.get('refName');
     const { refbase, all, total, ref, '-1': rn1, '1': r1, '0': r0, ...info } = feature.get('snpinfo');
-    const loc = [name, start === end ? en(start) : `${en(start)}..${en(end)}`]
+    const loc = [
+        name,
+        start === end ? (0, util_1.toLocale)(start) : `${(0, util_1.toLocale)(start)}..${(0, util_1.toLocale)(end)}`,
+    ]
         .filter(f => !!f)
         .join(':');
     return (react_1.default.createElement("div", { ref: reactRef },

package/esm/AlignmentsFeatureDetail/AlignmentsFeatureDetail.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { IAnyStateTreeNode } from 'mobx-state-tree';
+import { AlignmentFeatureWidgetModel } from './stateModelFactory';
 declare const AlignmentsFeatureDetails: (props: {
-    model: IAnyStateTreeNode;
+    model: AlignmentFeatureWidgetModel;
 }) => React.JSX.Element;
 export default AlignmentsFeatureDetails;

package/esm/AlignmentsFeatureDetail/AlignmentsFeatureDetail.js

@@ -1,97 +1,17 @@
-import React, { useState } from 'react';
-import { Link, Paper } from '@mui/material';
+import React from 'react';
+import { Paper } from '@mui/material';
 import { observer } from 'mobx-react';
-import copy from 'copy-to-clipboard';
 import clone from 'clone';
 import { FeatureDetails } from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail';
 // locals
-import { getTag, navToLoc } from './util';
-import SupplementaryAlignments from './AlignmentsFeatureSuppAligns';
-import AlignmentFlags from './AlignmentsFeatureFlags';
+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';
 const omit = ['clipPos', 'flags'];
-const tags = {
-    AM: 'The smallest template-independent mapping quality in the template',
-    AS: 'Alignment score generated by aligner',
-    BC: 'Barcode sequence identifying the sample',
-    BQ: 'Offset to base alignment quality (BAQ)',
-    BZ: 'Phred quality of the unique molecular barcode bases in the {OX} tag',
-    CB: 'Cell identifier',
-    CC: 'Reference name of the next hit',
-    CM: 'Edit distance between the color sequence and the color reference (see also {NM})',
-    CO: 'Free-text comments',
-    CP: 'Leftmost coordinate of the next hit',
-    CQ: 'Color read base qualities',
-    CR: 'Cellular barcode sequence bases (uncorrected)',
-    CS: 'Color read sequence',
-    CT: 'Complete read annotation tag, used for consensus annotation dummy features',
-    CY: 'Phred quality of the cellular barcode sequence in the {CR} tag',
-    E2: 'The 2nd most likely base calls',
-    FI: 'The index of segment in the template',
-    FS: 'Segment suffix',
-    FZ: 'Flow signal intensities',
-    GC: 'Reserved for backwards compatibility reasons',
-    GQ: 'Reserved for backwards compatibility reasons',
-    GS: 'Reserved for backwards compatibility reasons',
-    H0: 'Number of perfect hits',
-    H1: 'Number of 1-difference hits (see also {NM})',
-    H2: 'Number of 2-difference hits',
-    HI: 'Query hit index',
-    IH: 'Query hit total count',
-    LB: 'Library',
-    MC: 'CIGAR string for mate/next segment',
-    MD: 'String encoding mismatched and deleted reference bases',
-    MF: 'Reserved for backwards compatibility reasons',
-    MI: 'Molecular identifier; a string that uniquely identifies the molecule from which the record was derived',
-    ML: 'Base modification probabilities',
-    MM: 'Base modifications / methylation ',
-    MQ: 'Mapping quality of the mate/next segment',
-    NH: 'Number of reported alignments that contain the query in the current record',
-    NM: 'Edit distance to the reference',
-    OA: 'Original alignment',
-    OC: 'Original CIGAR (deprecated; use {OA} instead)',
-    OP: 'Original mapping position (deprecated; use {OA} instead)',
-    OQ: 'Original base quality',
-    OX: 'Original unique molecular barcode bases',
-    PG: 'Program',
-    PQ: 'Phred likelihood of the template',
-    PT: 'Read annotations for parts of the padded read sequence',
-    PU: 'Platform unit',
-    Q2: 'Phred quality of the mate/next segment sequence in the {R2} tag',
-    QT: 'Phred quality of the sample barcode sequence in the {BC} tag',
-    QX: 'Quality score of the unique molecular identifier in the {RX} tag',
-    R2: 'Sequence of the mate/next segment in the template',
-    RG: 'Read group',
-    RT: 'Reserved for backwards compatibility reasons',
-    RX: 'Sequence bases of the (possibly corrected) unique molecular identifier',
-    S2: 'Reserved for backwards compatibility reasons',
-    SA: 'Other canonical alignments in a chimeric alignment',
-    SM: 'Template-independent mapping quality',
-    SQ: 'Reserved for backwards compatibility reasons',
-    TC: 'The number of segments in the template',
-    TS: 'Transcript strand',
-    U2: 'Phred probability of the 2nd call being wrong conditional on the best being wrong',
-    UQ: 'Phred likelihood of the segment, conditional on the mapping being correct',
-};
-function Formatter({ value }) {
-    const [show, setShow] = useState(false);
-    const [copied, setCopied] = useState(false);
-    const display = String(value);
-    return display.length > 100 ? (React.createElement(React.Fragment, null,
-        React.createElement("button", { type: "button", onClick: () => {
-                copy(display);
-                setCopied(true);
-                setTimeout(() => setCopied(false), 700);
-            } }, copied ? 'Copied to clipboard' : 'Copy'),
-        React.createElement("button", { type: "button", onClick: () => setShow(val => !val) }, show ? 'Show less' : 'Show more'),
-        React.createElement("div", null, show ? display : `${display.slice(0, 100)}...`))) : (React.createElement("div", null, display));
-}
-function PairLink({ locString, model, }) {
-    return (React.createElement(Link, { onClick: event => {
-            event.preventDefault();
-            // eslint-disable-next-line @typescript-eslint/no-floating-promises
-            navToLoc(locString, model);
-        }, href: "#" }, locString));
-}
 const AlignmentsFeatureDetails = observer(function (props) {
     const { model } = props;
     const feat = clone(model.featureData);
@@ -99,8 +19,8 @@ const AlignmentsFeatureDetails = observer(function (props) {
     return (React.createElement(Paper, { "data-testid": "alignment-side-drawer" },
         React.createElement(FeatureDetails, { ...props, omit: omit, 
             // @ts-expect-error
-            descriptions: { ...tags, tags }, feature: feat, formatter: (value, key) => key === 'next_segment_position' ? (React.createElement(PairLink, { model: model, locString: value })) : (React.createElement(Formatter, { value: value })) }),
-        SA ? React.createElement(SupplementaryAlignments, { model: model, tag: SA }) : null,
-        feat.flags !== undefined ? (React.createElement(AlignmentFlags, { feature: feat, ...props })) : null));
+            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 ? React.createElement(SuppAlignments, { model: model, tag: SA, feature: feat }) : null,
+        feat.flags !== undefined ? React.createElement(Flags, { feature: feat, ...props }) : null));
 });
 export default AlignmentsFeatureDetails;

package/esm/AlignmentsFeatureDetail/BreakendOptionDialog.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ViewType } from '@jbrowse/core/pluggableElementTypes';
+import { AlignmentFeatureWidgetModel } from './stateModelFactory';
+import { ReducedFeature } from './getSAFeatures';
+declare const BreakendOptionDialog: ({ model, handleClose, f1, f2, }: {
+    model: AlignmentFeatureWidgetModel;
+    handleClose: () => void;
+    f1: ReducedFeature;
+    f2: ReducedFeature;
+    viewType: ViewType;
+}) => React.JSX.Element;
+export default BreakendOptionDialog;

package/esm/AlignmentsFeatureDetail/BreakendOptionDialog.js

@@ -0,0 +1,64 @@
+import React, { useState } from 'react';
+import { observer } from 'mobx-react';
+import { Button, Checkbox, DialogActions, DialogContent, FormControlLabel, } from '@mui/material';
+import { makeStyles } from 'tss-react/mui';
+import { getSession } from '@jbrowse/core/util';
+import { Dialog } from '@jbrowse/core/ui';
+import { getBreakpointSplitView } from './launchBreakpointSplitView';
+import { getSnapshot } from 'mobx-state-tree';
+const useStyles = makeStyles()({
+    block: {
+        display: 'block',
+    },
+});
+function stripIds(arr) {
+    return arr.map(({ id, displays, ...rest }) => ({
+        ...rest,
+        displays: displays.map(({ id, ...rest }) => rest),
+    }));
+}
+function Checkbox2({ checked, label, onChange, }) {
+    const { classes } = useStyles();
+    return (React.createElement(FormControlLabel, { className: classes.block, control: React.createElement(Checkbox, { checked: checked, onChange: onChange }), label: label }));
+}
+const BreakendOptionDialog = observer(function ({ model, handleClose, f1, f2, }) {
+    const [copyTracks, setCopyTracks] = useState(true);
+    const [mirror, setMirror] = useState(true);
+    return (React.createElement(Dialog, { open: true, onClose: handleClose, title: "Breakpoint split view options" },
+        React.createElement(DialogContent, null,
+            React.createElement(Checkbox2, { checked: copyTracks, onChange: event => setCopyTracks(event.target.checked), label: "Copy tracks into the new view" }),
+            React.createElement(Checkbox2, { checked: mirror, onChange: event => setMirror(event.target.checked), label: "Mirror tracks vertically in vertically stacked view" })),
+        React.createElement(DialogActions, null,
+            React.createElement(Button, { onClick: () => {
+                    const { view } = model;
+                    const session = getSession(model);
+                    try {
+                        const viewSnapshot = getBreakpointSplitView({ view, f1, f2 });
+                        const [view1, view2] = viewSnapshot.views;
+                        // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+                        const viewTracks = getSnapshot(view.tracks);
+                        session.addView('BreakpointSplitView', {
+                            ...viewSnapshot,
+                            views: [
+                                {
+                                    ...view1,
+                                    tracks: stripIds(viewTracks),
+                                    offsetPx: view1.offsetPx - view.width / 2 + 100,
+                                },
+                                {
+                                    ...view2,
+                                    tracks: stripIds(mirror ? [...viewTracks].reverse() : viewTracks),
+                                    offsetPx: view2.offsetPx - view.width / 2 + 100,
+                                },
+                            ],
+                        });
+                    }
+                    catch (e) {
+                        console.error(e);
+                        session.notify(`${e}`);
+                    }
+                    handleClose();
+                }, variant: "contained", color: "primary", autoFocus: true }, "OK"),
+            React.createElement(Button, { onClick: () => handleClose(), color: "secondary", variant: "contained" }, "Cancel"))));
+});
+export default BreakendOptionDialog;

package/esm/AlignmentsFeatureDetail/Formatter.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export default function Formatter({ value }: {
+    value: unknown;
+}): React.JSX.Element;

package/esm/AlignmentsFeatureDetail/Formatter.js

@@ -0,0 +1,18 @@
+import React, { useState } from 'react';
+import copy from 'copy-to-clipboard';
+// this 'show more...' used specifically as a formatter on alignments feature
+// details because long SEQ or CRAM files, even a single div full of a ton of
+// data from a long read, can slow down the rest of the app
+export default function Formatter({ value }) {
+    const [show, setShow] = useState(false);
+    const [copied, setCopied] = useState(false);
+    const display = String(value);
+    return display.length > 100 ? (React.createElement(React.Fragment, null,
+        React.createElement("button", { type: "button", onClick: () => {
+                copy(display);
+                setCopied(true);
+                setTimeout(() => setCopied(false), 700);
+            } }, copied ? 'Copied to clipboard' : 'Copy'),
+        React.createElement("button", { type: "button", onClick: () => setShow(val => !val) }, show ? 'Show less' : 'Show more'),
+        React.createElement("div", null, show ? display : `${display.slice(0, 100)}...`))) : (React.createElement("div", null, display));
+}

package/esm/AlignmentsFeatureDetail/LaunchBreakpointSplitViewPanel.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 LaunchBreakpointSplitViewPanel({ model, feature, viewType, }: {
+    model: AlignmentFeatureWidgetModel;
+    feature: SimpleFeatureSerialized;
+    viewType: ViewType;
+}): React.JSX.Element;

package/esm/AlignmentsFeatureDetail/LaunchBreakpointSplitViewPanel.js

@@ -0,0 +1,66 @@
+import React, { lazy, useEffect, useState } from 'react';
+import { Typography, Link, Tooltip } from '@mui/material';
+import { SimpleFeature, getSession, toLocale, } from '@jbrowse/core/util';
+import { makeStyles } from 'tss-react/mui';
+import { ErrorMessage } from '@jbrowse/core/ui';
+import { getSAFeatures } from './getSAFeatures';
+// lazies
+const BreakendOptionDialog = lazy(() => import('./BreakendOptionDialog'));
+const useStyles = makeStyles()({
+    cursor: {
+        cursor: 'pointer',
+    },
+});
+export default function LaunchBreakpointSplitViewPanel({ model, feature, viewType, }) {
+    const { classes } = useStyles();
+    const session = getSession(model);
+    const { view } = model;
+    const [res, setRes] = useState();
+    const [error, setError] = useState();
+    useEffect(() => {
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
+        ;
+        (async () => {
+            try {
+                const feats = await getSAFeatures({
+                    view,
+                    feature: new SimpleFeature(feature),
+                });
+                setRes(feats);
+            }
+            catch (e) {
+                setError(e);
+                console.error(e);
+            }
+        })();
+    }, [feature, view]);
+    const ret = [];
+    if (res) {
+        for (let i = 0; i < res.length - 1; i++) {
+            ret.push([res[i], res[i + 1]]);
+        }
+    }
+    return (React.createElement(React.Fragment, null, ret.length ? (React.createElement("div", null,
+        React.createElement(Typography, null, "Launch split views with breakend source and target"),
+        error ? React.createElement(ErrorMessage, { error: error }) : null,
+        React.createElement("ul", null, ret.map((arg, index) => {
+            const [f1, f2] = arg;
+            return (React.createElement("li", { key: `${JSON.stringify(arg)}-${index}` },
+                React.createElement(Tooltip, { title: "Top panel->Bottom panel" },
+                    React.createElement(Link, { href: "#", className: classes.cursor, onClick: event => {
+                            event.preventDefault();
+                            session.queueDialog(handleClose => [
+                                BreakendOptionDialog,
+                                { handleClose, f1, f2, model, viewType },
+                            ]);
+                        } },
+                        f1.refName,
+                        ":",
+                        toLocale(f1.strand === 1 ? f1.end : f1.start),
+                        " ->",
+                        ' ',
+                        f2.refName,
+                        ":",
+                        toLocale(f2.strand === 1 ? f2.start : f2.end)))));
+        })))) : null));
+}

package/esm/AlignmentsFeatureDetail/PairLink.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { AlignmentFeatureWidgetModel } from './stateModelFactory';
+export default function PairLink({ locString, model, }: {
+    locString: string;
+    model: AlignmentFeatureWidgetModel;
+}): React.JSX.Element;

package/esm/AlignmentsFeatureDetail/PairLink.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Link } from '@mui/material';
+import { navToLoc } from './util';
+export default function PairLink({ locString, model, }) {
+    return (React.createElement(Link, { onClick: event => {
+            event.preventDefault();
+            // eslint-disable-next-line @typescript-eslint/no-floating-promises
+            navToLoc(locString, model);
+        }, href: "#" }, locString));
+}

package/esm/AlignmentsFeatureDetail/SuppAlignments.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { SimpleFeatureSerialized } from '@jbrowse/core/util';
+import { AlignmentFeatureWidgetModel } from './stateModelFactory';
+export default function SuppAlignments(props: {
+    tag: string;
+    model: AlignmentFeatureWidgetModel;
+    feature: SimpleFeatureSerialized;
+}): React.JSX.Element;

package/esm/AlignmentsFeatureDetail/SuppAlignments.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { BaseCard } from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail';
+import { getEnv, getSession } from '@jbrowse/core/util';
+import SuppAlignmentsLocStrings from './SuppAlignmentsLocStrings';
+import LaunchBreakpointSplitViewPanel from './LaunchBreakpointSplitViewPanel';
+export default function SuppAlignments(props) {
+    const { model, tag, feature } = props;
+    const session = getSession(model);
+    const { pluginManager } = getEnv(session);
+    let viewType;
+    try {
+        viewType = pluginManager.getViewType('BreakpointSplitView');
+    }
+    catch (e) {
+        // ignore
+    }
+    return (React.createElement(BaseCard, { ...props, title: "Supplementary alignments" },
+        React.createElement(SuppAlignmentsLocStrings, { model: model, tag: tag }),
+        viewType ? (React.createElement(LaunchBreakpointSplitViewPanel, { viewType: viewType, model: model, feature: feature })) : null));
+}

package/esm/AlignmentsFeatureDetail/SuppAlignmentsLocStrings.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { AlignmentFeatureWidgetModel } from './stateModelFactory';
+export default function SuppAlignmentsLocStrings({ tag, model, }: {
+    tag: string;
+    model: AlignmentFeatureWidgetModel;
+}): React.JSX.Element;

package/esm/AlignmentsFeatureDetail/{AlignmentsFeatureSuppAligns.js → SuppAlignmentsLocStrings.js}

@@ -1,11 +1,10 @@
 import React from 'react';
 import { Typography, Link } from '@mui/material';
-import { BaseCard } from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail';
+// locals
 import { getLengthOnRef } from '../MismatchParser';
 import { navToLoc } from './util';
-export default function SupplementaryAlignments(props) {
-    const { tag, model } = props;
-    return (React.createElement(BaseCard, { ...props, title: "Supplementary alignments" },
+export default function SuppAlignmentsLocStrings({ tag, model, }) {
+    return (React.createElement("div", null,
         React.createElement(Typography, null, "List of supplementary alignment locations"),
         React.createElement("ul", null, tag
             .split(';')
@@ -16,7 +15,9 @@ export default function SupplementaryAlignments(props) {
             const extra = Math.floor(saLength / 5);
             const start = +saStart;
             const end = +saStart + saLength;
-            const locString = `${saRef}:${Math.max(1, start - extra)}-${end + extra}`;
+            const sp = start - extra;
+            const ep = end + extra;
+            const locString = `${saRef}:${Math.max(1, sp)}-${ep}`;
             const displayStart = start.toLocaleString('en-US');
             const displayEnd = end.toLocaleString('en-US');
             const displayString = `${saRef}:${displayStart}-${displayEnd} (${saStrand}) [${saLength}bp]`;
@@ -25,6 +26,6 @@ export default function SupplementaryAlignments(props) {
                         event.preventDefault();
                         // eslint-disable-next-line @typescript-eslint/no-floating-promises
                         navToLoc(locString, model);
-                    }, href: "#" }, displayString)));
+                    } }, displayString)));
         }))));
 }

package/esm/AlignmentsFeatureDetail/configSchema.d.ts

@@ -0,0 +1 @@
+export declare const configSchema: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>;

package/esm/AlignmentsFeatureDetail/configSchema.js

@@ -0,0 +1,2 @@
+import { ConfigurationSchema } from '@jbrowse/core/configuration';
+export const configSchema = ConfigurationSchema('AlignmentsFeatureWidget', {});

package/esm/AlignmentsFeatureDetail/getSAFeatures.d.ts

@@ -0,0 +1,23 @@
+import { Feature } from '@jbrowse/core/util';
+import { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view';
+export interface ReducedFeature {
+    refName: string;
+    start: number;
+    clipPos: number;
+    end: number;
+    strand: number;
+    seqLength: number;
+    syntenyId?: number;
+    uniqueId: string;
+    mate: {
+        refName: string;
+        start: number;
+        end: number;
+        syntenyId?: number;
+        uniqueId?: string;
+    };
+}
+export declare function getSAFeatures({ view, feature, }: {
+    view: LinearGenomeViewModel;
+    feature: Feature;
+}): Promise<ReducedFeature[]>;