@jbrowse/plugin-alignments 2.10.1 → 2.10.2

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

@@ -1,125 +1,22 @@
 "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 = __importStar(require("react"));
+const react_1 = __importDefault(require("react"));
 const material_1 = require("@mui/material");
 const mobx_react_1 = require("mobx-react");
-const copy_to_clipboard_1 = __importDefault(require("copy-to-clipboard"));
 const clone_1 = __importDefault(require("clone"));
 const BaseFeatureDetail_1 = require("@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail");
 // locals
 const util_1 = require("./util");
-const AlignmentsFeatureSuppAligns_1 = __importDefault(require("./AlignmentsFeatureSuppAligns"));
-const AlignmentsFeatureFlags_1 = __importDefault(require("./AlignmentsFeatureFlags"));
+const tagInfo_1 = require("./tagInfo");
+// local components
+const SuppAlignments_1 = __importDefault(require("./SuppAlignments"));
+const Flags_1 = __importDefault(require("./Flags"));
+const PairLink_1 = __importDefault(require("./PairLink"));
+const Formatter_1 = __importDefault(require("./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] = (0, react_1.useState)(false);
-    const [copied, setCopied] = (0, react_1.useState)(false);
-    const display = String(value);
-    return display.length > 100 ? (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("button", { type: "button", onClick: () => {
-                (0, copy_to_clipboard_1.default)(display);
-                setCopied(true);
-                setTimeout(() => setCopied(false), 700);
-            } }, copied ? 'Copied to clipboard' : 'Copy'),
-        react_1.default.createElement("button", { type: "button", onClick: () => setShow(val => !val) }, show ? 'Show less' : 'Show more'),
-        react_1.default.createElement("div", null, show ? display : `${display.slice(0, 100)}...`))) : (react_1.default.createElement("div", null, display));
-}
-function PairLink({ locString, model, }) {
-    return (react_1.default.createElement(material_1.Link, { onClick: event => {
-            event.preventDefault();
-            // eslint-disable-next-line @typescript-eslint/no-floating-promises
-            (0, util_1.navToLoc)(locString, model);
-        }, href: "#" }, locString));
-}
 const AlignmentsFeatureDetails = (0, mobx_react_1.observer)(function (props) {
     const { model } = props;
     const feat = (0, clone_1.default)(model.featureData);
@@ -127,8 +24,8 @@ const AlignmentsFeatureDetails = (0, mobx_react_1.observer)(function (props) {
     return (react_1.default.createElement(material_1.Paper, { "data-testid": "alignment-side-drawer" },
         react_1.default.createElement(BaseFeatureDetail_1.FeatureDetails, { ...props, omit: omit, 
             // @ts-expect-error
-            descriptions: { ...tags, tags }, feature: feat, formatter: (value, key) => key === 'next_segment_position' ? (react_1.default.createElement(PairLink, { model: model, locString: value })) : (react_1.default.createElement(Formatter, { value: value })) }),
-        SA ? react_1.default.createElement(AlignmentsFeatureSuppAligns_1.default, { model: model, tag: SA }) : null,
-        feat.flags !== undefined ? (react_1.default.createElement(AlignmentsFeatureFlags_1.default, { feature: feat, ...props })) : null));
+            descriptions: { ...tagInfo_1.tags, tags: tagInfo_1.tags }, feature: feat, formatter: (value, key) => key === 'next_segment_position' ? (react_1.default.createElement(PairLink_1.default, { model: model, locString: value })) : (react_1.default.createElement(Formatter_1.default, { value: value })) }),
+        SA ? react_1.default.createElement(SuppAlignments_1.default, { model: model, tag: SA, feature: feat }) : null,
+        feat.flags !== undefined ? react_1.default.createElement(Flags_1.default, { feature: feat, ...props }) : null));
 });
 exports.default = AlignmentsFeatureDetails;

package/dist/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/dist/AlignmentsFeatureDetail/BreakendOptionDialog.js

@@ -0,0 +1,89 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const mobx_react_1 = require("mobx-react");
+const material_1 = require("@mui/material");
+const mui_1 = require("tss-react/mui");
+const util_1 = require("@jbrowse/core/util");
+const ui_1 = require("@jbrowse/core/ui");
+const launchBreakpointSplitView_1 = require("./launchBreakpointSplitView");
+const mobx_state_tree_1 = require("mobx-state-tree");
+const useStyles = (0, mui_1.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_1.default.createElement(material_1.FormControlLabel, { className: classes.block, control: react_1.default.createElement(material_1.Checkbox, { checked: checked, onChange: onChange }), label: label }));
+}
+const BreakendOptionDialog = (0, mobx_react_1.observer)(function ({ model, handleClose, f1, f2, }) {
+    const [copyTracks, setCopyTracks] = (0, react_1.useState)(true);
+    const [mirror, setMirror] = (0, react_1.useState)(true);
+    return (react_1.default.createElement(ui_1.Dialog, { open: true, onClose: handleClose, title: "Breakpoint split view options" },
+        react_1.default.createElement(material_1.DialogContent, null,
+            react_1.default.createElement(Checkbox2, { checked: copyTracks, onChange: event => setCopyTracks(event.target.checked), label: "Copy tracks into the new view" }),
+            react_1.default.createElement(Checkbox2, { checked: mirror, onChange: event => setMirror(event.target.checked), label: "Mirror tracks vertically in vertically stacked view" })),
+        react_1.default.createElement(material_1.DialogActions, null,
+            react_1.default.createElement(material_1.Button, { onClick: () => {
+                    const { view } = model;
+                    const session = (0, util_1.getSession)(model);
+                    try {
+                        const viewSnapshot = (0, launchBreakpointSplitView_1.getBreakpointSplitView)({ view, f1, f2 });
+                        const [view1, view2] = viewSnapshot.views;
+                        // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+                        const viewTracks = (0, mobx_state_tree_1.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_1.default.createElement(material_1.Button, { onClick: () => handleClose(), color: "secondary", variant: "contained" }, "Cancel"))));
+});
+exports.default = BreakendOptionDialog;

package/dist/AlignmentsFeatureDetail/Formatter.d.ts

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

package/dist/AlignmentsFeatureDetail/Formatter.js

@@ -0,0 +1,47 @@
+"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 = __importStar(require("react"));
+const copy_to_clipboard_1 = __importDefault(require("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
+function Formatter({ value }) {
+    const [show, setShow] = (0, react_1.useState)(false);
+    const [copied, setCopied] = (0, react_1.useState)(false);
+    const display = String(value);
+    return display.length > 100 ? (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("button", { type: "button", onClick: () => {
+                (0, copy_to_clipboard_1.default)(display);
+                setCopied(true);
+                setTimeout(() => setCopied(false), 700);
+            } }, copied ? 'Copied to clipboard' : 'Copy'),
+        react_1.default.createElement("button", { type: "button", onClick: () => setShow(val => !val) }, show ? 'Show less' : 'Show more'),
+        react_1.default.createElement("div", null, show ? display : `${display.slice(0, 100)}...`))) : (react_1.default.createElement("div", null, display));
+}
+exports.default = Formatter;

package/dist/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/dist/AlignmentsFeatureDetail/LaunchBreakpointSplitViewPanel.js

@@ -0,0 +1,92 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const material_1 = require("@mui/material");
+const util_1 = require("@jbrowse/core/util");
+const mui_1 = require("tss-react/mui");
+const ui_1 = require("@jbrowse/core/ui");
+const getSAFeatures_1 = require("./getSAFeatures");
+// lazies
+const BreakendOptionDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./BreakendOptionDialog'))));
+const useStyles = (0, mui_1.makeStyles)()({
+    cursor: {
+        cursor: 'pointer',
+    },
+});
+function LaunchBreakpointSplitViewPanel({ model, feature, viewType, }) {
+    const { classes } = useStyles();
+    const session = (0, util_1.getSession)(model);
+    const { view } = model;
+    const [res, setRes] = (0, react_1.useState)();
+    const [error, setError] = (0, react_1.useState)();
+    (0, react_1.useEffect)(() => {
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
+        ;
+        (async () => {
+            try {
+                const feats = await (0, getSAFeatures_1.getSAFeatures)({
+                    view,
+                    feature: new util_1.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_1.default.createElement(react_1.default.Fragment, null, ret.length ? (react_1.default.createElement("div", null,
+        react_1.default.createElement(material_1.Typography, null, "Launch split views with breakend source and target"),
+        error ? react_1.default.createElement(ui_1.ErrorMessage, { error: error }) : null,
+        react_1.default.createElement("ul", null, ret.map((arg, index) => {
+            const [f1, f2] = arg;
+            return (react_1.default.createElement("li", { key: `${JSON.stringify(arg)}-${index}` },
+                react_1.default.createElement(material_1.Tooltip, { title: "Top panel->Bottom panel" },
+                    react_1.default.createElement(material_1.Link, { href: "#", className: classes.cursor, onClick: event => {
+                            event.preventDefault();
+                            session.queueDialog(handleClose => [
+                                BreakendOptionDialog,
+                                { handleClose, f1, f2, model, viewType },
+                            ]);
+                        } },
+                        f1.refName,
+                        ":",
+                        (0, util_1.toLocale)(f1.strand === 1 ? f1.end : f1.start),
+                        " ->",
+                        ' ',
+                        f2.refName,
+                        ":",
+                        (0, util_1.toLocale)(f2.strand === 1 ? f2.start : f2.end)))));
+        })))) : null));
+}
+exports.default = LaunchBreakpointSplitViewPanel;

package/dist/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/dist/AlignmentsFeatureDetail/PairLink.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const material_1 = require("@mui/material");
+const util_1 = require("./util");
+function PairLink({ locString, model, }) {
+    return (react_1.default.createElement(material_1.Link, { onClick: event => {
+            event.preventDefault();
+            // eslint-disable-next-line @typescript-eslint/no-floating-promises
+            (0, util_1.navToLoc)(locString, model);
+        }, href: "#" }, locString));
+}
+exports.default = PairLink;

package/dist/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/dist/AlignmentsFeatureDetail/SuppAlignments.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const BaseFeatureDetail_1 = require("@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail");
+const util_1 = require("@jbrowse/core/util");
+const SuppAlignmentsLocStrings_1 = __importDefault(require("./SuppAlignmentsLocStrings"));
+const LaunchBreakpointSplitViewPanel_1 = __importDefault(require("./LaunchBreakpointSplitViewPanel"));
+function SuppAlignments(props) {
+    const { model, tag, feature } = props;
+    const session = (0, util_1.getSession)(model);
+    const { pluginManager } = (0, util_1.getEnv)(session);
+    let viewType;
+    try {
+        viewType = pluginManager.getViewType('BreakpointSplitView');
+    }
+    catch (e) {
+        // ignore
+    }
+    return (react_1.default.createElement(BaseFeatureDetail_1.BaseCard, { ...props, title: "Supplementary alignments" },
+        react_1.default.createElement(SuppAlignmentsLocStrings_1.default, { model: model, tag: tag }),
+        viewType ? (react_1.default.createElement(LaunchBreakpointSplitViewPanel_1.default, { viewType: viewType, model: model, feature: feature })) : null));
+}
+exports.default = SuppAlignments;

package/dist/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/dist/AlignmentsFeatureDetail/{AlignmentsFeatureSuppAligns.js → SuppAlignmentsLocStrings.js}

@@ -5,12 +5,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const material_1 = require("@mui/material");
-const BaseFeatureDetail_1 = require("@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail");
+// locals
 const MismatchParser_1 = require("../MismatchParser");
 const util_1 = require("./util");
-function SupplementaryAlignments(props) {
-    const { tag, model } = props;
-    return (react_1.default.createElement(BaseFeatureDetail_1.BaseCard, { ...props, title: "Supplementary alignments" },
+function SuppAlignmentsLocStrings({ tag, model, }) {
+    return (react_1.default.createElement("div", null,
         react_1.default.createElement(material_1.Typography, null, "List of supplementary alignment locations"),
         react_1.default.createElement("ul", null, tag
             .split(';')
@@ -21,7 +20,9 @@ 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]`;
@@ -30,7 +31,7 @@ function SupplementaryAlignments(props) {
                         event.preventDefault();
                         // eslint-disable-next-line @typescript-eslint/no-floating-promises
                         (0, util_1.navToLoc)(locString, model);
-                    }, href: "#" }, displayString)));
+                    } }, displayString)));
         }))));
 }
-exports.default = SupplementaryAlignments;
+exports.default = SuppAlignmentsLocStrings;

package/dist/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/dist/AlignmentsFeatureDetail/configSchema.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.configSchema = void 0;
+const configuration_1 = require("@jbrowse/core/configuration");
+exports.configSchema = (0, configuration_1.ConfigurationSchema)('AlignmentsFeatureWidget', {});

package/dist/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[]>;

package/dist/AlignmentsFeatureDetail/getSAFeatures.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSAFeatures = void 0;
+const util_1 = require("@jbrowse/core/util");
+// locals
+const MismatchParser_1 = require("../MismatchParser");
+const util_2 = require("../util");
+async function getSAFeatures({ view, feature, }) {
+    const { assemblyManager } = (0, util_1.getSession)(view);
+    const cigar = feature.get('CIGAR');
+    const origStrand = feature.get('strand');
+    const SA = (0, util_2.getTag)(feature, 'SA') || '';
+    const readName = feature.get('name');
+    const clipPos = (0, MismatchParser_1.getClip)(cigar, 1);
+    // get the canonical refname for the read because if the
+    // read.get('refName') is chr1 and the actual fasta refName is 1 then no
+    // tracks can be opened on the top panel of the linear read vs ref
+    const assembly = await assemblyManager.waitForAssembly(view.assemblyNames[0]);
+    if (!assembly) {
+        throw new Error('assembly not found');
+    }
+    const suppAlns = (0, MismatchParser_1.featurizeSA)(SA, feature.id(), origStrand, readName, true);
+    const feat = feature.toJSON();
+    feat.clipPos = clipPos;
+    feat.strand = 1;
+    feat.mate = {
+        refName: readName,
+        start: clipPos,
+        end: clipPos + (0, MismatchParser_1.getLengthSansClipping)(cigar),
+    };
+    const features = [feat, ...suppAlns];
+    features.forEach((f, idx) => {
+        f.refName = (assembly === null || assembly === void 0 ? void 0 : assembly.getCanonicalRefName(f.refName)) || f.refName;
+        f.syntenyId = idx;
+        f.mate.syntenyId = idx;
+        f.mate.uniqueId = `${f.uniqueId}_mate`;
+    });
+    features.sort((a, b) => a.clipPos - b.clipPos);
+    return features;
+}
+exports.getSAFeatures = getSAFeatures;