@jbrowse/plugin-dotplot-view 3.6.4 → 3.7.0

package/dist/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/dist/DotplotView/components/ColorBySelector.js

@@ -0,0 +1,79 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const CascadingMenuButton_1 = __importDefault(require("@jbrowse/core/ui/CascadingMenuButton"));
+const Palette_1 = __importDefault(require("@mui/icons-material/Palette"));
+const mobx_react_1 = require("mobx-react");
+const ColorBySelector = (0, mobx_react_1.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 ((0, jsx_runtime_1.jsx)(CascadingMenuButton_1.default, { 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: (0, jsx_runtime_1.jsx)(Palette_1.default, {}) }));
+});
+exports.default = ColorBySelector;

package/dist/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/dist/DotplotView/components/DiagonalizationProgressDialog.js

@@ -0,0 +1,125 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ui_1 = require("@jbrowse/core/ui");
+const util_1 = require("@jbrowse/core/util");
+const stopToken_1 = require("@jbrowse/core/util/stopToken");
+const material_1 = require("@mui/material");
+const mobx_1 = require("mobx");
+const mobx_react_1 = require("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) {
+        (0, mobx_1.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 = (0, mobx_react_1.observer)(function ({ handleClose, model, }) {
+    const [progress, setProgress] = (0, react_1.useState)(0);
+    const [message, setMessage] = (0, react_1.useState)('Ready to start diagonalization');
+    const [error, setError] = (0, react_1.useState)();
+    const [isRunning, setIsRunning] = (0, react_1.useState)(false);
+    const [stopToken, setStopToken] = (0, react_1.useState)();
+    const handleStart = async () => {
+        const session = (0, util_1.getSession)(model);
+        const token = (0, stopToken_1.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) {
+            (0, stopToken_1.stopStopToken)(stopToken);
+            setStopToken(undefined);
+        }
+        handleClose();
+    };
+    const handleDialogClose = () => {
+        if (!isRunning) {
+            handleClose();
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(ui_1.Dialog, { open: true, title: "Diagonalize Dotplot", onClose: handleDialogClose, maxWidth: "lg", children: [(0, jsx_runtime_1.jsxs)(material_1.DialogContent, { style: { minWidth: 400 }, children: [message ? (0, jsx_runtime_1.jsx)(material_1.Typography, { children: message }) : null, error ? (0, jsx_runtime_1.jsx)(ui_1.ErrorMessage, { error: error }) : null, isRunning ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.LinearProgress, { variant: "determinate", value: progress, style: { marginTop: 16 }, color: error ? 'error' : 'primary' }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "caption", color: "textSecondary", style: { marginTop: 8, display: 'block' }, children: [Math.round(progress), "% complete"] })] })) : null] }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [!isRunning ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { onClick: handleClose, color: "secondary", variant: "contained", children: "Cancel" }), (0, jsx_runtime_1.jsx)(material_1.Button, { onClick: () => {
+                                    handleStart();
+                                }, color: "primary", variant: "contained", children: "Start" })] })) : null, isRunning ? ((0, jsx_runtime_1.jsx)(material_1.Button, { onClick: handleCancel, color: "secondary", variant: "contained", children: "Cancel" })) : null] })] }));
+});
+exports.default = DiagonalizationProgressDialog;

package/dist/DotplotView/components/DotplotControls.js

@@ -1,46 +1,100 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const CascadingMenuButton_1 = __importDefault(require("@jbrowse/core/ui/CascadingMenuButton"));
 const Icons_1 = require("@jbrowse/core/ui/Icons");
-const CropDin_1 = __importDefault(require("@mui/icons-material/CropDin"));
-const CropLandscape_1 = __importDefault(require("@mui/icons-material/CropLandscape"));
+const util_1 = require("@jbrowse/core/util");
 const MoreVert_1 = __importDefault(require("@mui/icons-material/MoreVert"));
-const SettingsOverscan_1 = __importDefault(require("@mui/icons-material/SettingsOverscan"));
+const Shuffle_1 = __importDefault(require("@mui/icons-material/Shuffle"));
 const ZoomIn_1 = __importDefault(require("@mui/icons-material/ZoomIn"));
 const ZoomOut_1 = __importDefault(require("@mui/icons-material/ZoomOut"));
 const material_1 = require("@mui/material");
 const mobx_react_1 = require("mobx-react");
+const ColorBySelector_1 = __importDefault(require("./ColorBySelector"));
 const CursorIcon_1 = require("./CursorIcon");
+const MinLengthSlider_1 = __importDefault(require("./MinLengthSlider"));
+const OpacitySlider_1 = __importDefault(require("./OpacitySlider"));
+const DiagonalizationProgressDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./DiagonalizationProgressDialog'))));
 const DotplotControls = (0, mobx_react_1.observer)(function ({ model, }) {
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: () => {
+    var _a;
+    const [showDynamicControls, setShowDynamicControls] = (0, react_1.useState)(true);
+    const hasDisplays = (_a = model.tracks[0]) === null || _a === void 0 ? void 0 : _a.displays[0];
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', gap: '4px' }, children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: () => {
                     model.zoomOut();
                 }, children: (0, jsx_runtime_1.jsx)(ZoomOut_1.default, {}) }), (0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: () => {
                     model.zoomIn();
                 }, children: (0, jsx_runtime_1.jsx)(ZoomIn_1.default, {}) }), (0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: () => model.activateTrackSelector(), title: "Open track selector", children: (0, jsx_runtime_1.jsx)(Icons_1.TrackSelector, {}) }), (0, jsx_runtime_1.jsx)(CascadingMenuButton_1.default, { menuItems: [
                     {
                         label: 'Square view - same bp per pixel',
-                        icon: CropDin_1.default,
                         onClick: () => {
                             model.squareView();
                         },
+                        helpText: 'Makes both views use the same zoom level (bp per pixel), adjusting to the average of each. This ensures features are displayed at comparable scales for easier visual comparison.',
                     },
                     {
                         label: 'Rectangular view - same total bp',
-                        icon: CropLandscape_1.default,
                         onClick: () => {
                             model.squareViewProportional();
                         },
+                        helpText: 'Adjusts zoom levels proportionally so both views show the same total number of base pairs. This accounts for different view widths while maintaining the same total genomic span.',
                     },
                     {
                         label: 'Show all regions',
-                        icon: SettingsOverscan_1.default,
                         onClick: () => {
                             model.showAllRegions();
                         },
+                        helpText: 'Zooms out to display all genome assemblies in their entirety. Useful for getting a high-level overview or resetting the view after zooming into specific regions.',
+                    },
+                    {
+                        label: 'Re-order chromosomes',
+                        icon: Shuffle_1.default,
+                        onClick: () => {
+                            (0, util_1.getSession)(model).queueDialog(handleClose => [
+                                DiagonalizationProgressDialog,
+                                {
+                                    handleClose,
+                                    model,
+                                },
+                            ]);
+                        },
+                        helpText: 'Diagonalization algorithmically reorders and reorients chromosomes to minimize crossing synteny lines, creating a more diagonal pattern. This makes it easier to identify large-scale genomic rearrangements, inversions, and translocations. The process runs on the webworker for better performance.',
                     },
                     {
                         type: 'checkbox',
@@ -49,6 +103,7 @@ const DotplotControls = (0, mobx_react_1.observer)(function ({ model, }) {
                         onClick: () => {
                             model.setDrawCigar(!model.drawCigar);
                         },
+                        helpText: 'Toggle detailed CIGAR string visualization showing matches, insertions, and deletions in alignments. Disable for a cleaner view that shows only broad syntenic blocks.',
                     },
                     {
                         label: 'Show pan buttons',
@@ -57,48 +112,64 @@ const DotplotControls = (0, mobx_react_1.observer)(function ({ model, }) {
                         onClick: () => {
                             model.setShowPanButtons(!model.showPanButtons);
                         },
+                        helpText: 'Show or hide directional pan buttons that allow you to navigate the dotplot view by clicking arrows. Useful for precise navigation without using mouse drag.',
+                    },
+                    {
+                        label: 'Show dynamic controls',
+                        type: 'checkbox',
+                        checked: showDynamicControls,
+                        onClick: () => {
+                            setShowDynamicControls(!showDynamicControls);
+                        },
+                        helpText: 'Toggle visibility of dynamic controls like opacity and minimum length sliders. These controls allow you to adjust dotplot visualization parameters in real-time.',
                     },
                     {
                         label: 'Click and drag mode',
+                        helpText: 'Configure how clicking and dragging behaves in the dotplot view. Choose between panning and region selection as the default action.',
                         subMenu: [
                             {
-                                label: 'Pan by default, select region when ctrl/cmd key is held',
+                                label: 'Pan by default',
                                 icon: CursorIcon_1.CursorMove,
                                 type: 'radio',
                                 checked: model.cursorMode === 'move',
                                 onClick: () => {
                                     model.setCursorMode('move');
                                 },
+                                helpText: 'Click and drag to pan the view. Hold Ctrl/Cmd while dragging to select a region for zooming or creating a linear synteny view.',
                             },
                             {
-                                label: 'Select region by default, pan when ctrl/cmd key is held',
+                                label: 'Select region by default',
                                 icon: CursorIcon_1.CursorMouse,
                                 type: 'radio',
                                 checked: model.cursorMode === 'crosshair',
                                 onClick: () => {
                                     model.setCursorMode('crosshair');
                                 },
+                                helpText: 'Click and drag to select a region for zooming or creating a linear synteny view. Hold Ctrl/Cmd while dragging to pan the view instead.',
                             },
                         ],
                     },
                     {
                         label: 'Wheel scroll mode',
+                        helpText: 'Configure how mouse wheel scrolling behaves in the dotplot view.',
                         subMenu: [
                             {
-                                label: 'Pans view',
+                                label: 'Pan view',
                                 type: 'radio',
                                 checked: model.wheelMode === 'pan',
                                 onClick: () => {
                                     model.setWheelMode('pan');
                                 },
+                                helpText: 'Mouse wheel scrolling will pan the view up/down. Useful for navigating through the genome without changing zoom level.',
                             },
                             {
-                                label: 'Zooms view',
+                                label: 'Zoom view',
                                 type: 'radio',
                                 checked: model.wheelMode === 'zoom',
                                 onClick: () => {
                                     model.setWheelMode('zoom');
                                 },
+                                helpText: 'Mouse wheel scrolling will zoom in/out of the view. Provides quick zoom control for detailed inspection of regions.',
                             },
                             {
                                 label: 'Disable',
@@ -107,9 +178,10 @@ const DotplotControls = (0, mobx_react_1.observer)(function ({ model, }) {
                                 onClick: () => {
                                     model.setWheelMode('none');
                                 },
+                                helpText: 'Mouse wheel scrolling will be disabled for the dotplot view. Use this to prevent accidental zoom or pan when scrolling the page.',
                             },
                         ],
                     },
-                ], children: (0, jsx_runtime_1.jsx)(MoreVert_1.default, {}) })] }));
+                ], children: (0, jsx_runtime_1.jsx)(MoreVert_1.default, {}) }), (0, jsx_runtime_1.jsx)(ColorBySelector_1.default, { model: model }), hasDisplays && showDynamicControls ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(OpacitySlider_1.default, { model: model }), (0, jsx_runtime_1.jsx)(MinLengthSlider_1.default, { model: model })] })) : null] }));
 });
 exports.default = DotplotControls;

package/dist/DotplotView/components/DotplotTooltips.d.ts

@@ -0,0 +1,15 @@
+import type { DotplotViewModel } from '../model';
+type Coord = [number, number] | undefined;
+interface DotplotTooltipsProps {
+    model: DotplotViewModel;
+    mouseOvered: boolean;
+    validSelect: boolean;
+    mouserect: Coord;
+    mouserectClient: Coord;
+    xdistance: number;
+    mousedown: Coord;
+    mousedownClient: Coord;
+    ydistance: number;
+}
+export default function DotplotTooltips({ model, mouseOvered, validSelect, mouserect, mouserectClient, xdistance, mousedown, mousedownClient, ydistance, }: DotplotTooltipsProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/DotplotView/components/DotplotTooltips.js

@@ -0,0 +1,43 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = DotplotTooltips;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const TooltipWhereClicked = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./DotplotTooltipClick'))));
+const TooltipWhereMouseovered = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./DotplotTooltipMouseover'))));
+function DotplotTooltips({ model, mouseOvered, validSelect, mouserect, mouserectClient, xdistance, mousedown, mousedownClient, ydistance, }) {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [mouseOvered && validSelect ? ((0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: null, children: (0, jsx_runtime_1.jsx)(TooltipWhereMouseovered, { model: model, mouserect: mouserect, mouserectClient: mouserectClient, xdistance: xdistance }) })) : null, validSelect ? ((0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: null, children: (0, jsx_runtime_1.jsx)(TooltipWhereClicked, { model: model, mousedown: mousedown, mousedownClient: mousedownClient, xdistance: xdistance, ydistance: ydistance }) })) : null] }));
+}