@jbrowse/plugin-linear-comparative-view 4.0.3 → 4.1.1

package/esm/LinearSyntenyDisplay/components/util.js

@@ -102,35 +102,37 @@ export function drawBezierBox(ctx, x1, x2, y1, x3, x4, y2, mid) {
     ctx.bezierCurveTo(x4, mid, x1, mid, x1, y1);
     ctx.closePath();
 }
-export function onSynClick(event, model) {
-    const view = getContainingView(model);
-    const track = getContainingTrack(model);
-    const { featPositions, numFeats, clickMapCanvas: ref1, cigarClickMapCanvas: ref2, level, } = model;
-    if (!ref1 || !ref2) {
-        return;
+export function getFeatureAtClick(event, model) {
+    const { clickMapCanvas, numFeats, featPositions } = model;
+    if (!clickMapCanvas) {
+        return undefined;
     }
-    const rect = ref1.getBoundingClientRect();
-    const ctx1 = ref1.getContext('2d');
-    const ctx2 = ref2.getContext('2d');
-    if (!ctx1 || !ctx2) {
-        return;
+    const ctx = clickMapCanvas.getContext('2d');
+    if (!ctx) {
+        return undefined;
     }
+    const rect = clickMapCanvas.getBoundingClientRect();
     const x = event.clientX - rect.left;
     const y = event.clientY - rect.top;
-    const [r1, g1, b1] = ctx1.getImageData(x, y, 1, 1).data;
+    const [r, g, b] = ctx.getImageData(x, y, 1, 1).data;
     const unitMultiplier = Math.floor(MAX_COLOR_RANGE / numFeats);
-    const id = getId(r1, g1, b1, unitMultiplier);
-    const feat = featPositions[id];
+    const id = getId(r, g, b, unitMultiplier);
+    return featPositions[id];
+}
+export function onSynClick(event, model) {
+    const feat = getFeatureAtClick(event, model);
     if (feat) {
         const { f } = feat;
         model.setClickId(f.id());
         const session = getSession(model);
         if (isSessionModelWithWidgets(session)) {
+            const view = getContainingView(model);
+            const track = getContainingTrack(model);
             session.showWidget(session.addWidget('SyntenyFeatureWidget', 'syntenyFeature', {
                 view,
                 track,
                 featureData: f.toJSON(),
-                level,
+                level: model.level,
             }));
         }
     }
@@ -138,30 +140,13 @@ export function onSynClick(event, model) {
 }
 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());
+    const feat = getFeatureAtClick(event, model);
+    if (feat) {
+        model.setClickId(feat.f.id());
         setAnchorEl({
-            clientX,
-            clientY,
-            feature: f,
+            clientX: event.clientX,
+            clientY: event.clientY,
+            feature: feat,
         });
     }
 }

package/esm/LinearSyntenyDisplay/drawCigarClickMap.d.ts

@@ -0,0 +1,2 @@
+import type { LinearSyntenyDisplayModel } from './model.ts';
+export declare function drawCigarClickMap(model: LinearSyntenyDisplayModel, cigarClickMapCanvas: CanvasRenderingContext2D): void;

package/esm/LinearSyntenyDisplay/drawCigarClickMap.js

@@ -0,0 +1,88 @@
+import { doesIntersect2, getContainingView } from '@jbrowse/core/util';
+import { draw } from "./components/util.js";
+import { MAX_COLOR_RANGE, lineLimit, makeColor, oobLimit, } from "./drawSyntenyUtils.js";
+export function drawCigarClickMap(model, cigarClickMapCanvas) {
+    const view = getContainingView(model);
+    const drawCurves = view.drawCurves;
+    const drawCIGAR = view.drawCIGAR;
+    const drawCIGARMatchesOnly = view.drawCIGARMatchesOnly;
+    const { level, height, featPositions } = model;
+    const width = view.width;
+    const bpPerPxs = view.views.map(v => v.bpPerPx);
+    cigarClickMapCanvas.imageSmoothingEnabled = false;
+    cigarClickMapCanvas.clearRect(0, 0, width, height);
+    const offsets = view.views.map(v => v.offsetPx);
+    const bpPerPxInv0 = 1 / bpPerPxs[level];
+    const bpPerPxInv1 = 1 / bpPerPxs[level + 1];
+    for (const { p11, p12, p21, p22, f, cigar } of featPositions) {
+        const x11 = p11.offsetPx - offsets[level];
+        const x12 = p12.offsetPx - offsets[level];
+        const x21 = p21.offsetPx - offsets[level + 1];
+        const x22 = p22.offsetPx - offsets[level + 1];
+        const l1 = Math.abs(x12 - x11);
+        const l2 = Math.abs(x22 - x21);
+        const minX = Math.min(x21, x22);
+        const maxX = Math.max(x21, x22);
+        const y1 = 0;
+        const y2 = height;
+        const mid = (y2 - y1) / 2;
+        if (!(l1 <= lineLimit && l2 <= lineLimit) &&
+            doesIntersect2(minX, maxX, -oobLimit, view.width + oobLimit)) {
+            const s1 = f.get('strand');
+            const k1 = s1 === -1 ? x12 : x11;
+            const k2 = s1 === -1 ? x11 : x12;
+            const rev1 = k1 < k2 ? 1 : -1;
+            const rev2 = (x21 < x22 ? 1 : -1) * s1;
+            let cx1 = k1;
+            let cx2 = s1 === -1 ? x22 : x21;
+            if (cigar.length && drawCIGAR) {
+                let continuingFlag = false;
+                let px1 = 0;
+                let px2 = 0;
+                const unitMultiplier2 = Math.floor(MAX_COLOR_RANGE / cigar.length);
+                for (let j = 0; j < cigar.length; j += 2) {
+                    const len = +cigar[j];
+                    const op = cigar[j + 1];
+                    if (!continuingFlag) {
+                        px1 = cx1;
+                        px2 = cx2;
+                    }
+                    const d1 = len * bpPerPxInv0;
+                    const d2 = len * bpPerPxInv1;
+                    if (op === 'M' || op === '=' || op === 'X') {
+                        cx1 += d1 * rev1;
+                        cx2 += d2 * rev2;
+                    }
+                    else if (op === 'D' || op === 'N') {
+                        cx1 += d1 * rev1;
+                    }
+                    else if (op === 'I') {
+                        cx2 += d2 * rev2;
+                    }
+                    if (!(Math.max(px1, px2, cx1, cx2) < 0 ||
+                        Math.min(px1, px2, cx1, cx2) > width)) {
+                        const isNotLast = j < cigar.length - 2;
+                        if (Math.abs(cx1 - px1) <= 1 &&
+                            Math.abs(cx2 - px2) <= 1 &&
+                            isNotLast) {
+                            continuingFlag = true;
+                        }
+                        else {
+                            continuingFlag = false;
+                            const shouldDraw = !drawCIGARMatchesOnly ||
+                                ((op === 'M' || op === '=' || op === 'X') &&
+                                    Math.abs(cx1 - px1) > 1 &&
+                                    Math.abs(cx2 - px2) > 1);
+                            if (shouldDraw) {
+                                const idx = j * unitMultiplier2 + 1;
+                                cigarClickMapCanvas.fillStyle = makeColor(idx);
+                                draw(cigarClickMapCanvas, px1, cx1, y1, cx2, px2, y2, mid, drawCurves);
+                                cigarClickMapCanvas.fill();
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

package/esm/LinearSyntenyDisplay/{drawMouseoverClickMap.js → drawMouseover.js}

@@ -1,12 +1,6 @@
 import { getContainingView } from '@jbrowse/core/util';
 import { drawMatchSimple } from "./components/util.js";
-const oobLimit = 1600;
-const fillCallback = (ctx) => {
-    ctx.fill();
-};
-const strokeCallback = (ctx) => {
-    ctx.stroke();
-};
+import { oobLimit } from "./drawSyntenyUtils.js";
 export function drawMouseoverClickMap(model) {
     const { level, clickId, mouseoverId } = model;
     const view = getContainingView(model);
@@ -25,12 +19,14 @@ export function drawMouseoverClickMap(model) {
     const feature1 = model.featMap[mouseoverId || ''];
     if (feature1) {
         drawMatchSimple({
-            cb: fillCallback,
+            cb: ctx => {
+                ctx.fill();
+            },
             feature: feature1,
             level,
             ctx,
             oobLimit,
-            viewWidth: width,
+            viewWidth: view.width,
             drawCurves,
             offsets,
             height,
@@ -39,12 +35,14 @@ export function drawMouseoverClickMap(model) {
     const feature2 = model.featMap[clickId || ''];
     if (feature2) {
         drawMatchSimple({
-            cb: strokeCallback,
+            cb: ctx => {
+                ctx.stroke();
+            },
             feature: feature2,
             ctx,
             level,
             oobLimit,
-            viewWidth: width,
+            viewWidth: view.width,
             drawCurves,
             offsets,
             height,

package/esm/LinearSyntenyDisplay/drawRef.d.ts

@@ -0,0 +1,2 @@
+import type { LinearSyntenyDisplayModel } from './model.ts';
+export declare function drawRef(model: LinearSyntenyDisplayModel, mainCanvas: CanvasRenderingContext2D): void;

package/esm/LinearSyntenyDisplay/drawRef.js

@@ -0,0 +1,190 @@
+import { doesIntersect2, getContainingView } from '@jbrowse/core/util';
+import { draw, drawLocationMarkers, drawMatchSimple, } from "./components/util.js";
+import { MAX_COLOR_RANGE, lineLimit, makeColor, oobLimit, } from "./drawSyntenyUtils.js";
+const fillCb = (ctx) => {
+    ctx.fill();
+};
+export function drawRef(model, mainCanvas) {
+    const view = getContainingView(model);
+    const drawCurves = view.drawCurves;
+    const drawCIGAR = view.drawCIGAR;
+    const drawCIGARMatchesOnly = view.drawCIGARMatchesOnly;
+    const drawLocationMarkersEnabled = view.drawLocationMarkers;
+    const { level, height, featPositions, minAlignmentLength, colorBy } = model;
+    const width = view.width;
+    const bpPerPxs = view.views.map(v => v.bpPerPx);
+    const colorMapWithAlpha = model.colorMapWithAlpha;
+    const posColorWithAlpha = model.posColorWithAlpha;
+    const negColorWithAlpha = model.negColorWithAlpha;
+    const getQueryColorWithAlpha = model.queryColorWithAlphaMap;
+    const queryTotalLengths = model.queryTotalLengths;
+    const offsets = view.views.map(v => v.offsetPx);
+    const offsetsL0 = offsets[level];
+    const offsetsL1 = offsets[level + 1];
+    const unitMultiplier = Math.floor(MAX_COLOR_RANGE / featPositions.length);
+    const y1 = 0;
+    const y2 = height;
+    const mid = (y2 - y1) / 2;
+    const useStrandColor = colorBy === 'strand';
+    const useQueryColor = colorBy === 'query';
+    const bpPerPx0 = bpPerPxs[level];
+    const bpPerPx1 = bpPerPxs[level + 1];
+    const bpPerPxInv0 = 1 / bpPerPx0;
+    const bpPerPxInv1 = 1 / bpPerPx1;
+    const clickMapCtx = model.clickMapCanvas?.getContext('2d');
+    if (clickMapCtx) {
+        clickMapCtx.imageSmoothingEnabled = false;
+        clickMapCtx.clearRect(0, 0, width, height);
+    }
+    mainCanvas.fillStyle = colorMapWithAlpha.M;
+    mainCanvas.strokeStyle = colorMapWithAlpha.M;
+    for (const [i, featPosition] of featPositions.entries()) {
+        const feature = featPosition;
+        const { p11, p12, p21, p22, f, cigar } = feature;
+        const strand = f.get('strand');
+        const refName = f.get('refName');
+        if (queryTotalLengths) {
+            const queryName = f.get('name') || f.get('id') || f.id();
+            const totalLength = queryTotalLengths.get(queryName) || 0;
+            if (totalLength < minAlignmentLength) {
+                continue;
+            }
+        }
+        const x11 = p11.offsetPx - offsetsL0;
+        const x12 = p12.offsetPx - offsetsL0;
+        const x21 = p21.offsetPx - offsetsL1;
+        const x22 = p22.offsetPx - offsetsL1;
+        const l1 = Math.abs(x12 - x11);
+        const l2 = Math.abs(x22 - x21);
+        const minX = Math.min(x21, x22);
+        const maxX = Math.max(x21, x22);
+        if (l1 <= lineLimit &&
+            l2 <= lineLimit &&
+            x21 < width + oobLimit &&
+            x21 > -oobLimit) {
+            if (useStrandColor) {
+                mainCanvas.strokeStyle =
+                    strand === -1 ? negColorWithAlpha : posColorWithAlpha;
+            }
+            else if (useQueryColor) {
+                mainCanvas.strokeStyle = getQueryColorWithAlpha(refName);
+            }
+            else {
+                mainCanvas.strokeStyle = colorMapWithAlpha.M;
+            }
+            mainCanvas.beginPath();
+            mainCanvas.moveTo(x11, y1);
+            if (drawCurves) {
+                mainCanvas.bezierCurveTo(x11, mid, x21, mid, x21, y2);
+            }
+            else {
+                mainCanvas.lineTo(x21, y2);
+            }
+            mainCanvas.stroke();
+        }
+        else if (doesIntersect2(minX, maxX, -oobLimit, view.width + oobLimit)) {
+            const s1 = strand;
+            const k1 = s1 === -1 ? x12 : x11;
+            const k2 = s1 === -1 ? x11 : x12;
+            const rev1 = k1 < k2 ? 1 : -1;
+            const rev2 = (x21 < x22 ? 1 : -1) * s1;
+            let cx1 = k1;
+            let cx2 = s1 === -1 ? x22 : x21;
+            if (cigar.length && drawCIGAR) {
+                let continuingFlag = false;
+                let px1 = 0;
+                let px2 = 0;
+                for (let j = 0; j < cigar.length; j += 2) {
+                    const len = +cigar[j];
+                    const op = cigar[j + 1];
+                    if (!continuingFlag) {
+                        px1 = cx1;
+                        px2 = cx2;
+                    }
+                    const d1 = len * bpPerPxInv0;
+                    const d2 = len * bpPerPxInv1;
+                    if (op === 'M' || op === '=' || op === 'X') {
+                        cx1 += d1 * rev1;
+                        cx2 += d2 * rev2;
+                    }
+                    else if (op === 'D' || op === 'N') {
+                        cx1 += d1 * rev1;
+                    }
+                    else if (op === 'I') {
+                        cx2 += d2 * rev2;
+                    }
+                    if (!(Math.max(px1, px2, cx1, cx2) < 0 ||
+                        Math.min(px1, px2, cx1, cx2) > width)) {
+                        const isNotLast = j < cigar.length - 2;
+                        if (Math.abs(cx1 - px1) <= 1 &&
+                            Math.abs(cx2 - px2) <= 1 &&
+                            isNotLast) {
+                            continuingFlag = true;
+                        }
+                        else {
+                            const letter = (continuingFlag && d1 > 1) || d2 > 1 ? op : 'M';
+                            const isInsertionOrDeletion = letter === 'I' || letter === 'D' || letter === 'N';
+                            if (useStrandColor && !isInsertionOrDeletion) {
+                                mainCanvas.fillStyle =
+                                    strand === -1 ? negColorWithAlpha : posColorWithAlpha;
+                            }
+                            else if (useQueryColor && !isInsertionOrDeletion) {
+                                mainCanvas.fillStyle = getQueryColorWithAlpha(refName);
+                            }
+                            else {
+                                mainCanvas.fillStyle = colorMapWithAlpha[letter];
+                            }
+                            continuingFlag = false;
+                            if (drawCIGARMatchesOnly) {
+                                if (letter === 'M') {
+                                    draw(mainCanvas, px1, cx1, y1, cx2, px2, y2, mid, drawCurves);
+                                    mainCanvas.fill();
+                                    if (drawLocationMarkersEnabled) {
+                                        drawLocationMarkers(mainCanvas, px1, cx1, y1, cx2, px2, y2, mid, bpPerPx0, bpPerPx1, drawCurves);
+                                    }
+                                }
+                            }
+                            else {
+                                draw(mainCanvas, px1, cx1, y1, cx2, px2, y2, mid, drawCurves);
+                                mainCanvas.fill();
+                                if (drawLocationMarkersEnabled) {
+                                    drawLocationMarkers(mainCanvas, px1, cx1, y1, cx2, px2, y2, mid, bpPerPx0, bpPerPx1, drawCurves);
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+            else {
+                if (useStrandColor) {
+                    mainCanvas.fillStyle =
+                        strand === -1 ? negColorWithAlpha : posColorWithAlpha;
+                }
+                else if (useQueryColor) {
+                    mainCanvas.fillStyle = getQueryColorWithAlpha(refName);
+                }
+                draw(mainCanvas, x11, x12, y1, x22, x21, y2, mid, drawCurves);
+                mainCanvas.fill();
+                if (useStrandColor || useQueryColor) {
+                    mainCanvas.fillStyle = colorMapWithAlpha.M;
+                }
+            }
+        }
+        if (clickMapCtx) {
+            const idx = i * unitMultiplier + 1;
+            clickMapCtx.fillStyle = makeColor(idx);
+            drawMatchSimple({
+                cb: fillCb,
+                feature,
+                ctx: clickMapCtx,
+                drawCurves,
+                level,
+                offsets,
+                oobLimit,
+                viewWidth: view.width,
+                hideTiny: true,
+                height,
+            });
+        }
+    }
+}

package/esm/LinearSyntenyDisplay/drawSynteny.d.ts

@@ -1,6 +1,4 @@
-import type { LinearSyntenyDisplayModel } from './model.ts';
-export declare const MAX_COLOR_RANGE: number;
-export declare function getId(r: number, g: number, b: number, unitMultiplier: number): number;
-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;
+export { drawCigarClickMap } from './drawCigarClickMap.ts';
+export { drawMouseoverClickMap } from './drawMouseover.ts';
+export { drawRef } from './drawRef.ts';
+export { MAX_COLOR_RANGE, getId } from './drawSyntenyUtils.ts';