@jbrowse/plugin-dotplot-view 3.6.5 → 3.7.0

package/dist/DotplotView/components/DotplotView.js

@@ -1,54 +1,24 @@
 "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 ui_1 = require("@jbrowse/core/ui");
-const mobx_1 = require("mobx");
 const mobx_react_1 = require("mobx-react");
 const mui_1 = require("tss-react/mui");
 const Axes_1 = require("./Axes");
-const Grid_1 = __importDefault(require("./Grid"));
+const DotplotTooltips_1 = __importDefault(require("./DotplotTooltips"));
 const Header_1 = __importDefault(require("./Header"));
 const ImportForm_1 = __importDefault(require("./ImportForm"));
-const TooltipWhereClicked = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./DotplotTooltipClick'))));
-const TooltipWhereMouseovered = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./DotplotTooltipMouseover'))));
-const blank = { left: 0, top: 0, width: 0, height: 0 };
+const MouseInteractionLayer_1 = __importDefault(require("./MouseInteractionLayer"));
+const SelectionContextMenu_1 = __importDefault(require("./SelectionContextMenu"));
+const useCtrlKeyTracking_1 = require("./hooks/useCtrlKeyTracking");
+const useCursorMode_1 = require("./hooks/useCursorMode");
+const useMouseCoordinates_1 = require("./hooks/useMouseCoordinates");
+const useMouseMoveHandler_1 = require("./hooks/useMouseMoveHandler");
+const useMouseUpHandler_1 = require("./hooks/useMouseUpHandler");
+const useWheelHandler_1 = require("./hooks/useWheelHandler");
 const useStyles = (0, mui_1.makeStyles)()(theme => ({
     spacer: {
         gridColumn: '1/2',
@@ -89,9 +59,6 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
         borderTop: '1px solid #fafafa',
     },
 }));
-function getOffset(coord, rect) {
-    return coord && [coord[0] - rect.left, coord[1] - rect.top];
-}
 const RenderedComponent = (0, mobx_react_1.observer)(({ model }) => {
     const { classes } = useStyles();
     return ((0, jsx_runtime_1.jsx)("div", { className: classes.overlay, children: model.tracks.map(track => {
@@ -101,118 +68,14 @@ const RenderedComponent = (0, mobx_react_1.observer)(({ model }) => {
         }) }));
 });
 const DotplotViewInternal = (0, mobx_react_1.observer)(function ({ model, }) {
-    var _a, _b;
     const { classes } = useStyles();
-    const [mousecurrClient, setMouseCurrClient] = (0, react_1.useState)();
-    const [mousedownClient, setMouseDownClient] = (0, react_1.useState)();
-    const [mouseOvered, setMouseOvered] = (0, react_1.useState)(false);
-    const [mouseupClient, setMouseUpClient] = (0, react_1.useState)();
-    const ref = (0, react_1.useRef)(null);
-    const root = (0, react_1.useRef)(null);
-    const distanceX = (0, react_1.useRef)(0);
-    const distanceY = (0, react_1.useRef)(0);
-    const scheduled = (0, react_1.useRef)(false);
-    const [ctrlKeyWasUsed, setCtrlKeyWasUsed] = (0, react_1.useState)(false);
-    const [ctrlKeyDown, setCtrlKeyDown] = (0, react_1.useState)(false);
-    const svg = ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || blank;
-    const rootRect = ((_b = ref.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect()) || blank;
-    const mousedown = getOffset(mousedownClient, svg);
-    const mousecurr = getOffset(mousecurrClient, svg);
-    const mouseup = getOffset(mouseupClient, svg);
-    const mouserect = mouseup || mousecurr;
-    const mouserectClient = mouseupClient || mousecurrClient;
-    const xdistance = mousedown && mouserect ? mouserect[0] - mousedown[0] : 0;
-    const ydistance = mousedown && mouserect ? mouserect[1] - mousedown[1] : 0;
     const { hview, vview, wheelMode, cursorMode } = model;
-    const validPan = (cursorMode === 'move' && !ctrlKeyWasUsed) ||
-        (cursorMode === 'crosshair' && ctrlKeyWasUsed);
-    const validSelect = (cursorMode === 'move' && ctrlKeyWasUsed) ||
-        (cursorMode === 'crosshair' && !ctrlKeyWasUsed);
-    (0, react_1.useEffect)(() => {
-        function onWheel(event) {
-            event.preventDefault();
-            distanceX.current += event.deltaX;
-            distanceY.current -= event.deltaY;
-            if (!scheduled.current) {
-                scheduled.current = true;
-                window.requestAnimationFrame(() => {
-                    (0, mobx_1.transaction)(() => {
-                        if (wheelMode === 'pan') {
-                            hview.scroll(distanceX.current / 3);
-                            vview.scroll(distanceY.current / 10);
-                        }
-                        else if (wheelMode === 'zoom') {
-                            if (Math.abs(distanceY.current) > Math.abs(distanceX.current) * 2 &&
-                                mousecurr) {
-                                const val = distanceY.current < 0 ? 1.1 : 0.9;
-                                hview.zoomTo(hview.bpPerPx * val, mousecurr[0]);
-                                vview.zoomTo(vview.bpPerPx * val, rootRect.height - mousecurr[1]);
-                            }
-                        }
-                    });
-                    scheduled.current = false;
-                    distanceX.current = 0;
-                    distanceY.current = 0;
-                });
-            }
-        }
-        if (ref.current) {
-            const curr = ref.current;
-            curr.addEventListener('wheel', onWheel);
-            return () => {
-                curr.removeEventListener('wheel', onWheel);
-            };
-        }
-        return () => { };
-    }, [hview, vview, wheelMode, mousecurr, rootRect.height]);
-    (0, react_1.useEffect)(() => {
-        function globalMouseMove(event) {
-            setMouseCurrClient([event.clientX, event.clientY]);
-            if (mousecurrClient && mousedownClient && validPan && !mouseupClient) {
-                hview.scroll(-event.clientX + mousecurrClient[0]);
-                vview.scroll(event.clientY - mousecurrClient[1]);
-            }
-        }
-        window.addEventListener('mousemove', globalMouseMove);
-        return () => {
-            window.removeEventListener('mousemove', globalMouseMove);
-        };
-    }, [validPan, mousecurrClient, mousedownClient, mouseupClient, hview, vview]);
-    (0, react_1.useEffect)(() => {
-        function globalCtrlKeyDown(event) {
-            if (event.metaKey || event.ctrlKey) {
-                setCtrlKeyDown(true);
-            }
-        }
-        function globalCtrlKeyUp(event) {
-            if (!event.metaKey && !event.ctrlKey) {
-                setCtrlKeyDown(false);
-            }
-        }
-        window.addEventListener('keydown', globalCtrlKeyDown);
-        window.addEventListener('keyup', globalCtrlKeyUp);
-        return () => {
-            window.removeEventListener('keydown', globalCtrlKeyDown);
-            window.removeEventListener('keyup', globalCtrlKeyUp);
-        };
-    }, []);
-    (0, react_1.useEffect)(() => {
-        function globalMouseUp(event) {
-            if (Math.abs(xdistance) > 3 && Math.abs(ydistance) > 3 && validSelect) {
-                setMouseUpClient([event.clientX, event.clientY]);
-            }
-            else {
-                setMouseDownClient(undefined);
-            }
-        }
-        if (mousedown && !mouseup) {
-            window.addEventListener('mouseup', globalMouseUp, true);
-            return () => {
-                window.removeEventListener('mouseup', globalMouseUp, true);
-            };
-        }
-        return () => { };
-    }, [validSelect, mousedown, mouseup, xdistance, ydistance]);
+    const { mousecurrClient, mousedownClient, mouseupClient, mouseOvered, setMouseCurrClient, setMouseDownClient, setMouseUpClient, setMouseOvered, ref, root, rootRect, mousedown, mousecurr, mouseup, mouserect, mouserectClient, xdistance, ydistance, } = (0, useMouseCoordinates_1.useMouseCoordinates)();
+    const { ctrlKeyDown, validPan, validSelect, setCtrlKeyWasUsed, setCtrlKeyDown, } = (0, useCursorMode_1.useCursorMode)(cursorMode);
+    (0, useWheelHandler_1.useWheelHandler)(ref, wheelMode, hview, vview, mousecurr, rootRect.height);
+    (0, useMouseMoveHandler_1.useMouseMoveHandler)(mousecurrClient, mousedownClient, mouseupClient, validPan, hview, vview, setMouseCurrClient);
+    (0, useCtrlKeyTracking_1.useCtrlKeyTracking)(setCtrlKeyDown);
+    (0, useMouseUpHandler_1.useMouseUpHandler)(mousedown, mouseup, xdistance, ydistance, validSelect, setMouseUpClient, setMouseDownClient);
     return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(Header_1.default, { model: model, selection: !validSelect || !(mousedown && mouserect)
                     ? undefined
                     : {
@@ -222,45 +85,7 @@ const DotplotViewInternal = (0, mobx_react_1.observer)(function ({ model, }) {
                     setMouseOvered(false);
                 }, onMouseEnter: () => {
                     setMouseOvered(true);
-                }, children: [(0, jsx_runtime_1.jsxs)("div", { className: classes.container, children: [(0, jsx_runtime_1.jsx)(Axes_1.VerticalAxis, { model: model }), (0, jsx_runtime_1.jsx)(Axes_1.HorizontalAxis, { model: model }), (0, jsx_runtime_1.jsxs)("div", { ref: ref, className: classes.content, 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, (0, jsx_runtime_1.jsx)("div", { style: { cursor: ctrlKeyDown ? 'pointer' : cursorMode }, onMouseDown: event => {
-                                            if (event.button === 0) {
-                                                const { clientX, clientY } = event;
-                                                setMouseDownClient([clientX, clientY]);
-                                                setMouseCurrClient([clientX, clientY]);
-                                                setCtrlKeyWasUsed(ctrlKeyDown);
-                                            }
-                                        }, children: (0, jsx_runtime_1.jsx)(Grid_1.default, { model: model, children: validSelect && mousedown && mouserect ? ((0, jsx_runtime_1.jsx)("rect", { fill: "rgba(255,0,0,0.3)", x: Math.min(mouserect[0], mousedown[0]), y: Math.min(mouserect[1], mousedown[1]), width: Math.abs(xdistance), height: Math.abs(ydistance) })) : null }) }), (0, jsx_runtime_1.jsx)("div", { className: classes.spacer })] }), (0, jsx_runtime_1.jsx)(RenderedComponent, { model: model }), (0, jsx_runtime_1.jsx)(ui_1.Menu, { open: Boolean(mouseup), onMenuItemClick: (_, callback) => {
-                                    callback();
-                                    setMouseUpClient(undefined);
-                                    setMouseDownClient(undefined);
-                                }, onClose: () => {
-                                    setMouseUpClient(undefined);
-                                    setMouseDownClient(undefined);
-                                }, anchorReference: "anchorPosition", anchorPosition: mouseupClient
-                                    ? {
-                                        top: mouseupClient[1] + 50,
-                                        left: mouseupClient[0] + 50,
-                                    }
-                                    : undefined, style: { zIndex: 800 }, menuItems: [
-                                    {
-                                        label: 'Zoom in',
-                                        onClick: () => {
-                                            if (mousedown && mouseup) {
-                                                model.zoomInToMouseCoords(mousedown, mouseup);
-                                            }
-                                            setMouseOvered(false);
-                                        },
-                                    },
-                                    {
-                                        label: 'Open linear synteny view',
-                                        onClick: () => {
-                                            if (mousedown && mouseup) {
-                                                model.onDotplotView(mousedown, mouseup);
-                                            }
-                                            setMouseOvered(false);
-                                        },
-                                    },
-                                ] })] }), (0, jsx_runtime_1.jsx)(ui_1.ResizeHandle, { onDrag: n => model.setHeight(model.height + n), className: classes.resizeHandle })] })] }));
+                }, children: [(0, jsx_runtime_1.jsxs)("div", { className: classes.container, children: [(0, jsx_runtime_1.jsx)(Axes_1.VerticalAxis, { model: model }), (0, jsx_runtime_1.jsx)(Axes_1.HorizontalAxis, { model: model }), (0, jsx_runtime_1.jsxs)("div", { ref: ref, className: classes.content, children: [(0, jsx_runtime_1.jsx)(DotplotTooltips_1.default, { model: model, mouseOvered: mouseOvered, validSelect: validSelect, mouserect: mouserect, mouserectClient: mouserectClient, xdistance: xdistance, mousedown: mousedown, mousedownClient: mousedownClient, ydistance: ydistance }), (0, jsx_runtime_1.jsx)(MouseInteractionLayer_1.default, { model: model, ctrlKeyDown: ctrlKeyDown, cursorMode: cursorMode, validSelect: validSelect, mousedown: mousedown, mouserect: mouserect, xdistance: xdistance, ydistance: ydistance, setMouseDownClient: setMouseDownClient, setMouseCurrClient: setMouseCurrClient, setCtrlKeyWasUsed: setCtrlKeyWasUsed }), (0, jsx_runtime_1.jsx)("div", { className: classes.spacer })] }), (0, jsx_runtime_1.jsx)(RenderedComponent, { model: model }), (0, jsx_runtime_1.jsx)(SelectionContextMenu_1.default, { model: model, mouseup: mouseup, mouseupClient: mouseupClient, mousedown: mousedown, setMouseUpClient: setMouseUpClient, setMouseDownClient: setMouseDownClient, setMouseOvered: setMouseOvered })] }), (0, jsx_runtime_1.jsx)(ui_1.ResizeHandle, { onDrag: n => model.setHeight(model.height + n), className: classes.resizeHandle })] })] }));
 });
 const DotplotView = (0, mobx_react_1.observer)(function ({ model }) {
     const { initialized, loading, error } = model;

package/dist/DotplotView/components/DotplotWarnings.js

@@ -44,9 +44,9 @@ const DotplotWarnings = (0, mobx_react_1.observer)(function ({ model, }) {
     const [hide, setHide] = (0, react_1.useState)(false);
     return trackWarnings.length && !hide ? ((0, jsx_runtime_1.jsxs)(material_1.Alert, { severity: "warning", children: ["Warnings during render", ' ', (0, jsx_runtime_1.jsx)(material_1.Button, { onClick: () => {
                     setShown(true);
-                }, children: "More info" }), shown ? ((0, jsx_runtime_1.jsx)(WarningDialog, { trackWarnings: trackWarnings, handleClose: () => {
-                    setShown(false);
-                } })) : null, (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: () => {
+                }, children: "More info" }), shown ? ((0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: null, children: (0, jsx_runtime_1.jsx)(WarningDialog, { trackWarnings: trackWarnings, handleClose: () => {
+                        setShown(false);
+                    } }) })) : null, (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: () => {
                     setHide(true);
                 }, children: "Dismiss" })] })) : null;
 });

package/dist/DotplotView/components/ImportForm/index.js

@@ -39,7 +39,6 @@ function doSubmit({ model, assembly1, assembly2, }) {
                 }
             });
         }
-        model.showAllRegions();
         model.setAssemblyNames(assembly2, assembly1);
     });
 }

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

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

package/dist/DotplotView/components/MinLengthSlider.js

@@ -0,0 +1,44 @@
+"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 react_1 = require("react");
+const material_1 = require("@mui/material");
+const mobx_react_1 = require("mobx-react");
+const mui_1 = require("tss-react/mui");
+const SliderTooltip_1 = __importDefault(require("./SliderTooltip"));
+const useStyles = (0, mui_1.makeStyles)()({
+    container: {
+        display: 'flex',
+        alignItems: 'center',
+        marginLeft: 16,
+        marginRight: 16,
+        minWidth: 150,
+    },
+});
+const MinLengthSlider = (0, mobx_react_1.observer)(function ({ model, }) {
+    var _a, _b;
+    const { classes } = useStyles();
+    const firstDisplay = (_a = model.tracks[0]) === null || _a === void 0 ? void 0 : _a.displays[0];
+    const minAlignmentLength = (_b = firstDisplay === null || firstDisplay === void 0 ? void 0 : firstDisplay.minAlignmentLength) !== null && _b !== void 0 ? _b : 0;
+    const [minLengthValue, setMinLengthValue] = (0, react_1.useState)(Math.log2(Math.max(1, minAlignmentLength)) * 100);
+    (0, react_1.useEffect)(() => {
+        setMinLengthValue(Math.log2(Math.max(1, minAlignmentLength)) * 100);
+    }, [minAlignmentLength]);
+    return ((0, jsx_runtime_1.jsxs)("span", { className: classes.container, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", style: { marginRight: 8 }, children: "Min length:" }), (0, jsx_runtime_1.jsx)(material_1.Slider, { value: minLengthValue, onChange: (_, val) => {
+                    setMinLengthValue(val);
+                }, onChangeCommitted: () => {
+                    const newMinLength = Math.round(2 ** (minLengthValue / 100));
+                    for (const track of model.tracks) {
+                        for (const display of track.displays) {
+                            ;
+                            display.setMinAlignmentLength(newMinLength);
+                        }
+                    }
+                }, min: 0, max: Math.log2(1000000) * 100, valueLabelDisplay: "auto", valueLabelFormat: newValue => Math.round(2 ** (newValue / 100)).toLocaleString(), size: "small", style: { minWidth: 100 }, slots: {
+                    valueLabel: SliderTooltip_1.default,
+                } })] }));
+});
+exports.default = MinLengthSlider;

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

@@ -0,0 +1,17 @@
+import type { DotplotViewModel } from '../model';
+type Coord = [number, number] | undefined;
+interface MouseInteractionLayerProps {
+    model: DotplotViewModel;
+    ctrlKeyDown: boolean;
+    cursorMode: string;
+    validSelect: boolean;
+    mousedown: Coord;
+    mouserect: Coord;
+    xdistance: number;
+    ydistance: number;
+    setMouseDownClient: (coord: Coord) => void;
+    setMouseCurrClient: (coord: Coord) => void;
+    setCtrlKeyWasUsed: (wasUsed: boolean) => void;
+}
+export default function MouseInteractionLayer({ model, ctrlKeyDown, cursorMode, validSelect, mousedown, mouserect, xdistance, ydistance, setMouseDownClient, setMouseCurrClient, setCtrlKeyWasUsed, }: MouseInteractionLayerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/DotplotView/components/MouseInteractionLayer.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = MouseInteractionLayer;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Grid_1 = __importDefault(require("./Grid"));
+function MouseInteractionLayer({ model, ctrlKeyDown, cursorMode, validSelect, mousedown, mouserect, xdistance, ydistance, setMouseDownClient, setMouseCurrClient, setCtrlKeyWasUsed, }) {
+    return ((0, jsx_runtime_1.jsx)("div", { style: { cursor: ctrlKeyDown ? 'pointer' : cursorMode }, onMouseDown: event => {
+            if (event.button === 0) {
+                const { clientX, clientY } = event;
+                setMouseDownClient([clientX, clientY]);
+                setMouseCurrClient([clientX, clientY]);
+                setCtrlKeyWasUsed(ctrlKeyDown);
+            }
+        }, children: (0, jsx_runtime_1.jsx)(Grid_1.default, { model: model, children: validSelect && mousedown && mouserect ? ((0, jsx_runtime_1.jsx)("rect", { fill: "rgba(255,0,0,0.3)", x: Math.min(mouserect[0], mousedown[0]), y: Math.min(mouserect[1], mousedown[1]), width: Math.abs(xdistance), height: Math.abs(ydistance) })) : null }) }));
+}

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

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

package/dist/DotplotView/components/OpacitySlider.js

@@ -0,0 +1,43 @@
+"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 material_1 = require("@mui/material");
+const mobx_react_1 = require("mobx-react");
+const mui_1 = require("tss-react/mui");
+const SliderTooltip_1 = __importDefault(require("./SliderTooltip"));
+const useStyles = (0, mui_1.makeStyles)()({
+    container: {
+        display: 'flex',
+        alignItems: 'center',
+        marginLeft: 16,
+        marginRight: 16,
+        minWidth: 150,
+    },
+});
+const OpacitySlider = (0, mobx_react_1.observer)(function ({ model, }) {
+    var _a, _b;
+    const { classes } = useStyles();
+    const firstDisplay = (_a = model.tracks[0]) === null || _a === void 0 ? void 0 : _a.displays[0];
+    const alpha = (_b = firstDisplay === null || firstDisplay === void 0 ? void 0 : firstDisplay.alpha) !== null && _b !== void 0 ? _b : 1;
+    const exponent = 3;
+    const alphaToSlider = (a) => Math.pow(a, 1 / exponent);
+    const sliderToAlpha = (s) => Math.pow(s, exponent);
+    const sliderValue = alphaToSlider(alpha);
+    const handleAlphaChange = (_event, value) => {
+        const sliderVal = typeof value === 'number' ? value : value[0];
+        const newAlpha = sliderToAlpha(sliderVal);
+        for (const track of model.tracks) {
+            for (const display of track.displays) {
+                ;
+                display.setAlpha(newAlpha);
+            }
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)("span", { className: classes.container, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", style: { marginRight: 8 }, children: "Opacity:" }), (0, jsx_runtime_1.jsx)(material_1.Slider, { value: sliderValue, onChange: handleAlphaChange, min: 0, max: 1, step: 0.01, valueLabelDisplay: "auto", size: "small", style: { minWidth: 100 }, slots: {
+                    valueLabel: SliderTooltip_1.default,
+                }, valueLabelFormat: value => sliderToAlpha(value).toFixed(3) })] }));
+});
+exports.default = OpacitySlider;

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

@@ -0,0 +1,13 @@
+import type { DotplotViewModel } from '../model';
+type Coord = [number, number] | undefined;
+interface SelectionContextMenuProps {
+    model: DotplotViewModel;
+    mouseup: Coord;
+    mouseupClient: Coord;
+    mousedown: Coord;
+    setMouseUpClient: (coord: Coord) => void;
+    setMouseDownClient: (coord: Coord) => void;
+    setMouseOvered: (isOvered: boolean) => void;
+}
+export default function SelectionContextMenu({ model, mouseup, mouseupClient, mousedown, setMouseUpClient, setMouseDownClient, setMouseOvered, }: SelectionContextMenuProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/DotplotView/components/SelectionContextMenu.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = SelectionContextMenu;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ui_1 = require("@jbrowse/core/ui");
+function getSelectionMenuItems(model, mousedown, mouseup, setMouseOvered) {
+    return [
+        {
+            label: 'Zoom in',
+            onClick: () => {
+                if (mousedown && mouseup) {
+                    model.zoomInToMouseCoords(mousedown, mouseup);
+                }
+                setMouseOvered(false);
+            },
+        },
+        {
+            label: 'Open linear synteny view',
+            onClick: () => {
+                if (mousedown && mouseup) {
+                    model.onDotplotView(mousedown, mouseup);
+                }
+                setMouseOvered(false);
+            },
+        },
+    ];
+}
+function SelectionContextMenu({ model, mouseup, mouseupClient, mousedown, setMouseUpClient, setMouseDownClient, setMouseOvered, }) {
+    return ((0, jsx_runtime_1.jsx)(ui_1.Menu, { open: Boolean(mouseup), onMenuItemClick: (_, callback) => {
+            callback();
+            setMouseUpClient(undefined);
+            setMouseDownClient(undefined);
+        }, onClose: () => {
+            setMouseUpClient(undefined);
+            setMouseDownClient(undefined);
+        }, anchorReference: "anchorPosition", anchorPosition: mouseupClient
+            ? {
+                top: mouseupClient[1] + 50,
+                left: mouseupClient[0] + 50,
+            }
+            : undefined, style: { zIndex: 11000 }, menuItems: getSelectionMenuItems(model, mousedown, mouseup, setMouseOvered) }));
+}

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

@@ -0,0 +1,2 @@
+import type { SliderValueLabelProps } from '@mui/material';
+export default function SliderTooltip(props: SliderValueLabelProps): import("react/jsx-runtime").JSX.Element;

package/dist/DotplotView/components/SliderTooltip.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = SliderTooltip;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+function SliderTooltip(props) {
+    const { children, open, value } = props;
+    return ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { open: open, enterTouchDelay: 0, placement: "top", title: value, arrow: true, children: children }));
+}

package/dist/DotplotView/components/hooks/useCtrlKeyTracking.d.ts

@@ -0,0 +1 @@
+export declare function useCtrlKeyTracking(setCtrlKeyDown: (isDown: boolean) => void): void;

package/dist/DotplotView/components/hooks/useCtrlKeyTracking.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCtrlKeyTracking = useCtrlKeyTracking;
+const react_1 = require("react");
+function useCtrlKeyTracking(setCtrlKeyDown) {
+    (0, react_1.useEffect)(() => {
+        function globalCtrlKeyDown(event) {
+            if (event.metaKey || event.ctrlKey) {
+                setCtrlKeyDown(true);
+            }
+        }
+        function globalCtrlKeyUp(event) {
+            if (!event.metaKey && !event.ctrlKey) {
+                setCtrlKeyDown(false);
+            }
+        }
+        window.addEventListener('keydown', globalCtrlKeyDown);
+        window.addEventListener('keyup', globalCtrlKeyUp);
+        return () => {
+            window.removeEventListener('keydown', globalCtrlKeyDown);
+            window.removeEventListener('keyup', globalCtrlKeyUp);
+        };
+    }, [setCtrlKeyDown]);
+}

package/dist/DotplotView/components/hooks/useCursorMode.d.ts

@@ -0,0 +1,7 @@
+export declare function useCursorMode(cursorMode: string): {
+    ctrlKeyDown: boolean;
+    validPan: boolean;
+    validSelect: boolean;
+    setCtrlKeyWasUsed: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    setCtrlKeyDown: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+};

package/dist/DotplotView/components/hooks/useCursorMode.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCursorMode = useCursorMode;
+const react_1 = require("react");
+function useCursorMode(cursorMode) {
+    const [ctrlKeyWasUsed, setCtrlKeyWasUsed] = (0, react_1.useState)(false);
+    const [ctrlKeyDown, setCtrlKeyDown] = (0, react_1.useState)(false);
+    const validPan = (cursorMode === 'move' && !ctrlKeyWasUsed) ||
+        (cursorMode === 'crosshair' && ctrlKeyWasUsed);
+    const validSelect = (cursorMode === 'move' && ctrlKeyWasUsed) ||
+        (cursorMode === 'crosshair' && !ctrlKeyWasUsed);
+    return {
+        ctrlKeyDown,
+        validPan,
+        validSelect,
+        setCtrlKeyWasUsed,
+        setCtrlKeyDown,
+    };
+}

package/dist/DotplotView/components/hooks/useMouseCoordinates.d.ts

@@ -0,0 +1,29 @@
+type Coord = [number, number] | undefined;
+interface Rect {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+}
+export declare function useMouseCoordinates(): {
+    mousecurrClient: Coord;
+    mousedownClient: Coord;
+    mouseupClient: Coord;
+    mouseOvered: boolean;
+    setMouseCurrClient: import("react").Dispatch<import("react").SetStateAction<Coord>>;
+    setMouseDownClient: import("react").Dispatch<import("react").SetStateAction<Coord>>;
+    setMouseUpClient: import("react").Dispatch<import("react").SetStateAction<Coord>>;
+    setMouseOvered: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    ref: import("react").RefObject<HTMLDivElement | null>;
+    root: import("react").RefObject<HTMLDivElement | null>;
+    svg: Rect;
+    rootRect: Rect;
+    mousedown: Coord;
+    mousecurr: Coord;
+    mouseup: Coord;
+    mouserect: Coord;
+    mouserectClient: Coord;
+    xdistance: number;
+    ydistance: number;
+};
+export {};

package/dist/DotplotView/components/hooks/useMouseCoordinates.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMouseCoordinates = useMouseCoordinates;
+const react_1 = require("react");
+const blank = { left: 0, top: 0, width: 0, height: 0 };
+function getOffset(coord, rect) {
+    return coord && [coord[0] - rect.left, coord[1] - rect.top];
+}
+function useMouseCoordinates() {
+    const [mousecurrClient, setMouseCurrClient] = (0, react_1.useState)();
+    const [mousedownClient, setMouseDownClient] = (0, react_1.useState)();
+    const [mouseupClient, setMouseUpClient] = (0, react_1.useState)();
+    const [mouseOvered, setMouseOvered] = (0, react_1.useState)(false);
+    const [rect, setRect] = (0, react_1.useState)(blank);
+    const ref = (0, react_1.useRef)(null);
+    const root = (0, react_1.useRef)(null);
+    (0, react_1.useLayoutEffect)(() => {
+        if (ref.current) {
+            setRect(ref.current.getBoundingClientRect());
+        }
+    }, [mousecurrClient, mousedownClient, mouseupClient]);
+    const svg = rect;
+    const rootRect = rect;
+    const mousedown = getOffset(mousedownClient, rect);
+    const mousecurr = getOffset(mousecurrClient, rect);
+    const mouseup = getOffset(mouseupClient, rect);
+    const mouserect = mouseup || mousecurr;
+    const mouserectClient = mouseupClient || mousecurrClient;
+    const xdistance = mousedown && mouserect ? mouserect[0] - mousedown[0] : 0;
+    const ydistance = mousedown && mouserect ? mouserect[1] - mousedown[1] : 0;
+    return {
+        mousecurrClient,
+        mousedownClient,
+        mouseupClient,
+        mouseOvered,
+        setMouseCurrClient,
+        setMouseDownClient,
+        setMouseUpClient,
+        setMouseOvered,
+        ref,
+        root,
+        svg,
+        rootRect,
+        mousedown,
+        mousecurr,
+        mouseup,
+        mouserect,
+        mouserectClient,
+        xdistance,
+        ydistance,
+    };
+}

package/dist/DotplotView/components/hooks/useMouseMoveHandler.d.ts

@@ -0,0 +1,6 @@
+type Coord = [number, number] | undefined;
+interface View {
+    scroll: (distance: number) => void;
+}
+export declare function useMouseMoveHandler(mousecurrClient: Coord, mousedownClient: Coord, mouseupClient: Coord, validPan: boolean, hview: View, vview: View, setMouseCurrClient: (coord: Coord) => void): void;
+export {};