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

package/esm/LinearComparativeView/components/useRangeSelect.js

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { transaction } from 'mobx';
 import { getRelativeX } from './util';
 export function useRangeSelect(ref, model) {
@@ -7,6 +7,11 @@ export function useRangeSelect(ref, model) {
     const [anchorPosition, setAnchorPosition] = useState();
     const [guideX, setGuideX] = useState();
     const mouseDragging = startX !== undefined && anchorPosition === undefined;
+    const handleClose = useCallback(() => {
+        setAnchorPosition(undefined);
+        setStartX(undefined);
+        setCurrentX(undefined);
+    }, []);
     useEffect(() => {
         function computeOffsets(offsetX) {
             if (startX === undefined) {
@@ -29,6 +34,10 @@ export function useRangeSelect(ref, model) {
             if (startX !== undefined && ref.current) {
                 const { clientX, clientY } = event;
                 const offsetX = getRelativeX(event, ref.current);
+                if (Math.abs(offsetX - startX) <= 3) {
+                    handleClose();
+                    return;
+                }
                 setAnchorPosition({
                     offsetX,
                     clientX,
@@ -54,15 +63,7 @@ export function useRangeSelect(ref, model) {
             };
         }
         return () => { };
-    }, [startX, mouseDragging, model, ref]);
-    useEffect(() => {
-        if (!mouseDragging &&
-            currentX !== undefined &&
-            startX !== undefined &&
-            Math.abs(currentX - startX) <= 3) {
-            handleClose();
-        }
-    }, [mouseDragging, currentX, startX]);
+    }, [startX, mouseDragging, model, ref, handleClose]);
     function mouseDown(event) {
         event.preventDefault();
         event.stopPropagation();
@@ -81,11 +82,6 @@ export function useRangeSelect(ref, model) {
             }
         });
     }
-    function handleClose() {
-        setAnchorPosition(undefined);
-        setStartX(undefined);
-        setCurrentX(undefined);
-    }
     function handleMenuItemClick(_, callback) {
         callback();
         handleClose();

package/esm/LinearComparativeView/model.d.ts

@@ -13,6 +13,7 @@ declare function stateModelFactory(pluginManager: PluginManager): import("mobx-s
     showIntraviewLinks: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
     linkViews: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
     interactiveOverlay: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    showDynamicControls: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
     levels: import("mobx-state-tree").IArrayType<import("mobx-state-tree").IModelType<{
         id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
         type: import("mobx-state-tree").IType<string | undefined, string, string>;
@@ -303,6 +304,7 @@ declare function stateModelFactory(pluginManager: PluginManager): import("mobx-s
     removeView(view: LinearGenomeViewModel): void;
     setLevelHeight(newHeight: number, level?: number): number;
     setLinkViews(arg: boolean): void;
+    setShowDynamicControls(arg: boolean): void;
     activateTrackSelector(level: number): import("@jbrowse/core/util").Widget;
     toggleTrack(trackId: string, level?: number): void;
     showTrack(trackId: string, level?: number, initialSnapshot?: {}): void;
@@ -330,6 +332,7 @@ declare function stateModelFactory(pluginManager: PluginManager): import("mobx-s
     showIntraviewLinks: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
     linkViews: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
     interactiveOverlay: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    showDynamicControls: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
     levels: import("mobx-state-tree").IArrayType<import("mobx-state-tree").IModelType<{
         id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
         type: import("mobx-state-tree").IType<string | undefined, string, string>;

package/esm/LinearComparativeView/model.js

@@ -17,6 +17,7 @@ function stateModelFactory(pluginManager) {
         showIntraviewLinks: true,
         linkViews: false,
         interactiveOverlay: false,
+        showDynamicControls: true,
         levels: types.array(LinearSyntenyViewHelper),
         views: types.array(pluginManager.getViewType('LinearGenomeView')
             .stateModel),
@@ -93,6 +94,9 @@ function stateModelFactory(pluginManager) {
         setLinkViews(arg) {
             self.linkViews = arg;
         },
+        setShowDynamicControls(arg) {
+            self.showDynamicControls = arg;
+        },
         activateTrackSelector(level) {
             if (self.trackSelectorType === 'hierarchical') {
                 const session = getSession(self);

package/esm/LinearSyntenyDisplay/afterAttach.js

@@ -3,7 +3,7 @@ import { bpToPx } from '@jbrowse/core/util/Base1DUtils';
 import { MismatchParser } from '@jbrowse/plugin-alignments';
 import { autorun, reaction } from 'mobx';
 import { addDisposer, getSnapshot } from 'mobx-state-tree';
-import { drawMouseoverSynteny, drawRef } from './drawSynteny';
+import { drawCigarClickMap, drawMouseoverClickMap, drawRef, } from './drawSynteny';
 export function doAfterAttach(self) {
     addDisposer(self, autorun(() => {
         var _a, _b;
@@ -17,11 +17,12 @@ export function doAfterAttach(self) {
         if (!ctx1 || !ctx3) {
             return;
         }
+        const { alpha } = self;
         const height = self.height;
         const width = view.width;
         ctx1.clearRect(0, 0, width, height);
-        ctx3.clearRect(0, 0, width, height);
-        drawRef(self, ctx1, ctx3);
+        drawRef(self, ctx1);
+        drawCigarClickMap(self, ctx3);
     }));
     addDisposer(self, autorun(() => {
         const view = getContainingView(self);
@@ -29,7 +30,8 @@ export function doAfterAttach(self) {
             !view.views.every(a => a.displayedRegions.length > 0 && a.initialized)) {
             return;
         }
-        drawMouseoverSynteny(self);
+        const { clickId, mouseoverId } = self;
+        drawMouseoverClickMap(self);
     }));
     addDisposer(self, reaction(() => {
         const view = getContainingView(self);

package/esm/LinearSyntenyDisplay/components/LinearSyntenyRendering.js

@@ -151,11 +151,16 @@ const LinearSyntenyRendering = observer(function ({ model, }) {
                             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],
-                            }));
+                            if (cigarIdx % 2 === 0 && (r2 !== 0 || g2 !== 0 || b2 !== 0)) {
+                                setTooltip(getTooltip({
+                                    feature: f,
+                                    cigarOp: cigar[cigarIdx + 1],
+                                    cigarOpLen: cigar[cigarIdx],
+                                }));
+                            }
+                            else {
+                                setTooltip('');
+                            }
                         }
                     }
                 }, onMouseLeave: () => {

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

@@ -32,13 +32,14 @@ export declare function drawMatchSimple({ feature, ctx, offsets, level, cb, heig
     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;
-    cigarOp?: string;
     cigarOpLen?: string;
+    cigarOp?: string;
 }): string;
 export {};

package/esm/LinearSyntenyDisplay/components/util.js

@@ -1,4 +1,4 @@
-import { assembleLocString, doesIntersect2, getContainingTrack, getContainingView, getSession, isSessionModelWithWidgets, } from '@jbrowse/core/util';
+import { assembleLocString, doesIntersect2, getContainingTrack, getContainingView, getSession, isSessionModelWithWidgets, toLocale, } 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;
@@ -42,6 +42,42 @@ export function draw(ctx, x1, x2, y1, x3, x4, y2, mid, drawCurves) {
         drawBox(ctx, x1, x2, y1, x3, x4, y2);
     }
 }
+export function drawLocationMarkers(ctx, x1, x2, y1, x3, x4, y2, mid, bpPerPx1, bpPerPx2, drawCurves) {
+    const width1 = Math.abs(x2 - x1);
+    const width2 = Math.abs(x4 - x3);
+    const averageWidth = (width1 + width2) / 2;
+    if (averageWidth < 30) {
+        return;
+    }
+    const targetPixelSpacing = 20;
+    const numMarkers = Math.max(2, Math.floor(averageWidth / targetPixelSpacing) + 1);
+    const prevStrokeStyle = ctx.strokeStyle;
+    const prevLineWidth = ctx.lineWidth;
+    ctx.strokeStyle = 'rgba(0, 0, 0, 0.25)';
+    ctx.lineWidth = 0.5;
+    ctx.beginPath();
+    if (drawCurves) {
+        for (let step = 0; step < numMarkers; step++) {
+            const t = step / numMarkers;
+            const topX = x1 + (x2 - x1) * t;
+            const bottomX = x4 + (x3 - x4) * t;
+            ctx.moveTo(topX, y1);
+            ctx.bezierCurveTo(topX, mid, bottomX, mid, bottomX, y2);
+        }
+    }
+    else {
+        for (let step = 0; step < numMarkers; step++) {
+            const t = step / numMarkers;
+            const topX = x1 + (x2 - x1) * t;
+            const bottomX = x4 + (x3 - x4) * t;
+            ctx.moveTo(topX, y1);
+            ctx.lineTo(bottomX, y2);
+        }
+    }
+    ctx.stroke();
+    ctx.strokeStyle = prevStrokeStyle;
+    ctx.lineWidth = prevLineWidth;
+}
 export function drawBox(ctx, x1, x2, y1, x3, x4, y2) {
     ctx.beginPath();
     ctx.moveTo(x1, y1);
@@ -122,7 +158,11 @@ export function onSynContextClick(event, model, setAnchorEl) {
     const f = model.featPositions[id];
     if (f) {
         model.setClickId(f.f.id());
-        setAnchorEl({ clientX, clientY, feature: f });
+        setAnchorEl({
+            clientX,
+            clientY,
+            feature: f,
+        });
     }
 }
 export function getTooltip({ feature, cigarOp, cigarOpLen, }) {
@@ -140,7 +180,7 @@ export function getTooltip({ feature, cigarOp, cigarOpLen, }) {
         `Query len: ${l1.toLocaleString('en-US')}`,
         `Target len: ${l2.toLocaleString('en-US')}`,
         identity ? `Identity: ${identity.toPrecision(2)}` : '',
-        cigarOp ? `CIGAR operator: ${cigarOp}${cigarOpLen}` : '',
+        cigarOp ? `CIGAR operator: ${toLocale(+cigarOpLen)}${cigarOp}` : '',
         n1 ? `Name 1: ${n1}` : '',
         n2 ? `Name 2: ${n2}` : '',
     ]

package/esm/LinearSyntenyDisplay/drawSynteny.d.ts

@@ -1,5 +1,6 @@
 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;
-export declare function drawMouseoverSynteny(model: LinearSyntenyDisplayModel): void;
+export declare function drawCigarClickMap(model: LinearSyntenyDisplayModel, cigarClickMapCanvas: CanvasRenderingContext2D): void;
+export declare function drawRef(model: LinearSyntenyDisplayModel, mainCanvas: CanvasRenderingContext2D): void;
+export declare function drawMouseoverClickMap(model: LinearSyntenyDisplayModel): void;