@jbrowse/plugin-linear-comparative-view 2.17.0 → 3.0.0

package/esm/LinearSyntenyDisplay/components/LinearSyntenyRendering.js

@@ -1,9 +1,10 @@
-import React, { useState, useCallback, useRef, lazy, useEffect } from 'react';
-import { observer } from 'mobx-react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { lazy, useCallback, useEffect, useRef, useState } from 'react';
 import { getContainingView } from '@jbrowse/core/util';
 import { transaction } from 'mobx';
+import { observer } from 'mobx-react';
 import { makeStyles } from 'tss-react/mui';
-import { getId, MAX_COLOR_RANGE } from '../drawSynteny';
+import { MAX_COLOR_RANGE, getId } from '../drawSynteny';
 import SyntenyContextMenu from './SyntenyContextMenu';
 import { getTooltip, onSynClick, onSynContextClick } from './util';
 const SyntenyTooltip = lazy(() => import('./SyntenyTooltip'));
@@ -33,30 +34,21 @@ const LinearSyntenyRendering = observer(function ({ model, }) {
     const width = view.width;
     const delta = useRef(0);
     const scheduled = useRef(false);
-    const timeout = useRef();
+    const timeout = useRef(null);
     const [anchorEl, setAnchorEl] = useState();
     const [tooltip, setTooltip] = useState('');
     const [currX, setCurrX] = useState();
     const [mouseCurrDownX, setMouseCurrDownX] = useState();
     const [mouseInitialDownX, setMouseInitialDownX] = useState();
     const [currY, setCurrY] = useState();
-    const mainSyntenyCanvasRefp = useRef();
-    // these useCallbacks avoid new refs from being created on any mouseover,
-    // etc.
-    // biome-ignore lint/correctness/useExhaustiveDependencies:
+    const mainSyntenyCanvasRefp = useRef(null);
     const mouseoverDetectionCanvasRef = useCallback((ref) => {
         model.setMouseoverCanvasRef(ref);
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [model, height, width]);
-    // biome-ignore lint/correctness/useExhaustiveDependencies:
+    }, [model, height, width]);
     const mainSyntenyCanvasRef = useCallback((ref) => {
         model.setMainCanvasRef(ref);
-        mainSyntenyCanvasRefp.current = ref; // this ref is additionally used in useEffect below
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [model, height, width]);
-    // biome-ignore lint/correctness/useExhaustiveDependencies:
+        mainSyntenyCanvasRefp.current = ref;
+    }, [model, height, width]);
     useEffect(() => {
         var _a;
         function onWheel(event) {
@@ -105,97 +97,84 @@ const LinearSyntenyRendering = observer(function ({ model, }) {
             var _a;
             (_a = mainSyntenyCanvasRefp.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('wheel', onWheel);
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [model, height, width]);
-    // biome-ignore lint/correctness/useExhaustiveDependencies:
     const clickMapCanvasRef = useCallback((ref) => {
         model.setClickMapCanvasRef(ref);
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [model, height, width]);
-    // biome-ignore lint/correctness/useExhaustiveDependencies:
+    }, [model, height, width]);
     const cigarClickMapCanvasRef = useCallback((ref) => {
         model.setCigarClickMapCanvasRef(ref);
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [model, height, width]);
-    return (React.createElement("div", { className: classes.rel },
-        React.createElement("canvas", { ref: mouseoverDetectionCanvasRef, width: width, height: height, className: classes.mouseoverCanvas }),
-        React.createElement("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(() => {
-                            transaction(() => {
-                                for (const v of view.views) {
-                                    v.horizontalScroll(xOffset.current);
-                                }
-                                xOffset.current = 0;
-                                scheduled.current = false;
+    }, [model, height, width]);
+    return (_jsxs("div", { className: classes.rel, children: [_jsx("canvas", { ref: mouseoverDetectionCanvasRef, width: width, height: height, className: classes.mouseoverCanvas }), _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(() => {
+                                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;
+                    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(MAX_COLOR_RANGE / model.numFeats);
+                        const id = 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(MAX_COLOR_RANGE / cigar.length);
+                            const cigarIdx = getId(r2, g2, b2, unitMultiplier2);
+                            setTooltip(getTooltip({
+                                feature: f,
+                                cigarOp: cigar[cigarIdx],
+                                cigarOpLen: cigar[cigarIdx + 1],
+                            }));
+                        }
                     }
-                    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(MAX_COLOR_RANGE / model.numFeats);
-                    const id = getId(r1, g1, b1, unitMultiplier);
-                    model.setMouseoverId((_a = model.featPositions[id]) === null || _a === void 0 ? void 0 : _a.f.id());
-                    if (id === -1) {
-                        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) {
+                        onSynClick(evt, model);
                     }
-                    else if (model.featPositions[id]) {
-                        const { f, cigar } = model.featPositions[id];
-                        const unitMultiplier2 = Math.floor(MAX_COLOR_RANGE / cigar.length);
-                        const cigarIdx = getId(r2, g2, b2, unitMultiplier2);
-                        setTooltip(getTooltip({
-                            feature: f,
-                            cigarOp: cigar[cigarIdx],
-                            cigarOpLen: cigar[cigarIdx + 1],
-                        }));
-                    }
-                }
-            }, 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) {
-                    onSynClick(evt, model);
-                }
-            }, onContextMenu: evt => {
-                onSynContextClick(evt, model, setAnchorEl);
-            }, "data-testid": "synteny_canvas", className: classes.mainCanvas, width: width, height: height }),
-        React.createElement("canvas", { ref: clickMapCanvasRef, className: classes.pix, width: width, height: height }),
-        React.createElement("canvas", { ref: cigarClickMapCanvasRef, className: classes.pix, width: width, height: height }),
-        mouseoverId && tooltip && currX && currY ? (React.createElement(SyntenyTooltip, { title: tooltip })) : null,
-        anchorEl ? (React.createElement(SyntenyContextMenu, { model: model, anchorEl: anchorEl, onClose: () => {
-                setAnchorEl(undefined);
-            } })) : null));
+                }, onContextMenu: evt => {
+                    onSynContextClick(evt, model, setAnchorEl);
+                }, "data-testid": "synteny_canvas", className: classes.mainCanvas, width: width, height: height }), _jsx("canvas", { ref: clickMapCanvasRef, className: classes.pix, width: width, height: height }), _jsx("canvas", { ref: cigarClickMapCanvasRef, className: classes.pix, width: width, height: height }), mouseoverId && tooltip && currX && currY ? (_jsx(SyntenyTooltip, { title: tooltip })) : null, anchorEl ? (_jsx(SyntenyContextMenu, { model: model, anchorEl: anchorEl, onClose: () => {
+                    setAnchorEl(undefined);
+                } })) : null] }));
 });
 export default LinearSyntenyRendering;

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

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

package/esm/LinearSyntenyDisplay/components/SyntenyContextMenu.js

@@ -1,10 +1,10 @@
-import React from 'react';
-import { getContainingView, getSession } from '@jbrowse/core/util';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Menu } from '@jbrowse/core/ui';
+import { getContainingView, getSession } from '@jbrowse/core/util';
 export default function SyntenyContextMenu({ model, onClose, anchorEl, }) {
     const view = getContainingView(model);
     const { clientX, clientY, feature } = anchorEl;
-    return (React.createElement(Menu, { onMenuItemClick: (event, callback) => {
+    return (_jsx(Menu, { onMenuItemClick: (event, callback) => {
             callback(event);
             onClose();
         }, anchorEl: {

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

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

package/esm/LinearSyntenyDisplay/components/SyntenyTooltip.js

@@ -1,9 +1,8 @@
-import React from 'react';
-import { observer } from 'mobx-react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { SanitizedHTML } from '@jbrowse/core/ui';
 import BaseTooltip from '@jbrowse/core/ui/BaseTooltip';
+import { observer } from 'mobx-react';
 const SyntenyTooltip = observer(function ({ title }) {
-    return title ? (React.createElement(BaseTooltip, null,
-        React.createElement(SanitizedHTML, { html: title }))) : null;
+    return title ? (_jsx(BaseTooltip, { children: _jsx(SanitizedHTML, { html: title }) })) : null;
 });
 export default SyntenyTooltip;

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

@@ -1,6 +1,6 @@
-import React from 'react';
-import { Feature } from '@jbrowse/core/util';
-import { LinearSyntenyDisplayModel } from '../model';
+import type React from 'react';
+import type { LinearSyntenyDisplayModel } from '../model';
+import type { Feature } from '@jbrowse/core/util';
 interface Pos {
     offsetPx: number;
 }

package/esm/LinearSyntenyDisplay/components/util.js

@@ -1,6 +1,5 @@
-import { assembleLocString, doesIntersect2, getSession, isSessionModelWithWidgets, getContainingTrack, getContainingView, } from '@jbrowse/core/util';
-// locals
-import { getId, MAX_COLOR_RANGE } from '../drawSynteny';
+import { assembleLocString, doesIntersect2, getContainingTrack, getContainingView, getSession, isSessionModelWithWidgets, } from '@jbrowse/core/util';
+import { MAX_COLOR_RANGE, getId } from '../drawSynteny';
 export function drawMatchSimple({ feature, ctx, offsets, level, cb, height, drawCurves, oobLimit, viewWidth, hideTiny, }) {
     const { p11, p12, p21, p22 } = feature;
     const x11 = p11.offsetPx - offsets[level];
@@ -17,11 +16,7 @@ export function drawMatchSimple({ feature, ctx, offsets, level, cb, height, draw
     if (!doesIntersect2(minX, maxX, -oobLimit, viewWidth + oobLimit)) {
         return;
     }
-    // drawing a line if the results are thin: drawing a line results in much
-    // less pixellation than filling in a thin polygon
     if (l1 <= 1 && l2 <= 1) {
-        // hideTiny can be used to avoid drawing mouseover for thin lines in this
-        // case
         if (!hideTiny) {
             ctx.beginPath();
             ctx.moveTo(x11, y1);
@@ -58,9 +53,6 @@ export function drawBox(ctx, x1, x2, y1, x3, x4, y2) {
 export function drawBezierBox(ctx, x1, x2, y1, x3, x4, y2, mid) {
     const len1 = Math.abs(x1 - x2);
     const len2 = Math.abs(x1 - x2);
-    // heuristic to not draw hourglass inversions with bezier curves when they
-    // are thin and far apart because it results in areas that are not drawn well
-    // demo https://codesandbox.io/s/fast-glitter-q3b1or?file=/src/index.js
     if (len1 < 5 && len2 < 5 && x2 < x1 && Math.abs(x1 - x3) > 100) {
         const tmp = x1;
         x1 = x2;
@@ -134,7 +126,6 @@ export function onSynContextClick(event, model, setAnchorEl) {
     }
 }
 export function getTooltip({ feature, cigarOp, cigarOpLen, }) {
-    // @ts-expect-error
     const f1 = feature.toJSON();
     const f2 = f1.mate;
     const l1 = f1.end - f1.start;

package/esm/LinearSyntenyDisplay/configSchemaF.d.ts

@@ -1,20 +1,9 @@
-import PluginManager from '@jbrowse/core/PluginManager';
-/**
- * #config LinearSyntenyDisplay
- */
+import type PluginManager from '@jbrowse/core/PluginManager';
 declare function configSchemaFactory(pluginManager: PluginManager): import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
-    /**
-     * #slot
-     * currently unused
-     */
     trackIds: {
         type: string;
         defaultValue: never[];
     };
-    /**
-     * #slot
-     * currently unused
-     */
     middle: {
         type: string;
         defaultValue: boolean;

package/esm/LinearSyntenyDisplay/configSchemaF.js

@@ -1,28 +1,13 @@
 import { ConfigurationSchema } from '@jbrowse/core/configuration';
 import baseConfigFactory from '../LinearComparativeDisplay/configSchemaF';
-/**
- * #config LinearSyntenyDisplay
- */
 function configSchemaFactory(pluginManager) {
     return ConfigurationSchema('LinearSyntenyDisplay', {
-        /**
-         * #slot
-         * currently unused
-         */
         trackIds: {
             type: 'stringArray',
             defaultValue: [],
         },
-        /**
-         * #slot
-         * currently unused
-         */
         middle: { type: 'boolean', defaultValue: true },
     }, {
-        /**
-         * #baseConfiguration
-         * this refers to the LinearComparativeDisplay
-         */
         baseConfiguration: baseConfigFactory(pluginManager),
         explicitlyTyped: true,
     });

package/esm/LinearSyntenyDisplay/drawSynteny.d.ts

@@ -1,4 +1,4 @@
-import { LinearSyntenyDisplayModel } from './model';
+import type { LinearSyntenyDisplayModel } from './model';
 export declare const MAX_COLOR_RANGE: number;
 export declare function getId(r: number, g: number, b: number, unitMultiplier: number): number;
 export declare function drawRef(model: LinearSyntenyDisplayModel, ctx1: CanvasRenderingContext2D, ctx3?: CanvasRenderingContext2D): void;

package/esm/LinearSyntenyDisplay/drawSynteny.js

@@ -1,6 +1,6 @@
 import { doesIntersect2, getContainingView } from '@jbrowse/core/util';
 import { draw, drawMatchSimple } from './components/util';
-export const MAX_COLOR_RANGE = 255 * 255 * 255; // max color range
+export const MAX_COLOR_RANGE = 255 * 255 * 255;
 function makeColor(idx) {
     const r = Math.floor(idx / (255 * 255)) % 255;
     const g = Math.floor(idx / 255) % 255;
@@ -34,8 +34,6 @@ export function drawRef(model, ctx1, ctx3) {
     ctx1.beginPath();
     const offsets = view.views.map(v => v.offsetPx);
     const unitMultiplier = Math.floor(MAX_COLOR_RANGE / featPositions.length);
-    // this loop is optimized to draw many thin lines with a single ctx.stroke
-    // call, a separate loop below draws larger boxes
     ctx1.fillStyle = colorMap.M;
     ctx1.strokeStyle = colorMap.M;
     for (const { p11, p12, p21, p22 } of featPositions) {
@@ -48,8 +46,6 @@ export function drawRef(model, ctx1, ctx3) {
         const y1 = 0;
         const y2 = height;
         const mid = (y2 - y1) / 2;
-        // drawing a line if the results are thin results in much less pixellation
-        // than filling in a thin polygon
         if (l1 <= lineLimit &&
             l2 <= lineLimit &&
             x21 < width + oobLimit &&
@@ -64,8 +60,6 @@ export function drawRef(model, ctx1, ctx3) {
         }
     }
     ctx1.stroke();
-    // this loop only draws small lines as a polyline, the polyline calls
-    // ctx.stroke once is much more efficient than calling stroke() many times
     ctx1.fillStyle = colorMap.M;
     ctx1.strokeStyle = colorMap.M;
     for (const { p11, p12, p21, p22, f, cigar } of featPositions) {
@@ -85,17 +79,12 @@ export function drawRef(model, ctx1, ctx3) {
             const s1 = f.get('strand');
             const k1 = s1 === -1 ? x12 : x11;
             const k2 = s1 === -1 ? x11 : x12;
-            // rev1/rev2 flip the direction of the CIGAR drawing in horizontally flipped
-            // modes. somewhat heuristically determined, but tested for
             const rev1 = k1 < k2 ? 1 : -1;
             const rev2 = (x21 < x22 ? 1 : -1) * s1;
-            // cx1/cx2 are the current x positions on top and bottom rows
             let cx1 = k1;
             let cx2 = s1 === -1 ? x22 : x21;
             if (cigar.length && drawCIGAR) {
-                // continuingFlag skips drawing commands on very small CIGAR features
                 let continuingFlag = false;
-                // px1/px2 are the previous x positions on the top and bottom rows
                 let px1 = 0;
                 let px2 = 0;
                 const unitMultiplier2 = Math.floor(MAX_COLOR_RANGE / cigar.length);
@@ -116,17 +105,11 @@ export function drawRef(model, ctx1, ctx3) {
                     else if (op === 'D' || op === 'N') {
                         cx1 += d1 * rev1;
                     }
-                    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                     else if (op === 'I') {
                         cx2 += d2 * rev2;
                     }
-                    // check that we are even drawing in view here, e.g. that all
-                    // points are not all less than 0 or greater than width
                     if (!(Math.max(px1, px2, cx1, cx2) < 0 ||
                         Math.min(px1, px2, cx1, cx2) > width)) {
-                        // if it is a small feature and not the last element of the
-                        // CIGAR (which could skip rendering it entire if we did turn
-                        // it on), then turn on continuing flag
                         const isNotLast = j < cigar.length - 2;
                         if (Math.abs(cx1 - px1) <= 1 &&
                             Math.abs(cx2 - px2) <= 1 &&
@@ -134,9 +117,6 @@ export function drawRef(model, ctx1, ctx3) {
                             continuingFlag = true;
                         }
                         else {
-                            // allow rendering the dominant color when using continuing
-                            // flag if the last element of continuing was a large
-                            // feature, else just use match
                             ctx1.fillStyle =
                                 colorMap[(continuingFlag && d1 > 1) || d2 > 1 ? op : 'M'];
                             continuingFlag = false;
@@ -157,7 +137,6 @@ export function drawRef(model, ctx1, ctx3) {
             }
         }
     }
-    // draw click map
     const ctx2 = (_a = model.clickMapCanvas) === null || _a === void 0 ? void 0 : _a.getContext('2d');
     if (!ctx2) {
         return;
@@ -168,7 +147,6 @@ export function drawRef(model, ctx1, ctx3) {
         const feature = featPositions[i];
         const idx = i * unitMultiplier + 1;
         ctx2.fillStyle = makeColor(idx);
-        // too many click map false positives with colored stroked lines
         drawMatchSimple({
             cb: ctx => {
                 ctx.fill();

package/esm/LinearSyntenyDisplay/index.d.ts

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

package/esm/LinearSyntenyDisplay/index.js

@@ -1,8 +1,7 @@
+import { lazy } from 'react';
 import DisplayType from '@jbrowse/core/pluggableElementTypes/DisplayType';
-// locals
 import configSchemaF from './configSchemaF';
 import stateModelFactory from './model';
-import { lazy } from 'react';
 export default function LinearSyntenyDisplayF(pluginManager) {
     pluginManager.addDisplayType(() => {
         const configSchema = configSchemaF(pluginManager);