@jbrowse/plugin-arc 2.7.1 → 2.8.0

package/dist/LinearPairedArcDisplay/model.js

@@ -0,0 +1,129 @@
+"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 });
+exports.stateModelFactory = void 0;
+const configuration_1 = require("@jbrowse/core/configuration");
+const mobx_state_tree_1 = require("mobx-state-tree");
+const util_1 = require("@jbrowse/core/util");
+const pluggableElementTypes_1 = require("@jbrowse/core/pluggableElementTypes");
+const plugin_linear_genome_view_1 = require("@jbrowse/plugin-linear-genome-view");
+/**
+ * #stateModel LinearPairedArcDisplay
+ * extends BaseDisplay, TrackHeightMixin, FeatureDensityMixin
+ */
+function stateModelFactory(configSchema) {
+    return mobx_state_tree_1.types
+        .compose('LinearPairedArcDisplay', pluggableElementTypes_1.BaseDisplay, (0, plugin_linear_genome_view_1.TrackHeightMixin)(), (0, plugin_linear_genome_view_1.FeatureDensityMixin)(), mobx_state_tree_1.types.model({
+        /**
+         * #property
+         */
+        type: mobx_state_tree_1.types.literal('LinearPairedArcDisplay'),
+        /**
+         * #property
+         */
+        configuration: (0, configuration_1.ConfigurationReference)(configSchema),
+        /**
+         * #property
+         */
+        displayMode: mobx_state_tree_1.types.maybe(mobx_state_tree_1.types.string),
+    }))
+        .volatile(() => ({
+        lastDrawnOffsetPx: 0,
+        features: undefined,
+        loading: false,
+        drawn: true,
+    }))
+        .views(self => ({
+        /**
+         * #getter
+         */
+        get displayModeSetting() {
+            var _a;
+            return (_a = self.displayMode) !== null && _a !== void 0 ? _a : (0, configuration_1.getConf)(self, ['renderer', 'displayMode']);
+        },
+    }))
+        .actions(self => ({
+        /**
+         * #action
+         */
+        selectFeature(feature) {
+            const session = (0, util_1.getSession)(self);
+            if ((0, util_1.isSessionModelWithWidgets)(session)) {
+                const featureWidget = session.addWidget('VariantFeatureWidget', 'variantFeature', {
+                    view: (0, util_1.getContainingView)(self),
+                    track: (0, util_1.getContainingTrack)(self),
+                    featureData: feature.toJSON(),
+                });
+                session.showWidget(featureWidget);
+            }
+            if ((0, util_1.isSelectionContainer)(session)) {
+                session.setSelection(feature);
+            }
+        },
+        /**
+         * #action
+         */
+        setLoading(flag) {
+            self.loading = flag;
+        },
+        /**
+         * #action
+         */
+        setFeatures(f) {
+            self.features = f;
+        },
+        /**
+         * #action
+         */
+        setDisplayMode(flag) {
+            self.displayMode = flag;
+        },
+    }))
+        .actions(self => ({
+        afterAttach() {
+            // eslint-disable-next-line @typescript-eslint/no-floating-promises
+            ;
+            (async () => {
+                try {
+                    const { doAfterAttach } = await Promise.resolve().then(() => __importStar(require('./afterAttach')));
+                    doAfterAttach(self);
+                }
+                catch (e) {
+                    console.error(e);
+                    self.setError(e);
+                }
+            })();
+        },
+        /**
+         * #action
+         */
+        async renderSvg(opts) {
+            const { renderArcSvg } = await Promise.resolve().then(() => __importStar(require('./renderSvg')));
+            // @ts-expect-error
+            return renderArcSvg(self, opts);
+        },
+    }));
+}
+exports.stateModelFactory = stateModelFactory;

package/dist/LinearPairedArcDisplay/renderSvg.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { LinearArcDisplayModel } from './model';
+export declare function renderArcSvg(model: LinearArcDisplayModel, _opts: {
+    rasterizeLayers?: boolean;
+}): Promise<React.JSX.Element>;

package/dist/LinearPairedArcDisplay/renderSvg.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderArcSvg = void 0;
+const react_1 = __importDefault(require("react"));
+const util_1 = require("@jbrowse/core/util");
+const Arcs_1 = __importDefault(require("./components/Arcs"));
+async function renderArcSvg(model, _opts) {
+    await (0, util_1.when)(() => !model.loading);
+    const view = (0, util_1.getContainingView)(model);
+    const width = view.dynamicBlocks.totalWidthPx;
+    const height = model.height;
+    const clipid = 'arc-' + model.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", { clipPath: `url(#${clipid})` },
+            react_1.default.createElement(Arcs_1.default, { model: model, exportSVG: true }))));
+}
+exports.renderArcSvg = renderArcSvg;

package/dist/LinearPairedArcDisplay/util.d.ts

@@ -0,0 +1,27 @@
+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';
+export declare function getTag(feature: Feature, tag: string): any;
+export declare function getTagAlt(feature: Feature, tag: string, alt: string): any;
+export declare const orientationTypes: {
+    fr: Record<string, string>;
+    rf: Record<string, string>;
+    ff: Record<string, string>;
+};
+export declare const pairMap: {
+    readonly LR: "color_pair_lr";
+    readonly LL: "color_pair_ll";
+    readonly RR: "color_pair_rr";
+    readonly RL: "color_pair_rl";
+};
+export declare function getColorWGBS(strand: number, base: string): "#f00" | "#00f" | "#888";
+export declare function fetchSequence(region: AugmentedRegion, adapter: BaseFeatureDataAdapter): Promise<any>;
+export declare function shouldFetchReferenceSequence(type?: string): boolean;
+export declare const modificationColors: Record<string, string | undefined>;
+type DisplayModel = IAnyStateTreeNode & {
+    setError: (arg: unknown) => void;
+};
+export declare function createAutorun(self: DisplayModel, cb: () => Promise<void>, opts?: IAutorunOptions): void;
+export declare function randomColor(): string;
+export {};

package/dist/LinearPairedArcDisplay/util.js

@@ -0,0 +1,131 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.randomColor = exports.createAutorun = exports.modificationColors = exports.shouldFetchReferenceSequence = exports.fetchSequence = exports.getColorWGBS = exports.pairMap = exports.orientationTypes = exports.getTagAlt = exports.getTag = void 0;
+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");
+// get tag from BAM or CRAM feature, where CRAM uses feature.get('tags') and
+// BAM does not
+function getTag(feature, tag) {
+    const tags = feature.get('tags');
+    return tags !== undefined ? tags[tag] : feature.get(tag);
+}
+exports.getTag = getTag;
+// use fallback alt tag, used in situations where upper case/lower case tags
+// exist e.g. Mm/MM for base modifications
+function getTagAlt(feature, tag, alt) {
+    var _a;
+    return (_a = getTag(feature, tag)) !== null && _a !== void 0 ? _a : getTag(feature, alt);
+}
+exports.getTagAlt = getTagAlt;
+// orientation definitions from igv.js, see also
+// https://software.broadinstitute.org/software/igv/interpreting_pair_orientations
+exports.orientationTypes = {
+    fr: {
+        F1R2: 'LR',
+        F2R1: 'LR',
+        F1F2: 'LL',
+        F2F1: 'LL',
+        R1R2: 'RR',
+        R2R1: 'RR',
+        R1F2: 'RL',
+        R2F1: 'RL',
+    },
+    rf: {
+        R1F2: 'LR',
+        R2F1: 'LR',
+        R1R2: 'LL',
+        R2R1: 'LL',
+        F1F2: 'RR',
+        F2F1: 'RR',
+        F1R2: 'RL',
+        F2R1: 'RL',
+    },
+    ff: {
+        F2F1: 'LR',
+        R1R2: 'LR',
+        F2R1: 'LL',
+        R1F2: 'LL',
+        R2F1: 'RR',
+        F1R2: 'RR',
+        R2R1: 'RL',
+        F1F2: 'RL',
+    },
+};
+exports.pairMap = {
+    LR: 'color_pair_lr',
+    LL: 'color_pair_ll',
+    RR: 'color_pair_rr',
+    RL: 'color_pair_rl',
+};
+function getColorWGBS(strand, base) {
+    if (strand === 1) {
+        if (base === 'C') {
+            return '#f00';
+        }
+        if (base === 'T') {
+            return '#00f';
+        }
+    }
+    else if (strand === -1) {
+        if (base === 'G') {
+            return '#f00';
+        }
+        if (base === 'A') {
+            return '#00f';
+        }
+    }
+    return '#888';
+}
+exports.getColorWGBS = getColorWGBS;
+// fetches region sequence augmenting by +/- 1bp for CpG on either side of
+// requested region
+async function fetchSequence(region, adapter) {
+    var _a;
+    const { start, end, originalRefName, refName } = region;
+    const feats = await (0, rxjs_1.firstValueFrom)(adapter
+        .getFeatures({
+        ...region,
+        refName: originalRefName || refName,
+        end: end + 1,
+        start: Math.max(0, start - 1),
+    })
+        .pipe((0, operators_1.toArray)()));
+    return (_a = feats[0]) === null || _a === void 0 ? void 0 : _a.get('seq');
+}
+exports.fetchSequence = fetchSequence;
+// has to check underlying C-G (aka CpG) on the reference sequence
+function shouldFetchReferenceSequence(type) {
+    return type === 'methylation';
+}
+exports.shouldFetchReferenceSequence = shouldFetchReferenceSequence;
+// adapted from IGV
+// https://github.com/igvteam/igv/blob/e803e3af2d8c9ea049961dfd4628146bdde9a574/src/main/java/org/broad/igv/sam/mods/BaseModificationColors.java#L27
+exports.modificationColors = {
+    m: 'rgb(255,0,0)',
+    h: 'rgb(11, 132, 165)',
+    o: 'rgb(111, 78, 129)',
+    f: 'rgb(246, 200, 95)',
+    c: 'rgb(157, 216, 102)',
+    g: 'rgb(255, 160, 86)',
+    e: 'rgb(141, 221, 208)',
+    b: 'rgb(202, 71, 47)',
+};
+function createAutorun(self, cb, opts) {
+    (0, mobx_state_tree_1.addDisposer)(self, (0, mobx_1.autorun)(async () => {
+        try {
+            await cb();
+        }
+        catch (e) {
+            if ((0, mobx_state_tree_1.isAlive)(self)) {
+                self.setError(e);
+            }
+        }
+    }, opts));
+}
+exports.createAutorun = createAutorun;
+function randomColor() {
+    return `hsl(${Math.random() * 200}, 50%, 50%)`;
+}
+exports.randomColor = randomColor;

package/dist/index.js

@@ -5,7 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const Plugin_1 = __importDefault(require("@jbrowse/core/Plugin"));
 const LinearArcDisplay_1 = __importDefault(require("./LinearArcDisplay"));
+const LinearPairedArcDisplay_1 = __importDefault(require("./LinearPairedArcDisplay"));
 const ArcRenderer_1 = __importDefault(require("./ArcRenderer"));
+const colors_1 = require("@jbrowse/core/ui/colors");
 class ArcPlugin extends Plugin_1.default {
     constructor() {
         super(...arguments);
@@ -14,8 +16,27 @@ class ArcPlugin extends Plugin_1.default {
     install(pluginManager) {
         (0, ArcRenderer_1.default)(pluginManager);
         (0, LinearArcDisplay_1.default)(pluginManager);
-        pluginManager.jexl.addFunction('logThickness', (feature, attributeName) => {
-            return Math.log(feature.get(attributeName) + 1);
+        (0, LinearPairedArcDisplay_1.default)(pluginManager);
+        pluginManager.jexl.addFunction('logThickness', (feature, attributeName) => Math.log(feature.get(attributeName) + 1));
+        pluginManager.jexl.addFunction('defaultPairedArcColor', (_feature, alt) => {
+            if (alt === null || alt === void 0 ? void 0 : alt.startsWith('<DEL')) {
+                return colors_1.set1[0];
+            }
+            else if (alt === null || alt === void 0 ? void 0 : alt.startsWith('<DUP')) {
+                return colors_1.set1[1];
+            }
+            else if (alt === null || alt === void 0 ? void 0 : alt.startsWith('<INV')) {
+                return colors_1.set1[2];
+            }
+            else if (alt === null || alt === void 0 ? void 0 : alt.startsWith('<TRA')) {
+                return colors_1.set1[3];
+            }
+            else if (alt === null || alt === void 0 ? void 0 : alt.startsWith('<CNV')) {
+                return colors_1.set1[4];
+            }
+            else {
+                return colors_1.set1[6]; // skip 5, yellow
+            }
         });
     }
 }

package/esm/LinearPairedArcDisplay/afterAttach.d.ts

@@ -0,0 +1,2 @@
+import { IAnyStateTreeNode } from 'mobx-state-tree';
+export declare function doAfterAttach<T extends IAnyStateTreeNode>(self: T): void;

package/esm/LinearPairedArcDisplay/afterAttach.js

@@ -0,0 +1,7 @@
+import { createAutorun } from './util';
+import { fetchChains } from './fetchChains';
+export function doAfterAttach(self) {
+    createAutorun(self, async () => {
+        await fetchChains(self);
+    }, { delay: 1000 });
+}

package/esm/LinearPairedArcDisplay/components/Arcs.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { LinearArcDisplayModel } from '../model';
+declare const Arcs: ({ model, exportSVG, }: {
+    model: LinearArcDisplayModel;
+    exportSVG?: boolean | undefined;
+}) => React.JSX.Element | null;
+export default Arcs;

package/esm/LinearPairedArcDisplay/components/Arcs.js

@@ -0,0 +1,113 @@
+import React, { useRef, useState } from 'react';
+import { observer } from 'mobx-react';
+import { assembleLocString, getContainingView, getSession, measureText, } from '@jbrowse/core/util';
+import { getConf } from '@jbrowse/core/configuration';
+import { parseBreakend } from '@gmod/vcf';
+import { Tooltip } from 'react-svg-tooltip';
+function f(feature, alt) {
+    var _a, _b, _c, _d, _e;
+    const bnd = alt ? parseBreakend(alt) : undefined;
+    let start = feature.get('start');
+    let end = feature.get('end');
+    const strand = feature.get('strand');
+    const mate = feature.get('mate');
+    const refName = feature.get('refName');
+    let mateRefName;
+    let mateEnd = 0;
+    let mateStart = 0;
+    // one sided bracket used, because there could be <INS:ME> and we just check
+    // startswith below
+    const symbolicAlleles = ['<TRA', '<DEL', '<INV', '<INS', '<DUP', '<CNV'];
+    if (symbolicAlleles.some(a => alt === null || alt === void 0 ? void 0 : alt.startsWith(a))) {
+        // END is defined to be a single value, not an array. CHR2 not defined in
+        // VCF spec, but should be similar
+        const e = ((_b = (_a = feature.get('INFO')) === null || _a === void 0 ? void 0 : _a.END) === null || _b === void 0 ? void 0 : _b[0]) || feature.get('end');
+        mateEnd = e;
+        mateStart = e - 1;
+        mateRefName = (_e = (_d = (_c = feature.get('INFO')) === null || _c === void 0 ? void 0 : _c.CHR2) === null || _d === void 0 ? void 0 : _d[0]) !== null && _e !== void 0 ? _e : refName;
+        // re-adjust the arc to be from start to end of feature by re-assigning end
+        // to the 'mate'
+        start = feature.get('start');
+        end = feature.get('start') + 1;
+    }
+    else if (bnd === null || bnd === void 0 ? void 0 : bnd.MatePosition) {
+        const matePosition = bnd.MatePosition.split(':');
+        mateEnd = +matePosition[1];
+        mateStart = +matePosition[1] - 1;
+        mateRefName = matePosition[0];
+    }
+    return {
+        k1: { refName, start, end, strand },
+        k2: mate !== null && mate !== void 0 ? mate : { refName: mateRefName, end: mateEnd, start: mateStart },
+    };
+}
+function makeSummary(feature, alt) {
+    var _a;
+    const { k1, k2 } = f(feature, alt);
+    return [
+        feature.get('name'),
+        feature.get('id'),
+        assembleLocString(k1),
+        assembleLocString(k2),
+        (_a = feature.get('INFO')) === null || _a === void 0 ? void 0 : _a.SVTYPE,
+        alt,
+    ]
+        .filter(f => !!f)
+        .join(' - ');
+}
+// conditionally rendered tooltip only on mouseover, speeds up
+const SvgTooltip = React.forwardRef(function SvgTooltip2({ feature, alt }, ref) {
+    const caption = makeSummary(feature, alt);
+    const tooltipWidth = 20 + measureText(caption);
+    return ref !== null ? (
+    // @ts-expect-error
+    React.createElement(Tooltip, { triggerRef: ref },
+        React.createElement("rect", { x: 12, y: 0, width: tooltipWidth, height: 20, rx: 5, ry: 5, fill: "black", fillOpacity: "50%" }),
+        React.createElement("text", { x: 22, y: 14, fontSize: 10, fill: "white", textLength: tooltipWidth - 20 }, caption))) : null;
+});
+const Arc = observer(function ({ model, feature, alt, assembly, view, }) {
+    var _a, _b;
+    const [mouseOvered, setMouseOvered] = useState(false);
+    const { height } = model;
+    const { k1, k2 } = f(feature, alt);
+    const ref = useRef(null);
+    const c = getConf(model, 'color', { feature, alt });
+    const ra1 = assembly.getCanonicalRefName(k1.refName) || k1.refName;
+    const ra2 = assembly.getCanonicalRefName(k2.refName) || k2.refName;
+    const p1 = k1.start;
+    const p2 = k2.start;
+    const r1 = (_a = view.bpToPx({ refName: ra1, coord: p1 })) === null || _a === void 0 ? void 0 : _a.offsetPx;
+    const r2 = (_b = view.bpToPx({ refName: ra2, coord: p2 })) === null || _b === void 0 ? void 0 : _b.offsetPx;
+    if (r1 !== undefined && r2 !== undefined) {
+        const radius = (r2 - r1) / 2;
+        const absrad = Math.abs(radius);
+        const destY = Math.min(height, absrad);
+        const p1 = r1 - view.offsetPx;
+        const p2 = r2 - view.offsetPx;
+        const left = p1;
+        const right = p2;
+        return absrad > 1 ? (React.createElement(React.Fragment, null,
+            React.createElement("path", { d: `M ${left} 0 C ${left} ${destY}, ${right} ${destY}, ${right} 0`, ref: ref, stroke: mouseOvered ? 'black' : c, strokeWidth: 3, onMouseOut: () => setMouseOvered(false), onMouseOver: () => setMouseOvered(true), onClick: () => model.selectFeature(feature), fill: "none", pointerEvents: "stroke" }),
+            mouseOvered ? (React.createElement(SvgTooltip, { feature: feature, alt: alt, ref: ref })) : null)) : null;
+    }
+    return null;
+});
+const Wrapper = observer(function ({ model, exportSVG, children, }) {
+    const { height } = model;
+    const view = getContainingView(model);
+    const width = Math.round(view.dynamicBlocks.totalWidthPx);
+    return exportSVG ? (React.createElement(React.Fragment, null, children)) : (React.createElement("svg", { width: width, height: height }, children));
+});
+const Arcs = observer(function ({ model, exportSVG, }) {
+    const view = getContainingView(model);
+    const session = getSession(model);
+    const { assemblyManager } = session;
+    const { features } = model;
+    const assembly = assemblyManager.get(view.assemblyNames[0]);
+    return assembly ? (React.createElement(Wrapper, { model: model, exportSVG: exportSVG }, features === null || features === void 0 ? void 0 : features.map(f => {
+        var _a;
+        const alts = f.get('ALT');
+        return ((_a = alts === null || alts === void 0 ? void 0 : alts.map(a => (React.createElement(Arc, { key: f.id() + '-' + a, session: session, feature: f, alt: a, view: view, model: model, assembly: assembly })))) !== null && _a !== void 0 ? _a : (React.createElement(Arc, { key: f.id(), session: session, feature: f, view: view, model: model, assembly: assembly })));
+    }))) : null;
+});
+export default Arcs;

package/esm/LinearPairedArcDisplay/components/BaseDisplayComponent.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { LinearArcDisplayModel } from '../model';
+declare const BaseDisplayComponent: ({ model, children, }: {
+    model: LinearArcDisplayModel;
+    children?: React.ReactNode;
+}) => React.JSX.Element | null;
+export default BaseDisplayComponent;

package/esm/LinearPairedArcDisplay/components/BaseDisplayComponent.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { LoadingEllipses } from '@jbrowse/core/ui';
+import { BlockMsg } from '@jbrowse/plugin-linear-genome-view';
+import { makeStyles } from 'tss-react/mui';
+import { observer } from 'mobx-react';
+const useStyles = makeStyles()(theme => ({
+    loading: {
+        backgroundColor: theme.palette.background.default,
+        backgroundImage: `repeating-linear-gradient(45deg, transparent, transparent 5px, ${theme.palette.action.disabledBackground} 5px, ${theme.palette.action.disabledBackground} 10px)`,
+        position: 'absolute',
+        bottom: 0,
+        height: 50,
+        width: 300,
+        right: 0,
+        pointerEvents: 'none',
+        textAlign: 'center',
+    },
+}));
+const BaseDisplayComponent = observer(function ({ model, children, }) {
+    const { error, regionTooLarge } = model;
+    return error ? (React.createElement(BlockMsg, { message: `${error}`, severity: "error", buttonText: "Reload", action: model.reload })) : regionTooLarge ? (model.regionCannotBeRendered()) : (React.createElement(DataDisplay, { model: model }, children));
+});
+const DataDisplay = observer(function ({ model, children, }) {
+    const { loading } = model;
+    return (React.createElement("div", null,
+        children,
+        loading ? React.createElement(LoadingBar, { model: model }) : null));
+});
+const LoadingBar = observer(function ({ model, }) {
+    const { classes } = useStyles();
+    const { message } = model;
+    return (React.createElement("div", { className: classes.loading },
+        React.createElement(LoadingEllipses, { message: message })));
+});
+export default BaseDisplayComponent;

package/esm/LinearPairedArcDisplay/components/ReactComponent.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { LinearArcDisplayModel } from '../model';
+declare const LinearArcReactComponent: ({ model, exportSVG, }: {
+    model: LinearArcDisplayModel;
+    exportSVG?: boolean | undefined;
+}) => React.JSX.Element;
+export default LinearArcReactComponent;

package/esm/LinearPairedArcDisplay/components/ReactComponent.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { observer } from 'mobx-react';
+import BaseDisplayComponent from './BaseDisplayComponent';
+import Arcs from './Arcs';
+const LinearArcReactComponent = observer(function ({ model, exportSVG, }) {
+    return (React.createElement(BaseDisplayComponent, { model: model },
+        React.createElement(Arcs, { model: model, exportSVG: exportSVG })));
+});
+export default LinearArcReactComponent;

package/esm/LinearPairedArcDisplay/configSchema.d.ts

@@ -0,0 +1,36 @@
+/**
+ * #config LinearPairedArcDisplay
+ */
+export declare function configSchemaFactory(): import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
+    /**
+     * #slot
+     */
+    color: {
+        type: string;
+        description: string;
+        defaultValue: string;
+        contextVariable: string[];
+    };
+}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
+    maxFeatureScreenDensity: {
+        type: string;
+        description: string;
+        defaultValue: number;
+    };
+    fetchSizeLimit: {
+        type: string;
+        defaultValue: number;
+        description: string;
+    };
+    height: {
+        type: string;
+        defaultValue: number;
+        description: string;
+    };
+    mouseover: {
+        type: string;
+        description: string;
+        defaultValue: string;
+        contextVariable: string[];
+    };
+}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, "displayId">>, undefined>>;

package/esm/LinearPairedArcDisplay/configSchema.js

@@ -0,0 +1,24 @@
+import { ConfigurationSchema } from '@jbrowse/core/configuration';
+import { baseLinearDisplayConfigSchema } from '@jbrowse/plugin-linear-genome-view';
+/**
+ * #config LinearPairedArcDisplay
+ */
+export function configSchemaFactory() {
+    return ConfigurationSchema('LinearPairedArcDisplay', {
+        /**
+         * #slot
+         */
+        color: {
+            type: 'color',
+            description: 'the color of the arcs',
+            defaultValue: 'jexl:defaultPairedArcColor(feature,alt)',
+            contextVariable: ['feature', 'alt'],
+        },
+    }, {
+        /**
+         * #baseConfiguration
+         */
+        baseConfiguration: baseLinearDisplayConfigSchema,
+        explicitlyTyped: true,
+    });
+}

package/esm/LinearPairedArcDisplay/fetchChains.d.ts

@@ -0,0 +1,27 @@
+import { LinearArcDisplayModel } from './model';
+export interface ReducedFeature {
+    name: string;
+    strand: number;
+    refName: string;
+    start: number;
+    end: number;
+    id: string;
+    flags: number;
+    tlen: number;
+    pair_orientation: string;
+    next_ref?: string;
+    next_pos?: number;
+    clipPos: number;
+    SA?: string;
+}
+export interface ChainStats {
+    max: number;
+    min: number;
+    upper: number;
+    lower: number;
+}
+export interface ChainData {
+    chains: ReducedFeature[][];
+    stats?: ChainStats;
+}
+export declare function fetchChains(self: LinearArcDisplayModel): Promise<void>;

package/esm/LinearPairedArcDisplay/fetchChains.js

@@ -0,0 +1,18 @@
+import { getContainingTrack, getContainingView, getSession, } from '@jbrowse/core/util';
+export async function fetchChains(self) {
+    // @ts-expect-error
+    const { rpcSessionId: sessionId } = getContainingTrack(self);
+    const { rpcManager } = getSession(self);
+    const view = getContainingView(self);
+    if (!view.initialized || self.error || self.regionTooLarge) {
+        return;
+    }
+    self.setLoading(true);
+    const ret = (await rpcManager.call(sessionId, 'CoreGetFeatures', {
+        sessionId,
+        regions: view.staticBlocks.contentBlocks,
+        adapterConfig: self.adapterConfig,
+    }));
+    self.setFeatures(ret);
+    self.setLoading(false);
+}