@jbrowse/plugin-alignments 2.10.1 → 2.10.3

package/dist/LinearPileupDisplay/model.d.ts

@@ -43,11 +43,15 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
         message: string | undefined;
         maxHeightReached: boolean;
         ReactComponent: ({ model, }: {
-            model: any;
-        }) => any;
-        /**
-         * #property
-         */
+            model: {
+                error?: unknown;
+                reload: () => void;
+                message: import("react").ReactNode;
+                filled?: boolean | undefined;
+                status?: string | undefined;
+                reactElement?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+            };
+        }) => import("react").JSX.Element | undefined;
         renderProps: any;
     } & {
         doReload(): void;
@@ -77,12 +81,6 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
             defaultValue: number;
             description: string;
         };
-        /**
-         * #stateModel LinearPileupDisplay
-         * #category display
-         * extends
-         *- [SharedLinearPileupDisplayMixin](../sharedlinearpileupdisplaymixin)
-         */
         height: {
             type: string;
             defaultValue: number;
@@ -98,6 +96,9 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
 } & {
     configuration: AnyConfigurationSchemaType;
     featureHeight: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
+    /**
+     * #action
+     */
     noSpacing: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<boolean>>;
     fadeLikelihood: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<boolean>>;
     trackMaxHeight: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
@@ -162,15 +163,15 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
         } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
             rendererTypeName: string;
             error: unknown;
-            message: string | undefined;
+            message: string | undefined; /**
+             * #action
+             */
         } & 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>>;
         }, {
-            rendererTypeName: string; /**
-             * #action
-             */
+            rendererTypeName: string;
             error: unknown;
             message: string | undefined;
         }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
@@ -184,7 +185,9 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
     readonly viewMenuActions: import("@jbrowse/core/ui").MenuItem[];
     regionCannotBeRendered(): null;
 } & {
-    setMessage(arg?: string | undefined): void;
+    setMessage(arg?: string | undefined): void; /**
+     * #getter
+     */
     setError(error?: unknown): void;
     setRpcDriverName(rpcDriverName: string): void;
     reload(): void;
@@ -201,9 +204,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
     featureDensityStats: import("@jbrowse/core/data_adapters/BaseAdapter").FeatureDensityStats | undefined;
     currStatsBpPerPx: number;
 } & {
-    readonly currentBytesRequested: number; /**
-     * #property
-     */
+    readonly currentBytesRequested: number;
     readonly currentFeatureScreenDensity: number;
     readonly maxFeatureScreenDensity: any;
     readonly featureDensityStatsReady: boolean;
@@ -224,18 +225,13 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
     regionCannotBeRenderedText(_region: import("@jbrowse/core/util").Region): "" | "Force load to see features";
     regionCannotBeRendered(_region: import("@jbrowse/core/util").Region): import("react").JSX.Element | null;
 } & {
-    featureIdUnderMouse: string | undefined; /**
-     * #action
-     */
+    featureIdUnderMouse: string | undefined;
     contextMenuFeature: import("@jbrowse/core/util").Feature | undefined;
 } & {
     readonly blockType: "dynamicBlocks" | "staticBlocks";
     readonly blockDefinitions: import("@jbrowse/core/util/blockTypes").BlockSet;
 } & {
     readonly renderDelay: number;
-    /**
-     * #action
-     */
     readonly TooltipComponent: import("react").FC<any>;
     readonly selectedFeatureId: string | undefined;
     readonly DisplayMessageComponent: import("react").FC<any> | undefined;
@@ -263,7 +259,9 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
     afterAttach(): void;
 } & {
     colorTagMap: import("mobx").ObservableMap<string, string>;
-    featureUnderMouseVolatile: import("@jbrowse/core/util").Feature | undefined;
+    featureUnderMouseVolatile: import("@jbrowse/core/util").Feature | undefined; /**
+     * #action
+     */
     tagsReady: boolean;
 } & {
     readonly autorunReady: boolean;

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/dist/LinearSNPCoverageDisplay/models/model.d.ts

@@ -42,8 +42,17 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
         message: string | undefined;
         maxHeightReached: boolean;
         ReactComponent: ({ model, }: {
-            model: any;
-        }) => any;
+            model: {
+                error?: unknown;
+                reload: () => void;
+                message: import("react").ReactNode; /**
+                 * #property
+                 */
+                filled?: boolean | undefined;
+                status?: string | undefined;
+                reactElement?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+            };
+        }) => import("react").JSX.Element | undefined;
         renderProps: any;
     } & {
         doReload(): void;

package/dist/shared/BaseDisplayComponent.js

@@ -9,6 +9,7 @@ const plugin_linear_genome_view_1 = require("@jbrowse/plugin-linear-genome-view"
 const mui_1 = require("tss-react/mui");
 const mobx_react_1 = require("mobx-react");
 const util_1 = require("@jbrowse/core/util");
+const material_1 = require("@mui/material");
 const useStyles = (0, mui_1.makeStyles)()(theme => ({
     loading: {
         backgroundColor: theme.palette.background.default,
@@ -24,7 +25,8 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
 }));
 const BaseDisplayComponent = (0, mobx_react_1.observer)(function ({ model, children, }) {
     const { error, regionTooLarge } = model;
-    return error ? (react_1.default.createElement(plugin_linear_genome_view_1.BlockMsg, { message: `${error}`, severity: "error", buttonText: "Reload", action: model.reload })) : regionTooLarge ? (model.regionCannotBeRendered()) : (react_1.default.createElement(DataDisplay, { model: model }, children));
+    return error ? (react_1.default.createElement(plugin_linear_genome_view_1.BlockMsg, { message: `${error}`, severity: "error", action: react_1.default.createElement(material_1.Tooltip, { title: "Reload" },
+            react_1.default.createElement(material_1.Button, { "data-testid": "reload_button", onClick: () => model.reload() }, "Reload")) })) : regionTooLarge ? (model.regionCannotBeRendered()) : (react_1.default.createElement(DataDisplay, { model: model }, children));
 });
 const DataDisplay = (0, mobx_react_1.observer)(function ({ model, children, }) {
     const { drawn, loading } = model;

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));
+}