@jbrowse/plugin-variants 4.0.4 → 4.1.3

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;

package/esm/LDDisplay/components/LDDisplayComponent.js

@@ -0,0 +1,203 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import BaseTooltip from '@jbrowse/core/ui/BaseTooltip';
+import { getContainingView } from '@jbrowse/core/util';
+import Flatbush from '@jbrowse/core/util/flatbush';
+import { observer } from 'mobx-react';
+import BaseDisplayComponent from "./BaseDisplayComponent.js";
+import LDColorLegend from "./LDColorLegend.js";
+import LinesConnectingMatrixToGenomicPosition, { VariantLabels, Wrapper, } from "./LinesConnectingMatrixToGenomicPosition.js";
+import RecombinationTrack from "../../shared/components/RecombinationTrack.js";
+import RecombinationYScaleBar from "../../shared/components/RecombinationYScaleBar.js";
+const SQRT2 = Math.sqrt(2);
+function LDTooltip({ item, x, y, ldMetric, signedLD, }) {
+    let metricLabel;
+    if (ldMetric === 'dprime') {
+        metricLabel = "D'";
+    }
+    else {
+        metricLabel = signedLD ? 'R' : 'R²';
+    }
+    return (_jsxs(BaseTooltip, { clientPoint: { x: x + 15, y }, children: [_jsx("div", { children: item.snp1.id }), _jsx("div", { children: item.snp2.id }), _jsxs("div", { children: [metricLabel, ": ", item.ldValue.toFixed(3)] })] }));
+}
+function Crosshairs({ hoveredItem, cellWidth, genomicX1, genomicX2, yScalar, lineZoneHeight, tickHeight, width, height, useGenomicPositions, snps, regionStart, bpPerPx, canvasOffset, }) {
+    const { i, j } = hoveredItem;
+    const toScreen = (x, y) => {
+        const rx = (x + y) / SQRT2;
+        const ry = (y - x) / SQRT2;
+        return { x: rx, y: ry * yScalar + lineZoneHeight };
+    };
+    let hoveredCenter;
+    let snpJPos;
+    let snpIPos;
+    if (useGenomicPositions && snps.length > 0) {
+        const getBoundary = (idx) => {
+            const snpPos = snps[idx].start;
+            const prevPos = idx > 0 ? snps[idx - 1].start : regionStart;
+            const boundaryPos = (prevPos + snpPos) / 2;
+            return (boundaryPos - regionStart) / bpPerPx / SQRT2;
+        };
+        const getNextBoundary = (idx) => {
+            if (idx + 1 < snps.length) {
+                const snpPos = snps[idx].start;
+                const nextPos = snps[idx + 1].start;
+                return ((snpPos + nextPos) / 2 - regionStart) / bpPerPx / SQRT2;
+            }
+            const lastSnpPos = snps[snps.length - 1].start;
+            return (lastSnpPos + 50 * bpPerPx - regionStart) / bpPerPx / SQRT2;
+        };
+        const jBoundary = getBoundary(j);
+        const iBoundary = getBoundary(i);
+        const jNextBoundary = getNextBoundary(j);
+        const iNextBoundary = getNextBoundary(i);
+        const cellCenterX = (jBoundary + jNextBoundary) / 2;
+        const cellCenterY = (iBoundary + iNextBoundary) / 2;
+        hoveredCenter = toScreen(cellCenterX, cellCenterY);
+        snpJPos = { x: genomicX1, y: lineZoneHeight };
+        snpIPos = { x: genomicX2, y: lineZoneHeight };
+    }
+    else {
+        const w = cellWidth;
+        hoveredCenter = toScreen((j + 0.5) * w, (i + 0.5) * w);
+        snpJPos = toScreen((j + 0.5) * w, (j + 0.5) * w);
+        snpIPos = toScreen((i + 0.5) * w, (i + 0.5) * w);
+    }
+    return (_jsxs("svg", { style: {
+            position: 'absolute',
+            left: canvasOffset,
+            top: 0,
+            width,
+            height,
+            pointerEvents: 'none',
+        }, children: [_jsx("path", { stroke: "rgba(0, 0, 0, 0.6)", strokeWidth: 1, fill: "none", d: `M ${snpJPos.x} ${snpJPos.y} L ${hoveredCenter.x} ${hoveredCenter.y} L ${snpIPos.x} ${snpIPos.y}` }), _jsxs("g", { stroke: "#e00", strokeWidth: "1.5", fill: "none", children: [!useGenomicPositions ? (_jsxs(_Fragment, { children: [_jsx("path", { d: `M ${snpJPos.x} ${snpJPos.y} L ${genomicX1} ${tickHeight}` }), _jsx("path", { d: `M ${snpIPos.x} ${snpIPos.y} L ${genomicX2} ${tickHeight}` })] })) : null, _jsx("path", { d: `M ${genomicX1} 0 L ${genomicX1} ${tickHeight}` }), _jsx("path", { d: `M ${genomicX2} 0 L ${genomicX2} ${tickHeight}` })] })] }));
+}
+function screenToUnrotated(screenX, screenY, yScalar, lineZoneHeight) {
+    const matrixY = screenY - lineZoneHeight;
+    const scaledY = matrixY / yScalar;
+    const x = (screenX - scaledY) / SQRT2;
+    const y = (screenX + scaledY) / SQRT2;
+    return { x, y };
+}
+const LDCanvas = observer(function LDCanvas({ model, }) {
+    const view = getContainingView(model);
+    const width = Math.round(view.dynamicBlocks.totalWidthPx);
+    const { fullyDrawn, flatbush, flatbushItems, yScalar, cellWidth, showLegend, ldMetric, lineZoneHeight, fitToHeight, ldCanvasHeight, useGenomicPositions, snps, lastDrawnOffsetPx, signedLD, } = model;
+    const triangleHeight = width / 2;
+    const canvasOnlyHeight = fitToHeight ? ldCanvasHeight : triangleHeight;
+    const containerHeight = canvasOnlyHeight + lineZoneHeight;
+    const [hoveredItem, setHoveredItem] = useState();
+    const [mousePosition, setMousePosition] = useState();
+    const containerRef = useRef(null);
+    const region = view.dynamicBlocks.contentBlocks[0];
+    const bpPerPx = view.bpPerPx;
+    const genomicX1 = hoveredItem && region
+        ? (hoveredItem.snp2.start - region.start) / bpPerPx
+        : undefined;
+    const genomicX2 = hoveredItem && region
+        ? (hoveredItem.snp1.start - region.start) / bpPerPx
+        : undefined;
+    const canvasOffset = view.offsetPx >= 0
+        ? (lastDrawnOffsetPx ?? 0) - view.offsetPx
+        : Math.max(0, -view.offsetPx);
+    const guideOffset = canvasOffset;
+    useEffect(() => {
+        if (genomicX1 !== undefined &&
+            genomicX2 !== undefined &&
+            model.showVerticalGuides) {
+            view.setVolatileGuides([
+                { xPos: genomicX1 + guideOffset },
+                { xPos: genomicX2 + guideOffset },
+            ]);
+        }
+        else {
+            view.setVolatileGuides([]);
+        }
+        return () => {
+            view.setVolatileGuides([]);
+        };
+    }, [genomicX1, genomicX2, model.showVerticalGuides, view, guideOffset]);
+    const flatbushIndex = useMemo(() => (flatbush ? Flatbush.from(flatbush) : null), [flatbush]);
+    const cb = useCallback((ref) => {
+        model.setRef(ref);
+    }, [model, width, canvasOnlyHeight]);
+    const onMouseMove = useCallback((event) => {
+        const container = containerRef.current;
+        if (!container || !flatbushIndex || !flatbushItems.length) {
+            setHoveredItem(undefined);
+            setMousePosition(undefined);
+            return;
+        }
+        const rect = container.getBoundingClientRect();
+        const mouseCanvasOffset = canvasOffset;
+        const screenX = event.clientX - rect.left - mouseCanvasOffset;
+        const screenY = event.clientY - rect.top;
+        setMousePosition({ x: event.clientX, y: event.clientY });
+        if (screenY < lineZoneHeight) {
+            setHoveredItem(undefined);
+            return;
+        }
+        const { x, y } = screenToUnrotated(screenX, screenY, yScalar, lineZoneHeight);
+        const results = flatbushIndex.search(x - 1, y - 1, x + 1, y + 1);
+        if (results.length > 0) {
+            const item = flatbushItems[results[0]];
+            setHoveredItem(item);
+        }
+        else {
+            setHoveredItem(undefined);
+        }
+    }, [flatbushIndex, flatbushItems, yScalar, lineZoneHeight, canvasOffset]);
+    const onMouseLeave = useCallback(() => {
+        setHoveredItem(undefined);
+        setMousePosition(undefined);
+    }, []);
+    return (_jsxs("div", { ref: containerRef, style: {
+            cursor: hoveredItem && mousePosition ? 'crosshair' : undefined,
+            position: 'relative',
+            width,
+            height: containerHeight,
+            overflow: 'hidden',
+        }, onMouseMove: onMouseMove, onMouseLeave: onMouseLeave, children: [_jsx("canvas", { "data-testid": `ld_canvas${fullyDrawn ? '_done' : ''}`, ref: cb, style: {
+                    width,
+                    height: canvasOnlyHeight,
+                    position: 'absolute',
+                    left: canvasOffset,
+                    top: lineZoneHeight,
+                }, width: width * 2, height: canvasOnlyHeight * 2 }), hoveredItem && genomicX1 !== undefined && genomicX2 !== undefined ? (_jsx(Crosshairs, { hoveredItem: hoveredItem, cellWidth: cellWidth, genomicX1: genomicX1, genomicX2: genomicX2, yScalar: yScalar, lineZoneHeight: lineZoneHeight, tickHeight: model.tickHeight, width: width, height: containerHeight, useGenomicPositions: useGenomicPositions, snps: snps, regionStart: region?.start ?? 0, bpPerPx: bpPerPx, canvasOffset: canvasOffset })) : null, hoveredItem && mousePosition ? (_jsx(LDTooltip, { item: hoveredItem, x: mousePosition.x, y: mousePosition.y, ldMetric: ldMetric, signedLD: signedLD })) : null, showLegend ? (_jsx(LDColorLegend, { ldMetric: ldMetric, signedLD: signedLD })) : null, useGenomicPositions ? (_jsx(Wrapper, { model: model, children: _jsx(VariantLabels, { model: model }) })) : (_jsx(LinesConnectingMatrixToGenomicPosition, { model: model })), model.showRecombination && model.recombination ? (_jsxs("div", { style: {
+                    position: 'absolute',
+                    left: canvasOffset,
+                    top: lineZoneHeight / 2,
+                    width,
+                    height: lineZoneHeight / 2,
+                    pointerEvents: 'none',
+                }, children: [_jsx(RecombinationTrack, { model: model, width: width, height: lineZoneHeight / 2, useGenomicPositions: useGenomicPositions, regionStart: region?.start, bpPerPx: bpPerPx }), _jsx(RecombinationYScaleBar, { height: lineZoneHeight / 2, maxValue: Math.max(...model.recombination.values, 0.1) })] })) : null] }));
+});
+const LDDisplayContent = observer(function LDDisplayContent({ model, }) {
+    const view = getContainingView(model);
+    const width = Math.round(view.dynamicBlocks.totalWidthPx);
+    const { height, showLDTriangle, showRecombination } = model;
+    if (view.bpPerPx > 1000) {
+        return (_jsx("div", { style: {
+                width,
+                height,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                color: '#666',
+            }, children: "Zoom in to see LD data" }));
+    }
+    if (!showLDTriangle && !showRecombination) {
+        return (_jsx("div", { style: {
+                width,
+                height,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                color: '#666',
+            }, children: "Enable LD triangle or recombination track in display settings" }));
+    }
+    return (_jsx("div", { style: { position: 'relative', width, height }, children: showLDTriangle ? _jsx(LDCanvas, { model: model }) : null }));
+});
+const LDDisplayComponent = observer(function LDDisplayComponent({ model, }) {
+    return (_jsx(BaseDisplayComponent, { model: model, children: _jsx(LDDisplayContent, { model: model }) }));
+});
+export default LDDisplayComponent;