@jbrowse/plugin-linear-comparative-view 3.7.0 → 4.0.0

package/dist/LinearSyntenyDisplay/components/BlockError.d.ts

@@ -1,3 +0,0 @@
-export default function BlockError({ error }: {
-    error: unknown;
-}): import("react/jsx-runtime").JSX.Element;

package/dist/LinearSyntenyDisplay/components/BlockError.js

@@ -1,16 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = BlockError;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const mui_1 = require("tss-react/mui");
-const useStyles = (0, mui_1.makeStyles)()({
-    blockError: {
-        background: '#f1f1f1',
-        padding: 10,
-        color: 'red',
-    },
-});
-function BlockError({ error }) {
-    const { classes } = useStyles();
-    return (0, jsx_runtime_1.jsx)("div", { className: classes.blockError, children: `${error}` });
-}

package/dist/LinearSyntenyDisplay/components/BlockMessage.d.ts

@@ -1,3 +0,0 @@
-export default function BlockMessage({ messageText }: {
-    messageText: string;
-}): import("react/jsx-runtime").JSX.Element;

package/dist/LinearSyntenyDisplay/components/BlockMessage.js

@@ -1,24 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = BlockMessage;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const mui_1 = require("tss-react/mui");
-const useStyles = (0, mui_1.makeStyles)()(theme => {
-    const bg = theme.palette.action.disabledBackground;
-    return {
-        loading: {
-            paddingLeft: '0.6em',
-            backgroundColor: theme.palette.background.default,
-            backgroundImage: `repeating-linear-gradient(45deg, transparent, transparent 5px, ${bg} 5px, ${bg} 10px)`,
-            textAlign: 'center',
-        },
-        blockMessage: {
-            background: '#f1f1f1',
-            padding: 10,
-        },
-    };
-});
-function BlockMessage({ messageText }) {
-    const { classes } = useStyles();
-    return (0, jsx_runtime_1.jsx)("div", { className: classes.blockMessage, children: messageText });
-}

package/dist/LinearSyntenyDisplay/components/Component.d.ts

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

package/dist/LinearSyntenyDisplay/components/Component.js

@@ -1,26 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const mobx_react_1 = require("mobx-react");
-const BlockError_1 = __importDefault(require("./BlockError"));
-const BlockMessage_1 = __importDefault(require("./BlockMessage"));
-const LinearSyntenyRendering_1 = __importDefault(require("./LinearSyntenyRendering"));
-const LoadingMessage_1 = __importDefault(require("./LoadingMessage"));
-const ServerSideRenderedBlockContent = (0, mobx_react_1.observer)(function ({ model, }) {
-    if (model.error) {
-        return (0, jsx_runtime_1.jsx)(BlockError_1.default, { error: model.error });
-    }
-    else if (model.message) {
-        return (0, jsx_runtime_1.jsx)(BlockMessage_1.default, { messageText: model.message });
-    }
-    else if (!model.features) {
-        return (0, jsx_runtime_1.jsx)(LoadingMessage_1.default, { message: model.loadingStatus });
-    }
-    else {
-        return (0, jsx_runtime_1.jsx)(LinearSyntenyRendering_1.default, { model: model });
-    }
-});
-exports.default = ServerSideRenderedBlockContent;

package/dist/LinearSyntenyDisplay/components/LinearSyntenyRendering.d.ts

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

package/dist/LinearSyntenyDisplay/components/LinearSyntenyRendering.js

@@ -1,223 +0,0 @@
-"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 () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const util_1 = require("@jbrowse/core/util");
-const mobx_1 = require("mobx");
-const mobx_react_1 = require("mobx-react");
-const mui_1 = require("tss-react/mui");
-const drawSynteny_1 = require("../drawSynteny");
-const SyntenyContextMenu_1 = __importDefault(require("./SyntenyContextMenu"));
-const util_2 = require("./util");
-const SyntenyTooltip = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./SyntenyTooltip'))));
-const useStyles = (0, mui_1.makeStyles)()({
-    pix: {
-        imageRendering: 'pixelated',
-        pointerEvents: 'none',
-        visibility: 'hidden',
-        position: 'absolute',
-    },
-    rel: {
-        position: 'relative',
-    },
-    mouseoverCanvas: {
-        position: 'absolute',
-        pointEvents: 'none',
-    },
-    mainCanvas: {
-        position: 'absolute',
-    },
-});
-const LinearSyntenyRendering = (0, mobx_react_1.observer)(function ({ model, }) {
-    const { classes } = useStyles();
-    const { mouseoverId, height } = model;
-    const xOffset = (0, react_1.useRef)(0);
-    const view = (0, util_1.getContainingView)(model);
-    const width = view.width;
-    const delta = (0, react_1.useRef)(0);
-    const scheduled = (0, react_1.useRef)(false);
-    const timeout = (0, react_1.useRef)(null);
-    const [anchorEl, setAnchorEl] = (0, react_1.useState)();
-    const [tooltip, setTooltip] = (0, react_1.useState)('');
-    const [currX, setCurrX] = (0, react_1.useState)();
-    const [mouseCurrDownX, setMouseCurrDownX] = (0, react_1.useState)();
-    const [mouseInitialDownX, setMouseInitialDownX] = (0, react_1.useState)();
-    const [currY, setCurrY] = (0, react_1.useState)();
-    const mainSyntenyCanvasRefp = (0, react_1.useRef)(null);
-    const mouseoverDetectionCanvasRef = (0, react_1.useCallback)((ref) => {
-        model.setMouseoverCanvasRef(ref);
-    }, [model, height, width]);
-    const mainSyntenyCanvasRef = (0, react_1.useCallback)((ref) => {
-        model.setMainCanvasRef(ref);
-        mainSyntenyCanvasRefp.current = ref;
-    }, [model, height, width]);
-    (0, react_1.useEffect)(() => {
-        var _a;
-        function onWheel(event) {
-            event.preventDefault();
-            if (event.ctrlKey) {
-                delta.current += event.deltaY / 500;
-                for (const v of view.views) {
-                    v.setScaleFactor(delta.current < 0 ? 1 - delta.current : 1 / (1 + delta.current));
-                }
-                if (timeout.current) {
-                    clearTimeout(timeout.current);
-                }
-                timeout.current = setTimeout(() => {
-                    var _a;
-                    for (const v of view.views) {
-                        v.setScaleFactor(1);
-                        v.zoomTo(delta.current > 0
-                            ? v.bpPerPx * (1 + delta.current)
-                            : v.bpPerPx / (1 - delta.current), event.clientX -
-                            (((_a = mainSyntenyCanvasRefp.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().left) ||
-                                0));
-                    }
-                    delta.current = 0;
-                }, 300);
-            }
-            else {
-                if (Math.abs(event.deltaY) < Math.abs(event.deltaX)) {
-                    xOffset.current += event.deltaX / 2;
-                }
-                if (!scheduled.current) {
-                    scheduled.current = true;
-                    window.requestAnimationFrame(() => {
-                        (0, mobx_1.transaction)(() => {
-                            for (const v of view.views) {
-                                v.horizontalScroll(xOffset.current);
-                            }
-                            xOffset.current = 0;
-                            scheduled.current = false;
-                        });
-                    });
-                }
-            }
-        }
-        (_a = mainSyntenyCanvasRefp.current) === null || _a === void 0 ? void 0 : _a.addEventListener('wheel', onWheel);
-        return () => {
-            var _a;
-            (_a = mainSyntenyCanvasRefp.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('wheel', onWheel);
-        };
-    }, [model, height, width]);
-    const clickMapCanvasRef = (0, react_1.useCallback)((ref) => {
-        model.setClickMapCanvasRef(ref);
-    }, [model, height, width]);
-    const cigarClickMapCanvasRef = (0, react_1.useCallback)((ref) => {
-        model.setCigarClickMapCanvasRef(ref);
-    }, [model, height, width]);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: classes.rel, children: [(0, jsx_runtime_1.jsx)("canvas", { ref: mouseoverDetectionCanvasRef, width: width, height: height, className: classes.mouseoverCanvas }), (0, jsx_runtime_1.jsx)("canvas", { ref: mainSyntenyCanvasRef, onMouseMove: event => {
-                    var _a;
-                    if (mouseCurrDownX !== undefined) {
-                        xOffset.current += mouseCurrDownX - event.clientX;
-                        setMouseCurrDownX(event.clientX);
-                        if (!scheduled.current) {
-                            scheduled.current = true;
-                            window.requestAnimationFrame(() => {
-                                (0, mobx_1.transaction)(() => {
-                                    for (const v of view.views) {
-                                        v.horizontalScroll(xOffset.current);
-                                    }
-                                    xOffset.current = 0;
-                                    scheduled.current = false;
-                                });
-                            });
-                        }
-                    }
-                    else {
-                        const ref1 = model.clickMapCanvas;
-                        const ref2 = model.cigarClickMapCanvas;
-                        if (!ref1 || !ref2) {
-                            return;
-                        }
-                        const rect = ref1.getBoundingClientRect();
-                        const ctx1 = ref1.getContext('2d');
-                        const ctx2 = ref2.getContext('2d');
-                        if (!ctx1 || !ctx2) {
-                            return;
-                        }
-                        const { clientX, clientY } = event;
-                        const x = clientX - rect.left;
-                        const y = clientY - rect.top;
-                        setCurrX(clientX);
-                        setCurrY(clientY);
-                        const [r1, g1, b1] = ctx1.getImageData(x, y, 1, 1).data;
-                        const [r2, g2, b2] = ctx2.getImageData(x, y, 1, 1).data;
-                        const unitMultiplier = Math.floor(drawSynteny_1.MAX_COLOR_RANGE / model.numFeats);
-                        const id = (0, drawSynteny_1.getId)(r1, g1, b1, unitMultiplier);
-                        model.setMouseoverId((_a = model.featPositions[id]) === null || _a === void 0 ? void 0 : _a.f.id());
-                        if (id === -1) {
-                            setTooltip('');
-                        }
-                        else if (model.featPositions[id]) {
-                            const { f, cigar } = model.featPositions[id];
-                            const unitMultiplier2 = Math.floor(drawSynteny_1.MAX_COLOR_RANGE / cigar.length);
-                            const cigarIdx = (0, drawSynteny_1.getId)(r2, g2, b2, unitMultiplier2);
-                            if (cigarIdx % 2 === 0 && (r2 !== 0 || g2 !== 0 || b2 !== 0)) {
-                                setTooltip((0, util_2.getTooltip)({
-                                    feature: f,
-                                    cigarOp: cigar[cigarIdx + 1],
-                                    cigarOpLen: cigar[cigarIdx],
-                                }));
-                            }
-                            else {
-                                setTooltip('');
-                            }
-                        }
-                    }
-                }, onMouseLeave: () => {
-                    model.setMouseoverId(undefined);
-                    setMouseInitialDownX(undefined);
-                    setMouseCurrDownX(undefined);
-                }, onMouseDown: evt => {
-                    setMouseCurrDownX(evt.clientX);
-                    setMouseInitialDownX(evt.clientX);
-                }, onMouseUp: evt => {
-                    setMouseCurrDownX(undefined);
-                    if (mouseInitialDownX !== undefined &&
-                        Math.abs(evt.clientX - mouseInitialDownX) < 5) {
-                        (0, util_2.onSynClick)(evt, model);
-                    }
-                }, onContextMenu: evt => {
-                    (0, util_2.onSynContextClick)(evt, model, setAnchorEl);
-                }, "data-testid": "synteny_canvas", className: classes.mainCanvas, width: width, height: height }), (0, jsx_runtime_1.jsx)("canvas", { ref: clickMapCanvasRef, className: classes.pix, width: width, height: height }), (0, jsx_runtime_1.jsx)("canvas", { ref: cigarClickMapCanvasRef, className: classes.pix, width: width, height: height }), mouseoverId && tooltip && currX && currY ? ((0, jsx_runtime_1.jsx)(SyntenyTooltip, { title: tooltip })) : null, anchorEl ? ((0, jsx_runtime_1.jsx)(SyntenyContextMenu_1.default, { model: model, anchorEl: anchorEl, onClose: () => {
-                    setAnchorEl(undefined);
-                } })) : null] }));
-});
-exports.default = LinearSyntenyRendering;

package/dist/LinearSyntenyDisplay/components/LoadingMessage.d.ts

@@ -1,3 +0,0 @@
-export default function LoadingMessage({ message }: {
-    message?: string;
-}): import("react/jsx-runtime").JSX.Element;

package/dist/LinearSyntenyDisplay/components/LoadingMessage.js

@@ -1,21 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = LoadingMessage;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const ui_1 = require("@jbrowse/core/ui");
-const mui_1 = require("tss-react/mui");
-const useStyles = (0, mui_1.makeStyles)()(theme => {
-    const bg = theme.palette.action.disabledBackground;
-    return {
-        loading: {
-            paddingLeft: '0.6em',
-            backgroundColor: theme.palette.background.default,
-            backgroundImage: `repeating-linear-gradient(45deg, transparent, transparent 5px, ${bg} 5px, ${bg} 10px)`,
-            textAlign: 'center',
-        },
-    };
-});
-function LoadingMessage({ message }) {
-    const { classes } = useStyles();
-    return ((0, jsx_runtime_1.jsx)("div", { className: classes.loading, children: (0, jsx_runtime_1.jsx)(ui_1.LoadingEllipses, { message: message }) }));
-}

package/dist/LinearSyntenyDisplay/components/SyntenyContextMenu.d.ts

@@ -1,15 +0,0 @@
-import type { LinearSyntenyDisplayModel } from '../model';
-import type { Feature } from '@jbrowse/core/util';
-interface ClickCoord {
-    clientX: number;
-    clientY: number;
-    feature: {
-        f: Feature;
-    };
-}
-export default function SyntenyContextMenu({ model, onClose, anchorEl, }: {
-    onClose: () => void;
-    model: LinearSyntenyDisplayModel;
-    anchorEl: ClickCoord;
-}): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/LinearSyntenyDisplay/components/SyntenyContextMenu.js

@@ -1,56 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = SyntenyContextMenu;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const ui_1 = require("@jbrowse/core/ui");
-const util_1 = require("@jbrowse/core/util");
-function SyntenyContextMenu({ model, onClose, anchorEl, }) {
-    const view = (0, util_1.getContainingView)(model);
-    const { clientX, clientY, feature } = anchorEl;
-    return ((0, jsx_runtime_1.jsx)(ui_1.Menu, { onMenuItemClick: (event, callback) => {
-            callback(event);
-            onClose();
-        }, anchorEl: {
-            nodeType: 1,
-            getBoundingClientRect: () => {
-                const x = clientX;
-                const y = clientY;
-                return {
-                    top: y,
-                    left: x,
-                    bottom: y,
-                    right: x,
-                    width: 0,
-                    height: 0,
-                    x,
-                    y,
-                    toJSON() { },
-                };
-            },
-        }, onClose: onClose, open: Boolean(anchorEl), menuItems: [
-            {
-                label: 'Center on feature',
-                onClick: () => {
-                    const { f } = feature;
-                    const start = f.get('start');
-                    const end = f.get('end');
-                    const refName = f.get('refName');
-                    const mate = f.get('mate');
-                    const l1 = view.views[model.level];
-                    const l2 = view.views[model.level + 1];
-                    const l1asm = l1.assemblyNames[0];
-                    const l2asm = l2.assemblyNames[0];
-                    l1.navToLocString(`${refName}:${start}-${end}`).catch((e) => {
-                        const err = `${l1asm}:${e}`;
-                        console.error(l1asm, err);
-                        (0, util_1.getSession)(model).notifyError(err, e);
-                    });
-                    l2.navToLocString(`${mate.refName}:${mate.start}-${mate.end}`).catch((e) => {
-                        const err = `${l2asm}:${e}`;
-                        console.error(l2asm, err);
-                        (0, util_1.getSession)(model).notifyError(err, e);
-                    });
-                },
-            },
-        ] }));
-}

package/dist/LinearSyntenyDisplay/components/SyntenyTooltip.d.ts

@@ -1,4 +0,0 @@
-declare const SyntenyTooltip: ({ title }: {
-    title: string;
-}) => import("react/jsx-runtime").JSX.Element | null;
-export default SyntenyTooltip;

package/dist/LinearSyntenyDisplay/components/SyntenyTooltip.js

@@ -1,13 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const ui_1 = require("@jbrowse/core/ui");
-const BaseTooltip_1 = __importDefault(require("@jbrowse/core/ui/BaseTooltip"));
-const mobx_react_1 = require("mobx-react");
-const SyntenyTooltip = (0, mobx_react_1.observer)(function ({ title }) {
-    return title ? ((0, jsx_runtime_1.jsx)(BaseTooltip_1.default, { children: (0, jsx_runtime_1.jsx)(ui_1.SanitizedHTML, { html: title }) })) : null;
-});
-exports.default = SyntenyTooltip;

package/dist/LinearSyntenyDisplay/components/util.d.ts

@@ -1,45 +0,0 @@
-import type React from 'react';
-import type { LinearSyntenyDisplayModel } from '../model';
-import type { Feature } from '@jbrowse/core/util';
-interface Pos {
-    offsetPx: number;
-}
-export interface ClickCoord {
-    clientX: number;
-    clientY: number;
-    feature: {
-        f: Feature;
-    };
-}
-interface FeatPos {
-    p11: Pos;
-    p12: Pos;
-    p21: Pos;
-    p22: Pos;
-    f: Feature;
-    cigar: string[];
-}
-export declare function drawMatchSimple({ feature, ctx, offsets, level, cb, height, drawCurves, oobLimit, viewWidth, hideTiny, }: {
-    feature: FeatPos;
-    ctx: CanvasRenderingContext2D;
-    offsets: number[];
-    level: number;
-    oobLimit: number;
-    viewWidth: number;
-    cb: (ctx: CanvasRenderingContext2D) => void;
-    height: number;
-    drawCurves?: boolean;
-    hideTiny?: boolean;
-}): void;
-export declare function draw(ctx: CanvasRenderingContext2D, x1: number, x2: number, y1: number, x3: number, x4: number, y2: number, mid: number, drawCurves?: boolean): void;
-export declare function drawLocationMarkers(ctx: CanvasRenderingContext2D, x1: number, x2: number, y1: number, x3: number, x4: number, y2: number, mid: number, bpPerPx1: number, bpPerPx2: number, drawCurves?: boolean): void;
-export declare function drawBox(ctx: CanvasRenderingContext2D, x1: number, x2: number, y1: number, x3: number, x4: number, y2: number): void;
-export declare function drawBezierBox(ctx: CanvasRenderingContext2D, x1: number, x2: number, y1: number, x3: number, x4: number, y2: number, mid: number): void;
-export declare function onSynClick(event: React.MouseEvent, model: LinearSyntenyDisplayModel): import("../model").FeatPos | undefined;
-export declare function onSynContextClick(event: React.MouseEvent, model: LinearSyntenyDisplayModel, setAnchorEl: (arg: ClickCoord) => void): void;
-export declare function getTooltip({ feature, cigarOp, cigarOpLen, }: {
-    feature: Feature;
-    cigarOpLen?: string;
-    cigarOp?: string;
-}): string;
-export {};