@jbrowse/plugin-dotplot-view 2.15.0 → 2.15.1

package/esm/DotplotRenderer/DotplotRenderer.d.ts

@@ -27,14 +27,6 @@ interface DotplotRenderArgs extends RenderArgs {
 export default class DotplotRenderer extends ComparativeRenderer {
     supportsSVG: boolean;
     renameRegionsIfNeeded(args: DotplotRenderArgs): Promise<DotplotRenderArgs>;
-    drawDotplot(ctx: CanvasRenderingContext2D, props: DotplotRenderArgsDeserialized & {
-        views: Dotplot1DViewModel[];
-    }): Promise<{
-        warnings: {
-            message: string;
-            effect: string;
-        }[];
-    }>;
     render(renderProps: DotplotRenderArgsDeserialized): Promise<{
         height: number;
         width: number;
@@ -52,7 +44,7 @@ export default class DotplotRenderer extends ComparativeRenderer {
         offsetY: number;
         bpPerPxX: number;
         bpPerPxY: number;
-        reactElement: import("react").JSX.Element;
+        reactElement: React.JSX.Element;
         html?: string;
     } | {
         height: number;

package/esm/DotplotRenderer/DotplotRenderer.js

@@ -1,22 +1,7 @@
-import { readConfObject, } from '@jbrowse/core/configuration';
 import { renameRegionsIfNeeded, renderToAbstractCanvas, } from '@jbrowse/core/util';
-import { bpToPx } from '@jbrowse/core/util/Base1DUtils';
-import { getSnapshot } from 'mobx-state-tree';
 import ComparativeRenderer from '@jbrowse/core/pluggableElementTypes/renderers/ComparativeServerSideRendererType';
-import { MismatchParser } from '@jbrowse/plugin-alignments';
 // locals
 import { Dotplot1DView } from '../DotplotView/model';
-import { createJBrowseTheme } from '@jbrowse/core/ui';
-const { parseCigar } = MismatchParser;
-const r = 'fell outside of range due to CIGAR string';
-const lt = '(less than min coordinate of feature)';
-const gt = '(greater than max coordinate of feature)';
-const fudgeFactor = 1; // allow 1px fuzzyness before warn
-function drawCir(ctx, x, y, r = 1) {
-    ctx.beginPath();
-    ctx.arc(x, y, r / 2, 0, 2 * Math.PI);
-    ctx.fill();
-}
 export default class DotplotRenderer extends ComparativeRenderer {
     constructor() {
         super(...arguments);
@@ -42,204 +27,6 @@ export default class DotplotRenderer extends ComparativeRenderer {
         view.vview.displayedRegions = await process(view.vview.displayedRegions);
         return args;
     }
-    async drawDotplot(ctx, props) {
-        var _a, _b;
-        const { config, views, height, drawCigar, theme } = props;
-        const color = readConfObject(config, 'color');
-        const posColor = readConfObject(config, 'posColor');
-        const negColor = readConfObject(config, 'negColor');
-        const colorBy = readConfObject(config, 'colorBy');
-        const lineWidth = readConfObject(config, 'lineWidth');
-        const thresholds = readConfObject(config, 'thresholds');
-        const palette = readConfObject(config, 'thresholdsPalette');
-        const isCallback = config.color.isCallback;
-        const hview = views[0];
-        const vview = views[1];
-        const db1 = (_a = hview.dynamicBlocks.contentBlocks[0]) === null || _a === void 0 ? void 0 : _a.offsetPx;
-        const db2 = (_b = vview.dynamicBlocks.contentBlocks[0]) === null || _b === void 0 ? void 0 : _b.offsetPx;
-        const warnings = [];
-        ctx.lineWidth = lineWidth;
-        // we operate on snapshots of these attributes of the hview/vview because
-        // it is significantly faster than accessing the mobx objects
-        const { bpPerPx: hBpPerPx } = hview;
-        const { bpPerPx: vBpPerPx } = vview;
-        function clampWithWarnX(num, min, max, feature) {
-            const strand = feature.get('strand') || 1;
-            if (strand === -1) {
-                ;
-                [max, min] = [min, max];
-            }
-            if (num < min - fudgeFactor) {
-                let start = feature.get('start');
-                let end = feature.get('end');
-                const refName = feature.get('refName');
-                if (strand === -1) {
-                    ;
-                    [end, start] = [start, end];
-                }
-                warnings.push({
-                    message: `feature at (X ${refName}:${start}-${end}) ${r} ${lt}`,
-                    effect: 'clipped the feature',
-                });
-                return min;
-            }
-            if (num > max + fudgeFactor) {
-                const strand = feature.get('strand') || 1;
-                const start = strand === 1 ? feature.get('start') : feature.get('end');
-                const end = strand === 1 ? feature.get('end') : feature.get('start');
-                const refName = feature.get('refName');
-                warnings.push({
-                    message: `feature at (X ${refName}:${start}-${end}) ${r} ${gt}`,
-                    effect: 'clipped the feature',
-                });
-                return max;
-            }
-            return num;
-        }
-        function clampWithWarnY(num, min, max, feature) {
-            if (num < min - fudgeFactor) {
-                const mate = feature.get('mate');
-                const { refName, start, end } = mate;
-                warnings.push({
-                    message: `feature at (Y ${refName}:${start}-${end}) ${r} ${lt}`,
-                    effect: 'clipped the feature',
-                });
-                return min;
-            }
-            if (num > max + fudgeFactor) {
-                const mate = feature.get('mate');
-                const { refName, start, end } = mate;
-                warnings.push({
-                    message: `feature at (Y ${refName}:${start}-${end}) ${r} ${gt}`,
-                    effect: 'clipped the feature',
-                });
-                return max;
-            }
-            return num;
-        }
-        const hsnap = {
-            ...getSnapshot(hview),
-            staticBlocks: hview.staticBlocks,
-            width: hview.width,
-        };
-        const vsnap = {
-            ...getSnapshot(vview),
-            staticBlocks: vview.staticBlocks,
-            width: vview.width,
-        };
-        const t = createJBrowseTheme(theme);
-        for (const feature of hview.features || []) {
-            const strand = feature.get('strand') || 1;
-            const start = strand === 1 ? feature.get('start') : feature.get('end');
-            const end = strand === 1 ? feature.get('end') : feature.get('start');
-            const refName = feature.get('refName');
-            const mate = feature.get('mate');
-            const mateRef = mate.refName;
-            let r = 'black';
-            if (colorBy === 'identity') {
-                const identity = feature.get('identity');
-                for (let i = 0; i < thresholds.length; i++) {
-                    if (identity > +thresholds[i]) {
-                        r = palette[i] || 'black';
-                        break;
-                    }
-                }
-            }
-            else if (colorBy === 'meanQueryIdentity') {
-                r = `hsl(${feature.get('meanScore') * 200},100%,40%)`;
-            }
-            else if (colorBy === 'mappingQuality') {
-                r = `hsl(${feature.get('mappingQual')},100%,40%)`;
-            }
-            else if (colorBy === 'strand') {
-                r = strand === -1 ? negColor : posColor;
-            }
-            else if (colorBy === 'default') {
-                r = isCallback
-                    ? readConfObject(config, 'color', { feature })
-                    : color === '#f0f'
-                        ? t.palette.text.primary
-                        : color;
-            }
-            ctx.fillStyle = r;
-            ctx.strokeStyle = r;
-            const b10 = bpToPx({ self: hsnap, refName, coord: start });
-            const b20 = bpToPx({ self: hsnap, refName, coord: end });
-            const e10 = bpToPx({ self: vsnap, refName: mateRef, coord: mate.start });
-            const e20 = bpToPx({ self: vsnap, refName: mateRef, coord: mate.end });
-            if (b10 !== undefined &&
-                b20 !== undefined &&
-                e10 !== undefined &&
-                e20 !== undefined) {
-                const b1 = b10.offsetPx - db1;
-                const b2 = b20.offsetPx - db1;
-                const e1 = e10.offsetPx - db2;
-                const e2 = e20.offsetPx - db2;
-                if (Math.abs(b1 - b2) <= 4 && Math.abs(e1 - e2) <= 4) {
-                    drawCir(ctx, b1, height - e1, lineWidth);
-                }
-                else {
-                    let currX = b1;
-                    let currY = e1;
-                    const cigar = feature.get('CIGAR');
-                    if (drawCigar && cigar) {
-                        const cigarOps = parseCigar(cigar);
-                        ctx.beginPath();
-                        ctx.moveTo(currX, height - currY);
-                        let lastDrawnX = currX;
-                        let lastDrawnY = currX;
-                        for (let i = 0; i < cigarOps.length; i += 2) {
-                            const val = +cigarOps[i];
-                            const op = cigarOps[i + 1];
-                            if (op === 'M' || op === '=' || op === 'X') {
-                                currX += (val / hBpPerPx) * strand;
-                                currY += val / vBpPerPx;
-                            }
-                            else if (op === 'D' || op === 'N') {
-                                currX += (val / hBpPerPx) * strand;
-                            }
-                            else if (op === 'I') {
-                                currY += val / vBpPerPx;
-                            }
-                            currX = clampWithWarnX(currX, b1, b2, feature);
-                            currY = clampWithWarnY(currY, e1, e2, feature);
-                            // only draw a line segment if it is bigger than 0.5px
-                            if (Math.abs(currX - lastDrawnX) > 0.5 ||
-                                Math.abs(currY - lastDrawnY) > 0.5) {
-                                ctx.lineTo(currX, height - currY);
-                                lastDrawnX = currX;
-                                lastDrawnY = currY;
-                            }
-                        }
-                        ctx.stroke();
-                    }
-                    else {
-                        ctx.beginPath();
-                        ctx.moveTo(b1, height - e1);
-                        ctx.lineTo(b2, height - e2);
-                        ctx.stroke();
-                    }
-                }
-            }
-            else {
-                if (warnings.length <= 5) {
-                    if (b10 === undefined || b20 === undefined) {
-                        warnings.push({
-                            message: `feature at (X ${refName}:${start}-${end}) not plotted, fell outside of range`,
-                            effect: 'feature not rendered',
-                        });
-                    }
-                    else {
-                        warnings.push({
-                            message: `feature at (Y ${mateRef}:${mate.start}-${mate.end}) not plotted, fell outside of range`,
-                            effect: 'feature not rendered',
-                        });
-                    }
-                }
-            }
-        }
-        return { warnings };
-    }
     async render(renderProps) {
         var _a, _b;
         const { width, height, view: { hview, vview }, } = renderProps;
@@ -255,7 +42,8 @@ export default class DotplotRenderer extends ComparativeRenderer {
             regions: target.dynamicBlocks.contentBlocks,
         });
         target.setFeatures(feats);
-        const ret = await renderToAbstractCanvas(width, height, renderProps, ctx => this.drawDotplot(ctx, { ...renderProps, views }));
+        const { drawDotplot } = await import('./drawDotplot');
+        const ret = await renderToAbstractCanvas(width, height, renderProps, ctx => drawDotplot(ctx, { ...renderProps, views }));
         const results = await super.render({
             ...renderProps,
             ...ret,

package/esm/DotplotRenderer/drawDotplot.d.ts

@@ -0,0 +1,21 @@
+import { AnyConfigurationModel } from '@jbrowse/core/configuration';
+import { RenderArgsDeserialized } from '@jbrowse/core/pluggableElementTypes/renderers/ComparativeServerSideRendererType';
+import { Dotplot1DViewModel } from '../DotplotView/model';
+export interface DotplotRenderArgsDeserialized extends RenderArgsDeserialized {
+    adapterConfig: AnyConfigurationModel;
+    height: number;
+    width: number;
+    highResolutionScaling: number;
+    view: {
+        hview: Dotplot1DViewModel;
+        vview: Dotplot1DViewModel;
+    };
+}
+export declare function drawDotplot(ctx: CanvasRenderingContext2D, props: DotplotRenderArgsDeserialized & {
+    views: Dotplot1DViewModel[];
+}): Promise<{
+    warnings: {
+        message: string;
+        effect: string;
+    }[];
+}>;

package/esm/DotplotRenderer/drawDotplot.js

@@ -0,0 +1,213 @@
+import { readConfObject, } from '@jbrowse/core/configuration';
+import { bpToPx } from '@jbrowse/core/util/Base1DUtils';
+import { getSnapshot } from 'mobx-state-tree';
+import { MismatchParser } from '@jbrowse/plugin-alignments';
+import { createJBrowseTheme } from '@jbrowse/core/ui';
+const { parseCigar } = MismatchParser;
+const r = 'fell outside of range due to CIGAR string';
+const lt = '(less than min coordinate of feature)';
+const gt = '(greater than max coordinate of feature)';
+const fudgeFactor = 1; // allow 1px fuzzyness before warn
+function drawCir(ctx, x, y, r = 1) {
+    ctx.beginPath();
+    ctx.arc(x, y, r / 2, 0, 2 * Math.PI);
+    ctx.fill();
+}
+export async function drawDotplot(ctx, props) {
+    var _a, _b;
+    const { config, views, height, drawCigar, theme } = props;
+    const color = readConfObject(config, 'color');
+    const posColor = readConfObject(config, 'posColor');
+    const negColor = readConfObject(config, 'negColor');
+    const colorBy = readConfObject(config, 'colorBy');
+    const lineWidth = readConfObject(config, 'lineWidth');
+    const thresholds = readConfObject(config, 'thresholds');
+    const palette = readConfObject(config, 'thresholdsPalette');
+    const isCallback = config.color.isCallback;
+    const hview = views[0];
+    const vview = views[1];
+    const db1 = (_a = hview.dynamicBlocks.contentBlocks[0]) === null || _a === void 0 ? void 0 : _a.offsetPx;
+    const db2 = (_b = vview.dynamicBlocks.contentBlocks[0]) === null || _b === void 0 ? void 0 : _b.offsetPx;
+    const warnings = [];
+    ctx.lineWidth = lineWidth;
+    // we operate on snapshots of these attributes of the hview/vview because
+    // it is significantly faster than accessing the mobx objects
+    const { bpPerPx: hBpPerPx } = hview;
+    const { bpPerPx: vBpPerPx } = vview;
+    function clampWithWarnX(num, min, max, feature) {
+        const strand = feature.get('strand') || 1;
+        if (strand === -1) {
+            ;
+            [max, min] = [min, max];
+        }
+        if (num < min - fudgeFactor) {
+            let start = feature.get('start');
+            let end = feature.get('end');
+            const refName = feature.get('refName');
+            if (strand === -1) {
+                ;
+                [end, start] = [start, end];
+            }
+            warnings.push({
+                message: `feature at (X ${refName}:${start}-${end}) ${r} ${lt}`,
+                effect: 'clipped the feature',
+            });
+            return min;
+        }
+        if (num > max + fudgeFactor) {
+            const strand = feature.get('strand') || 1;
+            const start = strand === 1 ? feature.get('start') : feature.get('end');
+            const end = strand === 1 ? feature.get('end') : feature.get('start');
+            const refName = feature.get('refName');
+            warnings.push({
+                message: `feature at (X ${refName}:${start}-${end}) ${r} ${gt}`,
+                effect: 'clipped the feature',
+            });
+            return max;
+        }
+        return num;
+    }
+    function clampWithWarnY(num, min, max, feature) {
+        if (num < min - fudgeFactor) {
+            const mate = feature.get('mate');
+            const { refName, start, end } = mate;
+            warnings.push({
+                message: `feature at (Y ${refName}:${start}-${end}) ${r} ${lt}`,
+                effect: 'clipped the feature',
+            });
+            return min;
+        }
+        if (num > max + fudgeFactor) {
+            const mate = feature.get('mate');
+            const { refName, start, end } = mate;
+            warnings.push({
+                message: `feature at (Y ${refName}:${start}-${end}) ${r} ${gt}`,
+                effect: 'clipped the feature',
+            });
+            return max;
+        }
+        return num;
+    }
+    const hsnap = {
+        ...getSnapshot(hview),
+        staticBlocks: hview.staticBlocks,
+        width: hview.width,
+    };
+    const vsnap = {
+        ...getSnapshot(vview),
+        staticBlocks: vview.staticBlocks,
+        width: vview.width,
+    };
+    const t = createJBrowseTheme(theme);
+    for (const feature of hview.features || []) {
+        const strand = feature.get('strand') || 1;
+        const start = strand === 1 ? feature.get('start') : feature.get('end');
+        const end = strand === 1 ? feature.get('end') : feature.get('start');
+        const refName = feature.get('refName');
+        const mate = feature.get('mate');
+        const mateRef = mate.refName;
+        let r = 'black';
+        if (colorBy === 'identity') {
+            const identity = feature.get('identity');
+            for (let i = 0; i < thresholds.length; i++) {
+                if (identity > +thresholds[i]) {
+                    r = palette[i] || 'black';
+                    break;
+                }
+            }
+        }
+        else if (colorBy === 'meanQueryIdentity') {
+            r = `hsl(${feature.get('meanScore') * 200},100%,40%)`;
+        }
+        else if (colorBy === 'mappingQuality') {
+            r = `hsl(${feature.get('mappingQual')},100%,40%)`;
+        }
+        else if (colorBy === 'strand') {
+            r = strand === -1 ? negColor : posColor;
+        }
+        else if (colorBy === 'default') {
+            r = isCallback
+                ? readConfObject(config, 'color', { feature })
+                : color === '#f0f'
+                    ? t.palette.text.primary
+                    : color;
+        }
+        ctx.fillStyle = r;
+        ctx.strokeStyle = r;
+        const b10 = bpToPx({ self: hsnap, refName, coord: start });
+        const b20 = bpToPx({ self: hsnap, refName, coord: end });
+        const e10 = bpToPx({ self: vsnap, refName: mateRef, coord: mate.start });
+        const e20 = bpToPx({ self: vsnap, refName: mateRef, coord: mate.end });
+        if (b10 !== undefined &&
+            b20 !== undefined &&
+            e10 !== undefined &&
+            e20 !== undefined) {
+            const b1 = b10.offsetPx - db1;
+            const b2 = b20.offsetPx - db1;
+            const e1 = e10.offsetPx - db2;
+            const e2 = e20.offsetPx - db2;
+            if (Math.abs(b1 - b2) <= 4 && Math.abs(e1 - e2) <= 4) {
+                drawCir(ctx, b1, height - e1, lineWidth);
+            }
+            else {
+                let currX = b1;
+                let currY = e1;
+                const cigar = feature.get('CIGAR');
+                if (drawCigar && cigar) {
+                    const cigarOps = parseCigar(cigar);
+                    ctx.beginPath();
+                    ctx.moveTo(currX, height - currY);
+                    let lastDrawnX = currX;
+                    let lastDrawnY = currX;
+                    for (let i = 0; i < cigarOps.length; i += 2) {
+                        const val = +cigarOps[i];
+                        const op = cigarOps[i + 1];
+                        if (op === 'M' || op === '=' || op === 'X') {
+                            currX += (val / hBpPerPx) * strand;
+                            currY += val / vBpPerPx;
+                        }
+                        else if (op === 'D' || op === 'N') {
+                            currX += (val / hBpPerPx) * strand;
+                        }
+                        else if (op === 'I') {
+                            currY += val / vBpPerPx;
+                        }
+                        currX = clampWithWarnX(currX, b1, b2, feature);
+                        currY = clampWithWarnY(currY, e1, e2, feature);
+                        // only draw a line segment if it is bigger than 0.5px
+                        if (Math.abs(currX - lastDrawnX) > 0.5 ||
+                            Math.abs(currY - lastDrawnY) > 0.5) {
+                            ctx.lineTo(currX, height - currY);
+                            lastDrawnX = currX;
+                            lastDrawnY = currY;
+                        }
+                    }
+                    ctx.stroke();
+                }
+                else {
+                    ctx.beginPath();
+                    ctx.moveTo(b1, height - e1);
+                    ctx.lineTo(b2, height - e2);
+                    ctx.stroke();
+                }
+            }
+        }
+        else {
+            if (warnings.length <= 5) {
+                if (b10 === undefined || b20 === undefined) {
+                    warnings.push({
+                        message: `feature at (X ${refName}:${start}-${end}) not plotted, fell outside of range`,
+                        effect: 'feature not rendered',
+                    });
+                }
+                else {
+                    warnings.push({
+                        message: `feature at (Y ${mateRef}:${mate.start}-${mate.end}) not plotted, fell outside of range`,
+                        effect: 'feature not rendered',
+                    });
+                }
+            }
+        }
+    }
+    return { warnings };
+}

package/esm/DotplotView/components/{DotplotTooltip.d.ts → DotplotTooltipClick.d.ts}

@@ -1,17 +1,11 @@
 import React from 'react';
 import { DotplotViewModel } from '../model';
 type Coord = [number, number] | undefined;
-export declare const TooltipWhereMouseovered: ({ model, mouserect, mouserectClient, xdistance, }: {
-    model: DotplotViewModel;
-    mouserect: Coord;
-    mouserectClient: Coord;
-    xdistance: number;
-}) => React.JSX.Element | null;
-export declare const TooltipWhereClicked: ({ model, mousedown, mousedownClient, xdistance, ydistance, }: {
+export declare const DotplotTooltipClick: ({ model, mousedown, mousedownClient, xdistance, ydistance, }: {
     model: DotplotViewModel;
     mousedown: Coord;
     mousedownClient: Coord;
     xdistance: number;
     ydistance: number;
 }) => React.JSX.Element | null;
-export {};
+export default DotplotTooltipClick;

package/esm/DotplotView/components/DotplotTooltipClick.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { observer } from 'mobx-react';
+import BaseTooltip from '@jbrowse/core/ui/BaseTooltip';
+import { locstr } from './util';
+export const DotplotTooltipClick = observer(function ({ 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);
+    return mousedown && Math.abs(xdistance) > 3 && Math.abs(ydistance) > 3 ? (React.createElement(BaseTooltip, { clientPoint: { x, y } },
+        `x - ${locstr(mousedown[0], hview)}`,
+        React.createElement("br", null),
+        `y - ${locstr(viewHeight - mousedown[1], vview)}`,
+        React.createElement("br", null))) : null;
+});
+export default DotplotTooltipClick;

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { DotplotViewModel } from '../model';
+type Coord = [number, number] | undefined;
+declare const DotplotTooltipMouseover: ({ model, mouserect, mouserectClient, xdistance, }: {
+    model: DotplotViewModel;
+    mouserect: Coord;
+    mouserectClient: Coord;
+    xdistance: number;
+}) => React.JSX.Element | null;
+export default DotplotTooltipMouseover;

package/esm/DotplotView/components/DotplotTooltipMouseover.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { observer } from 'mobx-react';
+import BaseTooltip from '@jbrowse/core/ui/BaseTooltip';
+import { locstr } from './util';
+const DotplotTooltipMouseover = observer(function ({ model, mouserect, mouserectClient, xdistance, }) {
+    const { hview, vview, viewHeight } = model;
+    return mouserect ? (React.createElement(BaseTooltip, { placement: xdistance < 0 ? 'left' : 'right', clientPoint: mouserectClient
+            ? { x: mouserectClient[0], y: mouserectClient[1] }
+            : undefined },
+        `x - ${locstr(mouserect[0], hview)}`,
+        React.createElement("br", null),
+        `y - ${locstr(viewHeight - mouserect[1], vview)}`,
+        React.createElement("br", null))) : null;
+});
+export default DotplotTooltipMouseover;

package/esm/DotplotView/components/DotplotView.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, lazy, Suspense } from 'react';
 import { LoadingEllipses, Menu, ResizeHandle } from '@jbrowse/core/ui';
 import { observer } from 'mobx-react';
 import { transaction } from 'mobx';
@@ -7,7 +7,8 @@ import ImportForm from './ImportForm';
 import Header from './Header';
 import Grid from './Grid';
 import { VerticalAxis, HorizontalAxis } from './Axes';
-import { TooltipWhereClicked, TooltipWhereMouseovered } from './DotplotTooltip';
+const TooltipWhereClicked = lazy(() => import('./DotplotTooltipClick'));
+const TooltipWhereMouseovered = lazy(() => import('./DotplotTooltipMouseover'));
 const blank = { left: 0, top: 0, width: 0, height: 0 };
 const useStyles = makeStyles()(theme => ({
     spacer: {
@@ -194,8 +195,10 @@ const DotplotViewInternal = observer(function ({ model, }) {
                 React.createElement(VerticalAxis, { model: model }),
                 React.createElement(HorizontalAxis, { model: model }),
                 React.createElement("div", { ref: ref, className: classes.content },
-                    mouseOvered && validSelect ? (React.createElement(TooltipWhereMouseovered, { model: model, mouserect: mouserect, mouserectClient: mouserectClient, xdistance: xdistance })) : null,
-                    validSelect ? (React.createElement(TooltipWhereClicked, { model: model, mousedown: mousedown, mousedownClient: mousedownClient, xdistance: xdistance, ydistance: ydistance })) : null,
+                    mouseOvered && validSelect ? (React.createElement(Suspense, { fallback: null },
+                        React.createElement(TooltipWhereMouseovered, { model: model, mouserect: mouserect, mouserectClient: mouserectClient, xdistance: xdistance }))) : null,
+                    validSelect ? (React.createElement(Suspense, { fallback: null },
+                        React.createElement(TooltipWhereClicked, { model: model, mousedown: mousedown, mousedownClient: mousedownClient, xdistance: xdistance, ydistance: ydistance }))) : null,
                     React.createElement("div", { style: { cursor: ctrlKeyDown ? 'pointer' : cursorMode }, onMouseDown: event => {
                             if (event.button === 0) {
                                 const { clientX, clientY } = event;

package/esm/DotplotView/model.d.ts

@@ -194,6 +194,7 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
         trackMenuItems(): (import("@jbrowse/core/ui").MenuDivider | import("@jbrowse/core/ui").MenuSubHeader | import("@jbrowse/core/ui").NormalMenuItem | import("@jbrowse/core/ui").CheckboxMenuItem | import("@jbrowse/core/ui").RadioMenuItem | import("@jbrowse/core/ui").SubMenuItem | {
             type: string;
             label: string;
+            priority: number;
             subMenu: {
                 type: string;
                 label: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-dotplot-view",
-  "version": "2.15.0",
+  "version": "2.15.1",
   "description": "JBrowse 2 dotplot view",
   "keywords": [
     "jbrowse",
@@ -61,5 +61,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "87eeb1fbf8311dbf88d5e75b5a265f03beffdda8"
+  "gitHead": "86ed70124fc5a0b1161266659d1ca9f8796bf3fe"
 }