@jbrowse/plugin-variants 4.0.4 → 4.1.3

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

@@ -0,0 +1,16 @@
+import type { SharedLDModel } from '../shared.ts';
+export declare const Wrapper: ({ children, model, exportSVG, yOffset, }: {
+    model: SharedLDModel;
+    children: React.ReactNode;
+    exportSVG?: boolean;
+    yOffset?: number;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const VariantLabels: ({ model, }: {
+    model: SharedLDModel;
+}) => import("react/jsx-runtime").JSX.Element | null;
+declare const LinesConnectingMatrixToGenomicPosition: ({ model, exportSVG, yOffset, }: {
+    model: SharedLDModel;
+    exportSVG?: boolean;
+    yOffset?: number;
+}) => import("react/jsx-runtime").JSX.Element | null;
+export default LinesConnectingMatrixToGenomicPosition;

package/esm/LDDisplay/components/LinesConnectingMatrixToGenomicPosition.js

@@ -0,0 +1,109 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, isValidElement, useState } from 'react';
+import { ResizeHandle, SanitizedHTML } from '@jbrowse/core/ui';
+import BaseTooltip from '@jbrowse/core/ui/BaseTooltip';
+import { getContainingView, getSession, getStrokeProps, } from '@jbrowse/core/util';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
+import { alpha, useTheme } from '@mui/material';
+import { observer } from 'mobx-react';
+const useStyles = makeStyles()(theme => ({
+    resizeHandle: {
+        height: 5,
+        boxSizing: 'border-box',
+        background: 'transparent',
+        '&:hover': {
+            background: theme.palette.divider,
+        },
+    },
+}));
+export const Wrapper = observer(function Wrapper({ children, model, exportSVG, yOffset = 0, }) {
+    const { height } = model;
+    const { width, offsetPx } = getContainingView(model);
+    const left = Math.max(0, -offsetPx);
+    return exportSVG ? (_jsx("g", { transform: `translate(${left} ${yOffset})`, children: children })) : (_jsx("svg", { style: {
+            position: 'absolute',
+            top: 0,
+            left,
+            height,
+            width,
+        }, children: children }));
+});
+function getGenomicX(view, assembly, snp, offsetAdjustment) {
+    return ((view.bpToPx({
+        refName: assembly.getCanonicalRefName2(snp.refName),
+        coord: snp.start,
+    })?.offsetPx || 0) - offsetAdjustment);
+}
+const TooltipContents = forwardRef(function TooltipContents2({ message }, ref) {
+    return (_jsx("div", { ref: ref, children: isValidElement(message) ? (message) : message ? (_jsx(SanitizedHTML, { html: String(message) })) : null }));
+});
+const LineTooltip = observer(function LineTooltip({ contents, }) {
+    return contents ? (_jsx(BaseTooltip, { children: _jsx(TooltipContents, { message: contents }) })) : null;
+});
+export const VariantLabels = observer(function VariantLabels({ model, }) {
+    const theme = useTheme();
+    const { assemblyManager } = getSession(model);
+    const view = getContainingView(model);
+    const { snps, showLabels } = model;
+    const { offsetPx, assemblyNames } = view;
+    const assembly = assemblyManager.get(assemblyNames[0]);
+    const offsetAdj = Math.max(offsetPx, 0);
+    if (!assembly || snps.length === 0 || !showLabels) {
+        return null;
+    }
+    return (_jsx(_Fragment, { children: snps.map((snp, i) => {
+            const genomicX = getGenomicX(view, assembly, snp, offsetAdj);
+            return (_jsx("text", { x: genomicX, y: 0, transform: `rotate(-90, ${genomicX}, 0)`, fontSize: 10, textAnchor: "end", dominantBaseline: "middle", fill: theme.palette.text.primary, style: { pointerEvents: 'none' }, children: snp.id || 'NOLABEL' }, `${snp.id}-${i}`));
+        }) }));
+});
+const AllLines = observer(function AllLines({ model, setMouseOverLine, }) {
+    const theme = useTheme();
+    const { assemblyManager } = getSession(model);
+    const view = getContainingView(model);
+    const { lineZoneHeight, snps, tickHeight } = model;
+    const { offsetPx, assemblyNames, dynamicBlocks } = view;
+    const assembly = assemblyManager.get(assemblyNames[0]);
+    const b0 = dynamicBlocks.contentBlocks[0]?.widthPx || 0;
+    const n = snps.length;
+    const offsetAdj = Math.max(offsetPx, 0);
+    const strokeProps = getStrokeProps(alpha(theme.palette.text.primary, 0.4));
+    if (!assembly || n === 0) {
+        return null;
+    }
+    return (_jsxs(_Fragment, { children: [snps.map((snp, i) => {
+                const genomicX = getGenomicX(view, assembly, snp, offsetAdj);
+                const matrixX = ((i + 0.5) * b0) / n;
+                return (_jsxs("g", { onMouseEnter: () => {
+                        setMouseOverLine({ snp, idx: i, genomicX });
+                    }, onMouseLeave: () => {
+                        setMouseOverLine(undefined);
+                    }, children: [_jsx("line", { ...strokeProps, strokeWidth: 1, x1: matrixX, x2: genomicX, y1: lineZoneHeight, y2: tickHeight }), _jsx("line", { ...strokeProps, strokeWidth: 1, x1: genomicX, x2: genomicX, y1: 0, y2: tickHeight })] }, `${snp.id}-${i}`));
+            }), _jsx(VariantLabels, { model: model })] }));
+});
+const LinesConnectingMatrixToGenomicPosition = observer(function LinesConnectingMatrixToGenomicPosition({ model, exportSVG, yOffset = 0, }) {
+    const { classes } = useStyles();
+    const view = getContainingView(model);
+    const [mouseOverLine, setMouseOverLine] = useState();
+    const { lineZoneHeight, snps } = model;
+    const { dynamicBlocks } = view;
+    const b0 = dynamicBlocks.contentBlocks[0]?.widthPx || 0;
+    const n = snps.length;
+    if (n === 0) {
+        return null;
+    }
+    const highlightMatrixX = mouseOverLine
+        ? ((mouseOverLine.idx + 0.5) * b0) / n
+        : 0;
+    return (_jsxs(_Fragment, { children: [_jsxs(Wrapper, { exportSVG: exportSVG, model: model, yOffset: yOffset, children: [_jsx(AllLines, { model: model, setMouseOverLine: setMouseOverLine }), mouseOverLine ? (_jsxs(_Fragment, { children: [_jsx("line", { stroke: "#f00c", strokeWidth: 2, style: {
+                                    pointerEvents: 'none',
+                                }, x1: highlightMatrixX, x2: mouseOverLine.genomicX, y1: lineZoneHeight, y2: model.tickHeight }), _jsx("line", { stroke: "#f00c", strokeWidth: 2, style: {
+                                    pointerEvents: 'none',
+                                }, x1: mouseOverLine.genomicX, x2: mouseOverLine.genomicX, y1: 0, y2: model.tickHeight }), _jsx(LineTooltip, { contents: mouseOverLine.snp.id })] })) : null] }), !exportSVG ? (_jsx(ResizeHandle, { style: {
+                    position: 'absolute',
+                    top: lineZoneHeight - 4,
+                }, onDrag: d => {
+                    model.setLineZoneHeight(lineZoneHeight + d);
+                    return undefined;
+                }, className: classes.resizeHandle })) : null] }));
+});
+export default LinesConnectingMatrixToGenomicPosition;

package/esm/LDDisplay/configSchema1.d.ts

@@ -0,0 +1,115 @@
+import type PluginManager from '@jbrowse/core/PluginManager';
+export default function configSchemaF(_pluginManager: PluginManager): import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaType<{
+    renderer: import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaType<{
+        maxHeight: {
+            type: string;
+            description: string;
+            defaultValue: number;
+        };
+    }, import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaOptions<undefined, undefined>>;
+    height: {
+        type: string;
+        defaultValue: number;
+    };
+}, import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaOptions<import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").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.ts").ConfigurationSchemaOptions<import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").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.ts").ConfigurationSchemaOptions<undefined, "displayId">>, undefined>>, undefined>>;

package/esm/LDDisplay/configSchema1.js

@@ -0,0 +1,16 @@
+import { ConfigurationSchema } from '@jbrowse/core/configuration';
+import sharedLDConfigFactory from "./SharedLDConfigSchema.js";
+import configSchema from "../LDRenderer/configSchema.js";
+function x() { }
+export default function configSchemaF(_pluginManager) {
+    return ConfigurationSchema('LDDisplay', {
+        renderer: configSchema,
+        height: {
+            type: 'number',
+            defaultValue: 400,
+        },
+    }, {
+        baseConfiguration: sharedLDConfigFactory(),
+        explicitlyTyped: true,
+    });
+}

package/esm/LDDisplay/configSchema2.d.ts

@@ -0,0 +1,115 @@
+import type PluginManager from '@jbrowse/core/PluginManager';
+export default function configSchemaF(_pluginManager: PluginManager): import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaType<{
+    renderer: import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaType<{
+        maxHeight: {
+            type: string;
+            description: string;
+            defaultValue: number;
+        };
+    }, import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaOptions<undefined, undefined>>;
+    height: {
+        type: string;
+        defaultValue: number;
+    };
+}, import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaOptions<import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").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.ts").ConfigurationSchemaOptions<import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").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.ts").ConfigurationSchemaOptions<undefined, "displayId">>, undefined>>, undefined>>;

package/esm/LDDisplay/configSchema2.js

@@ -0,0 +1,16 @@
+import { ConfigurationSchema } from '@jbrowse/core/configuration';
+import sharedLDConfigFactory from "./SharedLDConfigSchema.js";
+import configSchema from "../LDRenderer/configSchema.js";
+function x() { }
+export default function configSchemaF(_pluginManager) {
+    return ConfigurationSchema('LDTrackDisplay', {
+        renderer: configSchema,
+        height: {
+            type: 'number',
+            defaultValue: 400,
+        },
+    }, {
+        baseConfiguration: sharedLDConfigFactory(),
+        explicitlyTyped: true,
+    });
+}

package/esm/LDDisplay/index.d.ts

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

package/esm/LDDisplay/index.js

@@ -0,0 +1,35 @@
+import { lazy } from 'react';
+import DisplayType from '@jbrowse/core/pluggableElementTypes/DisplayType';
+import configSchemaF1 from "./configSchema1.js";
+import configSchemaF2 from "./configSchema2.js";
+import stateModelFactory1 from "./stateModel1.js";
+import stateModelFactory2 from "./stateModel2.js";
+const LazyLDDisplayComponent = lazy(() => import("./components/LDDisplayComponent.js"));
+export default function LDDisplayF(pluginManager) {
+    pluginManager.addDisplayType(() => {
+        const configSchema = configSchemaF1(pluginManager);
+        return new DisplayType({
+            name: 'LDDisplay',
+            displayName: 'LD heatmap display',
+            helpText: 'Displays a linkage disequilibrium (LD) heatmap showing pairwise R² values between variants computed directly from VCF genotypes',
+            configSchema,
+            stateModel: stateModelFactory1(configSchema),
+            trackType: 'VariantTrack',
+            viewType: 'LinearGenomeView',
+            ReactComponent: LazyLDDisplayComponent,
+        });
+    });
+    pluginManager.addDisplayType(() => {
+        const configSchema = configSchemaF2(pluginManager);
+        return new DisplayType({
+            name: 'LDTrackDisplay',
+            displayName: 'LD heatmap display',
+            helpText: 'Displays a linkage disequilibrium (LD) heatmap from pre-computed LD data (e.g., PLINK --r2 output)',
+            configSchema,
+            stateModel: stateModelFactory2(configSchema),
+            trackType: 'LDTrack',
+            viewType: 'LinearGenomeView',
+            ReactComponent: LazyLDDisplayComponent,
+        });
+    });
+}

package/esm/LDDisplay/renderSvg.d.ts

@@ -0,0 +1,3 @@
+import type { SharedLDModel } from './shared.ts';
+import type { ExportSvgDisplayOptions } from '@jbrowse/plugin-linear-genome-view';
+export declare function renderSvg(self: SharedLDModel, opts: ExportSvgDisplayOptions): Promise<import("react/jsx-runtime").JSX.Element | null>;

package/esm/LDDisplay/renderSvg.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { getContainingView, getRpcSessionId, getSession, } from '@jbrowse/core/util';
+import { ReactRendering, renderingToSvg, } from '@jbrowse/core/util/offscreenCanvasUtils';
+import { LDSVGColorLegend } from "./components/LDColorLegend.js";
+import LinesConnectingMatrixToGenomicPosition, { VariantLabels, Wrapper, } from "./components/LinesConnectingMatrixToGenomicPosition.js";
+import RecombinationTrack from "../shared/components/RecombinationTrack.js";
+import RecombinationYScaleBar from "../shared/components/RecombinationYScaleBar.js";
+export async function renderSvg(self, opts) {
+    const view = getContainingView(self);
+    const session = getSession(self);
+    const { rpcManager } = session;
+    const height = opts.overrideHeight ?? self.height;
+    const { ldMetric, showLegend, adapterConfig, showRecombination, lineZoneHeight, useGenomicPositions, signedLD, } = self;
+    const { bpPerPx, dynamicBlocks } = view;
+    const regions = dynamicBlocks.contentBlocks;
+    if (!regions.length) {
+        return null;
+    }
+    const renderProps = self.renderProps();
+    const rpcSessionId = getRpcSessionId(self);
+    const rendering = (await rpcManager.call(rpcSessionId, 'CoreRender', {
+        sessionId: rpcSessionId,
+        rendererType: 'LDRenderer',
+        regions: [...regions],
+        adapterConfig,
+        bpPerPx,
+        ...renderProps,
+        exportSVG: opts,
+    }));
+    const finalRendering = await renderingToSvg(rendering, view.staticBlocks.totalWidthPx, height);
+    const visibleWidth = view.width;
+    const clipId = `clip-${self.id}-svg`;
+    const recombTrackHeight = lineZoneHeight / 2;
+    const recombTrackYOffset = lineZoneHeight / 2;
+    return (_jsxs(_Fragment, { children: [_jsx("defs", { children: _jsx("clipPath", { id: clipId, children: _jsx("rect", { x: 0, y: 0, width: visibleWidth, height: height }) }) }), _jsxs("g", { clipPath: `url(#${clipId})`, children: [_jsx("g", { transform: `translate(${Math.max(0, -view.offsetPx)} ${lineZoneHeight})`, children: _jsx(ReactRendering, { rendering: finalRendering }) }), useGenomicPositions ? (_jsx(Wrapper, { model: self, exportSVG: true, children: _jsx(VariantLabels, { model: self }) })) : (_jsx(LinesConnectingMatrixToGenomicPosition, { model: self, exportSVG: true })), showRecombination && rendering.recombination ? (_jsxs("g", { transform: `translate(0 ${recombTrackYOffset})`, children: [_jsx(RecombinationTrack, { recombination: rendering.recombination, width: visibleWidth, height: recombTrackHeight, exportSVG: true, useGenomicPositions: useGenomicPositions, regionStart: regions[0]?.start, bpPerPx: bpPerPx }), _jsx(RecombinationYScaleBar, { height: recombTrackHeight, maxValue: Math.max(...rendering.recombination.values, 0.1), exportSVG: true })] })) : null] }), showLegend ? (_jsx(LDSVGColorLegend, { ldMetric: ldMetric, width: visibleWidth, signedLD: signedLD })) : null] }));
+}