@jbrowse/plugin-dotplot-view 3.6.5 → 4.0.0

package/esm/DotplotView/components/MinLengthSlider.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { toLocale } from '@jbrowse/core/util';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
+import { Slider, Typography } from '@mui/material';
+import { observer } from 'mobx-react';
+import SliderTooltip from "./SliderTooltip.js";
+const useStyles = makeStyles()({
+    container: {
+        display: 'flex',
+        alignItems: 'center',
+        marginLeft: 16,
+        marginRight: 16,
+        minWidth: 150,
+    },
+});
+const MinLengthSlider = observer(function MinLengthSlider({ model, }) {
+    const { classes } = useStyles();
+    const firstDisplay = model.tracks[0]?.displays[0];
+    const minAlignmentLength = firstDisplay?.minAlignmentLength ?? 0;
+    const [minLengthValue, setMinLengthValue] = useState(Math.log2(Math.max(1, minAlignmentLength)) * 100);
+    useEffect(() => {
+        setMinLengthValue(Math.log2(Math.max(1, minAlignmentLength)) * 100);
+    }, [minAlignmentLength]);
+    return (_jsxs("span", { className: classes.container, children: [_jsx(Typography, { variant: "body2", style: { marginRight: 8 }, children: "Min length:" }), _jsx(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 => toLocale(Math.round(2 ** (newValue / 100))), size: "small", style: { minWidth: 100 }, slots: {
+                    valueLabel: SliderTooltip,
+                } })] }));
+});
+export default MinLengthSlider;

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

@@ -0,0 +1,17 @@
+import type { DotplotViewModel } from '../model.ts';
+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;
+}
+declare const MouseInteractionLayer: ({ model, ctrlKeyDown, cursorMode, validSelect, mousedown, mouserect, xdistance, ydistance, setMouseDownClient, setMouseCurrClient, setCtrlKeyWasUsed, }: MouseInteractionLayerProps) => import("react/jsx-runtime").JSX.Element;
+export default MouseInteractionLayer;

package/esm/DotplotView/components/MouseInteractionLayer.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { observer } from 'mobx-react';
+import DotplotGridWrapper from "./DotplotGridWrapper.js";
+const MouseInteractionLayer = observer(function MouseInteractionLayer({ model, ctrlKeyDown, cursorMode, validSelect, mousedown, mouserect, xdistance, ydistance, setMouseDownClient, setMouseCurrClient, setCtrlKeyWasUsed, }) {
+    return (_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: _jsx(DotplotGridWrapper, { model: model, children: validSelect && mousedown && mouserect ? (_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 }) }));
+});
+export default MouseInteractionLayer;

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

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

package/esm/DotplotView/components/OpacitySlider.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { makeStyles } from '@jbrowse/core/util/tss-react';
+import { Slider, Typography } from '@mui/material';
+import { observer } from 'mobx-react';
+import SliderTooltip from "./SliderTooltip.js";
+const useStyles = makeStyles()({
+    container: {
+        display: 'flex',
+        alignItems: 'center',
+        marginLeft: 16,
+        marginRight: 16,
+        minWidth: 150,
+    },
+});
+const OpacitySlider = observer(function OpacitySlider({ model, }) {
+    const { classes } = useStyles();
+    const firstDisplay = model.tracks[0]?.displays[0];
+    const alpha = firstDisplay?.alpha ?? 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 (_jsxs("span", { className: classes.container, children: [_jsx(Typography, { variant: "body2", style: { marginRight: 8 }, children: "Opacity:" }), _jsx(Slider, { value: sliderValue, onChange: handleAlphaChange, min: 0, max: 1, step: 0.01, valueLabelDisplay: "auto", size: "small", style: { minWidth: 100 }, slots: {
+                    valueLabel: SliderTooltip,
+                }, valueLabelFormat: value => sliderToAlpha(value).toFixed(3) })] }));
+});
+export default OpacitySlider;

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

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

package/esm/DotplotView/components/PanButtons.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { makeStyles } from '@jbrowse/core/util/tss-react';
 import ArrowDropDown from '@mui/icons-material/ArrowDropDown';
 import ArrowDropUp from '@mui/icons-material/ArrowDropUp';
 import ArrowLeft from '@mui/icons-material/ArrowLeft';
@@ -7,7 +8,6 @@ import ZoomIn from '@mui/icons-material/ZoomIn';
 import ZoomOut from '@mui/icons-material/ZoomOut';
 import { IconButton, Paper } from '@mui/material';
 import { observer } from 'mobx-react';
-import { makeStyles } from 'tss-react/mui';
 const useStyles = makeStyles()({
     dpad: {
         display: 'grid',

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

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

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Menu } from '@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);
+            },
+        },
+    ];
+}
+export default function SelectionContextMenu({ model, mouseup, mouseupClient, mousedown, setMouseUpClient, setMouseDownClient, setMouseOvered, }) {
+    return (_jsx(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/esm/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/esm/DotplotView/components/SliderTooltip.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tooltip } from '@mui/material';
+export default function SliderTooltip(props) {
+    const { children, open, value } = props;
+    return (_jsx(Tooltip, { open: open, enterTouchDelay: 0, placement: "top", title: value, arrow: true, children: children }));
+}

package/esm/DotplotView/components/WarningDialog.js

@@ -2,10 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getConf } from '@jbrowse/core/configuration';
 import { Dialog } from '@jbrowse/core/ui';
 import { measureGridWidth } from '@jbrowse/core/util';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { DialogContent, DialogContentText } from '@mui/material';
 import { DataGrid } from '@mui/x-data-grid';
 import { observer } from 'mobx-react';
-import { makeStyles } from 'tss-react/mui';
 const useStyles = makeStyles()({
     content: {
         minWidth: 600,

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

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

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.d.ts

@@ -1,4 +1,4 @@
-import type { Dotplot1DViewModel } from '../model';
+import type { Dotplot1DViewModel } from '../model.ts';
 import type { BaseBlock } from '@jbrowse/core/util/blockTypes';
 export declare function locstr(px: number, view: Dotplot1DViewModel, includeAsm?: boolean): string;
 export declare function getBlockLabelKeysToHide(blocks: BaseBlock[], length: number, viewOffsetPx: number): Set<string>;

package/esm/DotplotView/components/util.js

@@ -1,9 +1,10 @@
+import { toLocale } from '@jbrowse/core/util';
 export function locstr(px, view, includeAsm = true) {
     const { assemblyName, refName, start, offset, oob } = view.pxToBp(px);
     const coord = Math.floor(start + offset);
     return oob
         ? 'out of bounds'
-        : `${includeAsm ? `{${assemblyName}}` : ''}${refName}:${coord.toLocaleString('en-US')}`;
+        : `${includeAsm ? `{${assemblyName}}` : ''}${refName}:${toLocale(coord)}`;
 }
 export function getBlockLabelKeysToHide(blocks, length, viewOffsetPx) {
     const blockLabelKeysToHide = new Set();
@@ -12,15 +13,26 @@ export function getBlockLabelKeysToHide(blocks, length, viewOffsetPx) {
         const blen = b.end - b.start;
         return blen - alen;
     });
-    const positions = Array.from({ length: Math.round(length) });
+    const occupiedPositions = new Set();
     for (const { key, offsetPx } of sortedBlocks) {
         const y = Math.round(length - offsetPx + viewOffsetPx);
-        const labelBounds = [Math.max(y - 12, 0), y];
-        if (y === 0 || positions.slice(...labelBounds).some(Boolean)) {
+        const labelStart = Math.max(y - 12, 0);
+        let hasOverlap = y === 0;
+        if (!hasOverlap) {
+            for (let i = labelStart; i < y; i++) {
+                if (occupiedPositions.has(i)) {
+                    hasOverlap = true;
+                    break;
+                }
+            }
+        }
+        if (hasOverlap) {
             blockLabelKeysToHide.add(key);
         }
         else {
-            positions.fill(true, ...labelBounds);
+            for (let i = labelStart; i < y; i++) {
+                occupiedPositions.add(i);
+            }
         }
     }
     return blockLabelKeysToHide;
@@ -28,9 +40,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/index.js

@@ -1,13 +1,13 @@
 import { lazy } from 'react';
 import ViewType from '@jbrowse/core/pluggableElementTypes/ViewType';
-import stateModelFactory from './model';
+import stateModelFactory from "./model.js";
 export default function DotplotViewF(pluginManager) {
     pluginManager.addViewType(() => {
         return new ViewType({
             name: 'DotplotView',
             displayName: 'Dotplot view',
             stateModel: stateModelFactory(pluginManager),
-            ReactComponent: lazy(() => import('./components/DotplotView')),
+            ReactComponent: lazy(() => import("./components/DotplotView.js")),
         });
     });
 }