@jbrowse/plugin-linear-comparative-view 2.11.1 → 2.12.0

package/esm/LinearSyntenyDisplay/components/LinearSyntenyRendering.js

@@ -1,12 +1,13 @@
 import React, { useState, useCallback, useRef } from 'react';
 import { observer } from 'mobx-react';
-import { assembleLocString, getContainingView, getSession, isSessionModelWithWidgets, } from '@jbrowse/core/util';
+import { getContainingView } from '@jbrowse/core/util';
 import { transaction } from 'mobx';
 import { makeStyles } from 'tss-react/mui';
 // locals
 import SyntenyTooltip from './SyntenyTooltip';
 import { getId, MAX_COLOR_RANGE } from '../drawSynteny';
 import SyntenyContextMenu from './SyntenyContextMenu';
+import { getTooltip, onSynClick, onSynContextClick } from './util';
 const useStyles = makeStyles()({
     pix: {
         imageRendering: 'pixelated',
@@ -31,30 +32,44 @@ const LinearSyntenyRendering = observer(function ({ model, }) {
     const view = getContainingView(model);
     const height = view.middleComparativeHeight;
     const width = view.width;
+    const delta = useRef(0);
+    const timeout = useRef();
     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 { mouseoverId } = model;
     // these useCallbacks avoid new refs from being created on any mouseover, etc.
     const k1 = useCallback((ref) => model.setMouseoverCanvasRef(ref), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [model, height, width]);
-    const k2 = useCallback((ref) => model.setMainCanvasRef(ref), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [model, height, width]);
-    const k3 = useCallback((ref) => model.setClickMapCanvasRef(ref), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [model, height, width]);
-    const k4 = 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: k1, width: width, height: height, className: cx(classes.abs, classes.none) }),
-        React.createElement("canvas", { ref: k2, onWheel: event => {
+    const k2 = useCallback((ref) => {
+        model.setMainCanvasRef(ref);
+        function onWheel(event) {
+            event.preventDefault();
+            if (event.ctrlKey === true) {
+                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(() => {
+                    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 - ((ref === null || ref === void 0 ? void 0 : ref.getBoundingClientRect().left) || 0));
+                    }
+                    delta.current = 0;
+                }, 300);
+            }
+            else {
                 if (Math.abs(event.deltaY) < Math.abs(event.deltaX)) {
-                    xOffset.current += event.deltaX;
+                    xOffset.current += event.deltaX / 2;
                 }
                 if (currScrollFrame.current === undefined) {
                     currScrollFrame.current = requestAnimationFrame(() => {
@@ -67,7 +82,28 @@ const LinearSyntenyRendering = observer(function ({ model, }) {
                         });
                     });
                 }
-            }, onMouseMove: event => {
+            }
+        }
+        if (ref) {
+            ref.addEventListener('wheel', onWheel);
+            // this is a react 19-ism to have a cleanup in the ref callback
+            // https://react.dev/blog/2024/04/25/react-19#cleanup-functions-for-refs
+            // note: it warns in earlier versions of react
+            return () => ref.removeEventListener('wheel', onWheel);
+        }
+        return () => { };
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [model, height, width]);
+    const k3 = useCallback((ref) => model.setClickMapCanvasRef(ref), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [model, height, width]);
+    const k4 = 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: k1, width: width, height: height, className: cx(classes.abs, classes.none) }),
+        React.createElement("canvas", { ref: k2, onMouseMove: event => {
                 var _a;
                 if (mouseCurrDownX !== undefined) {
                     xOffset.current += mouseCurrDownX - event.clientX;
@@ -127,95 +163,12 @@ const LinearSyntenyRendering = observer(function ({ model, }) {
                 setMouseCurrDownX(undefined);
                 if (mouseInitialDownX !== undefined &&
                     Math.abs(evt.clientX - mouseInitialDownX) < 5) {
-                    onSyntenyClick(evt, model);
+                    onSynClick(evt, model);
                 }
-            }, onContextMenu: evt => {
-                onSyntenyContextClick(evt, model, setAnchorEl);
-            }, "data-testid": "synteny_canvas", className: classes.abs, width: width, height: height }),
+            }, onContextMenu: evt => onSynContextClick(evt, model, setAnchorEl), "data-testid": "synteny_canvas", className: classes.abs, width: width, height: height }),
         React.createElement("canvas", { ref: k3, className: classes.pix, width: width, height: height }),
         React.createElement("canvas", { ref: k4, className: classes.pix, width: width, height: height }),
-        model.mouseoverId && tooltip && currX && currY ? (React.createElement(SyntenyTooltip, { title: tooltip })) : null,
+        mouseoverId && tooltip && currX && currY ? (React.createElement(SyntenyTooltip, { title: tooltip })) : null,
         anchorEl ? (React.createElement(SyntenyContextMenu, { model: model, anchorEl: anchorEl, onClose: () => setAnchorEl(undefined) })) : null));
 });
-function onSyntenyClick(event, model) {
-    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 x = event.clientX - rect.left;
-    const y = event.clientY - rect.top;
-    const [r1, g1, b1] = ctx1.getImageData(x, y, 1, 1).data;
-    const unitMultiplier = Math.floor(MAX_COLOR_RANGE / model.numFeats);
-    const id = getId(r1, g1, b1, unitMultiplier);
-    const feat = model.featPositions[id];
-    if (feat) {
-        const { f } = feat;
-        model.setClickId(f.id());
-        const session = getSession(model);
-        if (isSessionModelWithWidgets(session)) {
-            session.showWidget(session.addWidget('SyntenyFeatureWidget', 'syntenyFeature', {
-                featureData: {
-                    feature1: f.toJSON(),
-                    feature2: f.get('mate'),
-                },
-            }));
-        }
-    }
-    return feat;
-}
-function onSyntenyContextClick(event, model, setAnchorEl) {
-    event.preventDefault();
-    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;
-    const [r1, g1, b1] = ctx1.getImageData(x, y, 1, 1).data;
-    const unitMultiplier = Math.floor(MAX_COLOR_RANGE / model.numFeats);
-    const id = getId(r1, g1, b1, unitMultiplier);
-    const f = model.featPositions[id];
-    if (f) {
-        model.setClickId(f.f.id());
-        setAnchorEl({ clientX, clientY, feature: f });
-    }
-}
-function getTooltip(f, cigarOp, cigarOpLen) {
-    // @ts-expect-error
-    const f1 = f.toJSON();
-    const f2 = f1.mate;
-    const l1 = f1.end - f1.start;
-    const l2 = f2.end - f2.start;
-    const identity = f1.identity;
-    const n1 = f1.name;
-    const n2 = f2.name;
-    return [
-        `Loc1: ${assembleLocString(f1)}`,
-        `Loc2: ${assembleLocString(f2)}`,
-        `Inverted: ${f1.strand === -1}`,
-        `Query len: ${l1.toLocaleString('en-US')}`,
-        `Target len: ${l2.toLocaleString('en-US')}`,
-        identity ? `Identity: ${identity.toPrecision(2)}` : '',
-        cigarOp ? `CIGAR operator: ${cigarOp}${cigarOpLen}` : '',
-        n1 ? `Name 1: ${n1}` : '',
-        n2 ? `Name 1: ${n2}` : '',
-    ]
-        .filter(f => !!f)
-        .join('<br/>');
-}
 export default LinearSyntenyRendering;

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

@@ -1,7 +1,14 @@
+import React from 'react';
 import { Feature } from '@jbrowse/core/util';
+import { LinearSyntenyDisplayModel } from '../model';
 interface Pos {
     offsetPx: number;
 }
+export interface ClickCoord {
+    clientX: number;
+    clientY: number;
+    feature: any;
+}
 interface FeatPos {
     p11: Pos;
     p12: Pos;
@@ -24,4 +31,7 @@ export declare function drawMatchSimple({ feature, ctx, offsets, cb, height, dra
 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 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(f: Feature, cigarOp?: string, cigarOpLen?: string): string;
 export {};

package/esm/LinearSyntenyDisplay/components/util.js

@@ -1,4 +1,6 @@
-import { doesIntersect2 } from '@jbrowse/core/util';
+import { assembleLocString, doesIntersect2, getSession, isSessionModelWithWidgets, } from '@jbrowse/core/util';
+// locals
+import { getId, MAX_COLOR_RANGE } from '../drawSynteny';
 export function drawMatchSimple({ feature, ctx, offsets, cb, height, drawCurves, oobLimit, viewWidth, hideTiny, }) {
     const { p11, p12, p21, p22 } = feature;
     const x11 = p11.offsetPx - offsets[0];
@@ -74,3 +76,84 @@ export function drawBezierBox(ctx, x1, x2, y1, x3, x4, y2, mid) {
     ctx.closePath();
     ctx.fill();
 }
+export function onSynClick(event, model) {
+    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 x = event.clientX - rect.left;
+    const y = event.clientY - rect.top;
+    const [r1, g1, b1] = ctx1.getImageData(x, y, 1, 1).data;
+    const unitMultiplier = Math.floor(MAX_COLOR_RANGE / model.numFeats);
+    const id = getId(r1, g1, b1, unitMultiplier);
+    const feat = model.featPositions[id];
+    if (feat) {
+        const { f } = feat;
+        model.setClickId(f.id());
+        const session = getSession(model);
+        if (isSessionModelWithWidgets(session)) {
+            session.showWidget(session.addWidget('SyntenyFeatureWidget', 'syntenyFeature', {
+                featureData: {
+                    feature1: f.toJSON(),
+                    feature2: f.get('mate'),
+                },
+            }));
+        }
+    }
+    return feat;
+}
+export function onSynContextClick(event, model, setAnchorEl) {
+    event.preventDefault();
+    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;
+    const [r1, g1, b1] = ctx1.getImageData(x, y, 1, 1).data;
+    const unitMultiplier = Math.floor(MAX_COLOR_RANGE / model.numFeats);
+    const id = getId(r1, g1, b1, unitMultiplier);
+    const f = model.featPositions[id];
+    if (f) {
+        model.setClickId(f.f.id());
+        setAnchorEl({ clientX, clientY, feature: f });
+    }
+}
+export function getTooltip(f, cigarOp, cigarOpLen) {
+    // @ts-expect-error
+    const f1 = f.toJSON();
+    const f2 = f1.mate;
+    const l1 = f1.end - f1.start;
+    const l2 = f2.end - f2.start;
+    const identity = f1.identity;
+    const n1 = f1.name;
+    const n2 = f2.name;
+    return [
+        `Loc1: ${assembleLocString(f1)}`,
+        `Loc2: ${assembleLocString(f2)}`,
+        `Inverted: ${f1.strand === -1}`,
+        `Query len: ${l1.toLocaleString('en-US')}`,
+        `Target len: ${l2.toLocaleString('en-US')}`,
+        identity ? `Identity: ${identity.toPrecision(2)}` : '',
+        cigarOp ? `CIGAR operator: ${cigarOp}${cigarOpLen}` : '',
+        n1 ? `Name 1: ${n1}` : '',
+        n2 ? `Name 1: ${n2}` : '',
+    ]
+        .filter(f => !!f)
+        .join('<br/>');
+}

package/esm/LinearSyntenyView/components/ImportForm/index.js

@@ -65,6 +65,7 @@ const LinearSyntenyViewImportForm = observer(function ({ model, }) {
                 };
             })));
             model.views.forEach(view => view.setWidth(model.width));
+            model.views.forEach(view => view.showAllRegions());
             if (sessionTrackData) {
                 session.addTrackConf(sessionTrackData);
                 model.toggleTrack(sessionTrackData.trackId);