@jbrowse/plugin-dotplot-view 3.6.4 → 3.7.0

package/esm/DotplotRenderer/drawDotplot.d.ts

@@ -1,3 +1,4 @@
+import { type Warning } from './clamp';
 import type { Dotplot1DViewModel } from '../DotplotView/model';
 import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
 import type { RenderArgsDeserialized } from '@jbrowse/core/pluggableElementTypes/renderers/ComparativeServerSideRendererType';
@@ -6,6 +7,9 @@ export interface DotplotRenderArgsDeserialized extends RenderArgsDeserialized {
     height: number;
     width: number;
     highResolutionScaling: number;
+    alpha?: number;
+    minAlignmentLength?: number;
+    colorBy?: string;
     view: {
         hview: Dotplot1DViewModel;
         vview: Dotplot1DViewModel;
@@ -14,8 +18,5 @@ export interface DotplotRenderArgsDeserialized extends RenderArgsDeserialized {
 export declare function drawDotplot(ctx: CanvasRenderingContext2D, props: DotplotRenderArgsDeserialized & {
     views: Dotplot1DViewModel[];
 }): Promise<{
-    warnings: {
-        message: string;
-        effect: string;
-    }[];
+    warnings: Warning[];
 }>;

package/esm/DotplotRenderer/drawDotplot.js

@@ -1,25 +1,38 @@
 import { readConfObject } from '@jbrowse/core/configuration';
 import { createJBrowseTheme } from '@jbrowse/core/ui';
+import { category10 } from '@jbrowse/core/ui/colors';
 import { bpToPx } from '@jbrowse/core/util/Base1DUtils';
+import { colord } from '@jbrowse/core/util/colord';
 import { MismatchParser } from '@jbrowse/plugin-alignments';
 import { getSnapshot } from 'mobx-state-tree';
+import { clampWithWarnX, clampWithWarnY } from './clamp';
 const { parseCigar } = MismatchParser;
-const r = 'fell outside of range due to CIGAR string';
-const lt = '(less than min coordinate of feature)';
-const gt = '(greater than max coordinate of feature)';
-const fudgeFactor = 1;
-function drawCir(ctx, x, y, r = 1) {
-    ctx.beginPath();
-    ctx.arc(x, y, r / 2, 0, 2 * Math.PI);
-    ctx.fill();
+function hashString(str) {
+    let hash = 0;
+    for (let i = 0; i < str.length; i++) {
+        const char = str.charCodeAt(i);
+        hash = (hash << 5) - hash + char;
+        hash = hash & hash;
+    }
+    return Math.abs(hash);
+}
+function getQueryColor(queryName) {
+    const hash = hashString(queryName);
+    return category10[hash % category10.length];
+}
+function applyAlpha(color, alpha) {
+    if (alpha === 1) {
+        return color;
+    }
+    return colord(color).alpha(alpha).toRgbString();
 }
 export async function drawDotplot(ctx, props) {
     var _a, _b;
-    const { config, views, height, drawCigar, theme } = props;
+    const { config, views, height, drawCigar, theme, alpha = 1, minAlignmentLength = 0, colorBy: colorByOverride, } = props;
     const color = readConfObject(config, 'color');
     const posColor = readConfObject(config, 'posColor');
     const negColor = readConfObject(config, 'negColor');
-    const colorBy = readConfObject(config, 'colorBy');
+    const colorBy = colorByOverride !== null && colorByOverride !== void 0 ? colorByOverride : readConfObject(config, 'colorBy');
     const lineWidth = readConfObject(config, 'lineWidth');
     const thresholds = readConfObject(config, 'thresholds');
     const palette = readConfObject(config, 'thresholdsPalette');
@@ -32,60 +45,6 @@ export async function drawDotplot(ctx, props) {
     ctx.lineWidth = lineWidth;
     const { bpPerPx: hBpPerPx } = hview;
     const { bpPerPx: vBpPerPx } = vview;
-    function clampWithWarnX(num, min, max, feature) {
-        const strand = feature.get('strand') || 1;
-        if (strand === -1) {
-            ;
-            [max, min] = [min, max];
-        }
-        if (num < min - fudgeFactor) {
-            let start = feature.get('start');
-            let end = feature.get('end');
-            const refName = feature.get('refName');
-            if (strand === -1) {
-                ;
-                [end, start] = [start, end];
-            }
-            warnings.push({
-                message: `feature at (X ${refName}:${start}-${end}) ${r} ${lt}`,
-                effect: 'clipped the feature',
-            });
-            return min;
-        }
-        if (num > max + fudgeFactor) {
-            const strand = feature.get('strand') || 1;
-            const start = strand === 1 ? feature.get('start') : feature.get('end');
-            const end = strand === 1 ? feature.get('end') : feature.get('start');
-            const refName = feature.get('refName');
-            warnings.push({
-                message: `feature at (X ${refName}:${start}-${end}) ${r} ${gt}`,
-                effect: 'clipped the feature',
-            });
-            return max;
-        }
-        return num;
-    }
-    function clampWithWarnY(num, min, max, feature) {
-        if (num < min - fudgeFactor) {
-            const mate = feature.get('mate');
-            const { refName, start, end } = mate;
-            warnings.push({
-                message: `feature at (Y ${refName}:${start}-${end}) ${r} ${lt}`,
-                effect: 'clipped the feature',
-            });
-            return min;
-        }
-        if (num > max + fudgeFactor) {
-            const mate = feature.get('mate');
-            const { refName, start, end } = mate;
-            warnings.push({
-                message: `feature at (Y ${refName}:${start}-${end}) ${r} ${gt}`,
-                effect: 'clipped the feature',
-            });
-            return max;
-        }
-        return num;
-    }
     const hsnap = {
         ...getSnapshot(hview),
         staticBlocks: hview.staticBlocks,
@@ -97,41 +56,76 @@ export async function drawDotplot(ctx, props) {
         width: vview.width,
     };
     const t = createJBrowseTheme(theme);
-    for (const feature of hview.features || []) {
+    const features = hview.features || [];
+    let posColorWithAlpha;
+    let negColorWithAlpha;
+    let defaultColorWithAlpha;
+    const queryColorCache = new Map();
+    const getQueryColorWithAlpha = (queryName) => {
+        if (!queryColorCache.has(queryName)) {
+            const c = getQueryColor(queryName);
+            queryColorCache.set(queryName, applyAlpha(c, alpha));
+        }
+        return queryColorCache.get(queryName);
+    };
+    if (colorBy === 'strand') {
+        posColorWithAlpha = applyAlpha(posColor, alpha);
+        negColorWithAlpha = applyAlpha(negColor, alpha);
+    }
+    else if (colorBy === 'default' && !isCallback) {
+        const c = color === '#f0f' ? t.palette.text.primary : color;
+        defaultColorWithAlpha = applyAlpha(c, alpha);
+    }
+    for (const feature of features) {
         const strand = feature.get('strand') || 1;
-        const start = strand === 1 ? feature.get('start') : feature.get('end');
-        const end = strand === 1 ? feature.get('end') : feature.get('start');
+        const fStart = feature.get('start');
+        const fEnd = feature.get('end');
+        if (minAlignmentLength > 0) {
+            const alignmentLength = Math.abs(fEnd - fStart);
+            if (alignmentLength < minAlignmentLength) {
+                continue;
+            }
+        }
         const refName = feature.get('refName');
         const mate = feature.get('mate');
         const mateRef = mate.refName;
-        let r = 'black';
-        if (colorBy === 'identity') {
-            const identity = feature.get('identity');
-            for (let i = 0; i < thresholds.length; i++) {
-                if (identity > +thresholds[i]) {
-                    r = palette[i] || 'black';
-                    break;
-                }
-            }
-        }
-        else if (colorBy === 'meanQueryIdentity') {
-            r = `hsl(${feature.get('meanScore') * 200},100%,40%)`;
+        const start = strand === 1 ? fStart : fEnd;
+        const end = strand === 1 ? fEnd : fStart;
+        let colorWithAlpha;
+        if (colorBy === 'strand') {
+            colorWithAlpha = strand === -1 ? negColorWithAlpha : posColorWithAlpha;
         }
-        else if (colorBy === 'mappingQuality') {
-            r = `hsl(${feature.get('mappingQual')},100%,40%)`;
+        else if (colorBy === 'query') {
+            const queryName = refName;
+            colorWithAlpha = getQueryColorWithAlpha(queryName);
         }
-        else if (colorBy === 'strand') {
-            r = strand === -1 ? negColor : posColor;
+        else if (colorBy === 'default' && !isCallback) {
+            colorWithAlpha = defaultColorWithAlpha;
         }
-        else if (colorBy === 'default') {
-            r = isCallback
-                ? readConfObject(config, 'color', { feature })
-                : color === '#f0f'
-                    ? t.palette.text.primary
-                    : color;
+        else {
+            let r = 'black';
+            if (colorBy === 'identity') {
+                const identity = feature.get('identity');
+                for (let i = 0; i < thresholds.length; i++) {
+                    if (identity > +thresholds[i]) {
+                        r = palette[i] || 'black';
+                        break;
+                    }
+                }
+            }
+            else if (colorBy === 'meanQueryIdentity') {
+                r = `hsl(${feature.get('meanScore') * 200},100%,40%)`;
+            }
+            else if (colorBy === 'mappingQuality') {
+                r = `hsl(${feature.get('mappingQual')},100%,40%)`;
+            }
+            else if (colorBy === 'default' && isCallback) {
+                r = readConfObject(config, 'color', { feature });
+            }
+            colorWithAlpha = applyAlpha(r, alpha);
         }
-        ctx.fillStyle = r;
-        ctx.strokeStyle = r;
+        ctx.fillStyle = colorWithAlpha;
+        ctx.strokeStyle = colorWithAlpha;
         const b10 = bpToPx({ self: hsnap, refName, coord: start });
         const b20 = bpToPx({ self: hsnap, refName, coord: end });
         const e10 = bpToPx({ self: vsnap, refName: mateRef, coord: mate.start });
@@ -145,7 +139,9 @@ export async function drawDotplot(ctx, props) {
             const e1 = e10.offsetPx - db2;
             const e2 = e20.offsetPx - db2;
             if (Math.abs(b1 - b2) <= 4 && Math.abs(e1 - e2) <= 4) {
-                drawCir(ctx, b1, height - e1, lineWidth);
+                ctx.beginPath();
+                ctx.arc(b1, height - e1, lineWidth / 2, 0, 2 * Math.PI);
+                ctx.fill();
             }
             else {
                 let currX = b1;
@@ -170,8 +166,8 @@ export async function drawDotplot(ctx, props) {
                         else if (op === 'I') {
                             currY += val / vBpPerPx;
                         }
-                        currX = clampWithWarnX(currX, b1, b2, feature);
-                        currY = clampWithWarnY(currY, e1, e2, feature);
+                        currX = clampWithWarnX(currX, b1, b2, feature, warnings);
+                        currY = clampWithWarnY(currY, e1, e2, feature, warnings);
                         if (Math.abs(currX - lastDrawnX) > 0.5 ||
                             Math.abs(currY - lastDrawnY) > 0.5) {
                             ctx.lineTo(currX, height - currY);
@@ -193,13 +189,13 @@ export async function drawDotplot(ctx, props) {
             if (warnings.length <= 5) {
                 if (b10 === undefined || b20 === undefined) {
                     warnings.push({
-                        message: `feature at (X ${refName}:${start}-${end}) not plotted, fell outside of range`,
+                        message: `feature at (X-coord: ${refName}:${start}-${end}) not plotted, fell outside of range`,
                         effect: 'feature not rendered',
                     });
                 }
                 else {
                     warnings.push({
-                        message: `feature at (Y ${mateRef}:${mate.start}-${mate.end}) not plotted, fell outside of range`,
+                        message: `feature at (Y-coord: ${mateRef}:${mate.start}-${mate.end}) not plotted, fell outside of range`,
                         effect: 'feature not rendered',
                     });
                 }

package/esm/DotplotView/1dview.js

@@ -14,16 +14,18 @@ const Dotplot1DView = Base1DView.extend(self => {
                 return scaleFactor.get();
             },
             get maxBpPerPx() {
-                return self.totalBp / (self.width - 50);
+                return self.totalBp / (self.width * 0.9);
             },
             get minBpPerPx() {
                 return 1 / 50;
             },
             get maxOffset() {
-                return self.displayedRegionsTotalPx - self.width * 0.2;
+                const leftPadding = 10;
+                return self.displayedRegionsTotalPx - leftPadding;
             },
             get minOffset() {
-                return -self.width * 0.8;
+                const rightPadding = 30;
+                return -self.width + rightPadding;
             },
         },
         actions: {

package/esm/DotplotView/components/ColorBySelector.d.ts

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

package/esm/DotplotView/components/ColorBySelector.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
+import PaletteIcon from '@mui/icons-material/Palette';
+import { observer } from 'mobx-react';
+const ColorBySelector = observer(function ({ model, }) {
+    var _a, _b;
+    const firstDisplay = (_a = model.tracks[0]) === null || _a === void 0 ? void 0 : _a.displays[0];
+    const colorBy = (_b = firstDisplay === null || firstDisplay === void 0 ? void 0 : firstDisplay.colorBy) !== null && _b !== void 0 ? _b : 'default';
+    const setColorBy = (value) => {
+        for (const track of model.tracks) {
+            for (const display of track.displays) {
+                ;
+                display.setColorBy(value);
+            }
+        }
+    };
+    return (_jsx(CascadingMenuButton, { menuItems: [
+            {
+                label: 'Default',
+                type: 'radio',
+                checked: colorBy === 'default',
+                onClick: () => {
+                    setColorBy('default');
+                },
+                helpText: 'Use the default color scheme specified in the track configuration. This respects the color settings defined in the config file.',
+            },
+            {
+                label: 'Identity',
+                type: 'radio',
+                checked: colorBy === 'identity',
+                onClick: () => {
+                    setColorBy('identity');
+                },
+                helpText: 'Color alignments by sequence identity percentage. Higher identity matches appear in warmer colors, while lower identity matches appear cooler. Useful for identifying highly conserved vs. divergent regions.',
+            },
+            {
+                label: 'Mean Query Identity',
+                type: 'radio',
+                checked: colorBy === 'meanQueryIdentity',
+                onClick: () => {
+                    setColorBy('meanQueryIdentity');
+                },
+                helpText: 'Color alignments based on the mean identity across the query sequence. This provides a smoothed view of overall alignment quality, reducing noise from local variations. For instance, a single long query of e.g. a contig of an assembly, when aligned to the target, may get split into many smaller "hits". This score aggregates across them, and colors them all the same. Similar code exists in the program dotPlotly',
+            },
+            {
+                label: 'Mapping Quality',
+                type: 'radio',
+                checked: colorBy === 'mappingQuality',
+                onClick: () => {
+                    setColorBy('mappingQuality');
+                },
+                helpText: 'Color alignments by mapping quality score (MAPQ). Higher quality mappings (more unique/confident) appear in darker colors. Useful for identifying ambiguous or multi-mapping regions.',
+            },
+            {
+                label: 'Strand',
+                type: 'radio',
+                checked: colorBy === 'strand',
+                onClick: () => {
+                    setColorBy('strand');
+                },
+                helpText: 'Color alignments by strand orientation. Forward strand alignments and reverse strand alignments are shown in different colors, making it easy to identify inversions and strand-specific patterns.',
+            },
+            {
+                label: 'Query',
+                type: 'radio',
+                checked: colorBy === 'query',
+                onClick: () => {
+                    setColorBy('query');
+                },
+                helpText: 'Color alignments by query sequence name. Each unique query sequence is assigned a consistent color based on its name, making it easy to visually distinguish between different sequences.',
+            },
+        ], children: _jsx(PaletteIcon, {}) }));
+});
+export default ColorBySelector;

package/esm/DotplotView/components/DiagonalizationProgressDialog.d.ts

@@ -0,0 +1,6 @@
+import type { DotplotViewModel } from '../model';
+declare const DiagonalizationProgressDialog: ({ handleClose, model, }: {
+    handleClose: () => void;
+    model: Pick<DotplotViewModel, "tracks" | "hview" | "vview" | "id" | "type" | "displayName">;
+}) => import("react/jsx-runtime").JSX.Element;
+export default DiagonalizationProgressDialog;

package/esm/DotplotView/components/DiagonalizationProgressDialog.js

@@ -0,0 +1,123 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Dialog, ErrorMessage } from '@jbrowse/core/ui';
+import { getSession } from '@jbrowse/core/util';
+import { createStopToken, stopStopToken } from '@jbrowse/core/util/stopToken';
+import { Button, DialogActions, DialogContent, LinearProgress, Typography, } from '@mui/material';
+import { transaction } from 'mobx';
+import { observer } from 'mobx-react';
+async function runDiagonalization({ model, session, stopToken, setProgress, setMessage, }) {
+    setProgress(0);
+    setMessage('Preparing diagonalization...');
+    const track = model.tracks[0];
+    if (!track) {
+        throw new Error('No tracks found');
+    }
+    const display = track.displays[0];
+    if (!display) {
+        throw new Error('No display found');
+    }
+    const result = (await session.rpcManager.call(model.id, 'DiagonalizeDotplot', {
+        sessionId: `diagonalize-${Date.now()}`,
+        view: {
+            hview: model.hview,
+            vview: model.vview,
+        },
+        adapterConfig: display.adapterConfig,
+        stopToken,
+        statusCallback: (msg) => {
+            setMessage(msg);
+            if (msg.includes('Initializing')) {
+                setProgress(5);
+            }
+            else if (msg.includes('Getting renderer')) {
+                setProgress(10);
+            }
+            else if (msg.includes('Fetching features')) {
+                setProgress(20);
+            }
+            else if (msg.includes('Extracting')) {
+                setProgress(30);
+            }
+            else if (msg.includes('Running diagonalization')) {
+                setProgress(40);
+            }
+            else if (msg.includes('Grouping')) {
+                setProgress(50);
+            }
+            else if (msg.includes('Determining')) {
+                setProgress(65);
+            }
+            else if (msg.includes('Sorting')) {
+                setProgress(80);
+            }
+            else if (msg.includes('Building')) {
+                setProgress(90);
+            }
+            else if (msg.includes('complete')) {
+                setProgress(100);
+            }
+        },
+    }));
+    setMessage('Applying new layout...');
+    setProgress(95);
+    if (result.newRegions.length > 0) {
+        transaction(() => {
+            model.vview.setDisplayedRegions(result.newRegions);
+        });
+        setProgress(100);
+        setMessage(`Diagonalization complete! Reordered ${result.stats.regionsReordered} regions, reversed ${result.stats.regionsReversed}`);
+        return result;
+    }
+    else {
+        throw new Error('No regions to reorder');
+    }
+}
+const DiagonalizationProgressDialog = observer(function ({ handleClose, model, }) {
+    const [progress, setProgress] = useState(0);
+    const [message, setMessage] = useState('Ready to start diagonalization');
+    const [error, setError] = useState();
+    const [isRunning, setIsRunning] = useState(false);
+    const [stopToken, setStopToken] = useState();
+    const handleStart = async () => {
+        const session = getSession(model);
+        const token = createStopToken();
+        setStopToken(token);
+        try {
+            setIsRunning(true);
+            await runDiagonalization({
+                model,
+                session,
+                stopToken: token,
+                setProgress,
+                setMessage,
+            });
+            setTimeout(() => {
+                handleClose();
+            }, 2000);
+        }
+        catch (err) {
+            console.error(err);
+            setError(err);
+        }
+        finally {
+            setIsRunning(false);
+        }
+    };
+    const handleCancel = () => {
+        if (stopToken) {
+            stopStopToken(stopToken);
+            setStopToken(undefined);
+        }
+        handleClose();
+    };
+    const handleDialogClose = () => {
+        if (!isRunning) {
+            handleClose();
+        }
+    };
+    return (_jsxs(Dialog, { open: true, title: "Diagonalize Dotplot", onClose: handleDialogClose, maxWidth: "lg", children: [_jsxs(DialogContent, { style: { minWidth: 400 }, children: [message ? _jsx(Typography, { children: message }) : null, error ? _jsx(ErrorMessage, { error: error }) : null, isRunning ? (_jsxs(_Fragment, { children: [_jsx(LinearProgress, { variant: "determinate", value: progress, style: { marginTop: 16 }, color: error ? 'error' : 'primary' }), _jsxs(Typography, { variant: "caption", color: "textSecondary", style: { marginTop: 8, display: 'block' }, children: [Math.round(progress), "% complete"] })] })) : null] }), _jsxs(DialogActions, { children: [!isRunning ? (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: handleClose, color: "secondary", variant: "contained", children: "Cancel" }), _jsx(Button, { onClick: () => {
+                                    handleStart();
+                                }, color: "primary", variant: "contained", children: "Start" })] })) : null, isRunning ? (_jsx(Button, { onClick: handleCancel, color: "secondary", variant: "contained", children: "Cancel" })) : null] })] }));
+});
+export default DiagonalizationProgressDialog;