@jbrowse/plugin-dotplot-view 2.15.0 → 2.15.1

package/dist/DotplotDisplay/stateModelFactory.d.ts

@@ -25,7 +25,12 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
     error: unknown;
     message: string | undefined;
 } & {
-    readonly RenderingComponent: React.FC<{
+    readonly RenderingComponent: React.
+    /**
+     * #stateModel DotplotDisplay
+     * #category display
+     */
+    FC<{
         model: {
             id: string;
             type: string;

package/dist/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/dist/DotplotRenderer/DotplotRenderer.js

@@ -1,27 +1,35 @@
 "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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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 configuration_1 = require("@jbrowse/core/configuration");
 const util_1 = require("@jbrowse/core/util");
-const Base1DUtils_1 = require("@jbrowse/core/util/Base1DUtils");
-const mobx_state_tree_1 = require("mobx-state-tree");
 const ComparativeServerSideRendererType_1 = __importDefault(require("@jbrowse/core/pluggableElementTypes/renderers/ComparativeServerSideRendererType"));
-const plugin_alignments_1 = require("@jbrowse/plugin-alignments");
 // locals
 const model_1 = require("../DotplotView/model");
-const ui_1 = require("@jbrowse/core/ui");
-const { parseCigar } = plugin_alignments_1.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();
-}
 class DotplotRenderer extends ComparativeServerSideRendererType_1.default {
     constructor() {
         super(...arguments);
@@ -47,204 +55,6 @@ class DotplotRenderer extends ComparativeServerSideRendererType_1.default {
         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 = (0, configuration_1.readConfObject)(config, 'color');
-        const posColor = (0, configuration_1.readConfObject)(config, 'posColor');
-        const negColor = (0, configuration_1.readConfObject)(config, 'negColor');
-        const colorBy = (0, configuration_1.readConfObject)(config, 'colorBy');
-        const lineWidth = (0, configuration_1.readConfObject)(config, 'lineWidth');
-        const thresholds = (0, configuration_1.readConfObject)(config, 'thresholds');
-        const palette = (0, configuration_1.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 = {
-            ...(0, mobx_state_tree_1.getSnapshot)(hview),
-            staticBlocks: hview.staticBlocks,
-            width: hview.width,
-        };
-        const vsnap = {
-            ...(0, mobx_state_tree_1.getSnapshot)(vview),
-            staticBlocks: vview.staticBlocks,
-            width: vview.width,
-        };
-        const t = (0, ui_1.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
-                    ? (0, configuration_1.readConfObject)(config, 'color', { feature })
-                    : color === '#f0f'
-                        ? t.palette.text.primary
-                        : color;
-            }
-            ctx.fillStyle = r;
-            ctx.strokeStyle = r;
-            const b10 = (0, Base1DUtils_1.bpToPx)({ self: hsnap, refName, coord: start });
-            const b20 = (0, Base1DUtils_1.bpToPx)({ self: hsnap, refName, coord: end });
-            const e10 = (0, Base1DUtils_1.bpToPx)({ self: vsnap, refName: mateRef, coord: mate.start });
-            const e20 = (0, Base1DUtils_1.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;
@@ -260,7 +70,8 @@ class DotplotRenderer extends ComparativeServerSideRendererType_1.default {
             regions: target.dynamicBlocks.contentBlocks,
         });
         target.setFeatures(feats);
-        const ret = await (0, util_1.renderToAbstractCanvas)(width, height, renderProps, ctx => this.drawDotplot(ctx, { ...renderProps, views }));
+        const { drawDotplot } = await Promise.resolve().then(() => __importStar(require('./drawDotplot')));
+        const ret = await (0, util_1.renderToAbstractCanvas)(width, height, renderProps, ctx => drawDotplot(ctx, { ...renderProps, views }));
         const results = await super.render({
             ...renderProps,
             ...ret,

package/dist/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/dist/DotplotRenderer/drawDotplot.js

@@ -0,0 +1,216 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.drawDotplot = drawDotplot;
+const configuration_1 = require("@jbrowse/core/configuration");
+const Base1DUtils_1 = require("@jbrowse/core/util/Base1DUtils");
+const mobx_state_tree_1 = require("mobx-state-tree");
+const plugin_alignments_1 = require("@jbrowse/plugin-alignments");
+const ui_1 = require("@jbrowse/core/ui");
+const { parseCigar } = plugin_alignments_1.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();
+}
+async function drawDotplot(ctx, props) {
+    var _a, _b;
+    const { config, views, height, drawCigar, theme } = props;
+    const color = (0, configuration_1.readConfObject)(config, 'color');
+    const posColor = (0, configuration_1.readConfObject)(config, 'posColor');
+    const negColor = (0, configuration_1.readConfObject)(config, 'negColor');
+    const colorBy = (0, configuration_1.readConfObject)(config, 'colorBy');
+    const lineWidth = (0, configuration_1.readConfObject)(config, 'lineWidth');
+    const thresholds = (0, configuration_1.readConfObject)(config, 'thresholds');
+    const palette = (0, configuration_1.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 = {
+        ...(0, mobx_state_tree_1.getSnapshot)(hview),
+        staticBlocks: hview.staticBlocks,
+        width: hview.width,
+    };
+    const vsnap = {
+        ...(0, mobx_state_tree_1.getSnapshot)(vview),
+        staticBlocks: vview.staticBlocks,
+        width: vview.width,
+    };
+    const t = (0, ui_1.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
+                ? (0, configuration_1.readConfObject)(config, 'color', { feature })
+                : color === '#f0f'
+                    ? t.palette.text.primary
+                    : color;
+        }
+        ctx.fillStyle = r;
+        ctx.strokeStyle = r;
+        const b10 = (0, Base1DUtils_1.bpToPx)({ self: hsnap, refName, coord: start });
+        const b20 = (0, Base1DUtils_1.bpToPx)({ self: hsnap, refName, coord: end });
+        const e10 = (0, Base1DUtils_1.bpToPx)({ self: vsnap, refName: mateRef, coord: mate.start });
+        const e20 = (0, Base1DUtils_1.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/dist/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/dist/DotplotView/components/DotplotTooltipClick.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DotplotTooltipClick = void 0;
+const react_1 = __importDefault(require("react"));
+const mobx_react_1 = require("mobx-react");
+const BaseTooltip_1 = __importDefault(require("@jbrowse/core/ui/BaseTooltip"));
+const util_1 = require("./util");
+exports.DotplotTooltipClick = (0, mobx_react_1.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_1.default.createElement(BaseTooltip_1.default, { clientPoint: { x, y } },
+        `x - ${(0, util_1.locstr)(mousedown[0], hview)}`,
+        react_1.default.createElement("br", null),
+        `y - ${(0, util_1.locstr)(viewHeight - mousedown[1], vview)}`,
+        react_1.default.createElement("br", null))) : null;
+});
+exports.default = exports.DotplotTooltipClick;

package/dist/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/dist/DotplotView/components/DotplotTooltipMouseover.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const mobx_react_1 = require("mobx-react");
+const BaseTooltip_1 = __importDefault(require("@jbrowse/core/ui/BaseTooltip"));
+const util_1 = require("./util");
+const DotplotTooltipMouseover = (0, mobx_react_1.observer)(function ({ model, mouserect, mouserectClient, xdistance, }) {
+    const { hview, vview, viewHeight } = model;
+    return mouserect ? (react_1.default.createElement(BaseTooltip_1.default, { placement: xdistance < 0 ? 'left' : 'right', clientPoint: mouserectClient
+            ? { x: mouserectClient[0], y: mouserectClient[1] }
+            : undefined },
+        `x - ${(0, util_1.locstr)(mouserect[0], hview)}`,
+        react_1.default.createElement("br", null),
+        `y - ${(0, util_1.locstr)(viewHeight - mouserect[1], vview)}`,
+        react_1.default.createElement("br", null))) : null;
+});
+exports.default = DotplotTooltipMouseover;

package/dist/DotplotView/components/DotplotView.js

@@ -35,7 +35,8 @@ const ImportForm_1 = __importDefault(require("./ImportForm"));
 const Header_1 = __importDefault(require("./Header"));
 const Grid_1 = __importDefault(require("./Grid"));
 const Axes_1 = require("./Axes");
-const DotplotTooltip_1 = require("./DotplotTooltip");
+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 useStyles = (0, mui_1.makeStyles)()(theme => ({
     spacer: {
@@ -222,8 +223,10 @@ const DotplotViewInternal = (0, mobx_react_1.observer)(function ({ model, }) {
                 react_1.default.createElement(Axes_1.VerticalAxis, { model: model }),
                 react_1.default.createElement(Axes_1.HorizontalAxis, { model: model }),
                 react_1.default.createElement("div", { ref: ref, className: classes.content },
-                    mouseOvered && validSelect ? (react_1.default.createElement(DotplotTooltip_1.TooltipWhereMouseovered, { model: model, mouserect: mouserect, mouserectClient: mouserectClient, xdistance: xdistance })) : null,
-                    validSelect ? (react_1.default.createElement(DotplotTooltip_1.TooltipWhereClicked, { model: model, mousedown: mousedown, mousedownClient: mousedownClient, xdistance: xdistance, ydistance: ydistance })) : null,
+                    mouseOvered && validSelect ? (react_1.default.createElement(react_1.Suspense, { fallback: null },
+                        react_1.default.createElement(TooltipWhereMouseovered, { model: model, mouserect: mouserect, mouserectClient: mouserectClient, xdistance: xdistance }))) : null,
+                    validSelect ? (react_1.default.createElement(react_1.Suspense, { fallback: null },
+                        react_1.default.createElement(TooltipWhereClicked, { model: model, mousedown: mousedown, mousedownClient: mousedownClient, xdistance: xdistance, ydistance: ydistance }))) : null,
                     react_1.default.createElement("div", { style: { cursor: ctrlKeyDown ? 'pointer' : cursorMode }, onMouseDown: event => {
                             if (event.button === 0) {
                                 const { clientX, clientY } = event;

package/dist/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/esm/DotplotDisplay/stateModelFactory.d.ts

@@ -25,7 +25,12 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
     error: unknown;
     message: string | undefined;
 } & {
-    readonly RenderingComponent: React.FC<{
+    readonly RenderingComponent: React.
+    /**
+     * #stateModel DotplotDisplay
+     * #category display
+     */
+    FC<{
         model: {
             id: string;
             type: string;