@jbrowse/plugin-dotplot-view 3.6.5 → 4.0.0

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 DiagonalizationProgressDialog({ 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;

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

@@ -1,4 +1,4 @@
-import type { DotplotViewModel } from '../model';
+import type { DotplotViewModel } from '../model.ts';
 declare const DotplotControls: ({ model, }: {
     model: DotplotViewModel;
 }) => import("react/jsx-runtime").JSX.Element;

package/esm/DotplotView/components/DotplotControls.js

@@ -1,41 +1,61 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { lazy, useState } from 'react';
 import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
 import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons';
-import CropDinIcon from '@mui/icons-material/CropDin';
-import CropLandscapeIcon from '@mui/icons-material/CropLandscape';
+import { getSession } from '@jbrowse/core/util';
 import MoreVert from '@mui/icons-material/MoreVert';
-import SettingsOverscanIcon from '@mui/icons-material/SettingsOverscan';
+import ShuffleIcon from '@mui/icons-material/Shuffle';
 import ZoomIn from '@mui/icons-material/ZoomIn';
 import ZoomOut from '@mui/icons-material/ZoomOut';
 import { IconButton } from '@mui/material';
 import { observer } from 'mobx-react';
-import { CursorMouse, CursorMove } from './CursorIcon';
-const DotplotControls = observer(function ({ model, }) {
-    return (_jsxs("div", { children: [_jsx(IconButton, { onClick: () => {
+import ColorBySelector from "./ColorBySelector.js";
+import { CursorMouse, CursorMove } from "./CursorIcon.js";
+import MinLengthSlider from "./MinLengthSlider.js";
+import OpacitySlider from "./OpacitySlider.js";
+const DiagonalizationProgressDialog = lazy(() => import("./DiagonalizationProgressDialog.js"));
+const DotplotControls = observer(function DotplotControls({ model, }) {
+    const [showDynamicControls, setShowDynamicControls] = useState(true);
+    const hasDisplays = model.tracks[0]?.displays[0];
+    return (_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '4px' }, children: [_jsx(IconButton, { onClick: () => {
                     model.zoomOut();
                 }, children: _jsx(ZoomOut, {}) }), _jsx(IconButton, { onClick: () => {
                     model.zoomIn();
                 }, children: _jsx(ZoomIn, {}) }), _jsx(IconButton, { onClick: () => model.activateTrackSelector(), title: "Open track selector", children: _jsx(TrackSelectorIcon, {}) }), _jsx(CascadingMenuButton, { menuItems: [
                     {
                         label: 'Square view - same bp per pixel',
-                        icon: CropDinIcon,
                         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: CropLandscapeIcon,
                         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: SettingsOverscanIcon,
                         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: ShuffleIcon,
+                        onClick: () => {
+                            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',
@@ -44,6 +64,7 @@ const DotplotControls = 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',
@@ -52,48 +73,64 @@ const DotplotControls = 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: 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: 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',
@@ -102,9 +139,10 @@ const DotplotControls = 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: _jsx(MoreVert, {}) })] }));
+                ], children: _jsx(MoreVert, {}) }), _jsx(ColorBySelector, { model: model }), hasDisplays && showDynamicControls ? (_jsxs(_Fragment, { children: [_jsx(OpacitySlider, { model: model }), _jsx(MinLengthSlider, { model: model })] })) : null] }));
 });
 export default DotplotControls;

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

@@ -0,0 +1,6 @@
+import type { DotplotViewModel } from '../model.ts';
+declare const DotplotGrid: ({ model, children, }: {
+    model: DotplotViewModel;
+    children?: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element | null;
+export default DotplotGrid;

package/esm/DotplotView/components/{Grid.js → DotplotGrid.js}

@@ -2,10 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { getFillProps, getStrokeProps } from '@jbrowse/core/util';
 import { useTheme } from '@mui/material';
 import { observer } from 'mobx-react';
-export const GridRaw = observer(function ({ model, children, }) {
+const DotplotGrid = observer(function DotplotGrid({ model, children, }) {
     const { viewWidth, viewHeight, hview, vview } = model;
     const hblocks = hview.dynamicBlocks.contentBlocks;
     const vblocks = vview.dynamicBlocks.contentBlocks;
+    const theme = useTheme();
     if (!hblocks.length || !vblocks.length) {
         return null;
     }
@@ -13,31 +14,29 @@ export const GridRaw = observer(function ({ model, children, }) {
     const vtop = vview.displayedRegionsTotalPx - vview.offsetPx;
     const hbottom = hblocks[0].offsetPx - hview.offsetPx;
     const vbottom = vblocks[0].offsetPx - vview.offsetPx;
-    const theme = useTheme();
     const stroke = theme.palette.divider;
     const rx = Math.max(hbottom, 0);
     const ry = Math.max(viewHeight - vtop, 0);
     const w = Math.min(htop - hbottom, viewWidth);
     const h = Math.min(viewHeight - vbottom - ry, viewHeight);
-    let lastx = Number.POSITIVE_INFINITY;
-    let lasty = Number.POSITIVE_INFINITY;
-    return (_jsxs(_Fragment, { children: [_jsx("rect", { x: rx, y: ry, width: w, height: h, ...getFillProps(theme.palette.background.default) }), _jsxs("g", { children: [hblocks.map(region => {
+    const hlines = hblocks.filter((region, idx) => {
+        const x = Math.floor(region.offsetPx - hview.offsetPx);
+        const prevX = idx > 0 ? Math.floor(hblocks[idx - 1].offsetPx - hview.offsetPx) : null;
+        return x !== prevX;
+    });
+    const vlines = vblocks.filter((region, idx) => {
+        const y = Math.floor(viewHeight - (region.offsetPx - vview.offsetPx));
+        const prevY = idx > 0
+            ? Math.floor(viewHeight - (vblocks[idx - 1].offsetPx - vview.offsetPx))
+            : null;
+        return y !== prevY;
+    });
+    return (_jsxs(_Fragment, { children: [_jsx("rect", { x: rx, y: ry, width: w, height: h, ...getFillProps(theme.palette.background.default) }), _jsxs("g", { children: [hlines.map(region => {
                         const x = region.offsetPx - hview.offsetPx;
-                        const render = Math.floor(x) !== Math.floor(lastx);
-                        if (render) {
-                            lastx = x;
-                        }
-                        return render ? (_jsx("line", { x1: x, y1: 0, x2: x, y2: viewHeight, ...getStrokeProps(stroke) }, JSON.stringify(region))) : null;
-                    }), vblocks.map(region => {
+                        return (_jsx("line", { x1: x, y1: 0, x2: x, y2: viewHeight, ...getStrokeProps(stroke) }, region.key));
+                    }), vlines.map(region => {
                         const y = viewHeight - (region.offsetPx - vview.offsetPx);
-                        const render = Math.floor(y) !== Math.floor(lasty);
-                        if (render) {
-                            lasty = y;
-                        }
-                        return render ? (_jsx("line", { x1: 0, y1: y, x2: viewWidth, y2: y, ...getStrokeProps(stroke) }, JSON.stringify(region))) : null;
+                        return (_jsx("line", { x1: 0, y1: y, x2: viewWidth, y2: y, ...getStrokeProps(stroke) }, region.key));
                     }), _jsx("line", { x1: htop, y1: 0, x2: htop, y2: viewHeight, ...getStrokeProps(stroke) }), _jsx("line", { x1: 0, y1: viewHeight - vtop, x2: viewWidth, y2: viewHeight - vtop, ...getStrokeProps(stroke) })] }), children] }));
 });
-export default function Grid({ model, children, }) {
-    const { viewWidth, viewHeight } = model;
-    return (_jsx("svg", { width: viewWidth, height: viewHeight, style: { background: 'rgba(0,0,0,0.12)' }, children: _jsx(GridRaw, { model: model, children: children }) }));
-}
+export default DotplotGrid;

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

@@ -0,0 +1,6 @@
+import type { DotplotViewModel } from '../model.ts';
+declare const DotplotGridWrapper: ({ model, children, }: {
+    model: DotplotViewModel;
+    children?: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export default DotplotGridWrapper;

package/esm/DotplotView/components/DotplotGridWrapper.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { observer } from 'mobx-react';
+import DotplotGrid from "./DotplotGrid.js";
+const DotplotGridWrapper = observer(function DotplotGridWrapper({ model, children, }) {
+    const { viewWidth, viewHeight } = model;
+    return (_jsx("svg", { width: viewWidth, height: viewHeight, style: { background: 'rgba(0,0,0,0.12)' }, children: _jsx(DotplotGrid, { model: model, children: children }) }));
+});
+export default DotplotGridWrapper;

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

@@ -1,6 +1,6 @@
-import type { DotplotViewModel } from '../model';
+import type { DotplotViewModel } from '../model.ts';
 type Coord = [number, number] | undefined;
-export declare const DotplotTooltipClick: ({ model, mousedown, mousedownClient, xdistance, ydistance, }: {
+declare const DotplotTooltipClick: ({ model, mousedown, mousedownClient, xdistance, ydistance, }: {
     model: DotplotViewModel;
     mousedown: Coord;
     mousedownClient: Coord;

package/esm/DotplotView/components/DotplotTooltipClick.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import BaseTooltip from '@jbrowse/core/ui/BaseTooltip';
 import { observer } from 'mobx-react';
-import { locstr } from './util';
-export const DotplotTooltipClick = observer(function ({ model, mousedown, mousedownClient, xdistance, ydistance, }) {
+import { locstr } from "./util.js";
+const DotplotTooltipClick = observer(function DotplotTooltipClick({ model, mousedown, mousedownClient, xdistance, ydistance, }) {
     const { hview, vview, viewHeight } = model;
-    const x = ((mousedownClient === null || mousedownClient === void 0 ? void 0 : mousedownClient[0]) || 0) - (xdistance < 0 ? 0 : 0);
-    const y = ((mousedownClient === null || mousedownClient === void 0 ? void 0 : mousedownClient[1]) || 0) - (ydistance < 0 ? 0 : 0);
+    const x = (mousedownClient?.[0] || 0) - (xdistance < 0 ? 0 : 0);
+    const y = (mousedownClient?.[1] || 0) - (ydistance < 0 ? 0 : 0);
     return mousedown && Math.abs(xdistance) > 3 && Math.abs(ydistance) > 3 ? (_jsxs(BaseTooltip, { placement: xdistance < 0 ? 'right' : 'left', clientPoint: { x, y }, children: [`x - ${locstr(mousedown[0], hview)}`, _jsx("br", {}), `y - ${locstr(viewHeight - mousedown[1], vview)}`, _jsx("br", {})] })) : null;
 });
 export default DotplotTooltipClick;

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

@@ -1,4 +1,4 @@
-import type { DotplotViewModel } from '../model';
+import type { DotplotViewModel } from '../model.ts';
 type Coord = [number, number] | undefined;
 declare const DotplotTooltipMouseover: ({ model, mouserect, mouserectClient, xdistance, }: {
     model: DotplotViewModel;

package/esm/DotplotView/components/DotplotTooltipMouseover.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import BaseTooltip from '@jbrowse/core/ui/BaseTooltip';
 import { observer } from 'mobx-react';
-import { locstr } from './util';
-const DotplotTooltipMouseover = observer(function ({ model, mouserect, mouserectClient, xdistance, }) {
+import { locstr } from "./util.js";
+const DotplotTooltipMouseover = observer(function DotplotTooltipMouseover({ model, mouserect, mouserectClient, xdistance, }) {
     const { hview, vview, viewHeight } = model;
     return mouserect ? (_jsxs(BaseTooltip, { placement: xdistance < 0 ? 'left' : 'right', clientPoint: mouserectClient
             ? { x: mouserectClient[0], y: mouserectClient[1] }

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

@@ -0,0 +1,15 @@
+import type { DotplotViewModel } from '../model.ts';
+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/esm/DotplotView/components/DotplotTooltips.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Suspense, lazy } from 'react';
+const TooltipWhereClicked = lazy(() => import("./DotplotTooltipClick.js"));
+const TooltipWhereMouseovered = lazy(() => import("./DotplotTooltipMouseover.js"));
+export default function DotplotTooltips({ model, mouseOvered, validSelect, mouserect, mouserectClient, xdistance, mousedown, mousedownClient, ydistance, }) {
+    return (_jsxs(_Fragment, { children: [mouseOvered && validSelect ? (_jsx(Suspense, { fallback: null, children: _jsx(TooltipWhereMouseovered, { model: model, mouserect: mouserect, mouserectClient: mouserectClient, xdistance: xdistance }) })) : null, validSelect ? (_jsx(Suspense, { fallback: null, children: _jsx(TooltipWhereClicked, { model: model, mousedown: mousedown, mousedownClient: mousedownClient, xdistance: xdistance, ydistance: ydistance }) })) : null] }));
+}

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

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