@jbrowse/plugin-dotplot-view 3.6.4 → 3.7.0

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

@@ -0,0 +1,21 @@
+import { useEffect } from 'react';
+export function useCtrlKeyTracking(setCtrlKeyDown) {
+    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/esm/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/esm/DotplotView/components/hooks/useCursorMode.js

@@ -0,0 +1,16 @@
+import { useState } from 'react';
+export function useCursorMode(cursorMode) {
+    const [ctrlKeyWasUsed, setCtrlKeyWasUsed] = useState(false);
+    const [ctrlKeyDown, setCtrlKeyDown] = 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/esm/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/esm/DotplotView/components/hooks/useMouseCoordinates.js

@@ -0,0 +1,49 @@
+import { useLayoutEffect, useRef, useState } from '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];
+}
+export function useMouseCoordinates() {
+    const [mousecurrClient, setMouseCurrClient] = useState();
+    const [mousedownClient, setMouseDownClient] = useState();
+    const [mouseupClient, setMouseUpClient] = useState();
+    const [mouseOvered, setMouseOvered] = useState(false);
+    const [rect, setRect] = useState(blank);
+    const ref = useRef(null);
+    const root = useRef(null);
+    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/esm/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 {};

package/esm/DotplotView/components/hooks/useMouseMoveHandler.js

@@ -0,0 +1,24 @@
+import { useEffect } from 'react';
+export function useMouseMoveHandler(mousecurrClient, mousedownClient, mouseupClient, validPan, hview, vview, setMouseCurrClient) {
+    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,
+        setMouseCurrClient,
+    ]);
+}

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

@@ -0,0 +1,3 @@
+type Coord = [number, number] | undefined;
+export declare function useMouseUpHandler(mousedown: Coord, mouseup: Coord, xdistance: number, ydistance: number, validSelect: boolean, setMouseUpClient: (coord: Coord) => void, setMouseDownClient: (coord: Coord) => void): void;
+export {};

package/esm/DotplotView/components/hooks/useMouseUpHandler.js

@@ -0,0 +1,28 @@
+import { useEffect } from 'react';
+export function useMouseUpHandler(mousedown, mouseup, xdistance, ydistance, validSelect, setMouseUpClient, setMouseDownClient) {
+    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,
+        setMouseUpClient,
+        setMouseDownClient,
+    ]);
+}

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

@@ -0,0 +1,8 @@
+type Coord = [number, number] | undefined;
+interface View {
+    scroll: (distance: number) => void;
+    zoomTo: (bpPerPx: number, position: number) => void;
+    bpPerPx: number;
+}
+export declare function useWheelHandler(ref: React.RefObject<HTMLDivElement | null>, wheelMode: string, hview: View, vview: View, mousecurr: Coord, rootRectHeight: number): void;
+export {};

package/esm/DotplotView/components/hooks/useWheelHandler.js

@@ -0,0 +1,44 @@
+import { useEffect, useRef } from 'react';
+import { transaction } from 'mobx';
+export function useWheelHandler(ref, wheelMode, hview, vview, mousecurr, rootRectHeight) {
+    const distanceX = useRef(0);
+    const distanceY = useRef(0);
+    const scheduled = useRef(false);
+    useEffect(() => {
+        function onWheel(event) {
+            event.preventDefault();
+            distanceX.current += event.deltaX;
+            distanceY.current -= event.deltaY;
+            if (!scheduled.current) {
+                scheduled.current = true;
+                window.requestAnimationFrame(() => {
+                    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, rootRectHeight - 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, rootRectHeight, ref]);
+}

package/esm/DotplotView/components/util.js

@@ -28,9 +28,7 @@ export function getBlockLabelKeysToHide(blocks, length, viewOffsetPx) {
 export function chooseGridPitch(scale, minMajorPitchPx, minMinorPitchPx) {
     scale = Math.abs(scale);
     const minMajorPitchBp = minMajorPitchPx * scale;
-    const majorMagnitude = +Number(minMajorPitchBp)
-        .toExponential()
-        .split(/e/i)[1];
+    const majorMagnitude = +minMajorPitchBp.toExponential().split(/e/i)[1];
     let majorPitch = 10 ** majorMagnitude;
     while (majorPitch < minMajorPitchBp) {
         majorPitch *= 2;

package/esm/DotplotView/model.d.ts

@@ -390,6 +390,7 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
     setError(e: unknown): void;
     zoomOut(): void;
     zoomIn(): void;
+} & {
     activateTrackSelector(): import("@jbrowse/core/util").Widget;
     showTrack(trackId: string, initialSnapshot?: {}): void;
     hideTrack(trackId: string): number;
@@ -408,6 +409,10 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
         reversed?: boolean;
     }[] | undefined;
     zoomInToMouseCoords(mousedown: Coord, mouseup: Coord): void;
+    calculateBorders(): {
+        borderX: number;
+        borderY: number;
+    };
     showAllRegions(): void;
     onDotplotView(mousedown: Coord, mouseup: Coord): void;
 } & {

package/esm/DotplotView/model.js

@@ -172,6 +172,8 @@ export default function stateModelFactory(pm) {
             self.hview.zoomIn();
             self.vview.zoomIn();
         },
+    }))
+        .actions(self => ({
         activateTrackSelector() {
             if (self.trackSelectorType === 'hierarchical') {
                 const session = getSession(self);
@@ -249,7 +251,31 @@ export default function stateModelFactory(pm) {
                 self.vview.moveTo(y2, y1);
             }
         },
+        calculateBorders() {
+            if (self.volatileWidth === undefined) {
+                return { borderX: self.borderX, borderY: self.borderY };
+            }
+            const { vview, hview, viewHeight, viewWidth } = self;
+            const padding = 40;
+            const vblocks = vview.dynamicBlocks.contentBlocks;
+            const hblocks = hview.dynamicBlocks.contentBlocks;
+            const hoffset = hview.offsetPx;
+            const voffset = vview.offsetPx;
+            const vhide = getBlockLabelKeysToHide(vblocks, viewHeight, voffset);
+            const hhide = getBlockLabelKeysToHide(hblocks, viewWidth, hoffset);
+            const by = pxWidthForBlocks(hblocks, vview.bpPerPx, hhide);
+            const bx = pxWidthForBlocks(vblocks, hview.bpPerPx, vhide);
+            return {
+                borderX: Math.max(bx + padding, 50),
+                borderY: Math.max(by + padding, 50),
+            };
+        },
         showAllRegions() {
+            self.hview.zoomTo(self.hview.maxBpPerPx);
+            self.vview.zoomTo(self.vview.maxBpPerPx);
+            const { borderX, borderY } = this.calculateBorders();
+            self.setBorderX(borderX);
+            self.setBorderY(borderY);
             self.hview.zoomTo(self.hview.maxBpPerPx);
             self.vview.zoomTo(self.vview.maxBpPerPx);
             self.vview.center();
@@ -343,17 +369,15 @@ export default function stateModelFactory(pm) {
                     !self.assembliesInitialized) {
                     return;
                 }
-                if (self.hview.displayedRegions.length > 0 &&
-                    self.vview.displayedRegions.length > 0) {
+                const { hview, assemblyNames, vview } = self;
+                if (hview.displayedRegions.length &&
+                    vview.displayedRegions.length) {
                     return;
                 }
-                const views = [self.hview, self.vview];
                 transaction(() => {
-                    for (const [index, name] of self.assemblyNames.entries()) {
-                        const assembly = session.assemblyManager.get(name);
-                        const view = views[index];
-                        view.setDisplayedRegions((assembly === null || assembly === void 0 ? void 0 : assembly.regions) || []);
-                    }
+                    var _a, _b;
+                    hview.setDisplayedRegions(((_a = session.assemblyManager.get(assemblyNames[0])) === null || _a === void 0 ? void 0 : _a.regions) || []);
+                    vview.setDisplayedRegions(((_b = session.assemblyManager.get(assemblyNames[1])) === null || _b === void 0 ? void 0 : _b.regions) || []);
                     self.showAllRegions();
                 });
             }, { delay: 1000 }));
@@ -361,18 +385,9 @@ export default function stateModelFactory(pm) {
                 if (self.volatileWidth === undefined) {
                     return;
                 }
-                const { vview, hview, viewHeight, viewWidth } = self;
-                const padding = 40;
-                const vblocks = vview.dynamicBlocks.contentBlocks;
-                const hblocks = hview.dynamicBlocks.contentBlocks;
-                const hoffset = hview.offsetPx;
-                const voffset = vview.offsetPx;
-                const vhide = getBlockLabelKeysToHide(vblocks, viewHeight, voffset);
-                const hhide = getBlockLabelKeysToHide(hblocks, viewWidth, hoffset);
-                const by = pxWidthForBlocks(hblocks, vview.bpPerPx, hhide);
-                const bx = pxWidthForBlocks(vblocks, hview.bpPerPx, vhide);
-                self.setBorderY(Math.max(by + padding, 50));
-                self.setBorderX(Math.max(bx + padding, 50));
+                const { borderX, borderY } = self.calculateBorders();
+                self.setBorderX(borderX);
+                self.setBorderY(borderY);
             }));
         },
         squareView() {

package/esm/ServerSideRenderedBlockContent.js

@@ -1,7 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import { LoadingEllipses } from '@jbrowse/core/ui';
-import { Typography } from '@mui/material';
+import { ErrorMessage, LoadingEllipses } from '@jbrowse/core/ui';
 import { observer } from 'mobx-react';
 import { makeStyles } from 'tss-react/mui';
 const useStyles = makeStyles()(theme => {
@@ -17,33 +15,18 @@ const useStyles = makeStyles()(theme => {
             backgroundColor: bg,
             padding: '10px',
         },
-        blockError: {
-            backgroundColor: bg,
-            padding: '10px',
-            color: 'red',
-        },
     };
 });
 function LoadingMessage() {
-    const [shown, setShown] = useState(false);
     const { classes } = useStyles();
-    useEffect(() => {
-        const timeout = setTimeout(() => {
-            setShown(true);
-        }, 300);
-        return () => {
-            clearTimeout(timeout);
-        };
-    }, []);
-    return shown ? (_jsx("div", { className: classes.loading, children: _jsx(LoadingEllipses, {}) })) : null;
+    return (_jsx("div", { className: classes.loading, children: _jsx(LoadingEllipses, {}) }));
 }
 function BlockMessage({ messageText }) {
     const { classes } = useStyles();
-    return (_jsx("div", { className: classes.blockMessage, children: _jsx(Typography, { children: messageText }) }));
+    return (_jsx("div", { className: classes.loading, children: _jsx(LoadingEllipses, { message: messageText }) }));
 }
 function BlockError({ error }) {
-    const { classes } = useStyles();
-    return (_jsx("div", { className: classes.blockError, children: _jsx(Typography, { children: `${error}` }) }));
+    return _jsx(ErrorMessage, { error: error });
 }
 const ServerSideRenderedDotplotContent = observer(function ({ model, style, }) {
     if (model.error) {

package/esm/index.js

@@ -2,6 +2,7 @@ import Plugin from '@jbrowse/core/Plugin';
 import { isAbstractMenuManager } from '@jbrowse/core/util';
 import TimelineIcon from '@mui/icons-material/Timeline';
 import ComparativeRenderer from './ComparativeRenderer';
+import DiagonalizeDotplotRpc from './DiagonalizeDotplotRpc';
 import DotplotDisplayF from './DotplotDisplay';
 import DotplotReadVsRefMenuItem from './DotplotReadVsRef';
 import DotplotRendererF from './DotplotRenderer';
@@ -19,6 +20,7 @@ export default class DotplotPlugin extends Plugin {
         LaunchDotplotViewF(pluginManager);
         DotplotReadVsRefMenuItem(pluginManager);
         pluginManager.addRpcMethod(() => new ComparativeRenderer(pluginManager));
+        pluginManager.addRpcMethod(() => new DiagonalizeDotplotRpc(pluginManager));
     }
     configure(pluginManager) {
         if (isAbstractMenuManager(pluginManager.rootModel)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-dotplot-view",
-  "version": "3.6.4",
+  "version": "3.7.0",
   "description": "JBrowse 2 dotplot view",
   "keywords": [
     "jbrowse",
@@ -36,8 +36,8 @@
     "clean": "rimraf dist esm *.tsbuildinfo"
   },
   "dependencies": {
-    "@jbrowse/core": "^3.6.4",
-    "@jbrowse/plugin-alignments": "^3.6.4",
+    "@jbrowse/core": "^3.7.0",
+    "@jbrowse/plugin-alignments": "^3.7.0",
     "@mui/icons-material": "^7.0.0",
     "@mui/material": "^7.0.0",
     "@mui/x-data-grid": "^8.0.0",
@@ -59,5 +59,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "3db8e50ce2bd9c081efbf6c2e7ae5f342380a25a"
+  "gitHead": "85bdd0d58286b7adbfd408146b15847676317635"
 }