@jbrowse/plugin-arc 2.7.1 → 2.8.0

package/esm/LinearPairedArcDisplay/index.d.ts

@@ -0,0 +1,2 @@
+import PluginManager from '@jbrowse/core/PluginManager';
+export default function LinearPairedArcDisplayF(pluginManager: PluginManager): void;

package/esm/LinearPairedArcDisplay/index.js

@@ -0,0 +1,18 @@
+import { DisplayType } from '@jbrowse/core/pluggableElementTypes';
+import { configSchemaFactory } from './configSchema';
+import { stateModelFactory } from './model';
+import { lazy } from 'react';
+export default function LinearPairedArcDisplayF(pluginManager) {
+    pluginManager.addDisplayType(() => {
+        const configSchema = configSchemaFactory();
+        return new DisplayType({
+            name: 'LinearPairedArcDisplay',
+            displayName: 'Arc display',
+            configSchema,
+            stateModel: stateModelFactory(configSchema),
+            trackType: 'VariantTrack',
+            viewType: 'LinearGenomeView',
+            ReactComponent: lazy(() => import('./components/ReactComponent')),
+        });
+    });
+}

package/esm/LinearPairedArcDisplay/model.d.ts

@@ -0,0 +1,161 @@
+import React from 'react';
+import { AnyConfigurationSchemaType } from '@jbrowse/core/configuration';
+import { Instance } from 'mobx-state-tree';
+import { Feature } from '@jbrowse/core/util';
+/**
+ * #stateModel LinearPairedArcDisplay
+ * extends BaseDisplay, TrackHeightMixin, FeatureDensityMixin
+ */
+export declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): 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>>;
+} & {
+    heightPreConfig: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
+} & {
+    userBpPerPxLimit: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
+    userByteSizeLimit: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
+} & {
+    /**
+     * #property
+     */
+    type: import("mobx-state-tree").ISimpleType<"LinearPairedArcDisplay">;
+    /**
+     * #property
+     */
+    configuration: AnyConfigurationSchemaType;
+    /**
+     * #property
+     */
+    displayMode: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
+}, {
+    rendererTypeName: string;
+    error: unknown;
+    message: string | undefined;
+} & {
+    readonly RenderingComponent: React.FC<{
+        model: {
+            id: string;
+            type: string;
+            rpcDriverName: string | undefined;
+        } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
+            rendererTypeName: string;
+            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]>;
+            type: import("mobx-state-tree").ISimpleType<string>;
+            rpcDriverName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
+        }, {
+            rendererTypeName: string;
+            error: unknown;
+            message: string | undefined;
+        }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
+        onHorizontalScroll?: Function | undefined;
+        blockState?: Record<string, any> | undefined;
+    }>;
+    readonly DisplayBlurb: React.FC<{
+        model: {
+            id: string;
+            type: string;
+            rpcDriverName: string | undefined;
+        } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
+            rendererTypeName: string;
+            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]>;
+            type: import("mobx-state-tree").ISimpleType<string>;
+            rpcDriverName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
+        }, {
+            rendererTypeName: string;
+            error: unknown;
+            message: string | undefined;
+        }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
+    }> | null;
+    readonly adapterConfig: any;
+    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;
+} & {
+    setMessage(arg?: string | undefined): void;
+    setError(error?: unknown): void;
+    setRpcDriverName(rpcDriverName: string): void;
+    reload(): void;
+} & {
+    scrollTop: number;
+} & {
+    readonly height: number;
+} & {
+    setScrollTop(scrollTop: number): void;
+    setHeight(displayHeight: number): number; /**
+     * #property
+     */
+    resizeHeight(distance: number): number;
+} & {
+    featureDensityStatsP: Promise<import("@jbrowse/core/data_adapters/BaseAdapter").FeatureDensityStats> | undefined;
+    featureDensityStats: import("@jbrowse/core/data_adapters/BaseAdapter").FeatureDensityStats | undefined;
+    currStatsBpPerPx: number;
+} & {
+    readonly currentBytesRequested: number;
+    readonly currentFeatureScreenDensity: number;
+    readonly maxFeatureScreenDensity: any;
+    readonly featureDensityStatsReady: boolean;
+    readonly maxAllowableBytes: number;
+} & {
+    afterAttach(): void;
+} & {
+    setCurrStatsBpPerPx(n: number): void;
+    setFeatureDensityStatsLimit(stats?: import("@jbrowse/core/data_adapters/BaseAdapter").FeatureDensityStats | undefined): void;
+    getFeatureDensityStats(): Promise<import("@jbrowse/core/data_adapters/BaseAdapter").FeatureDensityStats>;
+    setFeatureDensityStatsP(arg: any): void;
+    setFeatureDensityStats(featureDensityStats?: import("@jbrowse/core/data_adapters/BaseAdapter").FeatureDensityStats | undefined): void;
+    clearFeatureDensityStats(): void;
+} & {
+    readonly regionTooLarge: boolean;
+    readonly regionTooLargeReason: string;
+} & {
+    regionCannotBeRenderedText(_region: import("@jbrowse/core/util").Region): "" | "Force load to see features";
+    regionCannotBeRendered(_region: import("@jbrowse/core/util").Region): React.JSX.Element | null;
+} & {
+    lastDrawnOffsetPx: number;
+    features: Feature[] | undefined;
+    loading: boolean;
+    drawn: boolean;
+} & {
+    /**
+     * #getter
+     */
+    readonly displayModeSetting: any;
+} & {
+    /**
+     * #action
+     */
+    selectFeature(feature: Feature): void;
+    /**
+     * #action
+     */
+    setLoading(flag: boolean): void;
+    /**
+     * #action
+     */
+    setFeatures(f: Feature[]): void;
+    /**
+     * #action
+     */
+    setDisplayMode(flag: string): void;
+} & {
+    afterAttach(): void;
+    /**
+     * #action
+     */
+    renderSvg(opts: {
+        rasterizeLayers?: boolean;
+    }): Promise<React.ReactNode>;
+}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;
+export type LinearArcDisplayStateModel = ReturnType<typeof stateModelFactory>;
+export type LinearArcDisplayModel = Instance<LinearArcDisplayStateModel>;

package/esm/LinearPairedArcDisplay/model.js

@@ -0,0 +1,102 @@
+import { ConfigurationReference, getConf, } from '@jbrowse/core/configuration';
+import { types } from 'mobx-state-tree';
+import { getSession, isSessionModelWithWidgets, getContainingView, getContainingTrack, isSelectionContainer, } from '@jbrowse/core/util';
+import { BaseDisplay } from '@jbrowse/core/pluggableElementTypes';
+import { FeatureDensityMixin, TrackHeightMixin, } from '@jbrowse/plugin-linear-genome-view';
+/**
+ * #stateModel LinearPairedArcDisplay
+ * extends BaseDisplay, TrackHeightMixin, FeatureDensityMixin
+ */
+export function stateModelFactory(configSchema) {
+    return types
+        .compose('LinearPairedArcDisplay', BaseDisplay, TrackHeightMixin(), FeatureDensityMixin(), types.model({
+        /**
+         * #property
+         */
+        type: types.literal('LinearPairedArcDisplay'),
+        /**
+         * #property
+         */
+        configuration: ConfigurationReference(configSchema),
+        /**
+         * #property
+         */
+        displayMode: types.maybe(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 : getConf(self, ['renderer', 'displayMode']);
+        },
+    }))
+        .actions(self => ({
+        /**
+         * #action
+         */
+        selectFeature(feature) {
+            const session = getSession(self);
+            if (isSessionModelWithWidgets(session)) {
+                const featureWidget = session.addWidget('VariantFeatureWidget', 'variantFeature', {
+                    view: getContainingView(self),
+                    track: getContainingTrack(self),
+                    featureData: feature.toJSON(),
+                });
+                session.showWidget(featureWidget);
+            }
+            if (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 import('./afterAttach');
+                    doAfterAttach(self);
+                }
+                catch (e) {
+                    console.error(e);
+                    self.setError(e);
+                }
+            })();
+        },
+        /**
+         * #action
+         */
+        async renderSvg(opts) {
+            const { renderArcSvg } = await import('./renderSvg');
+            // @ts-expect-error
+            return renderArcSvg(self, opts);
+        },
+    }));
+}

package/esm/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/esm/LinearPairedArcDisplay/renderSvg.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { getContainingView, when } from '@jbrowse/core/util';
+import Arcs from './components/Arcs';
+export async function renderArcSvg(model, _opts) {
+    await when(() => !model.loading);
+    const view = getContainingView(model);
+    const width = view.dynamicBlocks.totalWidthPx;
+    const height = model.height;
+    const clipid = 'arc-' + model.id;
+    return (React.createElement(React.Fragment, null,
+        React.createElement("defs", null,
+            React.createElement("clipPath", { id: clipid },
+                React.createElement("rect", { x: 0, y: 0, width: width, height: height }))),
+        React.createElement("g", { clipPath: `url(#${clipid})` },
+            React.createElement(Arcs, { model: model, exportSVG: true }))));
+}

package/esm/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/esm/LinearPairedArcDisplay/util.js

@@ -0,0 +1,121 @@
+import { toArray } from 'rxjs/operators';
+import { firstValueFrom } from 'rxjs';
+import { addDisposer, isAlive } from 'mobx-state-tree';
+import { autorun } from 'mobx';
+// get tag from BAM or CRAM feature, where CRAM uses feature.get('tags') and
+// BAM does not
+export function getTag(feature, tag) {
+    const tags = feature.get('tags');
+    return tags !== undefined ? tags[tag] : feature.get(tag);
+}
+// use fallback alt tag, used in situations where upper case/lower case tags
+// exist e.g. Mm/MM for base modifications
+export function getTagAlt(feature, tag, alt) {
+    var _a;
+    return (_a = getTag(feature, tag)) !== null && _a !== void 0 ? _a : getTag(feature, alt);
+}
+// orientation definitions from igv.js, see also
+// https://software.broadinstitute.org/software/igv/interpreting_pair_orientations
+export const 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',
+    },
+};
+export const pairMap = {
+    LR: 'color_pair_lr',
+    LL: 'color_pair_ll',
+    RR: 'color_pair_rr',
+    RL: 'color_pair_rl',
+};
+export 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';
+}
+// fetches region sequence augmenting by +/- 1bp for CpG on either side of
+// requested region
+export async function fetchSequence(region, adapter) {
+    var _a;
+    const { start, end, originalRefName, refName } = region;
+    const feats = await firstValueFrom(adapter
+        .getFeatures({
+        ...region,
+        refName: originalRefName || refName,
+        end: end + 1,
+        start: Math.max(0, start - 1),
+    })
+        .pipe(toArray()));
+    return (_a = feats[0]) === null || _a === void 0 ? void 0 : _a.get('seq');
+}
+// has to check underlying C-G (aka CpG) on the reference sequence
+export function shouldFetchReferenceSequence(type) {
+    return type === 'methylation';
+}
+// adapted from IGV
+// https://github.com/igvteam/igv/blob/e803e3af2d8c9ea049961dfd4628146bdde9a574/src/main/java/org/broad/igv/sam/mods/BaseModificationColors.java#L27
+export const 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)',
+};
+export function createAutorun(self, cb, opts) {
+    addDisposer(self, autorun(async () => {
+        try {
+            await cb();
+        }
+        catch (e) {
+            if (isAlive(self)) {
+                self.setError(e);
+            }
+        }
+    }, opts));
+}
+export function randomColor() {
+    return `hsl(${Math.random() * 200}, 50%, 50%)`;
+}

package/esm/index.js

@@ -1,6 +1,8 @@
 import Plugin from '@jbrowse/core/Plugin';
 import LinearArcDisplayF from './LinearArcDisplay';
+import LinearPairedArcDisplayF from './LinearPairedArcDisplay';
 import ArcRendererF from './ArcRenderer';
+import { set1 } from '@jbrowse/core/ui/colors';
 export default class ArcPlugin extends Plugin {
     constructor() {
         super(...arguments);
@@ -9,8 +11,27 @@ export default class ArcPlugin extends Plugin {
     install(pluginManager) {
         ArcRendererF(pluginManager);
         LinearArcDisplayF(pluginManager);
-        pluginManager.jexl.addFunction('logThickness', (feature, attributeName) => {
-            return Math.log(feature.get(attributeName) + 1);
+        LinearPairedArcDisplayF(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 set1[0];
+            }
+            else if (alt === null || alt === void 0 ? void 0 : alt.startsWith('<DUP')) {
+                return set1[1];
+            }
+            else if (alt === null || alt === void 0 ? void 0 : alt.startsWith('<INV')) {
+                return set1[2];
+            }
+            else if (alt === null || alt === void 0 ? void 0 : alt.startsWith('<TRA')) {
+                return set1[3];
+            }
+            else if (alt === null || alt === void 0 ? void 0 : alt.startsWith('<CNV')) {
+                return set1[4];
+            }
+            else {
+                return set1[6]; // skip 5, yellow
+            }
         });
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-arc",
-  "version": "2.7.1",
+  "version": "2.8.0",
   "description": "JBrowse 2 arc adapters, tracks, etc.",
   "keywords": [
     "jbrowse",
@@ -56,5 +56,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2cda1611eebd12517f2a3cfc1b612face27005d4"
+  "gitHead": "ee8c2bdc8bd4f1a70b1eefda984f04a2830d9ca0"
 }