@jbrowse/plugin-variants 4.0.3 → 4.1.1

package/esm/ChordVariantDisplay/models/stateModelFactory.d.ts

@@ -58,6 +58,7 @@ declare const stateModelFactory: (configSchema: AnyConfigurationSchemaType) => i
     }> | null;
     readonly adapterConfig: any;
     readonly parentTrack: import("@jbrowse/core/util").AbstractTrackModel;
+    readonly isMinimized: boolean;
     readonly parentDisplay: any;
     readonly effectiveRpcDriverName: any;
 } & {
@@ -114,6 +115,7 @@ declare const stateModelFactory: (configSchema: AnyConfigurationSchemaType) => i
             }> | null;
             readonly adapterConfig: any;
             readonly parentTrack: import("@jbrowse/core/util").AbstractTrackModel;
+            readonly isMinimized: boolean;
             readonly parentDisplay: any;
             readonly effectiveRpcDriverName: any;
         } & import("@jbrowse/mobx-state-tree").IStateTreeNode<import("@jbrowse/mobx-state-tree").IModelType<{
@@ -167,6 +169,7 @@ declare const stateModelFactory: (configSchema: AnyConfigurationSchemaType) => i
             }> | null;
             readonly adapterConfig: any;
             readonly parentTrack: import("@jbrowse/core/util").AbstractTrackModel;
+            readonly isMinimized: boolean;
             readonly parentDisplay: any;
             readonly effectiveRpcDriverName: any;
         }, import("@jbrowse/mobx-state-tree")._NotCustomized, import("@jbrowse/mobx-state-tree")._NotCustomized>>;
@@ -258,6 +261,7 @@ declare const stateModelFactory: (configSchema: AnyConfigurationSchemaType) => i
             }> | null;
             readonly adapterConfig: any;
             readonly parentTrack: import("@jbrowse/core/util").AbstractTrackModel;
+            readonly isMinimized: boolean;
             readonly parentDisplay: any;
             readonly effectiveRpcDriverName: any;
         } & {
@@ -314,6 +318,7 @@ declare const stateModelFactory: (configSchema: AnyConfigurationSchemaType) => i
                     }> | null;
                     readonly adapterConfig: any;
                     readonly parentTrack: import("@jbrowse/core/util").AbstractTrackModel;
+                    readonly isMinimized: boolean;
                     readonly parentDisplay: any;
                     readonly effectiveRpcDriverName: any;
                 } & import("@jbrowse/mobx-state-tree").IStateTreeNode<import("@jbrowse/mobx-state-tree").IModelType<{
@@ -367,6 +372,7 @@ declare const stateModelFactory: (configSchema: AnyConfigurationSchemaType) => i
                     }> | null;
                     readonly adapterConfig: any;
                     readonly parentTrack: import("@jbrowse/core/util").AbstractTrackModel;
+                    readonly isMinimized: boolean;
                     readonly parentDisplay: any;
                     readonly effectiveRpcDriverName: any;
                 }, import("@jbrowse/mobx-state-tree")._NotCustomized, import("@jbrowse/mobx-state-tree")._NotCustomized>>;
@@ -447,6 +453,7 @@ declare const stateModelFactory: (configSchema: AnyConfigurationSchemaType) => i
             }> | null;
             readonly adapterConfig: any;
             readonly parentTrack: import("@jbrowse/core/util").AbstractTrackModel;
+            readonly isMinimized: boolean;
             readonly parentDisplay: any;
             readonly effectiveRpcDriverName: any;
         } & {
@@ -503,6 +510,7 @@ declare const stateModelFactory: (configSchema: AnyConfigurationSchemaType) => i
                     }> | null;
                     readonly adapterConfig: any;
                     readonly parentTrack: import("@jbrowse/core/util").AbstractTrackModel;
+                    readonly isMinimized: boolean;
                     readonly parentDisplay: any;
                     readonly effectiveRpcDriverName: any;
                 } & import("@jbrowse/mobx-state-tree").IStateTreeNode<import("@jbrowse/mobx-state-tree").IModelType<{
@@ -556,6 +564,7 @@ declare const stateModelFactory: (configSchema: AnyConfigurationSchemaType) => i
                     }> | null;
                     readonly adapterConfig: any;
                     readonly parentTrack: import("@jbrowse/core/util").AbstractTrackModel;
+                    readonly isMinimized: boolean;
                     readonly parentDisplay: any;
                     readonly effectiveRpcDriverName: any;
                 }, import("@jbrowse/mobx-state-tree")._NotCustomized, import("@jbrowse/mobx-state-tree")._NotCustomized>>;

package/esm/LDDisplay/SharedLDConfigSchema.d.ts

@@ -0,0 +1,102 @@
+export default function sharedLDConfigFactory(): import("node_modules/@jbrowse/core/src/configuration/configurationSchema").ConfigurationSchemaType<{
+    minorAlleleFrequencyFilter: {
+        type: string;
+        defaultValue: number;
+    };
+    lengthCutoffFilter: {
+        type: string;
+        defaultValue: number;
+    };
+    lineZoneHeight: {
+        type: string;
+        defaultValue: number;
+    };
+    ldMetric: {
+        type: string;
+        model: import("@jbrowse/mobx-state-tree").ISimpleType<string>;
+        defaultValue: string;
+    };
+    colorScheme: {
+        type: string;
+        defaultValue: string;
+    };
+    showLegend: {
+        type: string;
+        defaultValue: boolean;
+    };
+    showLDTriangle: {
+        type: string;
+        defaultValue: boolean;
+    };
+    showRecombination: {
+        type: string;
+        defaultValue: boolean;
+    };
+    recombinationZoneHeight: {
+        type: string;
+        defaultValue: number;
+    };
+    fitToHeight: {
+        type: string;
+        defaultValue: boolean;
+    };
+    hweFilterThreshold: {
+        type: string;
+        defaultValue: number;
+    };
+    callRateFilter: {
+        type: string;
+        defaultValue: number;
+    };
+    showVerticalGuides: {
+        type: string;
+        defaultValue: boolean;
+    };
+    showLabels: {
+        type: string;
+        defaultValue: boolean;
+    };
+    tickHeight: {
+        type: string;
+        defaultValue: number;
+    };
+    useGenomicPositions: {
+        type: string;
+        defaultValue: boolean;
+    };
+    signedLD: {
+        type: string;
+        defaultValue: boolean;
+    };
+    jexlFilters: {
+        type: string;
+        defaultValue: never[];
+    };
+}, import("node_modules/@jbrowse/core/src/configuration/configurationSchema").ConfigurationSchemaOptions<import("node_modules/@jbrowse/core/src/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[];
+    };
+    jexlFilters: {
+        type: string;
+        description: string;
+        defaultValue: never[];
+    };
+}, import("node_modules/@jbrowse/core/src/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, "displayId">>, undefined>>;

package/esm/LDDisplay/SharedLDConfigSchema.js

@@ -0,0 +1,83 @@
+import { ConfigurationSchema } from '@jbrowse/core/configuration';
+import { types } from '@jbrowse/mobx-state-tree';
+import { baseLinearDisplayConfigSchema } from '@jbrowse/plugin-linear-genome-view';
+export default function sharedLDConfigFactory() {
+    return ConfigurationSchema('SharedLDDisplay', {
+        minorAlleleFrequencyFilter: {
+            type: 'number',
+            defaultValue: 0.1,
+        },
+        lengthCutoffFilter: {
+            type: 'number',
+            defaultValue: Number.MAX_SAFE_INTEGER,
+        },
+        lineZoneHeight: {
+            type: 'number',
+            defaultValue: 100,
+        },
+        ldMetric: {
+            type: 'stringEnum',
+            model: types.enumeration('LDMetric', ['r2', 'dprime']),
+            defaultValue: 'r2',
+        },
+        colorScheme: {
+            type: 'string',
+            defaultValue: '',
+        },
+        showLegend: {
+            type: 'boolean',
+            defaultValue: false,
+        },
+        showLDTriangle: {
+            type: 'boolean',
+            defaultValue: true,
+        },
+        showRecombination: {
+            type: 'boolean',
+            defaultValue: false,
+        },
+        recombinationZoneHeight: {
+            type: 'number',
+            defaultValue: 50,
+        },
+        fitToHeight: {
+            type: 'boolean',
+            defaultValue: false,
+        },
+        hweFilterThreshold: {
+            type: 'number',
+            defaultValue: 0,
+        },
+        callRateFilter: {
+            type: 'number',
+            defaultValue: 0,
+        },
+        showVerticalGuides: {
+            type: 'boolean',
+            defaultValue: true,
+        },
+        showLabels: {
+            type: 'boolean',
+            defaultValue: false,
+        },
+        tickHeight: {
+            type: 'number',
+            defaultValue: 6,
+        },
+        useGenomicPositions: {
+            type: 'boolean',
+            defaultValue: false,
+        },
+        signedLD: {
+            type: 'boolean',
+            defaultValue: false,
+        },
+        jexlFilters: {
+            type: 'stringArray',
+            defaultValue: [],
+        },
+    }, {
+        baseConfiguration: baseLinearDisplayConfigSchema,
+        explicitlyTyped: true,
+    });
+}

package/esm/LDDisplay/afterAttach.d.ts

@@ -0,0 +1,2 @@
+import type { SharedLDModel } from './shared.ts';
+export declare function doAfterAttach(self: SharedLDModel): void;

package/esm/LDDisplay/afterAttach.js

@@ -0,0 +1,123 @@
+import { getContainingView, getRpcSessionId, getSession, isAbortException, } from '@jbrowse/core/util';
+import { createStopToken, stopStopToken } from '@jbrowse/core/util/stopToken';
+import { addDisposer, isAlive } from '@jbrowse/mobx-state-tree';
+import { drawCanvasImageData } from '@jbrowse/plugin-linear-genome-view';
+import { autorun, untracked } from 'mobx';
+export function doAfterAttach(self) {
+    const performRender = async () => {
+        if (self.isMinimized) {
+            return;
+        }
+        if (!self.showLDTriangle) {
+            return;
+        }
+        const view = getContainingView(self);
+        const { bpPerPx, dynamicBlocks } = view;
+        const regions = dynamicBlocks.contentBlocks;
+        if (!regions.length) {
+            return;
+        }
+        if (bpPerPx > 1000) {
+            return;
+        }
+        const { adapterConfig } = self;
+        const renderProps = untracked(() => self.renderProps());
+        try {
+            const session = getSession(self);
+            const { rpcManager } = session;
+            const rpcSessionId = getRpcSessionId(self);
+            const previousToken = untracked(() => self.renderingStopToken);
+            if (previousToken) {
+                stopStopToken(previousToken);
+            }
+            const stopToken = createStopToken();
+            self.setRenderingStopToken(stopToken);
+            self.setLoading(true);
+            self.setCanvasDrawn(false);
+            const result = (await rpcManager.call(rpcSessionId, 'CoreRender', {
+                sessionId: rpcSessionId,
+                rendererType: 'LDRenderer',
+                regions: [...regions],
+                adapterConfig,
+                bpPerPx,
+                stopToken,
+                ...renderProps,
+            }, {
+                statusCallback: (msg) => {
+                    if (isAlive(self)) {
+                        self.setStatusMessage(msg);
+                    }
+                },
+            }));
+            if (result.imageData) {
+                self.setRenderingImageData(result.imageData);
+                self.setLastDrawnOffsetPx(view.offsetPx);
+                self.setLastDrawnBpPerPx(view.bpPerPx);
+            }
+            self.setFlatbushData(result.flatbush, result.items ?? [], result.ldData?.snps ?? [], result.maxScore ?? 1, result.yScalar ?? 1, result.w ?? 0);
+            self.setFilterStats(result.filterStats);
+            self.setRecombination(result.recombination);
+        }
+        catch (error) {
+            if (!isAbortException(error)) {
+                console.error(error);
+                if (isAlive(self)) {
+                    self.setError(error);
+                }
+            }
+        }
+        finally {
+            if (isAlive(self)) {
+                self.setRenderingStopToken(undefined);
+                self.setLoading(false);
+            }
+        }
+    };
+    addDisposer(self, autorun(() => {
+        if (self.isMinimized) {
+            return;
+        }
+        const view = getContainingView(self);
+        if (!view.initialized) {
+            return;
+        }
+        const { dynamicBlocks } = view;
+        const regions = dynamicBlocks.contentBlocks;
+        self.ldMetric;
+        self.minorAlleleFrequencyFilter;
+        self.lengthCutoffFilter;
+        self.hweFilterThreshold;
+        self.callRateFilter;
+        self.colorScheme;
+        self.showLDTriangle;
+        self.fitToHeight;
+        self.useGenomicPositions;
+        self.signedLD;
+        if (self.fitToHeight) {
+            self.ldCanvasHeight;
+        }
+        if (untracked(() => self.error) || !regions.length) {
+            return;
+        }
+        performRender();
+    }, {
+        delay: 500,
+        name: 'LDDisplayRender',
+    }));
+    addDisposer(self, autorun(() => {
+        if (self.isMinimized) {
+            return;
+        }
+        const view = getContainingView(self);
+        if (!view.initialized) {
+            return;
+        }
+        const success = drawCanvasImageData(self.ref, self.renderingImageData);
+        if (isAlive(self)) {
+            self.setCanvasDrawn(success);
+        }
+    }, {
+        delay: 1000,
+        name: 'LDDisplayCanvas',
+    }));
+}

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

@@ -0,0 +1,15 @@
+import React from 'react';
+export interface LDDisplayModel {
+    error?: unknown;
+    regionTooLarge?: boolean;
+    reload: () => void;
+    regionCannotBeRendered: () => React.ReactElement | null;
+    drawn: boolean;
+    loading: boolean;
+    statusMessage?: string;
+}
+declare const LDBaseDisplayComponent: ({ model, children, }: {
+    model: LDDisplayModel;
+    children?: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element | null;
+export default LDBaseDisplayComponent;

package/esm/LDDisplay/components/BaseDisplayComponent.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { ErrorMessage, LoadingEllipses } from '@jbrowse/core/ui';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
+import { observer } from 'mobx-react';
+const useStyles = makeStyles()({
+    loading: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: 'rgba(255, 255, 255, 0.15)',
+        backgroundImage: `repeating-linear-gradient(45deg, transparent, transparent 8px, rgba(0, 0, 0, 0.05) 8px, rgba(0, 0, 0, 0.05) 16px)`,
+        pointerEvents: 'none',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        zIndex: 1,
+    },
+    loadingMessage: {
+        zIndex: 2,
+        pointerEvents: 'none',
+    },
+});
+const LDBaseDisplayComponent = observer(function LDBaseDisplayComponent({ model, children, }) {
+    const { error, regionTooLarge } = model;
+    return error ? (_jsx(ErrorMessage, { error: error })) : regionTooLarge ? (model.regionCannotBeRendered()) : (_jsx(DataDisplay, { model: model, children: children }));
+});
+const DataDisplay = observer(function DataDisplay({ model, children, }) {
+    const { drawn, loading } = model;
+    return (_jsxs("div", { "data-testid": `drawn-${drawn}`, children: [children, loading ? _jsx(LoadingBar, { model: model }) : null] }));
+});
+const LoadingBar = observer(function LoadingBar({ model, }) {
+    const { classes } = useStyles();
+    const { statusMessage } = model;
+    return (_jsx("div", { className: classes.loading, children: _jsx("div", { className: classes.loadingMessage, children: _jsx(LoadingEllipses, { message: statusMessage }) }) }));
+});
+export default LDBaseDisplayComponent;

package/esm/LDDisplay/components/LDColorLegend.d.ts

@@ -0,0 +1,15 @@
+export declare function LDColorLegendContent({ ldMetric, signedLD, x, y, }: {
+    ldMetric: string;
+    signedLD?: boolean;
+    x?: number;
+    y?: number;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function LDSVGColorLegend({ ldMetric, width, signedLD, }: {
+    ldMetric: string;
+    width: number;
+    signedLD?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export default function LDColorLegend({ ldMetric, signedLD, }: {
+    ldMetric: string;
+    signedLD?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/esm/LDDisplay/components/LDColorLegend.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const LEGEND_WIDTH = 120;
+const LEGEND_HEIGHT = 40;
+const BAR_WIDTH = 100;
+const BAR_HEIGHT = 12;
+const PADDING = 8;
+const FONT_SIZE = 10;
+function getColorStops(ldMetric, signedLD) {
+    if (signedLD) {
+        if (ldMetric === 'dprime') {
+            return [
+                { offset: '0%', color: 'rgb(0,100,0)' },
+                { offset: '25%', color: 'rgb(64,192,64)' },
+                { offset: '50%', color: 'rgb(255,255,255)' },
+                { offset: '75%', color: 'rgb(128,128,255)' },
+                { offset: '100%', color: 'rgb(0,0,160)' },
+            ];
+        }
+        return [
+            { offset: '0%', color: 'rgb(0,0,160)' },
+            { offset: '25%', color: 'rgb(128,128,255)' },
+            { offset: '50%', color: 'rgb(255,255,255)' },
+            { offset: '75%', color: 'rgb(255,128,128)' },
+            { offset: '100%', color: 'rgb(160,0,0)' },
+        ];
+    }
+    if (ldMetric === 'dprime') {
+        return [
+            { offset: '0%', color: 'rgb(255,255,255)' },
+            { offset: '50%', color: 'rgb(128,128,255)' },
+            { offset: '100%', color: 'rgb(0,0,160)' },
+        ];
+    }
+    return [
+        { offset: '0%', color: 'rgb(255,255,255)' },
+        { offset: '50%', color: 'rgb(255,128,128)' },
+        { offset: '100%', color: 'rgb(160,0,0)' },
+    ];
+}
+function getLabels(ldMetric, signedLD) {
+    if (signedLD) {
+        return {
+            min: '-1',
+            max: '1',
+            metric: ldMetric === 'dprime' ? "D'" : 'R',
+        };
+    }
+    return {
+        min: '0',
+        max: '1',
+        metric: ldMetric === 'dprime' ? "D'" : 'R²',
+    };
+}
+export function LDColorLegendContent({ ldMetric, signedLD = false, x = 0, y = 0, }) {
+    const gradientId = `ld-gradient-${ldMetric}-${signedLD ? 'signed' : 'unsigned'}`;
+    const stops = getColorStops(ldMetric, signedLD);
+    const labels = getLabels(ldMetric, signedLD);
+    return (_jsxs("g", { transform: `translate(${x}, ${y})`, children: [_jsx("defs", { children: _jsx("linearGradient", { id: gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: stops.map((stop, idx) => (_jsx("stop", { offset: stop.offset, style: { stopColor: stop.color, stopOpacity: 1 } }, idx))) }) }), _jsx("rect", { x: 0, y: 0, width: LEGEND_WIDTH, height: LEGEND_HEIGHT, fill: "rgba(255,255,255,0.9)", stroke: "#ccc", strokeWidth: 1, rx: 4 }), _jsx("rect", { x: PADDING, y: PADDING, width: BAR_WIDTH, height: BAR_HEIGHT, fill: `url(#${gradientId})`, rx: 2 }), _jsx("text", { x: PADDING, y: PADDING + BAR_HEIGHT + FONT_SIZE + 2, fontSize: FONT_SIZE, fill: "black", children: labels.min }), _jsx("text", { x: PADDING + BAR_WIDTH / 2, y: PADDING + BAR_HEIGHT + FONT_SIZE + 2, fontSize: FONT_SIZE, fill: "black", textAnchor: "middle", children: labels.metric }), _jsx("text", { x: PADDING + BAR_WIDTH, y: PADDING + BAR_HEIGHT + FONT_SIZE + 2, fontSize: FONT_SIZE, fill: "black", textAnchor: "end", children: labels.max })] }));
+}
+export function LDSVGColorLegend({ ldMetric, width, signedLD = false, }) {
+    const x = width - LEGEND_WIDTH - 10;
+    const y = 10;
+    return (_jsx(LDColorLegendContent, { ldMetric: ldMetric, signedLD: signedLD, x: x, y: y }));
+}
+export default function LDColorLegend({ ldMetric, signedLD = false, }) {
+    return (_jsx("svg", { style: {
+            position: 'absolute',
+            top: 4,
+            right: 4,
+            width: LEGEND_WIDTH,
+            height: LEGEND_HEIGHT,
+            zIndex: 10,
+            overflow: 'visible',
+        }, children: _jsx(LDColorLegendContent, { ldMetric: ldMetric, signedLD: signedLD }) }));
+}

package/esm/LDDisplay/components/LDDisplayComponent.d.ts

@@ -0,0 +1,5 @@
+import type { SharedLDModel } from '../shared.ts';
+declare const LDDisplayComponent: ({ model, }: {
+    model: SharedLDModel;
+}) => import("react/jsx-runtime").JSX.Element;
+export default LDDisplayComponent;