@jbrowse/plugin-alignments 2.17.0 → 3.0.0

package/dist/shared/components/FilterByTagDialog.js

@@ -1,32 +1,10 @@
 "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 jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const ui_1 = require("@jbrowse/core/ui");
+const material_1 = require("@mui/material");
+const mobx_react_1 = require("mobx-react");
 const mui_1 = require("tss-react/mui");
 const useStyles = (0, mui_1.makeStyles)()(theme => ({
     paper: {
@@ -53,24 +31,20 @@ const flagNames = [
 ];
 function Bitmask(props) {
     const { flag = 0, setFlag } = props;
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(material_1.TextField, { type: "number", value: flag, onChange: event => {
-                setFlag(+event.target.value);
-            } }),
-        flagNames.map((name, index) => {
-            const val = flag & (1 << index);
-            const key = `${name}_${val}`;
-            return (react_1.default.createElement("div", { key: key },
-                react_1.default.createElement("input", { type: "checkbox", checked: Boolean(val), onChange: event => {
-                        if (event.target.checked) {
-                            setFlag(flag | (1 << index));
-                        }
-                        else {
-                            setFlag(flag & ~(1 << index));
-                        }
-                    } }),
-                react_1.default.createElement("label", { htmlFor: key }, name)));
-        })));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.TextField, { type: "number", value: flag, onChange: event => {
+                    setFlag(+event.target.value);
+                } }), flagNames.map((name, index) => {
+                const val = flag & (1 << index);
+                const key = `${name}_${val}`;
+                return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: Boolean(val), onChange: event => {
+                                if (event.target.checked) {
+                                    setFlag(flag | (1 << index));
+                                }
+                                else {
+                                    setFlag(flag & ~(1 << index));
+                                }
+                            } }), (0, jsx_runtime_1.jsx)("label", { htmlFor: key, children: name })] }, key));
+            })] }));
 }
 const FilterByTagDialog = (0, mobx_react_1.observer)(function (props) {
     var _a, _b;
@@ -84,55 +58,31 @@ const FilterByTagDialog = (0, mobx_react_1.observer)(function (props) {
     const [readName, setReadName] = (0, react_1.useState)(filterBy.readName || '');
     const validTag = /^[A-Za-z][A-Za-z0-9]$/.exec(tag);
     const site = 'https://broadinstitute.github.io/picard/explain-flags.html';
-    return (react_1.default.createElement(ui_1.Dialog, { open: true, onClose: handleClose, title: "Filter options" },
-        react_1.default.createElement(material_1.DialogContent, null,
-            react_1.default.createElement(material_1.Typography, null,
-                "Set filter bitmask options. Refer to ",
-                react_1.default.createElement(material_1.Link, { href: site }, site),
-                ' ',
-                "for details"),
-            react_1.default.createElement(material_1.Paper, { className: classes.paper, variant: "outlined" },
-                react_1.default.createElement("div", { style: { display: 'flex' } },
-                    react_1.default.createElement("div", null,
-                        react_1.default.createElement(material_1.Typography, null, "Read must have ALL these flags"),
-                        react_1.default.createElement(Bitmask, { flag: flagInclude, setFlag: setFlagInclude })),
-                    react_1.default.createElement("div", null,
-                        react_1.default.createElement(material_1.Typography, null, "Read must have NONE of these flags"),
-                        react_1.default.createElement(Bitmask, { flag: flagExclude, setFlag: setFlagExclude })))),
-            react_1.default.createElement(material_1.Paper, { className: classes.paper, variant: "outlined" },
-                react_1.default.createElement(material_1.Typography, null, "Filter by tag name and value. Use * in the value field to get all reads containing any value for that tag. Example: filter tag name SA with value * to get all split/supplementary reads. Other examples include HP for haplotype, or RG for read group"),
-                react_1.default.createElement(material_1.TextField, { className: classes.field, value: tag, onChange: event => {
-                        setTag(event.target.value);
-                    }, placeholder: "Enter tag name", error: tag.length === 2 && !validTag, helperText: tag.length === 2 && !validTag ? 'Not a valid tag' : '', slotProps: {
-                        htmlInput: {
-                            maxLength: 2,
-                        },
-                    } }),
-                react_1.default.createElement(material_1.TextField, { className: classes.field, value: tagValue, onChange: event => {
-                        setTagValue(event.target.value);
-                    }, placeholder: "Enter tag value" })),
-            react_1.default.createElement(material_1.Paper, { className: classes.paper, variant: "outlined" },
-                react_1.default.createElement(material_1.Typography, null, "Filter by read name"),
-                react_1.default.createElement(material_1.TextField, { className: classes.field, value: readName, onChange: event => {
-                        setReadName(event.target.value);
-                    }, placeholder: "Enter read name" })),
-            react_1.default.createElement(material_1.DialogActions, null,
-                react_1.default.createElement(material_1.Button, { variant: "contained", color: "primary", autoFocus: true, type: "submit", onClick: () => {
-                        model.setFilterBy({
-                            flagInclude,
-                            flagExclude,
-                            readName,
-                            tagFilter: tag !== ''
-                                ? {
-                                    tag,
-                                    value: tagValue,
-                                }
-                                : undefined,
-                        });
-                        handleClose();
-                    } }, "Submit"),
-                react_1.default.createElement(material_1.Button, { variant: "contained", color: "secondary", onClick: () => {
-                        handleClose();
-                    } }, "Cancel")))));
+    return ((0, jsx_runtime_1.jsx)(ui_1.Dialog, { open: true, onClose: handleClose, title: "Filter options", children: (0, jsx_runtime_1.jsxs)(material_1.DialogContent, { children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, { children: ["Set filter bitmask options. Refer to ", (0, jsx_runtime_1.jsx)(material_1.Link, { href: site, children: site }), ' ', "for details"] }), (0, jsx_runtime_1.jsx)(material_1.Paper, { className: classes.paper, variant: "outlined", children: (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex' }, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: "Read must have ALL these flags" }), (0, jsx_runtime_1.jsx)(Bitmask, { flag: flagInclude, setFlag: setFlagInclude })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: "Read must have NONE of these flags" }), (0, jsx_runtime_1.jsx)(Bitmask, { flag: flagExclude, setFlag: setFlagExclude })] })] }) }), (0, jsx_runtime_1.jsxs)(material_1.Paper, { className: classes.paper, variant: "outlined", children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: "Filter by tag name and value. Use * in the value field to get all reads containing any value for that tag. Example: filter tag name SA with value * to get all split/supplementary reads. Other examples include HP for haplotype, or RG for read group" }), (0, jsx_runtime_1.jsx)(material_1.TextField, { className: classes.field, value: tag, onChange: event => {
+                                setTag(event.target.value);
+                            }, placeholder: "Enter tag name", error: tag.length === 2 && !validTag, helperText: tag.length === 2 && !validTag ? 'Not a valid tag' : '', slotProps: {
+                                htmlInput: {
+                                    maxLength: 2,
+                                },
+                            } }), (0, jsx_runtime_1.jsx)(material_1.TextField, { className: classes.field, value: tagValue, onChange: event => {
+                                setTagValue(event.target.value);
+                            }, placeholder: "Enter tag value" })] }), (0, jsx_runtime_1.jsxs)(material_1.Paper, { className: classes.paper, variant: "outlined", children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: "Filter by read name" }), (0, jsx_runtime_1.jsx)(material_1.TextField, { className: classes.field, value: readName, onChange: event => {
+                                setReadName(event.target.value);
+                            }, placeholder: "Enter read name" })] }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", color: "primary", autoFocus: true, type: "submit", onClick: () => {
+                                model.setFilterBy({
+                                    flagInclude,
+                                    flagExclude,
+                                    readName,
+                                    tagFilter: tag !== ''
+                                        ? {
+                                            tag,
+                                            value: tagValue,
+                                        }
+                                        : undefined,
+                                });
+                                handleClose();
+                            }, children: "Submit" }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", color: "secondary", onClick: () => {
+                                handleClose();
+                            }, children: "Cancel" })] })] }) }));
 });
 exports.default = FilterByTagDialog;

package/dist/shared/fetchChains.d.ts

@@ -1,5 +1,5 @@
-import { LinearReadArcsDisplayModel } from '../LinearReadArcsDisplay/model';
-import { LinearReadCloudDisplayModel } from '../LinearReadCloudDisplay/model';
+import type { LinearReadArcsDisplayModel } from '../LinearReadArcsDisplay/model';
+import type { LinearReadCloudDisplayModel } from '../LinearReadCloudDisplay/model';
 export interface ReducedFeature {
     name: string;
     strand: number;

package/dist/shared/fetchChains.js

@@ -3,11 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.fetchChains = fetchChains;
 const util_1 = require("@jbrowse/core/util");
 async function fetchChains(self) {
-    // @ts-expect-error
     const { rpcSessionId: sessionId } = (0, util_1.getContainingTrack)(self);
     const { rpcManager } = (0, util_1.getSession)(self);
     const view = (0, util_1.getContainingView)(self);
-    if (!view.initialized || self.error || self.regionTooLarge) {
+    if (!view.initialized || self.error || !self.statsReadyAndRegionNotTooLarge) {
         return;
     }
     self.setLoading(true);

package/dist/shared/getMaximumModificationAtEachPosition.d.ts

@@ -1,4 +1,4 @@
-import { Feature } from '@jbrowse/core/util';
+import type { Feature } from '@jbrowse/core/util';
 interface MaximumProbabilityMod {
     type: string;
     prob: number;

package/dist/shared/getMaximumModificationAtEachPosition.js

@@ -1,9 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getMaxProbModAtEachPosition = getMaxProbModAtEachPosition;
-// locals
-const ModificationParser_1 = require("../ModificationParser");
 const MismatchParser_1 = require("../MismatchParser");
+const ModificationParser_1 = require("../ModificationParser");
 const util_1 = require("../util");
 function getMaxProbModAtEachPosition(feature, cigarOps) {
     const fstrand = feature.get('strand');

package/dist/shared/getUniqueModifications.d.ts

@@ -1,14 +1,14 @@
-import { IAnyStateTreeNode } from 'mobx-state-tree';
-import { BlockSet } from '@jbrowse/core/util/blockTypes';
-import { AnyConfigurationModel } from '@jbrowse/core/configuration';
-import { ModificationType } from './types';
+import type { ModificationType } from './types';
+import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
+import type { BlockSet } from '@jbrowse/core/util/blockTypes';
+import type { IAnyStateTreeNode } from 'mobx-state-tree';
 export declare function getUniqueModifications({ self, adapterConfig, blocks, opts, }: {
     self: IAnyStateTreeNode;
     adapterConfig: AnyConfigurationModel;
     blocks: BlockSet;
     opts?: {
         headers?: Record<string, string>;
-        signal?: AbortSignal;
+        stopToken?: string;
         filters: string[];
     };
 }): Promise<ModificationType[]>;

package/dist/shared/getUniqueTags.d.ts

@@ -1,6 +1,6 @@
-import { IAnyStateTreeNode } from 'mobx-state-tree';
-import { BlockSet } from '@jbrowse/core/util/blockTypes';
-import { AnyConfigurationModel } from '@jbrowse/core/configuration';
+import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
+import type { BlockSet } from '@jbrowse/core/util/blockTypes';
+import type { IAnyStateTreeNode } from 'mobx-state-tree';
 export declare function getUniqueTags({ self, tag, blocks, opts, }: {
     self: IAnyStateTreeNode & {
         adapterConfig: AnyConfigurationModel;
@@ -9,7 +9,7 @@ export declare function getUniqueTags({ self, tag, blocks, opts, }: {
     blocks: BlockSet;
     opts?: {
         headers?: Record<string, string>;
-        signal?: AbortSignal;
+        stopToken?: string;
         filters: string[];
     };
 }): Promise<string[]>;

package/dist/shared/renderSvgUtil.d.ts

@@ -1,7 +1,6 @@
-import React from 'react';
 export declare function renderSvg<T extends {
     id: string;
     height: number;
 }>(self: T, opts: {
     rasterizeLayers?: boolean;
-}, cb: (model: T, ctx: CanvasRenderingContext2D, width: number, height: number) => void): Promise<React.JSX.Element | undefined>;
+}, cb: (model: T, ctx: CanvasRenderingContext2D, width: number, height: number) => void): Promise<import("react/jsx-runtime").JSX.Element | undefined>;

package/dist/shared/renderSvgUtil.js

@@ -15,21 +15,27 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : 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 };
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.renderSvg = renderSvg;
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const util_1 = require("@jbrowse/core/util");
-// stabilize clipid under test for snapshot
 function getId(id) {
     const isJest = typeof jest === 'undefined';
     return `arc-clip-${isJest ? id : 'jest'}`;
@@ -48,18 +54,13 @@ async function renderSvg(self, opts, cb) {
         }
         ctx.scale(2, 2);
         cb(self, ctx, width, height);
-        return (react_1.default.createElement("image", { width: width, height: height, xlinkHref: canvas.toDataURL('image/png') }));
+        return ((0, jsx_runtime_1.jsx)("image", { width: width, height: height, xlinkHref: canvas.toDataURL('image/png') }));
     }
     else {
-        // @ts-ignore
         const C2S = await Promise.resolve().then(() => __importStar(require('canvas2svg')));
         const ctx = new C2S.default(width, height);
         cb(self, ctx, width, height);
         const clipid = getId(self.id);
-        return (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement("defs", null,
-                react_1.default.createElement("clipPath", { id: clipid },
-                    react_1.default.createElement("rect", { x: 0, y: 0, width: width, height: height }))),
-            react_1.default.createElement("g", { dangerouslySetInnerHTML: { __html: ctx.getSvg().innerHTML }, clipPath: `url(#${clipid})` })));
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsx)("clipPath", { id: clipid, children: (0, jsx_runtime_1.jsx)("rect", { x: 0, y: 0, width: width, height: height }) }) }), (0, jsx_runtime_1.jsx)("g", { dangerouslySetInnerHTML: { __html: ctx.getSvg().innerHTML }, clipPath: `url(#${clipid})` })] }));
     }
 }

package/dist/shared/util.d.ts

@@ -1,10 +1,20 @@
-import { ChainData } from './fetchChains';
+import type { ChainData } from './fetchChains';
 export declare function hasPairedReads(features: ChainData): boolean;
 export declare function alphaColor(baseColor: string, p: number): string;
 export declare const defaultFilterFlags: {
     flagInclude: number;
     flagExclude: number;
 };
+export declare const negFlags: {
+    flagInclude: number;
+    flagExclude: number;
+};
+export declare const posFlags: {
+    flagInclude: number;
+    flagExclude: number;
+};
 export declare function cacheGetter<T>(ctor: {
     prototype: T;
 }, prop: keyof T): void;
+export declare function filterReadFlag(flags: number, flagInclude: number, flagExclude: number): boolean;
+export declare function filterTagValue(readVal: unknown, filterVal?: string): boolean;

package/dist/shared/util.js

@@ -1,9 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.defaultFilterFlags = void 0;
+exports.posFlags = exports.negFlags = exports.defaultFilterFlags = void 0;
 exports.hasPairedReads = hasPairedReads;
 exports.alphaColor = alphaColor;
 exports.cacheGetter = cacheGetter;
+exports.filterReadFlag = filterReadFlag;
+exports.filterTagValue = filterTagValue;
 const colord_1 = require("@jbrowse/core/util/colord");
 function hasPairedReads(features) {
     for (const f of features.chains.values()) {
@@ -24,6 +26,14 @@ exports.defaultFilterFlags = {
     flagInclude: 0,
     flagExclude: 1540,
 };
+exports.negFlags = {
+    flagInclude: 16,
+    flagExclude: 1540,
+};
+exports.posFlags = {
+    flagInclude: 0,
+    flagExclude: 1556,
+};
 function cacheGetter(ctor, prop) {
     const desc = Object.getOwnPropertyDescriptor(ctor.prototype, prop);
     const getter = desc.get;
@@ -35,3 +45,19 @@ function cacheGetter(ctor, prop) {
         },
     });
 }
+function filterReadFlag(flags, flagInclude, flagExclude) {
+    if ((flags & flagInclude) !== flagInclude) {
+        return true;
+    }
+    else if (flags & flagExclude) {
+        return true;
+    }
+    else {
+        return false;
+    }
+}
+function filterTagValue(readVal, filterVal) {
+    return filterVal === '*'
+        ? readVal === undefined
+        : `${readVal}` !== `${filterVal}`;
+}

package/dist/util.d.ts

@@ -1,7 +1,7 @@
-import { BaseFeatureDataAdapter } from '@jbrowse/core/data_adapters/BaseAdapter';
-import { Feature, AugmentedRegion } from '@jbrowse/core/util';
-import { IAnyStateTreeNode } from 'mobx-state-tree';
-import { IAutorunOptions } from 'mobx';
+import type { BaseFeatureDataAdapter } from '@jbrowse/core/data_adapters/BaseAdapter';
+import type { AugmentedRegion, Feature } from '@jbrowse/core/util';
+import type { IAutorunOptions } from 'mobx';
+import type { IAnyStateTreeNode } from 'mobx-state-tree';
 export declare function getTagAlt(feature: Feature, tag: string, alt: string): any;
 export declare const orientationTypes: {
     fr: Record<string, string>;

package/dist/util.js

@@ -7,19 +7,15 @@ exports.fetchSequence = fetchSequence;
 exports.createAutorun = createAutorun;
 exports.randomColor = randomColor;
 exports.getColorForModification = getColorForModification;
-const operators_1 = require("rxjs/operators");
-const rxjs_1 = require("rxjs");
-const mobx_state_tree_1 = require("mobx-state-tree");
 const mobx_1 = require("mobx");
-// use fallback alt tag, used in situations where upper case/lower case tags
-// exist e.g. Mm/MM for base modifications
+const mobx_state_tree_1 = require("mobx-state-tree");
+const rxjs_1 = require("rxjs");
+const operators_1 = require("rxjs/operators");
 function getTagAlt(feature, tag, alt) {
     var _a;
     const tags = feature.get('tags');
     return (_a = tags[tag]) !== null && _a !== void 0 ? _a : tags[alt];
 }
-// orientation definitions from igv.js, see also
-// https://software.broadinstitute.org/software/igv/interpreting_pair_orientations
 exports.orientationTypes = {
     fr: {
         F1R2: 'LR',
@@ -90,8 +86,6 @@ async function fetchSequence(region, adapter) {
         .pipe((0, operators_1.toArray)()));
     return (_a = feats[0]) === null || _a === void 0 ? void 0 : _a.get('seq');
 }
-// adapted from IGV
-// https://github.com/igvteam/igv/blob/af07c3b1be8806cfd77343ee04982aeff17d2beb/src/main/resources/org/broad/igv/prefs/preferences.tab#L230-L242
 exports.modificationData = {
     m: { color: 'rgb(255,0,0)', name: '5mC' },
     h: { color: 'rgb(255,0,255)', name: '5hmC' },

package/esm/AlignmentsFeatureDetail/AlignmentsFeatureDetail.d.ts

@@ -1,6 +1,5 @@
-import React from 'react';
-import { AlignmentFeatureWidgetModel } from './stateModelFactory';
+import type { AlignmentFeatureWidgetModel } from './stateModelFactory';
 declare const AlignmentsFeatureDetails: (props: {
     model: AlignmentFeatureWidgetModel;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default AlignmentsFeatureDetails;

package/esm/AlignmentsFeatureDetail/AlignmentsFeatureDetail.js

@@ -1,30 +1,21 @@
-import React, { lazy } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { lazy } from 'react';
+import FeatureDetails from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail/FeatureDetails';
 import { Paper } from '@mui/material';
 import { observer } from 'mobx-react';
-import clone from 'clone';
-import FeatureDetails from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail/FeatureDetails';
-// locals
-import { getTag } from './util';
-import { tags } from './tagInfo';
-// local components
 import Flags from './Flags';
-import PairLink from './PairLink';
 import Formatter from './Formatter';
-// lazies
+import PairLink from './PairLink';
+import { tags } from './tagInfo';
+import { getTag } from './util';
 const SupplementaryAlignments = lazy(() => import('./SupplementaryAlignments'));
 const LinkedPairedAlignments = lazy(() => import('./LinkedPairedAlignments'));
 const AlignmentsFeatureDetails = observer(function (props) {
     const { model } = props;
     const { featureData } = model;
-    const feat = clone(featureData);
+    const feat = structuredClone(featureData);
     const SA = getTag('SA', feat);
     const { flags } = feat;
-    return (React.createElement(Paper, { "data-testid": "alignment-side-drawer" },
-        React.createElement(FeatureDetails, { ...props, 
-            // @ts-expect-error
-            descriptions: { ...tags, tags: tags }, feature: feat, formatter: (value, key) => key === 'next_segment_position' ? (React.createElement(PairLink, { model: model, locString: value })) : (React.createElement(Formatter, { value: value })) }),
-        SA !== undefined ? (React.createElement(SupplementaryAlignments, { model: model, tag: SA, feature: feat })) : null,
-        flags & 1 ? (React.createElement(LinkedPairedAlignments, { model: model, feature: feat })) : null,
-        flags !== undefined ? React.createElement(Flags, { feature: feat, ...props }) : null));
+    return (_jsxs(Paper, { "data-testid": "alignment-side-drawer", children: [_jsx(FeatureDetails, { ...props, descriptions: { tags }, feature: feat, formatter: (value, key) => key === 'next_segment_position' ? (_jsx(PairLink, { model: model, locString: value })) : (_jsx(Formatter, { value: value })) }), SA !== undefined ? (_jsx(SupplementaryAlignments, { model: model, tag: SA, feature: feat })) : null, flags & 1 ? (_jsx(LinkedPairedAlignments, { model: model, feature: feat })) : null, flags !== undefined ? _jsx(Flags, { feature: feat, ...props }) : null] }));
 });
 export default AlignmentsFeatureDetails;

package/esm/AlignmentsFeatureDetail/BreakendMultiLevelOptionDialog.js

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

package/esm/AlignmentsFeatureDetail/BreakendSingleLevelOptionDialog.js

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

package/esm/AlignmentsFeatureDetail/Flags.d.ts

@@ -1,6 +1,5 @@
-import React from 'react';
 export default function AlignmentFlags(props: {
     feature: {
         flags: number;
     };
-}): React.JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

package/esm/AlignmentsFeatureDetail/Flags.js

@@ -1,8 +1,8 @@
-import React from 'react';
-import { Checkbox, FormControlLabel, FormGroup } from '@mui/material';
-import { makeStyles } from 'tss-react/mui';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import BaseCard from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail/BaseCard';
 import SimpleField from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail/SimpleField';
+import { Checkbox, FormControlLabel, FormGroup } from '@mui/material';
+import { makeStyles } from 'tss-react/mui';
 const useStyles = makeStyles()({
     compact: {
         paddingRight: 0,
@@ -28,11 +28,9 @@ export default function AlignmentFlags(props) {
     const { classes } = useStyles();
     const { feature } = props;
     const { flags } = feature;
-    return (React.createElement(BaseCard, { ...props, title: "Flags" },
-        React.createElement(SimpleField, { name: "Flag", value: flags }),
-        React.createElement(FormGroup, null, flagNames.map((name, idx) => {
-            const val = flags & (1 << idx);
-            const key = `${name}_${val}`;
-            return (React.createElement(FormControlLabel, { key: key, control: React.createElement(Checkbox, { className: classes.compact, checked: Boolean(val), name: name, readOnly: true }), label: name }));
-        }))));
+    return (_jsxs(BaseCard, { ...props, title: "Flags", children: [_jsx(SimpleField, { name: "Flag", value: flags }), _jsx(FormGroup, { children: flagNames.map((name, idx) => {
+                    const val = flags & (1 << idx);
+                    const key = `${name}_${val}`;
+                    return (_jsx(FormControlLabel, { control: _jsx(Checkbox, { className: classes.compact, checked: Boolean(val), name: name, readOnly: true }), label: name }, key));
+                }) })] }));
 }

package/esm/AlignmentsFeatureDetail/Formatter.d.ts

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

package/esm/AlignmentsFeatureDetail/Formatter.js

@@ -1,22 +1,17 @@
-import React, { useState } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { 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));
+    return display.length > 100 ? (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", onClick: () => {
+                    copy(display);
+                    setCopied(true);
+                    setTimeout(() => {
+                        setCopied(false);
+                    }, 700);
+                }, children: copied ? 'Copied to clipboard' : 'Copy' }), _jsx("button", { type: "button", onClick: () => {
+                    setShow(val => !val);
+                }, children: show ? 'Show less' : 'Show more' }), _jsx("div", { children: show ? display : `${display.slice(0, 100)}...` })] })) : (_jsx("div", { children: display }));
 }

package/esm/AlignmentsFeatureDetail/LaunchPairedEndBreakpointSplitViewPanel.d.ts

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